vite-plugin-vanjs 0.0.3 → 0.0.5

package/router/index.mjs

@@ -0,0 +1,7 @@
+export * from "./router.mjs";
+export * from "./routes.mjs";
+export * from "./a.mjs";
+export * from "./state.mjs";
+export * from "./lazy.mjs";
+export * from "./helpers.mjs";
+export * from "./cache.mjs";

package/router/lazy.mjs

@@ -0,0 +1,60 @@
+import setup from "@vanjs/setup";
+import van from "vanjs-core";
+import { cache, getCached } from "./cache.mjs";
+
+/** @typedef {import('./types').VanNode} VanNode */
+/** @typedef {import('./types').ComponentModule} ComponentModule */
+
+/**
+ * Registers a lazy component.
+ * @param {Promise<VanNode>} importFn
+ * @returns {ComponentModule | Promise<ComponentModule>}
+ */
+export const lazy = (importFn) => {
+  if (setup.isServer) {
+    return async () => {
+      const cached = getCached(importFn);
+      /* istanbul ignore next */
+      if (cached) {
+        return cached;
+      }
+      const module = await importFn();
+      const component = module.Page || module.default;
+      const result = { component, route: module.route };
+
+      cache(importFn, result);
+      return result;
+    };
+  }
+
+  let initialized = false;
+  const component = van.state(() => "");
+  const route = van.state({});
+
+  const load = () => {
+    if (initialized) return;
+
+    const cached = getCached(importFn);
+    /* istanbul ignore next */
+    if (cached) {
+      component.val = cached.component;
+      route.val = cached.route;
+      return;
+    }
+
+    initialized = true;
+    importFn().then((module) => {
+      const comp = module.Page || module.default;
+      cache(importFn, { component: comp, route: module.route });
+      component.val = comp;
+      route.val = module.route;
+    });
+  };
+
+  const lazyComponent = () => {
+    load();
+    return { component: component.val(), route: route.val };
+  };
+  lazyComponent.isLazy = true;
+  return lazyComponent;
+};

package/router/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "router",
+  "main": "./index.mjs",
+  "module": "./index.mjs",
+  "types": "./types.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./types.d.ts",
+      "import": "./index.mjs"
+    }
+  },
+  "peerDependencies": {
+    "vite-plugin-vanjs": "*",
+    "vanjs-core": "*",
+    "vanjs-ext": "*"
+  },
+  "sideEffects": false
+}

package/router/router.mjs

@@ -0,0 +1,43 @@
+import van from "vanjs-core";
+import setup from "@vanjs/setup";
+import { routerState } from "./state.mjs";
+import { matchRoute } from "./routes.mjs";
+import { executeLifecycle, unwrap } from "./helpers.mjs";
+
+export const Router = () => {
+  const { div } = van.tags;
+  // const meta = defaultMeta();
+
+  const mainLayout = () => {
+    const route = matchRoute(routerState.pathname.val);
+    /* istanbul ignore else */
+    if (!route) return div("404 - Not Found");
+
+    routerState.params.val = route.params || {};
+    // Server-side or async component: use renderComponent
+    if (setup.isServer) {
+      const renderComponent = async () => {
+        try {
+          const module = await route.component();
+          const component = module.component();
+          await executeLifecycle(module, route.params);
+          return unwrap(component).children;
+        } catch (error) {
+          /* istanbul ignore next */
+          console.error("Router error:", error);
+          /* istanbul ignore next */
+          return div("Error loading page");
+        }
+      };
+
+      return renderComponent();
+    }
+
+    const module = route.component();
+    // Client-side lazy component, lifeCycle is already executed on the server
+    // or when A component has been clicked in the client
+    return unwrap(module.component);
+  };
+
+  return mainLayout();
+};

package/router/routes.mjs

