feat: add Svelte 4 support (#32)

* Migrate to Svelte 4

* Remove pnpm and fix peer deps

* Update to use new svelte package

---------

.gitignore

@@ -3,4 +3,5 @@ node_modules
 /build
 /.svelte-kit
 /package
+/dist
 .vercel_build_output

package.json

@@ -11,22 +11,33 @@
     "url": "https://github.com/portabletext/svelte-portabletext/issues"
   },
   "homepage": "https://github.com/portabletext/svelte-portabletext#readme",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/bar.js",
+      "svelte": "./dist/index.js"
+    }
+  },
   "scripts": {
     "dev": "svelte-kit dev",
     "build:site": "svelte-kit build",
-    "package": "svelte-kit package",
+    "package": "svelte-kit sync && svelte-package",
     "preview": "svelte-kit preview",
     "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
     "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. .",
-    "prepublish": "npm run package && cd package",
+    "prepublish": "npm run package && cd dist",
     "test": "vitest",
     "test:ui": "vitest --ui"
   },
   "devDependencies": {
     "@portabletext/types": "^2.0.1",
-    "@sveltejs/adapter-auto": "^1.0.0-next.43",
-    "@sveltejs/kit": "^1.0.0-next.334",
-    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.44",
+    "@sveltejs/adapter-auto": "^2.1.0",
+    "@sveltejs/kit": "^1.20.4",
+    "@sveltejs/package": "^2.0.2",
+    "@sveltejs/vite-plugin-svelte": "^2.4.1",
     "@testing-library/svelte": "^3.1.1",
     "@typescript-eslint/eslint-plugin": "^5.25.0",
     "@typescript-eslint/parser": "^5.25.0",
@@ -37,15 +48,18 @@
     "eslint-plugin-svelte3": "^4.0.0",
     "jsdom": "^21.1.0",
     "prettier": "^2.6.2",
-    "prettier-plugin-svelte": "^2.7.0",
-    "svelte": "^3.48.0",
-    "svelte-preprocess": "^4.10.6",
-    "svelte2tsx": "^0.5.10",
-    "typescript": "^4.6.4",
+    "prettier-plugin-svelte": "^2.10.1",
+    "svelte": "^4.0.0",
+    "svelte-preprocess": "^5.0.3",
+    "svelte2tsx": "^0.6.16",
+    "typescript": "^5.0.0",
     "vitest": "latest"
   },
   "peerDependencies": {
-    "svelte": "^3.47.0"
+    "svelte": ">=3.47.0 <5.0.0"
+  },
+  "overrides": {
+    "svelte": "^4.0.0"
   },
   "type": "module",
   "dependencies": {

src/lib/rendererTypes.ts

@@ -10,7 +10,7 @@ import type {
   PortableTextListItemType,
   PortableTextMarkDefinition
 } from '@portabletext/types'
-import type {SvelteComponent, SvelteComponentTyped} from 'svelte'
+import type {SvelteComponent} from 'svelte'
 import type {
   InputValue,
   NormalizedBlocks,
@@ -167,7 +167,7 @@ export interface PortableTextSvelteComponents {
    * Component to use for rendering "hard breaks", eg `\n` inside of text spans
    * Will by default render a `<br />`. Pass `false` to render as-is (`\n`)
    */
-  hardBreak: SvelteComponentTyped<never> | typeof SvelteComponent | false
+  hardBreak: SvelteComponent<never> | typeof SvelteComponent<any> | false
 
   /* eslint-disable */
   /**
@@ -205,31 +205,31 @@ export type PortableTextComponents = Partial<PortableTextSvelteComponents>
 // Unfortunately Svelte components don't play nicely with Typescript,
 // so we need to `| any` all of these types
 type BlockComponent =
-  | SvelteComponentTyped<{
+  | SvelteComponent<{
       portableText: BlockComponentProps
     }>
-  | typeof SvelteComponent
+  | typeof SvelteComponent<any>
 
 type CustomBlockComponent =
-  | SvelteComponentTyped<{
+  | SvelteComponent<{
       portableText: CustomBlockComponentProps
     }>
-  | typeof SvelteComponent
+  | typeof SvelteComponent<any>
 
 type MarkComponent =
-  | SvelteComponentTyped<{
+  | SvelteComponent<{
       portableText: MarkComponentProps
     }>
-  | typeof SvelteComponent
+  | typeof SvelteComponent<any>
 
 type ListComponent =
-  | SvelteComponentTyped<{
+  | SvelteComponent<{
       portableText: ListComponentProps
     }>
-  | typeof SvelteComponent
+  | typeof SvelteComponent<any>
 
 type ListItemComponent =
-  | SvelteComponentTyped<{
+  | SvelteComponent<{
       portableText: ListItemComponentProps
     }>
-  | typeof SvelteComponent
+  | typeof SvelteComponent<any>

src/routes/basic-blocks.svelte → src/routes/basic-blocks/+page.svelte

@@ -1,6 +1,6 @@
 <script>
   import PortableText from '$lib/PortableText.svelte'
-  import blocksLists from '../dummyData/basicBlocks'
+  import blocksLists from '../../dummyData/basicBlocks'
 </script>
 
 <PortableText value={blocksLists} />

src/routes/custom.svelte → src/routes/custom/+page.svelte

@@ -1,15 +1,15 @@
 <script>
   import PortableText from '$lib/PortableText.svelte'
-  import Hero from '../customComponents/Hero.svelte'
-  import Code from '../customComponents/Code.svelte'
-  import Image from '../customComponents/Image.svelte'
-  import blocks from '../dummyData/custom'
-  import Greeter from '../customComponents/Greeter.svelte'
-  import Abbreviation from '../customComponents/Abbreviation.svelte'
-  import Fun from '../customComponents/Fun.svelte'
-  import Link from '../customComponents/Link.svelte'
-  import Footnote from '../customComponents/Footnote.svelte'
-  import SingleComponentBlock from '../customComponents/SingleComponentBlock.svelte'
+  import Hero from '../../customComponents/Hero.svelte'
+  import Code from '../../customComponents/Code.svelte'
+  import Image from '../../customComponents/Image.svelte'
+  import blocks from '../../dummyData/custom'
+  import Greeter from '../../customComponents/Greeter.svelte'
+  import Abbreviation from '../../customComponents/Abbreviation.svelte'
+  import Fun from '../../customComponents/Fun.svelte'
+  import Link from '../../customComponents/Link.svelte'
+  import Footnote from '../../customComponents/Footnote.svelte'
+  import SingleComponentBlock from '../../customComponents/SingleComponentBlock.svelte'
 
   $: footnotes = blocks.reduce((notes, curBlock) => {
     if (curBlock._type !== 'block' || !curBlock.markDefs?.length) {

src/routes/fallbacks.svelte → src/routes/fallbacks/+page.svelte

@@ -1,9 +1,9 @@
 <script>
   import PortableText from '$lib/PortableText.svelte'
-  import UnknownMark from '../customComponents/CustomUnknownMark.svelte'
-  import UnknownType from '../customComponents/CustomUnknownType.svelte'
+  import UnknownMark from '../../customComponents/CustomUnknownMark.svelte'
+  import UnknownType from '../../customComponents/CustomUnknownType.svelte'
 
-  import fallbacks from '../dummyData/fallbacks'
+  import fallbacks from '../../dummyData/fallbacks'
 </script>
 
 <PortableText

src/routes/hard-breaks.svelte → src/routes/hard-breaks/+page.svelte

@@ -1,6 +1,6 @@
 <script>
   import PortableText from '$lib/PortableText.svelte'
-  import CustomHardBreak from '../customComponents/CustomHardBreak.svelte'
+  import CustomHardBreak from '../../customComponents/CustomHardBreak.svelte'
 </script>
 
 <PortableText

src/routes/list-stress-test.svelte → src/routes/list-stress-test/+page.svelte

@@ -1,8 +1,8 @@
 <script>
   import PortableText from '$lib/PortableText.svelte'
-  import CustomList from '../customComponents/CustomList.svelte'
-  import CustomListItem from '../customComponents/CustomListItem.svelte'
-  import blocks from '../dummyData/listStressTest'
+  import CustomList from '../../customComponents/CustomList.svelte'
+  import CustomListItem from '../../customComponents/CustomListItem.svelte'
+  import blocks from '../../dummyData/listStressTest'
 </script>
 
 <PortableText

svelte.config.js

@@ -8,16 +8,7 @@ const config = {
   preprocess: preprocess(),
 
   kit: {
-    adapter: adapter(),
-    package: {
-      // Only include index.ts to the package.json definitions
-      exports: (filePath) => {
-        if (filePath.includes('index')) {
-          return true
-        }
-        return false
-      }
-    }
+    adapter: adapter()
   }
 }