vite-plugin-vanjs 0.1.15 → 0.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-vanjs",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "author": "thednp",
   "license": "MIT",
   "description": "A mini meta-framework for VanJS powered by Vite",

package/router/global.d.ts

@@ -185,10 +185,15 @@ declare module "@vanjs/router" {
    * A reactive object that holds the current router state.
    * This state is maintained by both server and client.
    */
+  // export const routerState: {
+  //   pathname:  State<RouterState.pathname>;
+  //   searchParams: State<RouterState.searchParams>;
+  //   params?: State<RouterState.params>;
+  // };
   export const routerState: {
-    pathname: van.state<RouterState.pathname>;
-    searchParams: van.state<RouterState.searchParams>;
-    params?: van.state<RouterState.params>;
+    pathname: RouterState["pathname"];
+    searchParams: RouterState["searchParams"];
+    params?: RouterState["params"];
   };
 
   /**

package/router/helpers.mjs

@@ -16,7 +16,7 @@ import { matchRoute } from "./matchRoute.mjs";
  * @returns {boolean}
  */
 export const isCurrentPage = (pageName) => {
-  return routerState.pathname.val === pageName;
+  return routerState.pathname === pageName;
 };
 
 /**

package/router/router.mjs

@@ -52,7 +52,7 @@ const initClient = () => {
     /** @param {Event & {target: globalThis}} e */
     (e) => {
       const location = e.target.location;
-      const oldPath = routerState.pathname._oldVal;
+      const oldPath = routerState.pathname;
       // istanbul ignore next - cannot test
       if (location.pathname !== oldPath) {
         setRouterState(location.pathname, location.search);
@@ -73,11 +73,11 @@ export const Router = (initialProps = /* istanbul ignore next */ {}) => {
   // Initialize Head BEFORE any route matching or lifecycle execution
   if (!isServer) initClient();
 
-  const route = matchRoute(routerState.pathname.val);
+  const route = matchRoute(routerState.pathname);
   /* istanbul ignore else */
   if (!route) return van.add(wrapper, div("No Route Found"));
 
-  routerState.params.val = route.params || {};
+  Object.assign(routerState.params, route.params || {});
 
   // Server-side rendering
   if (isServer) {
@@ -108,7 +108,7 @@ export const Router = (initialProps = /* istanbul ignore next */ {}) => {
 
   // SPA path - reactive routing
   van.derive(() => {
-    const r = matchRoute(routerState.pathname.val);
+    const r = matchRoute(routerState.pathname);
     if (!r) {
       wrapper.replaceChildren(div("No Route Found"));
       return;

package/router/state.mjs

@@ -18,23 +18,86 @@ export const fixRouteUrl = (url) => {
 const initialPath = !isServer ? globalThis.location.pathname : "/";
 const initialSearch = !isServer ? globalThis.location.search : "";
 
+const STATE_PROXY = "_proxy";
+const proxyProps = {
+  value: 1,
+  enumerable: false,
+  configurable: false,
+  writable: false,
+};
+
 /**
- * @type {typeof import("./types.d.ts").routerState}
+ * @param {number | Omit<keyof T, "symbol">} key
+ * @param {T[keyof T]} value
+ * @param {Record<string, string | number>} target
+ * @returns {T}
  */
-export const routerState = {
-  pathname: van.state(initialPath),
-  searchParams: van.state(new URLSearchParams(initialSearch)),
-  params: van.state({}),
+const defineProxy = (key, value, target) => {
+  const stateObj = van.state(value);
+
+  const getter = () => stateObj.val;
+  const setter = (newVal) => {
+    stateObj.val = newVal;
+  };
+  stateObj.val = value;
+
+  Object.defineProperties(target, {
+    [STATE_PROXY]: proxyProps,
+    [key]: {
+      get: getter,
+      set: setter,
+      enumerable: true,
+    },
+  });
+
+  return stateObj;
 };
 
+/**
+ * @param {T extends Record<string, unknown>} init
+ * @returns {T}
+ */
+export function miniStore(init) {
+  const target = {};
+  for (const [prop, value] of Object.entries(init)) {
+    if (
+      value && typeof value === "object" &&
+      Object.getPrototypeOf(value) === Object
+    ) {
+      for (const [sp, sv] of Object.entries(value)) {
+        target[prop] = defineProxy(sp, sv, {});
+      }
+    } else if (!Array.isArray(value)) {
+      defineProxy(prop, value, target);
+    } else {
+      console.warn(typeof value + " is not supported.");
+    }
+  }
+  return target;
+}
+
+/**
+ * @type {typeof import("./types.d.ts").routerState}
+ */
+// export const routerState = {
+//   pathname: van.state(initialPath),
+//   searchParams: van.state(new URLSearchParams(initialSearch)),
+//   params: van.state({}),
+// };
+export const routerState = miniStore({
+  pathname: initialPath,
+  searchParams: new URLSearchParams(initialSearch),
+  params: {},
+});
+
 /**
  * @type {typeof import("./types.d.ts").setRouterState}
  */
 export const setRouterState = (path, search = undefined, params) => {
   const [pathname, searchParams] = fixRouteUrl(path).split("?");
-  routerState.pathname.val = pathname;
-  routerState.searchParams.val = new URLSearchParams(
+  routerState.pathname = pathname;
+  routerState.searchParams = new URLSearchParams(
     search || searchParams || "",
   );
-  routerState.params.val = params || {};
+  Object.assign(routerState.params, params || {});
 };

package/router/types.d.ts

@@ -4,7 +4,7 @@ import type {
   Element as VElement,
   TagFunc as IsoTagFunc,
 } from "mini-van-plate/van-plate";
-import van from "vanjs-core";
+// import van from "vanjs-core";
 import type {
   ChildDom,
   Primitive,
@@ -203,9 +203,9 @@ export type RouterState = {
  * 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>;
+  pathname: RouterState["pathname"];
+  searchParams: RouterState["searchParams"];
+  params?: RouterState["params"];
 };
 
 /**