vite-plugin-vanjs 0.0.5 → 0.0.6

package/README.md

@@ -7,11 +7,11 @@
 [![typescript version](https://img.shields.io/badge/typescript-5.6.2-brightgreen)](https://www.typescriptlang.org/)
 [![vanjs-core version](https://img.shields.io/badge/vanjs--core-1.5.3-brightgreen)](https://github.com/vanjs-org/van)
 [![mini-van-plate version](https://img.shields.io/badge/mini--van--plate-0.6.3-brightgreen)](https://github.com/vanjs-org/mini-van-plate)
-[![vitest version](https://img.shields.io/badge/vitest-3.0.4-brightgreen)](https://www.vitest.dev/)
-[![vite version](https://img.shields.io/badge/vite-6.0.11-brightgreen)](https://vite.dev)
+[![vitest version](https://img.shields.io/badge/vitest-3.0.8-brightgreen)](https://www.vitest.dev/)
+[![vite version](https://img.shields.io/badge/vite-6.2.2-brightgreen)](https://vite.dev)
 
 A mini meta-framework for [VanJS](https://vanjs.org/) developed around the awesome [Vite](https://vite.dev). The plugin comes with a set of modules to simplify your workflow:
-* ***@vanjs/router*** - one of the most important part of an application, this one allows you to split code and lazy load components with ease, handles both Client Side Rendering (SSR) and Server Side Rendering (CSR) and makes it really easy to work with;
+* ***@vanjs/router*** - one of the most important part of an application which allows you to split code and lazy load page like components with ease, handles both Client Side Rendering (SSR) and Server Side Rendering (CSR) and makes it really easy to work with;
 * ***@vanjs/meta*** - allows you to create metadata for your pages as well as load additional assets with ease;
 * ***@vanjs/jsx*** - enables JSX transformation;
 * ***@vanjs/setup*** - enables loading VanJS modules isomorphically;
@@ -21,7 +21,7 @@ A mini meta-framework for [VanJS](https://vanjs.org/) developed around the aweso
 The plugin will automatically load the appropriate Van or VanX objects depending on the client/server environment with zero configuration needed. It uses the `mini-van-plate/shared` module to register the required objects in an isomorphic enviroment.
 
 ### Notes 
-* The plugin uses `van-ext` along with `mini-van-plate` so you can have everything ready from start. 
+* The plugin uses `van-ext` along with `mini-van-plate` so you can have everything ready from the start.
 
 * The recommended starter templates for you are the [vite-starter-vanjs-ssr](https://github.com/thednp/vite-starter-vanjs-ssr) and [vite-starter-vanjs-ssr-jsx](https://github.com/thednp/vite-starter-vanjs-ssr-jsx) which already include this plugin.
 
@@ -33,26 +33,26 @@ The plugin will automatically load the appropriate Van or VanX objects depending
 1) Install the plugin:
 
 ```bash
-pnpm install vite-plugin-vanjs
+npm install vite-plugin-vanjs
 ```
 
 ```bash
-npm install vite-plugin-vanjs
+pnpm add vite-plugin-vanjs
 ```
 
 ```bash
-deno install npm:vite-plugin-vanjs
+deno add npm:vite-plugin-vanjs
 ```
 
 ```bash
-bun add vite-plugin-vanjs
+bun install vite-plugin-vanjs
 ```
 
 ```bash
 yarn add vite-plugin-vanjs
 ```
 
-2) To add typescript support, edit your `src/vite-env.d.ts` (or any global types you have set in your app) as follows:
+2) To add Typescript support, edit your `src/vite-env.d.ts` (or any global types you have set in your app) as follows:
 
 ```ts
 /// <reference types="vite/client" />
@@ -62,7 +62,7 @@ yarn add vite-plugin-vanjs
 
 ### Usage
 
-Update your `vite.config.mts` file:
+Update your `vite.config.ts` file:
 ```ts
 // vite.config.mts
 import { defineConfig } from 'vite';
@@ -84,7 +84,7 @@ import van from '@vanjs/van';
 
 // use van as usual
 const MyComponent = () => {
-  return van.div("Hello from VanJS!");
+  return van.tags.div("Hello from VanJS!");
 };
 ```
 Using `vanX` in your code:
@@ -112,17 +112,18 @@ const MyList = () => {
   )
 };
 ```
+**Note**: Anywhere you have **vite-plugin-vanjs** enabled in your Vite apps, all imports from `"vanjs-core"` or `"vanjs-ext"` will be replaced with `"@vanjs/van"` and `"@vanjs/vanX"` respectivelly. In addition you have the `isServer` getter in the `@vanjs/setup` module, something you can use to exclude code execution in server/client environment.
 
 
 ### Router
-The **vite-plugin-vanjs** provides a router with load and preload capability, code splitting and lazy loading, all via the exported `@vanjs/router` module. This functionality is still in early stages, but it manages to work with both Server Side Rendering (SSR) when using an appropriate starter template, as well as Client Side Rendering (CSR/SPA - your classic VanJS app), as we'll see in the example below.
+The **vite-plugin-vanjs** plugin provides a router with load and preload capability, code splitting and lazy loading, all via the exported `@vanjs/router` module. This functionality is still in early stages, but it manages to work with both Server Side Rendering (SSR) when using an appropriate starter template, as well as Client Side Rendering (CSR/SPA - your classic VanJS app), as we'll see in the example below.
 
 Here's a basic example, let's start with the `app.ts`:
 
 ```ts
 // src/app.ts
 import van from "vanjs-core";
-import { Router, Route, A } from "@vanjs/router";
+import { Router, Route } from "@vanjs/router";
 
 // define routes
 Route({ path: '/', component: () => van.tags.div('Hello VanJS') });
@@ -142,7 +143,7 @@ Here's how a page should look like, pay attention to the comments:
 ```ts
 // src/pages/about.ts
 import van from "vanjs-core";
-import { A } from "@vanjs/router";
+import { A, navigate } from "@vanjs/router";
 
 // define routes
 export const route = {
@@ -160,29 +161,31 @@ export const route = {
 // you must export your page component as either
 // a named export "Page" or a default export
 export function Page() {
-  const { div, h1, p, br } = van.tags;
+  const { div, h1, p, button } = van.tags;
   return div(
     h1('About'),
     p('This is the about page'),
-    A({ href: "/" }, "Back to Home")
+    A({ href: "/" }, "Back to Home"),
+    button({ onclick: () => navigate('/about-details') }, "Learn more..")
   )
 }
 ```
 **Notes**
 - when hovering the `A` component, if it links to a lazy component it will trigger that page component preload, but not preload any data;
-- if you use the regular `a` from `van.tags` instead of the `A` component, your application will work as a classic Multi-Page App (MPA).
+- if you use the regular `a` from `van.tags` instead of the `A` component, your application will work just like a classic Multi-Page App (MPA);
+- the `navigate` tool is used by the `A` component and you can also use it to navigate to different routes, something you can use with your API/logic.
 
 
 ### Metadata
-The **vite-plugin-vanjs** also provides metadata management via the exported `@vanjs/meta` module. This module works with both SSR and CSR, and makes it easy to work with.
+The **vite-plugin-vanjs** plugin provides metadata management via the exported `@vanjs/meta` module. This module works with both SSR and CSR, and makes it easy to work with.
 
 Depending on the type of application, it's generally very easy to setup the system to work properly, we only need to make sure that we execute functions in a specific order:
 
-* first we call the `initializeHeadTags` which allows the module to store the current tags that come from either a vite starter template `index.html` or the server (SSR); if we don't call this function, the existing tags will be removed and some of them are important (especially `charset` and `viewport`);
+* first we call the `initializeHeadTags` which allows the module to store the current tags that come from either a Vite starter template `index.html` or the server (SSR); if we don't call this function, the existing tags will be removed and some of them are very important (especially `charset` and `viewport`);
 * then we define a set of default tags to be used by both client and server (if using an SSR template) on all pages that don't come with any metadata tags;
-* lastly, on other pages, we define tags that override both the existing and the default tags
+* lastly, on other pages, we define tags that override both the existing and the default tags.
 
-Ok let's start again with the `app.ts`:
+Here's a quick example, first let's start again with the `app.ts`:
 ```ts
 import van from 'vanjs-core'
 import { Style, Title, Meta, initializeHeadTags } from '@vanjs/meta'
@@ -217,16 +220,16 @@ van.add(document.body, App());
 ```
 **Note**
 - the `Style` component doesn't have any unique attribute so we must use a unique ID to prevent duplicates;
-- all provided metadata components don't return any markup, their function is to register new tags or update existing tags.
+- all provided metadata components don't return any markup, their function is to register new tags or update existing ones.
 
 
 ### JSX Transformation
-
-To enable JSX transformation, you have to edit your `tsconfig.json` as follows:
+To enable JSX transformation, you don't need to do anything except to add Typescript support if you need to. So edit your `tsconfig.json` as follows:
 
 ```json
 {
   "compilerOptions": {
+    /** other compilerOptions */
     "jsx": "preserve",
     "jsxImportSource": "@vanjs/jsx"
   }
@@ -236,25 +239,25 @@ To enable JSX transformation, you have to edit your `tsconfig.json` as follows:
 **Example**:
 ```tsx
 // App.tsx
-import type { ChildDom } from "vanjs-core";
 import van from '@vanjs/van';
 
 const App = () => {
   const count = van.state(0);
+  const btnRef = van.state<{ current: HTMLElement }>();
 
   return (
-    <button onClick={() => count.val++}>{count}</button>
+    <button ref={btnRef} onClick={() => count.val++}>{count}</button>
   );
 }
 
 const root = document.getElementById("app") as HTMLElement;
 
-van.add(root, <App />);
+van.add(root, <App /> as HTMLElement);
 ```
 
 **Notes**:
 * in cases like this one, enforcing a certain typescript type via `as` might be in good order depending on who renders your component;
-* you can use `ref` as a `van.state`, `class` instead of `className`, `for` instead of `htmlFor`;
+* you can use `ref` as a `van.state`, `class` attribute instead of `className`, `for` attribute instead of `htmlFor`;
 * you can use style as both an object and a string;
 * for a JSX starter template, check out the [vite-starter-vanjs-ssr-jsx](https://github.com/thednp/vite-starter-vanjs-ssr-jsx).
 * for a pure vanilla starter template, check out the [vite-starter-vanjs-ssr](https://github.com/thednp/vite-starter-vanjs-ssr).

package/client/global.d.ts

@@ -36,6 +36,10 @@ declare module "@vanjs/client" {
    */
   export const hydrate: (
     target: HTMLElement,
-    content: ChildElement | ChildElement[],
+    content:
+      | ChildElement
+      | ChildElement[]
+      | JSX.Element
+      | Promise<ChildElement | ChildElement[] | JSX.Element>,
   ) => HTMLElement;
 }

package/client/index.mjs

@@ -1,4 +1,5 @@
-import { unwrap } from "@vanjs/router";
+import { unwrap } from "../router/index.mjs";
+import { getTagKey } from "../meta/helpers.mjs";
 
 /**
  * @param {Element} element
@@ -37,12 +38,105 @@ export const styleToString = (style) => {
 
 /**
  * @param {Element} target the root element
- * @param {Element | Element[]} content the element(s) to hydrate
+ * @param {Element | Element[] | Promise<Element | Element[]>} content the element(s) to hydrate
  */
 export const hydrate = (target, content) => {
+  if (content instanceof Promise) {
+    content.then((res) => {
+      const wrapper = unwrap(res);
+      target.replaceChildren(
+        ...(Array.from(wrapper.children)),
+      );
+    });
+    return target;
+  }
+
   const wrapper = unwrap(content);
-  target.replaceChildren(
-    ...(Array.from(wrapper.children)),
-  );
+  const currentChildren = Array.from(target.children);
+  const newChildren = Array.from(wrapper.children);
+  const isStyleLink = (tag) =>
+    [HTMLStyleElement, HTMLLinkElement].some((e) => tag instanceof e);
+  const isStyle = (tag) => tag instanceof HTMLStyleElement;
+  const isLink = (tag) => tag instanceof HTMLLinkElement;
+
+  if (target.tagName.toLowerCase() === "head") {
+    // Handle non-style/link tags first
+    const regularTags = newChildren.filter((child) => !isStyleLink(child));
+
+    // Handle style/link tags separately
+    const styleTags = newChildren.filter((child) => isStyleLink(child));
+
+    // Create maps for existing tags
+    const existingStyles = new Map(
+      currentChildren.filter(isStyleLink)
+        .map((child) => [getTagKey(child), child]),
+    );
+
+    // Process regular tags normally
+    regularTags.forEach((newChild) => {
+      const key = getTagKey(newChild);
+      const existing = currentChildren.find((child) =>
+        getTagKey(child) === key
+      );
+      if (existing) {
+        existing.replaceWith(newChild);
+      } else {
+        target.appendChild(newChild);
+      }
+    });
+
+    // Process style tags with special handling
+    styleTags.forEach((newChild) => {
+      const key = getTagKey(newChild);
+      const existing = existingStyles.get(key);
+
+      // Skip if tag already exists with same content+id/href
+      if (existing) {
+        /* istanbul ignore next - try again later */
+        if (isStyle(existing) && isStyle(newChild)) {
+          if (
+            existing.textContent === newChild.textContent &&
+            existing.id === newChild.id
+          ) return;
+        }
+        /* istanbul ignore next - try again later */
+        if (isLink(existing) && isLink(newChild)) {
+          if (existing.href === newChild.href) return;
+        }
+      }
+
+      // For link tags, add with disabled state first
+      if (isLink(newChild)) {
+        const temp = newChild.cloneNode();
+        temp.disabled = true;
+
+        const originalRel = temp.rel;
+        temp.rel = "preload";
+        temp.as = "style";
+        /* istanbul ignore next */
+        temp.onload = () => {
+          temp.rel = originalRel;
+          temp.removeAttribute("as");
+          temp.disabled = false;
+          if (existing && existing.parentNode === target) {
+            existing.remove();
+          }
+        };
+
+        target.appendChild(temp);
+      } // For style tags, add new one first
+      /* istanbul ignore if - try again later */ else if (isStyle(newChild)) {
+        target.appendChild(newChild);
+        /* istanbul ignore next - try again later */
+        if (existing && existing.parentNode === target) {
+          // Remove old one in next frame
+          requestAnimationFrame(() => existing.remove());
+        }
+      }
+    });
+  } else {
+    target.replaceChildren(...newChildren);
+  }
+
   return target;
 };

package/client/types.d.ts

@@ -30,5 +30,9 @@ export const styleToString: (source: string | CSS.Properties) => string;
  */
 export const hydrate: (
   target: HTMLElement,
-  content: HTMLElement | HTMLElement[],
+  content:
+    | HTMLElement
+    | HTMLElement[]
+    | JSX.Element
+    | Promise<HTMLElement | HTMLElement[] | JSX.Element>,
 ) => HTMLElement;

package/jsx/global.d.ts

@@ -1,15 +1,16 @@
 declare module "@vanjs/jsx" {
   import type { ChildDom, Primitive } from "vanjs-core";
-  import type { Element as VanElement } from "mini-van-plate/van-plate";
+  import type { Element as VElement } from "mini-van-plate/van-plate";
   export const Fragment = ({ children }: { children?: JSX.Element }) =>
     JSX.Element;
   // export type VanElement = Element;
   export type VanNode =
     | Primitive
     | ChildDom
-    | VanElement
+    | VElement
     | VanNode[]
     | (() => VanNode)
+    | undefined
     | null;
 
   export function jsx(

package/jsx/jsx.d.ts

@@ -1,7 +1,8 @@
 // deno-lint-ignore-file no-empty-interface ban-types
 
 import * as csstype from "csstype";
-import type { ChildDom, State } from "vanjs-core";
+import type { Primitive, State, StateView } from "vanjs-core";
+import { Element as VElement } from "mini-van-plate/van-plate";
 
 /**
  * Based on JSX types for Surplus and Inferno and adapted for `dom-expressions`.
@@ -9,8 +10,17 @@ import type { ChildDom, State } from "vanjs-core";
  * https://github.com/adamhaile/surplus/blob/master/index.d.ts
  * https://github.com/infernojs/inferno/blob/master/packages/inferno/src/core/types.ts
  */
-type DOMElement = Element;
-export type VanNode = DOMElement | ChildDom | null;
+type DOMElement = globalThis.Element;
+type PrimitiveChild = Primitive | State<Primitive | null | undefined>;
+type VanElement = SVGElement | HTMLElement | DOMElement | Node | VElement;
+export type VanNode =
+  | VanElement
+  | PrimitiveChild
+  | VanNode[]
+  | (() => VanNode)
+  | null
+  | undefined;
+
 export type { Fragment } from "./fragment";
 
 export as namespace JSX;
@@ -18,18 +28,34 @@ export = JSX;
 
 declare namespace JSX {
   // type FunctionMaybe<T = unknown> = { (): T } | T;
-  type FunctionMaybe<T = unknown> = (() => T) | State<T> | T;
+  // type Element = VanNode;
+  type FunctionMaybe<T = unknown> = (() => T) | StateView<T> | T;
   type Element =
-    | ChildDom
+    | State<Primitive | null | undefined>
     | Node
     | DOMElement
+    | HTMLElement
     | ArrayElement
+    // | TagComponent<any>
+    // | Component
     | FunctionElement
     | (string & {})
-    | number
-    | boolean
+    | Primitive
     | null
     | undefined;
+
+  type ComponentProps<K> = Omit<IntrinsicElements[K], "children">;
+  type Component<
+    K extends keyof IntrinsicElements,
+    O extends (Record<string, PropValueOrDerived> | undefined) = undefined,
+  > = (
+    props?:
+      & (O extends object ? ComponentProps<K> & Partial<O> : ComponentProps<K>)
+      & {
+        children?: Element;
+      },
+  ) => HTMLElementTagNameMap[T];
+
   interface ArrayElement extends Array<Element> {}
   interface FunctionElement {
     (): Element;
@@ -88,11 +114,18 @@ declare namespace JSX {
 
   interface IntrinsicAttributes {
     // ref?: unknown | ((e: unknown) => void);
-    ref?: State<T>;
+    // ref?: State<T>;
+    // ref?: Element;
+    // ref?: State<Element> & State<{ current?: Element }>;
+    ref?: State<{ current?: Element }>;
   }
   interface CustomAttributes<T> {
     // ref?: State<T> | T | ((el: T) => void);
-    ref?: State<T>;
+    // ref?: State<T>;
+    // ref?: T;
+    // ref?: { current: State<T> };
+    // ref?: State<T> & State<{ current: T }>;
+    ref?: State<{ current: T }>;
   }
   interface ExplicitProperties {}
   interface ExplicitAttributes {}

package/jsx/jsx.mjs

@@ -1,6 +1,6 @@
-import van from "@vanjs/van";
-import setup from "@vanjs/setup";
-import { setAttribute, styleToString } from "@vanjs/client";
+import van from "../setup/van.mjs";
+import setup from "../setup/index.mjs";
+import { setAttribute, styleToString } from "../client/index.mjs";
 
 export const jsx = (jsxTag, { children, ref, style, ...props }) => {
   if (typeof jsxTag === "string") {
@@ -29,15 +29,15 @@ export const jsx = (jsxTag, { children, ref, style, ...props }) => {
       setAttribute(newElement, k, value);
     }
     /* istanbul ignore else */
-    if (style) {
-      if (typeof style === "function") {
-        van.derive(() => newElement.style.cssText = styleToString(style()));
-      } else {
-        newElement.style.cssText = styleToString(style);
+    van.derive(() => {
+      if (style) {
+        const styleProp = typeof style === "function" ? style() : style;
+        newElement.style.cssText = styleToString(styleProp);
       }
-    }
+    });
+
+    if (ref) ref.val = { current: newElement };
 
-    if (ref) ref.val = newElement;
     return newElement;
   }
 

package/meta/Head.mjs

@@ -1,11 +1,11 @@
-import setup from "@vanjs/setup";
+import setup from "../setup/index.mjs";
 import { getTagKey } from "./helpers.mjs";
 
 /** @typedef {typeof import("./types.d.ts").getHeadTags} GetTags */
 /** @typedef {typeof import("./types.d.ts").createHeadTags} CreateTags */
 /** @typedef {typeof import("./types.d.ts").resetHeadTags} ResetTags */
 /** @typedef {typeof import("./types.d.ts").initializeHeadTags} InitializeTags */
-/** @typedef {import("./types.d.ts").AddMeta} AddMeta */
+/** @typedef {typeof import("./types.d.ts").addMeta} AddMeta */
 /** @typedef {typeof import("./types.d.ts").Head} HeadComp */
 
 /**
@@ -52,7 +52,7 @@ export const initializeHeadTags = () => {
   const tags = getHeadTags();
   /* istanbul ignore else */
   if (!tags.size && !setup.isServer) {
-    [...document.head.children].forEach((tag) => {
+    Array.from(document.head.children).forEach((tag) => {
       tags.set(getTagKey(tag), tag);
     });
   }

package/meta/global.d.ts

@@ -13,8 +13,10 @@ declare module "@vanjs/meta" {
     string,
     SupportedTags | TagFunc
   >;
-  export type ResetTags = () => void;
-  export type InitializeTags = () => void;
+  export const resetHeadTags: () => void;
+  export const initializeHeadTags: (
+    _html?: string,
+  ) => void;
 
   export type SupportedTags =
     | HTMLTitleElement
@@ -27,34 +29,44 @@ declare module "@vanjs/meta" {
 
   export type HeadTags = SupportedTags[] | TagFunc[];
 
-  export type AddMeta = (tag?: TagProps) => void;
+  export const addMeta: (tag?: TagProps) => void;
+
+  export const Head: () => HeadTags;
 
-  // 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 Meta: (
+    props: PropsWithKnownKeys<HTMLMetaElement> & { charset?: string & "utf-8" },
+  ) => 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 = (
+  export const parseAttributes: (
     attributeString: string,
   ) => Record<string, string>;
 
-  export type GetTagAttribute = (tag: TagProps) => string;
+  export const getTagAttribute: (tag: TagProps) => string;
 
-  export type GetTagKey = (tag: TagProps) => string;
+  export const getTagKey: (tag: TagProps) => string;
 
-  export const initializeHeadTags: InitializeTags;
-  export const resetHeadTags: ResetTags;
-  export const addMeta: AddMeta;
+  export const extractTags: (
+    html?: string,
+  ) => {
+    tag: TagFunc;
+    props: PropsWithKnownKeys<SupportedTags>;
+    children: TagFunc[];
+  }[];
 }

package/meta/helpers.mjs

@@ -1,6 +1,7 @@
-import setup from "@vanjs/setup";
+import setup from "../setup/index.mjs";
+// import { getAttributes } from "@thednp/domparser/parser";
 
-/** @type {import('./types.d.ts').ParseAttributes} */
+/** @type {typeof import('./types.d.ts').parseAttributes} */
 export const parseAttributes = (attributeString) => {
   /** @type {Record<string, string>} */
   const attributes = {};
@@ -39,10 +40,11 @@ const getTagAttribute = (tag) => {
   return "";
 };
 
-/** @type {import('./types.d.ts').GetTagKey} */
+/** @type {typeof import('./types.d.ts').getTagKey} */
 export const getTagKey = (tag) => {
   const normalizedTag = setup.isServer
     ? { tagName: tag.name.toUpperCase(), ...parseAttributes(tag.propsStr) }
+    // ? { tagName: tag.name.toUpperCase(), ...getAttributes(tag.propsStr) }
     : tag;
 
   return normalizedTag.tagName +