@social-mail/social-mail-web-server 1.7.480 → 1.7.481

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@social-mail/social-mail-web-server",
-  "version": "1.7.480",
+  "version": "1.7.481",
   "description": "## Phase 1",
   "main": "index.js",
   "type": "module",

package/src/server/seed/ui/seed-ui.ts

@@ -5,13 +5,13 @@ export default async function seedUI(config: DBConfig) {
     await config.saveVersion(UIPackageConfig, {
         package: "@social-mail/social-mail-client",
         view: "dist/web/AppIndex",
-        version: "1.8.44"
+        version: "1.8.50"
     });
 
     await config.saveVersion(WebComponentsPackageConfig, {
         package: "@social-mail/web-components",
         view: "dist/index.js",
-        version: "1.0.248"
+        version: "1.0.258"
     });
 
     await config.saveVersion(FAFreePackageConfig, {

package/src/server/services/files/web-content/DynamicStyles.ts

@@ -0,0 +1,117 @@
+/* eslint-disable @typescript-eslint/no-base-to-string */
+import { DOMWindow } from "jsdom";
+
+const keyFrameAttributes = [
+    'styler-on-enter',
+    'styler-on-enter-effect-1',
+    'styler-on-enter-effect-2',
+    'styler-on-hover',
+    'styler-on-hover-effect-1',
+    'styler-on-hover-effect-2',
+    'styler-on-leave',
+    'styler-on-leave-effect-1',
+    'styler-on-leave-effect-2',
+    'styler-on-scroll',
+    'styler-on-scroll-effect-1',
+    'styler-on-scroll-effect-2',
+    'styler-on-scroll-above',
+    'styler-on-scroll-above-effect-1',
+    'styler-on-scroll-above-effect-2',
+    'styler-on-scroll-top-half',
+    'styler-on-scroll-top-half-effect-1',
+    'styler-on-scroll-top-half-effect-2',
+];
+
+export default class DynamicStyles {
+
+    private added: Set<string>;
+    private readonly style: HTMLStyleElement;
+    private aId: number;
+    private animations = new Map<string, { id: string, defaults: [string,string][] }>();
+
+    constructor(private readonly win: DOMWindow) {
+
+        this.style = win.document.createElement("style");
+        this.added = new Set<string>();
+        win.document.head.appendChild(this.style);
+        this.aId = 1;
+    }
+
+    setAttribute(e: Element, a, value: string) {
+        if (!value) {
+            return;
+        }
+        value = value.trim();
+        const key = `[${a}=${this.win.CSS.escape(value)}]`;
+        if (keyFrameAttributes.includes(a)) {
+
+            // replace with animation...
+            if (/[\{]/.test(value)) {
+                value = this.setAnimation(e, a, value);
+                if (!value) {
+                    return;
+                }
+            }
+        }
+        if (value === "custom") {
+            return;
+        }
+        if (this.added.has(key)) {
+            return;
+        }
+        this.added.add(key);
+        this.style.append(`
+            [${key}] {
+                --${a}: ${value};
+            }
+        `);
+    }
+
+    setAnimation(e: Element, a: any, value: string) {
+        try {
+            const animationObj = JSON.parse(value);
+
+            const minJson = JSON.stringify(animationObj);
+
+            let v = this.animations.get(minJson);
+            if (!v) {
+
+                const frames = animationObj.keyframes ?? animationObj.keyFrames;
+                if (!frames || !Array.isArray(frames)) {
+                    return;
+                }
+                const total = frames.length;
+                let i = 0;
+                for (const frame of frames) {
+                    frame.attributes = { ... frame };
+                    delete frame.attributes.offset;
+                    frame.offset ??= i === 0 ? 0 : i === total - 1 ? 1 :  i / (total - 1);
+                    i++;
+                }
+                const defaults = Object.entries(frames[0].attributes) as [string,string][];
+                v = { id: `internal-style-generated-${animationObj.title}-${this.aId++}`, defaults };
+                this.animations.set(minJson, v);
+                let styleText = `@keyframes ${v.id} {
+                    ${frames.map((f) => `${Math.floor(f.offset * 100)}% {
+                        ${Object.entries(f.attributes).map(([k,v1]) => `${k}: ${v1};`).join("\n")}
+                    }`).join("\n")}
+                }`;
+
+                this.style.append(styleText);
+
+                if (a.startsWith("styler-on-enter")) {
+                    // set defaults...
+                    styleText = `:not(animated-text):not([styler-entered])[${a}=${CSS.escape(value)}],
+                    animated-text:not([styler-entered])[${a}=${CSS.escape(value)}] > * {
+                        ${defaults.map(([k,v1]) => `${k}: ${v1};`).join("\t\n")}
+                    }
+                    `;
+                    this.style.append(styleText);
+                }
+            }
+            return v.id;
+        } catch (error) {
+            console.error(error);
+        }
+    }
+}

package/src/server/services/files/web-content/WebContentTranspileService.ts

@@ -13,6 +13,7 @@ import { globalEnv } from "../../../../common/globalEnv.js";
 import EncryptionService from "../../encryption/EncryptionService.js";
 import { ISiteFolder } from "../ISiteFolder.js";
 import WebUrl from "./WebUrl.js";
+import DynamicStyles from "./DynamicStyles.js";
 
 const updateAttribute = (root: string, name: string, element: Element) => {
     const value = element.getAttribute(name);
@@ -61,6 +62,8 @@ export default class WebContentTranspileService
             await this.injectFragment(siteFolder, e as HTMLElement, document, currentPath);
         }
 
+        const ds = new DynamicStyles(browser.window);
+
         for (const node of descendentElementIterator(document.documentElement)) {
             switch(node.nodeName) {
                 case "SCRIPT":
@@ -86,9 +89,7 @@ export default class WebContentTranspileService
                 for(const attributeName of node.getAttributeNames()) {
                     if(attributeName.startsWith("styler-")) {
                         const av = node.getAttribute(attributeName);
-                        if (av !== "custom") {
-                            style.setProperty(`--${attributeName}`, node.getAttribute(attributeName));
-                        }
+                        ds.setAttribute(node, attributeName, av);
                     }
                 }
             }