vite-plugin-vanjs 0.0.5 → 0.0.7

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.5",
+  "version": "0.0.7",
   "author": "thednp",
   "license": "MIT",
   "description": "A mini meta-framework for VanJS powered by Vite",
@@ -87,13 +87,14 @@
     "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",
+    "@types/node": "^22.13.10",
+    "@vitest/browser": "^3.0.9",
+    "@vitest/coverage-istanbul": "^3.0.9",
+    "@vitest/ui": "^3.0.9",
+    "happy-dom": "^16.8.1",
     "typescript": "5.6.2",
-    "vite": "^6.0.11",
-    "vitest": "^3.0.4"
+    "vite": "^6.2.2",
+    "vitest": "^3.0.9"
   },
   "engines": {
     "node": ">=20",

package/router/a.mjs

@@ -1,19 +1,25 @@
 // router/a.mjs
 import van from "vanjs-core";
-import setup from "@vanjs/setup";
+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,5 +1,5 @@
-import setup from "@vanjs/setup";
-import van from "vanjs-core";
+// import van from "vanjs-core";
+import setup from "../setup/index.mjs";
 import { routerState, setRouterState } from "./state.mjs";
 import { matchRoute } from "./routes.mjs";
 
@@ -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/lazy.mjs

@@ -1,4 +1,4 @@
-import setup from "@vanjs/setup";
+import setup from "../setup/index.mjs";
 import van from "vanjs-core";
 import { cache, getCached } from "./cache.mjs";
 

package/router/router.mjs

@@ -1,17 +1,20 @@
 import van from "vanjs-core";
-import setup from "@vanjs/setup";
+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 = () => {
-  const { div } = van.tags;
-  // const meta = defaultMeta();
-
+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/state.mjs

@@ -1,6 +1,7 @@
 // router/state.js
 import van from "vanjs-core";
-import setup from "@vanjs/setup";
+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

package/server/index.mjs

@@ -43,10 +43,10 @@ export const renderToString = async (inputSource) => {
  * @returns {string}
  */
 function renderPreloadLink(file) {
-  if (file.endsWith(".js") || file.endsWith(".mjs")) {
-    return `<link rel="modulepreload" as="script" crossorigin href="${file}">`;
+  if (file.endsWith(".js")) {
+    return `<link rel="preload" href="${file}" as="script" crossorigin>`;
   } else if (file.endsWith(".css")) {
-    return `<link rel="stylesheet" href="${file}">`;
+    return `<link rel="preload" href="${file}" as="style" crossorigin>`;
   } else if (file.endsWith(".woff")) {
     return ` <link rel="preload" href="${file}" as="font" type="font/woff" crossorigin>`;
   } else if (file.endsWith(".woff2")) {

package/server/types.d.ts

@@ -20,7 +20,7 @@ type ValidVanNode =
   | VanElement
   | TagFunc;
 
-type VanComponent = () => ValidVanNode | ValidVanNode[];
+type VanComponent = () => HTMLElement | ValidVanNode | ValidVanNode[];
 export type Source =
   | Promise<ValidVanNode>
   | VanComponent

package/setup/index-debug.mjs

@@ -0,0 +1,21 @@
+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;
+  },
+};
+
+registerEnv(setup);
+
+export default setup;

package/setup/van-debug.mjs

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

package/src/index.mjs

@@ -1,8 +1,10 @@
 import { fileURLToPath } from "node:url";
 import { dirname, resolve } from "node:path";
+import process from "node:process";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
+const isProduction = process.env.NODE_ENV === "production";
 
 export default function VitePluginVanJS() {
   return {
@@ -10,16 +12,30 @@ export default function VitePluginVanJS() {
     enforce: "pre",
     config() {
       return {
+        ssr: {
+          noExternal: ["vanjs-*", "*-vanjs", "@vanjs/*"],
+        },
         resolve: {
           alias: {
-            "@vanjs/setup": resolve(__dirname, "../setup"),
-            "@vanjs/van": resolve(__dirname, "../setup/van"),
+            "@vanjs/setup": resolve(
+              __dirname,
+              isProduction
+                ? /* istanbul ignore next */ "../setup/index"
+                : "../setup/index-debug",
+            ),
+            "@vanjs/van": resolve(
+              __dirname,
+              isProduction
+                ? /* istanbul ignore next */ "../setup/van"
+                : "../setup/van-debug",
+            ),
             "@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"),
+            "@vanjs/parser": resolve(__dirname, "../parser"),
           },
         },
         esbuild: {

package/src/types.d.ts

@@ -4,11 +4,11 @@ export * from "../router/types";
 export * from "../meta/types";
 export * from "../server/types";
 export * from "../client/types";
+export * from "../parser/types";
 
 declare const VitePluginVanJS: () => {
   name: "string";
   enforce: "pre" | "post" | undefined;
-  apply: "build";
   config(): {
     resolve: {
       alias: Record<string, string>;

package/tsconfig.json

@@ -39,7 +39,7 @@
     "./meta/*.ts",
     "./server/*.ts",
     "./client/*.ts",
-    // "./tests/vite-env.d.ts"
+    "./tests/vite-env.d.ts"
   ],
   "exclude": ["node_modules", "experiments", "coverage"],
 }