vite-plugin-vanjs 0.0.3 → 0.0.5

package/meta/helpers.mjs

@@ -0,0 +1,52 @@
+import setup from "@vanjs/setup";
+
+/** @type {import('./types.d.ts').ParseAttributes} */
+export const parseAttributes = (attributeString) => {
+  /** @type {Record<string, string>} */
+  const attributes = {};
+  const attributeRegex = /([a-zA-Z0-9_-]+)(?:="([^"]*?)")?/g;
+  let match;
+
+  while ((match = attributeRegex.exec(attributeString)) !== null) {
+    const name = match[1];
+    const value = match[2] || /* istanbul ignore next */ "";
+    attributes[name] = value;
+  }
+
+  return attributes;
+};
+
+/** @type {typeof import('./types.d.ts').getTagAttribute} */
+const getTagAttribute = (tag) => {
+  const attributes = [
+    "name",
+    "property",
+    "charset",
+    "viewport",
+    "media",
+    "http-equiv",
+    "rel",
+    "src",
+    "href",
+    "id",
+  ];
+
+  for (const attr of attributes) {
+    const value = setup.isServer ? tag[attr] : tag.getAttribute(attr);
+
+    if (value) return value;
+  }
+  return "";
+};
+
+/** @type {import('./types.d.ts').GetTagKey} */
+export const getTagKey = (tag) => {
+  const normalizedTag = setup.isServer
+    ? { tagName: tag.name.toUpperCase(), ...parseAttributes(tag.propsStr) }
+    : tag;
+
+  return normalizedTag.tagName +
+    (normalizedTag.tagName !== "TITLE"
+      ? `.${getTagAttribute(normalizedTag)}`
+      : "");
+};

package/meta/index.mjs

@@ -0,0 +1,3 @@
+export * from "./Head.mjs";
+export * from "./tags.mjs";
+export * from "./helpers.mjs";

package/meta/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "meta",
+  "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": "*"
+  },
+  "sideEffects": false
+}

package/meta/tags.mjs

@@ -0,0 +1,57 @@
+import van from "vanjs-core";
+import { addMeta } from "./Head.mjs";
+
+/** @typedef {import("vanjs-core").PropsWithKnownKeys} PropsWithKnownKeys */
+/** @typedef {import("./types.d.ts").TagProps} TagProps */
+
+/**
+ * Add a new title tag
+ * @type {(props: PropsWithKnownKeys<HTMLTitleElement>, content?: string) => null}
+ */
+export const Title = (props, content) => {
+  const { title } = van.tags;
+  addMeta(title(props, content));
+  return null;
+};
+
+/**
+ * Add a new meta tag
+ * @type {(props: PropsWithKnownKeys<HTMLMetaElement>) => null}
+ */
+export const Meta = (props) => {
+  const { meta } = van.tags;
+  addMeta(meta(props));
+  return null;
+};
+
+/**
+ * Add a new link tag
+ * @type {(props: PropsWithKnownKeys<HTMLLinkElement>) => null}
+ */
+export const Link = (props) => {
+  const { link } = van.tags;
+  addMeta(link(props));
+  return null;
+};
+
+/**
+ * Add a new script tag
+ * @type {(props: PropsWithKnownKeys<HTMLScriptElement>, content?: string) => null}
+ */
+export const Script = (props, content) => {
+  const { script } = van.tags;
+  //   const realContent = content ? content.toString() : props;
+  //   const realProps = content ? props : props;
+  addMeta(script(props, content));
+  return null;
+};
+
+/**
+ * Add a new style tag
+ * @type {(props: PropsWithKnownKeys<HTMLStyleElement>, content: string) => null}
+ */
+export const Style = (props, content) => {
+  const { style } = van.tags;
+  addMeta(style(props, content));
+  return null;
+};

package/meta/types.d.ts

