vite-plugin-vanjs 0.0.10 → 0.1.1

package/plugin/helpers.mjs

@@ -0,0 +1,271 @@
+/** @typedef {import("./types").RouteConfig} RouteConfig */
+/** @typedef {import("./types").PageFile} PageFile */
+/** @typedef {import("./types").LayoutFile} LayoutFile */
+/** @typedef {import("./types").RouteFile} RouteFile */
+
+// import { normalizePath } from "vite";
+import { dirname, join, posix, win32 } from "node:path";
+import { existsSync } from "node:fs";
+import { readdir } from "node:fs/promises";
+
+/**
+ * Get the file most probable route path for a given potential route.
+ * @type {typeof import("./types").fileToRoute}
+ */
+export const fileToRoute = (file, routesDir) => {
+  const cleanPath = file
+    .slice(routesDir.length + 1) // also remove initial slash
+    .replace(/\.(jsx|tsx|ts|js)$/, "")
+    .replace(/index$/, "")
+    .replace(/\(.*\)$/, "") // Remove (file_name) from path
+    .replace(/\([^)]+\)\/?/g, "") // Remove (folder_name) from path
+    .replace(/\[\.\.\.[^\]]+\]/g, "*")
+    .replace(/\[([^\]]+)\]/g, ":$1");
+  const slashPath = cleanPath.endsWith("/")
+    ? cleanPath.slice(0, -1)
+    : cleanPath;
+  const path = slashPath === "*"
+    ? slashPath
+    : slashPath?.length > 0
+    ? `/${slashPath}`
+    : "/";
+
+  return path;
+};
+
+/**
+ * Identify all files in a folder.
+ * @type {typeof import("./types").globFiles}
+ */
+export const globFiles = async (dir, extensions) => {
+  /** @type {string[]} */
+  const files = [];
+
+  /** @param {string} directory */
+  async function scan(directory) {
+    if (!existsSync(directory)) {
+      // console.log('🍦 @vanjs/router: the "routes" folder does not exist.');
+      return;
+    }
+    const entries = await readdir(directory, { withFileTypes: true });
+    if (!entries.length) {
+      // console.warn('🍦 @vanjs/router: the "routes" folder is empty.');
+      return;
+    }
+
+    for (const entry of entries) {
+      const fullPath = join(directory, entry.name);
+
+      // istanbul ignore else
+      if (entry.isDirectory()) {
+        await scan(fullPath);
+      } else if (entry.isFile()) {
+        // Check if file has allowed extension
+        // istanbul ignore else
+        if (extensions.some((ext) => entry.name.endsWith(ext))) {
+          files.push(fullPath);
+        }
+      }
+    }
+  }
+
+  await scan(dir);
+  return files;
+};
+
+const normalizePathRegExp = new RegExp(`\\${win32.sep}`, "g");
+/** @param {string} filename */
+function normalizePath(filename) {
+  return filename.replace(normalizePathRegExp, posix.sep);
+}
+
+/**
+ * Scan routes directory and generate routes.
+ * @type {typeof import("./types").scanRoutes}
+ */
+export const scanRoutes = async (config, pluginConfig) => {
+  const { routesDir, extensions } = pluginConfig;
+  const routesPath = join(config.root, routesDir);
+  const files = await globFiles(routesPath, extensions);
+
+  if (!files?.length) {
+    return [];
+  }
+
+  // Filter out duplicate routes and layout files that are already used
+  const routes = files.map((file) => ({
+    path: normalizePath(file),
+    routePath: fileToRoute(file, routesPath),
+  }));
+
+  // Remove duplicate routes (prefer non-layout files)
+  /** @type {typeof routes} */
+  const uniqueRoutes = routes.reduce(
+    /**
+     * @param {typeof routes} acc
+     * @param {typeof routes[0]} route
+     * @returns {typeof routes}
+     */
+    (acc, route) => {
+      const existing = acc.find((r) => r.routePath === route.routePath);
+      if (
+        !existing || (existing.path.includes("(") && !route.path.includes("("))
+      ) {
+        // Remove the existing route if this is a better match
+        // istanbul ignore if - should not be possible
+        if (existing) {
+          acc = acc.filter((r) => r !== existing);
+        }
+        acc.push(route);
+      }
+      return acc;
+    },
+    [],
+  );
+
+  return uniqueRoutes;
+};
+
+/**
+ * Find all layout files for a given route.
+ * @type {typeof import("./types").findLayouts}
+ */
+export const findLayouts = (routePath, config, pluginConfig) => {
+  const { routesDir, extensions } = pluginConfig;
+  const layouts = [];
+  let dir = dirname(routePath);
+  const routesPath = join(config.root, routesDir);
+
+  // Walk up the directory tree looking for layout files
+  while (dir.startsWith(routesPath) && dir !== routesPath) { // Stop at routes dir
+    let layoutFile = null;
+    const dirName = dir.split(/[/\\]/).pop();
+
+    // istanbul ignore else
+    if (dirName) {
+      // Look for a layout file in the current directory
+      for (const ext of extensions) {
+        const layoutPaths = [
+          join(dirname(dir), `${dirName}${ext}`),
+          join(dirname(dir), `(${dirName.replace(/^\((.*)\)$/, "$1")})${ext}`),
+        ];
+
+        for (const path of layoutPaths) {
+          if (existsSync(path)) {
+            layoutFile = path;
+            break;
+          }
+        }
+      }
+    }
+
+    // istanbul ignore else
+    if (layoutFile && layoutFile !== routePath) {
+      layouts.unshift({
+        id: `Layout${layouts.length}`,
+        path: layoutFile,
+      });
+    }
+
+    dir = dirname(dir);
+  }
+
+  return layouts;
+};
+
+/**
+ * Process routes and identify their layouts
+ * @type {typeof import("./types").processLayoutRoutes}
+ */
+export const processLayoutRoutes = (routes, config, pluginConfig) => {
+  if (!routes.length) return [];
+
+  return routes.map((route) => {
+    const layouts = findLayouts(route.path, config, pluginConfig);
+    return {
+      ...route,
+      layouts,
+    };
+  });
+};
+
+/**
+ * Scan and process routes and return them
+ * @type {typeof import("./types").getRoutes}
+ */
+// export const scanRoutes = async (config, pluginConfig) => {}
+export const getRoutes = async (config, pluginConfig) => {
+  const routes = await scanRoutes(config, pluginConfig);
+  return processLayoutRoutes(routes, config, pluginConfig);
+};
+
+/** @type {(route: RouteFile) => string} */
+export const generateRouteProloaders = (route) => {
+  const moduleName = "PageModule";
+  const layoutName = "Module";
+
+  return `{
+    preload: async (params) => {
+      ${
+    route.layouts.map((layout) =>
+      `if (${layout.id + layoutName}?.route?.preload) await ${
+        layout.id + layoutName
+      }?.route?.preload(params);`
+    ).join("\n      ")
+  }
+      if (${moduleName}?.route?.preload) await ${moduleName}?.route?.preload(params);
+    },
+    load: async (params) => {
+      ${
+    route.layouts.map((layout) =>
+      `if (${layout.id + layoutName}?.route?.load) await ${
+        layout.id + layoutName
+      }?.route?.load(params);`
+    ).join("\n      ")
+  }
+      if (${moduleName}?.route?.load) await ${moduleName}?.route?.load(params);
+    }
+  }`;
+};
+
+/** @type {(route: RouteFile) => string} */
+export const generateComponentRoute = (route) => {
+  if (route.layouts?.length > 0) {
+    // Only generate imports for unique layouts
+    const layoutImports = route.layouts.map(
+      (layout) =>
+        `const ${layout.id}Module = await import('${layout.path}');\n` +
+        `const ${layout.id}Page = ${layout.id}Module.Layout || ${layout.id}Module.Page || ${layout.id}Module.default;`,
+    ).join("\n");
+
+    // Use both shared and unique layouts for the component chain
+    const pageComponent = route.layouts.reduce(
+      (acc, layout) => `${layout.id}Page({ children: ${acc} })`,
+      "Page()",
+    );
+
+    return `lazy(() => {
+      const importFn = async () => {
+        ${layoutImports}
+        const PageModule = await import('${route.path}');
+        const Page = PageModule?.Page || PageModule?.default;
+  
+        return Promise.resolve({
+          route: ${generateRouteProloaders(route)},
+          Page: () => ${pageComponent},
+        });
+      };
+      return importFn();
+    })`;
+  }
+
+  return `lazy(() => import('${route.path}'))`;
+};
+
+/** @type {(route: RouteFile) => string} */
+export const generateRoute = (route) => {
+  return `Route({
+    path: "${route.routePath}",
+    component: ${generateComponentRoute(route)},
+  });`;
+};

