@poveste/plugin-vue 0.13.1 → 0.15.0

package/README.md

@@ -40,5 +40,5 @@ import MyButton from './MyButton.vue'
 Coming from histoire? The Vue API is unchanged: swap the dependency and your existing
 `.story.vue` files keep working.
 
-[Vue guide](https://poveste.dev/guide/vue/getting-started.html) ·
+[Vue guide](https://poveste.dev/guide/vue/getting-started) ·
 [Documentation](https://poveste.dev)

package/dist/bundled/client/app/MountStory.js

@@ -22,15 +22,15 @@ var c = t({
 			targetVariantId: t.targetVariantId,
 			externalState: null,
 			nextVariantIndex: { value: 0 }
-		}), l;
+		}), l = null;
 		async function u() {
-			l = e({
+			n.value && (l = e({
 				name: "MountStorySubApp",
 				el: n.value,
 				getStory: () => t.story,
 				getVariant: () => null,
 				renderContext: c
-			}), await l.mount();
+			}), await l.mount());
 		}
 		function d() {
 			l?.unmount(), l = null;

package/dist/bundled/client/app/RenderStory.js

@@ -21,7 +21,7 @@ var l = n({
 	},
 	emits: { ready: () => !0 },
 	setup(n, { emit: r }) {
-		let l = o(), u, d = !1, f = c({}), p = e(n.variant.state, f), m = c({
+		let l = o(), u = null, d = !1, f = c({}), p = e(n.variant.state, f), m = c({
 			mode: "render",
 			slotName: n.slotName,
 			currentVariant: n.variant,
@@ -35,14 +35,20 @@ var l = n({
 			p?.stop(), p = e(n.variant.state, f);
 		}
 		async function _() {
-			d || (d = !0, h(), m.currentVariant = n.variant, m.slotName = n.slotName, u = t({
-				name: "RenderStorySubApp",
-				el: l.value,
-				getStory: () => n.story,
-				getVariant: () => n.variant,
-				renderContext: m,
-				wrapInDiv: !0
-			}), await u.mount(), d = !1, r("ready"));
+			if (!d) {
+				if (d = !0, h(), m.currentVariant = n.variant, m.slotName = n.slotName, !l.value) {
+					d = !1;
+					return;
+				}
+				u = t({
+					name: "RenderStorySubApp",
+					el: l.value,
+					getStory: () => n.story,
+					getVariant: () => n.variant,
+					renderContext: m,
+					wrapInDiv: !0
+				}), await u.mount(), d = !1, r("ready");
+			}
 		}
 		return a(async () => {
 			n.variant.configReady && await _();

package/dist/bundled/client/app/Story.js

@@ -1,9 +1,10 @@
 import { useRenderContext as e } from "./render-context.js";
-import t from "./Variant.js";
-import { cloneVNode as n, computed as r, defineComponent as i, getCurrentInstance as a, h as o, isRef as s, provide as c, reactive as l, useAttrs as u } from "vue";
+import { useInstance as t } from "./util.js";
+import n from "./Variant.js";
+import { cloneVNode as r, computed as i, defineComponent as a, h as o, isRef as s, provide as c, reactive as l, useAttrs as u } from "vue";
 import { omitInheritStoryProps as d } from "@poveste/shared";
 //#region src/client/app/Story.ts
-var f = i({
+var f = a({
 	name: "Story",
 	__povesteType: "story",
 	inheritAttrs: !1,
@@ -17,10 +18,10 @@ var f = i({
 			default: void 0
 		}
 	},
-	setup(t) {
-		let i = a(), o = u(), f = e(), p = r(() => o.story);
+	setup(n) {
+		let a = t("Story"), o = u(), f = e(), p = i(() => o.story);
 		c("story", p);
-		let m = i.parent, h = l({});
+		let m = a.parent, h = l({});
 		Object.defineProperty(h, "$data", {
 			enumerable: !0,
 			configurable: !0,
@@ -49,67 +50,79 @@ var f = i({
 		for (let e in m.data) g(m.data, e);
 		c("implicitState", () => h);
 		function _() {
-			t.meta && (o.story.meta || (o.story.meta = {}), Object.assign(o.story.meta, t.meta)), Object.assign(o.story, { slots: () => i.proxy.$slots });
+			n.meta && (o.story.meta || (o.story.meta = {}), Object.assign(o.story.meta, n.meta)), Object.assign(o.story, { slots: () => a.slots });
 		}
 		return {
 			renderContext: f,
 			story: p,
-			renderMountStory: v,
-			renderPreviewStory: y,
+			renderMountStory: y,
+			renderPreviewStory: x,
 			updateStory: _
 		};
-		function v() {
-			let e = 0, r = f?.targetVariantId ? o.story.variants.findIndex((e) => e.id === f.targetVariantId) : -1, a = (s) => {
-				let c = [];
-				for (let l of s) {
-					if (l.type?.__povesteType === "variant") {
-						let a = o.story.variants[e];
-						if (e++, !a || r !== -1 && e - 1 !== r) continue;
-						let s = { variant: a };
-						l.key ?? (s.key = a.id), !l.props?.initState && !l.props?.["init-state"] && (s.initState = t.initState);
-						for (let e in i.proxy.$attrs) l.props?.[e] === void 0 && (s[e] = i.proxy.$attrs[e]);
-						for (let e in o.story) !d.includes(e) && l.props?.[e] === void 0 && (s[e] = o.story[e]);
-						c.push(n(l, s));
+		function v(e) {
+			let t = {};
+			for (let n in a.attrs) e.props?.[n] === void 0 && (t[n] = a.attrs[n]);
+			for (let n in o.story) !d.includes(n) && e.props?.[n] === void 0 && (t[n] = Reflect.get(o.story, n));
+			return t;
+		}
+		function y() {
+			let e = 0, t = f?.targetVariantId, i = t ? o.story.variants.findIndex((e) => e.id === t) : -1, s = (t) => {
+				let a = [];
+				for (let c of t) {
+					if (c.type?.__povesteType === "variant") {
+						let t = o.story.variants[e];
+						if (e++, !t || i !== -1 && e - 1 !== i) continue;
+						let s = { variant: t };
+						c.key ?? (s.key = t.id), !c.props?.initState && !c.props?.["init-state"] && (s.initState = n.initState), Object.assign(s, v(c)), a.push(r(c, s));
 						continue;
 					}
-					Array.isArray(l.children) && (l.children = a(l.children)), c.push(l);
+					Array.isArray(c.children) && (c.children = s(c.children)), a.push(c);
 				}
-				return c;
+				return a;
 			};
-			return a(i.proxy.$slots.default?.() ?? []);
+			return s(a.slots.default?.() ?? []);
 		}
-		function y() {
-			f.nextVariantIndex.value = 0;
-			let e = { state: f.externalState }, t = [];
-			if (f.slotName === "controls" && t.push(...i.proxy.$slots.controls?.(e) ?? []), (f.slotName === "default" || o.story.meta?.hasVariantChildComponents) && t.push(...i.proxy.$slots.default?.(e) ?? []), f.slotName === "default" && f.currentVariant && !o.story.meta?.hasVariantChildComponents) {
-				let e = o.story.variants.findIndex((e) => e.id === f.currentVariant.id);
-				if (e !== -1) {
-					let n = 0, r = !1, i = (t) => {
-						let a = [];
-						for (let o of t) {
-							if (o?.type?.__povesteType === "variant") {
-								n === e && (a.push(o), r = !0), n++;
+		function b(e) {
+			let t = 0;
+			for (let n of e) n?.type?.__povesteType === "variant" ? t++ : Array.isArray(n?.children) && (t += b(n.children));
+			return t;
+		}
+		function x(e) {
+			e.nextVariantIndex.value = 0;
+			let t = { state: e.externalState }, n = [];
+			e.slotName === "controls" && n.push(...a.slots.controls?.(t) ?? []), (e.slotName === "default" || o.story.meta?.hasVariantChildComponents) && n.push(...a.slots.default?.(t) ?? []);
+			let i = e.currentVariant;
+			if (e.slotName === "default" && i && b(n) === o.story.variants.length) {
+				let t = o.story.variants.findIndex((e) => e.id === i.id);
+				if (t !== -1) {
+					let i = 0, a = !1, o = (e) => {
+						let n = [];
+						for (let s of e) {
+							if (s?.type?.__povesteType === "variant") {
+								i === t && (n.push(r(s, v(s))), a = !0), i++;
 								continue;
 							}
-							Array.isArray(o?.children) && o.children.length && (o.children = i(o.children)), a.push(o);
+							Array.isArray(s?.children) && s.children.length && (s.children = o(s.children)), n.push(s);
 						}
-						return a;
-					}, a = i(t);
-					if (r) return f.nextVariantIndex.value = e, a;
+						return n;
+					}, s = o(n);
+					if (a) return e.nextVariantIndex.value = t, s;
 				}
 			}
-			return t;
+			return n;
 		}
 	},
 	render() {
 		this.updateStory();
 		let [e] = this.story.variants;
-		return e?.id === "_default" ? o(t, {
+		if (e?.id === "_default") return o(n, {
 			variant: e,
-			initState: this.initState,
+			...this.initState ? { initState: this.initState } : {},
 			implicit: !0,
 			...this.$attrs
-		}, this.$slots) : this.renderContext?.mode === "render" ? this.renderPreviewStory() : this.renderMountStory();
+		}, this.$slots);
+		let t = this.renderContext;
+		return t?.mode === "render" ? this.renderPreviewStory(t) : this.renderMountStory();
 	}
 });
 //#endregion

package/dist/bundled/client/app/Variant.js

@@ -1,10 +1,10 @@
 import { useRenderContext as e } from "./render-context.js";
-import { syncVariantAutoProps as t } from "./auto-props.js";
-import { syncStateBundledAndExternal as n, toRawDeep as r } from "./util.js";
-import { computed as i, defineComponent as a, getCurrentInstance as o, inject as s, onBeforeUnmount as c, useAttrs as l } from "vue";
+import { syncStateBundledAndExternal as t, toRawDeep as n, useInstance as r } from "./util.js";
+import { syncVariantAutoProps as i } from "./auto-props.js";
+import { computed as a, defineComponent as o, inject as s, onBeforeUnmount as c, useAttrs as l } from "vue";
 import { applyState as u, autoPropsStateKeys as d } from "@poveste/shared";
 //#region src/client/app/Variant.ts
-var f = a({
+var f = o({
 	name: "Variant",
 	__povesteType: "variant",
 	props: {
@@ -37,41 +37,43 @@ var f = a({
 			default: !1
 		}
 	},
-	async setup(a) {
-		let f = l(), p = o(), m = s("story"), h = s("implicitState"), g = e(), _, v, y, b;
+	async setup(o) {
+		let f = l(), p = r("Variant"), m = s("story"), h = s("implicitState"), g = e(), _, v, y = null, b;
 		c(() => {
 			y?.stop(), b?.stop();
 		});
-		let x = i(() => f.variant);
-		if (g?.mode !== "render" && typeof a.initState == "function" && x.value) {
-			let e = await a.initState();
-			u(x.value.state, r(e));
+		let x = a(() => f.variant);
+		if (g?.mode !== "render" && typeof o.initState == "function" && x.value) {
+			let e = await o.initState();
+			u(x.value.state, n(e));
 		}
-		g?.mode !== "render" && x.value && h && (b = n(x.value.state, h(), d));
+		g?.mode !== "render" && x.value && h && (b = t(x.value.state, h(), d));
 		function S(e) {
 			Object.assign(e, {
-				slots: () => p.proxy.$slots,
-				source: a.source,
-				responsiveDisabled: a.responsiveDisabled,
-				autoPropsDisabled: a.autoPropsDisabled,
-				setupApp: a.setupApp,
-				meta: a.meta,
+				slots: () => p.slots,
+				source: o.source,
+				responsiveDisabled: o.responsiveDisabled,
+				autoPropsDisabled: o.autoPropsDisabled,
+				setupApp: o.setupApp,
+				meta: o.meta,
 				configReady: !0
-			}), !a.implicit && !m.value?.meta?.hasVariantChildComponents && (m.value.meta || (m.value.meta = {}), Object.assign(m.value.meta, { hasVariantChildComponents: !0 }));
+			});
+			let t = m?.value;
+			t && !o.implicit && !t.meta?.hasVariantChildComponents && (t.meta ||= {}, Object.assign(t.meta, { hasVariantChildComponents: !0 }));
 		}
 		function C() {
-			return f.variant ? f.variant : g?.mode === "render" ? (v || (v = m.value?.variants[g.nextVariantIndex.value], g.nextVariantIndex.value++), v) : null;
+			return f.variant ? f.variant : g?.mode === "render" ? (v || (v = m?.value?.variants[g.nextVariantIndex.value], g.nextVariantIndex.value++), v) : null;
 		}
-		function w(e) {
-			if (g.slotName === "controls") return p.proxy.$slots.controls?.({ state: g.externalState }) ?? null;
-			if (g.slotName !== "default") return null;
-			let n = p.proxy.$slots.default?.({ state: g.externalState }) ?? null;
-			return n && !e.autoPropsDisabled && (_ = t(e, n, g.externalState, _)), n;
+		function w(e, t) {
+			if (t.slotName === "controls") return p.slots.controls?.({ state: t.externalState }) ?? null;
+			if (t.slotName !== "default") return null;
+			let n = p.slots.default?.({ state: t.externalState }) ?? null;
+			return n && !e.autoPropsDisabled && (_ = i(e, n, t.externalState, _)), n;
 		}
 		function T(e) {
 			if (!h) return;
-			let t = g?.mode === "render" && g.currentVariant?.id === e.id;
-			t && !y ? y = n(e.state, h(), d) : !t && y && (y.stop(), y = null);
+			let n = g?.mode === "render" && g.currentVariant?.id === e.id;
+			n && !y ? y = t(e.state, h(), d) : !n && y && (y.stop(), y = null);
 		}
 		return x.value && S(x.value), {
 			renderContext: g,
@@ -83,7 +85,10 @@ var f = a({
 	},
 	render() {
 		let e = this.resolveVariant();
-		return !e || (this.updateVariant(e), this.syncRenderVariantState(e), this.renderContext?.mode !== "render") || this.renderContext.currentVariant?.id !== e.id ? null : this.renderVariantSlot(e);
+		if (!e) return null;
+		this.updateVariant(e), this.syncRenderVariantState(e);
+		let t = this.renderContext;
+		return t?.mode !== "render" || t.currentVariant?.id !== e.id ? null : this.renderVariantSlot(e, t);
 	}
 });
 //#endregion

package/dist/bundled/client/app/global-components.js

@@ -6,13 +6,14 @@ import { components as f } from "@poveste/controls";
 //#region src/client/app/global-components.ts
 function p(n) {
 	n.component("Story", t), n.component("Variant", e);
-	for (let e in f) n.component(e, m(f[e]));
+	for (let [e, t] of Object.entries(f)) n.component(e, m(t));
 }
 function m(e) {
+	let t = e;
 	return a({
-		name: e.name,
+		...e.name ? { name: e.name } : {},
 		inheritAttrs: !1,
-		setup(t, { attrs: a }) {
+		setup(e, { attrs: a }) {
 			let o = d(), f = d(), p = i({});
 			function m(e) {
 				Object.assign(p, e);
@@ -23,11 +24,11 @@ function m(e) {
 			let h = [], g = d([]);
 			function _() {
 				g.value.forEach((e, t) => {
-					let n = f.value.querySelector(`[renderslotid="${t}"]`);
-					if (!n) return;
-					let r = o.value.querySelector(`[slotid="${t}"]`);
-					for (; r.firstChild;) r.removeChild(r.lastChild);
-					r.appendChild(n);
+					let n = f.value?.querySelector(`[renderslotid="${t}"]`), r = o.value?.querySelector(`[slotid="${t}"]`);
+					if (!(!n || !r)) {
+						for (; r.lastChild;) r.removeChild(r.lastChild);
+						r.appendChild(n);
+					}
 				});
 			}
 			let v;
@@ -40,7 +41,7 @@ function m(e) {
 						g.value = h, h = [];
 					},
 					render() {
-						return r(e, {
+						return r(t, {
 							...p,
 							key: "component"
 						}, { default: (e) => (h.push(e), r("div", { slotId: h.length - 1 })) });
@@ -57,7 +58,7 @@ function m(e) {
 			};
 		},
 		render() {
-			return [o("div", { ref: "el" }), o("div", { ref: "slotEl" }, this.slotCalls.map((e, t) => o("div", { renderSlotId: t }, this.$slots.default(e))))];
+			return [o("div", { ref: "el" }), o("div", { ref: "slotEl" }, this.slotCalls.map((e, t) => o("div", { renderSlotId: t }, this.$slots.default?.(e))))];
 		}
 	});
 }

package/dist/bundled/client/app/host.js

@@ -20,7 +20,7 @@ var f = o({
 		}
 	},
 	setup(e) {
-		return t(e.renderContext), () => s(e.story.file.component, { story: e.story });
+		return t(e.renderContext), () => e.story.file ? s(e.story.file.component, { story: e.story }) : null;
 	}
 });
 function p(e) {
@@ -51,7 +51,7 @@ function p(e) {
 		}, n(t), t.component("RouterLink", r), await m({
 			app: t,
 			story: e.getStory(),
-			variant: e.getVariant(),
+			variant: e.getVariant() ?? void 0,
 			addWrapper: (e) => {
 				c.unshift(e);
 			}

package/dist/bundled/client/app/util.js

@@ -1,71 +1,76 @@
 import { isRef as e, unref as t, watch as n } from "@poveste/vendors/vue";
-import { isRef as r, unref as i, watch as a } from "vue";
-import { applyState as o, createStateBaseline as s } from "@poveste/shared";
+import { getCurrentInstance as r, isRef as i, unref as a, watch as o } from "vue";
+import { applyState as s, createStateBaseline as c } from "@poveste/shared";
 //#region src/client/app/util.ts
-var c = (e) => typeof e == "object" && !!e;
-function l(e, t = /* @__PURE__ */ new WeakMap()) {
-	let n = r(e) ? i(e) : e;
+var l = (e) => typeof e == "object" && !!e;
+function u(e, t = /* @__PURE__ */ new WeakMap()) {
+	let n = i(e) ? a(e) : e;
 	if (typeof n == "symbol") return n.toString();
-	if (!c(n)) return n;
+	if (!l(n)) return n;
 	if (t.has(n)) return t.get(n);
 	if (Array.isArray(n)) {
 		let e = [];
-		return t.set(n, e), e.push(...n.map((e) => l(e, t))), e;
+		return t.set(n, e), e.push(...n.map((e) => u(e, t))), e;
 	}
 	{
 		let e = {};
-		return t.set(n, e), u(n, e, t), e;
+		return t.set(n, e), d(n, e, t), e;
 	}
 }
-function u(e, t, n = /* @__PURE__ */ new WeakMap()) {
+function d(e, t, n = /* @__PURE__ */ new WeakMap()) {
 	Object.keys(e).forEach((r) => {
-		t[r] = l(e[r], n);
+		t[r] = u(e[r], n);
 	});
 }
-function d(n, r = /* @__PURE__ */ new WeakMap()) {
+function f(n, r = /* @__PURE__ */ new WeakMap()) {
 	let i = e(n) ? t(n) : n;
 	if (typeof i == "symbol") return i.toString();
-	if (!c(i)) return i;
+	if (!l(i)) return i;
 	if (r.has(i)) return r.get(i);
 	if (Array.isArray(i)) {
 		let e = [];
-		return r.set(i, e), e.push(...i.map((e) => d(e, r))), e;
+		return r.set(i, e), e.push(...i.map((e) => f(e, r))), e;
 	}
 	{
 		let e = {};
-		return r.set(i, e), f(i, e, r), e;
+		return r.set(i, e), p(i, e, r), e;
 	}
 }
-function f(e, t, n = /* @__PURE__ */ new WeakMap()) {
+function p(e, t, n = /* @__PURE__ */ new WeakMap()) {
 	Object.keys(e).forEach((r) => {
-		t[r] = l(e[r], n);
+		t[r] = u(e[r], n);
 	});
 }
-function p(e, t) {
+function m(e, t) {
 	if (!t.length) return e;
 	let n = { ...e };
 	for (let e of t) delete n[e];
 	return n;
 }
-function m(e, t, r = []) {
-	let i = s(), c = n(() => e, (e) => {
+function h(e, t, r = []) {
+	let i = c(), a = n(() => e, (e) => {
 		if (e == null) return;
-		let n = i.take(p(d(e), r));
-		n && o(t, n);
+		let n = i.take(m(f(e), r));
+		n && s(t, n);
 	}, {
 		deep: !0,
 		immediate: !0
-	}), u = a(() => t, (t) => {
+	}), l = o(() => t, (t) => {
 		if (t == null) return;
-		let n = i.take(p(l(t), r));
-		n && o(e, n);
+		let n = i.take(m(u(t), r));
+		n && s(e, n);
 	}, {
 		deep: !0,
 		immediate: !0
 	});
 	return { stop() {
-		c(), u();
+		a(), l();
 	} };
 }
+function g(e) {
+	let t = r();
+	if (!t) throw Error(`[poveste] <${e}> can only be set up inside a component`);
+	return t;
+}
 //#endregion
-export { d as _toRawDeep, m as syncStateBundledAndExternal, l as toRawDeep };
+export { f as _toRawDeep, h as syncStateBundledAndExternal, u as toRawDeep, g as useInstance };

package/dist/bundled/client/client.js

@@ -1,5 +1,5 @@
-import { generateSourceCode as e, getTagName as t } from "./codegen.js";
-import n from "./app/MountStory.js";
-import r from "./app/RenderStory.js";
+import { delimitAttr as e, generateSourceCode as t, getTagName as n } from "./codegen.js";
+import r from "./app/MountStory.js";
+import i from "./app/RenderStory.js";
 import "./app/index.js";
-export { n as MountStory, r as RenderStory, e as generateSourceCode, t as getTagName };
+export { r as MountStory, i as RenderStory, e as delimitAttr, t as generateSourceCode, n as getTagName };