@master/css-runtime 2.0.0-rc.54 → 2.0.0-rc.56

package/dist/index.cjs

@@ -3,45 +3,40 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var css = require('@master/css');
+var cssDevtoolsHook = require('@master/css-devtools-hook');
 
-class RuntimeCSS extends css.MasterCSS {
+function registerGlobal(CSSRuntime) {
+    if (!globalThis.CSSRuntime) globalThis.CSSRuntime = CSSRuntime;
+    cssDevtoolsHook.installHook();
+}
+
+class CSSRuntime extends css.MasterCSS {
     root;
     customConfig;
-    // @ts-expect-error
+    static instances = new WeakMap();
     host;
     observing;
     progressive;
-    // @ts-expect-error
     container;
     observer;
     constructor(root = document, customConfig = css.config){
         super(customConfig), this.root = root, this.customConfig = customConfig, this.observing = false, this.progressive = false;
-        this.init();
-        this.supportVendors = new Set();
-        const styleDeclaration = document.documentElement.style;
-        if ('webkitTransform' in styleDeclaration) this.supportVendors.add('webkit');
-        if ('MozTransform' in styleDeclaration) this.supportVendors.add('moz');
-        if ('msTransform' in styleDeclaration) this.supportVendors.add('ms');
-        if ('OTransform' in styleDeclaration) this.supportVendors.add('o');
-    }
-    init() {
-        const existingRuntimeCSS = globalThis.runtimeCSSs.find((eachCSS)=>eachCSS.root === this.root);
-        if (existingRuntimeCSS) throw new Error('Cannot create multiple RuntimeCSS instances for the same root element.');
-        const rootConstructorName = this.root?.constructor.name;
+        const rootConstructorName = root?.constructor.name;
         if (rootConstructorName === 'HTMLDocument' || rootConstructorName === 'Document') {
-            // @ts-ignore
-            this.root.defaultView.globalThis.runtimeCSS = this;
-            // @ts-ignore readonly
+            this.root.defaultView.globalThis.cssRuntime = this;
             this.container = this.root.head;
-            // @ts-ignore readonly
             this.host = this.root.documentElement;
         } else {
-            // @ts-ignore readonly
             this.container = this.root;
-            // @ts-ignore readonly
             this.host = this.root.host;
         }
-        runtimeCSSs.push(this);
+        this.supportVendors = new Set();
+        const styleDeclaration = document.documentElement.style;
+        if ('webkitTransform' in styleDeclaration) this.supportVendors.add('webkit');
+        if ('MozTransform' in styleDeclaration) this.supportVendors.add('moz');
+        if ('msTransform' in styleDeclaration) this.supportVendors.add('ms');
+        if ('OTransform' in styleDeclaration) this.supportVendors.add('o');
+        globalThis.CSSRuntime.instances.set(this.root, this);
     }
     /**
      * Observe the DOM for changes and update the running stylesheet. (browser only)
@@ -70,10 +65,10 @@ class RuntimeCSS extends css.MasterCSS {
         const firstConnectedElementsClasses = new Map();
         const addClasses = (element)=>{
             element.classList.forEach((className)=>{
-                if (this.classUsages.has(className)) {
-                    this.classUsages.set(className, this.classUsages.get(className) + 1);
+                if (this.classCounts.has(className)) {
+                    this.classCounts.set(className, this.classCounts.get(className) + 1);
                 } else {
-                    this.classUsages.set(className, 1);
+                    this.classCounts.set(className, 1);
                     this.add(className);
                 }
                 const classes = firstConnectedElementsClasses.get(element);
@@ -98,14 +93,14 @@ class RuntimeCSS extends css.MasterCSS {
             // const test = ''
             // if (test) {
             //     console.log('')
-            //     console.log(`${test}: ${this.classUsages.get(test)}`)
+            //     console.log(`${test}: ${this.classCounts.get(test)}`)
             // }
-            const eachClassUsages = new Map();
+            const eachClassCounts = new Map();
             const targetFirstAttrMutationRecord = new Map();
-            const updateClassUsage = (classes, isAdding = false)=>{
+            const updateClassCount = (classes, isAdding = false)=>{
                 const usage = isAdding ? 1 : -1;
                 classes.forEach((className)=>{
-                    eachClassUsages.set(className, (eachClassUsages.get(className) || 0) + usage);
+                    eachClassCounts.set(className, (eachClassCounts.get(className) || 0) + usage);
                 });
             };
             const connectedStatusMap = new Map();
@@ -148,12 +143,12 @@ class RuntimeCSS extends css.MasterCSS {
                         targetFirstAttrMutationRecord.delete(target);
                     }
                     if (adding) {
-                        updateClassUsage(target.classList, adding);
+                        updateClassCount(target.classList, adding);
                     } else {
                         if (firstAttrMutationRecord) {
-                            updateClassUsage(firstAttrMutationRecord.oldValue ? firstAttrMutationRecord.oldValue.split(/\s+/) : [], adding);
+                            updateClassCount(firstAttrMutationRecord.oldValue ? firstAttrMutationRecord.oldValue.split(/\s+/) : [], adding);
                         } else {
-                            updateClassUsage(target.classList, adding);
+                            updateClassCount(target.classList, adding);
                         }
                         disconnectedStatusMap.forEach((disconnectedTargetStatus, disconnectedTarget)=>{
                             if (disconnectedTargetStatus.mutationRecord.target === target && disconnectedTargetStatus.change !== 0) {
@@ -178,59 +173,33 @@ class RuntimeCSS extends css.MasterCSS {
                 const removedClasses = oldClassList.filter((c)=>!newClassList.contains(c));
                 if (addedClasses.length) {
                     // console.log('[attribute]', '[add]   ', addedClasses, target)
-                    updateClassUsage(addedClasses, true);
+                    updateClassCount(addedClasses, true);
                 }
                 if (removedClasses.length) {
                     // console.log('[attribute]', '[remove]', removedClasses, target)
-                    updateClassUsage(removedClasses, false);
+                    updateClassCount(removedClasses, false);
                 }
             });
             /**
              * Merge the class usage changes into the current class usage map.
-             */ eachClassUsages.forEach((countChange, className)=>{
-                let currentCount = this.classUsages.get(className) || 0;
+             */ eachClassCounts.forEach((countChange, className)=>{
+                let currentCount = this.classCounts.get(className) || 0;
                 let newCount = currentCount + countChange;
                 if (newCount > 0) {
-                    this.classUsages.set(className, newCount);
+                    this.classCounts.set(className, newCount);
                     if (currentCount === 0) {
                         this.add(className);
                     }
                 } else {
-                    this.classUsages.delete(className);
+                    this.classCounts.delete(className);
                     this.remove(className);
                 }
             });
-        // start: debug
-        // const safeClassUsages: any = {};
-        // ((this.root.constructor.name === 'HTMLDocument') ? this.host : this.container)
-        //     .querySelectorAll('[class]')
-        //     .forEach((element) => {
-        //         element.classList.forEach((className) => {
-        //             if (Object.prototype.hasOwnProperty.call(safeClassUsages, className)) {
-        //                 safeClassUsages[className]++
-        //             } else {
-        //                 safeClassUsages[className] = 1
-        //             }
-        //         })
-        //     })
-        // this.host.classList.forEach((className) => {
-        //     if (Object.prototype.hasOwnProperty.call(safeClassUsages, className)) {
-        //         safeClassUsages[className]++
-        //     } else {
-        //         safeClassUsages[className] = 1
-        //     }
-        // })
-        // for (const className in safeClassUsages) {
-        //     if (this.classUsages.get(className) !== safeClassUsages[className]) {
-        //         throw new Error(`[css] ${className} ${this.classUsages.get(className)} (correct: ${safeClassUsages[className]})`)
-        //     }
-        // }
-        // this.classUsages.forEach((count, className) => {
-        //     if (!Object.prototype.hasOwnProperty.call(safeClassUsages, className)) {
-        //         throw new Error(`[css] ${className} ${count} (correct: 0)`)
-        //     }
-        // })
-        // end: debug
+            globalThis.__MASTER_CSS_DEVTOOLS_HOOK__?.emit('mutated', {
+                records: mutationRecords,
+                classCounts: eachClassCounts,
+                cssRuntime: this
+            });
         });
         this.observer.observe(this.root, {
             attributes: true,
@@ -242,7 +211,7 @@ class RuntimeCSS extends css.MasterCSS {
             subtree: true
         });
         if (!this.progressive) {
-            this.host.style.removeProperty('display');
+            this.host.removeAttribute('hidden');
         }
         // @ts-ignore
         this.observing = true;
@@ -361,7 +330,7 @@ class RuntimeCSS extends css.MasterCSS {
         // @ts-ignore
         this.observing = false;
         this.reset();
-        this.classUsages.clear();
+        this.classCounts.clear();
         if (!this.progressive) {
             this.style?.remove();
             this.style = null;
@@ -378,25 +347,28 @@ class RuntimeCSS extends css.MasterCSS {
     }
     destroy() {
         this.disconnect();
-        runtimeCSSs.splice(runtimeCSSs.indexOf(this), 1);
+        globalThis.CSSRuntime.instances.delete(this.root);
         return this;
     }
 }
-const runtimeCSSs = [];
-(()=>{
-    globalThis.RuntimeCSS = RuntimeCSS;
-    globalThis.runtimeCSSs = runtimeCSSs;
-})();
+(function(CSSRuntime) {
+    registerGlobal(CSSRuntime);
+})(CSSRuntime);
 
 /**
- * Initialize a new RuntimeCSS instance and observe the target root
+ * Initialize a new CSSRuntime instance and observe the target root
  * @param config master css config
- * @param targetRoot target root to observe
+ * @param root target root to observe
+ * @param autoObserve auto observe the target root
  * @returns master css instance
- */ function initCSSRuntime(config) {
-    return new RuntimeCSS(document, config).observe();
+ */ function initCSSRuntime(config, root = document, autoObserve = true) {
+    let cssRuntime = globalThis.CSSRuntime.instances.get(root);
+    if (cssRuntime) return cssRuntime;
+    cssRuntime = new CSSRuntime(document, config);
+    if (autoObserve) cssRuntime.observe();
+    return cssRuntime;
 }
 
-exports.RuntimeCSS = RuntimeCSS;
-exports.default = RuntimeCSS;
+exports.CSSRuntime = CSSRuntime;
+exports.default = CSSRuntime;
 exports.initCSSRuntime = initCSSRuntime;

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export { RuntimeCSS, RuntimeCSS as default } from './core';
-export { default as initCSSRuntime } from './init-css-runtime';
+export { default as CSSRuntime, default } from './core';
+export { default as initCSSRuntime } from './init';