@@ -0,0 +1,36 @@
+/// <reference path="global.d.ts" />
+import { type PropsWithKnownKeys } from "vanjs-core";
+import { type TagFunc } from "mini-van-plate/van-plate";
+
+export const createHeadTags: () => Map<
+  string,
+  SupportedTags | TagFunc<SupportedTags>
+>;
+
+export const getHeadTags = () =>
+  Map<string, SupportedTags | TagFunc<SupportedTags>>;
+export const resetHeadTags: () => void;
+export const initializeHeadTags: () => void;
+
+export type SupportedTags =
+  | HTMLTitleElement
+  | HTMLMetaElement
+  | HTMLScriptElement
+  | HTMLLinkElement
+  | HTMLStyleElement;
+
+export type TagProps = SupportedTags | PropsWithKnownKeys<SupportedTags>;
+
+export type HeadTags = SupportedTags[] | TagFunc<SupportedTags>[];
+
+export type AddMeta = (tag: string | TagProps) => null;
+
+export declare const Head: () => HeadTags;
+
+export type ParseAttributes = (
+  attributeString: string,
+) => Record<string, string>;
+
+export const getTagAttribute: (tag: TagProps) => string;
+
+export const getTagKey: (tag: TagProps) => string;

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "vite-plugin-vanjs",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "author": "thednp",
   "license": "MIT",
-  "description": "A Vite plugin for VanJS to enable JSX transformation and simplify aplication development.",
+  "description": "A mini meta-framework for VanJS powered by Vite",
   "repository": "https://github.com/thednp/vite-plugin-vanjs",
   "type": "module",
   "sideEffects": false,
@@ -13,6 +13,10 @@
   "files": [
     "src",
     "setup",
+    "router",
+    "meta",
+    "client",
+    "server",
     "jsx",
     "tsconfig.json",
     "package.json",
@@ -25,6 +29,8 @@
     "vanjs",
     "vite",
     "plugin",
+    "router",
+    "meta",
     "ssr",
     "ssg",
     "jsx"
@@ -36,12 +42,27 @@
       "default": "./src/index.mjs"
     },
     "./setup": {
-      "types": "./setup/index.d.ts",
-      "import": "./setup/index.mjs",
-      "require": "./setup/index.cjs"
+      "types": "./setup/types.d.ts",
+      "import": "./setup/index.mjs"
+    },
+    "./router": {
+      "types": "./router/types.d.ts",
+      "import": "./router/index.mjs"
+    },
+    "./meta": {
+      "types": "./meta/types.d.ts",
+      "import": "./meta/index.mjs"
+    },
+    "./server": {
+      "types": "./server/types.d.ts",
+      "import": "./server/index.mjs"
+    },
+    "./client": {
+      "types": "./client/types.d.ts",
+      "import": "./client/index.mjs"
     },
     "./jsx": {
-      "types": "./jsx/index.d.ts",
+      "types": "./jsx/types.d.ts",
       "import": "./jsx/index.mjs"
     },
     "./jsx-runtime": {
@@ -61,20 +82,31 @@
   },
   "dependencies": {
     "csstype": "^3.1.3",
-    "mini-van-plate": "^0.6.1",
-    "vanjs-core": "^1.5.2",
+    "mini-van-plate": "^0.6.3",
+    "vanjs-core": "^1.5.3",
     "vanjs-ext": "^0.6.2"
   },
   "devDependencies": {
+    "@vitest/browser": "^3.0.4",
+    "@vitest/coverage-istanbul": "^3.0.4",
+    "@vitest/ui": "^3.0.4",
+    "happy-dom": "^16.7.3",
     "typescript": "5.6.2",
-    "vite": "^6.0.6"
+    "vite": "^6.0.11",
+    "vitest": "^3.0.4"
+  },
+  "engines": {
+    "node": ">=20",
+    "pnpm": ">=8.6.0"
   },
   "scripts": {
-    "badges": "npx -p dependency-version-badge update-badge vanjs-core mini-van-plate typescript vite",
-    "format": "deno fmt src setup jsx",
+    "test": "vitest --config vitest.config.mts",
+    "test-ui": "vitest --config vitest.config.mts --ui=true",
+    "badges": "npx -p dependency-version-badge update-badge vanjs-core mini-van-plate typescript vitest vite",
+    "format": "deno fmt src meta router setup client server jsx",
     "lint": "pnpm lint:ts && pnpm check:ts",
-    "lint:ts": "deno lint src",
-    "fix:ts": "deno lint src --fix",
+    "lint:ts": "deno lint src meta router setup client server jsx",
+    "fix:ts": "deno lint src meta router setup client server jsx --fix",
     "check:ts": "tsc -noEmit"
   }
 }

