@unhead/vue 1.1.9 → 1.1.11
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.
- package/dist/createHead-f0e81df3.d.ts +116 -0
- package/dist/index.cjs +28 -136
- package/dist/index.d.ts +5 -114
- package/dist/index.mjs +6 -114
- package/dist/polyfill.cjs +29 -0
- package/dist/polyfill.d.ts +37 -0
- package/dist/polyfill.mjs +27 -0
- package/dist/shared/vue.97abe623.cjs +138 -0
- package/dist/shared/vue.b6e29710.mjs +130 -0
- package/package.json +9 -4
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
import { ComputedRef, Ref, Plugin } from 'vue';
|
|
2
|
+
import { BaseHtmlAttr, MaybeArray, BaseBodyAttr, Title as Title$1, TitleTemplate as TitleTemplate$1, EntryAugmentation, Base as Base$1, Link as Link$1, Meta as Meta$1, Style as Style$1, Script as Script$1, Noscript as Noscript$1, DataKeys, SchemaAugmentations, DefinedValueOrEmptyObject, MaybeFunctionEntries, BodyEvents, MergeHead, Unhead, CreateHeadOptions } from '@unhead/schema';
|
|
3
|
+
|
|
4
|
+
type MaybeReadonlyRef<T> = (() => T) | ComputedRef<T>;
|
|
5
|
+
type MaybeComputedRef<T> = T | MaybeReadonlyRef<T> | Ref<T>;
|
|
6
|
+
type MaybeComputedRefOrPromise<T> = T | MaybeReadonlyRef<T> | Ref<T> | Promise<T>;
|
|
7
|
+
type MaybeComputedRefEntries<T> = MaybeComputedRef<T> | {
|
|
8
|
+
[key in keyof T]?: MaybeComputedRefOrPromise<T[key]>;
|
|
9
|
+
};
|
|
10
|
+
type Arrayable<T> = T | Array<T>;
|
|
11
|
+
|
|
12
|
+
interface HtmlAttr extends Omit<BaseHtmlAttr, 'class'> {
|
|
13
|
+
/**
|
|
14
|
+
* The class global attribute is a space-separated list of the case-sensitive classes of the element.
|
|
15
|
+
*
|
|
16
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class
|
|
17
|
+
*/
|
|
18
|
+
class?: MaybeArray<MaybeComputedRef<string>> | Record<string, MaybeComputedRef<boolean>>;
|
|
19
|
+
}
|
|
20
|
+
interface BodyAttr extends Omit<BaseBodyAttr, 'class'> {
|
|
21
|
+
/**
|
|
22
|
+
* The class global attribute is a space-separated list of the case-sensitive classes of the element.
|
|
23
|
+
*
|
|
24
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class
|
|
25
|
+
*/
|
|
26
|
+
class?: MaybeArray<MaybeComputedRef<string>> | Record<string, MaybeComputedRef<boolean>>;
|
|
27
|
+
}
|
|
28
|
+
type Title = MaybeComputedRef<Title$1>;
|
|
29
|
+
type TitleTemplate = TitleTemplate$1 | Ref<TitleTemplate$1> | ((title?: string) => TitleTemplate$1);
|
|
30
|
+
type Base<E extends EntryAugmentation = {}> = MaybeComputedRef<MaybeComputedRefEntries<Base$1<E>>>;
|
|
31
|
+
type Link<E extends EntryAugmentation = {}> = MaybeComputedRefEntries<Link$1<E>>;
|
|
32
|
+
type Meta<E extends EntryAugmentation = {}> = MaybeComputedRefEntries<Meta$1<E>>;
|
|
33
|
+
type Style<E extends EntryAugmentation = {}> = MaybeComputedRefEntries<Style$1<E>>;
|
|
34
|
+
type Script<E extends EntryAugmentation = {}> = MaybeComputedRefEntries<Script$1<E>>;
|
|
35
|
+
type Noscript<E extends EntryAugmentation = {}> = MaybeComputedRefEntries<Noscript$1<E>>;
|
|
36
|
+
type HtmlAttributes<E extends EntryAugmentation = {}> = MaybeComputedRef<MaybeComputedRefEntries<HtmlAttr & DataKeys & SchemaAugmentations['htmlAttrs'] & DefinedValueOrEmptyObject<E>>>;
|
|
37
|
+
type BodyAttributes<E extends EntryAugmentation = {}> = MaybeComputedRef<MaybeComputedRefEntries<BodyAttr & DataKeys & SchemaAugmentations['bodyAttrs'] & DefinedValueOrEmptyObject<E>> & MaybeFunctionEntries<BodyEvents>>;
|
|
38
|
+
interface ReactiveHead<E extends MergeHead = MergeHead> {
|
|
39
|
+
/**
|
|
40
|
+
* The <title> HTML element defines the document's title that is shown in a browser's title bar or a page's tab.
|
|
41
|
+
* It only contains text; tags within the element are ignored.
|
|
42
|
+
*
|
|
43
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title
|
|
44
|
+
*/
|
|
45
|
+
title?: Title | Promise<Title>;
|
|
46
|
+
/**
|
|
47
|
+
* Generate the title from a template.
|
|
48
|
+
*/
|
|
49
|
+
titleTemplate?: TitleTemplate;
|
|
50
|
+
/**
|
|
51
|
+
* Variables used to substitute in the title and meta content.
|
|
52
|
+
*/
|
|
53
|
+
templateParams?: MaybeComputedRefEntries<Record<string, string>>;
|
|
54
|
+
/**
|
|
55
|
+
* The <base> HTML element specifies the base URL to use for all relative URLs in a document.
|
|
56
|
+
* There can be only one <base> element in a document.
|
|
57
|
+
*
|
|
58
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
|
|
59
|
+
*/
|
|
60
|
+
base?: Base<E['base']>;
|
|
61
|
+
/**
|
|
62
|
+
* The <link> HTML element specifies relationships between the current document and an external resource.
|
|
63
|
+
* This element is most commonly used to link to stylesheets, but is also used to establish site icons
|
|
64
|
+
* (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things.
|
|
65
|
+
*
|
|
66
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-as
|
|
67
|
+
*/
|
|
68
|
+
link?: MaybeComputedRef<Link<E['link']>[]>;
|
|
69
|
+
/**
|
|
70
|
+
* The <meta> element represents metadata that cannot be expressed in other HTML elements, like <link> or <script>.
|
|
71
|
+
*
|
|
72
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
|
|
73
|
+
*/
|
|
74
|
+
meta?: MaybeComputedRef<Meta<E['meta']>[]>;
|
|
75
|
+
/**
|
|
76
|
+
* The <style> HTML element contains style information for a document, or part of a document.
|
|
77
|
+
* It contains CSS, which is applied to the contents of the document containing the <style> element.
|
|
78
|
+
*
|
|
79
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style
|
|
80
|
+
*/
|
|
81
|
+
style?: MaybeComputedRef<(Style<E['style']> | string)[]>;
|
|
82
|
+
/**
|
|
83
|
+
* The <script> HTML element is used to embed executable code or data; this is typically used to embed or refer to JavaScript code.
|
|
84
|
+
*
|
|
85
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
|
|
86
|
+
*/
|
|
87
|
+
script?: MaybeComputedRef<(Script<E['script']> | string)[]>;
|
|
88
|
+
/**
|
|
89
|
+
* The <noscript> HTML element defines a section of HTML to be inserted if a script type on the page is unsupported
|
|
90
|
+
* or if scripting is currently turned off in the browser.
|
|
91
|
+
*
|
|
92
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript
|
|
93
|
+
*/
|
|
94
|
+
noscript?: MaybeComputedRef<(Noscript<E['noscript']> | string)[]>;
|
|
95
|
+
/**
|
|
96
|
+
* Attributes for the <html> HTML element.
|
|
97
|
+
*
|
|
98
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html
|
|
99
|
+
*/
|
|
100
|
+
htmlAttrs?: HtmlAttributes<E['htmlAttrs']>;
|
|
101
|
+
/**
|
|
102
|
+
* Attributes for the <body> HTML element.
|
|
103
|
+
*
|
|
104
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body
|
|
105
|
+
*/
|
|
106
|
+
bodyAttrs?: BodyAttributes<E['bodyAttrs']>;
|
|
107
|
+
}
|
|
108
|
+
type UseHeadInput<T extends MergeHead = {}> = MaybeComputedRef<ReactiveHead<T>>;
|
|
109
|
+
|
|
110
|
+
type VueHeadClient<T extends MergeHead> = Unhead<MaybeComputedRef<ReactiveHead<T>>> & Plugin;
|
|
111
|
+
declare const headSymbol = "usehead";
|
|
112
|
+
declare function injectHead<T extends MergeHead>(): VueHeadClient<T>;
|
|
113
|
+
declare function createServerHead<T extends MergeHead>(options?: Omit<CreateHeadOptions, 'domDelayFn' | 'document'>): VueHeadClient<T>;
|
|
114
|
+
declare function createHead<T extends MergeHead>(options?: Omit<CreateHeadOptions, 'domDelayFn'>): VueHeadClient<T>;
|
|
115
|
+
|
|
116
|
+
export { Arrayable as A, BodyAttr as B, HtmlAttr as H, Link as L, MaybeComputedRefEntries as M, Noscript as N, ReactiveHead as R, Script as S, Title as T, UseHeadInput as U, VueHeadClient as V, MaybeComputedRef as a, Meta as b, Style as c, TitleTemplate as d, Base as e, HtmlAttributes as f, BodyAttributes as g, MaybeReadonlyRef as h, MaybeComputedRefOrPromise as i, headSymbol as j, injectHead as k, createServerHead as l, createHead as m };
|
package/dist/index.cjs
CHANGED
|
@@ -1,67 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
const unhead = require('unhead');
|
|
4
|
+
const useHead = require('./shared/vue.97abe623.cjs');
|
|
4
5
|
const vue = require('vue');
|
|
5
6
|
const shared = require('@unhead/shared');
|
|
6
7
|
|
|
7
|
-
function resolveUnref(r) {
|
|
8
|
-
return typeof r === "function" ? r() : vue.unref(r);
|
|
9
|
-
}
|
|
10
|
-
function resolveUnrefHeadInput(ref, lastKey = "") {
|
|
11
|
-
if (ref instanceof Promise)
|
|
12
|
-
return ref;
|
|
13
|
-
const root = resolveUnref(ref);
|
|
14
|
-
if (!ref || !root)
|
|
15
|
-
return root;
|
|
16
|
-
if (Array.isArray(root))
|
|
17
|
-
return root.map((r) => resolveUnrefHeadInput(r, lastKey));
|
|
18
|
-
if (typeof root === "object") {
|
|
19
|
-
let dynamic = false;
|
|
20
|
-
const unrefdObj = Object.fromEntries(
|
|
21
|
-
Object.entries(root).map(([k, v]) => {
|
|
22
|
-
if (k === "titleTemplate" || k.startsWith("on"))
|
|
23
|
-
return [k, vue.unref(v)];
|
|
24
|
-
if (typeof v === "function" || vue.isRef(v))
|
|
25
|
-
dynamic = true;
|
|
26
|
-
return [k, resolveUnrefHeadInput(v, k)];
|
|
27
|
-
})
|
|
28
|
-
);
|
|
29
|
-
if (dynamic && shared.HasElementTags.includes(String(lastKey)))
|
|
30
|
-
unrefdObj._dynamic = true;
|
|
31
|
-
return unrefdObj;
|
|
32
|
-
}
|
|
33
|
-
return root;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
const Vue3 = vue.version.startsWith("3");
|
|
37
|
-
const IsBrowser = typeof window !== "undefined";
|
|
38
|
-
|
|
39
|
-
const headSymbol = "usehead";
|
|
40
|
-
function injectHead() {
|
|
41
|
-
return vue.getCurrentInstance() && vue.inject(headSymbol) || unhead.getActiveHead();
|
|
42
|
-
}
|
|
43
|
-
function createHead(options = {}) {
|
|
44
|
-
const head = unhead.createHead({
|
|
45
|
-
...options,
|
|
46
|
-
// arbitrary delay the dom update for batch updates
|
|
47
|
-
domDelayFn: (fn) => setTimeout(() => vue.nextTick(() => fn()), 10),
|
|
48
|
-
plugins: [
|
|
49
|
-
VueReactiveUseHeadPlugin(),
|
|
50
|
-
...options?.plugins || []
|
|
51
|
-
]
|
|
52
|
-
});
|
|
53
|
-
const vuePlugin = {
|
|
54
|
-
install(app) {
|
|
55
|
-
if (Vue3) {
|
|
56
|
-
app.config.globalProperties.$unhead = head;
|
|
57
|
-
app.provide(headSymbol, head);
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
};
|
|
61
|
-
head.install = vuePlugin.install;
|
|
62
|
-
return head;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
8
|
const VueHeadMixin = {
|
|
66
9
|
created() {
|
|
67
10
|
const instance = vue.getCurrentInstance();
|
|
@@ -71,21 +14,10 @@ const VueHeadMixin = {
|
|
|
71
14
|
if (!options || !("head" in options))
|
|
72
15
|
return;
|
|
73
16
|
const source = typeof options.head === "function" ? () => options.head.call(instance.proxy) : options.head;
|
|
74
|
-
useHead(source);
|
|
17
|
+
useHead.useHead(source);
|
|
75
18
|
}
|
|
76
19
|
};
|
|
77
20
|
|
|
78
|
-
const VueReactiveUseHeadPlugin = () => {
|
|
79
|
-
return shared.defineHeadPlugin({
|
|
80
|
-
hooks: {
|
|
81
|
-
"entries:resolve": function(ctx) {
|
|
82
|
-
for (const entry of ctx.entries)
|
|
83
|
-
entry.resolvedInput = resolveUnrefHeadInput(entry.input);
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
});
|
|
87
|
-
};
|
|
88
|
-
|
|
89
21
|
const Vue2ProvideUnheadPlugin = function(_Vue, head) {
|
|
90
22
|
_Vue.mixin({
|
|
91
23
|
beforeCreate() {
|
|
@@ -99,62 +31,21 @@ const Vue2ProvideUnheadPlugin = function(_Vue, head) {
|
|
|
99
31
|
origProvideResult = origProvide || {};
|
|
100
32
|
return {
|
|
101
33
|
...origProvideResult,
|
|
102
|
-
[headSymbol]: head
|
|
34
|
+
[useHead.headSymbol]: head
|
|
103
35
|
};
|
|
104
36
|
};
|
|
105
37
|
}
|
|
106
38
|
});
|
|
107
39
|
};
|
|
108
40
|
|
|
109
|
-
function clientUseHead(input, options = {}) {
|
|
110
|
-
const head = injectHead();
|
|
111
|
-
const deactivated = vue.ref(false);
|
|
112
|
-
const resolvedInput = vue.ref({});
|
|
113
|
-
vue.watchEffect(() => {
|
|
114
|
-
resolvedInput.value = deactivated.value ? {} : resolveUnrefHeadInput(input);
|
|
115
|
-
});
|
|
116
|
-
const entry = head.push(resolvedInput.value, options);
|
|
117
|
-
vue.watch(resolvedInput, (e) => {
|
|
118
|
-
entry.patch(e);
|
|
119
|
-
});
|
|
120
|
-
const vm = vue.getCurrentInstance();
|
|
121
|
-
if (vm) {
|
|
122
|
-
vue.onBeforeUnmount(() => {
|
|
123
|
-
entry.dispose();
|
|
124
|
-
});
|
|
125
|
-
vue.onDeactivated(() => {
|
|
126
|
-
deactivated.value = true;
|
|
127
|
-
});
|
|
128
|
-
vue.onActivated(() => {
|
|
129
|
-
deactivated.value = false;
|
|
130
|
-
});
|
|
131
|
-
}
|
|
132
|
-
return entry;
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
function serverUseHead(input, options = {}) {
|
|
136
|
-
const head = injectHead();
|
|
137
|
-
return head.push(input, options);
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
function useHead(input, options = {}) {
|
|
141
|
-
const head = injectHead();
|
|
142
|
-
if (head) {
|
|
143
|
-
const isBrowser = IsBrowser || !!head.resolvedOptions?.document;
|
|
144
|
-
if (options.mode === "server" && isBrowser || options.mode === "client" && !isBrowser)
|
|
145
|
-
return;
|
|
146
|
-
return isBrowser ? clientUseHead(input, options) : serverUseHead(input, options);
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
|
|
150
41
|
function useHeadSafe(input, options = {}) {
|
|
151
|
-
return useHead(input, { ...options, transform: unhead.whitelistSafeInput });
|
|
42
|
+
return useHead.useHead(input, { ...options, transform: unhead.whitelistSafeInput });
|
|
152
43
|
}
|
|
153
44
|
|
|
154
45
|
const useSeoMeta = (input, options) => {
|
|
155
46
|
const headInput = vue.ref({});
|
|
156
47
|
vue.watchEffect(() => {
|
|
157
|
-
const resolvedMeta = resolveUnrefHeadInput(input);
|
|
48
|
+
const resolvedMeta = useHead.resolveUnrefHeadInput(input);
|
|
158
49
|
const { title, titleTemplate, ...meta } = resolvedMeta;
|
|
159
50
|
headInput.value = {
|
|
160
51
|
title,
|
|
@@ -162,11 +53,11 @@ const useSeoMeta = (input, options) => {
|
|
|
162
53
|
meta: unhead.unpackMeta(meta)
|
|
163
54
|
};
|
|
164
55
|
});
|
|
165
|
-
return useHead(headInput, options);
|
|
56
|
+
return useHead.useHead(headInput, options);
|
|
166
57
|
};
|
|
167
58
|
|
|
168
59
|
function useServerHead(input, options = {}) {
|
|
169
|
-
return useHead(input, { ...options, mode: "server" });
|
|
60
|
+
return useHead.useHead(input, { ...options, mode: "server" });
|
|
170
61
|
}
|
|
171
62
|
|
|
172
63
|
function useServerHeadSafe(input, options = {}) {
|
|
@@ -177,30 +68,30 @@ function useServerSeoMeta(input, options) {
|
|
|
177
68
|
return useSeoMeta(input, { ...options || {}, mode: "server" });
|
|
178
69
|
}
|
|
179
70
|
|
|
180
|
-
const useTagTitle = (title) => useHead({ title });
|
|
181
|
-
const useTitleTemplate = (titleTemplate) => useHead({ titleTemplate });
|
|
182
|
-
const useTagMeta = (meta) => useHead({ meta: shared.asArray(meta) });
|
|
71
|
+
const useTagTitle = (title) => useHead.useHead({ title });
|
|
72
|
+
const useTitleTemplate = (titleTemplate) => useHead.useHead({ titleTemplate });
|
|
73
|
+
const useTagMeta = (meta) => useHead.useHead({ meta: shared.asArray(meta) });
|
|
183
74
|
const useTagMetaFlat = (meta) => {
|
|
184
75
|
const input = vue.ref({});
|
|
185
76
|
vue.watchEffect(() => {
|
|
186
|
-
input.value = unhead.unpackMeta(resolveUnrefHeadInput(meta));
|
|
77
|
+
input.value = unhead.unpackMeta(useHead.resolveUnrefHeadInput(meta));
|
|
187
78
|
});
|
|
188
|
-
return useHead({ meta: input });
|
|
79
|
+
return useHead.useHead({ meta: input });
|
|
189
80
|
};
|
|
190
|
-
const useTagLink = (link) => useHead({ link: shared.asArray(link) });
|
|
191
|
-
const useTagScript = (script) => useHead({ script: shared.asArray(script) });
|
|
192
|
-
const useTagStyle = (style) => useHead({ style: shared.asArray(style) });
|
|
193
|
-
const useTagNoscript = (noscript) => useHead({ noscript: shared.asArray(noscript) });
|
|
194
|
-
const useTagBase = (base) => useHead({ base });
|
|
195
|
-
const useHtmlAttrs = (attrs) => useHead({ htmlAttrs: attrs });
|
|
196
|
-
const useBodyAttrs = (attrs) => useHead({ bodyAttrs: attrs });
|
|
81
|
+
const useTagLink = (link) => useHead.useHead({ link: shared.asArray(link) });
|
|
82
|
+
const useTagScript = (script) => useHead.useHead({ script: shared.asArray(script) });
|
|
83
|
+
const useTagStyle = (style) => useHead.useHead({ style: shared.asArray(style) });
|
|
84
|
+
const useTagNoscript = (noscript) => useHead.useHead({ noscript: shared.asArray(noscript) });
|
|
85
|
+
const useTagBase = (base) => useHead.useHead({ base });
|
|
86
|
+
const useHtmlAttrs = (attrs) => useHead.useHead({ htmlAttrs: attrs });
|
|
87
|
+
const useBodyAttrs = (attrs) => useHead.useHead({ bodyAttrs: attrs });
|
|
197
88
|
const useServerTagTitle = (title) => useServerHead({ title });
|
|
198
89
|
const useServerTitleTemplate = (titleTemplate) => useServerHead({ titleTemplate });
|
|
199
90
|
const useServerTagMeta = (meta) => useServerHead({ meta: shared.asArray(meta) });
|
|
200
91
|
const useServerTagMetaFlat = (meta) => {
|
|
201
92
|
const input = vue.ref({});
|
|
202
93
|
vue.watchEffect(() => {
|
|
203
|
-
input.value = unhead.unpackMeta(resolveUnrefHeadInput(meta));
|
|
94
|
+
input.value = unhead.unpackMeta(useHead.resolveUnrefHeadInput(meta));
|
|
204
95
|
});
|
|
205
96
|
return useServerHead({ meta: input });
|
|
206
97
|
};
|
|
@@ -210,7 +101,7 @@ const useServerTagStyle = (style) => useServerHead({ style: shared.asArray(style
|
|
|
210
101
|
const useServerTagNoscript = (noscript) => useServerHead({ noscript: shared.asArray(noscript) });
|
|
211
102
|
const useServerTagBase = (base) => useServerHead({ base });
|
|
212
103
|
const useServerHtmlAttrs = (attrs) => useServerHead({ htmlAttrs: attrs });
|
|
213
|
-
const useServerBodyAttrs = (attrs) => useHead({ bodyAttrs: attrs });
|
|
104
|
+
const useServerBodyAttrs = (attrs) => useHead.useHead({ bodyAttrs: attrs });
|
|
214
105
|
|
|
215
106
|
const coreComposableNames = [
|
|
216
107
|
"injectHead"
|
|
@@ -220,16 +111,17 @@ const unheadVueComposablesImports = {
|
|
|
220
111
|
};
|
|
221
112
|
|
|
222
113
|
exports.createHeadCore = unhead.createHeadCore;
|
|
114
|
+
exports.VueReactiveUseHeadPlugin = useHead.VueReactiveUseHeadPlugin;
|
|
115
|
+
exports.createHead = useHead.createHead;
|
|
116
|
+
exports.createServerHead = useHead.createServerHead;
|
|
117
|
+
exports.headSymbol = useHead.headSymbol;
|
|
118
|
+
exports.injectHead = useHead.injectHead;
|
|
119
|
+
exports.resolveUnrefHeadInput = useHead.resolveUnrefHeadInput;
|
|
120
|
+
exports.useHead = useHead.useHead;
|
|
223
121
|
exports.Vue2ProvideUnheadPlugin = Vue2ProvideUnheadPlugin;
|
|
224
122
|
exports.VueHeadMixin = VueHeadMixin;
|
|
225
|
-
exports.VueReactiveUseHeadPlugin = VueReactiveUseHeadPlugin;
|
|
226
|
-
exports.createHead = createHead;
|
|
227
|
-
exports.headSymbol = headSymbol;
|
|
228
|
-
exports.injectHead = injectHead;
|
|
229
|
-
exports.resolveUnrefHeadInput = resolveUnrefHeadInput;
|
|
230
123
|
exports.unheadVueComposablesImports = unheadVueComposablesImports;
|
|
231
124
|
exports.useBodyAttrs = useBodyAttrs;
|
|
232
|
-
exports.useHead = useHead;
|
|
233
125
|
exports.useHeadSafe = useHeadSafe;
|
|
234
126
|
exports.useHtmlAttrs = useHtmlAttrs;
|
|
235
127
|
exports.useSeoMeta = useSeoMeta;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,114 +1,10 @@
|
|
|
1
1
|
export { createHeadCore } from 'unhead';
|
|
2
|
+
import { R as ReactiveHead, M as MaybeComputedRefEntries, a as MaybeComputedRef, U as UseHeadInput, A as Arrayable, b as Meta, L as Link, S as Script, c as Style, N as Noscript } from './createHead-f0e81df3.js';
|
|
3
|
+
export { e as Base, B as BodyAttr, g as BodyAttributes, H as HtmlAttr, f as HtmlAttributes, i as MaybeComputedRefOrPromise, h as MaybeReadonlyRef, T as Title, d as TitleTemplate, V as VueHeadClient, m as createHead, l as createServerHead, j as headSymbol, k as injectHead } from './createHead-f0e81df3.js';
|
|
2
4
|
import * as _unhead_schema from '@unhead/schema';
|
|
3
|
-
import {
|
|
5
|
+
import { SafeMeta, SafeLink, SafeNoscript, SafeScript, SafeHtmlAttr, SafeBodyAttr, MergeHead, HeadEntryOptions, ActiveHeadEntry, MetaFlatInput } from '@unhead/schema';
|
|
4
6
|
export { ActiveHeadEntry, Head, HeadEntryOptions, HeadTag, MergeHead, Unhead } from '@unhead/schema';
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
type MaybeReadonlyRef<T> = (() => T) | ComputedRef<T>;
|
|
8
|
-
type MaybeComputedRef<T> = T | MaybeReadonlyRef<T> | Ref<T>;
|
|
9
|
-
type MaybeComputedRefOrPromise<T> = T | MaybeReadonlyRef<T> | Ref<T> | Promise<T>;
|
|
10
|
-
type MaybeComputedRefEntries<T> = MaybeComputedRef<T> | {
|
|
11
|
-
[key in keyof T]?: MaybeComputedRefOrPromise<T[key]>;
|
|
12
|
-
};
|
|
13
|
-
type Arrayable<T> = T | Array<T>;
|
|
14
|
-
|
|
15
|
-
interface HtmlAttr extends Omit<BaseHtmlAttr, 'class'> {
|
|
16
|
-
/**
|
|
17
|
-
* The class global attribute is a space-separated list of the case-sensitive classes of the element.
|
|
18
|
-
*
|
|
19
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class
|
|
20
|
-
*/
|
|
21
|
-
class?: MaybeArray<MaybeComputedRef<string>> | Record<string, MaybeComputedRef<boolean>>;
|
|
22
|
-
}
|
|
23
|
-
interface BodyAttr extends Omit<BaseBodyAttr, 'class'> {
|
|
24
|
-
/**
|
|
25
|
-
* The class global attribute is a space-separated list of the case-sensitive classes of the element.
|
|
26
|
-
*
|
|
27
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class
|
|
28
|
-
*/
|
|
29
|
-
class?: MaybeArray<MaybeComputedRef<string>> | Record<string, MaybeComputedRef<boolean>>;
|
|
30
|
-
}
|
|
31
|
-
type Title = MaybeComputedRef<Title$1>;
|
|
32
|
-
type TitleTemplate = TitleTemplate$1 | Ref<TitleTemplate$1> | ((title?: string) => TitleTemplate$1);
|
|
33
|
-
type Base<E extends EntryAugmentation = {}> = MaybeComputedRef<MaybeComputedRefEntries<Base$1<E>>>;
|
|
34
|
-
type Link<E extends EntryAugmentation = {}> = MaybeComputedRefEntries<Link$1<E>>;
|
|
35
|
-
type Meta<E extends EntryAugmentation = {}> = MaybeComputedRefEntries<Meta$1<E>>;
|
|
36
|
-
type Style<E extends EntryAugmentation = {}> = MaybeComputedRefEntries<Style$1<E>>;
|
|
37
|
-
type Script<E extends EntryAugmentation = {}> = MaybeComputedRefEntries<Script$1<E>>;
|
|
38
|
-
type Noscript<E extends EntryAugmentation = {}> = MaybeComputedRefEntries<Noscript$1<E>>;
|
|
39
|
-
type HtmlAttributes<E extends EntryAugmentation = {}> = MaybeComputedRef<MaybeComputedRefEntries<HtmlAttr & DataKeys & SchemaAugmentations['htmlAttrs'] & DefinedValueOrEmptyObject<E>>>;
|
|
40
|
-
type BodyAttributes<E extends EntryAugmentation = {}> = MaybeComputedRef<MaybeComputedRefEntries<BodyAttr & DataKeys & SchemaAugmentations['bodyAttrs'] & DefinedValueOrEmptyObject<E>> & MaybeFunctionEntries<BodyEvents>>;
|
|
41
|
-
interface ReactiveHead<E extends MergeHead = MergeHead> {
|
|
42
|
-
/**
|
|
43
|
-
* The <title> HTML element defines the document's title that is shown in a browser's title bar or a page's tab.
|
|
44
|
-
* It only contains text; tags within the element are ignored.
|
|
45
|
-
*
|
|
46
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title
|
|
47
|
-
*/
|
|
48
|
-
title?: Title | Promise<Title>;
|
|
49
|
-
/**
|
|
50
|
-
* Generate the title from a template.
|
|
51
|
-
*/
|
|
52
|
-
titleTemplate?: TitleTemplate;
|
|
53
|
-
/**
|
|
54
|
-
* Variables used to substitute in the title and meta content.
|
|
55
|
-
*/
|
|
56
|
-
templateParams?: MaybeComputedRefEntries<Record<string, string>>;
|
|
57
|
-
/**
|
|
58
|
-
* The <base> HTML element specifies the base URL to use for all relative URLs in a document.
|
|
59
|
-
* There can be only one <base> element in a document.
|
|
60
|
-
*
|
|
61
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
|
|
62
|
-
*/
|
|
63
|
-
base?: Base<E['base']>;
|
|
64
|
-
/**
|
|
65
|
-
* The <link> HTML element specifies relationships between the current document and an external resource.
|
|
66
|
-
* This element is most commonly used to link to stylesheets, but is also used to establish site icons
|
|
67
|
-
* (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things.
|
|
68
|
-
*
|
|
69
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-as
|
|
70
|
-
*/
|
|
71
|
-
link?: MaybeComputedRef<Link<E['link']>[]>;
|
|
72
|
-
/**
|
|
73
|
-
* The <meta> element represents metadata that cannot be expressed in other HTML elements, like <link> or <script>.
|
|
74
|
-
*
|
|
75
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
|
|
76
|
-
*/
|
|
77
|
-
meta?: MaybeComputedRef<Meta<E['meta']>[]>;
|
|
78
|
-
/**
|
|
79
|
-
* The <style> HTML element contains style information for a document, or part of a document.
|
|
80
|
-
* It contains CSS, which is applied to the contents of the document containing the <style> element.
|
|
81
|
-
*
|
|
82
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style
|
|
83
|
-
*/
|
|
84
|
-
style?: MaybeComputedRef<(Style<E['style']> | string)[]>;
|
|
85
|
-
/**
|
|
86
|
-
* The <script> HTML element is used to embed executable code or data; this is typically used to embed or refer to JavaScript code.
|
|
87
|
-
*
|
|
88
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
|
|
89
|
-
*/
|
|
90
|
-
script?: MaybeComputedRef<(Script<E['script']> | string)[]>;
|
|
91
|
-
/**
|
|
92
|
-
* The <noscript> HTML element defines a section of HTML to be inserted if a script type on the page is unsupported
|
|
93
|
-
* or if scripting is currently turned off in the browser.
|
|
94
|
-
*
|
|
95
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript
|
|
96
|
-
*/
|
|
97
|
-
noscript?: MaybeComputedRef<(Noscript<E['noscript']> | string)[]>;
|
|
98
|
-
/**
|
|
99
|
-
* Attributes for the <html> HTML element.
|
|
100
|
-
*
|
|
101
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html
|
|
102
|
-
*/
|
|
103
|
-
htmlAttrs?: HtmlAttributes<E['htmlAttrs']>;
|
|
104
|
-
/**
|
|
105
|
-
* Attributes for the <body> HTML element.
|
|
106
|
-
*
|
|
107
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body
|
|
108
|
-
*/
|
|
109
|
-
bodyAttrs?: BodyAttributes<E['bodyAttrs']>;
|
|
110
|
-
}
|
|
111
|
-
type UseHeadInput<T extends MergeHead = {}> = MaybeComputedRef<ReactiveHead<T>>;
|
|
7
|
+
import { Plugin } from 'vue';
|
|
112
8
|
|
|
113
9
|
interface HeadSafe extends Pick<ReactiveHead, 'title' | 'titleTemplate' | 'templateParams'> {
|
|
114
10
|
meta?: MaybeComputedRefEntries<SafeMeta>[];
|
|
@@ -122,11 +18,6 @@ type UseHeadSafeInput = MaybeComputedRef<HeadSafe>;
|
|
|
122
18
|
|
|
123
19
|
declare function resolveUnrefHeadInput(ref: any, lastKey?: string | number): any;
|
|
124
20
|
|
|
125
|
-
type VueHeadClient<T extends MergeHead> = Unhead<MaybeComputedRef<ReactiveHead<T>>> & Plugin;
|
|
126
|
-
declare const headSymbol = "usehead";
|
|
127
|
-
declare function injectHead<T extends MergeHead>(): VueHeadClient<T>;
|
|
128
|
-
declare function createHead<T extends MergeHead>(options?: Omit<CreateHeadOptions, 'domDelayFn'>): VueHeadClient<T>;
|
|
129
|
-
|
|
130
21
|
declare const VueHeadMixin: {
|
|
131
22
|
created(): void;
|
|
132
23
|
};
|
|
@@ -244,4 +135,4 @@ declare const unheadVueComposablesImports: {
|
|
|
244
135
|
'@unhead/vue': string[];
|
|
245
136
|
};
|
|
246
137
|
|
|
247
|
-
export { Arrayable,
|
|
138
|
+
export { Arrayable, HeadSafe, Link, MaybeComputedRef, MaybeComputedRefEntries, Meta, Noscript, ReactiveHead, Script, Style, UseHeadInput, UseHeadSafeInput, UseSeoMetaInput, Vue2ProvideUnheadPlugin, VueHeadMixin, VueReactiveUseHeadPlugin, resolveUnrefHeadInput, unheadVueComposablesImports, useBodyAttrs, useHead, useHeadSafe, useHtmlAttrs, useSeoMeta, useServerBodyAttrs, useServerHead, useServerHeadSafe, useServerHtmlAttrs, useServerSeoMeta, useServerTagBase, useServerTagLink, useServerTagMeta, useServerTagMetaFlat, useServerTagNoscript, useServerTagScript, useServerTagStyle, useServerTagTitle, useServerTitleTemplate, useTagBase, useTagLink, useTagMeta, useTagMetaFlat, useTagNoscript, useTagScript, useTagStyle, useTagTitle, useTitleTemplate };
|
package/dist/index.mjs
CHANGED
|
@@ -1,65 +1,9 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { whitelistSafeInput, unpackMeta, composableNames } from 'unhead';
|
|
2
2
|
export { createHeadCore } from 'unhead';
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
return typeof r === "function" ? r() : unref(r);
|
|
8
|
-
}
|
|
9
|
-
function resolveUnrefHeadInput(ref, lastKey = "") {
|
|
10
|
-
if (ref instanceof Promise)
|
|
11
|
-
return ref;
|
|
12
|
-
const root = resolveUnref(ref);
|
|
13
|
-
if (!ref || !root)
|
|
14
|
-
return root;
|
|
15
|
-
if (Array.isArray(root))
|
|
16
|
-
return root.map((r) => resolveUnrefHeadInput(r, lastKey));
|
|
17
|
-
if (typeof root === "object") {
|
|
18
|
-
let dynamic = false;
|
|
19
|
-
const unrefdObj = Object.fromEntries(
|
|
20
|
-
Object.entries(root).map(([k, v]) => {
|
|
21
|
-
if (k === "titleTemplate" || k.startsWith("on"))
|
|
22
|
-
return [k, unref(v)];
|
|
23
|
-
if (typeof v === "function" || isRef(v))
|
|
24
|
-
dynamic = true;
|
|
25
|
-
return [k, resolveUnrefHeadInput(v, k)];
|
|
26
|
-
})
|
|
27
|
-
);
|
|
28
|
-
if (dynamic && HasElementTags.includes(String(lastKey)))
|
|
29
|
-
unrefdObj._dynamic = true;
|
|
30
|
-
return unrefdObj;
|
|
31
|
-
}
|
|
32
|
-
return root;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
const Vue3 = version.startsWith("3");
|
|
36
|
-
const IsBrowser = typeof window !== "undefined";
|
|
37
|
-
|
|
38
|
-
const headSymbol = "usehead";
|
|
39
|
-
function injectHead() {
|
|
40
|
-
return getCurrentInstance() && inject(headSymbol) || getActiveHead();
|
|
41
|
-
}
|
|
42
|
-
function createHead(options = {}) {
|
|
43
|
-
const head = createHead$1({
|
|
44
|
-
...options,
|
|
45
|
-
// arbitrary delay the dom update for batch updates
|
|
46
|
-
domDelayFn: (fn) => setTimeout(() => nextTick(() => fn()), 10),
|
|
47
|
-
plugins: [
|
|
48
|
-
VueReactiveUseHeadPlugin(),
|
|
49
|
-
...options?.plugins || []
|
|
50
|
-
]
|
|
51
|
-
});
|
|
52
|
-
const vuePlugin = {
|
|
53
|
-
install(app) {
|
|
54
|
-
if (Vue3) {
|
|
55
|
-
app.config.globalProperties.$unhead = head;
|
|
56
|
-
app.provide(headSymbol, head);
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
};
|
|
60
|
-
head.install = vuePlugin.install;
|
|
61
|
-
return head;
|
|
62
|
-
}
|
|
3
|
+
import { u as useHead, h as headSymbol, r as resolveUnrefHeadInput } from './shared/vue.b6e29710.mjs';
|
|
4
|
+
export { V as VueReactiveUseHeadPlugin, a as createHead, c as createServerHead, i as injectHead } from './shared/vue.b6e29710.mjs';
|
|
5
|
+
import { getCurrentInstance, ref, watchEffect } from 'vue';
|
|
6
|
+
import { asArray } from '@unhead/shared';
|
|
63
7
|
|
|
64
8
|
const VueHeadMixin = {
|
|
65
9
|
created() {
|
|
@@ -74,17 +18,6 @@ const VueHeadMixin = {
|
|
|
74
18
|
}
|
|
75
19
|
};
|
|
76
20
|
|
|
77
|
-
const VueReactiveUseHeadPlugin = () => {
|
|
78
|
-
return defineHeadPlugin({
|
|
79
|
-
hooks: {
|
|
80
|
-
"entries:resolve": function(ctx) {
|
|
81
|
-
for (const entry of ctx.entries)
|
|
82
|
-
entry.resolvedInput = resolveUnrefHeadInput(entry.input);
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
});
|
|
86
|
-
};
|
|
87
|
-
|
|
88
21
|
const Vue2ProvideUnheadPlugin = function(_Vue, head) {
|
|
89
22
|
_Vue.mixin({
|
|
90
23
|
beforeCreate() {
|
|
@@ -105,47 +38,6 @@ const Vue2ProvideUnheadPlugin = function(_Vue, head) {
|
|
|
105
38
|
});
|
|
106
39
|
};
|
|
107
40
|
|
|
108
|
-
function clientUseHead(input, options = {}) {
|
|
109
|
-
const head = injectHead();
|
|
110
|
-
const deactivated = ref(false);
|
|
111
|
-
const resolvedInput = ref({});
|
|
112
|
-
watchEffect(() => {
|
|
113
|
-
resolvedInput.value = deactivated.value ? {} : resolveUnrefHeadInput(input);
|
|
114
|
-
});
|
|
115
|
-
const entry = head.push(resolvedInput.value, options);
|
|
116
|
-
watch(resolvedInput, (e) => {
|
|
117
|
-
entry.patch(e);
|
|
118
|
-
});
|
|
119
|
-
const vm = getCurrentInstance();
|
|
120
|
-
if (vm) {
|
|
121
|
-
onBeforeUnmount(() => {
|
|
122
|
-
entry.dispose();
|
|
123
|
-
});
|
|
124
|
-
onDeactivated(() => {
|
|
125
|
-
deactivated.value = true;
|
|
126
|
-
});
|
|
127
|
-
onActivated(() => {
|
|
128
|
-
deactivated.value = false;
|
|
129
|
-
});
|
|
130
|
-
}
|
|
131
|
-
return entry;
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
function serverUseHead(input, options = {}) {
|
|
135
|
-
const head = injectHead();
|
|
136
|
-
return head.push(input, options);
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
function useHead(input, options = {}) {
|
|
140
|
-
const head = injectHead();
|
|
141
|
-
if (head) {
|
|
142
|
-
const isBrowser = IsBrowser || !!head.resolvedOptions?.document;
|
|
143
|
-
if (options.mode === "server" && isBrowser || options.mode === "client" && !isBrowser)
|
|
144
|
-
return;
|
|
145
|
-
return isBrowser ? clientUseHead(input, options) : serverUseHead(input, options);
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
|
|
149
41
|
function useHeadSafe(input, options = {}) {
|
|
150
42
|
return useHead(input, { ...options, transform: whitelistSafeInput });
|
|
151
43
|
}
|
|
@@ -218,4 +110,4 @@ const unheadVueComposablesImports = {
|
|
|
218
110
|
"@unhead/vue": [...coreComposableNames, ...composableNames]
|
|
219
111
|
};
|
|
220
112
|
|
|
221
|
-
export { Vue2ProvideUnheadPlugin, VueHeadMixin,
|
|
113
|
+
export { Vue2ProvideUnheadPlugin, VueHeadMixin, headSymbol, resolveUnrefHeadInput, unheadVueComposablesImports, useBodyAttrs, useHead, useHeadSafe, useHtmlAttrs, useSeoMeta, useServerBodyAttrs, useServerHead, useServerHeadSafe, useServerHtmlAttrs, useServerSeoMeta, useServerTagBase, useServerTagLink, useServerTagMeta, useServerTagMetaFlat, useServerTagNoscript, useServerTagScript, useServerTagStyle, useServerTagTitle, useServerTitleTemplate, useTagBase, useTagLink, useTagMeta, useTagMetaFlat, useTagNoscript, useTagScript, useTagStyle, useTagTitle, useTitleTemplate };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
const useHead = require('./shared/vue.97abe623.cjs');
|
|
4
|
+
require('vue');
|
|
5
|
+
require('unhead');
|
|
6
|
+
require('@unhead/shared');
|
|
7
|
+
|
|
8
|
+
function polyfillAsVueUseHead(head) {
|
|
9
|
+
const polyfilled = head;
|
|
10
|
+
polyfilled.headTags = head.resolveTags;
|
|
11
|
+
polyfilled.addEntry = head.push;
|
|
12
|
+
polyfilled.addHeadObjs = head.push;
|
|
13
|
+
polyfilled.addReactiveEntry = (input, options) => {
|
|
14
|
+
const api = useHead.useHead(input, options);
|
|
15
|
+
if (typeof api !== "undefined")
|
|
16
|
+
return api.dispose;
|
|
17
|
+
return () => {
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
polyfilled.removeHeadObjs = () => {
|
|
21
|
+
};
|
|
22
|
+
polyfilled.updateDOM = () => {
|
|
23
|
+
head.hooks.callHook("entries:updated", head);
|
|
24
|
+
};
|
|
25
|
+
polyfilled.unhead = head;
|
|
26
|
+
return polyfilled;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
exports.polyfillAsVueUseHead = polyfillAsVueUseHead;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { MergeHead, HeadEntryOptions } from '@unhead/schema';
|
|
2
|
+
import { V as VueHeadClient, U as UseHeadInput } from './createHead-f0e81df3.js';
|
|
3
|
+
import 'vue';
|
|
4
|
+
|
|
5
|
+
type VueHeadClientPollyFill<T extends MergeHead> = VueHeadClient<T> & {
|
|
6
|
+
/**
|
|
7
|
+
* @deprecated use `resolveTags`
|
|
8
|
+
*/
|
|
9
|
+
headTags: VueHeadClient<T>['resolveTags'];
|
|
10
|
+
/**
|
|
11
|
+
* @deprecated use `push`
|
|
12
|
+
*/
|
|
13
|
+
addEntry: VueHeadClient<T>['push'];
|
|
14
|
+
/**
|
|
15
|
+
* @deprecated use `push`
|
|
16
|
+
*/
|
|
17
|
+
addHeadObjs: VueHeadClient<T>['push'];
|
|
18
|
+
/**
|
|
19
|
+
* @deprecated use `useHead`
|
|
20
|
+
*/
|
|
21
|
+
addReactiveEntry: (input: UseHeadInput<T>, options?: HeadEntryOptions) => (() => void);
|
|
22
|
+
/**
|
|
23
|
+
* @deprecated Use useHead API.
|
|
24
|
+
*/
|
|
25
|
+
removeHeadObjs: () => void;
|
|
26
|
+
/**
|
|
27
|
+
* @deprecated Call hook `entries:resolve` or update an entry
|
|
28
|
+
*/
|
|
29
|
+
updateDOM: () => void;
|
|
30
|
+
/**
|
|
31
|
+
* @deprecated Access unhead properties directly.
|
|
32
|
+
*/
|
|
33
|
+
unhead: VueHeadClient<T>;
|
|
34
|
+
};
|
|
35
|
+
declare function polyfillAsVueUseHead<T extends MergeHead>(head: VueHeadClient<T>): VueHeadClientPollyFill<T>;
|
|
36
|
+
|
|
37
|
+
export { VueHeadClientPollyFill, polyfillAsVueUseHead };
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { u as useHead } from './shared/vue.b6e29710.mjs';
|
|
2
|
+
import 'vue';
|
|
3
|
+
import 'unhead';
|
|
4
|
+
import '@unhead/shared';
|
|
5
|
+
|
|
6
|
+
function polyfillAsVueUseHead(head) {
|
|
7
|
+
const polyfilled = head;
|
|
8
|
+
polyfilled.headTags = head.resolveTags;
|
|
9
|
+
polyfilled.addEntry = head.push;
|
|
10
|
+
polyfilled.addHeadObjs = head.push;
|
|
11
|
+
polyfilled.addReactiveEntry = (input, options) => {
|
|
12
|
+
const api = useHead(input, options);
|
|
13
|
+
if (typeof api !== "undefined")
|
|
14
|
+
return api.dispose;
|
|
15
|
+
return () => {
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
polyfilled.removeHeadObjs = () => {
|
|
19
|
+
};
|
|
20
|
+
polyfilled.updateDOM = () => {
|
|
21
|
+
head.hooks.callHook("entries:updated", head);
|
|
22
|
+
};
|
|
23
|
+
polyfilled.unhead = head;
|
|
24
|
+
return polyfilled;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
export { polyfillAsVueUseHead };
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
const vue = require('vue');
|
|
4
|
+
const unhead = require('unhead');
|
|
5
|
+
const shared = require('@unhead/shared');
|
|
6
|
+
|
|
7
|
+
function resolveUnref(r) {
|
|
8
|
+
return typeof r === "function" ? r() : vue.unref(r);
|
|
9
|
+
}
|
|
10
|
+
function resolveUnrefHeadInput(ref, lastKey = "") {
|
|
11
|
+
if (ref instanceof Promise)
|
|
12
|
+
return ref;
|
|
13
|
+
const root = resolveUnref(ref);
|
|
14
|
+
if (!ref || !root)
|
|
15
|
+
return root;
|
|
16
|
+
if (Array.isArray(root))
|
|
17
|
+
return root.map((r) => resolveUnrefHeadInput(r, lastKey));
|
|
18
|
+
if (typeof root === "object") {
|
|
19
|
+
let dynamic = false;
|
|
20
|
+
const unrefdObj = Object.fromEntries(
|
|
21
|
+
Object.entries(root).map(([k, v]) => {
|
|
22
|
+
if (k === "titleTemplate" || k.startsWith("on"))
|
|
23
|
+
return [k, vue.unref(v)];
|
|
24
|
+
if (typeof v === "function" || vue.isRef(v))
|
|
25
|
+
dynamic = true;
|
|
26
|
+
return [k, resolveUnrefHeadInput(v, k)];
|
|
27
|
+
})
|
|
28
|
+
);
|
|
29
|
+
if (dynamic && shared.HasElementTags.includes(String(lastKey)))
|
|
30
|
+
unrefdObj._dynamic = true;
|
|
31
|
+
return unrefdObj;
|
|
32
|
+
}
|
|
33
|
+
return root;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
const Vue3 = vue.version.startsWith("3");
|
|
37
|
+
const IsBrowser = typeof window !== "undefined";
|
|
38
|
+
|
|
39
|
+
const headSymbol = "usehead";
|
|
40
|
+
function injectHead() {
|
|
41
|
+
return vue.getCurrentInstance() && vue.inject(headSymbol) || unhead.getActiveHead();
|
|
42
|
+
}
|
|
43
|
+
function vueInstall(head) {
|
|
44
|
+
const plugin = {
|
|
45
|
+
install(app) {
|
|
46
|
+
if (Vue3) {
|
|
47
|
+
app.config.globalProperties.$unhead = head;
|
|
48
|
+
app.config.globalProperties.$head = head;
|
|
49
|
+
app.provide(headSymbol, head);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
return plugin.install;
|
|
54
|
+
}
|
|
55
|
+
function createServerHead(options = {}) {
|
|
56
|
+
const head = unhead.createServerHead({
|
|
57
|
+
...options,
|
|
58
|
+
plugins: [
|
|
59
|
+
VueReactiveUseHeadPlugin(),
|
|
60
|
+
...options?.plugins || []
|
|
61
|
+
]
|
|
62
|
+
});
|
|
63
|
+
head.install = vueInstall(head);
|
|
64
|
+
return head;
|
|
65
|
+
}
|
|
66
|
+
function createHead(options = {}) {
|
|
67
|
+
const head = unhead.createHead({
|
|
68
|
+
...options,
|
|
69
|
+
// arbitrary delay the dom update for batch updates
|
|
70
|
+
domDelayFn: (fn) => setTimeout(() => vue.nextTick(() => fn()), 10),
|
|
71
|
+
plugins: [
|
|
72
|
+
VueReactiveUseHeadPlugin(),
|
|
73
|
+
...options?.plugins || []
|
|
74
|
+
]
|
|
75
|
+
});
|
|
76
|
+
head.install = vueInstall(head);
|
|
77
|
+
return head;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
const VueReactiveUseHeadPlugin = () => {
|
|
81
|
+
return shared.defineHeadPlugin({
|
|
82
|
+
hooks: {
|
|
83
|
+
"entries:resolve": function(ctx) {
|
|
84
|
+
for (const entry of ctx.entries)
|
|
85
|
+
entry.resolvedInput = resolveUnrefHeadInput(entry.input);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
});
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
function clientUseHead(input, options = {}) {
|
|
92
|
+
const head = injectHead();
|
|
93
|
+
const deactivated = vue.ref(false);
|
|
94
|
+
const resolvedInput = vue.ref({});
|
|
95
|
+
vue.watchEffect(() => {
|
|
96
|
+
resolvedInput.value = deactivated.value ? {} : resolveUnrefHeadInput(input);
|
|
97
|
+
});
|
|
98
|
+
const entry = head.push(resolvedInput.value, options);
|
|
99
|
+
vue.watch(resolvedInput, (e) => {
|
|
100
|
+
entry.patch(e);
|
|
101
|
+
});
|
|
102
|
+
const vm = vue.getCurrentInstance();
|
|
103
|
+
if (vm) {
|
|
104
|
+
vue.onBeforeUnmount(() => {
|
|
105
|
+
entry.dispose();
|
|
106
|
+
});
|
|
107
|
+
vue.onDeactivated(() => {
|
|
108
|
+
deactivated.value = true;
|
|
109
|
+
});
|
|
110
|
+
vue.onActivated(() => {
|
|
111
|
+
deactivated.value = false;
|
|
112
|
+
});
|
|
113
|
+
}
|
|
114
|
+
return entry;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
function serverUseHead(input, options = {}) {
|
|
118
|
+
const head = injectHead();
|
|
119
|
+
return head.push(input, options);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
function useHead(input, options = {}) {
|
|
123
|
+
const head = injectHead();
|
|
124
|
+
if (head) {
|
|
125
|
+
const isBrowser = IsBrowser || !!head.resolvedOptions?.document;
|
|
126
|
+
if (options.mode === "server" && isBrowser || options.mode === "client" && !isBrowser)
|
|
127
|
+
return;
|
|
128
|
+
return isBrowser ? clientUseHead(input, options) : serverUseHead(input, options);
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
exports.VueReactiveUseHeadPlugin = VueReactiveUseHeadPlugin;
|
|
133
|
+
exports.createHead = createHead;
|
|
134
|
+
exports.createServerHead = createServerHead;
|
|
135
|
+
exports.headSymbol = headSymbol;
|
|
136
|
+
exports.injectHead = injectHead;
|
|
137
|
+
exports.resolveUnrefHeadInput = resolveUnrefHeadInput;
|
|
138
|
+
exports.useHead = useHead;
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
import { unref, isRef, version, getCurrentInstance, inject, nextTick, ref, watchEffect, watch, onBeforeUnmount, onDeactivated, onActivated } from 'vue';
|
|
2
|
+
import { getActiveHead, createServerHead as createServerHead$1, createHead as createHead$1 } from 'unhead';
|
|
3
|
+
import { HasElementTags, defineHeadPlugin } from '@unhead/shared';
|
|
4
|
+
|
|
5
|
+
function resolveUnref(r) {
|
|
6
|
+
return typeof r === "function" ? r() : unref(r);
|
|
7
|
+
}
|
|
8
|
+
function resolveUnrefHeadInput(ref, lastKey = "") {
|
|
9
|
+
if (ref instanceof Promise)
|
|
10
|
+
return ref;
|
|
11
|
+
const root = resolveUnref(ref);
|
|
12
|
+
if (!ref || !root)
|
|
13
|
+
return root;
|
|
14
|
+
if (Array.isArray(root))
|
|
15
|
+
return root.map((r) => resolveUnrefHeadInput(r, lastKey));
|
|
16
|
+
if (typeof root === "object") {
|
|
17
|
+
let dynamic = false;
|
|
18
|
+
const unrefdObj = Object.fromEntries(
|
|
19
|
+
Object.entries(root).map(([k, v]) => {
|
|
20
|
+
if (k === "titleTemplate" || k.startsWith("on"))
|
|
21
|
+
return [k, unref(v)];
|
|
22
|
+
if (typeof v === "function" || isRef(v))
|
|
23
|
+
dynamic = true;
|
|
24
|
+
return [k, resolveUnrefHeadInput(v, k)];
|
|
25
|
+
})
|
|
26
|
+
);
|
|
27
|
+
if (dynamic && HasElementTags.includes(String(lastKey)))
|
|
28
|
+
unrefdObj._dynamic = true;
|
|
29
|
+
return unrefdObj;
|
|
30
|
+
}
|
|
31
|
+
return root;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
const Vue3 = version.startsWith("3");
|
|
35
|
+
const IsBrowser = typeof window !== "undefined";
|
|
36
|
+
|
|
37
|
+
const headSymbol = "usehead";
|
|
38
|
+
function injectHead() {
|
|
39
|
+
return getCurrentInstance() && inject(headSymbol) || getActiveHead();
|
|
40
|
+
}
|
|
41
|
+
function vueInstall(head) {
|
|
42
|
+
const plugin = {
|
|
43
|
+
install(app) {
|
|
44
|
+
if (Vue3) {
|
|
45
|
+
app.config.globalProperties.$unhead = head;
|
|
46
|
+
app.config.globalProperties.$head = head;
|
|
47
|
+
app.provide(headSymbol, head);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
return plugin.install;
|
|
52
|
+
}
|
|
53
|
+
function createServerHead(options = {}) {
|
|
54
|
+
const head = createServerHead$1({
|
|
55
|
+
...options,
|
|
56
|
+
plugins: [
|
|
57
|
+
VueReactiveUseHeadPlugin(),
|
|
58
|
+
...options?.plugins || []
|
|
59
|
+
]
|
|
60
|
+
});
|
|
61
|
+
head.install = vueInstall(head);
|
|
62
|
+
return head;
|
|
63
|
+
}
|
|
64
|
+
function createHead(options = {}) {
|
|
65
|
+
const head = createHead$1({
|
|
66
|
+
...options,
|
|
67
|
+
// arbitrary delay the dom update for batch updates
|
|
68
|
+
domDelayFn: (fn) => setTimeout(() => nextTick(() => fn()), 10),
|
|
69
|
+
plugins: [
|
|
70
|
+
VueReactiveUseHeadPlugin(),
|
|
71
|
+
...options?.plugins || []
|
|
72
|
+
]
|
|
73
|
+
});
|
|
74
|
+
head.install = vueInstall(head);
|
|
75
|
+
return head;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
const VueReactiveUseHeadPlugin = () => {
|
|
79
|
+
return defineHeadPlugin({
|
|
80
|
+
hooks: {
|
|
81
|
+
"entries:resolve": function(ctx) {
|
|
82
|
+
for (const entry of ctx.entries)
|
|
83
|
+
entry.resolvedInput = resolveUnrefHeadInput(entry.input);
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
});
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
function clientUseHead(input, options = {}) {
|
|
90
|
+
const head = injectHead();
|
|
91
|
+
const deactivated = ref(false);
|
|
92
|
+
const resolvedInput = ref({});
|
|
93
|
+
watchEffect(() => {
|
|
94
|
+
resolvedInput.value = deactivated.value ? {} : resolveUnrefHeadInput(input);
|
|
95
|
+
});
|
|
96
|
+
const entry = head.push(resolvedInput.value, options);
|
|
97
|
+
watch(resolvedInput, (e) => {
|
|
98
|
+
entry.patch(e);
|
|
99
|
+
});
|
|
100
|
+
const vm = getCurrentInstance();
|
|
101
|
+
if (vm) {
|
|
102
|
+
onBeforeUnmount(() => {
|
|
103
|
+
entry.dispose();
|
|
104
|
+
});
|
|
105
|
+
onDeactivated(() => {
|
|
106
|
+
deactivated.value = true;
|
|
107
|
+
});
|
|
108
|
+
onActivated(() => {
|
|
109
|
+
deactivated.value = false;
|
|
110
|
+
});
|
|
111
|
+
}
|
|
112
|
+
return entry;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
function serverUseHead(input, options = {}) {
|
|
116
|
+
const head = injectHead();
|
|
117
|
+
return head.push(input, options);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
function useHead(input, options = {}) {
|
|
121
|
+
const head = injectHead();
|
|
122
|
+
if (head) {
|
|
123
|
+
const isBrowser = IsBrowser || !!head.resolvedOptions?.document;
|
|
124
|
+
if (options.mode === "server" && isBrowser || options.mode === "client" && !isBrowser)
|
|
125
|
+
return;
|
|
126
|
+
return isBrowser ? clientUseHead(input, options) : serverUseHead(input, options);
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
export { VueReactiveUseHeadPlugin as V, createHead as a, createServerHead as c, headSymbol as h, injectHead as i, resolveUnrefHeadInput as r, useHead as u };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@unhead/vue",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "1.1.
|
|
4
|
+
"version": "1.1.11",
|
|
5
5
|
"packageManager": "pnpm@7.27.1",
|
|
6
6
|
"author": "Harlan Wilton <harlan@harlanzw.com>",
|
|
7
7
|
"license": "MIT",
|
|
@@ -21,6 +21,11 @@
|
|
|
21
21
|
"types": "./dist/index.d.ts",
|
|
22
22
|
"require": "./dist/index.cjs",
|
|
23
23
|
"import": "./dist/index.mjs"
|
|
24
|
+
},
|
|
25
|
+
"./polyfill": {
|
|
26
|
+
"types": "./dist/polyfill.d.ts",
|
|
27
|
+
"require": "./dist/polyfill.cjs",
|
|
28
|
+
"import": "./dist/polyfill.mjs"
|
|
24
29
|
}
|
|
25
30
|
},
|
|
26
31
|
"main": "dist/index.cjs",
|
|
@@ -34,9 +39,9 @@
|
|
|
34
39
|
},
|
|
35
40
|
"dependencies": {
|
|
36
41
|
"hookable": "^5.4.2",
|
|
37
|
-
"@unhead/schema": "1.1.
|
|
38
|
-
"@unhead/shared": "1.1.
|
|
39
|
-
"unhead": "1.1.
|
|
42
|
+
"@unhead/schema": "1.1.11",
|
|
43
|
+
"@unhead/shared": "1.1.11",
|
|
44
|
+
"unhead": "1.1.11"
|
|
40
45
|
},
|
|
41
46
|
"devDependencies": {
|
|
42
47
|
"vue": "^3.2.47"
|