@dxup/nuxt 0.4.1 → 0.5.0

package/README.md

@@ -24,6 +24,12 @@ This is a TypeScript plugin that improves Nuxt DX.
      experimental: {
        typescriptPlugin: true,
      },
+     dxup: {
+       features: {
+         // Enable opt-in features
+         namedLayoutSlots: true,
+       },
+     },
    });
    ```
 
@@ -50,7 +56,40 @@ import.meta.glob("~/assets/*.webp");
 //               ^^^^^^^^^^^^^^^^^
 ```
 
-### 3. nitroRoutes
+### 3. namedLayoutSlots
+
+**Default:** `false`
+
+Write top-level named slots in your pages:
+
+```vue
+<!-- layouts/center.vue -->
+<template>
+  <slot></slot>
+  <slot name="side" one="one"></slot>
+</template>
+```
+
+```vue
+<!-- pages/about.vue -->
+<script lang="ts" setup>
+  definePageMeta({
+    layout: "center",
+  });
+</script>
+
+<template>
+  <template #side="{ one }">
+    This "{{ one }}" comes from the layout slot.
+    <!--     ^^^ -->
+  </template>
+  <div>About Page</div>
+</template>
+```
+
+And them will be forwarded to the active layout automatically.
+
+### 4. nitroRoutes
 
 Go to definition for nitro routes in data fetching methods.
 
@@ -62,7 +101,7 @@ useFetch("/api/foo");
 
 It will fallback to resolve the URL from your `public` directory when no nitro routes match.
 
-### 4. pageMeta
+### 5. pageMeta
 
 Go to definition for page metadata.
 
@@ -75,7 +114,7 @@ definePageMeta({
 });
 ```
 
-### 5. runtimeConfig
+### 6. runtimeConfig
 
 Go to definition for runtime config.
 
@@ -86,7 +125,7 @@ Go to definition for runtime config.
 </template>
 ```
 
-### 6. typedPages
+### 7. typedPages
 
 Go to definition for typed pages.
 
@@ -99,11 +138,11 @@ Go to definition for typed pages.
 
 It can be triggered on the `name` property of an object literal constrained by the `RouteLocationRaw` type.
 
-### 7. unimport
+### 8. unimport
 
 Please refer to the [@dxup/unimport](/packages/unimport) package for more details.
 
-### 8. unofficial
+### 9. unofficial
 
 Find references for SFC on `<template>`.
 

package/dist/components/forward.d.mts

@@ -0,0 +1,4 @@
+//#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

@@ -0,0 +1,10 @@
+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 };

package/dist/languages/named-layout-slots.cjs

@@ -0,0 +1,78 @@
+require("@vue/compiler-dom");
+let pathe = require("pathe");
+//#region src/module/named-layout-slots/utils.ts
+function isInDir(path, dir) {
+	const rel = (0, pathe.relative)(dir, path);
+	return rel !== ".." && !rel.startsWith("../") && !(0, pathe.isAbsolute)(rel);
+}
+//#endregion
+//#region src/module/named-layout-slots/language.ts
+const resolvedAsts = /* @__PURE__ */ new WeakSet();
+const plugin = ({ modules: { typescript: ts, "@vue/compiler-dom": CompilerDOM }, config: { options } }) => ({
+	version: 2.2,
+	order: -1,
+	resolveEmbeddedCode(fileName, sfc, embeddedCode) {
+		if (!embeddedCode.id.startsWith("script_")) return;
+		if (!options.dirs.some((dir) => isInDir(fileName, dir))) return;
+		if (!sfc.template?.ast || resolvedAsts.has(sfc.template.ast)) return;
+		resolvedAsts.add(sfc.template.ast);
+		let layoutName = "default";
+		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;
+					break;
+				}
+			} else ts.forEachChild(node, visit);
+		}
+		const expression = `\n// @ts-ignore\n{} as import("#build/dxup/layouts").Layouts["${layoutName}"]\n`;
+		const children = sfc.template.ast.children;
+		sfc.template.ast.children = [{
+			type: CompilerDOM.NodeTypes.ELEMENT,
+			ns: CompilerDOM.Namespaces.HTML,
+			tag: "component",
+			tagType: CompilerDOM.ElementTypes.COMPONENT,
+			loc: createVirtualLoc(),
+			props: [{
+				type: CompilerDOM.NodeTypes.DIRECTIVE,
+				name: "bind",
+				arg: {
+					type: CompilerDOM.NodeTypes.SIMPLE_EXPRESSION,
+					content: "is",
+					isStatic: true,
+					constType: CompilerDOM.ConstantTypes.CAN_STRINGIFY,
+					loc: createVirtualLoc("is")
+				},
+				exp: {
+					type: CompilerDOM.NodeTypes.SIMPLE_EXPRESSION,
+					content: expression,
+					isStatic: false,
+					constType: CompilerDOM.ConstantTypes.NOT_CONSTANT,
+					loc: createVirtualLoc(expression)
+				},
+				modifiers: [],
+				loc: createVirtualLoc(`:is="${expression}"`)
+			}],
+			children,
+			codegenNode: void 0
+		}];
+	}
+});
+function createVirtualLoc(source = "") {
+	return {
+		start: {
+			line: Number.MAX_VALUE,
+			column: Number.MAX_VALUE,
+			offset: Number.MAX_VALUE
+		},
+		end: {
+			line: Number.MAX_VALUE,
+			column: Number.MAX_VALUE,
+			offset: Number.MAX_VALUE
+		},
+		source
+	};
+}
+//#endregion
+module.exports = plugin;

