valyrian.js 7.2.12 → 8.0.1

package/lib/node/utils/node.sw.js

@@ -0,0 +1,152 @@
+// eslint-disable-next-line no-console
+const Log = console.log;
+
+const config = {
+  version: "v1.2::",
+  name: "Valyrian.js",
+  // Critical resources and offline page
+  urls: ["/"]
+};
+
+const cacheName = config.version + config.name;
+const MAX_CACHE_SIZE = 50; // Max cache size
+
+// Send messages to clients (controlled pages)
+function sendMessageToClients(message) {
+  self.clients.matchAll().then((clients) => {
+    clients.forEach((client) => {
+      client.postMessage(message);
+    });
+  });
+}
+
+// Limit the cache size by deleting the oldest entries
+function limitCacheSize(name, size) {
+  caches.open(name).then((cache) => {
+    cache.keys().then((keys) => {
+      if (keys.length > size) {
+        cache.delete(keys[0]).then(() => {
+          limitCacheSize(name, size);
+        });
+      }
+    });
+  });
+}
+
+async function fetchRequest(event) {
+  Log("WORKER: fetch event for " + event.request.url);
+  try {
+    // Clone the request to store it in the cache
+    const fetchRequest = event.request.clone();
+    const response = await fetch(fetchRequest);
+
+    // Verify if the response is valid
+    if (response && response.status === 200 && response.type === "basic") {
+      // Clone the response to store it in the cache
+      const responseToCache = response.clone();
+      const cache = await caches.open(cacheName);
+      cache.put(event.request, responseToCache);
+
+      // Limit the cache size
+      limitCacheSize(cacheName, MAX_CACHE_SIZE);
+
+      Log("WORKER: fetch response stored in cache.", event.request.url);
+    }
+    return response;
+  } catch (error) {
+    Log("WORKER: fetch request failed.", error);
+
+    // Try to serve the cached response if available
+    const cachedResponse = await caches.match(event.request);
+    if (cachedResponse) {
+      Log("WORKER: fetch request failed, responding with cache.");
+      return cachedResponse;
+    }
+
+    // Send the offline page if no cache is available
+    const cache = await caches.open(cacheName);
+    const offlineResponse = await cache.match("/offline.html");
+    if (offlineResponse) {
+      return offlineResponse;
+    }
+
+    // Generic offline page
+    return new Response("<h1>Offline</h1>", {
+      status: 503,
+      statusText: "Service Unavailable",
+      headers: new Headers({
+        "Content-Type": "text/html"
+      })
+    });
+  }
+}
+
+self.addEventListener("fetch", (event) => {
+  // Ignore requests with the "only-if-cached" cache mode
+  if (event.request.cache === "only-if-cached" && event.request.mode !== "same-origin") {
+    return;
+  }
+
+  Log("WORKER: fetch event in progress.", event.request.url);
+
+  // Ignore requests that are not GET
+  if (event.request.method !== "GET") {
+    return;
+  }
+
+  // If the request is for the API, use the network first
+  if (event.request.url.includes("/api/")) {
+    event.respondWith(fetchRequest(event));
+  } else {
+    // Use the cache first for other requests
+    event.respondWith(
+      caches.match(event.request).then((response) => {
+        if (response) {
+          Log("WORKER: returning from cache.", event.request.url);
+          return response;
+        }
+        return fetchRequest(event);
+      })
+    );
+  }
+});
+
+self.addEventListener("install", (event) => {
+  Log("WORKER: installing version", cacheName);
+  event.waitUntil(
+    caches
+      .open(cacheName)
+      .then((cache) => {
+        return cache.addAll(config.urls);
+      })
+      .then(() => {
+        Log("WORKER: install completed.");
+      })
+  );
+});
+
+self.addEventListener("activate", (event) => {
+  Log("WORKER: activating new version", cacheName);
+
+  event.waitUntil(
+    caches.keys().then((keys) =>
+      Promise.all(
+        keys
+          // Filter the caches that belong to this app version
+          .filter((key) => key !== cacheName)
+          .map((key) => caches.delete(key))
+      ).then(() => {
+        Log("WORKER: old caches cleared.");
+        // Notify clients about the new version
+        sendMessageToClients({ type: "NEW_VERSION" });
+      })
+    )
+  );
+});
+
+// Listen for messages from clients
+self.addEventListener("message", (event) => {
+  if (event.data && event.data.type === "SKIP_WAITING") {
+    self.skipWaiting();
+  }
+});

