@htmlplus/element 2.11.0 → 2.12.0

package/client/utils/request.js

@@ -3,7 +3,7 @@ import { call } from './call.js';
 import { getStyles } from './getStyles.js';
 import { shadowRoot } from './shadowRoot.js';
 import { task } from './task.js';
-import { html, render } from './uhtml.js';
+import { render } from './uhtml.js';
 /**
  * Updates the DOM with a scheduled task.
  * @param target The element instance.
@@ -31,31 +31,72 @@ export const request = (target, name, previous, callback) => {
             .map((stack) => [stack[0], stack[1].previous]));
         // Calls the lifecycle's callback before the rendering phase.
         call(target, CONSTANTS.LIFECYCLE_UPDATE, states);
-        // Calculates the template.
-        const template = () => {
-            // Calculates the markup.
-            const markup = call(target, CONSTANTS.METHOD_RENDER);
-            // Calculates the styles.
-            const styles = getStyles(target);
-            // Returns the markup if styles don't exist.
-            if (!styles)
-                return markup;
-            // Returns the markup and styles together.
-            return html `<style>${styles}</style>${markup}`;
-        };
         // Renders template to the DOM.
-        render(shadowRoot(target), template);
+        render(shadowRoot(target), () => call(target, CONSTANTS.METHOD_RENDER));
         // Invokes requests' callback.
         stacks.forEach((state) => {
             state.callbacks.forEach((callback, index, callbacks) => {
                 callback(callbacks.length - 1 != index);
             });
         });
+        // TODO
+        (() => {
+            const raw = getStyles(target);
+            if (!raw)
+                return;
+            const regex1 = /this-([\w-]+)(?:-([\w-]+))?/g;
+            const regex2 = /(\s*\w+\s*:\s*(undefined|null)\s*;?)/g;
+            const hasGlobal = raw.includes(':global');
+            const hasVariable = raw.includes('this-');
+            let localSheet = target[CONSTANTS.API_STYLE];
+            let globalSheet = target.constructor[CONSTANTS.API_STYLE];
+            if (!hasVariable && localSheet)
+                return;
+            const parsed = raw
+                .replace(regex1, (match, key) => {
+                let value = target;
+                for (const section of key.split('-')) {
+                    value = value?.[section];
+                }
+                return value;
+            })
+                .replace(regex2, '');
+            if (!localSheet) {
+                localSheet = new CSSStyleSheet();
+                target[CONSTANTS.API_STYLE] = localSheet;
+                shadowRoot(target).adoptedStyleSheets.push(localSheet);
+            }
+            const localStyle = parsed;
+            localSheet.replace(localStyle);
+            if (!hasGlobal || globalSheet)
+                return;
+            if (!globalSheet) {
+                globalSheet = new CSSStyleSheet();
+                target.constructor[CONSTANTS.API_STYLE] = globalSheet;
+                document.adoptedStyleSheets.push(globalSheet);
+            }
+            const globalStyle = parsed
+                .split('}')
+                .map((rule) => {
+                let [selectors, properties] = rule.split('{');
+                selectors = selectors
+                    .split(',')
+                    .map((selector) => selector.trim())
+                    .filter((selector) => selector.startsWith(':global'))
+                    .map((selector) => selector.replace(':global', ''))
+                    .map((selector) => selector.trim())
+                    .join(',');
+                return selectors ? `${selectors}{${properties}}` : '';
+            })
+                .filter((selector) => !!selector)
+                .join('');
+            globalSheet.replace(globalStyle);
+        })();
         // Calls the lifecycle's callback after the rendering phase.
         call(target, CONSTANTS.LIFECYCLE_UPDATED, states);
         // Clears stacks.
         stacks.clear();
-        // TODO: releated to the @Watch decorator.
+        // TODO: related to the @Watch decorator.
         target[CONSTANTS.API_RENDER_COMPLETED] = true;
     };
     // Creates/Gets a micro task function.

package/constants/index.d.ts

@@ -6,6 +6,7 @@ export declare const API_INSTANCE: unique symbol;
 export declare const API_REQUEST: unique symbol;
 export declare const API_RENDER_COMPLETED: unique symbol;
 export declare const API_STACKS: unique symbol;
+export declare const API_STYLE: unique symbol;
 export declare const COMMENT_AUTO_ADDED = " THIS IS AUTO-ADDED, DO NOT EDIT MANUALY";
 export declare const DECORATOR_CSS_VARIABLE = "@Property()";
 export declare const DECORATOR_ELEMENT = "Element";

package/constants/index.js

@@ -8,6 +8,7 @@ export const API_INSTANCE = Symbol();
 export const API_REQUEST = Symbol();
 export const API_RENDER_COMPLETED = Symbol();
 export const API_STACKS = Symbol();
+export const API_STYLE = Symbol();
 // comments
 export const COMMENT_AUTO_ADDED = ' THIS IS AUTO-ADDED, DO NOT EDIT MANUALY';
 // CSS decorators

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@htmlplus/element",
-  "version": "2.11.0",
+  "version": "2.12.0",
   "license": "MIT",
   "sideEffects": false,
   "author": "Masood Abdolian <m.abdolian@gmail.com>",

package/transformer/plugins/customElement.js

@@ -121,6 +121,15 @@ export const customElement = (options) => {
                                 for (const attribute of attributes) {
                                     switch (attribute.type) {
                                         case 'JSXAttribute':
+                                            if (attribute.name.name == 'dangerouslySetInnerHTML') {
+                                                try {
+                                                    parts.push(' ', '.innerHTML');
+                                                    parts.push('=');
+                                                    parts.push(attribute.value.expression.properties.at(0).value);
+                                                }
+                                                catch { }
+                                                continue;
+                                            }
                                             parts.push(' ', attribute.name.name);
                                             if (!attribute.value)
                                                 continue;