@unhead/vue 3.0.3 → 3.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -6,9 +6,18 @@ import { V as VueHeadClient, U as UseHeadInput } from '../shared/vue.CajUUuy2.mj
6
6
  import 'unhead/types';
7
7
 
8
8
  /**
9
- * Client-side HeadStream - renders nothing (script already executed during SSR streaming)
9
+ * Client-side counterpart to the server `HeadStream`. Always emits a
10
+ * `<script data-allow-mismatch="children">` with empty `innerHTML`. The
11
+ * matching vnode type on both sides lets Vue hydrate the node; the
12
+ * `data-allow-mismatch` attribute silences the inner-content difference
13
+ * between the server-emitted streaming patch and this empty client vnode.
14
+ *
15
+ * The already-executed server script stays in the DOM after hydration — it's
16
+ * inert (scripts only execute on parse) and the placeholder is cheap.
10
17
  */
11
- declare const HeadStream: vue.DefineComponent<{}, () => null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
18
+ declare const HeadStream: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
19
+ [key: string]: any;
20
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
12
21
  /**
13
22
  * Creates a client head by wrapping the core instance from the iife script.
14
23
  */
@@ -6,9 +6,18 @@ import { V as VueHeadClient, U as UseHeadInput } from '../shared/vue.CajUUuy2.js
6
6
  import 'unhead/types';
7
7
 
8
8
  /**
9
- * Client-side HeadStream - renders nothing (script already executed during SSR streaming)
9
+ * Client-side counterpart to the server `HeadStream`. Always emits a
10
+ * `<script data-allow-mismatch="children">` with empty `innerHTML`. The
11
+ * matching vnode type on both sides lets Vue hydrate the node; the
12
+ * `data-allow-mismatch` attribute silences the inner-content difference
13
+ * between the server-emitted streaming patch and this empty client vnode.
14
+ *
15
+ * The already-executed server script stays in the DOM after hydration — it's
16
+ * inert (scripts only execute on parse) and the placeholder is cheap.
10
17
  */
11
- declare const HeadStream: vue.DefineComponent<{}, () => null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
18
+ declare const HeadStream: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
19
+ [key: string]: any;
20
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
12
21
  /**
13
22
  * Creates a client head by wrapping the core instance from the iife script.
14
23
  */
@@ -1,5 +1,5 @@
1
1
  import { createStreamableHead as createStreamableHead$1 } from 'unhead/stream/client';
2
- import { defineComponent } from 'vue';
2
+ import { defineComponent, h } from 'vue';
3
3
  import { v as vueInstall } from '../shared/vue.D51lypTh.mjs';
4
4
  import { V as VueResolver } from '../shared/vue.CkLIG7eN.mjs';
5
5
  export { V as VueHeadMixin } from '../shared/vue.C54fV9ES.mjs';
@@ -9,7 +9,7 @@ import 'unhead/utils';
9
9
  const HeadStream = defineComponent({
10
10
  name: "HeadStream",
11
11
  setup() {
12
- return () => null;
12
+ return () => h("script", { "data-allow-mismatch": "children" });
13
13
  }
14
14
  });
15
15
  // @__NO_SIDE_EFFECTS__
@@ -5,12 +5,18 @@ import { ResolvableHead, SSRHeadPayload, CreateStreamableServerHeadOptions } fro
5
5
  import { V as VueHeadClient } from '../shared/vue.CajUUuy2.mjs';
6
6
 
7
7
  /**
8
- * Streaming script component - outputs inline script with current head state.
9
- * The Vite plugin with streaming: true auto-injects this.
8
+ * Emits a `<script data-allow-mismatch="children">` whose `innerHTML` is the
9
+ * pending head-update JS (if any). The client counterpart renders an identical
10
+ * `<script data-allow-mismatch="children">` with empty innerHTML: symmetric
11
+ * vnode types let Vue's hydrator match the node, and `data-allow-mismatch`
12
+ * silences the inner-content difference.
13
+ *
14
+ * The Vite plugin injects one `<HeadStream />` at the top of every SFC
15
+ * `<template>` that uses `useHead` / `useSeoMeta`.
10
16
  */
11
17
  declare const HeadStream: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
12
18
  [key: string]: any;
13
- }> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
19
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
14
20
  /**
15
21
  * Vue-specific context returned by createStreamableHead.
16
22
  * Extends WebStreamableHeadContext with Vue-specific head type.
@@ -34,10 +40,7 @@ interface VueStreamableHeadContext extends Omit<WebStreamableHeadContext<Resolva
34
40
  * app.mixin(VueHeadMixin)
35
41
  * router.push(url)
36
42
  *
37
- * // Create stream first - Vue starts rendering synchronously
38
43
  * const vueStream = renderToWebStream(app)
39
- *
40
- * // Wait for router - by now Vue's sync render has pushed head entries
41
44
  * await router.isReady()
42
45
  *
43
46
  * return wrapStream(vueStream, template)
@@ -5,12 +5,18 @@ import { ResolvableHead, SSRHeadPayload, CreateStreamableServerHeadOptions } fro
5
5
  import { V as VueHeadClient } from '../shared/vue.CajUUuy2.js';
6
6
 
7
7
  /**
8
- * Streaming script component - outputs inline script with current head state.
9
- * The Vite plugin with streaming: true auto-injects this.
8
+ * Emits a `<script data-allow-mismatch="children">` whose `innerHTML` is the
9
+ * pending head-update JS (if any). The client counterpart renders an identical
10
+ * `<script data-allow-mismatch="children">` with empty innerHTML: symmetric
11
+ * vnode types let Vue's hydrator match the node, and `data-allow-mismatch`
12
+ * silences the inner-content difference.
13
+ *
14
+ * The Vite plugin injects one `<HeadStream />` at the top of every SFC
15
+ * `<template>` that uses `useHead` / `useSeoMeta`.
10
16
  */
