What's your opinion about using ReactJS in the plugin?

Developers
,
#1

I’m creating a new plugin that shows blue box style field editor below the tiddler.

I’d like to use GitHub - rjsf-team/react-jsonschema-form: A React component for building Web forms from JSON Schema. as it will save lots of dev time. But using it will involve ReactJS.

Do you think using React will have any trouble when creating widgets? Or are there any drawbacks when using these “new” web tools? Maybe I should wrap react part into a web component, or just render react into dom in the render() lifecycle of widget?

And there seems to be no remove lifecycle, so there is no way to unmount existed react node.

Use react components in TiddlyWiki!
#2

Old threads

https://groups.google.com/g/tiddlywiki/c/PzgaUArIPGQ/m/2NbRwMYeAgAJ

Whenever you make a change to any data in a TW web-page, that change is communicated up the “tree of widgets” (a Javascript-object model native to TW which is used as an internal state mechanism), and if necessary the new widget tree renders a new DOM (& that gets re-rendered onscreen via the browser).

Where-as with REACT, “React is unaware of changes made to the DOM outside of React. It determines updates based on its own internal representation, and if the same DOM nodes are manipulated by another library, React gets confused and has no way to recover.”

https://groups.google.com/g/tiddlywiki/c/QPcHylUxdH8/m/s5m6L2X0AAAJ

Seems no one before discussed about the widget lifecycle and how to avoid react render multiple times when widget gets update.

#3

Hi @linonetwo I have not seen any experiments with encapsulating React components within TW widgets. I would expect that the fact that widgets don’t have a “destroy” method would make it hard to duplicate the expected lifecycle of React components.

As you suggest, writing a custom web component in React may make the integration with TW simpler. I imagine one could define the component in a startup module, and then just use it directly in wikitext.

#4

Specific to jsonschema, long ago, I wrote a jsoneditor widget (demo at JSON Editor TW5 demo — a non-linear personal web notebook)

But @joshuafontany forked and much improved it (though I’m finding his demo site to be unreachable currently: https://joshuafontany.github.io/TW5-jsoneditor/).

Using the render() widget lifecycle should work fine for react widgets. The key thing is that there needs to be a way to serialize the internal state of the react widget and save it to some tiddler field. That way if the dom element is destroyed during the normal tiddlywiki refresh cycle, the widget can be restored to its former state when re-drawn.

The underlying javascript library for jsoneditor provides an onChange callback which makes it possible to keep the tiddler field in sync with the jsoneditor internal state. I see the reactjs library you linked to also has an onChange callback.

Avoiding extra refreshes (and possible infinite loop of refresh) requires care. Updating a tiddler field from the onChange callback triggers the tiddlywiki refresh to be propagated through the widget tree. Since the change came from the internal jsoneditor widget, there is no need to refresh it. Therefore, the onChange callback needs to keep track of the serialized state and only refresh when the state from the tiddler field was independently changed to something different.

I found that difficult to describe. I hope my point is clear.

1 Like
#5

Beta release of React plugin GitHub - tiddly-gittly/tw-react: TiddlyWiki React Widget

When installing

  1. Smart Form plugin - beta release - Display different form based on the tag you add
  2. FlowTiwi - a Multi-column draggable resizable sidebar (beta release)
  3. Demo of a new WYSIWYG editor: slate-write (unstable alpha stage)

from TiddlyWiki-CPL: TiddlyWiki world of Google App Store! , this will be automatically installed as a dependency.