internal wrapper for ssr

atomicojs · May 5, 2022 · cef9359 · cef9359
1 parent e497cc5
commit cef9359
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 82 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "atomico",
-    "version": "1.54.2",
+    "version": "1.54.3",
     "description": "Atomico is a small library for the creation of interfaces based on web-components, only using functions and hooks.",
     "type": "module",
     "main": "./core.js",

diff --git a/ssr/ssr.js b/ssr/ssr.js
@@ -1,9 +1,9 @@
 import "./document.js";
 import { tags } from "./elements.js";
 import { options } from "../src/options.js";
-import { createHooks } from "atomico/test-hooks";
+import { createHooks } from "../src/hooks/create-hooks.js";
 
-options.sheet = false;
+setOptions(options);
 
 const Once = new Set();
 
@@ -49,93 +49,102 @@ class Attributes {
     }
 }
 
-options.render = function (fragmentAfter = "") {
-    let { type, props, children, shadow, raw } = this;
-    let fragmentBefore = "";
-    let currentProps = { ...props };
-    const attrs = new Attributes();
-
-    if (type === "host") {
-        type = "template";
-        currentProps = { shadowroot: shadow ? "open" : "closed" };
-    }
-
-    if (
-        (typeof type === "string" && type.includes("-") && tags[type]) ||
-        raw === 2
-    ) {
-        const Element = raw === 2 ? type : tags[type];
-
-        if (raw === 2) {
-            const { is, localName } = type;
-            if (is) {
-                currentProps.is = localName;
-                type = is;
-            } else {
-                type = localName;
-            }
-        }
-
-        if (!Once.has(Element)) {
-            const { observedAttributes } = Element;
-            Once.add(Element);
+/**
+ *
+ * @param {{sheet?:boolean,render:(param:any)=>string}} options
+ */
+export function setOptions(options) {
+    options.sheet = true;
+    options.render = function (fragmentAfter = "") {
+        let { type, props, children, shadow, raw } = this;
+        let fragmentBefore = "";
+        let currentProps = { ...props };
+        const attrs = new Attributes();
+
+        if (type === "host") {
+            type = "template";
+            currentProps = { shadowroot: shadow ? "open" : "closed" };
         }
 
-        const { props: schemaProps } = Element;
-        const { styles } = Element;
-
-        const instance = new Element();
-
-        Object.assign(instance, currentProps);
-
-        const hooks = createHooks(() => {}, instance);
-
-        try {
-            const html = hooks.load(instance._render);
+        if (
+            (typeof type === "string" && type.includes("-") && tags[type]) ||
+            raw === 2
+        ) {
+            const Element = raw === 2 ? type : tags[type];
+
+            if (raw === 2) {
+                const { is, localName } = type;
+                if (is) {
+                    currentProps.is = localName;
+                    type = is;
+                } else {
+                    type = localName;
+                }
+            }
 
-            if (html.render) {
-                fragmentBefore += html.render(
-                    styles
-                        .flat(100)
-                        .filter((value) => value)
-                        .reduce(
-                            (fragment, { textContent }) =>
-                                fragment +
-                                `<style data-hydrate>${textContent}</style>`,
-                            fragmentAfter
-                        )
-                );
-                attrs.dataHydrate = true;
+            if (!Once.has(Element)) {
+                const { observedAttributes } = Element;
+                Once.add(Element);
             }
-        } catch (e) {
-            console.log(e);
-        }
 
-        Object.entries(schemaProps).forEach(([prop, schema]) => {
-            if (schema?.value != null) {
-                attrs[prop] = schema?.value;
+            const { props: schemaProps } = Element;
+            const { styles } = Element;
+
+            const instance = new Element();
+
+            Object.assign(instance, currentProps);
+
+            const hooks = createHooks(() => {}, instance);
+
+            try {
+                const html = hooks.load(instance._render);
+
+                if (html.render) {
+                    fragmentBefore += html.render(
+                        styles
+                            .flat(100)
+                            .filter((value) => value)
+                            .reduce(
+                                (fragment, { textContent }) =>
+                                    fragment +
+                                    `<style data-hydrate>${textContent}</style>`,
+                                fragmentAfter
+                            )
+                    );
+                    attrs.dataHydrate = true;
+                }
+            } catch (e) {
+                console.log(e);
             }
-        });
-    }
 
-    Object.entries(currentProps).forEach(
-        ([prop, value]) => (attrs[prop] = value)
-    );
+            Object.entries(schemaProps).forEach(([prop, schema]) => {
+                if (schema?.value != null) {
+                    attrs[prop] = schema?.value;
+                }
+            });
+        }
 
-    const innerHTML = (Array.isArray(children) ? children : [children])
-        .flat(1000)
-        .filter((value) => (value == null || value === false ? false : true))
-        .map((child) =>
-            child.render ? child.render() : `<span>${child}</span>`
+        Object.entries(currentProps).forEach(
+            ([prop, value]) => (attrs[prop] = value)
         );
 
-    if (type === "template" && !shadow) {
-        return innerHTML.join("");
-    }
+        const innerHTML = (Array.isArray(children) ? children : [children])
+            .flat(1000)
+            .filter((value) =>
+                value == null || value === false ? false : true
+            )
+            .map((child) =>
+                child.render ? child.render() : `<span>${child}</span>`
+            );
 
-    const html = `<${type}${attrs}>${fragmentBefore}${innerHTML.join(
-        ""
-    )}${fragmentAfter}</${type}>`;
+        if (type === "template" && !shadow) {
+            return innerHTML.join("");
+        }
 
-    return html;
-};
+        const html = `<${type}${attrs}>${fragmentBefore}${innerHTML.join(
+            ""
+        )}${fragmentAfter}</${type}>`;
+
+        return html;
+    };
+}
diff --git a/types/core.d.ts b/types/core.d.ts
@@ -341,7 +341,7 @@ export function useUpdate(): () => void;
 
 export interface options {
     sheet: boolean;
-    ssr?: (element: AtomicoThis) => void;
+    render?: (param: any) => void;
 }
 
 export type UseProp<T> = [Nullable<T>, SetState<Nullable<T>>];

diff --git a/types/ssr.d.ts b/types/ssr.d.ts
@@ -0,0 +1,4 @@
+export function setOptions(options: {
+    sheet?: boolean;
+    render(param: any): any;
+}): void;