@dxup/nuxt 0.5.0 → 0.5.2

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", ["provideLayoutSlots"]);
-			const suffix = `\nconst __dxup_layoutSlots = provideLayoutSlots();\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)"/>
-</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,56 +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 `
-${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"), "*"),
+				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
@@ -239,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

@@ -0,0 +1,18 @@
+//#region src/module/named-layout-slots/runtime/layouts.d.ts
+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;
+  };
+}>, () => 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;
+  };
+}>> & 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, _default as default };

package/dist/runtime/layouts.mjs

@@ -0,0 +1,38 @@
+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();
+var layouts_default = defineComponent((props, ctx) => {
+	const slots = shallowRef({});
+	let resolveReady;
+	provide(injectionKey, {
+		slots,
+		ready: new Promise((resolve) => {
+			resolveReady = resolve;
+		}),
+		set(value) {
+			slots.value = value;
+			resolveReady?.();
+		}
+	});
+	return () => h(NuxtLayout, props, ctx.slots);
+});
+const LayoutSlot = defineComponent({
+	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) => {
+	const { set } = inject(injectionKey);
+	set(ctx.slots);
+	return () => ctx.slots.default?.();
+});
+//#endregion
+export { LayoutSlot, LayoutSlotsForward, layouts_default as default };

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.2",
   "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"
   },
@@ -26,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",

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 };