@@ -0,0 +1,51 @@
+// router/routes.mjs
+import { extractParams, isLazyComponent } from "./helpers.mjs";
+import { lazy } from "./lazy.mjs";
+
+/** @typedef {import("./types.d.ts").RouteEntry} RouteEntry */
+/** @typedef {import("./types.d.ts").RouteProps} RouteProps */
+
+/** @type {RouteEntry[]} */
+export const routes = [];
+
+/**
+ * @param {RouteProps} routeProps
+ */
+export const Route = (routeProps) => {
+  const { component, preload, load, ...rest } = routeProps;
+
+  // If component has lifecycle methods but isn't lazy, make it lazy
+  if (!isLazyComponent(component)) {
+    const wrappedComponent = lazy(() =>
+      Promise.resolve({
+        default: component,
+        route: { preload, load },
+      })
+    );
+    routes.push({ ...rest, component: wrappedComponent });
+    return;
+  }
+
+  // Otherwise keep original component
+  routes.push(routeProps);
+};
+
+/**
+ * Find a registered route that matches the given path
+ * @param {string} path
+ * @returns {RouteEntry | null}
+ */
+export const matchRoute = (path) => {
+  const exactMatch = routes.find((r) => r.path === path);
+  if (exactMatch) return { ...exactMatch, params: {} };
+
+  for (const route of routes) {
+    if (route.path === "*") continue;
+    const params = extractParams(route.path, path);
+    if (params) {
+      return { ...route, params };
+    }
+  }
+
+  return routes.find((r) => r.path === "*") || null;
+};

package/router/state.mjs

@@ -0,0 +1,27 @@
+// router/state.js
+import van from "vanjs-core";
+import setup from "@vanjs/setup";
+
+const initialPath = !setup.isServer ? globalThis.location.pathname : "/";
+const initialSearch = !setup.isServer ? globalThis.location.search : "";
+
+/**
+ * @type {typeof import("./types.d.ts").routerState}
+ */
+export const routerState = {
+  pathname: van.state(initialPath),
+  searchParams: van.state(new URLSearchParams(initialSearch)),
+  params: van.state({}),
+};
+
+/**
+ * @type {typeof import("./types.d.ts").setRouterState}
+ */
+export const setRouterState = (path, search = undefined, params) => {
+  const [pathname, searchParams] = path.split("?");
+  routerState.pathname.val = pathname;
+  routerState.searchParams.val = new URLSearchParams(
+    search || searchParams || "",
+  );
+  routerState.params.val = params || {};
+};

package/router/types.d.ts

