@hybridly/vite 0.0.1-alpha.1 → 0.0.1-alpha.3

package/dist/index.cjs

@@ -27,29 +27,37 @@ const debug = {
   layout: makeDebugger__default(LAYOUT_PLUGIN_NAME)
 };
 
-const TEMPLATE_LAYOUT_REGEX = /<template +layout(?: *= *['"](?:(?:(\w+):)?(\w+))['"] *)?>/;
+const TEMPLATE_LAYOUT_REGEX = /<template +layout(?: *= *['"]((?:[\w\/-_,](?:,\ )?)+)['"] *)?>/;
 const TYPESCRIPT_REGEX = /lang=['"]ts['"]/;
 const layout = (options = {}) => {
+  const defaultLayoutName = options?.defaultLayoutName ?? "default";
   const base = options?.directory ? options?.directory : path__default.resolve(process.cwd(), "resources", "views", "layouts");
-  const layoutPath = options?.resolve ? options.resolve : (layoutName) => vite.normalizePath(path__default.resolve(base, `${layoutName ?? "default"}.vue`)).replaceAll("\\", "/");
+  const templateRegExp = options?.templateRegExp ? options?.templateRegExp : TEMPLATE_LAYOUT_REGEX;
+  const getLayoutPath = options?.resolve ? options.resolve : (layoutName) => vite.normalizePath(path__default.resolve(base, `${layoutName}.vue`)).replaceAll("\\", "/");
   debug.layout("Registered layout path:", base);
   return {
     name: LAYOUT_PLUGIN_NAME,
     transform: (code, id) => {
-      if (!TEMPLATE_LAYOUT_REGEX.test(code)) {
+      if (!templateRegExp.test(code)) {
         return;
       }
-      return code.replace(TEMPLATE_LAYOUT_REGEX, (_, __, layoutName) => {
+      return code.replace(templateRegExp, (_, layoutName) => {
         const isTypeScript = TYPESCRIPT_REGEX.test(code);
-        const importPath = layoutPath(layoutName);
-        debug.layout(`Resolved layout "${layoutName}":`, {
+        const layouts = layoutName?.toString()?.replaceAll(" ", "").split(",") ?? [defaultLayoutName];
+        const importName = (i) => `__hybridly_layout_${i}`;
+        const exports = layouts.map((_2, i) => importName(i));
+        const imports = layouts.reduce((imports2, layoutName2, i) => `
+					${imports2}
+					import ${importName(i)} from '${getLayoutPath(layoutName2)}';
+				`, "").trim();
+        debug.layout(`Resolved layouts "${layouts.join(", ")}":`, {
           sourceFile: id,
-          importPath
+          layouts
         });
         return `
 					<script${isTypeScript ? ' lang="ts"' : ""}>
-					import layout from '${importPath}'
-					export default { layout }
+					${imports}
+					export default { layout: [${exports.join(", ")}] }
 					<\/script>
 					<template>
 				`;

package/dist/index.d.ts

@@ -7,6 +7,10 @@ interface Options {
     router?: false | RouterOptions;
 }
 interface LayoutOptions {
+    /** Name of the layout used when no argument is provided to `layout`. */
+    defaultLayoutName?: string;
+    /** Custom RegExp for parsing the template string. */
+    templateRegExp?: RegExp;
     /** The directory in which layouts are stored. */
     directory?: string;
     /** Function that resolves the layout path given its name. */

package/dist/index.mjs

@@ -17,29 +17,37 @@ const debug = {
   layout: makeDebugger(LAYOUT_PLUGIN_NAME)
 };
 
-const TEMPLATE_LAYOUT_REGEX = /<template +layout(?: *= *['"](?:(?:(\w+):)?(\w+))['"] *)?>/;
+const TEMPLATE_LAYOUT_REGEX = /<template +layout(?: *= *['"]((?:[\w\/-_,](?:,\ )?)+)['"] *)?>/;
 const TYPESCRIPT_REGEX = /lang=['"]ts['"]/;
 const layout = (options = {}) => {
+  const defaultLayoutName = options?.defaultLayoutName ?? "default";
   const base = options?.directory ? options?.directory : path.resolve(process.cwd(), "resources", "views", "layouts");
-  const layoutPath = options?.resolve ? options.resolve : (layoutName) => normalizePath(path.resolve(base, `${layoutName ?? "default"}.vue`)).replaceAll("\\", "/");
+  const templateRegExp = options?.templateRegExp ? options?.templateRegExp : TEMPLATE_LAYOUT_REGEX;
+  const getLayoutPath = options?.resolve ? options.resolve : (layoutName) => normalizePath(path.resolve(base, `${layoutName}.vue`)).replaceAll("\\", "/");
   debug.layout("Registered layout path:", base);
   return {
     name: LAYOUT_PLUGIN_NAME,
     transform: (code, id) => {
-      if (!TEMPLATE_LAYOUT_REGEX.test(code)) {
+      if (!templateRegExp.test(code)) {
         return;
       }
-      return code.replace(TEMPLATE_LAYOUT_REGEX, (_, __, layoutName) => {
+      return code.replace(templateRegExp, (_, layoutName) => {
         const isTypeScript = TYPESCRIPT_REGEX.test(code);
-        const importPath = layoutPath(layoutName);
-        debug.layout(`Resolved layout "${layoutName}":`, {
+        const layouts = layoutName?.toString()?.replaceAll(" ", "").split(",") ?? [defaultLayoutName];
+        const importName = (i) => `__hybridly_layout_${i}`;
+        const exports = layouts.map((_2, i) => importName(i));
+        const imports = layouts.reduce((imports2, layoutName2, i) => `
+					${imports2}
+					import ${importName(i)} from '${getLayoutPath(layoutName2)}';
+				`, "").trim();
+        debug.layout(`Resolved layouts "${layouts.join(", ")}":`, {
           sourceFile: id,
-          importPath
+          layouts
         });
         return `
 					<script${isTypeScript ? ' lang="ts"' : ""}>
-					import layout from '${importPath}'
-					export default { layout }
+					${imports}
+					export default { layout: [${exports.join(", ")}] }
 					<\/script>
 					<template>
 				`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hybridly/vite",
-  "version": "0.0.1-alpha.1",
+  "version": "0.0.1-alpha.3",
   "description": "A solution to develop server-driven, client-rendered applications",
   "keywords": [
     "hybridly",
@@ -39,7 +39,7 @@
     "vue": "^3.2.33"
   },
   "dependencies": {
-    "@hybridly/core": "0.0.1-alpha.1",
+    "@hybridly/core": "0.0.1-alpha.3",
     "throttle-debounce": "^5.0.0"
   },
   "devDependencies": {