@seahax/elemental 0.4.0 → 0.4.2

package/README.md

@@ -2,9 +2,8 @@
 
 Functional, reactive, web component base library.
 
-Contains everything you need to build anything from a single component up to a full reactive application, with only about 3KB overhead (depending on compression, minification, and tree-shaking).
+Contains everything you need to build anything from a single component up to a full reactive application, with minimal overhead.
 
-- [![bundlejs](https://deno.bundlejs.com/badge?q=@seahax/elemental@latest&treeshake=[*])](https://bundlejs.com/?q=%40seahax%2Felemental%40latest&treeshake=%5B*%5D)
 - Create fully portable web components
 - Direct and safe access to the DOM (no virtual DOM)
 - React-style list rendering using unique keys
@@ -13,6 +12,11 @@ Contains everything you need to build anything from a single component up to a f
 - Client-side routing
 - No Build Tooling
 - No Dependencies
+- Tiny Bundle Size
+
+[![NPM](https://img.shields.io/npm/v/%40seahax%2Felemental?style=for-the-badge&color=red)](https://www.npmjs.com/package/@seahax/elemental) [![BundleJS (GZIP)](https://img.shields.io/bundlejs/size/%40seahax/elemental?style=for-the-badge&label=bundlejs%20(gzip))
+](https://bundlejs.com/?q=%40seahax%2Felemental%40latest&treeshake=%5B*%5D)
+
 
 ## Define A Web Component
 
@@ -26,13 +30,20 @@ import {
   useLoading,
   useEffect,
   useChildEffect,
+  useDisconnectEffect,
   useHost,
   h,
 } from '@seahax/elemental';
 
 export const MyComponent = defineComponent((shadow) => {
-  // This function is run once after the component is created, when it is
-  // first connected to the document.
+  // This function is called every time the component is connected to the
+  // document.
+  // 
+  // For the most part, a component's lifecycle should be handled as if it
+  // starts on connect and ends on disconnect, even though the component
+  // can be reconnected to the document. Restore internal state on
+  // connection from host attributes and properties. Effect hooks are
+  // designed to facilitate this pattern.
 
   // Create HTML elements and save references to them.
   const myInput = h('input');
@@ -87,8 +98,9 @@ export const MyComponent = defineComponent((shadow) => {
     // and when any of the dependencies change.
 
     return () => {
-      // Cleanup before the next effect callback and after the component
-      // is disconnected from the document.
+      // Cleanup after dependency refs are changed (before the next effect
+      // callback) and after the component is disconnected from the
+      // document.
     };
   });
 
@@ -104,6 +116,11 @@ export const MyComponent = defineComponent((shadow) => {
     };
   });
 
+  useDisconnectEffect(() => {
+    // Reactive code runs when the component is disconnected from the
+    // document.
+  });
+
   // Use the host element (generally only useful in reusable hooks).
   const host = useHost();
 });

package/dist/hooks/effect.d.ts

@@ -1,3 +1,9 @@
 import type { ReadonlyRef, RefValues } from './ref.ts';
 /** React to observable (reference) changes. */
 export declare function useEffect<const TDeps extends readonly ReadonlyRef<any>[]>(deps: TDeps, callback: (...values: RefValues<TDeps>) => (() => void) | void): void;
+/**
+ * React to document disconnection.
+ *
+ * Alias for: `useEffect([], () => callback)`
+ */
+export declare function useDisconnectEffect(callback: () => void): void;

package/dist/hooks/effect.js

@@ -11,7 +11,10 @@ function n(n, r) {
 		t && o.push(() => t());
 	}), a.push(s);
 }
+function r(e) {
+	n([], () => e);
+}
 //#endregion
-export { n as useEffect };
+export { r as useDisconnectEffect, n as useEffect };
 
 //# sourceMappingURL=effect.js.map

package/dist/hooks/effect.js.map

@@ -1 +1 @@
-{"version":3,"file":"effect.js","names":[],"sources":["../../src/hooks/effect.ts"],"sourcesContent":["import { createCallbacks } from '../internal/callbacks.ts';\nimport { useContext } from './context.ts';\nimport type { ReadonlyRef, RefValues } from './ref.ts';\n\n/** React to observable (reference) changes. */\nexport function useEffect<const TDeps extends readonly ReadonlyRef<any>[]>(\n  deps: TDeps,\n  callback: (...values: RefValues<TDeps>) => (() => void) | void,\n): void {\n  const { onNotify, onDisconnect } = useContext();\n  const cleanupCallback = createCallbacks();\n  const cleanup = (): void => cleanupCallback.runAndClear();\n  let values: any[] | undefined;\n\n  onNotify.push((): void => {\n    const newValues = deps.map((dep) => dep.value);\n    if (values?.length === newValues.length && values?.every((value, i) => value === newValues[i])) return;\n    values = newValues;\n    cleanup();\n    const maybeCleanup = callback(...(values as any));\n    if (maybeCleanup) cleanupCallback.push(() => maybeCleanup());\n  });\n\n  onDisconnect.push(cleanup);\n}\n"],"mappings":";;;AAKA,SAAgB,EACd,GACA,GACM;CACN,IAAM,EAAE,aAAU,oBAAiB,GAAY,EACzC,IAAkB,GAAiB,EACnC,UAAsB,EAAgB,aAAa,EACrD;AAWJ,CATA,EAAS,WAAiB;EACxB,IAAM,IAAY,EAAK,KAAK,MAAQ,EAAI,MAAM;AAC9C,MAAI,GAAQ,WAAW,EAAU,UAAU,GAAQ,OAAO,GAAO,MAAM,MAAU,EAAU,GAAG,CAAE;AAEhG,EADA,IAAS,GACT,GAAS;EACT,IAAM,IAAe,EAAS,GAAI,EAAe;AACjD,EAAI,KAAc,EAAgB,WAAW,GAAc,CAAC;GAC5D,EAEF,EAAa,KAAK,EAAQ"}
+{"version":3,"file":"effect.js","names":[],"sources":["../../src/hooks/effect.ts"],"sourcesContent":["import { createCallbacks } from '../internal/callbacks.ts';\nimport { useContext } from './context.ts';\nimport type { ReadonlyRef, RefValues } from './ref.ts';\n\n/** React to observable (reference) changes. */\nexport function useEffect<const TDeps extends readonly ReadonlyRef<any>[]>(\n  deps: TDeps,\n  callback: (...values: RefValues<TDeps>) => (() => void) | void,\n): void {\n  const { onNotify, onDisconnect } = useContext();\n  const cleanupCallback = createCallbacks();\n  const cleanup = (): void => cleanupCallback.runAndClear();\n  let values: any[] | undefined;\n\n  onNotify.push((): void => {\n    const newValues = deps.map((dep) => dep.value);\n    if (values?.length === newValues.length && values?.every((value, i) => value === newValues[i])) return;\n    values = newValues;\n    cleanup();\n    const maybeCleanup = callback(...(values as any));\n    if (maybeCleanup) cleanupCallback.push(() => maybeCleanup());\n  });\n\n  onDisconnect.push(cleanup);\n}\n\n/**\n * React to document disconnection.\n *\n * Alias for: `useEffect([], () => callback)`\n */\nexport function useDisconnectEffect(callback: () => void): void {\n  useEffect([], () => callback);\n}\n"],"mappings":";;;AAKA,SAAgB,EACd,GACA,GACM;CACN,IAAM,EAAE,aAAU,oBAAiB,GAAY,EACzC,IAAkB,GAAiB,EACnC,UAAsB,EAAgB,aAAa,EACrD;AAWJ,CATA,EAAS,WAAiB;EACxB,IAAM,IAAY,EAAK,KAAK,MAAQ,EAAI,MAAM;AAC9C,MAAI,GAAQ,WAAW,EAAU,UAAU,GAAQ,OAAO,GAAO,MAAM,MAAU,EAAU,GAAG,CAAE;AAEhG,EADA,IAAS,GACT,GAAS;EACT,IAAM,IAAe,EAAS,GAAI,EAAe;AACjD,EAAI,KAAc,EAAgB,WAAW,GAAc,CAAC;GAC5D,EAEF,EAAa,KAAK,EAAQ;;AAQ5B,SAAgB,EAAoB,GAA4B;AAC9D,GAAU,EAAE,QAAQ,EAAS"}

package/dist/index.js

@@ -1,13 +1,13 @@
 import { useRef as e } from "./hooks/ref.js";
 import { defineComponent as t } from "./component.js";
-import { useEffect as n } from "./hooks/effect.js";
-import { useHost as r } from "./hooks/host.js";
-import { useAttributes as i } from "./hooks/attributes.js";
-import { useChildEffect as a } from "./hooks/child-effect.js";
-import { useLoading as o } from "./hooks/loading.js";
-import { createStore as s } from "./store.js";
-import { getRouter as c } from "./router.js";
-import { useStore as l } from "./hooks/store.js";
-import { useRoute as u } from "./hooks/route.js";
-import { html as d } from "./html.js";
-export { s as createStore, t as defineComponent, c as getRouter, d as h, d as html, i as useAttributes, a as useChildEffect, n as useEffect, r as useHost, o as useLoading, e as useRef, u as useRoute, l as useStore };
+import { useDisconnectEffect as n, useEffect as r } from "./hooks/effect.js";
+import { useHost as i } from "./hooks/host.js";
+import { useAttributes as a } from "./hooks/attributes.js";
+import { useChildEffect as o } from "./hooks/child-effect.js";
+import { useLoading as s } from "./hooks/loading.js";
+import { createStore as c } from "./store.js";
+import { getRouter as l } from "./router.js";
+import { useStore as u } from "./hooks/store.js";
+import { useRoute as d } from "./hooks/route.js";
+import { html as f } from "./html.js";
+export { c as createStore, t as defineComponent, l as getRouter, f as h, f as html, a as useAttributes, o as useChildEffect, n as useDisconnectEffect, r as useEffect, i as useHost, s as useLoading, e as useRef, d as useRoute, u as useStore };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seahax/elemental",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Functional, reactive, web component base library.",
   "repository": {
     "type": "git",