valyrian.js 7.2.11 → 8.0.0

package/lib/native-store/index.ts

@@ -0,0 +1,106 @@
+import { isNodeJs } from "valyrian.js";
+
+/* eslint-disable no-console */
+export enum StorageType {
+  // eslint-disable-next-line no-unused-vars
+  Session = "session",
+  // eslint-disable-next-line no-unused-vars
+  Local = "local"
+}
+
+export interface NativeStorageInterface {
+  state: Record<string, any>;
+  // eslint-disable-next-line no-unused-vars
+  set(key: string, value: any): void;
+  // eslint-disable-next-line no-unused-vars
+  get(key: string): any;
+  // eslint-disable-next-line no-unused-vars
+  delete(key: string): void;
+  load(): void;
+  clear(): void;
+}
+
+const ids = new Set<string>();
+
+function getStorage(storageType: StorageType) {
+  if (isNodeJs && typeof localStorage === "undefined") {
+    throw new Error(
+      `localStorage and sessionStorage are not available in Node.js, to use it in your project, you need to "import "valyrian.js/node"`
+    );
+  }
+  return storageType === StorageType.Session ? sessionStorage : localStorage;
+}
+
+export function createNativeStore<T>(
+  key: string,
+  definition: Record<string, any> = {},
+  storageType: StorageType = StorageType.Local,
+  reuseIfExist = false
+): NativeStorageInterface & T {
+  const nativeStore = getStorage(storageType);
+
+  if (ids.has(key)) {
+    if (reuseIfExist) {
+      // eslint-disable-next-line no-console
+      console.warn(`Store with key ${key} already exists and will be reused`);
+    } else {
+      throw new Error(`Store with key ${key} already exists`);
+    }
+  }
+  ids.add(key);
+
+  const id = key;
+
+  const Store: NativeStorageInterface = {
+    state: {},
+    set(key, value) {
+      try {
+        this.state[key] = value;
+        nativeStore.setItem(id, JSON.stringify(this.state));
+      } catch (e) {
+        console.error("Error setting item in storage:", e);
+      }
+    },
+    get(key) {
+      if (Object.keys(this.state).length === 0) {
+        this.load();
+      }
+      return this.state[key];
+    },
+    delete(key) {
+      try {
+        Reflect.deleteProperty(this.state, key);
+        nativeStore.setItem(id, JSON.stringify(this.state));
+      } catch (e) {
+        console.error("Error deleting item in storage:", e);
+      }
+    },
+    load() {
+      try {
+        const state = nativeStore.getItem(id);
+        if (!state) {
+          this.state = {};
+          nativeStore.setItem(id, JSON.stringify(this.state));
+          return;
+        }
+        this.state = JSON.parse(state);
+      } catch (e) {
+        console.error("Error loading state from storage:", e);
+        this.state = {};
+      }
+    },
+    clear() {
+      try {
+        this.state = {};
+        nativeStore.removeItem(id);
+      } catch (e) {
+        console.error("Error clearing storage:", e);
+      }
+    },
+    ...definition
+  };
+
+  Store.load();
+
+  return Store as NativeStorageInterface & T;
+}

package/lib/node/index.ts

@@ -2,17 +2,19 @@ import { document, domToHtml, domToHyperscript, htmlToDom, htmlToHyperscript } f
 import { mount, unmount } from "valyrian.js";
 
 import FormData from "form-data";
-// import fetch from "node-fetch";
 import { icons } from "./utils/icons";
 import { inline } from "./utils/inline";
 import { sw } from "./utils/sw";
+import { SessionStorage } from "./utils/session-storage";
 
 global.FormData = FormData as any;
 global.document = document as any;
+global.sessionStorage = new SessionStorage();
+global.localStorage = new SessionStorage();
 
 function render(...args: any[]) {
-  let Component = () => args;
-  let result = mount("div", Component);
+  const Component = () => args;
+  const result = mount("div", Component);
   unmount();
   return result;
 }

package/lib/node/utils/icons.ts

