@master/css-runtime 2.0.0-rc.63 → 2.0.0-rc.65

package/dist/index.development.mjs

@@ -57,10 +57,36 @@ function registerClassCountDebugger() {
         });
         if (errored) {
             log.debug('Records:', records);
+            log.debug('Serialized Records:', serializeMutations(records));
             log.debug('Counts:', classCounts);
         }
     });
 }
+function serializeMutations(mutations) {
+    return mutations.map((m)=>{
+        const target = m.target;
+        return {
+            type: m.type,
+            attributeName: m.attributeName,
+            oldValue: m.oldValue,
+            target: {
+                tagName: target.tagName,
+                id: target.id,
+                classList: Array.from(target.classList)
+            },
+            added: Array.from(m.addedNodes).filter((n)=>n.nodeType === 1).map((el)=>({
+                    tagName: el.tagName,
+                    id: el.id,
+                    classList: Array.from(el.classList)
+                })),
+            removed: Array.from(m.removedNodes).filter((n)=>n.nodeType === 1).map((el)=>({
+                    tagName: el.tagName,
+                    id: el.id,
+                    classList: Array.from(el.classList)
+                }))
+        };
+    });
+}
 
 function registerLifecycleDebugger() {
     const hook = globalThis.__MASTER_CSS_DEVTOOLS_HOOK__;
@@ -134,12 +160,21 @@ class RuntimeLayer extends Layer {
         const insertedIndex = super.insert(rule, index);
         if (insertedIndex === undefined || !this.native) return;
         const insertRuleSafely = (text, position)=>{
-            try {
-                const insertedIndex = this.native.insertRule(text, position);
-                return this.native.cssRules.item(insertedIndex);
-            } catch (error) {
-                console.error(error, rule);
-                return;
+            // Checks if the rule is inserted in a native CSS rule with this.attach()
+            if (this.rules.length === 1) {
+                return this.native.cssRules.item(position);
+            } else {
+                try {
+                    const insertedIndex = this.native.insertRule(text, position);
+                    return this.native.cssRules.item(insertedIndex);
+                } catch (error) {
+                    console.error(error, rule);
+                    /**
+                     * If the rule is invalid, remove it from the rules array.
+                     * It's important to note that the rule may break the entire CSS runtime,
+                     */ this.rules.splice(insertedIndex, 1);
+                    return;
+                }
             }
         };
         if ('nodes' in rule) {
@@ -149,7 +184,7 @@ class RuntimeLayer extends Layer {
                 if (node.native) currentIndex++;
             });
         } else {
-            rule.native = insertRuleSafely(rule.text, index);
+            rule.native = insertRuleSafely(rule.text, insertedIndex);
         }
         return insertedIndex;
     }
@@ -204,20 +239,19 @@ class CSSRuntime extends MasterCSS {
     customConfig;
     static instances = new WeakMap();
     host;
-    observing;
-    progressive;
     container;
-    observer;
     baseLayer;
     themeLayer;
     presetLayer;
     componentsLayer;
     generalLayer;
     classCounts;
+    observer;
+    progressive;
+    observing;
     constructor(root = document, customConfig = config){
-        super(customConfig), this.root = root, this.customConfig = customConfig, this.observing = false, this.progressive = false, this.baseLayer = new RuntimeSyntaxLayer('base', this), this.themeLayer = new RuntimeLayer('theme', this), this.presetLayer = new RuntimeSyntaxLayer('preset', this), this.componentsLayer = new RuntimeSyntaxLayer('components', this), this.generalLayer = new RuntimeSyntaxLayer('general', this), this.classCounts = new Map();
-        const rootConstructorName = root?.constructor.name;
-        if (rootConstructorName === 'HTMLDocument' || rootConstructorName === 'Document') {
+        super(customConfig), this.root = root, this.customConfig = customConfig, this.baseLayer = new RuntimeSyntaxLayer('base', this), this.themeLayer = new RuntimeLayer('theme', this), this.presetLayer = new RuntimeSyntaxLayer('preset', this), this.componentsLayer = new RuntimeSyntaxLayer('components', this), this.generalLayer = new RuntimeSyntaxLayer('general', this), this.classCounts = new Map(), this.progressive = false, this.observing = false;
+        if (this.root instanceof Document || this.root instanceof HTMLDocument) {
             this.root.defaultView.globalThis.cssRuntime = this;
             this.container = this.root.head;
             this.host = this.root.documentElement;
@@ -236,39 +270,46 @@ class CSSRuntime extends MasterCSS {
      * @returns this
      */ observe() {
         if (this.observing) return this;
-        // 1. Check if the stylesheet is progressive.
-        if (this.root.styleSheets) for (const sheet of this.root.styleSheets){
-            const { ownerNode } = sheet;
-            if (ownerNode && ownerNode.id === 'master') {
-                this.style = ownerNode;
-                if (this.style.sheet?.cssRules.length) {
-                    // @ts-ignore
-                    this.progressive = true;
+        // Detect prerendered stylesheet
+        if (this.root.styleSheets) {
+            for (const sheet of this.root.styleSheets){
+                const { ownerNode } = sheet;
+                if (ownerNode instanceof HTMLStyleElement && ownerNode.id === 'master') {
+                    this.style = ownerNode;
+                    if (this.style.sheet?.cssRules.length) {
+                        this.progressive = true;
+                    }
+                    break;
                 }
-                break;
             }
         }
-        // 2. Count the classes in the host and its children.
+        // Prepare snapshot map
+        const elementClasses = new WeakMap();
+        // Initial scan and populate counts + snapshot
         const connectedNames = new Set();
         const increaseClassCount = (className)=>{
             const count = this.classCounts.get(className) || 0;
-            if (!count) {
-                connectedNames.add(className);
-            }
+            if (!count) connectedNames.add(className);
             this.classCounts.set(className, count + 1);
         };
-        this.host.classList.forEach(increaseClassCount);
-        (this.root.constructor.name === 'HTMLDocument' ? this.host : this.container).querySelectorAll('[class]').forEach((element)=>element.classList.forEach(increaseClassCount));
-        // 3. Hydrate the existing CSS rules or create a new one.
+        const rootEl = this.root instanceof Document || this.root instanceof HTMLDocument ? this.root : this.container;
+        const elementsWithClass = rootEl.querySelectorAll('[class]');
+        elementsWithClass.forEach((el)=>{
+            const clsList = el.classList;
+            if (clsList) {
+                el.classList.forEach(increaseClassCount);
+            }
+            elementClasses.set(el, new Set(clsList));
+        });
+        // Hydration or style creation
         if (this.progressive) {
             const hydrateResult = this.hydrate(this.style.sheet.cssRules);
-            // Add the connected class names that are not hydrated yet.
-            for (const eachConnectedName of connectedNames){
-                if (hydrateResult.allSyntaxRules.find((rule)=>(rule.fixedClass || rule.name) === eachConnectedName)) continue;
-                this.add(eachConnectedName);
-                {
-                    // Basically, the style#master should have all the prerendered CSS rules that are connected in the DOM.
-                    console.debug(`The class \`${eachConnectedName}\` was added via script before calling hydrate, or the corresponding CSS rule were not properly pre-rendered.`);
+            for (const cls of connectedNames){
+                if (!hydrateResult.allSyntaxRules.find((r)=>(r.fixedClass || r.name) === cls)) {
+                    this.add(cls);
+                    {
+                        console.debug(`Missing prerendered rule for class \`${cls}\``);
+                    }
                 }
             }
         } else {
@@ -277,125 +318,81 @@ class CSSRuntime extends MasterCSS {
             this.container.append(this.style);
             this.style.sheet.insertRule(this.layerStatementRule.text);
             this.layerStatementRule.native = this.style.sheet.cssRules.item(0);
-            for (const eachConnectedName of connectedNames){
-                this.add(eachConnectedName);
-            }
+            connectedNames.forEach((cls)=>this.add(cls));
         }
-        // @ts-expect-error readonly
-        this.observer = new MutationObserver((mutationRecords)=>{
-            const eachClassCounts = new Map();
-            const targetFirstAttrMutationRecord = new Map();
-            const updateClassCount = (classes, isAdding = false)=>{
-                const usage = isAdding ? 1 : -1;
-                classes.forEach((className)=>{
-                    eachClassCounts.set(className, (eachClassCounts.get(className) || 0) + usage);
-                });
+        this.observer = new MutationObserver((records)=>{
+            const deltaCounts = new Map();
+            const nodeMap = new Map();
+            const attrRecords = new Set();
+            const visited = new WeakSet();
+            const updateDelta = (cls, delta)=>deltaCounts.set(cls, (deltaCounts.get(cls) || 0) + delta);
+            const diffAndSnapshot = (el)=>{
+                const prev = new Set(elementClasses.get(el) || []);
+                const next = new Set(el.classList);
+                for (const c of next)if (!prev.has(c)) updateDelta(c, 1);
+                for (const c of prev)if (!next.has(c)) updateDelta(c, -1);
+                elementClasses.set(el, next);
             };
-            const connectedStatusMap = new Map();
-            const disconnectedStatusMap = new Map();
-            const recordStatus = (target, mutationRecord, map, adding)=>{
-                const status = map.get(target);
-                if (status) {
-                    status.change += adding ? 1 : -1;
-                    status.mutationRecord = mutationRecord;
-                } else {
-                    map.set(target, {
-                        change: adding ? 1 : -1,
-                        mutationRecord
-                    });
-                }
-                for (const child of target.children){
-                    if ('classList' in child) {
-                        recordStatus(child, mutationRecord, map, adding);
-                    }
-                }
+            const removeSnapshot = (el)=>{
+                for (const c of elementClasses.get(el) || [])updateDelta(c, -1);
+                elementClasses.delete(el);
             };
-            mutationRecords.forEach((mutationRecord)=>{
-                const target = mutationRecord.target;
-                switch(mutationRecord.type){
-                    case 'attributes':
-                        if (!targetFirstAttrMutationRecord.has(target)) {
-                            targetFirstAttrMutationRecord.set(target, mutationRecord);
-                        }
-                        break;
-                    case 'childList':
-                        const targetStatusMap = target.isConnected ? connectedStatusMap : disconnectedStatusMap;
-                        mutationRecord.addedNodes.forEach((node)=>'classList' in node && recordStatus(node, mutationRecord, targetStatusMap, true));
-                        mutationRecord.removedNodes.forEach((node)=>'classList' in node && recordStatus(node, mutationRecord, targetStatusMap, false));
-                        break;
+            for (const record of records){
+                if (record.type === 'childList') {
+                    for (const node of record.addedNodes)if (node instanceof Element && node.isConnected) nodeMap.set(node, (nodeMap.get(node) || 0) + 1);
+                    for (const node of record.removedNodes)if (node instanceof Element && !node.isConnected) nodeMap.set(node, (nodeMap.get(node) || 0) - 1);
+                } else if (record.type === 'attributes' && record.attributeName === 'class') {
+                    attrRecords.add(record.target);
                 }
-            });
-            const updateTarget = (target, adding)=>{
-                const firstAttrMutationRecord = targetFirstAttrMutationRecord.get(target);
-                if (firstAttrMutationRecord) {
-                    targetFirstAttrMutationRecord.delete(target);
-                }
-                if (adding) {
-                    updateClassCount(target.classList, adding);
-                } else {
-                    if (firstAttrMutationRecord) {
-                        updateClassCount(firstAttrMutationRecord.oldValue ? firstAttrMutationRecord.oldValue.split(/\s+/) : [], adding);
-                    } else {
-                        updateClassCount(target.classList, adding);
+            }
+            const traverseIncludingSelf = (el, fn, visited)=>{
+                if (!visited.has(el)) {
+                    visited.add(el);
+                    fn(el);
+                    for (const child of el.children){
+                        traverseIncludingSelf(child, fn, visited);
                     }
-                    disconnectedStatusMap.forEach((disconnectedTargetStatus, disconnectedTarget)=>{
-                        if (disconnectedTargetStatus.mutationRecord.target === target && disconnectedTargetStatus.change !== 0) {
-                            updateTarget(disconnectedTarget, disconnectedTargetStatus.change > 0);
-                        }
-                    });
+                } else {
+                    nodeMap.delete(el);
                 }
             };
-            connectedStatusMap.forEach(({ change }, target)=>change !== 0 && updateTarget(target, change > 0));
-            targetFirstAttrMutationRecord.forEach((mutation, target)=>{
-                if (!target.isConnected) return;
-                const oldClassList = mutation.oldValue ? mutation.oldValue.split(/\s+/) : [];
-                const newClassList = target.classList;
-                const addedClasses = [];
-                newClassList.forEach((c)=>{
-                    if (!oldClassList.includes(c)) addedClasses.push(c);
-                });
-                const removedClasses = oldClassList.filter((c)=>!newClassList.contains(c));
-                if (addedClasses.length) {
-                    updateClassCount(addedClasses, true);
+            for (const [node, count] of nodeMap){
+                if (count > 0) {
+                    traverseIncludingSelf(node, diffAndSnapshot, visited);
+                } else if (count < 0 && !node.isConnected) {
+                    traverseIncludingSelf(node, removeSnapshot, visited);
                 }
-                if (removedClasses.length) {
-                    updateClassCount(removedClasses, false);
-                }
-            });
-            /**
-             * Merge the class usage changes into the current class usage map.
-             */ eachClassCounts.forEach((countChange, className)=>{
-                let currentCount = this.classCounts.get(className) || 0;
-                let newCount = currentCount + countChange;
-                if (newCount > 0) {
-                    this.classCounts.set(className, newCount);
-                    if (currentCount === 0) {
-                        this.add(className);
-                    }
+            }
+            for (const el of attrRecords){
+                if (!visited.has(el)) diffAndSnapshot(el);
+            }
+            for (const [cls, change] of deltaCounts){
+                const current = this.classCounts.get(cls) || 0;
+                const next = current + change;
+                if (next > 0) {
+                    this.classCounts.set(cls, next);
+                    if (current === 0) this.add(cls);
                 } else {
-                    this.classCounts.delete(className);
-                    this.remove(className);
+                    this.classCounts.delete(cls);
+                    this.remove(cls);
                 }
-            });
+            }
             globalThis.__MASTER_CSS_DEVTOOLS_HOOK__?.emit('runtime:mutated', {
-                records: mutationRecords,
-                classCounts: eachClassCounts,
+                records,
+                classCounts: deltaCounts,
                 cssRuntime: this
             });
         });
         this.observer.observe(this.root, {
+            childList: true,
             attributes: true,
-            attributeOldValue: true,
             attributeFilter: [
                 'class'
             ],
-            childList: true,
+            attributeOldValue: true,
             subtree: true
         });
-        if (!this.progressive) {
-            this.host.removeAttribute('hidden');
-        }
-        // @ts-ignore
+        if (!this.progressive) this.host.removeAttribute('hidden');
         this.observing = true;
         globalThis.__MASTER_CSS_DEVTOOLS_HOOK__?.emit('runtime:observed', {
             cssRuntime: this
@@ -541,7 +538,6 @@ class CSSRuntime extends MasterCSS {
         if (!this.observing) return;
         if (this.observer) {
             this.observer.disconnect();
-            // @ts-expect-error readonly
             this.observer = undefined;
         }
         // @ts-ignore