perf!: client / server subpaths (#448)

* perf!: client / server subpaths

* chore: keep `createHeadCore` export, add `unhead/legacy`

examples/vite-ssr-react/src/entry-server.jsx

@@ -1,6 +1,6 @@
 import ReactDOMServer from 'react-dom/server'
 import { StaticRouter } from 'react-router-dom/server'
-import { createHead } from '../../../packages/unhead/src/createHead'
+import { createHead } from 'unhead/server'
 import { App } from './App'
 
 createHead()

packages/addons/test/infer-seo-meta.test.ts

@@ -1,5 +1,5 @@
 import { renderSSRHead } from '@unhead/ssr'
-import { createHead } from 'unhead'
+import { createHead } from 'unhead/server'
 import { describe, it } from 'vitest'
 import { InferSeoMetaPlugin } from '../src/plugins/inferSeoMetaPlugin'
 

packages/dom/package.json

@@ -29,12 +29,10 @@
     "dist"
   ],
   "scripts": {
-    "build": "unbuild .",
-    "stub": "unbuild . --stub",
-    "export:sizes": "npx export-size . -r"
+    "build": "unbuild ",
+    "stub": "unbuild  --stub"
   },
-  "dependencies": {
-    "@unhead/schema": "workspace:*",
-    "@unhead/shared": "workspace:*"
+  "peerDependencies": {
+    "unhead": "workspace:*"
   }
 }

packages/dom/src/index.ts

@@ -1,3 +1 @@
-export * from './debounced'
-export * from './domPlugin'
-export * from './renderDOMHead'
+export * from 'unhead/client'

packages/schema-org/test/e2e/vue.test.ts

@@ -1,7 +1,8 @@
 import { renderDOMHead } from '@unhead/dom'
 import { defineArticle, defineWebPage, useSchemaOrg } from '@unhead/schema-org/vue'
 import { renderSSRHead } from '@unhead/ssr'
-import { createHead, useHead } from 'unhead'
+import { useHead } from 'unhead'
+import { createHead } from 'unhead/client'
 import { describe, expect, it } from 'vitest'
 import { useDom } from '../../../../test/fixtures'
 import { createHeadWithContext } from '../../../../test/util'

packages/schema-org/test/index.ts

@@ -1,7 +1,8 @@
 import type { MetaInput } from '@unhead/schema-org'
 import type { SchemaOrgNode } from '../src/types'
 import { SchemaOrgUnheadPlugin } from '@unhead/schema-org'
-import { createHead, unheadCtx } from 'unhead'
+import { unheadCtx } from 'unhead'
+import { createHead } from 'unhead/server'
 
 export async function injectSchemaOrg(): Promise<SchemaOrgNode[]> {
   // filter for schema.org tag

packages/schema-org/test/ssr/xss.test.ts

@@ -1,6 +1,7 @@
 import { defineQuestion, defineWebPage, useSchemaOrg } from '@unhead/schema-org'
 import { renderSSRHead } from '@unhead/ssr'
-import { createHead, unheadCtx, useHead } from 'unhead'
+import { unheadCtx, useHead } from 'unhead'
+import { createHead } from 'unhead/server'
 import { describe, expect, it } from 'vitest'
 import { useSetup } from '..'
 

packages/ssr/package.json

@@ -30,11 +30,9 @@
   ],
   "scripts": {
     "build": "unbuild .",
-    "stub": "unbuild . --stub",
-    "export:sizes": "npx export-size . -r"
+    "stub": "unbuild . --stub"
   },
-  "dependencies": {
-    "@unhead/schema": "workspace:*",
-    "@unhead/shared": "workspace:*"
+  "peerDependencies": {
+    "unhead": "workspace:*"
   }
 }

packages/ssr/src/index.ts

@@ -1,3 +1 @@
-export * from './renderSSRHead'
-export * from './util'
-export type { SSRHeadPayload } from '@unhead/schema'
+export * from 'unhead/server'

packages/unhead/build.config.ts

@@ -9,5 +9,8 @@ export default defineBuildConfig({
   entries: [
     { input: 'src/index', name: 'index' },
     { input: 'src/optionalPlugins/index', name: 'optionalPlugins' },
+    { input: 'src/server/index', name: 'server' },
+    { input: 'src/client/index', name: 'client' },
+    { input: 'src/legacy', name: 'legacy' },
   ],
 })

packages/unhead/client.d.ts

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

packages/unhead/legacy.d.ts

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

packages/unhead/package.json

@@ -29,6 +29,16 @@
       "types": "./dist/optionalPlugins.d.ts",
       "import": "./dist/optionalPlugins.mjs",
       "require": "./dist/optionalPlugins.cjs"
+    },
+    "./server": {
+      "types": "./dist/server.d.ts",
+      "import": "./dist/server.mjs",
+      "require": "./dist/server.cjs"
+    },
+    "./client": {
+      "types": "./dist/client.d.ts",
+      "import": "./dist/client.mjs",
+      "require": "./dist/client.cjs"
     }
   },
   "main": "dist/index.cjs",
