sygnal 5.1.4 → 5.2.0

package/README.md

@@ -26,7 +26,7 @@ cd my-app
 npm run dev
 ```
 
-Choose from Vite (SPA), Vike (SSR), or Astro templates during setup.
+Choose from Vite (SPA), Vike (SSR), or Astro templates in JavaScript or TypeScript.
 
 **Or add to an existing project:**
 
@@ -313,18 +313,18 @@ App.model = {
 
 ### Disposal Hooks
 
-Cleanup on unmount:
+Cleanup on unmount with the built-in `DISPOSE` action:
 
 ```jsx
-MyComponent.intent = ({ dispose$ }) => ({
-  CLEANUP: dispose$,
-})
-
 MyComponent.model = {
-  CLEANUP: { WEBSOCKET: () => ({ type: 'close' }) },
+  DISPOSE: {
+    EFFECT: (state) => clearInterval(state.timerId),
+  },
 }
 ```
 
+For advanced cases needing stream composition, the `dispose$` source is also available in intent.
+
 ### Testing
 
 Test components in isolation with `renderComponent`:
@@ -469,6 +469,7 @@ h('div', [h('h1', 'Hello'), h('button.btn', 'Click')])
 | [AI Discussion Panel](./examples/ai-panel-spa) | Complex SPA with custom drivers |
 | [Sygnal ToDoMVC](https://github.com/tpresley/sygnal-todomvc) | [Live Demo](https://tpresley.github.io/sygnal-todomvc/) |
 | [Sygnal 2048](https://github.com/tpresley/sygnal-2048) | [Live Demo](https://tpresley.github.io/sygnal-2048/) |
+| [Sygnal Mahjong](https://github.com/tpresley/mahjong-trainer) | [Live Demo](https://tpresley.github.io/mahjong-trainer/) |
 | [Sygnal Calculator](https://github.com/tpresley/sygnal-calculator) | [Live Demo](https://tpresley.github.io/sygnal-calculator/) |
 
 ## Acknowledgments

package/dist/astro/client.cjs.js

@@ -5447,6 +5447,7 @@ const ENVIRONMENT = (typeof window != 'undefined' && window) || (typeof process
 const BOOTSTRAP_ACTION = 'BOOTSTRAP';
 const INITIALIZE_ACTION = 'INITIALIZE';
 const HYDRATE_ACTION = 'HYDRATE';
+const DISPOSE_ACTION = 'DISPOSE';
 const PARENT_SINK_NAME = 'PARENT';
 const CHILD_SOURCE_NAME = 'CHILD';
 const READY_SINK_NAME = 'READY';
@@ -5752,8 +5753,15 @@ class Component {
         }
     }
     dispose() {
-        // Signal disposal to the component via dispose$ stream
-        // This fires FIRST so CLEANUP actions in the model can process
+        // Fire the DISPOSE built-in action so model handlers can run cleanup logic
+        const hasDispose = this.model && (this.model[DISPOSE_ACTION] || Object.keys(this.model).some(k => k.includes('|') && k.split('|')[0].trim() === DISPOSE_ACTION));
+        if (hasDispose && this.action$ && typeof this.action$.shamefullySendNext === 'function') {
+            try {
+                this.action$.shamefullySendNext({ type: DISPOSE_ACTION });
+            }
+            catch (_) { }
+        }
+        // Signal disposal to the component via dispose$ stream (for advanced use cases)
         if (this._disposeListener) {
             try {
                 this._disposeListener.next(true);
@@ -5762,7 +5770,7 @@ class Component {
             catch (_) { }
             this._disposeListener = null;
         }
-        // Tear down streams on next microtask to allow CLEANUP actions to process
+        // Tear down streams on next microtask to allow DISPOSE/cleanup actions to process
         setTimeout(() => {
             // Complete the action$ stream to stop the entire component cycle
             if (this.action$ && typeof this.action$.shamefullySendComplete === 'function') {
@@ -7336,11 +7344,11 @@ function __sortFunctionFromObj(item) {
     }
     let ascending = true;
     if (typeof directionRaw === 'string') {
-        if (!['asc', 'dec'].includes(directionRaw.toLowerCase())) {
-            console.error('Sort object string values must be asc or dec:', item);
+        if (!['asc', 'desc'].includes(directionRaw.toLowerCase())) {
+            console.error('Sort object string values must be asc or desc:', item);
             return undefined;
         }
-        ascending = directionRaw.toLowerCase() === 'asc';
+        ascending = directionRaw.toLowerCase() !== 'desc';
     }
     if (typeof directionRaw === 'number') {
         if (directionRaw !== 1 && directionRaw !== -1) {
@@ -7359,9 +7367,9 @@ function sortFunctionFromProp(sortProp) {
     if (propType === 'function')
         return sortProp;
     if (propType === 'string') {
-        // if passed either 'asc' or 'dec' sort on the entire item
-        if (sortProp.toLowerCase() === 'asc' || sortProp.toLowerCase() === 'dec') {
-            const ascending = sortProp.toLowerCase() === 'asc';
+        // if passed either 'asc' or 'desc' sort on the entire item
+        if (sortProp.toLowerCase() === 'asc' || sortProp.toLowerCase() === 'desc') {
+            const ascending = sortProp.toLowerCase() !== 'desc';
             return (a, b) => __baseSort(a, b, ascending);
         }
         // assume it's a field/property name, and sort it ascending
@@ -7372,7 +7380,7 @@ function sortFunctionFromProp(sortProp) {
         const sorters = sortProp.map(item => {
             if (typeof item === 'function')
                 return item;
-            if (typeof item === 'string' && !['asc', 'dec'].includes(item.toLowerCase()))
+            if (typeof item === 'string' && !['asc', 'desc'].includes(item.toLowerCase()))
                 return (a, b) => __baseSort(a[item], b[item], true);
             if (isObj(item)) {
                 return __sortFunctionFromObj(item);
@@ -7706,6 +7714,13 @@ function run(app, drivers = {}, options = {}) {
             sources.STATE.stream.removeListener(persistListener);
             persistListener = null;
         }
+        // Trigger the component's dispose() which fires the DISPOSE action and dispose$ stream
+        if (typeof sinks.__dispose === 'function') {
+            try {
+                sinks.__dispose();
+            }
+            catch (_) { }
+        }
         rawDispose();
     };
     const exposed = { sources, sinks, dispose };

package/dist/astro/client.mjs

@@ -5445,6 +5445,7 @@ const ENVIRONMENT = (typeof window != 'undefined' && window) || (typeof process
 const BOOTSTRAP_ACTION = 'BOOTSTRAP';
 const INITIALIZE_ACTION = 'INITIALIZE';
 const HYDRATE_ACTION = 'HYDRATE';
+const DISPOSE_ACTION = 'DISPOSE';
 const PARENT_SINK_NAME = 'PARENT';
 const CHILD_SOURCE_NAME = 'CHILD';
 const READY_SINK_NAME = 'READY';
@@ -5750,8 +5751,15 @@ class Component {
         }
     }
     dispose() {
-        // Signal disposal to the component via dispose$ stream
-        // This fires FIRST so CLEANUP actions in the model can process
+        // Fire the DISPOSE built-in action so model handlers can run cleanup logic
+        const hasDispose = this.model && (this.model[DISPOSE_ACTION] || Object.keys(this.model).some(k => k.includes('|') && k.split('|')[0].trim() === DISPOSE_ACTION));
+        if (hasDispose && this.action$ && typeof this.action$.shamefullySendNext === 'function') {
+            try {
+                this.action$.shamefullySendNext({ type: DISPOSE_ACTION });
+            }
+            catch (_) { }
+        }
+        // Signal disposal to the component via dispose$ stream (for advanced use cases)
         if (this._disposeListener) {
             try {
                 this._disposeListener.next(true);
@@ -5760,7 +5768,7 @@ class Component {
             catch (_) { }
             this._disposeListener = null;
         }
-        // Tear down streams on next microtask to allow CLEANUP actions to process
+        // Tear down streams on next microtask to allow DISPOSE/cleanup actions to process
         setTimeout(() => {
             // Complete the action$ stream to stop the entire component cycle
             if (this.action$ && typeof this.action$.shamefullySendComplete === 'function') {
@@ -7334,11 +7342,11 @@ function __sortFunctionFromObj(item) {
     }
     let ascending = true;
     if (typeof directionRaw === 'string') {
-        if (!['asc', 'dec'].includes(directionRaw.toLowerCase())) {
-            console.error('Sort object string values must be asc or dec:', item);
+        if (!['asc', 'desc'].includes(directionRaw.toLowerCase())) {
+            console.error('Sort object string values must be asc or desc:', item);
             return undefined;
         }
-        ascending = directionRaw.toLowerCase() === 'asc';
+        ascending = directionRaw.toLowerCase() !== 'desc';
     }
     if (typeof directionRaw === 'number') {
         if (directionRaw !== 1 && directionRaw !== -1) {
@@ -7357,9 +7365,9 @@ function sortFunctionFromProp(sortProp) {
     if (propType === 'function')
         return sortProp;
     if (propType === 'string') {
-        // if passed either 'asc' or 'dec' sort on the entire item
-        if (sortProp.toLowerCase() === 'asc' || sortProp.toLowerCase() === 'dec') {
-            const ascending = sortProp.toLowerCase() === 'asc';
+        // if passed either 'asc' or 'desc' sort on the entire item
+        if (sortProp.toLowerCase() === 'asc' || sortProp.toLowerCase() === 'desc') {
+            const ascending = sortProp.toLowerCase() !== 'desc';
             return (a, b) => __baseSort(a, b, ascending);
         }
         // assume it's a field/property name, and sort it ascending
@@ -7370,7 +7378,7 @@ function sortFunctionFromProp(sortProp) {
         const sorters = sortProp.map(item => {
             if (typeof item === 'function')
                 return item;
-            if (typeof item === 'string' && !['asc', 'dec'].includes(item.toLowerCase()))
+            if (typeof item === 'string' && !['asc', 'desc'].includes(item.toLowerCase()))
                 return (a, b) => __baseSort(a[item], b[item], true);
             if (isObj(item)) {
                 return __sortFunctionFromObj(item);
@@ -7704,6 +7712,13 @@ function run(app, drivers = {}, options = {}) {
             sources.STATE.stream.removeListener(persistListener);
             persistListener = null;
         }
+        // Trigger the component's dispose() which fires the DISPOSE action and dispose$ stream
+        if (typeof sinks.__dispose === 'function') {
+            try {
+                sinks.__dispose();
+            }
+            catch (_) { }
+        }
         rawDispose();
     };
     const exposed = { sources, sinks, dispose };

package/dist/index.cjs.js

@@ -2185,6 +2185,7 @@ const ENVIRONMENT = (typeof window != 'undefined' && window) || (typeof process
 const BOOTSTRAP_ACTION = 'BOOTSTRAP';
 const INITIALIZE_ACTION = 'INITIALIZE';
 const HYDRATE_ACTION = 'HYDRATE';
+const DISPOSE_ACTION = 'DISPOSE';
 const PARENT_SINK_NAME = 'PARENT';
 const CHILD_SOURCE_NAME = 'CHILD';
 const READY_SINK_NAME = 'READY';
@@ -2490,8 +2491,15 @@ class Component {
         }
     }
     dispose() {
-        // Signal disposal to the component via dispose$ stream
-        // This fires FIRST so CLEANUP actions in the model can process
+        // Fire the DISPOSE built-in action so model handlers can run cleanup logic
+        const hasDispose = this.model && (this.model[DISPOSE_ACTION] || Object.keys(this.model).some(k => k.includes('|') && k.split('|')[0].trim() === DISPOSE_ACTION));
+        if (hasDispose && this.action$ && typeof this.action$.shamefullySendNext === 'function') {
+            try {
+                this.action$.shamefullySendNext({ type: DISPOSE_ACTION });
+            }
+            catch (_) { }
+        }
+        // Signal disposal to the component via dispose$ stream (for advanced use cases)
         if (this._disposeListener) {
             try {
                 this._disposeListener.next(true);
@@ -2500,7 +2508,7 @@ class Component {
             catch (_) { }
             this._disposeListener = null;
         }
-        // Tear down streams on next microtask to allow CLEANUP actions to process
+        // Tear down streams on next microtask to allow DISPOSE/cleanup actions to process
         setTimeout(() => {
             // Complete the action$ stream to stop the entire component cycle
             if (this.action$ && typeof this.action$.shamefullySendComplete === 'function') {
@@ -4074,11 +4082,11 @@ function __sortFunctionFromObj(item) {
     }
     let ascending = true;
     if (typeof directionRaw === 'string') {
-        if (!['asc', 'dec'].includes(directionRaw.toLowerCase())) {
-            console.error('Sort object string values must be asc or dec:', item);
+        if (!['asc', 'desc'].includes(directionRaw.toLowerCase())) {
+            console.error('Sort object string values must be asc or desc:', item);
             return undefined;
         }
-        ascending = directionRaw.toLowerCase() === 'asc';
+        ascending = directionRaw.toLowerCase() !== 'desc';
     }
     if (typeof directionRaw === 'number') {
         if (directionRaw !== 1 && directionRaw !== -1) {
@@ -4097,9 +4105,9 @@ function sortFunctionFromProp(sortProp) {
     if (propType === 'function')
         return sortProp;
     if (propType === 'string') {
-        // if passed either 'asc' or 'dec' sort on the entire item
-        if (sortProp.toLowerCase() === 'asc' || sortProp.toLowerCase() === 'dec') {
-            const ascending = sortProp.toLowerCase() === 'asc';
+        // if passed either 'asc' or 'desc' sort on the entire item
+        if (sortProp.toLowerCase() === 'asc' || sortProp.toLowerCase() === 'desc') {
+            const ascending = sortProp.toLowerCase() !== 'desc';
             return (a, b) => __baseSort(a, b, ascending);
         }
         // assume it's a field/property name, and sort it ascending
@@ -4110,7 +4118,7 @@ function sortFunctionFromProp(sortProp) {
         const sorters = sortProp.map(item => {
             if (typeof item === 'function')
                 return item;
-            if (typeof item === 'string' && !['asc', 'dec'].includes(item.toLowerCase()))
+            if (typeof item === 'string' && !['asc', 'desc'].includes(item.toLowerCase()))
                 return (a, b) => __baseSort(a[item], b[item], true);
             if (isObj(item)) {
                 return __sortFunctionFromObj(item);
@@ -5009,6 +5017,13 @@ function run(app, drivers = {}, options = {}) {
             sources.STATE.stream.removeListener(persistListener);
             persistListener = null;
         }
+        // Trigger the component's dispose() which fires the DISPOSE action and dispose$ stream
+        if (typeof sinks.__dispose === 'function') {
+            try {
+                sinks.__dispose();
+            }
+            catch (_) { }
+        }
         rawDispose();
     };
     const exposed = { sources, sinks, dispose };
@@ -5805,6 +5820,13 @@ function renderComponent(componentDef, options = {}) {
             catch (_) { }
             stateListener = null;
         }
+        // Trigger the component's dispose() which fires the DISPOSE action and dispose$ stream
+        if (typeof sinks.__dispose === 'function') {
+            try {
+                sinks.__dispose();
+            }
+            catch (_) { }
+        }
         rawDispose();
     };
     return {

package/dist/index.d.ts

@@ -117,6 +117,7 @@ type WithDefaultActions<STATE, ACTIONS> = ACTIONS & {
   BOOTSTRAP?: never;
   INITIALIZE?: STATE;
   HYDRATE?: any;
+  DISPOSE?: never;
 }
 
 type ComponentModel<STATE, PROPS, DRIVERS, ACTIONS, CALCULATED, SINK_RETURNS extends NonStateSinkReturns = {}> = keyof ACTIONS extends never
@@ -239,7 +240,7 @@ export type Filter<ITEM = any> = (item: ITEM) => boolean
 export type SortFunction<ITEM = any> = (a: ITEM, b: ITEM) => number
 
 export type SortObject<ITEM = any> = {
-  [field: string]: 'asc' | 'dec' | SortFunction<ITEM>
+  [field: string]: 'asc' | 'desc' | SortFunction<ITEM>
 }
 
 /**

package/dist/index.esm.js

@@ -2168,6 +2168,7 @@ const ENVIRONMENT = (typeof window != 'undefined' && window) || (typeof process
 const BOOTSTRAP_ACTION = 'BOOTSTRAP';
 const INITIALIZE_ACTION = 'INITIALIZE';
 const HYDRATE_ACTION = 'HYDRATE';
+const DISPOSE_ACTION = 'DISPOSE';
 const PARENT_SINK_NAME = 'PARENT';
 const CHILD_SOURCE_NAME = 'CHILD';
 const READY_SINK_NAME = 'READY';
@@ -2473,8 +2474,15 @@ class Component {
         }
     }
     dispose() {
-        // Signal disposal to the component via dispose$ stream
-        // This fires FIRST so CLEANUP actions in the model can process
+        // Fire the DISPOSE built-in action so model handlers can run cleanup logic
+        const hasDispose = this.model && (this.model[DISPOSE_ACTION] || Object.keys(this.model).some(k => k.includes('|') && k.split('|')[0].trim() === DISPOSE_ACTION));
+        if (hasDispose && this.action$ && typeof this.action$.shamefullySendNext === 'function') {
+            try {
+                this.action$.shamefullySendNext({ type: DISPOSE_ACTION });
+            }
+            catch (_) { }
+        }
+        // Signal disposal to the component via dispose$ stream (for advanced use cases)
         if (this._disposeListener) {
             try {
                 this._disposeListener.next(true);
@@ -2483,7 +2491,7 @@ class Component {
             catch (_) { }
             this._disposeListener = null;
         }
-        // Tear down streams on next microtask to allow CLEANUP actions to process
+        // Tear down streams on next microtask to allow DISPOSE/cleanup actions to process
         setTimeout(() => {
             // Complete the action$ stream to stop the entire component cycle
             if (this.action$ && typeof this.action$.shamefullySendComplete === 'function') {
@@ -4057,11 +4065,11 @@ function __sortFunctionFromObj(item) {
     }
     let ascending = true;
     if (typeof directionRaw === 'string') {
-        if (!['asc', 'dec'].includes(directionRaw.toLowerCase())) {
-            console.error('Sort object string values must be asc or dec:', item);
+        if (!['asc', 'desc'].includes(directionRaw.toLowerCase())) {
+            console.error('Sort object string values must be asc or desc:', item);
             return undefined;
         }
-        ascending = directionRaw.toLowerCase() === 'asc';
+        ascending = directionRaw.toLowerCase() !== 'desc';
     }
     if (typeof directionRaw === 'number') {
         if (directionRaw !== 1 && directionRaw !== -1) {
@@ -4080,9 +4088,9 @@ function sortFunctionFromProp(sortProp) {
     if (propType === 'function')
         return sortProp;
     if (propType === 'string') {
-        // if passed either 'asc' or 'dec' sort on the entire item
-        if (sortProp.toLowerCase() === 'asc' || sortProp.toLowerCase() === 'dec') {
-            const ascending = sortProp.toLowerCase() === 'asc';
+        // if passed either 'asc' or 'desc' sort on the entire item
+        if (sortProp.toLowerCase() === 'asc' || sortProp.toLowerCase() === 'desc') {
+            const ascending = sortProp.toLowerCase() !== 'desc';
             return (a, b) => __baseSort(a, b, ascending);
         }
         // assume it's a field/property name, and sort it ascending
@@ -4093,7 +4101,7 @@ function sortFunctionFromProp(sortProp) {
         const sorters = sortProp.map(item => {
             if (typeof item === 'function')
                 return item;
-            if (typeof item === 'string' && !['asc', 'dec'].includes(item.toLowerCase()))
+            if (typeof item === 'string' && !['asc', 'desc'].includes(item.toLowerCase()))
                 return (a, b) => __baseSort(a[item], b[item], true);
             if (isObj(item)) {
                 return __sortFunctionFromObj(item);
@@ -4992,6 +5000,13 @@ function run(app, drivers = {}, options = {}) {
             sources.STATE.stream.removeListener(persistListener);
             persistListener = null;
         }
+        // Trigger the component's dispose() which fires the DISPOSE action and dispose$ stream
+        if (typeof sinks.__dispose === 'function') {
+            try {
+                sinks.__dispose();
+            }
+            catch (_) { }
+        }
         rawDispose();
     };
     const exposed = { sources, sinks, dispose };
@@ -5788,6 +5803,13 @@ function renderComponent(componentDef, options = {}) {
             catch (_) { }
             stateListener = null;
         }
+        // Trigger the component's dispose() which fires the DISPOSE action and dispose$ stream
+        if (typeof sinks.__dispose === 'function') {
+            try {
+                sinks.__dispose();
+            }
+            catch (_) { }
+        }
         rawDispose();
     };
     return {