hybrids - npm Package Compare versions

Comparing version 8.1.11 to 8.1.12

package.json

 {
   "name": "hybrids",
-  "version": "8.1.11",
+  "version": "8.1.12",
   "description": "A JavaScript framework for creating fully-featured web applications, components libraries, and single web components with unique declarative and functional architecture",
@@ -5,0 +5,0 @@ "type": "module",

src/template/helpers.js

@@ -93,3 +93,4 @@ import { storePointer } from "../utils.js";
 export function resolve(promise, placeholder, delay = 200) {
-  return (host, target) => {
+  return function fn(host, target) {
+    const useLayout = fn.useLayout;
     let timeout;
@@ -100,3 +101,3 @@
         timeout = undefined;
-        resolveTemplateValue(host, target, placeholder);
+        resolveTemplateValue(host, target, placeholder, undefined, useLayout);
       }, delay);
@@ -111,3 +112,9 @@ }
       if (promiseMap.get(target) === promise) {
-        resolveTemplateValue(host, target, value);
+        resolveTemplateValue(
+          host,
+          target,
+          value,
+          placeholder && !timeout ? placeholder : undefined,
+          useLayout,
+        );
         promiseMap.set(target, null);
@@ -114,0 +121,0 @@ }

src/template/layout.js

@@ -274,18 +274,13 @@ import global from "../global.js";
   if (hostMode) {
-    const shadowSelector = `.${className}-s${selectors}`;
-    const contentSelector = `.${className}-c${selectors}`;
+    const shadowSelector = `:host(.${className}-s${selectors})`;
+    const contentSelector = `:where(.${className}-c${selectors})`;
 
-    sheet.insertRule(
-      mediaQueries
-        ? `${mediaSelector} { :host(${shadowSelector}) { ${cssRules} } }`
-        : `:host(${shadowSelector}) { ${cssRules} }`,
-      sheet.cssRules.length,
-    );
-
-    sheet.insertRule(
-      mediaQueries
-        ? `${mediaSelector} { ${contentSelector} { ${cssRules} } }`
-        : `${contentSelector} { ${cssRules} }`,
-      sheet.cssRules.length,
-    );
+    [shadowSelector, contentSelector].forEach((selector) => {
+      sheet.insertRule(
+        mediaQueries
+          ? `${mediaSelector} { ${selector} { ${cssRules} } }`
+          : `${selector} { ${cssRules} }`,
+        sheet.cssRules.length,
+      );
+    });
   } else {
@@ -292,0 +287,0 @@ const selector = `.${className}${selectors}`;

No alert changes

Improved metrics

Total package byte prevSize

197275

increased by0.03%

Lines of code

6281

increased by0.05%

No dependency changes