vite-plugin-vanjs 0.0.9 → 0.1.0

package/router/types.d.ts

@@ -12,22 +12,26 @@ import type {
   PropValueOrDerived,
   State,
 } from "vanjs-core";
+import { LayoutFile } from "../plugin/types";
 
 // type VanElement = VElement | Exclude<Primitive, boolean | undefined>;
-type DOMElement = globalThis.Element;
+// type DOMElement = globalThis.Element;
 type PrimitiveChild = Primitive | State<Primitive | undefined | null>;
 
-type VanElement =
+type DOMElement<T extends keyof HTMLElementTagNameMap = "div"> =
   | SVGElement
   | HTMLElement
-  | DOMElement
   | Node
+  | HTMLElementTagNameMap[T];
+
+export type VanElement =
+  | DOMElement
   | VElement
   | PrimitiveChild;
 export type VanNode =
   | VanElement
-  | VanNode[]
-  | (() => VanNode)
+  | VanElement[]
+  | (() => VanElement | VanElement[])
   | null
   | undefined;
 
@@ -70,6 +74,9 @@ export type VanComponent<
 export const Router:
   & VanComponent<"main">
   & JSX.Component<"main">;
+export const FileSystemRouter:
+  & VanComponent<"main">
+  & JSX.Component<"main">;
 
 // a.mjs
 /**
@@ -122,17 +129,51 @@ export const redirect: (href?: string) => void | (() => void);
 // routes.mjs
 export type RouteEntry = {
   path: string;
-  component: Promise<ComponentModule>;
-  preload?: (params?: Record<string, string>) => void;
-  load?: (params?: Record<string, string>) => void;
+  component: () => Promise<ComponentModule>;
+  // component: () => Promise<DynamicModule>;
+  params?: Record<string, string>;
+  preload?: (
+    params?: Record<string, string>,
+  ) => boolean | void | Promise<boolean | void>;
+  load?: (
+    params?: Record<string, string>,
+  ) => boolean | void | Promise<boolean | void>;
 };
 
+export type ImportFn = () => LazyComponent;
+
+/**
+ * Registers a lazy component.
+ * @param importFn
+ */
+export const lazy: (importFn: ImportFn) => () => Promise<ComponentModule>;
+
 export type RouteProps = {
   path: string;
-  component: VanComponent | (() => ComponentModule);
-  preload?: (params?: Record<string, string>) => void;
-  load?: (params?: Record<string, string>) => void;
+  params?: Record<string, string>;
+  component:
+    // | (() => HTMLElementTagNameMap[unknown] | HTMLElementTagNameMap[unknown][])
+    // | VanNode
+    | (() => DOMElement)
+    | VanComponent
+    | ComponentFn
+    | (() => Promise<DynamicModule>);
+  //   | ComponentModule["component"];
+  // component: ComponentFn | (() => Promise<ComponentModule>);
+  preload?: (
+    params?: Record<string, string>,
+  ) => boolean | void | Promise<boolean | void>;
+  load?: (
+    params?: Record<string, string>,
+  ) => boolean | void | Promise<boolean | void>;
 };
+
+export type RouteConfig = {
+  routePath: string;
+  path: string;
+  layouts?: LayoutFile[];
+};
+
 export const routes: RouteEntry[];
 
 /**
@@ -178,43 +219,79 @@ export const setRouterState: (
   params?: Record<string, string>,
 ) => void;
 
+export type UnwrapResult = {
+  children: VanNode[];
+};
+
 /**
  * Merge the children of an Element or an array of elements with an optional array of children
- * into the childen of a single HTMLFragmentElement element.
- * @param  source
- * @param  {...VanNode[]} children
+ * into the childen prperty of a simple object.
+ * @param source
+ * @param children
  */