package/router/a.mjs

@@ -0,0 +1,50 @@
+// router/a.mjs
+import van from "vanjs-core";
+import setup from "@vanjs/setup";
+import { matchRoute } from "./routes.mjs";
+import { executeLifecycle, isCurrentPage, navigate } from "./helpers.mjs";
+
+/**
+ * @param {Partial<HTMLAnchorElement>} props
+ * @param  {...(Element | Node)[]} children
+ * @returns {HTMLAnchorElement}
+ */
+export const A = (props, ...children) => {
+  const { href, ...rest } = props;
+  const newProps = {
+    href,
+    ...rest,
+  };
+
+  van.derive(() => {
+    if (isCurrentPage(href)) {
+      newProps["aria-current"] = "page";
+    }
+  });
+
+  const anchor = van.tags.a(newProps, ...children);
+  /* istanbul ignore else */
+  if (!setup.isServer) {
+    anchor.addEventListener("click", async (e) => {
+      e.preventDefault();
+      /* istanbul ignore next */
+      if (isCurrentPage(href)) return;
+
+      const route = matchRoute(href);
+      const module = await route.component();
+      await executeLifecycle(module, route.params);
+
+      navigate(href);
+    });
+
+    anchor.addEventListener("mouseenter", () => {
+      const route = matchRoute(href);
+
+      /* istanbul ignore else */
+      if (route?.component) {
+        route.component();
+      }
+    });
+  }
+  return anchor;
+};

package/router/cache.mjs

@@ -0,0 +1,14 @@
+/** @typedef {import("./types").ComponentModule} ComponentModule */
+/** @typedef {import("./types").GetCachedRoute} GetCachedRoute */
+/** @typedef {import("./types").CacheRoute} CacheRoute */
+
+/** @type {Map<string, ComponentModule>} */
+const routeCache = new Map();
+
+/** @type {GetCachedRoute} */
+export const getCached = (key) => routeCache.get(key);
+
+/** @type {CacheRoute} */
+export const cache = (key, value) => {
+  routeCache.set(key, value);
+};

package/router/global.d.ts

@@ -0,0 +1,162 @@
+declare module "@vanjs/router" {
+  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  {...VanNode[]} 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>;
+
+  /**
+   * Registers a lazy component.
+   * @param importFn
+   */
+  export const lazy: (importFn: () => LazyComponent) => () => ComponentModule;
+}

package/router/helpers.mjs