package/lib/node/utils/session-storage.ts

@@ -0,0 +1,117 @@
+import fs from "fs";
+import path from "path";
+
+export class SessionStorage {
+  private storage: { [key: string]: string };
+  private limit: number;
+  private persist: boolean;
+  private filePath: string;
+  private directory: string = ".session-storage";
+
+  constructor({ persist = false, filePath = "./sessionData.json" }: { persist?: boolean; filePath?: string } = {}) {
+    this.storage = {};
+    this.limit = 5 * 1024 * 1024; // 5MB storage limit
+    this.persist = persist;
+    this.filePath = path.resolve(this.directory, filePath);
+
+    if (!fs.existsSync(this.directory)) {
+      fs.mkdirSync(this.directory, { recursive: true });
+    }
+
+    // Load data from file if persistence is enabled
+    if (this.persist) {
+      this.loadFromFile();
+    }
+  }
+
+  // Calculate total size in bytes of stored data
+  private getStorageSize(): number {
+    return new TextEncoder().encode(JSON.stringify(this.storage)).length;
+  }
+
+  // Check if storage limit is exceeded
+  private checkSizeLimit(): void {
+    const size = this.getStorageSize();
+    if (size > this.limit) {
+      throw new DOMException("Storage limit exceeded", "QuotaExceededError");
+    }
+  }
+
+  // Store value under the specified key
+  setItem(key: string | null | undefined, value: string | null | undefined): void {
+    if (key === null || key === undefined) {
+      throw new TypeError("Failed to execute 'setItem' on 'Storage': 1 argument required, but only 0 present.");
+    }
+
+    if (value === null) {
+      value = "null"; // Convert null to "null"
+    } else if (value === undefined) {
+      value = "undefined"; // Convert undefined to "undefined"
+    }
+
+    this.storage[key] = String(value); // Store as string
+    this.checkSizeLimit(); // Check storage limit
+    if (this.persist) {
+      this.saveToFile(); // Save to file if persistence is enabled
+    }
+  }
+
+  // Retrieve value stored under the specified key
+  getItem(key: string | null | undefined): string | null {
+    if (key === null || key === undefined) {
+      throw new TypeError("Failed to execute 'getItem' on 'Storage': 1 argument required, but only 0 present.");
+    }
+    return this.storage[key] || null; // Return null if key doesn't exist
+  }
+
+  // Remove the value under the specified key
+  removeItem(key: string | null | undefined): void {
+    if (key === null || key === undefined) {
+      throw new TypeError("Failed to execute 'removeItem' on 'Storage': 1 argument required, but only 0 present.");
+    }
+    delete this.storage[key];
+    if (this.persist) {
+      this.saveToFile(); // Save to file if persistence is enabled
+    }
+  }
+
+  // Clear all stored values
+  clear(): void {
+    this.storage = {};
+    if (this.persist) {
+      this.saveToFile(); // Save to file if persistence is enabled
+    }
+  }
+
+  // Return the number of stored items
+  get length(): number {
+    return Object.keys(this.storage).length;
+  }
+
+  // Return the key at the specified index
+  key(index: number): string | null {
+    const keys = Object.keys(this.storage);
+    return keys[index] || null;
+  }
+
+  // Save data to a file (only if persistence is enabled)
+  private saveToFile(): void {
+    try {
+      fs.writeFileSync(this.filePath, JSON.stringify(this.storage), "utf-8");
+    } catch (error) {
+      throw new Error(`Error saving data to file: ${(error as any).message}`);
+    }
+  }
+
+  // Load data from a file (only if persistence is enabled)
+  private loadFromFile(): void {
+    try {
+      if (fs.existsSync(this.filePath)) {
+        const data = fs.readFileSync(this.filePath, "utf-8");
+        this.storage = JSON.parse(data || "{}");
+      }
+    } catch (error) {
+      throw new Error(`Error loading data from file: ${(error as any).message}`);
+    }
+  }
+}

package/lib/node/utils/sw.ts