+
 export const unwrap: (
   source:
     | VanNode
-    | IsoTagFunc
     | VanNode[]
-    | IsoTagFunc[]
-    | (() => IsoTagFunc | IsoTagFunc[] | VanNode | VanNode[]),
+    | VanComponent
+    | { children: VanNode[] }
+    | ComponentFn
+    | ReturnType<IsoTagFunc>
+    | ReturnType<IsoTagFunc>[]
+    | (() =>
+      | ReturnType<IsoTagFunc>
+      | ReturnType<IsoTagFunc>[]
+      | VanNode
+      | VanNode[]),
   ...children: VanNode[]
-) => VanNode;
+) => UnwrapResult;
+
+export type JSXComponentFn = () => JSX.Element;
+export type FragmentFn = () => ChildDom | ChildDom[];
+export type ComponentFn = FragmentFn | VanComponent | JSXComponentFn;
 
 export type ComponentModule = {
-  component: VanComponent | JSX.Element;
-  route: Pick<RouteEntry, "load" | "preload">;
+  component: ComponentFn;
+  route?: Pick<RouteEntry, "load" | "preload">;
 };
 
 export type DynamicModule = {
-  Page: VanComponent | JSX.Element;
-  default?: VanComponent | JSX.Element;
+  Page: ComponentFn;
+  default?: ComponentFn;
   route?: Pick<RouteEntry, "load" | "preload">;
 };
 
 export type LazyComponent = Promise<DynamicModule>;
 
-/**
- * Registers a lazy component.
- * @param importFn
- */
-export const lazy: (importFn: () => LazyComponent) => () => ComponentModule;
-
 /**
  * Fixes the URL of a route.
  * @param url
  */
 export const fixRouteUrl: (url: string) => string;
+
+/**
+ * Cache a route.
+ * @param key the cache route key
+ * @param value the cache route
+ */
+export const cache: (key: ImportFn, value: ComponentModule) => void;
+
+/**
+ * Return a route cache.
+ * @param key the cache route key
+ */
+export const getCached: (key: typeof importFn) => ComponentModule | undefined;
+
+/**
+ * Execute lifecycle methods preload and / or load
+ */
+export const executeLifecycle: (
+  { route }: ComponentModule,
+  params: Record<string, string> | undefined,
+) => Promise<boolean>;
+
+/**
+ * Find a registered route that matches the given path
+ */
+export const matchRoute: (path: string) => RouteEntry | null;

package/server/index.mjs

@@ -1,4 +1,5 @@
 import { basename } from "node:path";