11
17
  declare const HeadStream: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
12
18
  [key: string]: any;
13
- }> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
19
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
14
20
  /**
15
21
  * Vue-specific context returned by createStreamableHead.
16
22
  * Extends WebStreamableHeadContext with Vue-specific head type.
@@ -34,10 +40,7 @@ interface VueStreamableHeadContext extends Omit<WebStreamableHeadContext<Resolva
34
40
  * app.mixin(VueHeadMixin)
35
41
  * router.push(url)
36
42
  *
37
- * // Create stream first - Vue starts rendering synchronously
38
43
  * const vueStream = renderToWebStream(app)
39
- *
40
- * // Wait for router - by now Vue's sync render has pushed head entries
41
44
  * await router.isReady()
42
45
  *
43
46
  * return wrapStream(vueStream, template)
@@ -12,11 +12,9 @@ const HeadStream = defineComponent({
12
12
  const head = injectHead();
13
13
  return () => {
14
14
  if (!head._shellRendered?.())
15
- return null;
15
+ return h("script", { "data-allow-mismatch": "children" });
16
16
  const update = renderSSRHeadSuspenseChunk(head);
17
- if (!update)
18
- return null;
19
- return h("script", { innerHTML: update });
17
+ return h("script", { "data-allow-mismatch": "children", "innerHTML": update || "" });
20
18
  };
21
19
  }
22
20
  });
@@ -2,13 +2,9 @@ import * as vite from 'vite';
2
2
  import { StreamingPluginOptions } from 'unhead/stream/vite';
3
3
 
4
4
  /**
5
- * Vite plugin for Vue streaming SSR support.
6
- * Automatically injects HeadStream components into Vue SFC templates.
7
- *
8
- * @returns Vite plugin configuration object with:
9
- * - `name`: Plugin identifier
10
- * - `enforce`: Plugin execution order ('pre')
11
- * - `transform`: Transform hook for processing .vue files
5
+ * Vite plugin for Vue streaming SSR support. Automatically injects
6
+ * `<HeadStream />` into Vue SFC templates for components that use head
7
+ * composables.
12
8
  *
13
9
  * @example
14
10
  * ```ts
@@ -17,8 +13,8 @@ import { StreamingPluginOptions } from 'unhead/stream/vite';
17
13
  *
18
14
  * export default {
19
15
  * plugins: [
20
- * unheadVuePlugin()
21
- * ]
16
+ * unheadVuePlugin(),
17
+ * ],
22
18
  * }
23
19
  * ```
24
20
  */
@@ -2,13 +2,9 @@ import * as vite from 'vite';
2
2
  import { StreamingPluginOptions } from 'unhead/stream/vite';
3
3
 
4
4
  /**
5
- * Vite plugin for Vue streaming SSR support.
6
- * Automatically injects HeadStream components into Vue SFC templates.
7
- *
8
- * @returns Vite plugin configuration object with:
9
- * - `name`: Plugin identifier
10
- * - `enforce`: Plugin execution order ('pre')
11
- * - `transform`: Transform hook for processing .vue files
5
+ * Vite plugin for Vue streaming SSR support. Automatically injects
6
+ * `<HeadStream />` into Vue SFC templates for components that use head
7
+ * composables.
12
8
  *
13
9
  * @example
14
10
  * ```ts
@@ -17,8 +13,8 @@ import { StreamingPluginOptions } from 'unhead/stream/vite';
17
13
  *
18
14
  * export default {
19
15
  * plugins: [
20
- * unheadVuePlugin()
21
- * ]
16
+ * unheadVuePlugin(),
17
+ * ],
22
18
  * }
23
19
  * ```
24
20
  */
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@unhead/vue",
3
3
  "type": "module",
4
- "version": "3.0.3",
4
+ "version": "3.0.5",
5
5
  "description": "Full-stack <head> manager built for Vue.",
6
6
  "author": "Harlan Wilton <harlan@harlanzw.com>",
7
7
  "license": "MIT",
@@ -143,16 +143,16 @@
143
143
  ]
144
144
  },
145
145
  "dependencies": {
146
- "hookable": "^6.1.0",
146
+ "hookable": "^6.1.1",
147
147
  "magic-string": "^0.30.21",
148
- "oxc-parser": "^0.124.0",
148
+ "oxc-parser": "^0.127.0",
149
149
  "oxc-walker": "^0.7.0",
150
- "unhead": "3.0.3",
151
- "@unhead/bundler": "3.0.3"
150
+ "@unhead/bundler": "3.0.5",
151
+ "unhead": "3.0.5"
152
152
  },
153
153
  "devDependencies": {
154
154
  "@vue/server-renderer": "^3.5.32",
155
- "vite": "^8.0.8",
155
+ "vite": "^8.0.9",
156
156
  "vue": "^3.5.32"
157
157
  },
158
158
  "scripts": {