migrate Svelte 5 (#1197)

.changeset/ninety-seals-know.md

@@ -0,0 +1,5 @@
+---
+'svelte-meta-tags': major
+---
+
+Supports Svelte 5! And Svelte 3 and Svelte 4 are no longer supported

.github/workflows/ci.yml

@@ -15,7 +15,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20.17.0'
+          node-version: '20.18.0'
           cache: pnpm
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
@@ -28,6 +28,6 @@ jobs:
       - name: Run Build
         run: pnpm build
       - name: Install Playwright
-        run: pnpm dlx playwright@1.47.0 install --with-deps
+        run: pnpm dlx playwright@1.48.1 install --with-deps
       - name: Run Playwright
         run: pnpm test

.github/workflows/release.yml

@@ -21,7 +21,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20.17.0'
+          node-version: '20.18.0'
           cache: pnpm
       - run: pnpm install --frozen-lockfile
       - name: Create Release Pull Request or Publish to npm

.gitignore

@@ -1,4 +1,4 @@
-DS_Store
+.DS_Store
 node_modules
 dist
 build

.npmrc

@@ -1,3 +1,3 @@
 engine-strict=true
-use-node-version=20.17.0
+use-node-version=20.18.0
 manage-package-manager-versions=true

README.md

@@ -1052,7 +1052,31 @@ interface LinkTag {
   sizes?: string;
   type?: string;
   color?: string;
-  as?: string;
+  as?:
+    | 'fetch'
+    | 'audio'
+    | 'audioworklet'
+    | 'document'
+    | 'embed'
+    | 'font'
+    | 'frame'
+    | 'iframe'
+    | 'image'
+    | 'json'
+    | 'manifest'
+    | 'object'
+    | 'paintworklet'
+    | 'report'
+    | 'script'
+    | 'serviceworker'
+    | 'sharedworker'
+    | 'style'
+    | 'track'
+    | 'video'
+    | 'webidentity'
+    | 'worker'
+    | 'xslt'
+    | '';
   crossOrigin?: string;
   referrerPolicy?: string;
 }

example/package.json

@@ -10,10 +10,10 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.2.5",
-    "@sveltejs/kit": "^2.7.1",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/kit": "^2.7.2",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "just-extend": "^6.2.0",
-    "svelte": "^4.2.19",
+    "svelte": "^5.0.3",
     "svelte-check": "^4.0.5",
     "svelte-meta-tags": "workspace:^",
     "tslib": "^2.8.0",

package.json

@@ -18,7 +18,7 @@
     "@types/eslint": "^9.6.1",
     "eslint": "^9.13.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.45.1",
+    "eslint-plugin-svelte": "^2.46.0",
     "globals": "^15.11.0",
     "prettier": "^3.3.3",
     "prettier-plugin-svelte": "^3.2.7",

packages/svelte-meta-tags/package.json

@@ -15,7 +15,8 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/oekazuma/svelte-meta-tags"
+    "url": "git+https://github.com/oekazuma/svelte-meta-tags.git",
+    "directory": "packages/svelte-meta-tags"
   },
   "scripts": {
     "dev": "vite dev",
@@ -33,19 +34,19 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.2.5",
-    "@sveltejs/kit": "^2.7.1",
+    "@sveltejs/kit": "^2.7.2",
     "@sveltejs/package": "^2.3.5",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "publint": "^0.2.11",
-    "svelte": "^4.2.19",
+    "svelte": "^5.0.3",
     "svelte-check": "^4.0.5",
     "tslib": "^2.8.0",
     "typescript": "^5.6.3",
     "vite": "^5.4.9",
     "vitest": "^2.1.3"
   },
   "peerDependencies": {
-    "svelte": "^3.55.0 || ^4.0.0"
+    "svelte": "^5.0.0"
   },
   "exports": {
     "./JsonLd.svelte": {

packages/svelte-meta-tags/src/lib/JsonLd.svelte

@@ -2,12 +2,16 @@
   import type { JsonLdProps } from './types';
   import type { Thing, WithContext } from 'schema-dts';
 
-  export let output: JsonLdProps['output'] = 'head';
-  export let schema: JsonLdProps['schema'] = undefined;
+  interface Props {
+    output?: JsonLdProps['output'];
+    schema?: JsonLdProps['schema'];
+  }
+
+  let { output = 'head', schema = undefined }: Props = $props();
 
   type OmitContext<T> = Omit<T, '@context'>;
 
-  $: isValid = schema && typeof schema === 'object';
+  let isValid = $derived(schema && typeof schema === 'object');
 
   const createSchema = (schema: JsonLdProps['schema']) => {
     const addContext = (context: OmitContext<Thing> | OmitContext<WithContext<Thing>>) => ({
@@ -20,7 +24,9 @@
       : addContext(schema as OmitContext<WithContext<Thing>>);
   };
 
-  $: json = `${'<scri' + 'pt type="application/ld+json">'}${JSON.stringify(createSchema(schema))}${'</scri' + 'pt>'}`;
+  let json = $derived(
+    `${'<scri' + 'pt type="application/ld+json">'}${JSON.stringify(createSchema(schema))}${'</scri' + 'pt>'}`
+  );
 </script>
 
 <svelte:head>

packages/svelte-meta-tags/src/lib/MetaTags.svelte

@@ -1,24 +1,26 @@
 <script lang="ts">
   import type { MetaTagsProps } from './types';
 
-  export let title: MetaTagsProps['title'] = '';
-  export let titleTemplate: MetaTagsProps['titleTemplate'] = '';
-  export let robots: MetaTagsProps['robots'] = 'index,follow';
-  export let additionalRobotsProps: MetaTagsProps['additionalRobotsProps'] = undefined;
-  export let description: MetaTagsProps['description'] = undefined;
-  export let mobileAlternate: MetaTagsProps['mobileAlternate'] = undefined;
-  export let languageAlternates: MetaTagsProps['languageAlternates'] = undefined;
-  export let twitter: MetaTagsProps['twitter'] = undefined;
-  export let facebook: MetaTagsProps['facebook'] = undefined;
-  export let openGraph: MetaTagsProps['openGraph'] = undefined;
-  export let canonical: MetaTagsProps['canonical'] = undefined;
-  export let keywords: MetaTagsProps['keywords'] = undefined;
-  export let additionalMetaTags: MetaTagsProps['additionalMetaTags'] = undefined;
-  export let additionalLinkTags: MetaTagsProps['additionalLinkTags'] = undefined;
-
-  $: updatedTitle = titleTemplate ? (title ? titleTemplate.replace(/%s/g, title) : title) : title;
-
-  let robotsParams = '';
+  let {
+    title = '',
+    titleTemplate = '',
+    robots = 'index,follow',
+    additionalRobotsProps = undefined,
+    description = undefined,
+    mobileAlternate = undefined,
+    languageAlternates = undefined,
+    twitter = undefined,
+    facebook = undefined,
+    openGraph = undefined,
+    canonical = undefined,
+    keywords = undefined,
+    additionalMetaTags = undefined,
+    additionalLinkTags = undefined
+  }: Partial<MetaTagsProps> = $props();
+
+  let updatedTitle = $derived(titleTemplate ? (title ? titleTemplate.replace(/%s/g, title) : title) : title);
+
+  let robotsParams = $state('');
   if (additionalRobotsProps) {
     const {
       nosnippet,
@@ -38,9 +40,11 @@
     }${maxVideoPreview ? `,max-video-preview:${maxVideoPreview}` : ''}${notranslate ? ',notranslate' : ''}`;
   }
 
-  $: if (!robots && additionalRobotsProps) {
-    console.warn('additionalRobotsProps cannot be used when robots is set to false');
-  }
+  $effect(() => {
+    if (!robots && additionalRobotsProps) {
+      console.warn('additionalRobotsProps cannot be used when robots is set to false');
+    }
+  });
 </script>
 
 <svelte:head>
@@ -289,7 +293,7 @@
 
   {#if additionalMetaTags && Array.isArray(additionalMetaTags)}
     {#each additionalMetaTags as tag}
-      <meta {...tag} />
+      <meta {...tag.httpEquiv ? { ...tag, 'http-equiv': tag.httpEquiv } : tag} />
     {/each}
   {/if}
 

packages/svelte-meta-tags/src/lib/types.d.ts

@@ -145,7 +145,31 @@ export interface LinkTag {
   sizes?: string;
   type?: string;
   color?: string;
-  as?: string;
+  as?:
+    | 'fetch'
+    | 'audio'
+    | 'audioworklet'
+    | 'document'
+    | 'embed'
+    | 'font'
+    | 'frame'
+    | 'iframe'
+    | 'image'
+    | 'json'
+    | 'manifest'
+    | 'object'
+    | 'paintworklet'
+    | 'report'
+    | 'script'
+    | 'serviceworker'
+    | 'sharedworker'
+    | 'style'
+    | 'track'
+    | 'video'
+    | 'webidentity'
+    | 'worker'
+    | 'xslt'
+    | '';
   crossOrigin?: string;
   referrerPolicy?: string;
 }