+export * from "../plugin/helpers.mjs";
 
 /**
  * @type {typeof import("./types.d.ts").renderToString}
@@ -66,32 +67,54 @@ function renderPreloadLink(file) {
   }
 }
 
+/**
+ * @type {typeof import("./types.d.ts").renderPreloadLinks}
+ */
 /**
  * @type {typeof import("./types.d.ts").renderPreloadLinks}
  */
 export function renderPreloadLinks(modules, manifest) {
   let links = "";
   const seen = new Set();
+  const ignoredAssets = new Set();
+
+  // First pass: collect all assets from ignored paths
+  Object.entries(manifest).forEach(([id, files]) => {
+    // istanbul ignore else
+    if (["src/pages", "src/routes"].some((l) => id.includes(l))) {
+      files.forEach((asset) => ignoredAssets.add(asset));
+    }
+  });
+
+  // Second pass: generate preload links
   modules.forEach((id) => {
     const files = manifest[id];
-    /* istanbul ignore else */
+
+    // istanbul ignore else
     if (files?.length) {
       files.forEach((file) => {
-        /* istanbul ignore else */
-        if (!seen.has(file)) {
-          seen.add(file);
-          const filename = basename(file);
-          /* istanbul ignore next - impossible to test */
-          if (manifest[filename]) {
-            for (const depFile of manifest[filename]) {
+        // Skip if we've seen this file or if it's an asset from an ignored path
+        if (seen.has(file) || ignoredAssets.has(file)) return;
+
+        seen.add(file);
+        const filename = basename(file);
+
+        // Handle dependencies
+        // istanbul ignore next - no way to test this
+        if (manifest[filename]) {
+          for (const depFile of manifest[filename]) {
+            // istanbul ignore else
+            if (!seen.has(depFile) && !ignoredAssets.has(depFile)) {
               links += renderPreloadLink(depFile);
               seen.add(depFile);
             }
           }
-          links += renderPreloadLink(file);
         }
+
+        links += renderPreloadLink(file);
       });
     }
   });
+
   return links;
 }

package/server/types.d.ts

@@ -1,5 +1,6 @@
 /// <reference path="global.d.ts" />
 import type { Element as VanElement, TagFunc } from "mini-van-plate/van-plate";
+import { ResolvedConfig } from "vite";
 
 /**
  * A function that takes a list of files and a manifest and returns a string
@@ -36,3 +37,58 @@ export type Source =
  * @returns HTML string
  */
 export const renderToString: (source: Source) => Promise<string>;
+
+// FILE SYSTEM ROUTER
+/**
+ * Get the file most probable route path for a given potential route.
+ */
+export const fileToRoute: (file: string, routesDir: string) => string;
+
+export type PageFile = { path: string; routePath: string };
+export type LayoutFile = { id: string; path: string };
+export type RouteFile = PageFile & { layouts: Array<LayoutFile> };
+export type PluginConfig = { routesDir: string; extensions: string[] };
+/**
+ * Find all layout files for a given route.
+ */
+
+export const findLayouts: (
+  routePath: string,
+  config: ResolvedConfig,
+  pluginConfig: PluginConfig,
+) => Array<LayoutFile>;
+
+/**
+ * Identify all files in a folder.
+ */
+export const globFiles: (
+  dir: string,
+  extensions: string[],
+) => Promise<Array<string>>;
+
+/**
+ * Scan routes directory and generate routes.
+ */
+export const scanRoutes: (
+  config: ResolvedConfig,
+  pluginConfig: PluginConfig,
+) => Promise<
+  Array<{ path: string; routePath: string }>
+>;
+
+/**
+ * Process routes and identify their layouts
+ */
+export const processLayoutRoutes: (
+  routes: Array<PageFile>,
+  config: ResolvedConfig,
+  pluginConfig: PluginConfig,
+) => Array<PRouteFile>;
+
+/**
+ * Scan and process layouts and return them.
+ */
+export const getRoutes: (
+  config: ResolvedConfig,
+  pluginConfig: PluginConfig,
+) => Promise<Array<RouteFile>>;

package/setup/global.d.ts

@@ -5,49 +5,51 @@ declare module "@vanjs/van" {
 }
 
 declare module "@vanjs/vanX" {
-  import {
-    calc,
-    compact,
-    list,
-    noreactive,
-    raw,
-    reactive,
-    replace,
-    stateFields,
+  import type {
+    CalcFunction,
+    CompactFunction,
+    ListFunction,
+    NoreactiveFunction,
+    RawFunction,
+    ReactiveFunction,
+    ReplaceFunction,
+    StateFieldsFunction,
   } from "vanjs-ext";
-  const vanX: {
-    calc: typeof calc;
-    reactive: typeof reactive;
-    noreactive: typeof noreactive;
-    stateFields: typeof stateFields;
-    raw: typeof raw;
-    list: typeof list;
-    replace: typeof replace;
-    compact: typeof compact;
-  };
+  import type { VanXObj } from "mini-van-plate/shared";
+
+  export const calc: CalcFunction;
+  export const compact: CompactFunction;
+  export const list: ListFunction;
+  export const noreactive: NoreactiveFunction;
+  export const raw: RawFunction;
+  export const reactive: ReactiveFunction;
+  export const replace: ReplaceFunction;
+  export const stateFields: StateFieldsFunction;
+
+  // Define the vanX object type
+  interface VanXObject {
+    calc: CalcFunction;
+    reactive: ReactiveFunction;
+    noreactive: NoreactiveFunction;
+    stateFields: StateFieldsFunction;
+    raw: RawFunction;
+    list: ListFunction;
+    replace: ReplaceFunction;
+    compact: CompactFunction;
+    readonly default: VanXObject;
+  }
+  interface VanXPlate extends VanXObj {
+    readonly default: VanXObj;
+  }
+
+  const vanX: VanXObject | VanXPlate;
   export default vanX;
-  export {
-    calc,
-    compact,
-    list,
-    noreactive,
-    raw,
-    reactive,
-    replace,
-    stateFields,
-  };
 }
 
 declare module "@vanjs/setup" {
-  import type { Van } from "vanjs-core";
-  import type * as vanX from "vanjs-ext";
-  import type { dummyVanX } from "mini-van-plate/shared";
+  import van from "@vanjs/van";
+  import vanX from "@vanjs/vanX";
 
-  interface Setup {
-    isServer: boolean;
-    van: Van;
-    vanX: typeof vanX | typeof dummyVanX;
-  }
-  const setup: Setup;
-  export default setup;
+  const isServer: boolean;
+  export { isServer, van, vanX };
 }

package/setup/helpers.mjs

@@ -0,0 +1,7 @@
+/** @type {(props: Record<string, unknown>) => boolean} */
+export function needsHydration(props) {
+  return props && (
+    Object.keys(props).some((k) => k.startsWith("on")) || // has events
+    Object.values(props).some((v) => v && typeof v === "object" && "val" in v) // has state
+  );
+}

package/setup/index-debug.mjs

@@ -1,21 +1,9 @@
-import { dummyVanX, registerEnv } from "mini-van-plate/shared";
-import vanPlate from "mini-van-plate/van-plate";
-import vanCore from "vanjs-core/debug";
-import * as vanX from "vanjs-ext";
-
-const vanXObject = { ...vanX, default: vanX };
-const dummyObject = { ...dummyVanX, default: dummyVanX };
-
-const setup = {
-  isServer: typeof window === "undefined",
-  get van() {
-    return this.isServer ? vanPlate : vanCore;
-  },
-  get vanX() {
-    return this.isServer ? dummyObject : vanXObject;
-  },
+import van from "./van-debug.mjs";
+import vanX from "./vanX.mjs";
+import isServer from "./isServer.mjs";
+
+export default {
+  isServer,
+  van,
+  vanX,
 };
-
-registerEnv(setup);
-
-export default setup;

package/setup/index-ssr.mjs

@@ -0,0 +1,5 @@
+import van from "./van-ssr.mjs";
+import vanX from "./vanX-ssr.mjs";
+import isServer from "./isServer.mjs";
+
+export { isServer, van, vanX };

package/setup/index.mjs

@@ -1,21 +1,5 @@
-import { dummyVanX, registerEnv } from "mini-van-plate/shared";
-import vanPlate from "mini-van-plate/van-plate";
-import vanCore from "vanjs-core";
-import * as vanX from "vanjs-ext";
+import van from "./van.mjs";
+import vanX from "./vanX.mjs";
+import isServer from "./isServer.mjs";
 
-const vanXObject = { ...vanX, default: vanX };
-const dummyObject = { ...dummyVanX, default: dummyVanX };
-
-const setup = {
-  isServer: typeof window === "undefined",
-  get van() {
-    return this.isServer ? vanPlate : vanCore;
-  },
-  get vanX() {
-    return this.isServer ? dummyObject : vanXObject;
-  },
-};
-
-registerEnv(setup);
-
-export default setup;
+export { isServer, van, vanX };

package/setup/isServer.mjs

@@ -0,0 +1,2 @@
+const isServer = typeof window === "undefined";
+export default isServer;

package/setup/package.json

@@ -9,13 +9,29 @@
       "types": "./types.d.ts",
       "import": "./index.mjs"
     },
+    "./debug": {
+      "types": "./types.d.ts",
+      "import": "./index-debug.mjs"
+    },
     "./van": {
       "types": "./van.d.ts",
       "import": "./van.mjs"
     },
+    "./van-ssr": {
+      "types": "./van-ssr.d.ts",
+      "import": "./van-ssr.mjs"
+    },
+    "./van-debug": {
+      "types": "./van.d.ts",
+      "import": "./van-debug.mjs"
+    },
     "./vanX": {
       "types": "./vanX.d.ts",
       "import": "./vanX.mjs"
+    },
+    "./vanX-ssr": {
+      "types": "./vanX.d.ts",
+      "import": "./vanX-ssr.mjs"
     }
   },
   "peerDependencies": {

package/setup/van-debug.mjs

@@ -1,2 +1,2 @@
-import setup from "./index-debug.mjs";
-export default setup.van;
+import van from "vanjs-core/debug";
+export default van;

package/setup/van-ssr..d.ts

@@ -0,0 +1 @@
+export * from "mini-van-plate/van-plate";

package/setup/van-ssr.mjs

@@ -0,0 +1,51 @@
+// setup/van-ssr.mjs
+import { registerEnv } from "mini-van-plate/shared";
+import van from "mini-van-plate/van-plate";
+import { needsHydration } from "./helpers.mjs";
+
+function tagWithHydration(ns, name, ...args) {
+  const originalTag = ns ? van.tags(ns)[name] : van.tags[name];
+
+  const [props, ...children] =
+    Object.getPrototypeOf(args[0] ?? /* istanbul ignore next */ 0) ===
+        Object.prototype
+      ? args
+      : [{}, ...args];
+
+  // Create new props object without event handlers
+  const finalProps = { ...props };
+
+  if (needsHydration(props)) {
+    // Add data-hk for hydration
+    finalProps["data-hk"] = "";
+
+    // Remove all inline event handlers for server rendering
+    for (const key in finalProps) {
+      if (key.startsWith("on")) {
+        delete finalProps[key];
+      }
+    }
+  }
+
+  // Use filtered props for server rendering
+  return originalTag(finalProps, ...children);
+}
+
+const tagsProxy = new Proxy(
+  (ns) =>
+    new Proxy(tagWithHydration.bind(undefined, ns), {
+      get: (_, name) => tagWithHydration.bind(undefined, ns, name),
+    }),
+  {
+    get: (_, name) => tagWithHydration.bind(undefined, undefined, name),
+  },
+);
+
+const vanSSR = {
+  ...van,
+  tags: tagsProxy,
+};
+
+registerEnv({ van: vanSSR });
+
+export default vanSSR;

package/setup/van.mjs

@@ -1,2 +1,44 @@
-import setup from "./index.mjs";
-export default setup.van;
+// setup/van.mjs
+import van from "vanjs-core";
+import { needsHydration } from "./helpers.mjs";
+
+// Create our own tag function that wraps the original
+function tagWithHydration(ns, name, ...args) {
+  // Get the correct tag function based on namespace
+  const originalTag = ns ? van.tags(ns)[name] : van.tags[name];
+
+  const [props, ...children] =
+    Object.getPrototypeOf(args[0] ?? 0) === Object.prototype
+      ? args
+      : [{}, ...args];
+
+  // Create new props object without event handlers
+  const finalProps = { ...props };
+
+  // Add data-hk if element needs hydration
+  if (needsHydration(props)) {
+    finalProps["data-hk"] = "";
+  }
+
+  // Call the original tag function
+  return originalTag(finalProps, ...children);
+}
+
+// Create our tags proxy using the same pattern as vanjs-core
+const tagsProxy = new Proxy(
+  (ns) =>
+    new Proxy(tagWithHydration.bind(undefined, ns), {
+      get: (_, name) => tagWithHydration.bind(undefined, ns, name),
+    }),
+  {
+    get: (_, name) => tagWithHydration.bind(undefined, undefined, name),
+  },
+);
+
+// Export modified van instance with only tags overridden
+const vanClient = {
+  ...van,
+  tags: tagsProxy,
+};
+
+export default vanClient;

package/setup/vanX-ssr.d.ts

@@ -0,0 +1 @@
+export * from "mini-van-plate/van-plate";

package/setup/vanX-ssr.mjs

@@ -0,0 +1,12 @@
+import { dummyVanX, registerEnv } from "mini-van-plate/shared";
+
+const vanX = {
+  ...dummyVanX,
+  get default() {
+    return dummyVanX;
+  },
+};
+
+registerEnv({ vanX });
+
+export default vanX;