@dxup/nuxt 0.5.0 → 0.5.1

package/README.md

@@ -89,6 +89,8 @@ Write top-level named slots in your pages:
 
 And them will be forwarded to the active layout automatically.
 
+Due to design limitations, dynamic slots are currently not supported.
+
 ### 4. nitroRoutes
 
 Go to definition for nitro routes in data fetching methods.

package/dist/module.mjs

@@ -107,15 +107,15 @@ const TransformLayoutPlugin = (options) => createUnplugin(() => ({
 			const layout = template?.children.find((node) => node.type === NodeTypes.ELEMENT && (node.tag === "nuxt-layout" || node.tag === "NuxtLayout"));
 			if (!layout?.children.length) return;
 			const s = new MagicString(code);
-			const prefix = "\n" + genImport("#build/dxup/layouts.mjs", ["provideLayoutSlots"]);
-			const suffix = `\nconst __dxup_layoutSlots = provideLayoutSlots();\n`;
+			const prefix = "\n" + genImport("#build/dxup/layouts.mjs", ["LayoutSlot", "provideLayoutSlots"]);
+			const suffix = `\nprovideLayoutSlots();\n`;
 			if (scriptSetup) {
 				s.appendLeft(scriptSetup.innerLoc.start.offset, prefix);
 				s.appendLeft(scriptSetup.innerLoc.end.offset, suffix);
 			} else s.prepend(`<script setup>${prefix + suffix}<\/script>\n\n`);
 			s.appendLeft(layout.children.at(-1).loc.end.offset, `
 <template v-for="name in $route.meta.layoutSlots ?? []" :key="name" #[name]="props">
-    <component :is="() => __dxup_layoutSlots[name]?.(props)"/>
+    <LayoutSlot :name :props/>
 </template>`);
 			return {
 				code: s.toString(),
@@ -180,26 +180,7 @@ function setup(nuxt, pluginsVue) {
 	addTemplate({
 		filename: "dxup/layouts.mjs",
 		getContents() {
-			return `
-${genImport("vue", [
-				"inject",
-				"provide",
-				"shallowRef"
-			])}
-${genExport(resolver.resolve("components/forward"), [{
-				name: "default",
-				as: "LayoutSlotsForward"
-			}])}
-const injectionKey = Symbol();
-export function provideLayoutSlots() {
-  const slots = shallowRef({});
-  provide(injectionKey, slots);
-  return slots;
-}
-export function injectLayoutSlots() {
-  return inject(injectionKey);
-}
-`.trimStart();
+			return genExport(resolver.resolve("runtime/layouts.mjs"), "*");
 		}
 	});
 	addTypeTemplate({

package/dist/runtime/layouts.d.mts

@@ -0,0 +1,35 @@
+import { ShallowRef, Slots } from "vue";
+
+//#region src/module/named-layout-slots/runtime/layouts.d.ts
+interface LayoutSlotsRegistry {
+  slots: ShallowRef<Slots>;
+  set: (slots: Slots) => void;
+  waitFor: (name: string) => Promise<void>;
+}
+declare function provideLayoutSlots(): LayoutSlotsRegistry;
+declare const LayoutSlot: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  name: {
+    type: StringConstructor;
+    required: true;
+  };
+  props: {
+    type: ObjectConstructor;
+    default: () => {};
+  };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>[] | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  name: {
+    type: StringConstructor;
+    required: true;
+  };
+  props: {
+    type: ObjectConstructor;
+    default: () => {};
+  };
+}>> & Readonly<{}>, {
+  props: Record<string, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const LayoutSlotsForward: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
+//#endregion
+export { LayoutSlot, LayoutSlotsForward, provideLayoutSlots };

package/dist/runtime/layouts.mjs

@@ -0,0 +1,53 @@
+import { defineComponent, inject, provide, shallowRef } from "vue";
+//#region src/module/named-layout-slots/runtime/layouts.ts
+const injectionKey = Symbol();
+function provideLayoutSlots() {
+	const slots = shallowRef({});
+	const waiters = /* @__PURE__ */ new Map();
+	const registry = {
+		slots,
+		set(value) {
+			slots.value = value;
+			for (const name of Object.keys(value)) {
+				const resolves = waiters.get(name);
+				if (!resolves?.length) continue;
+				waiters.delete(name);
+				for (const resolve of resolves) resolve();
+			}
+		},
+		waitFor(name) {
+			if (slots.value[name]) return Promise.resolve();
+			return new Promise((resolve) => {
+				let resolves = waiters.get(name);
+				if (!resolves) waiters.set(name, resolves = []);
+				resolves.push(resolve);
+			});
+		}
+	};
+	provide(injectionKey, registry);
+	return registry;
+}
+const LayoutSlot = defineComponent({
+	props: {
+		name: {
+			type: String,
+			required: true
+		},
+		props: {
+			type: Object,
+			default: () => ({})
+		}
+	},
+	setup(props) {
+		const registry = inject(injectionKey);
+		const render = () => registry.slots.value[props.name]?.(props.props);
+		if (import.meta.server && !registry.slots.value[props.name]) return registry.waitFor(props.name).then(() => render);
+		return render;
+	}
+});
+const LayoutSlotsForward = defineComponent((props, ctx) => {
+	inject(injectionKey).set(ctx.slots);
+	return () => ctx.slots.default?.();
+});
+//#endregion
+export { LayoutSlot, LayoutSlotsForward, provideLayoutSlots };

package/dist/typescript.cjs

@@ -172,12 +172,12 @@ var getDefinitionAndBoundSpan_exports = /* @__PURE__ */ __exportAll({
 	postprocess: () => postprocess,
 	preprocess: () => preprocess$1
 });
-const fetchFunctions = new Set([
+const fetchFunctions = /* @__PURE__ */ new Set([
 	"$fetch",
 	"useFetch",
 	"useLazyFetch"
 ]);
-const pageMetaKeys = new Set(["layout", "middleware"]);
+const pageMetaKeys = /* @__PURE__ */ new Set(["layout", "middleware"]);
 function postprocess(context, language, getDefinitionAndBoundSpan) {
 	const { ts } = context;
 	return (...args) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dxup/nuxt",
   "type": "module",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "TypeScript plugin for Nuxt",
   "author": "KazariEX",
   "license": "MIT",
@@ -11,7 +11,6 @@
   },
   "exports": {
     ".": "./dist/module.mjs",
-    "./components/*": "./dist/components/*",
     "./languages/*": "./dist/languages/*",
     "./package.json": "./package.json"
   },

package/dist/components/forward.d.mts

@@ -1,4 +0,0 @@
-//#region src/module/named-layout-slots/components/forward.d.ts
-declare const _default: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
-//#endregion
-export { _default as default };

package/dist/components/forward.mjs

@@ -1,10 +0,0 @@
-import { defineComponent } from "vue";
-import { injectLayoutSlots } from "#build/dxup/layouts.mjs";
-//#region src/module/named-layout-slots/components/forward.ts
-var forward_default = defineComponent((props, ctx) => {
-	const slots = injectLayoutSlots();
-	slots.value = ctx.slots;
-	return () => ctx.slots.default?.();
-});
-//#endregion
-export { forward_default as default };