vite-plugin-vanjs 0.0.2 → 0.0.4

package/meta/global.d.ts

@@ -0,0 +1,60 @@
+declare module "@vanjs/meta" {
+  import { type PropsWithKnownKeys } from "vanjs-core";
+  import type {
+    Element as VanElement,
+    TagFunc,
+  } from "mini-van-plate/van-plate";
+
+  export const createHeadTags: () => Map<
+    string,
+    SupportedTags | TagFunc
+  >;
+  export const getHeadTags: () => Map<
+    string,
+    SupportedTags | TagFunc
+  >;
+  export type ResetTags = () => void;
+  export type InitializeTags = () => void;
+
+  export type SupportedTags =
+    | HTMLTitleElement
+    | HTMLMetaElement
+    | HTMLScriptElement
+    | HTMLLinkElement
+    | HTMLStyleElement;
+
+  export type TagProps = PropsWithKnownKeys<SupportedTags>;
+
+  export type HeadTags = SupportedTags[] | TagFunc[];
+
+  export type AddMeta = (tag?: TagProps) => void;
+
+  // export declare const Head: () => () => TagFunc[];
+  export declare const Head: () => () => SupportedTags[];
+  export const Title: (
+    props: PropsWithKnownKeys<HTMLTitleElement>,
+    content?: string,
+  ) => null;
+  export const Meta: (props: PropsWithKnownKeys<HTMLMetaElement>) => null;
+  export const Style: (
+    props: PropsWithKnownKeys<HTMLStyleElement>,
+    content?: string,
+  ) => null;
+  export const Link: (props: PropsWithKnownKeys<HTMLLinkElement>) => null;
+  export const Script: (
+    props: PropsWithKnownKeys<HTMLScriptElement>,
+    content?: string,
+  ) => null;
+
+  export type ParseAttributes = (
+    attributeString: string,
+  ) => Record<string, string>;
+
+  export type GetTagAttribute = (tag: TagProps) => string;
+
+  export type GetTagKey = (tag: TagProps) => string;
+
+  export const initializeHeadTags: InitializeTags;
+  export const resetHeadTags: ResetTags;
+  export const addMeta: AddMeta;
+}

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";
+export * from "./tags";
+export * from "./helpers";

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";
+
+/** @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.2",
+  "version": "0.0.4",
   "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.5"
+    "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 "../setup/index";
+import { matchRoute } from "./routes";
+import { executeLifecycle, isCurrentPage, navigate } from "./helpers";
+
+/**
+ * @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;
+}