rrjanbiah / react2solid

ReactJS to SolidJS Converter aka Transpiler
https://rrjanbiah.github.io/react2solid/
MIT License
49 stars 0 forks source link

Reactivity doesn't work with Monaco Editor #6

Open rrjanbiah opened 2 years ago

rrjanbiah commented 2 years ago

Quick screenshot

solidjs-monaco-editor-reactivity-issue

Couple of attempts and issues

1. Initial prop value is not displayed

As shown above in the screenshot, the initial value https://github.com/rrjanbiah/react2solid/commit/73dddc2148dd5577876c2d663a56325c00bc26a6#diff-053b5eba3c3af678cb843b0c39eae61ba0ff1f3e1e1aca2fd849ba6865463415R11 is not updated

If we toggle the commented out model option https://github.com/rrjanbiah/react2solid/commit/73dddc2148dd5577876c2d663a56325c00bc26a6#diff-80a3eeafadcae4feb5b050f8cd004033d0f4c6e4b50bf4e2a5095979d5849b07R41, it works once when it hot loads. But, if we refresh the page, it doesn't work.

2. Create effect hook is triggered only once (too early?)

As shown in the above screenshot (check JavaScript console part), it is triggered only once https://github.com/rrjanbiah/react2solid/commit/73dddc2148dd5577876c2d663a56325c00bc26a6#diff-80a3eeafadcae4feb5b050f8cd004033d0f4c6e4b50bf4e2a5095979d5849b07R54

3. editor?.setValue(props.code); in createEffect throws Uncaught TypeError: factory.create is not a function

Uncommenting https://github.com/rrjanbiah/react2solid/commit/73dddc2148dd5577876c2d663a56325c00bc26a6#diff-80a3eeafadcae4feb5b050f8cd004033d0f4c6e4b50bf4e2a5095979d5849b07R52 throws:

Uncaught TypeError: factory.create is not a function
    at createTextBuffer (textModel.js:55:20)
    at TextModel2.setValue (textModel.js:259:44)
    at StandaloneEditor2.setValue (codeEditorWidget.js:287:31)
    at Object.fn (SolidCodeEditor.tsx:52:17)
    at runComputation (dev.js:705:22)
    at updateComputation (dev.js:690:3)
    at runTop (dev.js:780:7)
    at runUserEffects (dev.js:880:36)
    at dev.js:840:5
    at batch (dev.js:415:14)

Offending line in SolidCodeEditor.tsx:52:17 is

editor?.setValue(props.code);

Offending line in codeEditorWidget.js:287:31 is

this._modelData.model.setValue(newValue);

4. editor?.setValue(props.code()); in createEffect throws Uncaught TypeError: Cannot read properties of undefined (reading 'create')

Uncommenting https://github.com/rrjanbiah/react2solid/commit/73dddc2148dd5577876c2d663a56325c00bc26a6#diff-80a3eeafadcae4feb5b050f8cd004033d0f4c6e4b50bf4e2a5095979d5849b07R53 throws:

Uncaught TypeError: Cannot read properties of undefined (reading 'create')
    at createTextBuffer (textModel.js:55:20)
    at TextModel2.setValue (textModel.js:259:44)
    at StandaloneEditor2.setValue (codeEditorWidget.js:287:31)
    at Object.fn (SolidCodeEditor.tsx:53:18)
    at runComputation (dev.js:705:22)
    at updateComputation (dev.js:690:3)
    at runTop (dev.js:780:7)
    at runUserEffects (dev.js:880:36)
    at dev.js:840:5
    at batch (dev.js:415:14)

Offending lines in SolidCodeEditor.tsx:53:18 is

 editor?.setValue(props.code());

Offending lines in codeEditorWidget.js:287:31 is

this._modelData.model.setValue(newValue);

In short, the editor's value through props is not updated (I'm sure, the codes are wrapped in onMount) and createEffect is triggered only once, but results in error.