@@ -0,0 +1,198 @@
+import setup from "@vanjs/setup";
+import van from "vanjs-core";
+import { routerState, setRouterState } from "./state.mjs";
+import { matchRoute } from "./routes.mjs";
+
+/** @typedef {import("./types.d.ts").Route} Route */
+/** @typedef {import("./types.d.ts").VanNode} VanNode */
+/** @typedef {import("./types.d.ts").ComponentModule} ComponentModule */
+/** @typedef {import('vanjs-core').TagFunc} TagFunc */
+
+/**
+ * Check if selected page is the current page;
+ * @param {string} pageName
+ * @returns {boolean}
+ */
+export const isCurrentPage = (pageName) => {
+  return routerState.pathname.val === pageName;
+};
+
+/**
+ * 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 {Element | () => Element | Element[]} source
+ * @param  {...Element[]} children
+ * @returns {TagFunc<HTMLFragmentElement> | HTMLElement}
+ */
+export const unwrap = (source, ...children) => {
+  const layout = () => {
+    const pageChildren = Array.isArray(source?.children)
+      ? source.children
+      : typeof source === "function"
+      ? [...source()?.children || source()]
+      : typeof HTMLElement !== "undefined" && source instanceof HTMLElement
+      ? [...source.children]
+      : Array.isArray(source)
+      ? source
+      : [source];
+
+    return van.tags.fragment(
+      ...(children || /* istanbul ignore next */ []),
+      ...pageChildren,
+    );
+  };
+  return layout();
+};
+
+/**
+ * Check if component is a lazy component
+ * @param {unknown} component
+ * @returns {component is (() => Promise<VanNode | VanNode[]>)}
+ */
+export const isLazyComponent = (component) => {
+  // Server: Check if it's an async function
+  if (setup.isServer) {
+    return component.constructor.name.includes("AsyncFunction");
+  }
+
+  // Client: Check if it's designated as lazy
+  return component?.isLazy === true;
+};
+
+/**
+ * Execute lifecycle methods preload and / or load
+ * @param {ComponentModule} param0
+ * @param {Record<string, string> | undefined} params
+ * @returns
+ */
+export const executeLifecycle = async ({ route }, params) => {
+  // istanbul ignore next
+  if (!route) return true;
+  try {
+    if (route?.preload) await route.preload(params);
+    if (route?.load) await route.load(params);
+    return true;
+  } catch (error) {
+    // istanbul ignore next
+    console.error("Lifecycle execution error:", error);
+    // istanbul ignore next
+    return false;
+  }
+};
+
+/**
+ * Client only navigation utility.
+ * @param {string} path - The path to navigate to
+ * @param {{ replace: boolean } | undefined} options - Navigation options
+ * @param {boolean} options.replace - Whether to replace current history entry
+ * @returns {void}
+ */
+export const navigate = (path, options = {}) => {
+  const { replace = false } = options;
+
+  // istanbul ignore else
+  if (!setup.isServer) {
+    // Client-side navigation
+    const url = new URL(path, globalThis.location.origin);
+    const route = matchRoute(url.pathname);
+
+    // Update history
+    if (replace) {
+      globalThis.history.replaceState({}, "", path);
+    } else {
+      globalThis.history.pushState({}, "", path);
+    }
+
+    // Update router state
+    setRouterState(url.pathname, url.search, route?.params);
+  } else {
+    // Server-side navigation - throw error
+    console.error("Direct navigation is not supported on server");
+  }
+};
+
+/**
+ * Extract route params
+ * @param {string} pattern
+ * @param {string} path
+ * @returns {Record<string, string>}
+ */
+export const extractParams = (pattern, path) => {
+  const params = {};
+  const patternParts = pattern.split("/");
+  const pathParts = path.split("/");
+
+  if (patternParts.length !== pathParts.length) return null;
+
+  for (let i = 0; i < patternParts.length; i++) {
+    const patternPart = patternParts[i];
+    const pathPart = pathParts[i];
+
+    if (patternPart.startsWith(":")) {
+      params[patternPart.slice(1)] = pathPart;
+    } else if (patternPart !== pathPart) {
+      return null;
+    }
+  }
+
+  return params;
+};
+
+/**
+ * Client only reload utility
+ * WORK IN PROGRESS
+ * @param {boolean} forceFetch - Force fetch from server
+ * @returns {void}
+ */
+// export const reload = (forceFetch = false) => {
+//   if (!setup.isServer) {
+//     // Client-side reload
+//     if (forceFetch) {
+//       window.location.reload();
+//     } else {
+//       // Soft reload - just update router state
+//       const { pathname, search } = window.location;
+//       setRouterState(pathname, search);
+//     }
+//   } else {
+//     // Server-side reload - throw error
+//     console.error("Reload is not supported on server");
+//   }
+// };
+
+/**
+ * Isomorphic redirect utility
+ * WORK IN PROGRESS
+ * @param {string} path - The path to redirect to
+ * @param {object} options - Redirect options
+ * @param {number} options.status - HTTP status code (server-side only)
+ * @param {boolean} options.replace - Whether to replace current history entry (client-side only)
+ * @returns {void}
+ */
+// export const redirect = (path, options = {}) => {
+//   const { status = 302, replace = true } = options;
+
+//   if (!setup.isServer) {
+//     // Client-side redirect
+//     navigate(path, { replace });
+//   } else {
+//     // Server-side redirect
+//     const error = new Error(`Redirect to ${path}`);
+//     error.status = status;
+//     error.location = path;
+//     throw error;
+//   }
+// };
+
+// Utility to handle server-side redirects in your server entry point
+// export const handleServerRedirect = (error, res) => {
+//   if (error.location && error.status) {
+//     res.writeHead(error.status, {
+//       Location: error.location,
+//       "Content-Type": "text/plain",
+//     });
+//     res.end(`Redirecting to ${error.location}...`);
+//     return true;
+//   }
+//   return false;
+// };