@@ -33,7 +33,7 @@ interface IconsOptions {
 }
 
 export async function icons(source: string, configuration?: IconsOptions) {
-  let options = {
+  const options = {
     ...icons.options,
     ...(configuration || {})
   };
@@ -49,20 +49,20 @@ export async function icons(source: string, configuration?: IconsOptions) {
   const { favicons } = await import("favicons");
 
   try {
-    let response = await favicons(source, options);
+    const response = await favicons(source, options);
 
     if (options.iconsPath) {
-      for (let i in response.images) {
+      for (const i in response.images) {
         fs.writeFileSync(options.iconsPath + response.images[i].name, response.images[i].contents);
       }
 
-      for (let i in response.files) {
+      for (const i in response.files) {
         fs.writeFileSync(options.iconsPath + response.files[i].name, response.files[i].contents);
       }
     }
 
     if (options.linksViewPath) {
-      let html = `
+      const html = `
   function Links(){
     return ${htmlToHyperscript(response.html.join(""))};
   }

package/lib/node/utils/inline.ts

@@ -12,13 +12,13 @@ export async function inline(
   options: Record<string, any> = {}
 ) {
   if (typeof file === "string") {
-    let ext = file.split(".").pop();
+    const ext = file.split(".").pop();
     if (ext && /(js|cjs|jsx|mjs|ts|tsx)/.test(ext)) {
       if (/(ts|tsx)/.test(ext) && !options.noValidate) {
-        let declarationDir = options.declarationDir;
-        let emitDeclaration = !!declarationDir;
+        const declarationDir = options.declarationDir;
+        const emitDeclaration = !!declarationDir;
 
-        let tscProgOptions = {
+        const tscProgOptions = {
           basePath: process.cwd(), // always required, used for relative paths
           configFilePath: "tsconfig.json", // config to inherit from (optional)
           files: [file],
@@ -53,7 +53,7 @@ export async function inline(
         tsc.build(tscProgOptions);
       }
 
-      let esbuildOptions = {
+      const esbuildOptions = {
         entryPoints: [file],
         bundle: "bundle" in options ? options.bundle : true,
         sourcemap: "external",
@@ -72,14 +72,14 @@ export async function inline(
         ...(options.esbuild || {})
       };
 
-      let result = await esbuild.build(esbuildOptions);
+      const result = await esbuild.build(esbuildOptions);
       if (result.outputFiles?.length !== 2) {
         throw new Error(result.errors.join("\n"));
       }
 
       if (options.compact) {
         const terser = await import("terser");
-        let result2 = await terser.minify(result.outputFiles[1].text, {
+        const result2 = await terser.minify(result.outputFiles[1].text, {
           sourceMap: {
             content: result.outputFiles[0].text.toString()
           },
@@ -97,16 +97,16 @@ export async function inline(
           throw new Error("Unknown error");
         }
 
-        let mapBase64 = Buffer.from(result2.map.toString()).toString("base64");
-        let suffix = `//# sourceMappingURL=data:application/json;charset=utf-8;base64,${mapBase64}`;
+        const mapBase64 = Buffer.from(result2.map.toString()).toString("base64");
+        const suffix = `//# sourceMappingURL=data:application/json;charset=utf-8;base64,${mapBase64}`;
         return { raw: result2.code, map: suffix, file };
       } else {
-        let mapBase64 = Buffer.from(result.outputFiles[0].text.toString()).toString("base64");
-        let suffix = `//# sourceMappingURL=data:application/json;charset=utf-8;base64,${mapBase64}`;
+        const mapBase64 = Buffer.from(result.outputFiles[0].text.toString()).toString("base64");
+        const suffix = `//# sourceMappingURL=data:application/json;charset=utf-8;base64,${mapBase64}`;
         return { raw: result.outputFiles[1].text, map: suffix, file };
       }
     } else if (ext && /(css|scss|styl)/.test(ext)) {
-      let result = await new CleanCSS({
+      const result = await new CleanCSS({
         sourceMap: true,
         level: {
           1: {
@@ -133,18 +133,18 @@ inline.uncss = async function (
   css: string,
   options: Record<string, any> = {}
 ) {
-  let html = await Promise.all(renderedHtml);
+  const html = await Promise.all(renderedHtml);
 
-  let contents = html.map((item) => {
+  const contents = html.map((item) => {
     return {
       raw: item,
       extension: "html"
     };
   });
 
-  let purgecss = new PurgeCSS();
+  const purgecss = new PurgeCSS();
 
-  let output = await purgecss.purge({
+  const output = await purgecss.purge({
     fontFace: true,
     keyframes: true,
     variables: true,
@@ -154,7 +154,7 @@ inline.uncss = async function (
     css: [{ raw: css }]
   });
 
-  let cleanCss = await new CleanCSS({
+  const cleanCss = await new CleanCSS({
     sourceMap: false,
     level: {
       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 = {}) {
-  let swfiletemplate = path.resolve(__dirname, "./node.sw.tpl");
-  let swTpl = fs.readFileSync(swfiletemplate, "utf8");
-  let opt = Object.assign(
-    {
-      version: "v1::",
-      name: "Valyrian.js",
-      urls: ["/"],
-      debug: false
-    },
-    options
-  );
+  const swfiletemplate = path.resolve(__dirname, "./node.sw.js");
+  const swTpl = fs.readFileSync(swfiletemplate, "utf8");
+  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();
+        }
+      }
+    });
+  }
+*/