package/dist/languages/named-layout-slots.d.cts

@@ -0,0 +1,10 @@
+import { VueLanguagePlugin } from "@vue/language-core";
+
+//#region src/module/named-layout-slots/language.d.ts
+interface Config {
+  options: {
+    dirs: string[];
+  };
+}
+declare const plugin: VueLanguagePlugin<Config>;
+export = plugin;

package/dist/module.d.mts

@@ -1,5 +1,3 @@
-import * as _$_nuxt_schema0 from "@nuxt/schema";
-
 //#region src/module/index.d.ts
 interface ModuleOptions {
   features?: {
@@ -13,6 +11,11 @@ interface ModuleOptions {
      * @default true
      */
     importGlob?: boolean;
+    /**
+     * Whether to enable named layout slots support in the pages.
+     * @default false
+     */
+    namedLayoutSlots?: boolean;
     /**
      * Whether to enable Go to Definition for nitro routes in data fetching methods.
      * @default true
@@ -46,10 +49,11 @@ interface ModuleOptions {
     unofficial?: boolean;
   };
 }
-declare const _default: _$_nuxt_schema0.NuxtModule<ModuleOptions, {
+declare const _default: import("@nuxt/schema").NuxtModule<ModuleOptions, {
   features: {
     components: true;
     importGlob: true;
+    namedLayoutSlots: false;
     nitroRoutes: true;
     pageMeta: true;
     runtimeConfig: true;

package/dist/module.mjs

@@ -1,9 +1,14 @@
-import { addTemplate, defineNuxtModule, useNitro } from "@nuxt/kit";
+import { addBuildPlugin, addTemplate, addTypeTemplate, createResolver, defineNuxtModule, useNitro } from "@nuxt/kit";
 import { Buffer } from "node:buffer";
 import { EventEmitter } from "node:events";
 import { mkdir, open, readFile, writeFile } from "node:fs/promises";
 import { watch } from "chokidar";
-import { dirname, join } from "pathe";
+import { dirname, isAbsolute, join, relative } from "pathe";
+import { genExport, genImport, genInlineTypeImport, genObjectKey } from "knitwork";
+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
@@ -59,6 +64,161 @@ async function onComponentsRename(nuxt, { fileName, references }) {
 	await Promise.all(tasks);
 }
 //#endregion
+//#region src/module/named-layout-slots/utils.ts
+const vueRE = /[?&]vue(?:&|$)/;
+const typeRE = /[?&]type=[^&]*/;
+function isVue(id) {
+	const index = id.indexOf("?");
+	const query = index !== -1 ? id.slice(index) : void 0;
+	if (query === void 0) return id.endsWith(".vue");
+	if (query === "?macro=true") return true;
+	if (!vueRE.test(query)) return false;
+	if (typeRE.test(query)) return false;
+	return true;
+}
+function isInDir(path, dir) {
+	const rel = relative(dir, path);
+	return rel !== ".." && !rel.startsWith("../") && !isAbsolute(rel);
+}
+function parseSFC(code) {
+	const sfc = parse(code, { parseMode: "sfc" });
+	let scriptSetup;
+	let template;
+	for (const node of sfc.children) {
+		if (node.type !== NodeTypes.ELEMENT) continue;
+		if (node.tag === "script" && node.props.some((prop) => prop.type === NodeTypes.ATTRIBUTE && (prop.name === "setup" || prop.name === "vapor"))) scriptSetup = node;
+		else if (node.tag === "template") template = node;
+	}
+	return {
+		scriptSetup,
+		template
+	};
+}
+//#endregion
+//#region src/module/named-layout-slots/plugins/transform-layout.ts
+const TransformLayoutPlugin = (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
+			};
+		}
+	}
+}));
+//#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;
+		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`);
+		s.appendLeft(template.innerLoc.start.offset, `<LayoutSlotsForward>`);
+		s.appendLeft(template.innerLoc.end.offset, "</LayoutSlotsForward>");
+		return {
+			code: s.toString(),
+			map: options.sourcemap ? s.generateMap({ hires: true }) : void 0
+		};
+	}
+}));
+//#endregion
+//#region src/module/named-layout-slots/module.ts
+function setup(nuxt, pluginsVue) {
+	const resolver = createResolver(import.meta.url);
+	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 }
+	});
+	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();
+		}
+	});
+	addTypeTemplate({
+		filename: "dxup/layouts.d.ts",
+		getContents({ app }) {
+			return `
+export interface Layouts {
+${Object.values(app.layouts).map((layout) => `    ${genObjectKey(layout.name)}: ${genInlineTypeImport(layout.file)};`).join("\n")}
+}
+`.trimStart();
+		}
+	});
+	addBuildPlugin(TransformPagePlugin({
+		dirs: pageDirs,
+		sourcemap: !!nuxt.options.sourcemap.client
+	}));
+	addBuildPlugin(TransformLayoutPlugin({ sourcemap: !!nuxt.options.sourcemap.client }));
+}
+//#endregion
 //#region src/module/index.ts
 var module_default = defineNuxtModule().with({
 	meta: {
@@ -68,6 +228,7 @@ var module_default = defineNuxtModule().with({
 	defaults: { features: {
 		components: true,
 		importGlob: true,
+		namedLayoutSlots: false,
 		nitroRoutes: true,
 		pageMeta: true,
 		runtimeConfig: true,
@@ -77,11 +238,14 @@ var module_default = defineNuxtModule().with({
 	} },
 	async setup(options, nuxt) {
 		const pluginsTs = [{ name: "@dxup/nuxt" }];
-		if (options.features?.unimport) pluginsTs.unshift({ name: "@dxup/unimport" });
+		const pluginsVue = [];
+		if (options.features.namedLayoutSlots) 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");
 		append(pluginsTs, nuxt.options, "typescript", "sharedTsConfig", "compilerOptions");
 		append(pluginsTs, nuxt.options, "typescript", "nodeTsConfig", "compilerOptions");
+		append(pluginsVue, nuxt.options, "typescript", "tsConfig", "vueCompilerOptions");
 		addTemplate({
 			filename: "dxup/data.json",
 			write: true,

package/package.json

@@ -1,13 +1,18 @@
 {
   "name": "@dxup/nuxt",
   "type": "module",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "TypeScript plugin for Nuxt",
   "author": "KazariEX",
   "license": "MIT",
-  "repository": "KazariEX/dxup",
+  "repository": {
+    "type": "git",
+    "url": "KazariEX/dxup"
+  },
   "exports": {
     ".": "./dist/module.mjs",
+    "./components/*": "./dist/components/*",
+    "./languages/*": "./dist/languages/*",
     "./package.json": "./package.json"
   },
   "main": "./dist/typescript.cjs",
@@ -15,26 +20,23 @@
   "files": [
     "dist"
   ],
-  "peerDependencies": {
-    "typescript": "*"
-  },
-  "peerDependenciesMeta": {
-    "typescript": {
-      "optional": true
-    }
-  },
   "dependencies": {
-    "@nuxt/kit": "^4.4.2",
+    "@nuxt/kit": "^4.4.8",
+    "@vue/compiler-dom": "^3.5.38",
     "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.16",
+    "tinyglobby": "^0.2.17",
+    "unplugin": "^3.0.0",
     "@dxup/unimport": "^0.1.2"
   },
   "devDependencies": {
     "@volar/language-core": "^2.4.28",
     "@volar/typescript": "^2.4.28",
-    "@vue/language-core": "^3.2.7",
-    "nuxt": "^4.4.2",
+    "@vue/language-core": "^3.3.5",
+    "nuxt": "^4.4.8",
     "typescript": "^6.0.3",
     "@dxup/shared": "0.0.0"
   },