vite-plugin-vanjs 0.0.4 → 0.0.6

package/meta/tags.mjs

@@ -1,11 +1,11 @@
 import van from "vanjs-core";
-import { addMeta } from "./Head";
+import { addMeta } from "./Head.mjs";
 
 /** @typedef {import("vanjs-core").PropsWithKnownKeys} PropsWithKnownKeys */
 /** @typedef {import("./types.d.ts").TagProps} TagProps */
 
 /**
- * Add a new title tag
+ * Add a new `<title>` tag
  * @type {(props: PropsWithKnownKeys<HTMLTitleElement>, content?: string) => null}
  */
 export const Title = (props, content) => {
@@ -15,7 +15,7 @@ export const Title = (props, content) => {
 };
 
 /**
- * Add a new meta tag
+ * Add a new `<meta>` tag
  * @type {(props: PropsWithKnownKeys<HTMLMetaElement>) => null}
  */
 export const Meta = (props) => {
@@ -25,7 +25,7 @@ export const Meta = (props) => {
 };
 
 /**
- * Add a new link tag
+ * Add a new `<link>` tag
  * @type {(props: PropsWithKnownKeys<HTMLLinkElement>) => null}
  */
 export const Link = (props) => {
@@ -35,19 +35,17 @@ export const Link = (props) => {
 };
 
 /**
- * Add a new script tag
+ * 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
+ * Add a new `<style>` tag
  * @type {(props: PropsWithKnownKeys<HTMLStyleElement>, content: string) => null}
  */
 export const Style = (props, content) => {

package/meta/types.d.ts

@@ -7,10 +7,10 @@ export const createHeadTags: () => Map<
   SupportedTags | TagFunc<SupportedTags>
 >;
 
-export const getHeadTags = () =>
-  Map<string, SupportedTags | TagFunc<SupportedTags>>;
+export const getHeadTags =
+  () => (Map<string, SupportedTags | TagFunc<SupportedTags>>);
 export const resetHeadTags: () => void;
-export const initializeHeadTags: () => void;
+export const initializeHeadTags: () => void | (() => Promise<void>);
 
 export type SupportedTags =
   | HTMLTitleElement
@@ -21,13 +21,13 @@ export type SupportedTags =
 
 export type TagProps = SupportedTags | PropsWithKnownKeys<SupportedTags>;
 
-export type HeadTags = SupportedTags[] | TagFunc<SupportedTags>[];
+export type HeadTags = SupportedTags[] | TagFunc[];
 
-export type AddMeta = (tag: string | TagProps) => null;
+export const addMeta = (_tag: string | TagProps) => null;
 
-export declare const Head: () => HeadTags;
+export const Head: () => HeadTags;
 
-export type ParseAttributes = (
+export const parseAttributes: (
   attributeString: string,
 ) => Record<string, string>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-vanjs",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "author": "thednp",
   "license": "MIT",
   "description": "A mini meta-framework for VanJS powered by Vite",
@@ -74,6 +74,17 @@
       "import": "./jsx/jsx-dev-runtime.mjs"
     }
   },
+  "scripts": {
+    "test": "vitest --config vitest.config.mts",
+    "test-ui": "vitest --config vitest.config.mts --ui=true",
+    "prepublishOnly": "pnpm up && pnpm lint && pnpm format && pnpm badges",
+    "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 meta router setup client server jsx",
+    "fix:ts": "deno lint src meta router setup client server jsx --fix",
+    "check:ts": "tsc -noEmit"
+  },
   "peerDependencies": {
     "csstype": "*",
     "mini-van-plate": "*",
@@ -87,26 +98,17 @@
     "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",
+    "@vitest/browser": "^3.0.8",
+    "@vitest/coverage-istanbul": "^3.0.8",
+    "@vitest/ui": "^3.0.8",
+    "happy-dom": "^16.8.1",
     "typescript": "5.6.2",
-    "vite": "^6.0.11",
-    "vitest": "^3.0.4"
+    "vite": "^6.2.2",
+    "vitest": "^3.0.8"
   },
+  "packageManager": "pnpm@8.6.12",
   "engines": {
     "node": ">=20",
     "pnpm": ">=8.6.0"
-  },
-  "scripts": {
-    "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 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

@@ -1,19 +1,25 @@
 // router/a.mjs
 import van from "vanjs-core";
-import setup from "../setup/index";
-import { matchRoute } from "./routes";
-import { executeLifecycle, isCurrentPage, navigate } from "./helpers";
+import setup from "../setup/index.mjs";
+import { matchRoute } from "./routes.mjs";
+import { executeLifecycle, isCurrentPage, navigate } from "./helpers.mjs";
+
+/** @typedef {typeof import("./types").A} A */
 
 /**
- * @param {Partial<HTMLAnchorElement>} props
- * @param  {...(Element | Node)[]} children
- * @returns {HTMLAnchorElement}
+ * @type {A}
  */
-export const A = (props, ...children) => {
-  const { href, ...rest } = props;
+export const A = (
+  /* istanbul ignore next */ { href, children, ...rest } = {},
+  ...otherChildren
+) => {
+  /* istanbul ignore next - try again later */
+  const props = Object.fromEntries(
+    Object.entries(rest || {}).filter(([_, val]) => val),
+  );
   const newProps = {
     href,
-    ...rest,
+    ...props,
   };
 
   van.derive(() => {
@@ -22,7 +28,7 @@ export const A = (props, ...children) => {
     }
   });
 
-  const anchor = van.tags.a(newProps, ...children);
+  const anchor = van.tags.a(newProps, [...(children || []), ...otherChildren]);
   /* istanbul ignore else */
   if (!setup.isServer) {
     anchor.addEventListener("click", async (e) => {

package/router/global.d.ts

@@ -1,10 +1,54 @@
 declare module "@vanjs/router" {
-  import type { Element } from "mini-van-plate/van-plate";
+  import type {
+    Element as VElement,
+    TagFunc as IsoTagFunc,
+  } 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;
+  import type {
+    ChildDom,
+    Primitive,
+    Props,
+    PropsWithKnownKeys,
+    PropValueOrDerived,
+    State,
+  } from "vanjs-core";
+
+  // type VanElement = VElement | Exclude<Primitive, boolean | undefined>;
+  type DOMElement = globalThis.Element;
+  type PrimitiveChild = Primitive | State<Primitive | undefined | null>;
+
+  type VanElement =
+    | SVGElement
+    | HTMLElement
+    | DOMElement
+    | Node
+    | VElement
+    | PrimitiveChild;
+  export type VanNode =
+    | VanElement
+    | VanNode[]
+    | (() => VanNode)
+    | null
+    | undefined;
+
+  type ComponentProps1<T> =
+    & Props
+    & PropsWithKnownKeys<T>;
+
+  type ComponentProps<K extends keyof HTMLElementTagNameMap> =
+    & Props
+    & PropsWithKnownKeys<HTMLElementTagNameMap[K]>;
+
+  export type VanComponent<
+    K extends keyof HTMLElementTagNameMap = "div",
+    O extends (Record<string, PropValueOrDerived> | undefined) = undefined,
+  > = {
+    (
+      props?: O extends object ? ComponentProps<K> & Partial<O>
+        : ComponentProps<K>,
+      ...children: ChildDom[]
+    ): HTMLElementTagNameMap[K];
+  };
 
   // router.mjs
   /**
@@ -18,7 +62,14 @@ declare module "@vanjs/router" {
    *   return Router(); // or <Router /> for JSX
    * }
    */
-  export const Router: () => VanNode | VanNode[];
+  // export const Router: JSX.Component<HTMLElement> & VanComponent<HTMLElement>;
+  // export function Router(props?: ComponentProps<HTMLElement>): HTMLElement;
+  // export function Router(
+  //   props?: JSX.IntrinsicElements["main"] & { children: null },
+  // ): HTMLElement;
+  export const Router:
+    & VanComponent<"main">
+    & JSX.Component<"main">;
 
   // a.mjs
   /**
@@ -38,10 +89,9 @@ declare module "@vanjs/router" {
    *   );
    * }
    */
-  export const A: (
-    props: PropsWithKnownKeys<HTMLAnchorProps>,
-    ...children: (Element | Node | string)[]
-  ) => HTMLAnchorElement;
+  export const A:
+    & VanComponent<"a">
+    & JSX.Component<"a">;
 
   // helpers.mjs
   /**
@@ -69,8 +119,6 @@ declare module "@vanjs/router" {
    */
   export const redirect: (href?: string) => void | (() => void);
 
-  export type VanComponent = () => VanNode | VanNode[];
-
   // routes.mjs
   export type RouteEntry = {
     path: string;
@@ -137,18 +185,23 @@ declare module "@vanjs/router" {
    * @param  {...VanNode[]} children
    */
   export const unwrap: (
-    source: VanNode | VanNode[] | (() => VanNode | VanNode[]),
+    source:
+      | VanNode
+      | IsoTagFunc
+      | VanNode[]
+      | IsoTagFunc[]
+      | (() => IsoTagFunc | IsoTagFunc[] | VanNode | VanNode[]),
     ...children: VanNode[]
   ) => VanNode;
 
   export type ComponentModule = {
-    component: VanComponent;
+    component: VanComponent | JSX.Element;
     route: Pick<RouteEntry, "load" | "preload">;
   };
 
   export type DynamicModule = {
-    Page: VanComponent;
-    default?: VanComponent;
+    Page: VanComponent | JSX.Element;
+    default?: VanComponent | JSX.Element;
     route?: Pick<RouteEntry, "load" | "preload">;
   };
 
@@ -159,4 +212,10 @@ declare module "@vanjs/router" {
    * @param importFn
    */
   export const lazy: (importFn: () => LazyComponent) => () => ComponentModule;
+
+  /**
+   * Fixes the URL of a route.
+   * @param url
+   */
+  export const fixRouteUrl: (url: string) => string;
 }

package/router/helpers.mjs

@@ -1,7 +1,7 @@
-import setup from "@vanjs/setup";
-import van from "vanjs-core";
-import { routerState, setRouterState } from "./state";
-import { matchRoute } from "./routes";
+// import van from "vanjs-core";
+import setup from "../setup/index.mjs";
+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 */
@@ -32,14 +32,20 @@ export const unwrap = (source, ...children) => {
       ? [...source()?.children || source()]
       : typeof HTMLElement !== "undefined" && source instanceof HTMLElement
       ? [...source.children]
-      : Array.isArray(source)
+      : /* istanbul ignore next */ Array.isArray(source)
       ? source
       : [source];
 
-    return van.tags.fragment(
-      ...(children || /* istanbul ignore next */ []),
-      ...pageChildren,
-    );
+    // return van.tags.fragment(
+    // ...(children || /* istanbul ignore next */ []),
+    // ...pageChildren,
+    // );
+    return {
+      children: [
+        ...(children || /* istanbul ignore next */ []),
+        ...pageChildren,
+      ],
+    };
   };
   return layout();
 };
@@ -138,6 +144,19 @@ export const extractParams = (pattern, path) => {
   return params;
 };
 
+/**
+ * Fix the URL of a route
+ * @param {string=} url
+ * @returns
+ */
+export const fixRouteUrl = (url) => {
+  if (!url) return "/";
+  if (url.startsWith("/")) {
+    return url;
+  }
+  return `/${url}`;
+};
+
 /**
  * Client only reload utility
  * WORK IN PROGRESS

package/router/index.mjs

@@ -1,6 +1,7 @@
-export * from "./router";
-export * from "./routes";
-export * from "./a";
-export * from "./state";
-export * from "./lazy";
-export * from "./helpers";
+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

@@ -1,6 +1,6 @@
-import setup from "@vanjs/setup";
+import setup from "../setup/index.mjs";
 import van from "vanjs-core";
-import { cache, getCached } from "./cache";
+import { cache, getCached } from "./cache.mjs";
 
 /** @typedef {import('./types').VanNode} VanNode */
 /** @typedef {import('./types').ComponentModule} ComponentModule */

package/router/router.mjs

@@ -1,17 +1,20 @@
 import van from "vanjs-core";
-import setup from "@vanjs/setup";
-import { routerState } from "./state";
-import { matchRoute } from "./routes";
-import { executeLifecycle, unwrap } from "./helpers";
-
-export const Router = () => {
-  const { div } = van.tags;
-  // const meta = defaultMeta();
+import setup from "../setup/index.mjs";
+import { routerState } from "./state.mjs";
+import { matchRoute } from "./routes.mjs";
+import { executeLifecycle, unwrap } from "./helpers.mjs";
 
+export const Router = (initialProps = /* istanbul ignore next */ {}) => {
+  const { div, main } = van.tags;
+  /* istanbul ignore next - try again later */
+  const props = Object.fromEntries(
+    Object.entries(initialProps).filter(([_, val]) => val),
+  );
+  const wrapper = main(props);
   const mainLayout = () => {
     const route = matchRoute(routerState.pathname.val);
     /* istanbul ignore else */
-    if (!route) return div("404 - Not Found");
+    if (!route) return van.add(wrapper, div("404 - Not Found"));
 
     routerState.params.val = route.params || {};
     // Server-side or async component: use renderComponent
@@ -20,23 +23,27 @@ export const Router = () => {
         try {
           const module = await route.component();
           const component = module.component();
+
           await executeLifecycle(module, route.params);
-          return unwrap(component).children;
+          return van.add(wrapper, unwrap(component).children);
         } catch (error) {
           /* istanbul ignore next */
           console.error("Router error:", error);
           /* istanbul ignore next */
-          return div("Error loading page");
+          return van.add(wrapper, 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);
+    const module = route.component();
+    const children = module.component
+      ? Array.from(unwrap(module.component).children)
+      : [];
+    return children.length ? van.add(wrapper, ...children) : wrapper;
   };
 
   return mainLayout();

package/router/routes.mjs

@@ -1,6 +1,6 @@
 // router/routes.mjs
-import { extractParams, isLazyComponent } from "./helpers";
-import { lazy } from "./lazy";
+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 */

package/router/state.mjs

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

package/router/types.d.ts

@@ -1,10 +1,54 @@
 /// <reference path="global.d.ts" />
-import type { Element } from "mini-van-plate/van-plate";
+import type {
+  Element as VElement,
+  TagFunc as IsoTagFunc,
+} 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;
+import type {
+  ChildDom,
+  Primitive,
+  Props,
+  PropsWithKnownKeys,
+  PropValueOrDerived,
+  State,
+} from "vanjs-core";
+
+// type VanElement = VElement | Exclude<Primitive, boolean | undefined>;
+type DOMElement = globalThis.Element;
+type PrimitiveChild = Primitive | State<Primitive | undefined | null>;
+
+type VanElement =
+  | SVGElement
+  | HTMLElement
+  | DOMElement
+  | Node
+  | VElement
+  | PrimitiveChild;
+export type VanNode =
+  | VanElement
+  | VanNode[]
+  | (() => VanNode)
+  | null
+  | undefined;
+
+type ComponentProps1<T> =
+  & Props
+  & PropsWithKnownKeys<T>;
+
+type ComponentProps<K extends keyof HTMLElementTagNameMap> =
+  & Props
+  & PropsWithKnownKeys<HTMLElementTagNameMap[K]>;
+
+export type VanComponent<
+  K extends keyof HTMLElementTagNameMap = "div",
+  O extends (Record<string, PropValueOrDerived> | undefined) = undefined,
+> = {
+  (
+    props?: O extends object ? ComponentProps<K> & Partial<O>
+      : ComponentProps<K>,
+    ...children: ChildDom[]
+  ): HTMLElementTagNameMap[K];
+};
 
 // router.mjs
 /**
@@ -18,7 +62,14 @@ type VanNode = SVGElement | HTMLElement | VanElement;
  *   return Router(); // or <Router /> for JSX
  * }
  */
-export const Router: () => VanNode | VanNode[];
+// export const Router: JSX.Component<HTMLElement> & VanComponent<HTMLElement>;
+// export function Router(props?: ComponentProps<HTMLElement>): HTMLElement;
+// export function Router(
+//   props?: JSX.IntrinsicElements["main"] & { children: null },
+// ): HTMLElement;
+export const Router:
+  & VanComponent<"main">
+  & JSX.Component<"main">;
 
 // a.mjs
 /**
@@ -38,10 +89,9 @@ export const Router: () => VanNode | VanNode[];
  *   );
  * }
  */
-export const A: (
-  props: PropsWithKnownKeys<HTMLAnchorProps>,
-  ...children: (Element | Node | string)[]
-) => HTMLAnchorElement;
+export const A:
+  & VanComponent<"a">
+  & JSX.Component<"a">;
 
 // helpers.mjs
 /**
@@ -51,7 +101,10 @@ export const A: (
  * @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;
+export const navigate: (
+  href: string,
+  options?: { replace?: boolean },
+) => void;
 
 /**
  * A client only helper function that reloads the current page.
@@ -66,8 +119,6 @@ export const reload: () => void;
  */
 export const redirect: (href?: string) => void | (() => void);
 
-export type VanComponent = () => VanNode | VanNode[];
-
 // routes.mjs
 export type RouteEntry = {
   path: string;
@@ -103,7 +154,7 @@ export const Route: (route: RouteProps) => void;
 export type RouterState = {
   pathname: string;
   searchParams: URLSearchParams;
-  params?: Record<string, string>;
+  params: Record<string, string>;
 };
 /**
  * A reactive object that holds the current router state.
@@ -131,26 +182,39 @@ export const setRouterState: (
  * 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
+ * @param  {...VanNode[]} children
  */
 export const unwrap: (
-  source: VanNode | VanNode[] | (() => VanNode | VanNode[]),
+  source:
+    | VanNode
+    | IsoTagFunc
+    | VanNode[]
+    | IsoTagFunc[]
+    | (() => IsoTagFunc | IsoTagFunc[] | VanNode | VanNode[]),
   ...children: VanNode[]
 ) => VanNode;
 
 export type ComponentModule = {
-  component: VanComponent;
+  component: VanComponent | JSX.Element;
   route: Pick<RouteEntry, "load" | "preload">;
 };
 
 export type DynamicModule = {
-  Page: VanComponent;
-  default?: VanComponent;
+  Page: VanComponent | JSX.Element;
+  default?: VanComponent | JSX.Element;
   route?: Pick<RouteEntry, "load" | "preload">;
 };
 
-export type LazyComponent =
-  | Promise<DynamicModule>
-  | (() => Promise<DynamicModule>);
+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;

package/server/global.d.ts

@@ -27,6 +27,7 @@ declare module "@vanjs/server" {
     | TagFunc;
 
   type VanComponent = () =>
+    | HTMLElement
     | ValidVanNode
     | ValidVanNode[]
     | SupportedTags