@@ -2,17 +2,15 @@ import fs from "fs";
 import path from "path";
 
 export function sw(file: string, options = {}) {
-  const swfiletemplate = path.resolve(__dirname, "./node.sw.tpl");
+  const swfiletemplate = path.resolve(__dirname, "./node.sw.js");
   const swTpl = fs.readFileSync(swfiletemplate, "utf8");
-  const opt = Object.assign(
-    {
-      version: "v1::",
-      name: "Valyrian.js",
-      urls: ["/"],
-      debug: false
-    },
-    options
-  );
+  const opt = {
+    version: "v1::",
+    name: "Valyrian.js",
+    urls: ["/"],
+    debug: false,
+    ...options
+  };
   let contents = swTpl
     .replace("v1::", "v" + opt.version + "::")
     .replace("Valyrian.js", opt.name)
@@ -24,3 +22,29 @@ export function sw(file: string, options = {}) {
 
   fs.writeFileSync(file, contents, "utf8");
 }
+
+/*
+  sw("sw.js", {
+    version: "1",
+    name: "Valyrian.js",
+    urls: ["/", "/index.html"],
+    debug: false
+  });
+
+
+  // On the client side
+  if ("serviceWorker" in navigator) {
+    navigator.serviceWorker.register("/service-worker.js");
+
+    navigator.serviceWorker.addEventListener("message", (event) => {
+      if (event.data && event.data.type === "NEW_VERSION") {
+        // Notify the user about the new version and ask if they want to update
+        if (confirm("Hay una nueva versión disponible. ¿Deseas actualizar?")) {
+          // Send a message to the service worker to skip the waiting
+          navigator.serviceWorker.controller.postMessage({ type: "SKIP_WAITING" });
+          window.location.reload();
+        }
+      }
+    });
+  }
+*/

package/lib/node/utils/tree-adapter.ts

@@ -53,6 +53,16 @@ export class Node implements Node {
     this.parent_node = node;
   }
 
+  #dataset: Record<string | number, any> = {};
+
+  get dataset() {
+    return this.#dataset;
+  }
+
+  set dataset(value) {
+    this.#dataset = value;
+  }
+
   constructor() {}
 
   appendChild<T extends Node>(node: T): T {
@@ -112,6 +122,11 @@ export class Node implements Node {
           node.setAttribute(this.attributes[i].nodeName, this.attributes[i].nodeValue);
         }
       }
+
+      for (const key in this.dataset) {
+        node.dataset[key] = this.dataset[key];
+      }
+
       if (deep) {
         for (let i = 0, l = this.childNodes.length; i < l; i++) {
           node.appendChild(this.childNodes[i].cloneNode(deep));
@@ -431,8 +446,11 @@ export class Document extends Element {
     super();
     this.nodeType = 9;
     this.nodeName = "#document";
+    this.body = this.createElement("body");
   }
 
+  body: Element;
+
   createDocumentFragment(): DocumentFragment {
     return new DocumentFragment();
   }
@@ -472,7 +490,7 @@ const selfClosingTags = [
   "!doctype"
 ];
 
-export function domToHtml(dom: Element): string {
+export function domToHtml(dom: Element | Text | DocumentFragment): string {
   if (dom.nodeType === 3) {
     return dom.textContent;
   }

package/lib/pulse-store/index.ts

@@ -0,0 +1,188 @@
+/* eslint-disable no-console */
+import { updateVnode, Vnode, VnodeWithDom, current } from "valyrian.js";
+import { deepCloneUnfreeze, deepFreeze, hasChanged } from "valyrian.js/utils";
+
+type State = Record<string, any>;
+
+// An action or pulse type definition
+// eslint-disable-next-line no-unused-vars
+export type Pulse<StateType> = (state: StateType, ...args: any[]) => void | Promise<void>;
+
+// A collection of pulses
+export type Pulses<StateType> = {
+  [key: string]: Pulse<StateType>;
+};
+
+// A proxy state
+// This is a state that is proxied to automatically subscribe to changes
+// And is used internally to update the vnode when the state changes
+type ProxyState<StateType> = StateType & {
+  [key: string]: any;
+};
+
+// The effect stack
+const effectStack: Function[] = [];
+
+type StorePulses<PulsesType> = {
+  [K in keyof PulsesType]: PulsesType[K] extends (state: any, ...args: infer Args) => infer R
+    ? (...args: Args) => R
+    : never;
+};
+
+// Creates the store
+// eslint-disable-next-line sonarjs/cognitive-complexity
+function createStore<StateType extends State, PulsesType extends Pulses<StateType>>(
+  initialState: StateType | (() => StateType) | null,
+  pulses: PulsesType,
+  immutable = false
+): () => [ProxyState<StateType>, StorePulses<PulsesType>] {
+  const subscribers = new Set<Function>();
+  const vnodesToUpdate = new WeakSet<Vnode>();
+
+  // Initialize the localState for this store
+  const localState: StateType =
+    (typeof initialState === "function" ? initialState() : initialState) || ({} as StateType);
+
+  function isMutable() {
+    if (immutable) {
+      throw new Error("You need to call a pulse to modify the state");
+    }
+  }
+
+  // We create a proxy for the state
+  const proxyState = new Proxy(localState, {
+    get: (state, prop: string) => {
+      const currentEffect = effectStack[effectStack.length - 1];
+      if (currentEffect && !subscribers.has(currentEffect)) {
+        subscribers.add(currentEffect);
+      }
+
+      const currentVnode = current.vnode as VnodeWithDom;
+      if (currentVnode && !vnodesToUpdate.has(currentVnode)) {
+        const subscription = () => {
+          if (!currentVnode.dom) {
+            subscribers.delete(subscription);
+            vnodesToUpdate.delete(currentVnode);
+            return;
+          }
+
+          updateVnode(currentVnode);
+        };
+
+        subscribers.add(subscription);
+        vnodesToUpdate.add(currentVnode);
+      }
+
+      return state[prop];
+    },
+    // If the user tries to set directly it will throw an error
+    set: (state, prop: string, value: any) => {
+      isMutable();
+      Reflect.set(state, prop, value);
+      return true;
+    },
+    // If the user tries to delete directly it will throw an error
+    deleteProperty: (state, prop: string) => {
+      isMutable();
+      Reflect.deleteProperty(state, prop);
+      return true;
+    }
+  });
+
+  function syncState(newState: StateType) {
+    for (const key in newState) {
+      localState[key] = immutable ? deepFreeze(newState[key]) : newState[key];
+    }
+
+    for (const key in localState) {
+      if (!(key in newState)) {
+        Reflect.deleteProperty(localState, key);
+      }
+    }
+  }
+
+  function setState(newState: StateType) {
+    if (!hasChanged(localState, newState)) {
+      return;
+    }
+
+    syncState(newState);
+
+    subscribers.forEach((subscriber) => subscriber());
+  }
+
+  function getPulseMethod(key: string) {
+    return (...args: any[]) => {
+      const currentState = deepCloneUnfreeze(localState);
+      const pulse = pulses[key](currentState, ...args);
+
+      if (pulse instanceof Promise) {
+        return pulse
+          .then(() => setState(currentState))
+          .catch((error) => {
+            console.error("Error in pulse:", error);
+          });
+      }
+
+      setState(currentState);
+    };
+  }
+
+  const boundPulses: Record<string, Pulse<StateType>> = {};
+  for (const key in pulses) {
+    if (typeof pulses[key] !== "function") {
+      throw new Error(`Pulse '${key}' must be a function`);
+    }
+    boundPulses[key] = getPulseMethod(key);
+  }
+
+  const pulsesProxy = new Proxy(boundPulses, {
+    get: (pulses, prop: string) => {
+      if (!(prop in pulses)) {
+        throw new Error(`Pulse '${prop}' does not exist`);
+      }
+      return pulses[prop];
+    }
+  });
+
+  function usePulseStore(): [ProxyState<StateType>, StorePulses<PulsesType>] {
+    return [proxyState, pulsesProxy as StorePulses<PulsesType>];
+  }
+
+  syncState(localState);
+
+  return usePulseStore;
+}
+
+// Creates a pulse store with an immutable state by default
+export function createPulseStore<StateType extends State, PulsesType extends Pulses<StateType>>(
+  initialState: StateType,
+  pulses: PulsesType
+): () => [ProxyState<StateType>, StorePulses<PulsesType>] {
+  return createStore(initialState, pulses, true);
+}
+
+// Creates a mutable store, useful for performance, but not recommended
+export function createMutableStore<StateType extends State, PulsesType extends Pulses<StateType>>(
+  initialState: StateType,
+  pulses: PulsesType
+): () => [ProxyState<StateType>, StorePulses<PulsesType>] {
+  console.warn(
+    "Warning: You are working with a mutable state. This can lead to unpredictable behavior. All state changes made outside of a pulse will not trigger a re-render."
+  );
+  return createStore(initialState, pulses, false);
+}
+
+// Creates an effect
+export function createEffect(effect: Function) {
+  const runEffect = () => {
+    try {
+      effectStack.push(runEffect);
+      effect();
+    } finally {
+      effectStack.pop();
+    }
+  };
+
+  runEffect();
+}