valyrian.js 7.1.1 → 7.2.0

package/lib/proxy-signal/index.ts

@@ -0,0 +1,187 @@
+import { update } from "valyrian.js";
+
+/* eslint-disable no-use-before-define */
+interface Cleanup {
+  (): void;
+}
+
+interface Subscription {
+  // eslint-disable-next-line no-unused-vars
+  (value: ProxySignal["value"]): void | Cleanup;
+}
+
+interface Subscriptions extends Map<Subscription, Cleanup> {}
+
+interface Getter {
+  // eslint-disable-next-line no-unused-vars
+  (value: ProxySignal["value"]): any;
+}
+
+interface Getters {
+  [key: string | symbol]: Getter;
+}
+
+interface ProxySignal {
+  // Works as a getter of the value
+  (): ProxySignal["value"];
+  // Works as a subscription to the value
+  // eslint-disable-next-line no-unused-vars
+  (value: Subscription): ProxySignal;
+  // Works as a setter with a path and a handler
+  // eslint-disable-next-line no-unused-vars
+  (path: string, handler: (valueAtPathPosition: any) => any): ProxySignal["value"];
+  // Works as a setter with a path and a value
+  // eslint-disable-next-line no-unused-vars
+  (path: string, value: any): ProxySignal["value"];
+  // Works as a setter with a value
+  // eslint-disable-next-line no-unused-vars
+  (value: any): ProxySignal["value"];
+  // Gets the current value of the signal.
+  value: any;
+  // Cleanup function to be called to remove all subscriptions.
+  cleanup: () => void;
+  // Creates a getter on the signal.
+  // eslint-disable-next-line no-unused-vars
+  getter: (name: string, handler: Getter) => any;
+  // To access the getters on the signal.
+  [key: string | number | symbol]: any;
+}
+
+function makeUnsubscribe(
+  subscriptions: Subscriptions,
+  computed: ProxySignal,
+  handler: Subscription,
+  cleanup?: Cleanup
+) {
+  if (typeof cleanup === "function") {
+    computed.cleanup = cleanup;
+  }
+  computed.unsubscribe = () => {
+    subscriptions.delete(handler);
+    computed?.cleanup();
+  };
+}
+
+function createSubscription(signal: ProxySignal, subscriptions: Subscriptions, handler: Subscription) {
+  if (subscriptions.has(handler) === false) {
+    // eslint-disable-next-line no-use-before-define
+    let computed = ProxySignal(() => handler(signal.value));
+    let cleanup = computed(); // Execute to register itself
+    makeUnsubscribe(subscriptions, computed, handler, cleanup);
+    subscriptions.set(handler, computed);
+  }
+
+  return subscriptions.get(handler);
+}
+
+let updateTimeout: any;
+function delayedUpdate() {
+  clearTimeout(updateTimeout);
+  updateTimeout = setTimeout(update);
+}
+
+// eslint-disable-next-line sonarjs/cognitive-complexity
+export function ProxySignal(value: any): ProxySignal {
+  let subscriptions = new Map();
+  let getters: Getters = {};
+
+  let forceUpdate = false;
+
+  let signal: ProxySignal = new Proxy(
+    // eslint-disable-next-line no-unused-vars
+    function (valOrPath?: any | Subscription, handler?: (valueAtPathPosition: any) => any) {
+      // Works as a getter
+      if (typeof valOrPath === "undefined") {
+        return signal.value;
+      }
+
+      // Works as a subscription
+      if (typeof valOrPath === "function") {
+        return createSubscription(signal, subscriptions, valOrPath);
+      }
+
+      // Works as a setter with a path
+      if (typeof valOrPath === "string" && typeof handler !== "undefined") {
+        let parsed = valOrPath.split(".");
+        let result = signal.value;
+        let next;
+        while (parsed.length) {
+          next = parsed.shift() as string;
+          if (parsed.length > 0) {
+            if (typeof result[next] !== "object") {
+              result[next] = {};
+            }
+            result = result[next];
+          } else {
+            result[next] = typeof handler === "function" ? handler(result[next]) : handler;
+          }
+        }
+        forceUpdate = true;
+        signal.value = signal.value;
+        return signal.value;
+      }
+
+      // Works as a setter with a value
+      signal.value = valOrPath;
+      return signal.value;
+    } as ProxySignal,
+    {
+      set(state, prop, val) {
+        if (prop === "value" || prop === "unsubscribe" || prop === "cleanup") {
+          let old = state[prop];
+          state[prop] = val;
+          if (prop === "value" && (forceUpdate || val !== old)) {
+            forceUpdate = false;
+            for (let [handler, computed] of subscriptions) {
+              computed.cleanup();
+              let cleanup = handler(val);
+              makeUnsubscribe(subscriptions, computed, handler, cleanup);
+            }
+            delayedUpdate();
+          }
+          return true;
+        }
+        return false;
+      },
+      get(state, prop) {
+        if (prop === "value") {
+          return typeof state.value === "function" ? state.value() : state.value;
+        }
+
+        if (prop === "cleanup" || prop === "unsubscribe" || prop === "getter") {
+          return state[prop];
+        }
+
+        if (prop in getters) {
+          return getters[prop](state.value);
+        }
+      }
+    }
+  );
+
+  Object.defineProperties(signal, {
+    value: { value, writable: true, enumerable: true },
+    cleanup: {
+      value() {
+        // eslint-disable-next-line no-unused-vars
+        for (let [handler, computed] of subscriptions) {
+          computed.unsubscribe();
+        }
+      },
+      writable: true,
+      enumerable: true
+    },
+    getter: {
+      value(name: string, handler: Getter) {
+        if (name in getters) {
+          throw new Error("Named computed already exists.");
+        }
+
+        getters[name] = handler;
+      },
+      enumerable: true
+    }
+  });
+
+  return signal;
+}