@@ -0,0 +1,156 @@
+/// <reference path="global.d.ts" />
+import type { Element } from "mini-van-plate/van-plate";
+import van from "vanjs-core";
+import type { PropsWithKnownKeys } from "vanjs-core";
+
+type VanElement = Element & { children: VanNode[] };
+type VanNode = SVGElement | HTMLElement | VanElement;
+
+// router.mjs
+/**
+ * A virtual component that renders the current route
+ * in your VanJS application. It must be used in your main component.
+ *
+ * @example
+ * import { Router } from '@vanjs/router';
+ *
+ * export const App = () => {
+ *   return Router(); // or <Router /> for JSX
+ * }
+ */
+export const Router: () => VanNode | VanNode[];
+
+// a.mjs
+/**
+ * A virtual component that creates an anchor element
+ * that navigates to the specified href when clicked.
+ *
+ * @example
+ * import { A } from '@vanjs/router';
+ * import van from 'vanjs-core';
+ *
+ * export const Navigation = () => {
+ *   const { nav } = van.tags
+ *   return nav(
+ *     A({ href="/" }, "Home"), // or <A href="/">Home</A> with JSX
+ *     A({ href="/about" }, "About"), // or <A href="/about">About</A> with JSX
+ *     // ...other children
+ *   );
+ * }
+ */
+export const A: (
+  props: PropsWithKnownKeys<HTMLAnchorProps>,
+  ...children: (Element | Node | string)[]
+) => HTMLAnchorElement;
+
+// helpers.mjs
+/**
+ * Navigates to the specified href in the client and sets the router state.
+ * Keep in mind that the router handles the search params and hash.
+ *
+ * @param href the URL to navigate to
+ * @param options when true, will replace the current history entry
+ */
+export const navigate: (href: string, options?: { replace?: boolean }) => void;
+
+/**
+ * A client only helper function that reloads the current page.
+ */
+export const reload: () => void;
+
+/**
+ * A helper function that redirects the user to the specified href.
+ * When called in the server, it will return a function that will redirect the user
+ * to the specified href when called.
+ * @param {string | undefined} href the URL to redirect to
+ */
+export const redirect: (href?: string) => void | (() => void);
+
+export type VanComponent = () => VanNode | VanNode[];
+
+// routes.mjs
+export type RouteEntry = {
+  path: string;
+  component: Promise<ComponentModule>;
+  preload?: (params?: Record<string, string>) => void;
+  load?: (params?: Record<string, string>) => void;
+};
+
+export type RouteProps = {
+  path: string;
+  component: VanComponent | (() => ComponentModule);
+  preload?: (params?: Record<string, string>) => void;
+  load?: (params?: Record<string, string>) => void;
+};
+export const routes: RouteEntry[];
+
+/**
+ * Registers a new route in the router state.
+ * @param route the route to register
+ *
+ * @example
+ * import { Route, lazy } from '@vanjs/router';
+ * import Home from './pages/Home';
+ * import NotFound from './pages/NotFound';
+ *
+ * Route({ path: '/', component: Home });
+ * Route({ path: '/about', component: lazy(() => import("./pages/About.ts")) });
+ * Route({ path: '*', component: NotFound });
+ */
+export const Route: (route: RouteProps) => void;
+
+// state.mjs
+export type RouterState = {
+  pathname: string;
+  searchParams: URLSearchParams;
+  params?: Record<string, string>;
+};
+/**
+ * A reactive object that holds the current router state.
+ * This state is maintained by both server and client.
+ */
+export const routerState: {
+  pathname: van.state<RouterState.pathname>;
+  searchParams: van.state<RouterState.searchParams>;
+  params?: van.state<RouterState.params>;
+};
+
+/**
+ * Sets the router state to the specified href.
+ * @param href the URL to navigate to
+ * @param search the search string
+ * @param params the route params object
+ */
+export const setRouterState: (
+  href: string,
+  search?: string,
+  params?: Record<string, string>,
+) => void;
+
+/**
+ * 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 children
+ */
+export const unwrap: (
+  source: VanNode | VanNode[] | (() => VanNode | VanNode[]),
+  ...children: VanNode[]
+) => VanNode;
+
+export type ComponentModule = {
+  component: VanComponent;
+  route: Pick<RouteEntry, "load" | "preload">;
+};
+
+export type DynamicModule = {
+  Page: VanComponent;
+  default?: VanComponent;
+  route?: Pick<RouteEntry, "load" | "preload">;
+};
+
+export type LazyComponent =
+  | Promise<DynamicModule>
+  | (() => Promise<DynamicModule>);
+
+export const lazy: (importFn: () => LazyComponent) => () => ComponentModule;

package/server/global.d.ts

@@ -0,0 +1,49 @@
+declare module "@vanjs/server" {
+  import type { PropsWithKnownKeys } from "vanjs-core";
+  import type { SupportedTags } from "@vanjs/meta";
+  import type { JSX } from "@vanjs/jsx";
+  import type {
+    Element as VanElement,
+    TagFunc,
+  } from "mini-van-plate/van-plate";
+
+  /**
+   * A function that takes a list of files and a manifest and returns a string
+   * representing the HTML markup for preload links.
+   * @param files the list of files
+   * @param manifest the vite manifest
+   * @returns HTML string
+   */
+  export const renderPreloadLinks: (
+    files: string[],
+    manifest: Record<string, string[]>,
+  ) => string;
+
+  type ValidVanNode =
+    | boolean
+    | number
+    | string
+    | VanElement
+    | TagFunc;
+
+  type VanComponent = () =>
+    | ValidVanNode
+    | ValidVanNode[]
+    | SupportedTags
+    | SupportedTags[];
+  export type Source =
+    | JSX.Element
+    | VanComponent
+    | (() => VanComponent)
+    | Promise<ValidVanNode>
+    | ValidVanNode
+    | undefined;
+
+  /**
+   * A function that takes a multitude of source types and returns a string
+   * representing the HTML output.
+   * @param source the source
+   * @returns HTML string
+   */
+  export const renderToString: (source: Source) => Promise<string>;
+}

