@hybridly/vite 0.0.1-alpha.2 → 0.0.1-alpha.21

package/dist/index.cjs

@@ -16,40 +16,62 @@ const path__default = /*#__PURE__*/_interopDefaultLegacy(path);
 const makeDebugger__default = /*#__PURE__*/_interopDefaultLegacy(makeDebugger);
 const fs__default = /*#__PURE__*/_interopDefaultLegacy(fs);
 
-const ROUTER_PLUGIN_NAME = "vite:hybridly:router";
-const ROUTER_HMR_UPDATE_ROUTE = "hybridly:routes:update";
-const ROUTER_VIRTUAL_MODULE_ID = "virtual:hybridly/router";
-const RESOLVED_ROUTER_VIRTUAL_MODULE_ID = `\0${ROUTER_VIRTUAL_MODULE_ID}`;
+const ROUTING_PLUGIN_NAME = "vite:hybridly:routing";
+const ROUTING_HMR_UPDATE_ROUTING = "hybridly:routing:update";
+const ROUTING_HMR_QUERY_UPDATE_ROUTING = "hybridly:routing:pls-update";
+const ROUTING_VIRTUAL_MODULE_ID = "virtual:hybridly/router";
+const RESOLVED_ROUTING_VIRTUAL_MODULE_ID = `\0${ROUTING_VIRTUAL_MODULE_ID}`;
 const LAYOUT_PLUGIN_NAME = "vite:hybridly:layout";
 
 const debug = {
-  router: makeDebugger__default(ROUTER_PLUGIN_NAME),
+  router: makeDebugger__default(ROUTING_PLUGIN_NAME),
   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 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("\\", "/");
-  debug.layout("Registered layout path:", base);
+  const defaultLayoutName = options?.defaultLayoutName?.replace(".vue", "") ?? "default";
+  const layoutsDirectory = options?.directory ?? path__default.resolve(process.cwd(), "resources", "views", "layouts");
+  const templateRegExp = options?.templateRegExp ?? TEMPLATE_LAYOUT_REGEX;
+  const resolveLayoutPath = (layoutName) => {
+    const [domain, layout] = layoutName.includes(":") ? layoutName.split(":") : [void 0, layoutName];
+    const resolve = options?.resolve ?? ((layout2, domain2) => {
+      if (!domain2) {
+        return path__default.resolve(layoutsDirectory, `${layout2}.vue`);
+      }
+      return path__default.resolve(process.cwd(), "resources", "domains", domain2, "layouts", `${layout2}.vue`);
+    });
+    return vite.normalizePath(resolve(layout, domain)).replaceAll("\\", "/");
+  };
+  debug.layout("Resolved options:", {
+    defaultLayoutName,
+    layoutsDirectory
+  });
   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 '${resolveLayoutPath(layoutName2)}';
+				`, "").trim();
+        debug.layout(`Resolved layouts "${layouts.join(", ")}":`, {
           sourceFile: id,
-          importPath
+          layouts,
+          imports
         });
         return `
 					<script${isTypeScript ? ' lang="ts"' : ""}>
-					import layout from '${importPath}'
-					export default { layout }
+					${imports}
+					export default { layout: [${exports.join(", ")}] }
 					<\/script>
 					<template>
 				`;
@@ -58,42 +80,45 @@ const layout = (options = {}) => {
   };
 };
 
-function getClientCode(routes) {
+function getClientCode(routing) {
   return `
 		if (typeof window !== 'undefined') {
 			window.hybridly = {
-				routes: ${JSON.stringify(routes)}
+				routing: ${JSON.stringify(routing)}
 			}
-	
+
 			if (import.meta.hot) {
-				import.meta.hot.on('${ROUTER_HMR_UPDATE_ROUTE}', (routes) => {
-					window.dispatchEvent(
-						new CustomEvent('hybridly:routes', { detail: routes })
-					)
+				import.meta.hot.on('${ROUTING_HMR_UPDATE_ROUTING}', (routing) => {
+					window.dispatchEvent(new CustomEvent('hybridly:routing', { detail: routing }))
 				})
+
+				import.meta.hot.send('${ROUTING_HMR_QUERY_UPDATE_ROUTING}')
 			}
 		}
  `;
 }
 
 const shell = node_util.promisify(node_child_process.exec);
-async function fetchRoutesFromArtisan(options) {
-  const php = options.php ?? "php";
-  const result = await shell(`${php} artisan hybridly:routes`);
-  const routes = JSON.parse(result.stdout);
-  write(options, routes);
-  return routes;
+async function fetchRoutingFromArtisan(options) {
+  try {
+    const php = options.php ?? "php";
+    const result = await shell(`${php} artisan hybridly:routes`);
+    const routing = JSON.parse(result.stdout);
+    write(options, routing);
+    return routing;
+  } catch {
+  }
 }
 
 const write = throttleDebounce.debounce(1e3, writeDefinitions, { atBegin: true });
-async function writeDefinitions(options, collection) {
-  collection ?? (collection = await fetchRoutesFromArtisan(options));
-  if (options.dts === false) {
+async function writeDefinitions(options, routing) {
+  routing ?? (routing = await fetchRoutingFromArtisan(options));
+  if (options.dts === false || !routing) {
     return;
   }
-  debug.router("Writing types for route collection:", collection);
+  debug.router("Writing types for routing:", routing);
   const target = path__default.resolve(options.dts ?? "resources/types/routes.d.ts");
-  const routes = Object.fromEntries(Object.entries(collection.routes).map(([key, route]) => {
+  const routes = Object.fromEntries(Object.entries(routing.routes).map(([key, route]) => {
     const bindings = route.bindings ? Object.fromEntries(Object.entries(route.bindings).map(([key2]) => [key2, "__key_placeholder__"])) : void 0;
     return [key, {
       ...route.uri ? { uri: route.uri } : {},
@@ -102,7 +127,8 @@ async function writeDefinitions(options, collection) {
       ...route.bindings ? { bindings } : {}
     }];
   }));
-  const definitions = generateDefinitions().replace("__URL__", collection?.url ?? "").replace("__ROUTES__", JSON.stringify(routes).replaceAll('"__key_placeholder__"', "any"));
+  const definitions = generateDefinitions().replace("__URL__", routing?.url ?? "").replace("__ROUTES__", JSON.stringify(routes).replaceAll('"__key_placeholder__"', "any"));
+  fs__default.mkdirSync(path__default.dirname(target), { recursive: true });
   fs__default.writeFileSync(target, definitions, { encoding: "utf-8" });
 }
 function generateDefinitions() {
@@ -111,7 +137,7 @@ function generateDefinitions() {
 // Modifications will be discarded
 // It is recommended to add it in your .gitignore
 
-declare module 'hybridly/vue' {
+declare module 'hybridly' {
 	export interface GlobalRouteCollection {
 		url: '__URL__'
 		routes: __ROUTES__
@@ -130,37 +156,43 @@ const router = (options = {}) => {
     ],
     ...options
   };
-  let previousRoutes;
+  let routingBeforeUpdate;
+  async function sendRoutingUpdate(server, force = false) {
+    const routing = await fetchRoutingFromArtisan(resolved) ?? routingBeforeUpdate;
+    if (force || JSON.stringify(routing) !== JSON.stringify(routingBeforeUpdate)) {
+      debug.router("Updating routes via HMR:", routing);
+      server.ws.send({
+        type: "custom",
+        event: ROUTING_HMR_UPDATE_ROUTING,
+        data: routing
+      });
+      write(resolved);
+      routingBeforeUpdate = routing;
+    }
+  }
   return {
-    name: ROUTER_PLUGIN_NAME,
+    name: ROUTING_PLUGIN_NAME,
     configureServer(server) {
       write(resolved);
+      server.ws.on(ROUTING_HMR_QUERY_UPDATE_ROUTING, () => {
+        sendRoutingUpdate(server, true);
+      });
       server.watcher.on("change", async (path) => {
         if (!resolved.watch.some((regex) => regex.test(path))) {
           return;
         }
-        const routes = await fetchRoutesFromArtisan(resolved);
-        if (JSON.stringify(routes) !== JSON.stringify(previousRoutes)) {
-          debug.router("Updating routes via HMR:", routes);
-          server.ws.send({
-            type: "custom",
-            event: ROUTER_HMR_UPDATE_ROUTE,
-            data: routes
-          });
-          write(resolved);
-          previousRoutes = routes;
-        }
+        sendRoutingUpdate(server);
       });
     },
     resolveId(id) {
-      if (id === ROUTER_VIRTUAL_MODULE_ID) {
-        return RESOLVED_ROUTER_VIRTUAL_MODULE_ID;
+      if (id === ROUTING_VIRTUAL_MODULE_ID) {
+        return RESOLVED_ROUTING_VIRTUAL_MODULE_ID;
       }
     },
     async load(id) {
-      if (id === RESOLVED_ROUTER_VIRTUAL_MODULE_ID) {
-        const routes = await fetchRoutesFromArtisan(resolved);
-        return getClientCode(routes);
+      if (id === RESOLVED_ROUTING_VIRTUAL_MODULE_ID) {
+        const routing = await fetchRoutingFromArtisan(resolved);
+        return getClientCode(routing);
       }
     },
     async handleHotUpdate(ctx) {

package/dist/index.d.ts

@@ -7,10 +7,14 @@ 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. */
-    resolve?: (layout: string) => string;
+    resolve?: (layout: string, domain?: string) => string;
 }
 interface RouterOptions {
     /** Path to the PHP executable. */

package/dist/index.mjs

@@ -6,40 +6,62 @@ import { debounce } from 'throttle-debounce';
 import { exec } from 'node:child_process';
 import { promisify } from 'node:util';
 
-const ROUTER_PLUGIN_NAME = "vite:hybridly:router";
-const ROUTER_HMR_UPDATE_ROUTE = "hybridly:routes:update";
-const ROUTER_VIRTUAL_MODULE_ID = "virtual:hybridly/router";
-const RESOLVED_ROUTER_VIRTUAL_MODULE_ID = `\0${ROUTER_VIRTUAL_MODULE_ID}`;
+const ROUTING_PLUGIN_NAME = "vite:hybridly:routing";
+const ROUTING_HMR_UPDATE_ROUTING = "hybridly:routing:update";
+const ROUTING_HMR_QUERY_UPDATE_ROUTING = "hybridly:routing:pls-update";
+const ROUTING_VIRTUAL_MODULE_ID = "virtual:hybridly/router";
+const RESOLVED_ROUTING_VIRTUAL_MODULE_ID = `\0${ROUTING_VIRTUAL_MODULE_ID}`;
 const LAYOUT_PLUGIN_NAME = "vite:hybridly:layout";
 
 const debug = {
-  router: makeDebugger(ROUTER_PLUGIN_NAME),
+  router: makeDebugger(ROUTING_PLUGIN_NAME),
   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 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("\\", "/");
-  debug.layout("Registered layout path:", base);
+  const defaultLayoutName = options?.defaultLayoutName?.replace(".vue", "") ?? "default";
+  const layoutsDirectory = options?.directory ?? path.resolve(process.cwd(), "resources", "views", "layouts");
+  const templateRegExp = options?.templateRegExp ?? TEMPLATE_LAYOUT_REGEX;
+  const resolveLayoutPath = (layoutName) => {
+    const [domain, layout] = layoutName.includes(":") ? layoutName.split(":") : [void 0, layoutName];
+    const resolve = options?.resolve ?? ((layout2, domain2) => {
+      if (!domain2) {
+        return path.resolve(layoutsDirectory, `${layout2}.vue`);
+      }
+      return path.resolve(process.cwd(), "resources", "domains", domain2, "layouts", `${layout2}.vue`);
+    });
+    return normalizePath(resolve(layout, domain)).replaceAll("\\", "/");
+  };
+  debug.layout("Resolved options:", {
+    defaultLayoutName,
+    layoutsDirectory
+  });
   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 '${resolveLayoutPath(layoutName2)}';
+				`, "").trim();
+        debug.layout(`Resolved layouts "${layouts.join(", ")}":`, {
           sourceFile: id,
-          importPath
+          layouts,
+          imports
         });
         return `
 					<script${isTypeScript ? ' lang="ts"' : ""}>
-					import layout from '${importPath}'
-					export default { layout }
+					${imports}
+					export default { layout: [${exports.join(", ")}] }
 					<\/script>
 					<template>
 				`;
@@ -48,42 +70,45 @@ const layout = (options = {}) => {
   };
 };
 
-function getClientCode(routes) {
+function getClientCode(routing) {
   return `
 		if (typeof window !== 'undefined') {
 			window.hybridly = {
-				routes: ${JSON.stringify(routes)}
+				routing: ${JSON.stringify(routing)}
 			}
-	
+
 			if (import.meta.hot) {
-				import.meta.hot.on('${ROUTER_HMR_UPDATE_ROUTE}', (routes) => {
-					window.dispatchEvent(
-						new CustomEvent('hybridly:routes', { detail: routes })
-					)
+				import.meta.hot.on('${ROUTING_HMR_UPDATE_ROUTING}', (routing) => {
+					window.dispatchEvent(new CustomEvent('hybridly:routing', { detail: routing }))
 				})
+
+				import.meta.hot.send('${ROUTING_HMR_QUERY_UPDATE_ROUTING}')
 			}
 		}
  `;
 }
 
 const shell = promisify(exec);
-async function fetchRoutesFromArtisan(options) {
-  const php = options.php ?? "php";
-  const result = await shell(`${php} artisan hybridly:routes`);
-  const routes = JSON.parse(result.stdout);
-  write(options, routes);
-  return routes;
+async function fetchRoutingFromArtisan(options) {
+  try {
+    const php = options.php ?? "php";
+    const result = await shell(`${php} artisan hybridly:routes`);
+    const routing = JSON.parse(result.stdout);
+    write(options, routing);
+    return routing;
+  } catch {
+  }
 }
 
 const write = debounce(1e3, writeDefinitions, { atBegin: true });
-async function writeDefinitions(options, collection) {
-  collection ?? (collection = await fetchRoutesFromArtisan(options));
-  if (options.dts === false) {
+async function writeDefinitions(options, routing) {
+  routing ?? (routing = await fetchRoutingFromArtisan(options));
+  if (options.dts === false || !routing) {
     return;
   }
-  debug.router("Writing types for route collection:", collection);
+  debug.router("Writing types for routing:", routing);
   const target = path.resolve(options.dts ?? "resources/types/routes.d.ts");
-  const routes = Object.fromEntries(Object.entries(collection.routes).map(([key, route]) => {
+  const routes = Object.fromEntries(Object.entries(routing.routes).map(([key, route]) => {
     const bindings = route.bindings ? Object.fromEntries(Object.entries(route.bindings).map(([key2]) => [key2, "__key_placeholder__"])) : void 0;
     return [key, {
       ...route.uri ? { uri: route.uri } : {},
@@ -92,7 +117,8 @@ async function writeDefinitions(options, collection) {
       ...route.bindings ? { bindings } : {}
     }];
   }));
-  const definitions = generateDefinitions().replace("__URL__", collection?.url ?? "").replace("__ROUTES__", JSON.stringify(routes).replaceAll('"__key_placeholder__"', "any"));
+  const definitions = generateDefinitions().replace("__URL__", routing?.url ?? "").replace("__ROUTES__", JSON.stringify(routes).replaceAll('"__key_placeholder__"', "any"));
+  fs.mkdirSync(path.dirname(target), { recursive: true });
   fs.writeFileSync(target, definitions, { encoding: "utf-8" });
 }
 function generateDefinitions() {
@@ -101,7 +127,7 @@ function generateDefinitions() {
 // Modifications will be discarded
 // It is recommended to add it in your .gitignore
 
-declare module 'hybridly/vue' {
+declare module 'hybridly' {
 	export interface GlobalRouteCollection {
 		url: '__URL__'
 		routes: __ROUTES__
@@ -120,37 +146,43 @@ const router = (options = {}) => {
     ],
     ...options
   };
-  let previousRoutes;
+  let routingBeforeUpdate;
+  async function sendRoutingUpdate(server, force = false) {
+    const routing = await fetchRoutingFromArtisan(resolved) ?? routingBeforeUpdate;
+    if (force || JSON.stringify(routing) !== JSON.stringify(routingBeforeUpdate)) {
+      debug.router("Updating routes via HMR:", routing);
+      server.ws.send({
+        type: "custom",
+        event: ROUTING_HMR_UPDATE_ROUTING,
+        data: routing
+      });
+      write(resolved);
+      routingBeforeUpdate = routing;
+    }
+  }
   return {
-    name: ROUTER_PLUGIN_NAME,
+    name: ROUTING_PLUGIN_NAME,
     configureServer(server) {
       write(resolved);
+      server.ws.on(ROUTING_HMR_QUERY_UPDATE_ROUTING, () => {
+        sendRoutingUpdate(server, true);
+      });
       server.watcher.on("change", async (path) => {
         if (!resolved.watch.some((regex) => regex.test(path))) {
           return;
         }
-        const routes = await fetchRoutesFromArtisan(resolved);
-        if (JSON.stringify(routes) !== JSON.stringify(previousRoutes)) {
-          debug.router("Updating routes via HMR:", routes);
-          server.ws.send({
-            type: "custom",
-            event: ROUTER_HMR_UPDATE_ROUTE,
-            data: routes
-          });
-          write(resolved);
-          previousRoutes = routes;
-        }
+        sendRoutingUpdate(server);
       });
     },
     resolveId(id) {
-      if (id === ROUTER_VIRTUAL_MODULE_ID) {
-        return RESOLVED_ROUTER_VIRTUAL_MODULE_ID;
+      if (id === ROUTING_VIRTUAL_MODULE_ID) {
+        return RESOLVED_ROUTING_VIRTUAL_MODULE_ID;
       }
     },
     async load(id) {
-      if (id === RESOLVED_ROUTER_VIRTUAL_MODULE_ID) {
-        const routes = await fetchRoutesFromArtisan(resolved);
-        return getClientCode(routes);
+      if (id === RESOLVED_ROUTING_VIRTUAL_MODULE_ID) {
+        const routing = await fetchRoutingFromArtisan(resolved);
+        return getClientCode(routing);
       }
     },
     async handleHotUpdate(ctx) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hybridly/vite",
-  "version": "0.0.1-alpha.2",
+  "version": "0.0.1-alpha.21",
   "description": "A solution to develop server-driven, client-rendered applications",
   "keywords": [
     "hybridly",
@@ -36,16 +36,16 @@
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "peerDependencies": {
-    "vue": "^3.2.33"
+    "vue": "^3.2.45"
   },
   "dependencies": {
-    "@hybridly/core": "0.0.1-alpha.2",
-    "throttle-debounce": "^5.0.0"
+    "throttle-debounce": "^5.0.0",
+    "@hybridly/core": "0.0.1-alpha.21"
   },
   "devDependencies": {
-    "rollup": "^2.79.1",
-    "vite": "^3.1.7",
-    "vue": "^3.2.40"
+    "rollup": "^3.9.1",
+    "vite": "^4.0.4",
+    "vue": "^3.2.45"
   },
   "scripts": {
     "build": "unbuild",