Not compatible with latest versions of Svelte

[benmccann]

@davipon and @ivanhofer reported that using this library with recent versions gives the error:

TypeError: Cannot read properties of undefined (reading '$$')

I see this library uses svelte-fragment-component and svelte-hyperscript. From a quick glance at the code, svelte-hyperscript appears to be bundling svelte, which it shouldn't be doing. Probably if that library moved svelte from devDependencies to dependencies or peerDependencies it would work because its Rollup config treats dependencies as external.

I filed the issue here rather than in svelte-hyperscript because it would be good to confirm that it fixes the issue here by bumping the Svelte version used for testing in this repo.

[benmccann]

@davipon and @ivanhofer, I just sent #235 to upgrade this library to the latest version of Svelte and all the tests are passing. Perhaps there's something more that's needed to reproduce the issue?

[sastan]

Published as svelte-htm@1.2.0 — Didn't have the time to fix the CI. Locally it worked.

[sastan]

Thanks again @benmccann for the time you took to update all the dependencies.

[unikitty37]

Afraid this is occurring again:

 FAIL  src/lib/components/SafeLink.test.ts > SafeLink > when the `to` prop is not passed > renders the slot unchanged
TypeError: Cannot read properties of undefined (reading '$$')
 ❯ Module.init node_modules/svelte/internal/index.mjs:2011:50
    2009|         dirty,
    2010|         skip_bound: false,
    2011|         root: options.target || parent_component.$$.root
       |                                                  ^
    2012|     };
    2013|     append_styles && append_styles($$.root);
 ❯ new SafeLink$ src/lib/components/SafeLink.svelte:343:25
 ❯ Module.createProxiedComponent node_modules/svelte-hmr/runtime/svelte-hooks.js:338:9
 ❯ new ProxyComponent node_modules/svelte-hmr/runtime/proxy.js:243:29
 ❯ new Proxy<SafeLink> node_modules/svelte-hmr/runtime/proxy.js:351:11
 ❯ createComponentFragment node_modules/svelte-hyperscript/src/h.js:132:21
 ❯ init node_modules/svelte/internal/index.mjs:2031:37
 ❯ new Component node_modules/svelte-hyperscript/src/h.js:78:7
 ❯ Module.render node_modules/@testing-library/svelte/dist/pure.js:83:19
 ❯ src/lib/components/SafeLink.test.ts:10:7

package.json

  "type": "module",
  "devDependencies": {
    "@playwright/test": "~1.31.1",
    "@sveltejs/adapter-auto": "~2.0.0",
    "@sveltejs/kit": "~1.9.2",
    "@testing-library/jest-dom": "~5.16.5",
    "@testing-library/svelte": "~3.2.2",
    "@typescript-eslint/eslint-plugin": "~5.53.0",
    "@typescript-eslint/parser": "~5.53.0",
    "eslint": "~8.35.0",
    "eslint-plugin-jest-dom": "~4.0.3",
    "eslint-plugin-svelte3": "~4.0.0",
    "jsdom": "~21.1.0",
    "postcss": "~8.4.21",
    "postcss-load-config": "~4.0.1",
    "sass": "~1.58.3",
    "svelte": "~3.55.0",
    "svelte-check": "~3.0.1",
    "svelte-htm": "~1.2.0",
    "svelte-preprocess": "~5.0.1",
    "tslib": "~2.5.0",
    "typescript": "~4.9.3",
    "vite": "~4.1.4",
    "vitest": "~0.25.3"
  },
  "dependencies": {
    "svelte-material-icons": "~3.0.4"
  }