Inline widget

[d4rekanguok]

Hey @jonaseltes, let's continue our conversation from decaporg/decap-cms#800 here to avoid unnecessary notifications for people there!

I thought supporting inline widget would be a no-brainer, just add a umd target and be done with it. But then I quickly realized that I would be bundling another copy of React + Immutable, on top of the ones that come with netlify-cms.

If I understand correctly, to avoid duplicating React, we'd need to use the createClass & h functions provided globally by netlify-cms instead of creating class & write JSX directly with React. Swapping the pragma is no problem with babel, but we'd need a custom plugin for createClass. That leaves us with a duplicate of Immutable, but we might be able to treeshake it off so the final bundle size is not so terrible.

I want to do this, but it could be quite a bit of effort. In the mean time, if you're open to setting up a bundler, it'd be fairly easy & I can offer some help! Otherwise, I think the easiest thing to do is to copy the code over, modify them manually to use createClass & h, then inline another copy of immutable. I could offer you some help there as well.

[d4rekanguok]

@jonaseltes Here's an example for file-relation adapted to be used inline

[jonaseltes]

@d4rekanguok Ah, massive thanks for the example! So sorry for not looking into this myself. Is it dependent on using babel and parcel?

[d4rekanguok]

No the example code doesn't require babel or parcel, the only es6 features I use are const and arrow functions. It should work without issues in all modern browsers. If es5 is required, you can convert const to var and arrow functions to regular functions!

Since I use a regular <select /> element to avoid bringing in extra deps, some features are missing:

• no multi select
• no type ahead

[jonaseltes]

Amazing, thanks a lot @d4rekanguok! Hope to find some time to try it out later tonight, will keep you posted. Thanks for mentioning the constraints of the <select /> , makes sense!

[d4rekanguok]

I'm happy to help, let me know if you run into any issue setting it up!

[d4rekanguok]

@jonaseltes I've just got this idea: what if I provide a custom netlify-cms package that includes all of my custom widgets?? That way, you can use them as if they're official, without inlining widgets at all. I can probably somehow automate watching for new version released by netlify-cms and automatically create a new bundle, so the core package is never out of date.

This is the solution that required the least amount of additional work that I can think of. Any thoughts? Would you be open to use a 3rd party bundled netlify-cms?

[jonaseltes]

@d4rekanguok Sorry for the delay. For now the inlined version works great for me but a bundled netlify-cms could obviously be great for the future!

Let us know if you decide to go down this route and have anything to share. And big thanks for your amazing work on this!

[kauly]

@jonaseltes Here's an example for file-relation adapted to be used inline

The demo is broken with a productionloadEntry(...).then is not a function error.

[d4rekanguok]

@kauly thanks for the note, I'll check it out the next chance I have

[d4rekanguok]

The widgets are broken in latest version of netlify-cms-app unfortunately. Please pin your netlify-cms-app version to the last knowm working one: 2.9.7.

Sorry about this, I'll open an issue upstream to see if we can resolve this.

Please track the issue at #25

[kauly]

I think that the last version do not have a loadentry func. The component is receiving a empty func. Thanks for the anwsers.

[kauly]

Thanks for the fix @d4rekanguok . If you update the netlify-cms in yours index.html will work now.
https://codesandbox.io/s/admiring-field-qqki9

[kauly]

Just a addendum, in my case results.data[fieldName] its returning a array of strings. So was necessary make changes in the options map here in my code.

[d4rekanguok]

Hello! I've finally build a custom netlify-cms that includes @ncwidgets/file-relation & @ncwidgets/id out of the box.

Please see here: https://github.com/d4rekanguok/netlify-cms-widgets#drop-in

Will close this issue now!