@htmlplus/element 2.10.0 → 2.12.0

package/bundlers/vite.d.ts

@@ -4,4 +4,5 @@ export declare const htmlplus: (...plugins: Array<TransformerPlugin>) => {
     buildStart(): Promise<void>;
     load(id: any): Promise<string | undefined>;
     buildEnd(): Promise<void>;
+    writeBundle(options: any, bundles: any): Promise<void>;
 };

package/bundlers/vite.js

@@ -1,7 +1,7 @@
 import path from 'path';
 import { transformer } from '../transformer/index.js';
 export const htmlplus = (...plugins) => {
-    const { start, run, finish } = transformer(...plugins);
+    const { global, start, run, finish, write } = transformer(...plugins);
     return {
         name: 'htmlplus',
         async buildStart() {
@@ -20,6 +20,33 @@ export const htmlplus = (...plugins) => {
         },
         async buildEnd() {
             await finish();
+        },
+        async writeBundle(options, bundles) {
+            // TODO
+            try {
+                for (const context of global.contexts) {
+                    for (const key in bundles) {
+                        if (!Object.hasOwnProperty.call(bundles, key))
+                            continue;
+                        const bundle = bundles[key];
+                        if (!bundle.facadeModuleId.startsWith(context.filePath))
+                            continue;
+                        const modules = bundle['modules'];
+                        for (const key in modules) {
+                            if (!Object.hasOwnProperty.call(modules, key))
+                                continue;
+                            const module = modules[key];
+                            if (!key.startsWith(context.stylePath || ''))
+                                continue;
+                            context.styleContentTransformed = module.code;
+                            break;
+                        }
+                        break;
+                    }
+                }
+            }
+            catch { }
+            await write();
         }
     };
 };

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.10.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;

package/transformer/plugins/document.js

@@ -10,7 +10,7 @@ export const DOCUMENT_OPTIONS = {
 export const document = (options) => {
     const name = 'document';
     options = Object.assign({}, DOCUMENT_OPTIONS, options);
-    const finish = (global) => {
+    const write = (global) => {
         const json = {
             elements: []
         };
@@ -164,7 +164,18 @@ export const document = (options) => {
                     const [first, second] = section.split(/\n/);
                     const description = first.replace('*/', '').trim();
                     const name = second.split(':')[0].trim();
-                    const initializer = second.split(':').slice(1).join(':').replace(';', '').trim();
+                    const initializerDefault = second.split(':').slice(1).join(':').replace(';', '').trim();
+                    // TODO
+                    const initializerTransformed = context.styleContentTransformed
+                        ?.split(name)
+                        ?.at(1)
+                        ?.split(':')
+                        ?.filter((section) => !!section)
+                        ?.at(0)
+                        ?.split(/;|}/)
+                        ?.at(0)
+                        ?.trim();
+                    const initializer = initializerTransformed || initializerDefault;
                     return {
                         description,
                         initializer,
@@ -191,5 +202,5 @@ export const document = (options) => {
         fs.ensureDirSync(dirname);
         fs.writeJSONSync(options.destination, json, { encoding: 'utf8', spaces: 2 });
     };
-    return { name, finish };
+    return { name, write };
 };

package/transformer/transformer.d.ts

@@ -1,6 +1,8 @@
-import { TransformerPlugin, TransformerPluginContext } from './transformer.types.js';
+import { TransformerPlugin, TransformerPluginContext, TransformerPluginGlobal } from './transformer.types.js';
 export declare const transformer: (...plugins: TransformerPlugin[]) => {
+    global: TransformerPluginGlobal;
     start: () => Promise<void>;
     run: (filePath: string) => Promise<TransformerPluginContext>;
     finish: () => Promise<void>;
+    write: () => Promise<void>;
 };

package/transformer/transformer.js

@@ -67,5 +67,12 @@ export const transformer = (...plugins) => {
         log(`Plugins finished successfully.`, true);
         log(`Finished.`, true);
     };
-    return { start, run, finish };
+    const write = async () => {
+        for (const plugin of plugins) {
+            if (!plugin.write)
+                continue;
+            global = (await plugin.write(global)) || global;
+        }
+    };
+    return { global, start, run, finish, write };
 };

package/transformer/transformer.types.d.ts

@@ -30,6 +30,7 @@ export interface TransformerPluginContext {
     readmeName?: string;
     readmePath?: string;
     styleContent?: string;
+    styleContentTransformed?: string;
     styleExtension?: string;
     styleName?: string;
     stylePath?: string;
@@ -46,5 +47,6 @@ export interface TransformerPlugin {
     start?: (global: TransformerPluginGlobal) => Return<TransformerPluginGlobal>;
     run?: (context: TransformerPluginContext, global: TransformerPluginGlobal) => Return<TransformerPluginContext>;
     finish?: (global: TransformerPluginGlobal) => Return<TransformerPluginGlobal>;
+    write?: (global: TransformerPluginGlobal) => Return<TransformerPluginGlobal>;
 }
 export {};