Upgrade to Svelte 5 #476

josdejong · 2024-08-01T11:03:17Z

Issues when upgrading to Svelte 5

Solve the Rollup bundle being broken. The build succeeds but when actually loading the standalone.js editor in a browser we get an error: "TypeError: props is undefined"

Uncaught TypeError: props is undefined
	prop props.js:226
	JSONEditor JSONEditor.svelte:60
	<anonymous> develop-vanilla.html:198

Which is erroring at the first loaded component at the first line where a property is created:

 export let content: Content = { text: '' }

 // code from svelte
 export function prop(props, key, flags, fallback) {
 	var immutable = (flags & PROPS_IS_IMMUTABLE) !== 0;
 	var runes = (flags & PROPS_IS_RUNES) !== 0;
 	var lazy = (flags & PROPS_IS_LAZY_INITIAL) !== 0;

 	var prop_value = /** @type {V} */ (props[key]);    // <-- error at this line
 	var setter = get_descriptor(props, key)?.set;

Update documentation and examples on the API to create an editor: createJSONEditor(...) instead of new JSONEditor(...)
Refactor updateProps(...) so it doesn't use the deprecated this.$set(...)
Get rid of the need to configure compatibility: { componentApi: 4 }

Solve the circular dependency issues reported when bundling using Rollup (an issue in Svelte?)

(!) Circular dependencies
node_modules/svelte/src/internal/client/reactivity/effects.js -> node_modules/svelte/src/internal/client/runtime.js -> node_modules/svelte/src/internal/client/reactivity/effects.js
node_modules/svelte/src/internal/client/reactivity/effects.js -> node_modules/svelte/src/internal/client/runtime.js -> node_modules/svelte/src/internal/client/dev/ownership.js -> node_modules/svelte/src/internal/client/reactivity/effects.js
node_modules/svelte/src/internal/client/runtime.js -> node_modules/svelte/src/internal/client/dev/ownership.js -> node_modules/svelte/src/internal/client/runtime.js
node_modules/svelte/src/internal/client/runtime.js -> node_modules/svelte/src/internal/client/reactivity/sources.js -> node_modules/svelte/src/internal/client/runtime.js
node_modules/svelte/src/internal/client/runtime.js -> node_modules/svelte/src/internal/client/reactivity/deriveds.js -> node_modules/svelte/src/internal/client/runtime.js

All dependencies must support Svelte 5. Current dependencies with issues:
- [email protected]
- [email protected]
- ~~[email protected]~~
Fix the UI unit tests not working (try npm test): "Svelte error: lifecycle_function_unavailable mount(...) is not available on the server"
Fix issues with event handlers: cannot edit a value by double-clicking it. Double clicking a key works. (tree and table mode)
Fix styling issues: styling of selection and hovering background does not work when hovering an expanded array or object, or when selecting a number of properties in an object (tree mode). Solve all the Unused CSS selector compiler warnings.
Fix all compiler warnings
Remove deprecated Svelte option <svelte:options immutable={true} />
Replace occurrences of <div /> with <div></div>

To do's:

Convert the code to runes
Do a thorough manual testing round
Test for any performance regressions
Test using the library in a Svelte 4, Svelte 5, vanilla, and React (TS) project
Replace rollup scripts with Vite scripts?

…ctures (#450) BREAKING CHANGE: Though the editor functions exactly the same, this refactor changes the internal core data structures, so be careful.

BREAKING CHANGE: Changed the API to consistently use `undefined` instead of `null`. This involves properties `selection`, `onChange` (properties `contentErrors and `patchResult`), `onRenderContextMenu` (property `selection`), `onSelect`, and methods `validate`, and `select`.

…ilst editing a value

BREAKING CHANGE: Old deprecation messages are removed.

…Compact" button

BREAKING CHANGE: The API of the `expand` function is changed from `expand(callback)` to `expand(path, callback)`, and can't be used anymore for collapsing nodes. Instead, use the `collapse(path)` method for that.

…endencies

… the editor

# Conflicts: # package-lock.json # package.json

…pen` property

dominikg · 2024-08-01T11:19:14Z

fyi svelte-hmr isn't used with svelte5, its builtin now (compilerOptions.hmr).

josdejong · 2024-08-01T13:50:43Z

Ah, you're right, thanks. I've removed my local node_modules and package-lock.json and run npm i --force again, now svelte-hmr doesn't popup again so I guess it was a left over from the Svelte 4 dependencies.

dominikg · 2024-08-01T13:59:32Z

rollup-plugin-svelte should work with svelte5 too, it has >=3 in peer and the implementation checks for .svelte.js files too and compiles them with compileModule

dominikg · 2024-08-01T14:01:47Z

if you encounter errors with rollup-plugin-svelte and svelte5, a report with a minimal reproduction to it's repo would help us.

josdejong · 2024-08-01T16:38:24Z

Yes I will try that.

josdejong · 2024-08-01T19:27:26Z

Ok @dominikg here you go: I created a new, empty Svelte project using npm create svelte@latest, upgraded it to Svelte 5, added a minimal component and Rollup config. The steps to reproduce are described in the README:

https://github.com/josdejong/test-svelte5-rollup

I hope this helps pinpointing the issue.

dominikg · 2024-08-01T21:26:57Z

i'm not sure i follow why you want to build with rollup like that. If you are publishing a svelte library, i suggest you take a look at svelte-package.

For your reproduction, please note that in svelte5, components are not classes anymore by default:
https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes (although there is a compiler option to opt in to support)

you'd also have to bundle the svelte runtime, for it to work, but this is something i would not recommend doing.

josdejong · 2024-08-02T08:36:23Z

i'm not sure i follow why you want to build with rollup like that. If you are publishing a svelte library, i suggest you take a look at svelte-package.

I publish two versions of this library:

svelte-jsoneditor for use in Svelte, using svelte-package and everyting.
vanilla-jsoneditor for use in vanilla JS, Vue, React, Angular, etc. Here, I use Rollup to create a standalone bundle.

For your reproduction, please note that in svelte5, components are not classes anymore by default

Ahhh I get it, thanks for the pointer. I had seen these docs but for some reason it didn't land before 😅. The bundle works after using mount(Test, ...) instead of new Test(...) and adding a CSS processor, see this commit. I'll think through what API to offer to the users of the vanilla bundle, some factory function I think.

@dominikg do you think Svelte can fix the circular dependency issues reported by Rollup?

(!) Circular dependencies
node_modules/svelte/src/internal/client/reactivity/effects.js -> node_modules/svelte/src/internal/client/runtime.js -> node_modules/svelte/src/internal/client/reactivity/effects.js
node_modules/svelte/src/internal/client/reactivity/effects.js -> node_modules/svelte/src/internal/client/runtime.js -> node_modules/svelte/src/internal/client/dev/ownership.js -> node_modules/svelte/src/internal/client/reactivity/effects.js
node_modules/svelte/src/internal/client/runtime.js -> node_modules/svelte/src/internal/client/dev/ownership.js -> node_modules/svelte/src/internal/client/runtime.js
node_modules/svelte/src/internal/client/runtime.js -> node_modules/svelte/src/internal/client/reactivity/sources.js -> node_modules/svelte/src/internal/client/runtime.js
node_modules/svelte/src/internal/client/runtime.js -> node_modules/svelte/src/internal/client/reactivity/deriveds.js -> node_modules/svelte/src/internal/client/runtime.js

dominikg · 2024-08-02T09:11:42Z

instead of exposing mount/unmount or even the svelte component to consumers i'd recommend exporting a createInstance(targetSelector,props) function that returns a destroy function. That way vanilla consumers don't have to interact with svelte at all and you are free to change the internals in case a different version of svelte does it differently yet again.

josdejong · 2024-08-02T09:21:53Z

Thanks for the suggestion. I cannot find this createInstance though (not exposed in svelte or svelte/legacy or anything as far as I can see). But I expect I cannot use it since I want to return an instance of the editor with methods that can be used by vanilla users. Methods like .select(), .expand(...), .collapse(...), .scrollTo(...) etc, so just returning a destroy function is not enough.

I was thinking about this approach right now:

// factory function
export function createJSONEditor({ target, props }: Parameters<typeof mount>[1]) {
  return mount(JSONEditor, { target, props })
}

// and in the JSONEditor.svelte component: 
export async function destroy() {
  unmount(this)

  await tick() // await destroying
}

Not the most beautiful but it works 😅

dominikg · 2024-08-02T09:28:25Z

that destroy function is creative/clever. I was suggesting you make the factory function yourself, so what you posted is pretty much what i meant 👍

josdejong · 2024-08-02T09:38:07Z

😂 OK 👍

Thanks for the help! I'm really happy that I the library is mostly working now, I expect I can figure out the issues related to styling and event handling myself.

dominikg · 2024-08-02T10:13:50Z

great, happy svelting

thumb up and subscribe here for the circular dependencies sveltejs/svelte#10140

benmccann · 2024-09-09T18:34:28Z

I would suggest breaking this PR up into smaller parts. Quite a lot of these changes like removing <svelte:options immutable={true} /> and changing <td /> to <td></td> are changes that would be compatible with Svelte 4 and that could be merged without addressing all of the other issues. That would make it a bit easier to manage, to avoid merge conflict, see what is working vs still in progress, etc.

All dependencies must support Svelte 5. Current dependencies with issues:
[email protected]

I was using svelte-awesome in my site for a long time without issue

Replace rollup scripts with Vite scripts?

I generally prefer rollup to Vite's library mode. Svelte package might be worth checking out. But probably best to avoid trying to bite off even more as part of this PR

josdejong · 2024-09-10T08:20:57Z

Thanks for your feedback Ben (and good luck with finishing svelte 5.0, I see it's close!).

I may indeed use this PR just as experiment to explore what fixes/changes have to be done if there are a lot of merge conflicts.

josdejong · 2024-10-15T10:02:18Z

Closing this PR in favor of #490, where as many as issues as possible are solved directly in the main branch.

josdejong added 30 commits May 6, 2024 15:51

chore: upgrade to svelte 5 (WIP)

b322bcf

chore: refactor the data structures holding state into recursive stru…

19e2a58

…ctures (#450) BREAKING CHANGE: Though the editor functions exactly the same, this refactor changes the internal core data structures, so be careful.

chore: update devDependencies

ed66b0b

fix: short cut key Ctrl+F and Ctrl+H not working in table mode wh…

18c4743

…ilst editing a value

chore: cleanup deprecation messages

47683d4

BREAKING CHANGE: Old deprecation messages are removed.

chore: update devDependencies

a3aeedd

chore: upgrade to the latest version of svelte@5

c098332

chore: run npm audit fix

3bda70e

fix: the do you want to format message popped up after clicking the "…

8c436ed

…Compact" button

Merge branch 'refs/heads/main' into v1

f257b24

feat: implemented a powerful API for expand and collapse (#458)

1e1e85c

BREAKING CHANGE: The API of the `expand` function is changed from `expand(callback)` to `expand(path, callback)`, and can't be used anymore for collapsing nodes. Instead, use the `collapse(path)` method for that.

feat: upgrade to the latest version of codemirror and update devDep…

4b2daf5

…endencies

fix: in table mode, exit editing a key or value when clicking outside…

416cba2

… the editor

Merge branch 'refs/heads/v1' into feat/svelte5

1f1d548

# Conflicts: # package-lock.json # package.json

chore: upgrade to [email protected]

1ee2a21

chore: remove the deprecated immutable option

bddcbe2

chore: define svelte@4 or svelte@5 as peer dependency

5493333

chore: replace self-closing HTML tags with regular HTML tags

cdbe395

chore: fix a linting issue

affd63e

chore: add a TODO to fully migrate to Svelte 5 runes

4120f29

chore: reorder some CSS to fix some styling issues in Svelte 5 (WIP)

9234a59

fix: define svelte@4 as a peer dependency

1936750

fix: update test snapshots

5d5124a

feat: use dialog for SortModal and CopyPasteModal (WIP)

f2c3afb

chore: refactor the Modal to have an onClose callback instead of `o…

f3e6b09

…pen` property

chore: refactor the TransformModal to use dialog (WIP)

22588bb

chore: change husky install into husky

3586283

chore: update package-lock.json

55aca06

chore: refactor JSONRepairModal to use dialog

58072b4

josdejong added 6 commits July 30, 2024 12:31

chore: fix linting issues

fb60a9c

chore: update test snapshots

ff859f1

Merge branch 'refs/heads/v1' into feat/svelte5

6f30e50

chore: update devDependencies

dec80f9

chore: remove passing parser to function getEnforceString

5edb7c5

Merge branch 'refs/heads/v1' into feat/svelte5

815de5d

josdejong mentioned this pull request Aug 1, 2024

Svelte 5: List of libraries not working out of the box sveltejs/svelte#10359

Open

josdejong mentioned this pull request Aug 1, 2024

Svelte 5 support #452

Closed

chore: update package-lock.json

33c860a

chore: get the Rollup bundle working (WIP)

6c2a2eb

mantulen mentioned this pull request Sep 24, 2024

TransformWizard.svelte is missing tbody tag inside table #485

Closed

Base automatically changed from v1 to main September 24, 2024 11:53

josdejong closed this Oct 15, 2024

josdejong deleted the feat/svelte5 branch October 24, 2024 07:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade to Svelte 5 #476

Upgrade to Svelte 5 #476

josdejong commented Aug 1, 2024 •

edited

Loading

dominikg commented Aug 1, 2024

josdejong commented Aug 1, 2024

dominikg commented Aug 1, 2024

dominikg commented Aug 1, 2024

josdejong commented Aug 1, 2024

josdejong commented Aug 1, 2024

dominikg commented Aug 1, 2024

josdejong commented Aug 2, 2024

dominikg commented Aug 2, 2024

josdejong commented Aug 2, 2024

dominikg commented Aug 2, 2024

josdejong commented Aug 2, 2024

dominikg commented Aug 2, 2024

benmccann commented Sep 9, 2024

josdejong commented Sep 10, 2024

josdejong commented Oct 15, 2024

Upgrade to Svelte 5 #476

Upgrade to Svelte 5 #476

Conversation

josdejong commented Aug 1, 2024 • edited Loading

Issues when upgrading to Svelte 5

To do's:

dominikg commented Aug 1, 2024

josdejong commented Aug 1, 2024

dominikg commented Aug 1, 2024

dominikg commented Aug 1, 2024

josdejong commented Aug 1, 2024

josdejong commented Aug 1, 2024

dominikg commented Aug 1, 2024

josdejong commented Aug 2, 2024

dominikg commented Aug 2, 2024

josdejong commented Aug 2, 2024

dominikg commented Aug 2, 2024

josdejong commented Aug 2, 2024

dominikg commented Aug 2, 2024

benmccann commented Sep 9, 2024

josdejong commented Sep 10, 2024

josdejong commented Oct 15, 2024

josdejong commented Aug 1, 2024 •

edited

Loading