j20 0.0.25 → 0.0.27

package/dist/index.js

@@ -315,12 +315,11 @@ function batch(fn) {
     }
 }
 
-const isEvent = (eventName) => {
-    return eventName.startsWith("on");
-};
-const getEventName = (eventName) => {
-    return eventName.slice(2).toLowerCase();
-};
+const exist = (val) => val !== undefined;
+const isEvent = (eventName) => eventName.startsWith("on");
+const isNativeEvent = (eventName) => eventName.startsWith("onNative");
+const getNativeEventName = (eventName) => eventName.slice(8).toLowerCase();
+const getEventName = (eventName) => eventName.slice(2).toLowerCase();
 const getChildren = (propChildren) => {
     const arr = [];
     for (let i = 0; i < propChildren.length; i++) {
@@ -363,7 +362,12 @@ const styleObjectToString = (style) => {
     return styleString.trim();
 };
 const update = (node, key, oldValue, newValue) => {
-    if (isEvent(key)) {
+    if (isNativeEvent(key)) {
+        node.removeEventListener(getNativeEventName(key), oldValue.handleEvent);
+        const { handleEvent, ...restValues } = newValue;
+        node.addEventListener(getNativeEventName(key), handleEvent, restValues);
+    }
+    else if (isEvent(key)) {
         node.removeEventListener(getEventName(key), oldValue);
         node.addEventListener(getEventName(key), newValue);
     }
@@ -382,7 +386,10 @@ const update = (node, key, oldValue, newValue) => {
     }
 };
 const unset = (node, key, oldValue) => {
-    if (isEvent(key)) {
+    if (isNativeEvent(key)) {
+        node.removeEventListener(getNativeEventName(key), oldValue.handleEvent);
+    }
+    else if (isEvent(key)) {
         node.removeEventListener(getEventName(key), oldValue);
     }
     else if (key === "ref") {
@@ -393,7 +400,11 @@ const unset = (node, key, oldValue) => {
     }
 };
 const add = (node, key, newValue) => {
-    if (isEvent(key)) {
+    if (isNativeEvent(key)) {
+        const { handleEvent, ...restValues } = newValue;
+        node.addEventListener(getNativeEventName(key), handleEvent, restValues);
+    }
+    else if (isEvent(key)) {
         node.addEventListener(getEventName(key), newValue);
     }
     else if (key === "ref") {
@@ -422,17 +433,22 @@ const nodeAttributesEffect = (node, propsFn) => {
     let oldProps = {};
     effect(() => {
         const newProps = { ...propsFn() };
-        const newKeys = Object.keys(newProps);
-        const oldKeys = Object.keys(oldProps);
-        const allKeys = new Set([...newKeys, ...oldKeys]);
+        const allKeys = new Set([
+            ...Object.keys(newProps),
+            ...Object.keys(oldProps),
+        ]);
         for (const key of allKeys) {
-            oldKeys.includes(key)
-                ? newKeys.includes(key)
-                    ? Object.is(oldProps[key], newProps[key])
+            const oldValue = oldProps[key];
+            const newValue = newProps[key];
+            exist(oldValue)
+                ? exist(newValue)
+                    ? Object.is(oldValue, newValue)
                         ? null
-                        : update(node, key, oldProps[key], newProps[key])
-                    : unset(node, key, oldProps[key])
-                : add(node, key, newProps[key]);
+                        : update(node, key, oldValue, newValue)
+                    : unset(node, key, oldValue)
+                : exist(newValue)
+                    ? add(node, key, newValue)
+                    : null;
         }
         oldProps = newProps;
     });
@@ -880,51 +896,68 @@ const onMount = (callback) => {
 
 const onDestroy = (callback) => effect(() => callback);
 
-const refWeakMap = new WeakMap();
-const createCss = (css) => {
-    let id = undefined;
+function replaceTopLevelSelectors(css, id) {
+    let depth = 0;
+    let result = "";
+    let lastSlice = 0;
+    for (let i = 0; i < css.length; i++) {
+        if (css[i] === "{") {
+            if (depth === 0) {
+                result +=
+                    css
+                        .slice(lastSlice, i)
+                        .replace(/\.(\w[\w-]*)/g, (_, name) => `.${name}_${id}`) + "{";
+                lastSlice = i + 1;
+            }
+            depth++;
+        }
+        else if (css[i] === "}") {
+            depth--;
+            if (depth === 0) {
+                result += css.slice(lastSlice, i + 1);
+                lastSlice = i + 1;
+            }
+        }
+    }
+    result += css.slice(lastSlice);
+    return result;
+}
+const createCssModule = (css) => {
+    let hash = undefined;
+    let replacedCss = undefined;
     return () => {
-        if (!id)
-            id = cssHash(css);
-        const classNameId = `j_${id}`;
-        const replacedCss = css.replace(/\.(\w[\w-]*)\s*?\{/g, (_, className) => {
-            return `.${className}_${classNameId} {`;
-        });
-        styleSheet(replacedCss, id);
+        if (!hash)
+            hash = cssHash(css);
+        if (!replacedCss)
+            replacedCss = replaceTopLevelSelectors(css, hash);
+        styleSheet(replacedCss, hash);
         return new Proxy({}, {
             get: (_, prop) => {
-                return `${prop}_${classNameId}`;
+                return `${prop}_${hash}`;
             },
         });
     };
 };
 const addReference = (host, id, css) => {
-    if (!refWeakMap.get(host)) {
-        refWeakMap.set(host, []);
-    }
-    const states = refWeakMap.get(host) ?? [];
-    const state = states.find((state) => state.id === id);
-    if (!state) {
-        const newState = {
-            id,
-            refCount: 1,
-            styleSheet: createStyleSheet(css),
-        };
-        refWeakMap.set(host, [...states, newState]);
-        addStyleSheet(host, newState.styleSheet);
+    const currentSheet = host[id];
+    if (!currentSheet) {
+        const sheet = createStyleSheet(css);
+        sheet.refCount = 1;
+        host[id] = sheet;
+        addStyleSheet(host, sheet);
     }
     else {
-        state.refCount++;
+        currentSheet.refCount++;
     }
 };
 const removeReference = (host, id) => {
-    const states = refWeakMap.get(host) ?? [];
-    const state = states.find((state) => state.id === id);
-    if (state) {
-        state.refCount--;
-        if (state.refCount === 0) {
-            refWeakMap.set(host, states.filter((state) => state.id !== id));
-            removeStyleSheet(host, state.styleSheet);
+    const currentSheet = host[id];
+    if (currentSheet) {
+        currentSheet.refCount--;
+        if (currentSheet.refCount === 0) {
+            removeStyleSheet(host, currentSheet);
+            delete currentSheet.refCount;
+            delete host[id];
         }
     }
 };
@@ -1382,5 +1415,5 @@ const template = (template) => {
     };
 };
 
-export { $, $useContext, Case, Computed, Default, Effect, For, Fragment, If, Replace, Signal, Some, Switch, batch, computed, createComponent, createContext, createCss, createDom, createElement, createLogicComponent, createRoot, cssHash, effect, getCurrentInstance, h2, id, instanceCreate, instanceCreateElement, instanceDestroy, instanceGetElements, instanceInit, jsx, jsxs, mounts, onDestroy, onMount, ref, registerWebComponent, securityGetCurrentInstance, signal, styleSheet, template, untrack, wc };
+export { $, $useContext, Case, Computed, Default, Effect, For, Fragment, If, Replace, Signal, Some, Switch, batch, computed, createComponent, createContext, createCssModule, createDom, createElement, createLogicComponent, createRoot, cssHash, effect, getCurrentInstance, h2, id, instanceCreate, instanceCreateElement, instanceDestroy, instanceGetElements, instanceInit, jsx, jsxs, mounts, onDestroy, onMount, ref, registerWebComponent, securityGetCurrentInstance, signal, styleSheet, template, untrack, wc };
 //# sourceMappingURL=index.js.map