package/server/index.mjs

@@ -0,0 +1,97 @@
+import { basename } from "node:path";
+
+/**
+ * @type {typeof import("./types.d.ts").renderToString}
+ */
+export const renderToString = async (inputSource) => {
+  const source = typeof inputSource === "function"
+    ? inputSource()
+    : inputSource;
+  if (typeof source === "number") {
+    return String(source);
+  }
+  if (typeof source === "string") {
+    return source.trim();
+  }
+  if (typeof source === "boolean") {
+    return String(source);
+  }
+  if (typeof source === "object" && "render" in source) {
+    return source.render();
+  }
+  if (source instanceof Promise) {
+    return renderToString(await source);
+  }
+  /* istanbul ignore else */
+  if (Array.isArray(source)) {
+    const elements = [];
+    for (const el of source) {
+      elements.push(await renderToString(el));
+    }
+    return elements.join("");
+  }
+  // return String(source)
+
+  // no source provided
+  // @ts-ignore - this is server side code
+  console.warn("Render error! Source not recognized: " + source);
+  return "";
+};
+
+/**
+ * @param {string} file
+ * @returns {string}
+ */
+function renderPreloadLink(file) {
+  if (file.endsWith(".js") || file.endsWith(".mjs")) {
+    return `<link rel="modulepreload" as="script" crossorigin href="${file}">`;
+  } else if (file.endsWith(".css")) {
+    return `<link rel="stylesheet" href="${file}">`;
+  } else if (file.endsWith(".woff")) {
+    return ` <link rel="preload" href="${file}" as="font" type="font/woff" crossorigin>`;
+  } else if (file.endsWith(".woff2")) {
+    return ` <link rel="preload" href="${file}" as="font" type="font/woff2" crossorigin>`;
+  } else if (file.endsWith(".gif")) {
+    return ` <link rel="preload" href="${file}" as="image" type="image/gif">`;
+  } else if (file.endsWith(".jpg") || file.endsWith(".jpeg")) {
+    return ` <link rel="preload" href="${file}" as="image" type="image/jpeg">`;
+  } else if (file.endsWith(".png")) {
+    return ` <link rel="preload" href="${file}" as="image" type="image/png">`;
+  } else if (file.endsWith(".webp")) {
+    return ` <link rel="preload" href="${file}" as="image" type="image/webp">`;
+  } else {
+    // @ts-ignore - this is server side code
+    console.warn("Render error! File format not recognized: " + file);
+    return "";
+  }
+}
+
+/**
+ * @type {typeof import("./types.d.ts").renderPreloadLinks}
+ */
+export function renderPreloadLinks(modules, manifest) {
+  let links = "";
+  const seen = new Set();
+  modules.forEach((id) => {
+    const files = manifest[id];
+    /* 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]) {
+              links += renderPreloadLink(depFile);
+              seen.add(depFile);
+            }
+          }
+          links += renderPreloadLink(file);
+        }
+      });
+    }
+  });
+  return links;
+}

package/server/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "server",
+  "main": "./index.mjs",
+  "module": "./index.mjs",
+  "types": "./types.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./types.d.ts",
+      "import": "./index.mjs"
+    }
+  },
+  "peerDependencies": {
+    "vite-plugin-vanjs": "*",
+    "mini-van-plate": "*",
+    "vanjs-core": "*",
+    "vanjs-ext": "*"
+  },
+  "sideEffects": false
+}

package/server/types.d.ts

@@ -0,0 +1,38 @@
+/// <reference path="global.d.ts" />
+import type { Element as VanElement, TagFunc } from "mini-van-plate/van-plate";
+
+/**
+ * A function that takes a list of files and a manifest and returns a string
+ * representing the HTML markup for preload links.
+ * @param files the list of files
+ * @param manifest the vite manifest
+ * @returns HTML string
+ */
+export const renderPreloadLinks: (
+  files: string[],
+  manifest: Record<string, string[]>,
+) => string;
+
+type ValidVanNode =
+  | boolean
+  | number
+  | string
+  | VanElement
+  | TagFunc;
+
+type VanComponent = () => ValidVanNode | ValidVanNode[];
+export type Source =
+  | Promise<ValidVanNode>
+  | VanComponent
+  | (() => VanComponent)
+  | ValidVanNode
+  | ValidVanNode[]
+  | undefined;
+
+/**
+ * A function that takes a multitude of source types and returns a string
+ * representing the HTML output.
+ * @param source the source
+ * @returns HTML string
+ */
+export const renderToString: (source: Source) => Promise<string>;

package/setup/package.json

@@ -2,11 +2,11 @@
   "name": "setup",
   "main": "./index.mjs",
   "module": "./index.mjs",
-  "types": "./index.d.ts",
+  "types": "./types.d.ts",
   "type": "module",
   "exports": {
     ".": {
-      "types": "./index.d.ts",
+      "types": "./types.d.ts",
       "import": "./index.mjs"
     },
     "./van": {

package/setup/van.d.ts

@@ -0,0 +1 @@
+export type { Van } from "vanjs-core";

package/setup/vanX.d.ts

@@ -0,0 +1 @@
+export * from "vanjs-ext";

package/setup/vanX.mjs

@@ -10,5 +10,5 @@ export const {
   list,
   replace,
   compact,
-} = "default" in vanX ? vanX.default : vanX;
+} = "default" in vanX ? vanX.default : /* istanbul ignore next */ vanX;
 export default vanX;

package/src/index.mjs

@@ -10,42 +10,42 @@ export default function VitePluginVanJS() {
     enforce: "pre",
     config() {
       return {
-        build: {
-          optimizeDeps: {
-            include: ["vanjs-core", "vanjs-ext", "mini-van-plate"],
-          },
-          dedupe: ["vanjs-core", "vanjs-ext", "mini-van-plate"],
-        },
         resolve: {
           alias: {
-            "@vanjs/jsx": resolve(__dirname, "../jsx"),
             "@vanjs/setup": resolve(__dirname, "../setup"),
             "@vanjs/van": resolve(__dirname, "../setup/van"),
             "@vanjs/vanX": resolve(__dirname, "../setup/vanX"),
+            "@vanjs/client": resolve(__dirname, "../client"),
+            "@vanjs/server": resolve(__dirname, "../server"),
+            "@vanjs/meta": resolve(__dirname, "../meta"),
+            "@vanjs/router": resolve(__dirname, "../router"),
+            "@vanjs/jsx": resolve(__dirname, "../jsx"),
           },
         },
         esbuild: {
           jsx: "automatic",
-          jsxFactory: "jsx",
-          jsxFragment: "Fragment",
+          jsxImportSource: "@vanjs/jsx",
         },
       };
     },
     transform(code, id) {
-      let newCode = code;
+      let newCode = String(code);
 
       const vanCoreReg = /import\s*.*\s*from\s*['"]vanjs-core['"]/g;
       const vanExtReg = /import\s*.*\s*from\s*['"]vanjs-ext['"]/g;
       const isSetupFile = /vite-plugin-vanjs[\\/]setup/.test(id);
       const isVanXFile = /vanjs-ext[\\/]src[\\/]van-x/.test(id);
 
+      /* istanbul ignore else */
       if (!isSetupFile && !isVanXFile) {
+        /* istanbul ignore next - the plugin works, istanbul isn't instrumenting this part properly */
         if (vanCoreReg.test(newCode)) {
           newCode = newCode.replace(
             vanCoreReg,
             (match) => match.replace("vanjs-core", "@vanjs/van"),
           );
         }
+        /* istanbul ignore next - the plugin works, istanbul isn't instrumenting this part properly */
         if (vanExtReg.test(newCode)) {
           newCode = newCode.replace(
             vanExtReg,