feat(svelte): useSchemaOrg()

Author: harlan-zw

examples/vite-ssr-svelte/package.json

@@ -15,7 +15,8 @@
     "compression": "^1.7.5",
     "express": "^5.0.1",
     "sirv": "^3.0.0",
-    "@unhead/svelte": "workspace:*"
+    "@unhead/svelte": "workspace:*",
+    "@unhead/schema-org": "workspace:*"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^5.0.1",

examples/vite-ssr-svelte/src/App.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import svelteLogo from './assets/svelte.svg'
   import Counter from './lib/Counter.svelte'
+  import SchemaOrg from './lib/SchemaOrg.svelte'
 
   let counter = $state(true)
 </script>
@@ -24,6 +25,8 @@
 
   <button onclick={counter = false}>disable counter</button>
 
+  <SchemaOrg />
+
   <p>
     Check out <a href="https://github.com/sveltejs/kit#readme" target="_blank" rel="noreferrer">SvelteKit</a>, the official Svelte app framework powered by Vite!
   </p>

examples/vite-ssr-svelte/src/lib/SchemaOrg.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+import { useSchemaOrg, defineWebPage } from '@unhead/schema-org/svelte'
+
+useSchemaOrg([
+  defineWebPage({
+    name: 'Home',
+    description: 'A simple example of using Schema.org with Svelte',
+    url: 'https://example.com',
+  }),
+])
+</script>

packages/schema-org/build.config.ts

@@ -6,13 +6,15 @@ export default defineBuildConfig({
   entries: [
     { input: 'src/index' },
     { input: 'src/vue/index', name: 'vue' },
+    { input: 'src/svelte/index', name: 'svelte' },
   ],
   externals: [
     'vue',
     '@vue/runtime-core',
     'unplugin-vue-components',
     'unhead',
     'vite',
+    'svelte',
     'vue-router',
     '@unhead/vue',
     'unplugin-ast',

packages/schema-org/package.json

@@ -33,6 +33,10 @@
     "./vue": {
       "types": "./dist/vue.d.ts",
       "import": "./dist/vue.mjs"
+    },
+    "./svelte": {
+      "types": "./dist/svelte.d.ts",
+      "import": "./dist/svelte.mjs"
     }
   },
   "main": "dist/index.mjs",
@@ -42,11 +46,15 @@
     "*": {
       "vue": [
         "dist/vue"
+      ],
+      "svelte": [
+        "dist/svelte"
       ]
     }
   },
   "files": [
     "dist",
+    "svelte.d.ts",
     "vue.d.ts"
   ],
   "scripts": {
@@ -57,10 +65,14 @@
     "lint": "eslint \"{src,test}/**/*.{ts,vue,json,yml}\" --fix"
   },
   "peerDependencies": {
-    "@unhead/vue": "^1.11.18",
-    "unhead": "^1.11.18"
+    "@unhead/svelte": "^2",
+    "@unhead/vue": "^2",
+    "unhead": "^2"
   },
   "peerDependenciesMeta": {
+    "@unhead/svelte": {
+      "optional": true
+    },
     "@unhead/vue": {
       "optional": true
     }
@@ -71,13 +83,15 @@
     "ufo": "^1.5.4"
   },
   "devDependencies": {
+    "@unhead/svelte": "workspace:*",
     "@unhead/vue": "workspace:*",
     "unhead": "workspace:*",
     "unplugin-vue-components": "^28.4.0"
   },
   "build": {
     "external": [
-      "vue"
+      "vue",
+      "svelte"
     ]
   }
 }

packages/schema-org/src/runtime.ts

@@ -1,4 +1,4 @@
-import type {ActiveHeadEntry, HeadEntryOptions, Unhead} from 'unhead/types'
+import type { ActiveHeadEntry, HeadEntryOptions, Unhead } from 'unhead/types'
 import type {
   AggregateOffer,
   AggregateRating,

packages/schema-org/src/svelte/composables.ts

@@ -0,0 +1,43 @@
+import type { ActiveHeadEntry, HeadEntryOptions } from 'unhead/types'
+import type { UseSchemaOrgInput } from '../index'
+import { useHead, useUnhead } from '@unhead/svelte'
+import {
+  normalizeSchemaOrgInput,
+} from '../index'
+import { UnheadSchemaOrg } from '../plugin'
+
+export {
+  defineArticle,
+  defineBook,
+  defineBreadcrumb,
+  defineComment,
+  defineCourse,
+  defineEvent,
+  defineFoodEstablishment,
+  defineHowTo,
+  defineImage,
+  defineItemList,
+  defineJobPosting,
+  defineLocalBusiness,
+  defineMovie,
+  defineOrganization,
+  definePerson,
+  defineProduct,
+  defineQuestion,
+  defineRecipe,
+  defineReview,
+  defineSoftwareApp,
+  defineVideo,
+  defineWebPage,
+  defineWebSite,
+} from '../runtime'
+
+export function useSchemaOrg(input: UseSchemaOrgInput = [], options: HeadEntryOptions = {}): ActiveHeadEntry<UseSchemaOrgInput> {
+  // lazy initialise the plugin
+  const unhead = options.head || useUnhead()
+  unhead.use(UnheadSchemaOrg())
+  const entry = useHead(normalizeSchemaOrgInput(input), options) as ActiveHeadEntry<UseSchemaOrgInput>
+  const corePatch = entry.patch
+  entry.patch = input => corePatch(normalizeSchemaOrgInput(input))
+  return entry
+}

packages/schema-org/src/svelte/imports.ts

@@ -0,0 +1,45 @@
+export const schemaAutoImports = [
+  'defineAddress',
+  'defineAggregateOffer',
+  'defineAggregateRating',
+  'defineArticle',
+  'defineBook',
+  'defineBookEdition',
+  'defineBreadcrumb',
+  'defineComment',
+  'defineCourse',
+  'defineEvent',
+  'defineFoodEstablishment',
+  'defineHowTo',
+  'defineHowToStep',
+  'defineImage',
+  'defineItemList',
+  'defineJobPosting',
+  'defineListItem',
+  'defineLocalBusiness',
+  'defineMovie',
+  'defineOffer',
+  'defineOpeningHours',
+  'defineOrganization',
+  'definePerson',
+  'definePlace',
+  'defineProduct',
+  'defineQuestion',
+  'defineReadAction',
+  'defineRecipe',
+  'defineReview',
+  'defineSearchAction',
+  'defineSoftwareApp',
+  'defineVideo',
+  'defineVirtualLocation',
+  'defineWebPage',
+  'defineWebSite',
+  'useSchemaOrg',
+]
+
+export const schemaOrgAutoImports = [
+  {
+    from: '@unhead/schema-org/svelte',
+    imports: schemaAutoImports,
+  },
+]

packages/schema-org/src/svelte/index.ts

@@ -0,0 +1,4 @@
+export type { MetaInput, UserConfig } from '../'
+
+export * from './composables'
+export * from './imports'

packages/schema-org/svelte.d.ts

@@ -0,0 +1 @@
+export * from './dist/svelte'

packages/svelte/src/composables.ts

@@ -1,6 +1,5 @@
 import type {
   ActiveHeadEntry,
-  Head,
   HeadEntryOptions,
   HeadSafe,
   Unhead,