v4 (#1046)

.changeset/lovely-glasses-rush.md

@@ -0,0 +1,6 @@
+---
+'svelte-meta-tags': major
+---
+
+Update twitter meta tags to the latest spec.
+https://developer.x.com/en/docs/x-for-websites/cards/overview/player-card

.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

.changeset/smooth-windows-double.md

@@ -0,0 +1,5 @@
+---
+'svelte-meta-tags': major
+---
+
+Add `deepMerge` function that allows deep merging of objects

.github/workflows/ci.yml

@@ -23,6 +23,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

example/package.json

@@ -9,16 +9,16 @@
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^3.2.5",
-    "@sveltejs/kit": "^2.7.1",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/adapter-auto": "^3.3.0",
+    "@sveltejs/kit": "^2.7.2",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "just-extend": "^6.2.0",
-    "svelte": "^4.2.19",
+    "svelte": "^5.0.5",
     "svelte-check": "^4.0.5",
     "svelte-meta-tags": "workspace:^",
     "tslib": "^2.8.0",
     "typescript": "^5.6.3",
-    "vite": "^5.4.9"
+    "vite": "^5.4.10"
   },
   "type": "module"
 }

example/src/routes/+layout.svelte

@@ -1,16 +1,22 @@
 <script lang="ts">
+  import type { LayoutData } from './$types';
   import { page } from '$app/stores';
-  import { MetaTags } from 'svelte-meta-tags';
-  import extend from 'just-extend'; // Please provide functions that allow deep merging of objects, such as lodash.merge, deepmerge, just-extend.
+  import type { Snippet } from 'svelte';
+  import { MetaTags, deepMerge } from 'svelte-meta-tags';
 
-  export let data;
+  interface Props {
+    data: LayoutData;
+    children: Snippet;
+  }
 
-  $: metaTags = extend(true, {}, data.baseMetaTags, $page.data.pageMetaTags);
+  let { data, children }: Props = $props();
+
+  let metaTags = $derived(deepMerge(data.baseMetaTags, $page.data.pageMetaTags));
 </script>
 
 <MetaTags {...metaTags} />
 
-<slot />
+{@render children()}
 
 <ul>
   <li>

package.json

@@ -18,11 +18,11 @@
     "@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",
-    "typescript-eslint": "^8.10.0"
+    "typescript-eslint": "^8.11.0"
   },
   "packageManager": "[email protected]",
   "engines": {

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",
@@ -24,25 +25,27 @@
     "package": "svelte-kit sync && svelte-package && publint",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "test": "vitest run",
     "prepublishOnly": "pnpm package && cp ../../README.md ./"
   },
   "dependencies": {
     "schema-dts": "^1.1.2"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^3.2.5",
-    "@sveltejs/kit": "^2.7.1",
-    "@sveltejs/package": "^2.3.5",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/adapter-auto": "^3.3.0",
+    "@sveltejs/kit": "^2.7.2",
+    "@sveltejs/package": "^2.3.6",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "publint": "^0.2.11",
-    "svelte": "^4.2.19",
+    "svelte": "^5.0.5",
     "svelte-check": "^4.0.5",
     "tslib": "^2.8.0",
     "typescript": "^5.6.3",
-    "vite": "^5.4.9"
+    "vite": "^5.4.10",
+    "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>
@@ -83,21 +87,63 @@
     {#if twitter.site}
       <meta name="twitter:site" content={twitter.site} />
     {/if}
-    {#if twitter.handle}
-      <meta name="twitter:creator" content={twitter.handle} />
-    {/if}
     {#if twitter.title}
       <meta name="twitter:title" content={twitter.title} />
     {/if}
     {#if twitter.description}
       <meta name="twitter:description" content={twitter.description} />
     {/if}
+    {#if twitter.creator}
+      <meta name="twitter:creator" content={twitter.creator} />
+    {/if}
+    {#if twitter.creatorId}
+      <meta name="twitter:creator:id" content={twitter.creatorId} />
+    {/if}
     {#if twitter.image}
       <meta name="twitter:image" content={twitter.image} />
     {/if}
     {#if twitter.imageAlt}
       <meta name="twitter:image:alt" content={twitter.imageAlt} />
     {/if}
+    {#if twitter.player}
+      <meta name="twitter:player" content={twitter.player} />
+    {/if}
+    {#if twitter.playerWidth}
+      <meta name="twitter:player:width" content={twitter.playerWidth.toString()} />
+    {/if}
+    {#if twitter.playerHeight}
+      <meta name="twitter:player:height" content={twitter.playerHeight.toString()} />
+    {/if}
+    {#if twitter.playerStream}
+      <meta name="twitter:player:stream" content={twitter.playerStream} />
+    {/if}
+    {#if twitter.appNameIphone}
+      <meta name="twitter:app:name:iphone" content={twitter.appNameIphone} />
+    {/if}
+    {#if twitter.appIdIphone}
+      <meta name="twitter:app:id:iphone" content={twitter.appIdIphone} />
+    {/if}
+    {#if twitter.appUrlIphone}
+      <meta name="twitter:app:url:iphone" content={twitter.appUrlIphone} />
+    {/if}
+    {#if twitter.appNameIpad}
+      <meta name="twitter:app:name:ipad" content={twitter.appNameIpad} />
+    {/if}
+    {#if twitter.appIdIpad}
+      <meta name="twitter:app:id:ipad" content={twitter.appIdIpad} />
+    {/if}
+    {#if twitter.appUrlIpad}
+      <meta name="twitter:app:url:ipad" content={twitter.appUrlIpad} />
+    {/if}
+    {#if twitter.appNameGoogleplay}
+      <meta name="twitter:app:name:googleplay" content={twitter.appNameGoogleplay} />
+    {/if}
+    {#if twitter.appIdGoogleplay}
+      <meta name="twitter:app:id:googleplay" content={twitter.appIdGoogleplay} />
+    {/if}
+    {#if twitter.appUrlGoogleplay}
+      <meta name="twitter:app:url:googleplay" content={twitter.appUrlGoogleplay} />
+    {/if}
   {/if}
 
   {#if facebook}
@@ -289,7 +335,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/deepMerge.ts

@@ -0,0 +1,38 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function deepMerge(target: any, source: any) {
+  const sourceKeys = Object.keys(source);
+
+  for (let i = 0; i < sourceKeys.length; i++) {
+    const key = sourceKeys[i];
+
+    const sourceValue = source[key];
+    const targetValue = target[key];
+
+    if (Array.isArray(sourceValue)) {
+      if (Array.isArray(targetValue)) {
+        target[key] = deepMerge(targetValue, sourceValue);
+      } else {
+        target[key] = deepMerge([], sourceValue);
+      }
+    } else if (isPlainObject(sourceValue)) {
+      if (isPlainObject(targetValue)) {
+        target[key] = deepMerge(targetValue, sourceValue);
+      } else {
+        target[key] = deepMerge({}, sourceValue);
+      }
+    } else if (targetValue === undefined || sourceValue !== undefined) {
+      target[key] = sourceValue;
+    }
+  }
+
+  return target;
+}
+
+function isPlainObject(object?: unknown): boolean {
+  if (typeof object !== 'object' || object === null) {
+    return false;
+  }
+
+  const proto = Object.getPrototypeOf(object);
+  return proto === Object.prototype || proto === null;
+}

packages/svelte-meta-tags/src/lib/index.ts

@@ -1,5 +1,6 @@
 export { default as MetaTags } from './MetaTags.svelte';
 export { default as JsonLd } from './JsonLd.svelte';
+export { deepMerge } from './deepMerge';
 export type {
   MetaTagsProps,
   JsonLdProps,