@seahax/elemental 0.5.20 → 0.5.22

package/README.md

@@ -30,10 +30,12 @@ import {
   useRoute,
   useAsync,
   useEffect,
+  useStyleEffect,
   useChildEffect,
   useDisconnectCallback,
   useElementInternals,
   useHost,
+  useShadow,
 } from '@seahax/elemental';
 
 export const MyComponent = defineComponent((shadow) => {
@@ -109,6 +111,22 @@ export const MyComponent = defineComponent((shadow) => {
     };
   });
 
+  // React to reference changes and apply CSS styles to the shadow root.
+  useStyleEffect([
+    // dependency references
+    localStateRef
+  ], (localState) => {
+    // Reactive code runs when the component is connected to the document,
+    // and when any of the dependencies change.
+
+    // Return a CSS string to be adopted by the shadow root.
+    return /* css */ `
+      .hello {
+        color: ${localState};
+      }
+    `;
+  });
+
   // React to child list changes.
   useChildEffect(() => {
     // Reactive code runs when the component is connected to the document,

package/dist/hooks/useShadow.d.ts

@@ -1 +1,2 @@
+/** Use the component shadow root. */
 export declare function useShadow(): ShadowRoot;

package/dist/hooks/useShadow.js

@@ -0,0 +1,9 @@
+import { useInternalController as e } from "./useInternalController.js";
+//#region src/hooks/useShadow.ts
+function t() {
+	return e().shadow;
+}
+//#endregion
+export { t as useShadow };
+
+//# sourceMappingURL=useShadow.js.map

package/dist/hooks/useShadow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useShadow.js","names":[],"sources":["../../src/hooks/useShadow.ts"],"sourcesContent":["import { useInternalController } from './useInternalController.ts';\n\n/** Use the component shadow root. */\nexport function useShadow(): ShadowRoot {\n  return useInternalController().shadow;\n}\n"],"mappings":";;AAGA,SAAgB,IAAwB;AACtC,QAAO,GAAuB,CAAC"}

package/dist/hooks/useStyleEffect.d.ts

@@ -0,0 +1,7 @@
+import type { ReadonlyRef, RefValues } from './useRef.ts';
+/**
+ * Add a stylesheet to the component shadow root (`adoptedStyleSheets`) and
+ * apply the style text returned by the callback. The stylesheet will be
+ * replaced when the dependencies change.
+ */
+export declare function useStyleEffect<TDeps extends ReadonlyRef<any>[]>(dependencies: TDeps, callback: (...deps: RefValues<TDeps>) => string): void;

package/dist/hooks/useStyleEffect.js

@@ -0,0 +1,16 @@
+import { useEffect as e } from "./useEffect.js";
+import { useShadow as t } from "./useShadow.js";
+//#region src/hooks/useStyleEffect.ts
+function n(n, r) {
+	e(n, (...e) => {
+		let n = t(), i = new CSSStyleSheet(), a = r(...e);
+		return i.replaceSync(a), n.adoptedStyleSheets.push(i), () => {
+			let e = n.adoptedStyleSheets.indexOf(i);
+			e !== -1 && n.adoptedStyleSheets.splice(e, 1);
+		};
+	});
+}
+//#endregion
+export { n as useStyleEffect };
+
+//# sourceMappingURL=useStyleEffect.js.map

package/dist/hooks/useStyleEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStyleEffect.js","names":[],"sources":["../../src/hooks/useStyleEffect.ts"],"sourcesContent":["import { useEffect } from './useEffect.ts';\nimport type { ReadonlyRef, RefValues } from './useRef.ts';\nimport { useShadow } from './useShadow.ts';\n\n/**\n * Add a stylesheet to the component shadow root (`adoptedStyleSheets`) and\n * apply the style text returned by the callback. The stylesheet will be\n * replaced when the dependencies change.\n */\nexport function useStyleEffect<TDeps extends ReadonlyRef<any>[]>(\n  dependencies: TDeps,\n  callback: (...deps: RefValues<TDeps>) => string,\n): void {\n  useEffect(dependencies, (...args) => {\n    const shadow = useShadow();\n    const sheet = new CSSStyleSheet();\n    const styleText = callback(...args);\n\n    sheet.replaceSync(styleText);\n    shadow.adoptedStyleSheets.push(sheet);\n\n    return () => {\n      const index = shadow.adoptedStyleSheets.indexOf(sheet);\n      if (index !== -1) shadow.adoptedStyleSheets.splice(index, 1);\n    };\n  });\n}\n"],"mappings":";;;AASA,SAAgB,EACd,GACA,GACM;AACN,GAAU,IAAe,GAAG,MAAS;EACnC,IAAM,IAAS,GAAW,EACpB,IAAQ,IAAI,eAAe,EAC3B,IAAY,EAAS,GAAG,EAAK;AAKnC,SAHA,EAAM,YAAY,EAAU,EAC5B,EAAO,mBAAmB,KAAK,EAAM,QAExB;GACX,IAAM,IAAQ,EAAO,mBAAmB,QAAQ,EAAM;AACtD,GAAI,MAAU,MAAI,EAAO,mBAAmB,OAAO,GAAO,EAAE;;GAE9D"}

package/dist/index.d.ts

@@ -14,6 +14,8 @@ export * from './hooks/useHost.ts';
 export * from './hooks/useParent.ts';
 export * from './hooks/useRef.ts';
 export * from './hooks/useRoute.ts';
+export * from './hooks/useShadow.ts';
 export * from './hooks/useStore.ts';
+export * from './hooks/useStyleEffect.ts';
 export * from './html.ts';
 export { html as h } from './html.ts';

package/dist/index.js

@@ -15,5 +15,7 @@ import { useForm as p, useFormDisabled as m, useFormResetCallback as h, useFormR
 import { useParent as _ } from "./hooks/useParent.js";
 import { useStore as v } from "./hooks/useStore.js";
 import { useRoute as y } from "./hooks/useRoute.js";
-import { html as b } from "./html.js";
-export { e as classes, t as createStore, r as defineComponent, i as extendComponentDefinition, b as h, b as html, s as useAsync, l as useAttributes, u as useChildEffect, a as useDisconnectCallback, d as useDocument, o as useEffect, f as useElementInternals, p as useForm, m as useFormDisabled, h as useFormResetCallback, g as useFormRestoreCallback, c as useHost, _ as useParent, n as useRef, y as useRoute, v as useStore };
+import { useShadow as b } from "./hooks/useShadow.js";
+import { useStyleEffect as x } from "./hooks/useStyleEffect.js";
+import { html as S } from "./html.js";
+export { e as classes, t as createStore, r as defineComponent, i as extendComponentDefinition, S as h, S as html, s as useAsync, l as useAttributes, u as useChildEffect, a as useDisconnectCallback, d as useDocument, o as useEffect, f as useElementInternals, p as useForm, m as useFormDisabled, h as useFormResetCallback, g as useFormRestoreCallback, c as useHost, _ as useParent, n as useRef, y as useRoute, b as useShadow, v as useStore, x as useStyleEffect };

package/package.json

@@ -21,5 +21,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.5.20"
+  "version": "0.5.22"
 }