package/plugin/index.mjs

@@ -0,0 +1,206 @@
+/** @typedef {import("vite").ResolvedConfig} ResolvedConfig */
+/** @typedef {import("./types").PageFile} PageFile */
+/** @typedef {import("./types").RouteFile} RouteFile */
+
+import { fileURLToPath } from "node:url";
+import { dirname, join, resolve } from "node:path";
+import process from "node:process";
+import { transformWithEsbuild } from "vite";
+import { routes } from "../router/routes.mjs";
+import { generateRoute, getRoutes } from "./helpers.mjs";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+/** @param {string} p */
+const toAbsolute = (p) => resolve(__dirname, p);
+
+const pluginDefaults = {
+  routesDir: "src/routes",
+  extensions: [".tsx", ".jsx", ".ts", ".js"],
+};
+
+export default function VitePluginVanJS(options = {}) {
+  const pluginConfig = { ...pluginDefaults, ...options };
+  const { routesDir } = pluginConfig;
+
+  /** @type {ResolvedConfig} */
+  let config;
+  /** @type {RouteFile[] | null} */
+  let routeCache = null;
+
+  const virtualModuleId = "virtual:@vanjs/routes";
+  const resolvedVirtualModuleId = "\0" + virtualModuleId;
+
+  return {
+    name: "vanjs",
+    enforce: "pre",
+    config() {
+      return {
+        optimizeDeps: {
+          noDiscovery: true,
+          include: [
+            "vanjs-core",
+            "vanjs-ext",
+            "mini-van-plate/van-plate",
+            "mini-van-plate/shared",
+          ],
+        },
+        ssr: {
+          noExternal: ["vanjs-*", "*-vanjs", "@vanjs/*"],
+        },
+        resolve: {
+          alias: {
+            "@vanjs/setup": toAbsolute("../setup/index"),
+            "@vanjs/van": toAbsolute("../setup/van"),
+            "@vanjs/vanX": toAbsolute("../setup/vanX"),
+            "@vanjs/client": toAbsolute("../client"),
+            "@vanjs/server": toAbsolute("../server"),
+            "@vanjs/meta": toAbsolute("../meta"),
+            "@vanjs/router": toAbsolute("../router"),
+            "@vanjs/jsx": toAbsolute("../jsx"),
+          },
+        },
+        esbuild: {
+          jsx: "automatic",
+          jsxImportSource: "@vanjs/jsx",
+        },
+      };
+    },
+    /** @param {import("vite").ResolvedConfig} resolvedConfig */
+    configResolved(resolvedConfig) {
+      config = resolvedConfig;
+    },
+    /** @param {import("vite").ViteDevServer} server */
+    configureServer(server) {
+      // Watch routes directory
+      const pagesPath = join(config.root, routesDir);
+      /** @param {string} file */
+      const changeHandler = (file) => {
+        // istanbul ignore else
+        if (file.startsWith(pagesPath)) {
+          routes.length = 0;
+          routeCache = null;
+          const module = server.moduleGraph.getModuleById(
+            resolvedVirtualModuleId,
+          );
+          // istanbul ignore else
+          if (module) {
+            server.moduleGraph.invalidateModule(module);
+          }
+          server.ws.send({ type: "full-reload" });
+        }
+      };
+      server.watcher.add(pagesPath);
+
+      // Handle file changes in pages directory
+      // 'add' | 'addDir' | 'change' | 'unlink' | 'unlinkDir'
+      server.watcher.on("add", changeHandler);
+      server.watcher.on("addDir", changeHandler);
+      server.watcher.on("unlink", changeHandler);
+      server.watcher.on("unlinkDir", changeHandler);
+      server.watcher.on("change", changeHandler);
+    },
+    /** @type {(source: string, importer: string | undefined, ops: { ssr: boolean }) => string | null} */
+    resolveId(source, importer, ops) {
+      // istanbul ignore else
+      if (source === virtualModuleId) {
+        return resolvedVirtualModuleId;
+      }
+      const isVanXFile = importer &&
+        /vanjs-ext[\/\\]src[\/\\]van-x/.test(importer);
+      const isSetupFile = importer &&
+        /vite-plugin-vanjs[\/\\]setup/.test(importer);
+      const isProduction = process.env.NODE_ENV === "production";
+      const isTest = process.env.NODE_ENV === "test";
+      const isJSXImport = source.includes("/vite-plugin-vanjs/jsx/jsx") ||
+        importer?.includes("/vite-plugin-vanjs/jsx/jsx.mjs");
+
+      const resolvedVan = toAbsolute(
+        ops.ssr ? "../setup/van-ssr.mjs" : (isJSXImport || isProduction ||
+            isTest)
+          ? "../setup/van.mjs"
+          : "../setup/van-debug.mjs",
+      );
+      const resolvedVanX = toAbsolute(
+        ops.ssr ? "../setup/vanX-ssr.mjs" : "../setup/vanX.mjs",
+      );
+      const setupResolved = toAbsolute(
+        ops.ssr
+          ? "../setup/index-ssr.mjs"
+          : (isProduction || isTest)
+          ? "../setup/index.mjs"
+          : "../setup/index-debug.mjs",
+      );
+
+      // Resolve early when source already resolved. EG: @vanjs/van
+      if (source === setupResolved || setupResolved.includes(source)) {
+        return setupResolved;
+      }
+      if (source === resolvedVan || resolvedVan.includes(source)) {
+        return resolvedVan;
+      }
+      if (source === resolvedVanX || resolvedVanX.includes(source)) {
+        return resolvedVanX;
+      }
+
+      // istanbul ignore else
+      if (!isSetupFile && !isVanXFile) {
+        if (source === "@vanjs/setup") {
+          return setupResolved;
+        }
+        if (importer?.endsWith("debug.js") && source.endsWith("/van.js")) {
+          return toAbsolute("../setup/van.mjs");
+        }
+        if (source === "vanjs-core" || source === "@vanjs/van") {
+          return resolvedVan;
+        }
+        if (source === "vanjs-ext" || source === "@vanjs/vanX") {
+          return resolvedVanX;
+        }
+      }
+
+      return null;
+    },
+    /** @type {(id: string, ops: { ssr: boolean }) => Promise<({ code: string, map: null } | null)>} */
+    async load(id, ops) {
+      // istanbul ignore else
+      if (id === resolvedVirtualModuleId) {
+        const currentRoutes = routeCache ||
+          await getRoutes(config, pluginConfig);
+        if (!currentRoutes || !currentRoutes.length) {
+          // don't crash the server if no routes are found
+          // devs might not use file system router
+          return { code: "", map: null };
+        }
+
+        const routesScript = `
+import { Route, routes } from "@vanjs/router/routes.mjs";
+import { lazy } from "@vanjs/router/lazy.mjs";
+
+// Reset current routes
+routes.length = 0;
+
+// Register routes
+${currentRoutes.map(generateRoute).join("\n")}
+${
+          ops.ssr && currentRoutes.length
+            ? `console.log(\`🍦 @vanjs/router registered ${currentRoutes.length} routes.\`)`
+            : /* istanbul ignore next - satisfied */ ""
+        }
+`;
+
+        const result = await transformWithEsbuild(
+          routesScript,
+          id,
+          { loader: "js" },
+        );
+
+        return {
+          code: result.code,
+          map: null,
+        };
+      }
+      return null;
+    },
+  };
+}

package/plugin/types.d.ts

@@ -0,0 +1,23 @@
+// plugin/types.ts
+export * from "../jsx/types";
+export * from "../setup/types";
+export * from "../router/types";
+export * from "../meta/types";
+export * from "../server/types";
+export * from "../client/types";
+export * from "../parser/types";
+import type { Plugin } from "vite";
+
+export type VanJSPluginOptions = {
+  routesDir: string;
+  extensions: string[];
+};
+
+export type VanJSPlugin = (
+  options?: Partial<VanJSPluginOptions>,
+) => Plugin;
+
+// This is what your plugin actually returns, so declare it as a Plugin type
+declare const VitePluginVanJS: VanJSPlugin;
+
+export default VitePluginVanJS;

package/router/a.mjs

@@ -1,6 +1,5 @@
 // router/a.mjs
 import van from "vanjs-core";
-import setup from "../setup/index.mjs";
 import { matchRoute } from "./routes.mjs";
 import { executeLifecycle, isCurrentPage, navigate } from "./helpers.mjs";
 
@@ -20,37 +19,37 @@ export const A = (
   const newProps = {
     href,
     ...props,
-  };
-
-  van.derive(() => {
-    if (isCurrentPage(href)) {
-      newProps["aria-current"] = "page";
-    }
-  });
-
-  const anchor = van.tags.a(newProps, [...(children || []), ...otherChildren]);
-  /* istanbul ignore else */
-  if (!setup.isServer) {
-    anchor.addEventListener("click", async (e) => {
+    onclick: async (e) => {
       e.preventDefault();
       /* istanbul ignore next */
       if (isCurrentPage(href)) return;
 
+      // istanbul ignore else
+      if (props.onclick) {
+        await props.onclick(e);
+      }
+
       const route = matchRoute(href);
       const module = await route.component();
       await executeLifecycle(module, route.params);
 
       navigate(href);
-    });
-
-    anchor.addEventListener("mouseenter", () => {
+    },
+    onmouseenter: () => {
       const route = matchRoute(href);
 
       /* istanbul ignore else */
       if (route?.component) {
         route.component();
       }
-    });
-  }
-  return anchor;
+    },
+  };
+
+  van.derive(() => {
+    if (isCurrentPage(href)) {
+      newProps["aria-current"] = "page";
+    }
+  });
+
+  return van.tags.a(newProps, children || otherChildren);
 };

package/router/cache.mjs

@@ -1,8 +1,9 @@
 /** @typedef {import("./types").ComponentModule} ComponentModule */
-/** @typedef {import("./types").GetCachedRoute} GetCachedRoute */
-/** @typedef {import("./types").CacheRoute} CacheRoute */
+/** @typedef {import("./types").ImportFn} ImportFn */
+/** @typedef {typeof import("./types").getCached} GetCachedRoute */
+/** @typedef {typeof import("./types").cache} CacheRoute */
 
-/** @type {Map<string, ComponentModule>} */
+/** @type {Map<ImportFn, ComponentModule>} */
 const routeCache = new Map();
 
 /** @type {GetCachedRoute} */