structured-fw 1.7.5 → 1.7.8

package/README.md

@@ -206,6 +206,8 @@ Session allows you to store temporary data for the users of your web application
 
 Session data is tied to a visitor via sessionId, which is always available on `RequestContext`, which means you can interact with session data from routes and server side part of your components.
 
+*Session data is stored in memory, which means it is lost when you restart the app. If you want to have persistent sessions that survive restart, you can use [structured-plugin-session-redis](https://www.npmjs.com/package/structured-plugin-session-redis).*
+
 **Configuration**\
 `StructuredConfig`.`session`:
 ```
@@ -590,6 +592,9 @@ Your lucky number is {{luckyNumber}}<br>
 ```
 
 That's it. `AnotherComponent` will receive the `luckyNumber` as a number, you can pass any type of data, string, number, boolean, object, array... it will be received by the child as the same type of data. However, *keep in mind the data gets serialized and de-serialized in the process, so if you pass an object to a child, it won't be a reference to the original object, rather a copy of it*.
+
+Since version 1.7.6, additional data types can be passed to child components without them breaking due to serialization: Date, BigInt, RegExp, Map, Uint8Array. *Let me know if you need support for more types that JSON.stringify breaks.*
+
 \
 Let's see how we can use the passed data within `AnotherComponent`, create `/app/views/AnotherComponent/AnotherComponent.html`:
 ```

package/build/system/Util.d.ts

@@ -1,3 +1,4 @@
+import { SerializableDate, SerializableRegExp, Serializable, ValueSerializable, SerializableBigInt, SerializableMap, SerializableUint8Array } from './types/component.types.js';
 import { LooseObject } from './types/general.types.js';
 import { PostedDataDecoded } from "./types/request.types.js";
 export declare function queryStringDecode(queryString: string, initialValue?: PostedDataDecoded, trimValues?: boolean): PostedDataDecoded;
@@ -10,13 +11,23 @@ export declare function isAsync(fn: Function): boolean;
 export declare function randomString(len: number, method?: 'alphanumeric' | 'numbers' | 'letters' | 'lettersUppercase' | 'lettersLowercase'): string;
 export declare function unique<T>(arr: Array<T>): Array<T>;
 export declare function stripTags(contentWithHTML: string, keepTags?: Array<string>): string;
+export declare function toSerializableValue(value: any): ValueSerializable;
+export declare function fromSerializableValue(data: SerializableDate): Date;
+export declare function fromSerializableValue(data: SerializableRegExp): RegExp;
+export declare function fromSerializableValue(data: SerializableMap): Map<any, any>;
+export declare function fromSerializableValue(data: SerializableBigInt): BigInt;
+export declare function fromSerializableValue(data: SerializableUint8Array): Uint8Array;
+export declare function fromSerializableValue(data: Serializable): any;
+export declare function serializableObject(data: LooseObject): LooseObject;
+export declare function deserializeObject(data: LooseObject): LooseObject;
+export declare function escapeAttributeValue(value: string): string;
+export declare function unescapeAttributeValue(str: string): string;
 export declare function attributeValueToString(key: string, value: any): string;
 export declare function attributeValueFromString(attributeValue: string): string | {
     key: string;
     value: any;
 };
-export declare function attributeValueEscape(str: string): string;
-export declare function isObject(item: any): boolean;
+export declare function isObject(value: any): boolean;
 export declare function equalDeep(a: LooseObject, b: LooseObject): boolean;
 export declare function mergeDeep(target: any, ...sources: Array<any>): LooseObject;
 export declare function stripBOM(str: string): string;

package/build/system/Util.js

@@ -226,30 +226,128 @@ export function stripTags(contentWithHTML, keepTags = []) {
         return sub.replaceAll('<', '&lt;').replaceAll('>', '&gt;');
     });
 }
-function base64ToBytes(base64) {
-    const binString = atob(base64);
-    return Uint8Array.from(binString, (m) => m.codePointAt(0));
+export function toSerializableValue(value) {
+    if (value instanceof Date) {
+        return {
+            __sv: 1,
+            type: 'date',
+            value: value.toISOString(),
+        };
+    }
+    if (typeof value === 'bigint') {
+        return {
+            __sv: 1,
+            type: 'bigint',
+            value: value.toString(),
+        };
+    }
+    if (value instanceof RegExp) {
+        return {
+            __sv: 1,
+            type: 'regexp',
+            value: {
+                source: value.source,
+                flags: value.flags,
+            }
+        };
+    }
+    if (value instanceof Map) {
+        return {
+            __sv: 1,
+            type: 'map',
+            value: [...value.entries()],
+        };
+    }
+    if (value instanceof Uint8Array) {
+        return {
+            __sv: 1,
+            type: 'uint8array',
+            value: Array.from(value),
+        };
+    }
+    return {
+        __sv: 1,
+        value,
+    };
+}
+export function fromSerializableValue(data) {
+    if (!('type' in data)) {
+        return data.value;
+    }
+    if (data.type === 'date') {
+        return new Date(data.value);
+    }
+    if (data.type === 'regexp') {
+        return new RegExp(data.value.source, data.value.flags);
+    }
+    if (data.type === 'map') {
+        return new Map(data.value);
+    }
+    if (data.type === 'bigint') {
+        return BigInt(data.value);
+    }
+    if (data.type === 'uint8array') {
+        return new Uint8Array(data.value);
+    }
+    return undefined;
 }
-function bytesToBase64(bytes) {
-    return btoa(bytes.reduce((prev, curr) => {
-        return prev + String.fromCharCode(curr);
-    }, ''));
+export function serializableObject(data) {
+    const copy = {};
+    objectEach(data, (key, val) => {
+        if (isObject(val)) {
+            copy[key] = serializableObject(val);
+        }
+        else {
+            copy[key] = toSerializableValue(val);
+        }
+    });
+    return copy;
+}
+export function deserializeObject(data) {
+    const copy = {};
+    objectEach(data, (key, val) => {
+        if (typeof val === 'object' && val !== null && val !== undefined) {
+            if ('__sv' in val) {
+                copy[key] = fromSerializableValue(val);
+            }
+            else {
+                copy[key] = deserializeObject(val);
+            }
+        }
+        else {
+            copy[key] = fromSerializableValue(val);
+        }
+    });
+    return copy;
+}
+export function escapeAttributeValue(value) {
+    return value
+        .replace(/~/g, '~~')
+        .replace(/"/g, '~q');
+}
+export function unescapeAttributeValue(str) {
+    const tempToken = `--${randomString(10)}--`;
+    return str
+        .split('~~').join(tempToken)
+        .split('~q').join('"')
+        .split(tempToken).join('~');
 }
 export function attributeValueToString(key, value) {
-    return 'base64:' + bytesToBase64(new TextEncoder().encode(JSON.stringify({ key, value })));
+    const data = serializableObject({ key, data: value });
+    return escapeAttributeValue(JSON.stringify(data));
 }
 export function attributeValueFromString(attributeValue) {
-    if (attributeValue.indexOf('base64:') === 0) {
+    if (attributeValue.indexOf('{') === 0) {
         try {
-            const decoded = new TextDecoder().decode(base64ToBytes(attributeValue.substring(7)));
-            if (decoded.indexOf('{') !== 0) {
-                return attributeValue;
-            }
-            const valObj = JSON.parse(decoded);
+            const decoded = unescapeAttributeValue(attributeValue);
+            const valObj = deserializeObject(JSON.parse(decoded));
             if (!('key' in valObj)) {
                 return decoded;
             }
-            return valObj;
+            return {
+                key: valObj.key,
+                value: valObj.data,
+            };
         }
         catch (e) {
             return attributeValue;
@@ -257,14 +355,11 @@ export function attributeValueFromString(attributeValue) {
     }
     return attributeValue;
 }
-export function attributeValueEscape(str) {
-    return str.replaceAll('"', '&quot;');
-}
-export function isObject(item) {
-    if (typeof window === 'undefined') {
-        return (item && typeof item === 'object' && !Array.isArray(item)) && !Buffer.isBuffer(item);
-    }
-    return (item && typeof item === 'object' && !Array.isArray(item));
+export function isObject(value) {
+    if (value === null || typeof value !== 'object')
+        return false;
+    const proto = Object.getPrototypeOf(value);
+    return proto === Object.prototype || proto === null;
 }
 export function equalDeep(a, b) {
     if (a === b) {

package/build/system/types/component.types.d.ts

@@ -39,6 +39,43 @@ export type ComponentEvents = {
     componentCreated: Component;
     ready: undefined;
 };
+export type Serializable = {
+    __sv: 1;
+    value: any;
+};
+export type SerializableDate = {
+    __sv: 1;
+    type: 'date';
+    value: string;
+};
+export type SerializableRegExp = {
+    __sv: 1;
+    type: 'regexp';
+    value: {
+        source: string;
+        flags: string;
+    };
+};
+export type SerializableMap = {
+    __sv: 1;
+    type: 'map';
+    value: Array<[any, any]>;
+};
+export type SerializableBigInt = {
+    __sv: 1;
+    type: 'bigint';
+    value: string;
+};
+export type SerializableUint8Array = {
+    __sv: 1;
+    type: 'uint8array';
+    value: Array<number>;
+};
+export type ValueSerializable = Serializable | SerializableDate | SerializableRegExp | SerializableMap | SerializableBigInt | SerializableUint8Array;
+export type AttributeEncodedObject = {
+    key: string;
+    data: ValueSerializable;
+};
 export type ClientComponentTransition = {
     fade: false | number;
     slide: false | number;

package/package.json

@@ -19,7 +19,7 @@
   "license": "MIT",
   "type": "module",
   "main": "build/index",
-  "version": "1.7.5",
+  "version": "1.7.8",
   "scripts": {
     "develop": "tsc --watch",
     "startDev": "cd build && nodemon --watch '../app/**/*' --watch '../build/**/*' -e js,html,hbs,css index.js",