package/lib/router/index.ts

@@ -52,10 +52,11 @@ interface RouterInterface {
   path: string;
   params: Record<string, string | number | any>;
   matches: string[];
+  pathPrefix: string;
   // eslint-disable-next-line no-unused-vars
   add(method: string, ...args: Middlewares): Router;
   // eslint-disable-next-line no-unused-vars
-  use(...args: string[] | Middlewares | Router[]): Router;
+  use(...args: (string | Middleware | Router)[]): Router;
 
   routes(): string[];
   // eslint-disable-next-line no-unused-vars
@@ -71,6 +72,18 @@ function flat(array: any) {
   return Array.isArray(array) ? array.flat(Infinity) : [array];
 }
 
+function getPathWithoutPrefix(path: string, prefix: string) {
+  return getPathWithoutLastSlash(path.replace(new RegExp(`^${prefix}`), ""));
+}
+
+function getPathWithoutLastSlash(path: string) {
+  let pathWithoutLastSlash = path.replace(/\/$/, "");
+  if (pathWithoutLastSlash === "") {
+    pathWithoutLastSlash = "/";
+  }
+  return pathWithoutLastSlash;
+}
+
 const addPath = ({
   router,
   method,
@@ -145,7 +158,7 @@ function searchMiddlewares(router: RouterInterface, path: string): Middlewares {
       matches.push(...match);
 
       if (item.method === "add") {
-        router.path = item.path;
+        router.path = getPathWithoutPrefix(item.path, router.pathPrefix);
         break;
       }
     }
@@ -211,12 +224,15 @@ export class Router implements RouterInterface {
   }
 
   add(path: string, ...middlewares: Middlewares): Router {
-    addPath({ router: this, method: "add", path: `${this.pathPrefix}${path}`, middlewares });
+    let pathWithoutLastSlash = getPathWithoutLastSlash(`${this.pathPrefix}${path}`);
+    addPath({ router: this, method: "add", path: pathWithoutLastSlash, middlewares });
     return this;
   }
 
   use(...middlewares: Middlewares | Router[] | string[]): Router {
-    let path = `${this.pathPrefix}${typeof middlewares[0] === "string" ? middlewares.shift() : "/"}`;
+    let path = getPathWithoutLastSlash(
+      `${this.pathPrefix}${typeof middlewares[0] === "string" ? middlewares.shift() : "/"}`
+    );
 
     for (const item of middlewares) {
       if (item instanceof Router) {
@@ -249,7 +265,7 @@ export class Router implements RouterInterface {
       throw new Error("router.url.required");
     }
 
-    const constructedPath = `${this.pathPrefix}${path}`;
+    let constructedPath = getPathWithoutLastSlash(`${this.pathPrefix}${path}`);
     const parts = constructedPath.split("?", 2);
     this.url = constructedPath;
     this.query = parseQuery(parts[1]);
@@ -309,7 +325,7 @@ export function mountRouter(elementContainer: string | any, router: Router): voi
 
   if (!isNodeJs) {
     function onPopStateGoToRoute(): void {
-      let pathWithoutPrefix = document.location.pathname.replace(router.pathPrefix, "");
+      let pathWithoutPrefix = getPathWithoutPrefix(document.location.pathname, router.pathPrefix);
       (router as unknown as Router).go(pathWithoutPrefix, undefined, true);
     }
     window.addEventListener("popstate", onPopStateGoToRoute, false);

package/lib/signal/index.ts

@@ -1,182 +1,102 @@
-import { update } from "valyrian.js";
-
-/* eslint-disable no-use-before-define */
-interface Cleanup {
-  (): void;
-}
-
-interface Subscription {
-  // eslint-disable-next-line no-unused-vars
-  (value: Signal["value"]): void | Cleanup;
-}
+import { VnodeWithDom, current, update, updateVnode, v } from "valyrian.js";
+
+export function Signal(initialValue) {
+  // Create a copy of the current context object
+  const context = { ...current };
+
+  // Check if the context object has a vnode property
+  if (context.vnode) {
+    // Is first call
+    if (!context.vnode.signals) {
+      // Set the signals property to the signals property of the oldVnode object, or an empty array if that doesn't exist
+      context.vnode.signals = context.oldVnode?.signals || [];
+      // Set the calls property to -1
+      context.vnode.calls = -1;
+      // Set the subscribers property to the subscribers property of the oldVnode object, or an empty array if that doesn't exist
+      context.vnode.subscribers = context.oldVnode?.subscribers || [];
+
+      // Set the initialChildren property of the vnode object to a copy of the children array of the vnode object
+      context.vnode.initialChildren = [...context.vnode.children];
+    }
 
-interface Subscriptions extends Map<Subscription, Cleanup> {}
+    // Assign the signal variable to the signal stored at the index of the vnode object's calls property in the vnode's signals array
+    let signal = context.vnode.signals[++context.vnode.calls];
 
-interface Getter {
-  // eslint-disable-next-line no-unused-vars
-  (value: Signal["value"]): any;
-}
+    // If a signal has already been assigned to the signal variable, return it
+    if (signal) {
+      return signal;
+    }
+  }
 
-interface Getters {
-  [key: string | symbol]: Getter;
-}
+  // Declare a variable to store the current value of the Signal
+  let value = initialValue;
 
-interface Signal {
-  // Works as a getter of the value
-  (): Signal["value"];
-  // Works as a subscription to the value
-  // eslint-disable-next-line no-unused-vars
-  (value: Subscription): Signal;
-  // Works as a setter with a path and a handler
-  // eslint-disable-next-line no-unused-vars
-  (path: string, handler: (valueAtPathPosition: any) => any): Signal["value"];
-  // Works as a setter with a path and a value
-  // eslint-disable-next-line no-unused-vars
-  (path: string, value: any): Signal["value"];
-  // Works as a setter with a value
-  // eslint-disable-next-line no-unused-vars
-  (value: any): Signal["value"];
-  // Gets the current value of the signal.
-  value: any;
-  // Cleanup function to be called to remove all subscriptions.
-  cleanup: () => void;
-  // Creates a getter on the signal.
-  // eslint-disable-next-line no-unused-vars
-  getter: (name: string, handler: Getter) => any;
-  // To access the getters on the signal.
-  [key: string | number | symbol]: any;
-}
+  // Create an array to store functions that have subscribed to changes to the Signal's value
+  const subscribers = [];
 
-function makeUnsubscribe(subscriptions: Subscriptions, computed: Signal, handler: Subscription, cleanup?: Cleanup) {
-  if (typeof cleanup === "function") {
-    computed.cleanup = cleanup;
-  }
-  computed.unsubscribe = () => {
-    subscriptions.delete(handler);
-    computed?.cleanup();
+  // Define a function that allows other parts of the code to subscribe to changes to the Signal's value
+  const subscribe = (callback) => {
+    // Add the callback function to the subscribers array
+    if (subscribers.indexOf(callback) === -1) {
+      subscribers.push(callback);
+    }
   };
-}
 
-function createSubscription(signal: Signal, subscriptions: Subscriptions, handler: Subscription) {
-  if (subscriptions.has(handler) === false) {
-    // eslint-disable-next-line no-use-before-define
-    let computed = Signal(() => handler(signal.value));
-    let cleanup = computed(); // Execute to register itself
-    makeUnsubscribe(subscriptions, computed, handler, cleanup);
-    subscriptions.set(handler, computed);
+  // Define a function that returns the current value of the Signal
+  function get() {
+    return value;
   }
+  // Add value, toJSON, valueOf, and toString properties to the get function
+  get.value = value;
+  get.toJSON = get.valueOf = get;
+  get.toString = () => `${value}`;
+
+  // Define a function that allows the value of the Signal to be updated and notifies any subscribed functions of the change
+  const set = (newValue) => {
+    // Update the value of the Signal
+    value = newValue;
+    // Update the value property of the get function
+    get.value = value;
+    // Call each subscribed function with the new value of the Signal as an argument
+    for (let i = 0, l = subscribers.length; i < l; i++) {
+      subscribers[i](value);
+    }
 
-  return subscriptions.get(handler);
-}
+    // Check if the context object has a vnode property
+    if (context.vnode) {
+      // If it does, create a new vnode object based on the original vnode, its children, and its DOM and SVG properties
+      let newVnode = v(context.vnode.tag, context.vnode.props, ...context.vnode.initialChildren) as VnodeWithDom;
+      newVnode.dom = context.vnode.dom;
+      newVnode.isSVG = context.vnode.isSVG;
+
+      // Clear the subscribers array by setting the length property to 0
+      context.vnode.subscribers.forEach(
+        (subscribers) =>
+          // Setting the length property to 0 is faster than clearing the array with a loop
+          (subscribers.length = 0)
+      );
+
+      // Clear the subscribers array by setting it to an empty array
+      context.vnode.subscribers = [];
+
+      // Return the result of updating the original vnode with the new vnode
+      return updateVnode(newVnode, context.vnode);
+    }
 
-let updateTimeout: any;
-function delayedUpdate() {
-  clearTimeout(updateTimeout);
-  updateTimeout = setTimeout(update);
-}
+    // If the context object doesn't have a vnode property, return the result of calling the update function
+    return update();
+  };
 
-// eslint-disable-next-line sonarjs/cognitive-complexity
-export function Signal(value: any): Signal {
-  let subscriptions = new Map();
-  let getters: Getters = {};
-
-  let forceUpdate = false;
-
-  let signal: Signal = new Proxy(
-    // eslint-disable-next-line no-unused-vars
-    function (valOrPath?: any | Subscription, handler?: (valueAtPathPosition: any) => any) {
-      // Works as a getter
-      if (typeof valOrPath === "undefined") {
-        return signal.value;
-      }
-
-      // Works as a subscription
-      if (typeof valOrPath === "function") {
-        return createSubscription(signal, subscriptions, valOrPath);
-      }
-
-      // Works as a setter with a path
-      if (typeof valOrPath === "string" && typeof handler !== "undefined") {
-        let parsed = valOrPath.split(".");
-        let result = signal.value;
-        let next;
-        while (parsed.length) {
-          next = parsed.shift() as string;
-          if (parsed.length > 0) {
-            if (typeof result[next] !== "object") {
-              result[next] = {};
-            }
-            result = result[next];
-          } else {
-            result[next] = typeof handler === "function" ? handler(result[next]) : handler;
-          }
-        }
-        forceUpdate = true;
-        signal.value = signal.value;
-        return signal.value;
-      }
-
-      // Works as a setter with a value
-      signal.value = valOrPath;
-      return signal.value;
-    } as Signal,
-    {
-      set(state, prop, val) {
-        if (prop === "value" || prop === "unsubscribe" || prop === "cleanup") {
-          let old = state[prop];
-          state[prop] = val;
-          if (prop === "value" && (forceUpdate || val !== old)) {
-            forceUpdate = false;
-            for (let [handler, computed] of subscriptions) {
-              computed.cleanup();
-              let cleanup = handler(val);
-              makeUnsubscribe(subscriptions, computed, handler, cleanup);
-            }
-            delayedUpdate();
-          }
-          return true;
-        }
-        return false;
-      },
-      get(state, prop) {
-        if (prop === "value") {
-          return typeof state.value === "function" ? state.value() : state.value;
-        }
-
-        if (prop === "cleanup" || prop === "unsubscribe" || prop === "getter") {
-          return state[prop];
-        }
-
-        if (prop in getters) {
-          return getters[prop](state.value);
-        }
-      }
-    }
-  );
-
-  Object.defineProperties(signal, {
-    value: { value, writable: true, enumerable: true },
-    cleanup: {
-      value() {
-        // eslint-disable-next-line no-unused-vars
-        for (let [handler, computed] of subscriptions) {
-          computed.unsubscribe();
-        }
-      },
-      writable: true,
-      enumerable: true
-    },
-    getter: {
-      value(name: string, handler: Getter) {
-        if (name in getters) {
-          throw new Error("Named computed already exists.");
-        }
-
-        getters[name] = handler;
-      },
-      enumerable: true
-    }
-  });
+  // Assign the signal variable an array containing the get, set, and subscribe functions
+  let signal = [get, set, subscribe];
+
+  // If the context object has a vnode property, add the signal to the vnode's signals array
+  // and add the subscribers array to the vnode's subscribers array
+  if (context.vnode) {
+    context.vnode.signals.push(signal);
+    context.vnode.subscribers.push(subscribers);
+  }
 
+  // Return the signal
   return signal;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valyrian.js",
-  "version": "7.1.1",
+  "version": "7.2.0",
   "description": "Lightweight steel to forge PWAs. (Minimal Frontend Framework with server side rendering and other capabilities)",
   "repository": "git@github.com:Masquerade-Circus/valyrian.js.git",
   "author": "Masquerade <christian@masquerade-circus.net>",
@@ -83,7 +83,7 @@
     "typescript": "^4.8.3"
   },
   "devDependencies": {
-    "@release-it/conventional-changelog": "^5.1.0",
+    "@release-it/conventional-changelog": "^5.1.1",
     "@types/clean-css": "^4.2.5",
     "@types/node": "^18.7.16",
     "@types/node-fetch": "^2.6.2",
@@ -91,7 +91,6 @@
     "@types/source-map": "^0.5.7",
     "@typescript-eslint/eslint-plugin": "^5.36.2",
     "@typescript-eslint/parser": "^5.36.2",
-    "browser-sync": "^2.27.10",
     "buffalo-test": "^2.0.0",
     "compression": "^1.7.4",
     "cross-env": "^7.0.3",
@@ -100,7 +99,7 @@
     "eslint": "^8.23.1",
     "eslint-plugin-sonarjs": "^0.15.0",
     "expect": "^29.0.3",
-    "fastify": "^4.5.3",
+    "fastify": "^4.10.2",
     "gzip-size": "^7.0.0",
     "mocha": "^10.0.0",
     "nodemon": "^2.0.19",