@@ -38,20 +48,31 @@
     "*": {
       "optionalPlugins": [
         "dist/optionalPlugins"
+      ],
+      "server": [
+        "dist/server"
+      ],
+      "client": [
+        "dist/client"
+      ],
+      "legacy": [
+        "dist/legacy"
       ]
     }
   },
   "files": [
+    "client.d.ts",
     "dist",
-    "optionalPlugins.d.ts"
+    "legacy.d.ts",
+    "optionalPlugins.d.ts",
+    "server.d.ts"
   ],
   "scripts": {
     "build": "unbuild .",
     "stub": "unbuild . --stub",
     "export:sizes": "npx export-size . -r"
   },
   "dependencies": {
-    "@unhead/dom": "workspace:*",
     "@unhead/schema": "workspace:*",
     "@unhead/shared": "workspace:*",
     "hookable": "^5.5.3",

packages/unhead/server.d.ts

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

packages/unhead/src/client/createHead.ts

@@ -0,0 +1,18 @@
+import type { CreateHeadOptions, Head } from '@unhead/schema'
+import { IsBrowser } from '@unhead/shared'
+import { unheadCtx } from '../context'
+import { createHeadCore } from '../createHead'
+import { DomPlugin } from './domPlugin'
+
+export function createHead<T extends Record<string, any> = Head>(options: CreateHeadOptions = {}) {
+  const head = createHeadCore<T>({
+    document: (IsBrowser ? document : undefined),
+    ...options,
+  })
+  head.use(DomPlugin())
+  // should only be one instance client-side
+  if (!head.ssr && IsBrowser) {
+    unheadCtx.set(head, true)
+  }
+  return head
+}

packages/dom/src/domPlugin.ts → packages/unhead/src/client/domPlugin.ts

@@ -6,7 +6,7 @@ export interface DomPluginOptions extends RenderDomHeadOptions {
   delayFn?: (fn: () => void) => void
 }
 
-/* @__NO_SIDE_EFFECTS__ */ export function DomPlugin(options?: DomPluginOptions) {
+export function DomPlugin(options?: DomPluginOptions) {
   return defineHeadPlugin((head) => {
     // restore initial entry from payload (titleTemplate and templateParams)
     const initialPayload = head.resolvedOptions.document?.head.querySelector('script[id="unhead:payload"]')?.innerHTML || false

packages/unhead/src/client/index.ts

@@ -0,0 +1,4 @@
+export * from './createHead'
+export * from './debounced'
+export * from './domPlugin'
+export * from './renderDOMHead'

packages/unhead/src/createHead.ts

@@ -9,35 +9,16 @@ import type {
   RuntimeMode,
   Unhead,
 } from '@unhead/schema'
-import { DomPlugin } from '@unhead/dom'
-import { IsBrowser, normaliseEntryTags } from '@unhead/shared'
+import { normaliseEntryTags } from '@unhead/shared'
 import { createHooks } from 'hookable'
-import { unheadCtx } from './context'
 import DedupePlugin from './plugins/dedupe'
 import EventHandlersPlugin from './plugins/eventHandlers'
 import HashKeyedPlugin from './plugins/hashKeyed'
-import PayloadPlugin from './plugins/payload'
 import SortPlugin from './plugins/sort'
 import TemplateParamsPlugin from './plugins/templateParams'
 import TitleTemplatePlugin from './plugins/titleTemplate'
 import XSSPlugin from './plugins/xss'
 
-// TODO rename to createDomHead
-export function createHead<T extends Record<string, any> = Head>(options: CreateHeadOptions = {}) {
-  const head = createHeadCore<T>(options)
-  head.use(DomPlugin())
-  // should only be one instance client-side
-  if (!head.ssr && IsBrowser) {
-    unheadCtx.set(head, true)
-  }
-  return head
-}
-
-export function createServerHead<T extends Record<string, any> = Head>(options: CreateHeadOptions = {}) {
-  // @ts-expect-error untyped
-  return createHeadCore<T>({ ...options, document: false })
-}
-
 function filterMode(mode: RuntimeMode | undefined, ssr: boolean) {
   return !mode || (mode === 'server' && ssr) || (mode === 'client' && !ssr)
 }
@@ -51,7 +32,6 @@ export function createHeadCore<T extends Record<string, any> = Head>(options: Cr
   // counter for keeping unique ids of head object entries
   const hooks = createHooks<HeadHooks>()
   hooks.addHooks(options.hooks || {})
-  options.document = typeof options.document !== 'undefined' ? options.document : (IsBrowser ? document : undefined)
   const ssr = !options.document
 
   const updated = () => {
@@ -134,7 +114,6 @@ export function createHeadCore<T extends Record<string, any> = Head>(options: Cr
   }
   ;[
     DedupePlugin,
-    PayloadPlugin,
     EventHandlersPlugin,
     HashKeyedPlugin,
     SortPlugin,

packages/unhead/src/index.ts

@@ -1,21 +1,12 @@
-import { createHead, createHeadCore, createServerHead } from './createHead'
-
-// create
-export {
-  createHead,
-  createHeadCore,
-  createServerHead,
-}
-
-// composables
 export * from './autoImports'
 
 export * from './composables/useHead'
-
 export * from './composables/useHeadSafe'
 export * from './composables/useScript'
 export * from './composables/useSeoMeta'
 export * from './composables/useServerHead'
 export * from './composables/useServerHeadSafe'
 export * from './composables/useServerSeoMeta'
+
 export * from './context'
+export * from './createHead'