@dxup/nuxt 0.5.1 → 0.5.2

package/README.md

@@ -89,8 +89,6 @@ 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/languages/named-layout-slots.cjs

@@ -20,8 +20,14 @@ const plugin = ({ modules: { typescript: ts, "@vue/compiler-dom": CompilerDOM },
 		if (sfc.scriptSetup) visit(sfc.scriptSetup.ast);
 		function visit(node) {
 			if (ts.isCallExpression(node) && ts.isIdentifier(node.expression) && node.expression.text === "definePageMeta" && node.arguments.length && ts.isObjectLiteralExpression(node.arguments[0])) {
-				for (const prop of node.arguments[0].properties) if (ts.isPropertyAssignment(prop) && ts.isIdentifier(prop.name) && prop.name.text === "layout" && ts.isStringLiteral(prop.initializer)) {
-					layoutName = prop.initializer.text;
+				for (const prop of node.arguments[0].properties) if (ts.isPropertyAssignment(prop) && ts.isIdentifier(prop.name) && prop.name.text === "layout") {
+					if (ts.isStringLiteralLike(prop.initializer)) layoutName = prop.initializer.text;
+					else if (ts.isObjectLiteralExpression(prop.initializer)) {
+						for (const sub of prop.initializer.properties) if (ts.isPropertyAssignment(sub) && ts.isIdentifier(sub.name) && sub.name.text === "name" && ts.isStringLiteralLike(sub.initializer)) {
+							layoutName = sub.initializer.text;
+							break;
+						}
+					}
 					break;
 				}
 			} else ts.forEachChild(node, visit);

package/dist/module.mjs

@@ -8,7 +8,6 @@ import { genExport, genImport, genInlineTypeImport, genObjectKey } from "knitwor
 import { ElementTypes, NodeTypes, parse } from "@vue/compiler-dom";
 import MagicString from "magic-string";
 import { createUnplugin } from "unplugin";
-import { parseAndWalk } from "oxc-walker";
 //#region package.json
 var name = "@dxup/nuxt";
 //#endregion
@@ -94,72 +93,52 @@ function parseSFC(code) {
 		template
 	};
 }
+function* forEachElementNode(node) {
+	if (node.type === NodeTypes.ROOT || node.type === NodeTypes.FOR || node.type === NodeTypes.IF_BRANCH) for (const child of node.children) yield* forEachElementNode(child);
+	else if (node.type === NodeTypes.ELEMENT) {
+		yield node;
+		for (const child of node.children) yield* forEachElementNode(child);
+	} else if (node.type === NodeTypes.IF) for (const branch of node.branches) yield* forEachElementNode(branch);
+}
 //#endregion
-//#region src/module/named-layout-slots/plugins/transform-layout.ts
-const TransformLayoutPlugin = (options) => createUnplugin(() => ({
+//#region src/module/named-layout-slots/transform.ts
+const TransformPlugins = (options) => createUnplugin(() => [{
 	name: name + ":transform-layout",
 	enforce: "pre",
 	transformInclude: isVue,
-	transform: {
-		filter: { code: /<(?:nuxt-layout|NuxtLayout)/ },
-		handler(code) {
-			const { scriptSetup, template } = parseSFC(code);
-			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", ["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">
-    <LayoutSlot :name :props/>
-</template>`);
-			return {
-				code: s.toString(),
-				map: options.sourcemap ? s.generateMap({ hires: true }) : void 0
-			};
-		}
+	transform(code, id) {
+		if (!options.layoutDirs.some((dir) => isInDir(id, dir))) return;
+		const { scriptSetup, template } = parseSFC(code);
+		if (!template) return;
+		const slots = [];
+		for (const node of forEachElementNode(template)) if (node.tagType === ElementTypes.SLOT && node.props.length && node.props.every((prop) => prop.name !== "name" || prop.type !== NodeTypes.ATTRIBUTE || prop.value && prop.value.content !== "default")) slots.push(node);
+		if (!slots.length) return;
+		const s = new MagicString(code);
+		const imports = genImport("#build/dxup/layouts.mjs", ["LayoutSlot"]);
+		if (scriptSetup) {
+			const start = scriptSetup.innerLoc.start.offset;
+			s.appendLeft(start, `\n${imports}\n`);
+		} else s.prepend(`<script setup>\n${imports}\n<\/script>\n\n`);
+		for (const slot of slots) for (const offset of /* @__PURE__ */ new Set([slot.loc.start.offset + slot.loc.source.indexOf("slot"), slot.loc.start.offset + slot.loc.source.lastIndexOf("slot")])) s.overwrite(offset, offset + 4, "LayoutSlot");
+		return {
+			code: s.toString(),
+			map: options.sourcemap ? s.generateMap({ hires: true }) : void 0
+		};
 	}
-}));
-//#endregion
-//#region src/module/named-layout-slots/plugins/transform-page.ts
-const TransformPagePlugin = (options) => createUnplugin(() => ({
+}, {
 	name: name + ":transform-page",
 	enforce: "pre",
 	transformInclude: isVue,
 	transform(code, id) {
-		if (!options.dirs.some((dir) => isInDir(id, dir))) return;
+		if (!options.pageDirs.some((dir) => isInDir(id, dir))) return;
 		const { scriptSetup, template } = parseSFC(code);
 		if (!template) return;
-		const slots = [];
-		for (const node of template.children) {
-			if (node.type !== NodeTypes.ELEMENT || node.tagType !== ElementTypes.TEMPLATE) continue;
-			const dir = node.props.find((prop) => prop.type === NodeTypes.DIRECTIVE && prop.name === "slot");
-			if (dir?.arg?.type === NodeTypes.SIMPLE_EXPRESSION && dir.arg.isStatic && dir.arg.content !== "" && dir.arg.content !== "default") slots.push(dir.arg.content);
-		}
-		if (!slots.length) return;
 		const s = new MagicString(code);
 		const imports = genImport("#build/dxup/layouts.mjs", ["LayoutSlotsForward"]);
-		const expression = `layoutSlots: [${slots.map((slot) => JSON.stringify(slot)).join(", ")}],\n`;
 		if (scriptSetup) {
-			let meta;
-			parseAndWalk(scriptSetup.innerLoc.source, id, {
-				parseOptions: { lang: scriptSetup.props.find((prop) => prop.type === NodeTypes.ATTRIBUTE && prop.name === "lang")?.value?.content ?? "ts" },
-				enter(node) {
-					if (node.type === "CallExpression" && node.callee.type === "Identifier" && node.callee.name === "definePageMeta" && node.arguments[0]?.type === "ObjectExpression") {
-						meta = node.arguments[0];
-						this.skip();
-					}
-				}
-			});
 			const start = scriptSetup.innerLoc.start.offset;
 			s.appendLeft(start, `\n${imports}\n`);
-			if (meta) s.appendLeft(meta.properties[0].start + start, expression);
-			else s.appendLeft(scriptSetup.innerLoc.start.offset, `\ndefinePageMeta({\n${expression}});\n`);
-		} else s.prepend(`<script setup>\n${imports}\ndefinePageMeta({\n${expression}});\n<\/script>\n\n`);
+		} else s.prepend(`<script setup>\n${imports}\n<\/script>\n\n`);
 		s.appendLeft(template.innerLoc.start.offset, `<LayoutSlotsForward>`);
 		s.appendLeft(template.innerLoc.end.offset, "</LayoutSlotsForward>");
 		return {
@@ -167,37 +146,54 @@ const TransformPagePlugin = (options) => createUnplugin(() => ({
 			map: options.sourcemap ? s.generateMap({ hires: true }) : void 0
 		};
 	}
-}));
+}]);
 //#endregion
 //#region src/module/named-layout-slots/module.ts
-function setup(nuxt, pluginsVue) {
+async function setup(nuxt, pluginsVue) {
 	const resolver = createResolver(import.meta.url);
+	const layoutDirs = nuxt.options._layers.map((layer) => join(layer.config.srcDir, layer.config.dir?.layouts ?? "layouts"));
 	const pageDirs = nuxt.options._layers.map((layer) => join(layer.config.srcDir, layer.config.dir?.pages ?? "pages"));
 	pluginsVue.push({
 		name: "@dxup/nuxt/languages/named-layout-slots.cjs",
 		options: { dirs: pageDirs }
 	});
+	nuxt.hook("components:extend", (components) => {
+		for (const comp of components) if (comp.pascalName === "NuxtLayout") {
+			comp.declarationPath = comp.filePath;
+			comp.filePath = join(nuxt.options.buildDir, "dxup/layouts.mjs");
+			break;
+		}
+	});
+	const layoutPath = join(await resolver.resolvePath("nuxt", { cwd: nuxt.options.rootDir }), "../app/components/nuxt-layout.js");
 	addTemplate({
 		filename: "dxup/layouts.mjs",
 		getContents() {
-			return genExport(resolver.resolve("runtime/layouts.mjs"), "*");
+			return [
+				genExport(resolver.resolve("runtime/layouts.mjs"), "*"),
+				genExport(resolver.resolve("runtime/layouts.mjs"), ["default"]),
+				genExport(layoutPath, [{
+					name: "default",
+					as: "NuxtLayout"
+				}])
+			].join("\n");
 		}
 	});
 	addTypeTemplate({
 		filename: "dxup/layouts.d.ts",
 		getContents({ app }) {
+			const currentDir = join(nuxt.options.buildDir, "dxup");
 			return `
 export interface Layouts {
-${Object.values(app.layouts).map((layout) => `    ${genObjectKey(layout.name)}: ${genInlineTypeImport(layout.file)};`).join("\n")}
+${Object.values(app.layouts).map((layout) => `  ${genObjectKey(layout.name)}: ${genInlineTypeImport(relative(currentDir, layout.file))};`).join("\n")}
 }
 `.trimStart();
 		}
 	});
-	addBuildPlugin(TransformPagePlugin({
-		dirs: pageDirs,
+	addBuildPlugin(TransformPlugins({
+		layoutDirs,
+		pageDirs,
 		sourcemap: !!nuxt.options.sourcemap.client
 	}));
-	addBuildPlugin(TransformLayoutPlugin({ sourcemap: !!nuxt.options.sourcemap.client }));
 }
 //#endregion
 //#region src/module/index.ts
@@ -220,7 +216,7 @@ var module_default = defineNuxtModule().with({
 	async setup(options, nuxt) {
 		const pluginsTs = [{ name: "@dxup/nuxt" }];
 		const pluginsVue = [];
-		if (options.features.namedLayoutSlots) setup(nuxt, pluginsVue);
+		if (options.features.namedLayoutSlots) await setup(nuxt, pluginsVue);
 		if (options.features.unimport) pluginsTs.unshift({ name: "@dxup/unimport" });
 		append(pluginsTs, nuxt.options, "typescript", "tsConfig", "compilerOptions");
 		append(pluginsTs, nuxt.options.nitro, "typescript", "tsConfig", "compilerOptions");

package/dist/runtime/layouts.d.mts

@@ -1,21 +1,10 @@
-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 _default: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
 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<{
@@ -23,13 +12,7 @@ declare const LayoutSlot: import("vue").DefineComponent<import("vue").ExtractPro
     type: StringConstructor;
     required: true;
   };
-  props: {
-    type: ObjectConstructor;
-    default: () => {};
-  };
-}>> & Readonly<{}>, {
-  props: Record<string, any>;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>> & Readonly<{}>, {}, {}, {}, {}, 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 };
+export { LayoutSlot, LayoutSlotsForward, _default as default };

package/dist/runtime/layouts.mjs

@@ -1,53 +1,38 @@
-import { defineComponent, inject, provide, shallowRef } from "vue";
+import { defineComponent, h, inject, provide, shallowRef } from "vue";
+import { NuxtLayout } from "#build/dxup/layouts.mjs";
 //#region src/module/named-layout-slots/runtime/layouts.ts
 const injectionKey = Symbol();
-function provideLayoutSlots() {
+var layouts_default = defineComponent((props, ctx) => {
 	const slots = shallowRef({});
-	const waiters = /* @__PURE__ */ new Map();
-	const registry = {
+	let resolveReady;
+	provide(injectionKey, {
 		slots,
+		ready: new Promise((resolve) => {
+			resolveReady = resolve;
+		}),
 		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);
-			});
+			resolveReady?.();
 		}
-	};
-	provide(injectionKey, registry);
-	return registry;
-}
+	});
+	return () => h(NuxtLayout, props, ctx.slots);
+});
 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);
+	props: { name: {
+		type: String,
+		required: true
+	} },
+	setup(props, ctx) {
+		const { slots, ready } = inject(injectionKey);
+		const render = () => slots.value[props.name]?.(ctx.attrs);
+		if (import.meta.server && !slots.value[props.name]) return ready.then(() => render);
 		return render;
 	}
 });
 const LayoutSlotsForward = defineComponent((props, ctx) => {
-	inject(injectionKey).set(ctx.slots);
+	const { set } = inject(injectionKey);
+	set(ctx.slots);
 	return () => ctx.slots.default?.();
 });
 //#endregion
-export { LayoutSlot, LayoutSlotsForward, provideLayoutSlots };
+export { LayoutSlot, LayoutSlotsForward, layouts_default as default };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dxup/nuxt",
   "type": "module",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "TypeScript plugin for Nuxt",
   "author": "KazariEX",
   "license": "MIT",
@@ -25,7 +25,6 @@
     "chokidar": "^5.0.0",
     "knitwork": "^1.3.0",
     "magic-string": "^0.30.21",
-    "oxc-walker": "^1.0.0",
     "pathe": "^2.0.3",
     "tinyglobby": "^0.2.17",
     "unplugin": "^3.0.0",