Compare commits
35 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 2f0b39ae41 | |||
| 575477df09 | |||
| 39aa63bdb3 | |||
| c1aa4eae5e | |||
| d8decdb3e5 | |||
| 03cfee2003 | |||
| f6a3e71f0a | |||
| 6436370abc | |||
| eb1c48bee4 | |||
| 05417ed4c3 | |||
| 1d74a7f465 | |||
| 81ca32cdef | |||
| 07bfbfd393 | |||
| aa411072f2 | |||
| 02575e8baf | |||
| 09fc53aaff | |||
| bcb58dd012 | |||
| f0064bd94b | |||
| e9c527a9dc | |||
| a47d8bb3c7 | |||
| aa6766ef36 | |||
| b0442e1227 | |||
| 0f1eb6eb27 | |||
| dd18ef94bd | |||
| a0189921a5 | |||
| b409f1aa55 | |||
| 57553aa7c8 | |||
| c302cbdae4 | |||
| fd6e3ba8b1 | |||
| 8c3a7aa637 | |||
| 8c0125a8c0 | |||
| 40f3ffbdfb | |||
| d4e01a73d3 | |||
| 641e77892a | |||
| 0c1211778b |
@@ -6,8 +6,8 @@ on:
|
|||||||
- '**'
|
- '**'
|
||||||
|
|
||||||
env:
|
env:
|
||||||
IMAGE: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
IMAGE: code.foss.global/host.today/ht-docker-node:npmci
|
||||||
NPMCI_COMPUTED_REPOURL: https://${{gitea.repository_owner}}:${{secrets.GITEA_TOKEN}}@gitea.lossless.digital/${{gitea.repository}}.git
|
NPMCI_COMPUTED_REPOURL: https://${{gitea.repository_owner}}:${{secrets.GITEA_TOKEN}}@code.foss.global/${{gitea.repository}}.git
|
||||||
NPMCI_TOKEN_NPM: ${{secrets.NPMCI_TOKEN_NPM}}
|
NPMCI_TOKEN_NPM: ${{secrets.NPMCI_TOKEN_NPM}}
|
||||||
NPMCI_TOKEN_NPM2: ${{secrets.NPMCI_TOKEN_NPM2}}
|
NPMCI_TOKEN_NPM2: ${{secrets.NPMCI_TOKEN_NPM2}}
|
||||||
NPMCI_GIT_GITHUBTOKEN: ${{secrets.NPMCI_GIT_GITHUBTOKEN}}
|
NPMCI_GIT_GITHUBTOKEN: ${{secrets.NPMCI_GIT_GITHUBTOKEN}}
|
||||||
@@ -26,7 +26,7 @@ jobs:
|
|||||||
- name: Install pnpm and npmci
|
- name: Install pnpm and npmci
|
||||||
run: |
|
run: |
|
||||||
pnpm install -g pnpm
|
pnpm install -g pnpm
|
||||||
pnpm install -g @shipzone/npmci
|
pnpm install -g @ship.zone/npmci
|
||||||
|
|
||||||
- name: Run npm prepare
|
- name: Run npm prepare
|
||||||
run: npmci npm prepare
|
run: npmci npm prepare
|
||||||
|
|||||||
@@ -6,8 +6,8 @@ on:
|
|||||||
- '*'
|
- '*'
|
||||||
|
|
||||||
env:
|
env:
|
||||||
IMAGE: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
IMAGE: code.foss.global/host.today/ht-docker-node:npmci
|
||||||
NPMCI_COMPUTED_REPOURL: https://${{gitea.repository_owner}}:${{secrets.GITEA_TOKEN}}@gitea.lossless.digital/${{gitea.repository}}.git
|
NPMCI_COMPUTED_REPOURL: https://${{gitea.repository_owner}}:${{secrets.GITEA_TOKEN}}@code.foss.global/${{gitea.repository}}.git
|
||||||
NPMCI_TOKEN_NPM: ${{secrets.NPMCI_TOKEN_NPM}}
|
NPMCI_TOKEN_NPM: ${{secrets.NPMCI_TOKEN_NPM}}
|
||||||
NPMCI_TOKEN_NPM2: ${{secrets.NPMCI_TOKEN_NPM2}}
|
NPMCI_TOKEN_NPM2: ${{secrets.NPMCI_TOKEN_NPM2}}
|
||||||
NPMCI_GIT_GITHUBTOKEN: ${{secrets.NPMCI_GIT_GITHUBTOKEN}}
|
NPMCI_GIT_GITHUBTOKEN: ${{secrets.NPMCI_GIT_GITHUBTOKEN}}
|
||||||
@@ -26,7 +26,7 @@ jobs:
|
|||||||
- name: Prepare
|
- name: Prepare
|
||||||
run: |
|
run: |
|
||||||
pnpm install -g pnpm
|
pnpm install -g pnpm
|
||||||
pnpm install -g @shipzone/npmci
|
pnpm install -g @ship.zone/npmci
|
||||||
npmci npm prepare
|
npmci npm prepare
|
||||||
|
|
||||||
- name: Audit production dependencies
|
- name: Audit production dependencies
|
||||||
@@ -54,7 +54,7 @@ jobs:
|
|||||||
- name: Prepare
|
- name: Prepare
|
||||||
run: |
|
run: |
|
||||||
pnpm install -g pnpm
|
pnpm install -g pnpm
|
||||||
pnpm install -g @shipzone/npmci
|
pnpm install -g @ship.zone/npmci
|
||||||
npmci npm prepare
|
npmci npm prepare
|
||||||
|
|
||||||
- name: Test stable
|
- name: Test stable
|
||||||
@@ -82,7 +82,7 @@ jobs:
|
|||||||
- name: Prepare
|
- name: Prepare
|
||||||
run: |
|
run: |
|
||||||
pnpm install -g pnpm
|
pnpm install -g pnpm
|
||||||
pnpm install -g @shipzone/npmci
|
pnpm install -g @ship.zone/npmci
|
||||||
npmci npm prepare
|
npmci npm prepare
|
||||||
|
|
||||||
- name: Release
|
- name: Release
|
||||||
@@ -104,7 +104,7 @@ jobs:
|
|||||||
- name: Prepare
|
- name: Prepare
|
||||||
run: |
|
run: |
|
||||||
pnpm install -g pnpm
|
pnpm install -g pnpm
|
||||||
pnpm install -g @shipzone/npmci
|
pnpm install -g @ship.zone/npmci
|
||||||
npmci npm prepare
|
npmci npm prepare
|
||||||
|
|
||||||
- name: Code quality
|
- name: Code quality
|
||||||
|
|||||||
262
changelog.md
Normal file
262
changelog.md
Normal file
@@ -0,0 +1,262 @@
|
|||||||
|
# Changelog
|
||||||
|
|
||||||
|
## 2026-02-27 - 2.1.0 - feat(smartstate)
|
||||||
|
Add middleware, computed, batching, selector memoization, AbortSignal support, and Web Component Context Protocol provider
|
||||||
|
|
||||||
|
- Introduce StatePart middleware API (addMiddleware) — middleware runs sequentially before validation/persistence and can transform or reject a state change.
|
||||||
|
- Add computed derived observables: standalone computed(sources, fn) and Smartstate.computed to derive values from multiple state parts (lazy subscription).
|
||||||
|
- Add batching support via Smartstate.batch(fn), isBatching flag, and deferred notifications to batch multiple updates and flush only at the outermost level.
|
||||||
|
- Enhance select() with selector memoization (WeakMap cache and shareReplay) and optional AbortSignal support (auto-unsubscribe).
|
||||||
|
- Extend waitUntilPresent() to accept timeout and AbortSignal options and maintain backward-compatible numeric timeout argument.
|
||||||
|
- Add attachContextProvider(element, options) to bridge state parts to Web Component Context Protocol (context-request events) with subscribe/unsubscribe handling.
|
||||||
|
- Update StatePart.setState to run middleware, persist processed state atomically, and defer notifications to batching when applicable.
|
||||||
|
- Tests and README updated to document new features, behaviors, and examples.
|
||||||
|
|
||||||
|
## 2026-02-27 - 2.0.31 - fix(deps)
|
||||||
|
bump devDependencies and fix README license path
|
||||||
|
|
||||||
|
- Bump @git.zone/tsbundle from ^2.8.3 to ^2.9.0
|
||||||
|
- Bump @types/node from ^25.2.0 to ^25.3.2
|
||||||
|
- Update documented dependency set/version to v2.0.30 in readme.hints.md
|
||||||
|
- Fix README license file path from LICENSE to license in readme.md
|
||||||
|
|
||||||
|
## 2026-02-02 - 2.0.30 - fix(config)
|
||||||
|
update npmextra configuration and improve README: rename package keys, add release registry config, clarify waitUntilPresent timeout and notification/persistence behavior
|
||||||
|
|
||||||
|
- Renamed npmextra keys: 'gitzone' → '@git.zone/cli' and 'tsdoc' → '@git.zone/tsdoc'
|
||||||
|
- Added release configuration for @git.zone/cli including registries (verdaccio and npm) and accessLevel
|
||||||
|
- Removed top-level 'npmci' section
|
||||||
|
- Added new '@ship.zone/szci' entry with npmGlobalTools
|
||||||
|
- README: added waitUntilPresent timeout example with error handling
|
||||||
|
- README: clarified notifyChangeCumulative is debounced and documented persistence behavior (merge with defaults, atomic writes)
|
||||||
|
- README: documented concurrency/race-condition safety and timeout support for waitUntilPresent
|
||||||
|
|
||||||
|
## 2026-02-02 - 2.0.29 - fix(smartstate)
|
||||||
|
prevent duplicate statepart creation and fix persistence/notification race conditions
|
||||||
|
|
||||||
|
- Add pendingStatePartCreation map to deduplicate concurrent createStatePart calls
|
||||||
|
- Adjust init handling so 'force' falls through to creation and concurrent creations are serialized
|
||||||
|
- Merge persisted state with initial payload in 'persistent' initMode, with persisted values taking precedence
|
||||||
|
- Persist to WebStore before updating in-memory state to ensure atomicity
|
||||||
|
- Debounce cumulative notifications via pendingCumulativeNotification to avoid duplicate notifications
|
||||||
|
- Log selector errors instead of silently swallowing exceptions
|
||||||
|
- Add optional timeout to waitUntilPresent and ensure subscriptions and timeouts are cleaned up to avoid indefinite waits
|
||||||
|
- Await setState when performing chained state updates to ensure ordering and avoid race conditions
|
||||||
|
|
||||||
|
## 2026-02-02 - 2.0.28 - fix(deps)
|
||||||
|
bump devDependencies and dependencies, add tsbundle build config, update docs, and reorganize tests
|
||||||
|
|
||||||
|
- Bumped @git.zone/tsbuild to ^4.1.2, @git.zone/tsbundle to ^2.8.3, @git.zone/tsrun to ^2.0.1, @git.zone/tstest to ^3.1.8, and @types/node to ^25.2.0
|
||||||
|
- Upgraded @push.rocks/smartjson to ^6.0.0
|
||||||
|
- Added @git.zone/tsbundle bundle configuration to npmextra.json for building a dist bundle
|
||||||
|
- Removed pnpm-workspace.yaml entries (cleaned workspace constraints)
|
||||||
|
- Updated readme and readme.hints (docs formatting, version bumped to v2.0.28, issue reporting/security section and dependency list)
|
||||||
|
- Reorganized tests: removed *.both.ts variants and added consolidated test files under test/ (test.ts, test.initialization.ts)
|
||||||
|
|
||||||
|
## 2025-09-12 - 2.0.27 - fix(StatePart)
|
||||||
|
Use stable JSON stringify for state hashing; update dependencies and tooling
|
||||||
|
|
||||||
|
- Replace smartjson.stringify with smartjson.stableOneWayStringify when creating SHA256 state hashes to ensure deterministic hashing and avoid duplicate notifications for semantically identical states.
|
||||||
|
- Bump runtime dependencies: @push.rocks/smarthash -> ^3.2.6, @push.rocks/smartjson -> ^5.2.0.
|
||||||
|
- Bump dev tooling versions: @git.zone/tsbuild -> ^2.6.8, @git.zone/tsbundle -> ^2.5.1, @git.zone/tstest -> ^2.3.8.
|
||||||
|
- Add local .claude/settings.local.json configuration for allowed permissions (local tooling/settings file).
|
||||||
|
|
||||||
|
## 2025-08-16 - 2.0.26 - fix(ci)
|
||||||
|
Add local Claude settings file to allow helper permissions for common local commands
|
||||||
|
|
||||||
|
- Added .claude/settings.local.json to grant local helper permissions for tooling
|
||||||
|
- Allowed commands: Bash(tsx:*), Bash(tstest test:*), Bash(git add:*), Bash(git tag:*)
|
||||||
|
- No changes to source code or runtime behavior; tooling/config only
|
||||||
|
|
||||||
|
## 2025-07-29 - 2.0.25 - fix(core)
|
||||||
|
Major state initialization and validation improvements
|
||||||
|
|
||||||
|
- Fixed state hash bug: Now properly compares hash values instead of storing state objects
|
||||||
|
- Fixed state initialization merge order: Initial state now correctly takes precedence over stored state
|
||||||
|
- Improved type safety: stateStore properly typed as potentially undefined
|
||||||
|
- Simplified init mode logic with clear behavior for 'soft', 'mandatory', 'force', and 'persistent'
|
||||||
|
- Added state validation with extensible validateState() method
|
||||||
|
- Made notifyChange() async to support proper hash comparison
|
||||||
|
- Enhanced select() to filter undefined states automatically
|
||||||
|
- Added comprehensive test suite for state initialization scenarios
|
||||||
|
- Updated documentation with clearer examples and improved readme
|
||||||
|
|
||||||
|
## 2025-07-19 - 2.0.24 - fix(core)
|
||||||
|
Multiple fixes and improvements
|
||||||
|
|
||||||
|
- Fixed StateAction trigger method to properly return Promise<TStateType>
|
||||||
|
- Updated CI workflows to use new container registry and npmci package name
|
||||||
|
- Added pnpm workspace configuration for built-only dependencies
|
||||||
|
|
||||||
|
## 2025-07-19 - 2.0.23 - fix(ci)
|
||||||
|
Update CI workflows to use new container registry and npmci package name
|
||||||
|
|
||||||
|
- Changed CI image from 'registry.gitlab.com/hosttoday/ht-docker-node:npmci' to 'code.foss.global/host.today/ht-docker-node:npmci'
|
||||||
|
- Replaced npmci installation command from '@shipzone/npmci' to '@ship.zone/npmci' in workflow configurations
|
||||||
|
|
||||||
|
## 2025-07-19 - 2.0.22 - fix(smartstate)
|
||||||
|
Fix StateAction trigger method to properly return Promise
|
||||||
|
|
||||||
|
- Fixed StateAction.trigger() to return Promise<TStateType> as expected
|
||||||
|
- Updated readme with improved documentation and examples
|
||||||
|
- Replaced outdated legal information with Task Venture Capital GmbH details
|
||||||
|
- Added implementation notes in readme.hints.md
|
||||||
|
|
||||||
|
## 2025-06-19 - 2.0.21 - maintenance
|
||||||
|
General updates and improvements
|
||||||
|
|
||||||
|
## 2025-06-19 - 2.0.20 - fix(smartstate)
|
||||||
|
Update build scripts and dependency versions; replace isohash with smarthashWeb for state hash generation
|
||||||
|
|
||||||
|
- Adjusted package.json scripts to include verbose testing and modified build command
|
||||||
|
- Bumped development dependencies (tsbuild, tsbundle, tsrun, tstest, tapbundle) to newer versions
|
||||||
|
- Updated production dependencies (lik, smarthash, smartpromise, smartrx) with minor version bumps
|
||||||
|
- Replaced import of isohash with smarthashWeb in state hash generation, ensuring consistency across modules
|
||||||
|
|
||||||
|
## 2024-10-02 - 2.0.19 - fix(dependencies)
|
||||||
|
Update dependencies to latest versions
|
||||||
|
|
||||||
|
- Updated @git.zone/tsbuild to version ^2.1.84
|
||||||
|
- Updated @git.zone/tsbundle to version ^2.0.15
|
||||||
|
- Updated @git.zone/tsrun to version ^1.2.49
|
||||||
|
- Updated @git.zone/tstest to version ^1.0.90
|
||||||
|
- Updated @push.rocks/tapbundle to version ^5.3.0
|
||||||
|
- Updated @types/node to version ^22.7.4
|
||||||
|
- Updated @push.rocks/lik to version ^6.0.15
|
||||||
|
- Updated @push.rocks/smartjson to version ^5.0.20
|
||||||
|
- Updated @push.rocks/smartpromise to version ^4.0.4
|
||||||
|
- Updated @push.rocks/smartrx to version ^3.0.7
|
||||||
|
- Updated @push.rocks/webstore to version ^2.0.20
|
||||||
|
|
||||||
|
## 2024-10-02 - 2.0.18 - fix(core)
|
||||||
|
Fix type errors and typos in Smartstate class
|
||||||
|
|
||||||
|
- Updated type annotation in Smartstate class to ensure StatePartNameType extends string.
|
||||||
|
- Fixed a typo in the JSDoc comment: 'existing' instead of 'exiting'.
|
||||||
|
- Corrected improper type casting in the Smartstate class.
|
||||||
|
|
||||||
|
## 2024-05-29 - 2.0.17 - Maintenance
|
||||||
|
General updates and improvements.
|
||||||
|
|
||||||
|
- Updated project description
|
||||||
|
- Multiple updates to `tsconfig`
|
||||||
|
- Updated `npmextra.json` to include `githost`
|
||||||
|
|
||||||
|
## 2023-10-07 - 2.0.16 - Maintenance
|
||||||
|
General updates and improvements.
|
||||||
|
|
||||||
|
- Core update
|
||||||
|
|
||||||
|
## 2023-10-04 - 2.0.15 - Maintenance
|
||||||
|
General updates and improvements.
|
||||||
|
|
||||||
|
- Core update
|
||||||
|
|
||||||
|
## 2023-10-03 - 2.0.14 to 2.0.10 - Maintenance
|
||||||
|
General updates and improvements.
|
||||||
|
|
||||||
|
- Core updates
|
||||||
|
|
||||||
|
## 2023-09-11 - 2.0.9 - Maintenance
|
||||||
|
General updates and improvements.
|
||||||
|
|
||||||
|
- Core update
|
||||||
|
|
||||||
|
## 2023-09-11 - 2.0.8 - Maintenance
|
||||||
|
General updates and improvements.
|
||||||
|
|
||||||
|
- Core update
|
||||||
|
|
||||||
|
## 2023-07-27 - 2.0.7 - Maintenance
|
||||||
|
General updates and improvements.
|
||||||
|
|
||||||
|
- Core update
|
||||||
|
|
||||||
|
## 2023-07-27 - 2.0.6 - Maintenance
|
||||||
|
General updates and improvements.
|
||||||
|
|
||||||
|
- Core update
|
||||||
|
|
||||||
|
## 2023-04-13 - 2.0.5 - Maintenance
|
||||||
|
General updates and improvements.
|
||||||
|
|
||||||
|
- Core update
|
||||||
|
|
||||||
|
## 2023-04-12 - 2.0.4 - Maintenance
|
||||||
|
General updates and improvements.
|
||||||
|
|
||||||
|
- Core update
|
||||||
|
|
||||||
|
## 2023-04-04 - 2.0.3 to 2.0.1 - Maintenance
|
||||||
|
General updates and improvements.
|
||||||
|
|
||||||
|
- Core updates
|
||||||
|
|
||||||
|
## 2023-03-15 - 2.0.0 - Major Update
|
||||||
|
Core update with significant changes.
|
||||||
|
|
||||||
|
## 2022-03-25 - 1.0.23 - Major Update
|
||||||
|
Breaking changes and major updates.
|
||||||
|
|
||||||
|
- SWITCH TO ESM
|
||||||
|
|
||||||
|
## 2022-01-24 - 1.0.22 - Maintenance
|
||||||
|
General updates and improvements.
|
||||||
|
|
||||||
|
- Core updates
|
||||||
|
|
||||||
|
## 2020-11-30 - 1.0.21 to 1.0.20 - Maintenance
|
||||||
|
General updates and improvements.
|
||||||
|
|
||||||
|
- Core updates
|
||||||
|
|
||||||
|
## 2020-11-30 - 1.0.19 to 1.0.18 - Maintenance
|
||||||
|
General updates and improvements.
|
||||||
|
|
||||||
|
- Core updates
|
||||||
|
|
||||||
|
## 2020-07-27 - 1.0.17 to 1.0.16 - Maintenance
|
||||||
|
General updates and improvements.
|
||||||
|
|
||||||
|
- Core updates
|
||||||
|
|
||||||
|
## 2020-05-27 - 1.0.15 - Maintenance
|
||||||
|
General updates and improvements.
|
||||||
|
|
||||||
|
- Core update
|
||||||
|
|
||||||
|
## 2020-05-27 - 1.0.14 - Maintenance
|
||||||
|
General updates and improvements.
|
||||||
|
|
||||||
|
- Core update
|
||||||
|
|
||||||
|
## 2019-09-25 - 1.0.13 - Maintenance
|
||||||
|
General updates and improvements.
|
||||||
|
|
||||||
|
- Core update
|
||||||
|
|
||||||
|
## 2019-09-25 - 1.0.12 - Maintenance
|
||||||
|
General updates and improvements.
|
||||||
|
|
||||||
|
- Core updates
|
||||||
|
|
||||||
|
## 2019-04-30 - 1.0.11 to 1.0.10 - Maintenance
|
||||||
|
General updates and improvements.
|
||||||
|
|
||||||
|
- Core updates
|
||||||
|
|
||||||
|
## 2019-03-22 - 1.0.9 - Maintenance
|
||||||
|
General updates and improvements.
|
||||||
|
|
||||||
|
- Core update
|
||||||
|
|
||||||
|
## 2019-02-27 - 1.0.8 - Minor Update
|
||||||
|
Minor updates and improvements.
|
||||||
|
|
||||||
|
- Updated action generation
|
||||||
|
- Core update
|
||||||
|
|
||||||
|
## 2019-02-21 - 1.0.7 - Initial Release
|
||||||
|
Initial release of the project.
|
||||||
|
|
||||||
|
- Initial core implementation
|
||||||
@@ -1,17 +1,55 @@
|
|||||||
{
|
{
|
||||||
"npmci": {
|
"@git.zone/tsbundle": {
|
||||||
"npmGlobalTools": [],
|
"bundles": [
|
||||||
"npmAccessLevel": "public"
|
{
|
||||||
|
"from": "./ts/index.ts",
|
||||||
|
"to": "./dist_bundle/bundle.js",
|
||||||
|
"outputMode": "bundle",
|
||||||
|
"bundler": "esbuild",
|
||||||
|
"production": true
|
||||||
|
}
|
||||||
|
]
|
||||||
},
|
},
|
||||||
"gitzone": {
|
"@git.zone/cli": {
|
||||||
"projectType": "npm",
|
"projectType": "npm",
|
||||||
"module": {
|
"module": {
|
||||||
"githost": "gitlab.com",
|
"githost": "code.foss.global",
|
||||||
"gitscope": "push.rocks",
|
"gitscope": "push.rocks",
|
||||||
"gitrepo": "smartstate",
|
"gitrepo": "smartstate",
|
||||||
"description": "a package that handles state in a good way",
|
"description": "A TypeScript-first reactive state management library with middleware, computed state, batching, persistence, and Web Component Context Protocol support.",
|
||||||
"npmPackagename": "@push.rocks/smartstate",
|
"npmPackagename": "@push.rocks/smartstate",
|
||||||
"license": "MIT"
|
"license": "MIT",
|
||||||
|
"keywords": [
|
||||||
|
"state management",
|
||||||
|
"reactive programming",
|
||||||
|
"TypeScript",
|
||||||
|
"observables",
|
||||||
|
"web storage",
|
||||||
|
"state action",
|
||||||
|
"state selection",
|
||||||
|
"state notification",
|
||||||
|
"asynchronous state",
|
||||||
|
"cumulative notification",
|
||||||
|
"middleware",
|
||||||
|
"computed state",
|
||||||
|
"batch updates",
|
||||||
|
"context protocol",
|
||||||
|
"web components",
|
||||||
|
"AbortSignal"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"release": {
|
||||||
|
"registries": [
|
||||||
|
"https://verdaccio.lossless.digital",
|
||||||
|
"https://registry.npmjs.org"
|
||||||
|
],
|
||||||
|
"accessLevel": "public"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"@git.zone/tsdoc": {
|
||||||
|
"legal": "\n## License and Legal Information\n\nThis repository contains open-source code that is licensed under the MIT License. A copy of the MIT License can be found in the [license](license) file within this repository. \n\n**Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.\n\n### Trademarks\n\nThis project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH and are not included within the scope of the MIT license granted herein. Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines, and any usage must be approved in writing by Task Venture Capital GmbH.\n\n### Company Information\n\nTask Venture Capital GmbH \nRegistered at District court Bremen HRB 35230 HB, Germany\n\nFor any legal inquiries or if you require further information, please contact us via email at hello@task.vc.\n\nBy using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.\n"
|
||||||
|
},
|
||||||
|
"@ship.zone/szci": {
|
||||||
|
"npmGlobalTools": []
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
16523
package-lock.json
generated
Normal file
16523
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
57
package.json
57
package.json
@@ -1,33 +1,32 @@
|
|||||||
{
|
{
|
||||||
"name": "@push.rocks/smartstate",
|
"name": "@push.rocks/smartstate",
|
||||||
"version": "2.0.16",
|
"version": "2.1.0",
|
||||||
"private": false,
|
"private": false,
|
||||||
"description": "a package that handles state in a good way",
|
"description": "A TypeScript-first reactive state management library with middleware, computed state, batching, persistence, and Web Component Context Protocol support.",
|
||||||
"main": "dist_ts/index.js",
|
"main": "dist_ts/index.js",
|
||||||
"typings": "dist_ts/index.d.ts",
|
"typings": "dist_ts/index.d.ts",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"author": "Lossless GmbH",
|
"author": "Lossless GmbH",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "(tstest test/)",
|
"test": "(tstest test/ --verbose)",
|
||||||
"build": "(tsbuild --web --allowimplicitany && tsbundle npm)",
|
"build": "(tsbuild tsfolders --allowimplicitany && tsbundle npm)",
|
||||||
"buildDocs": "tsdoc"
|
"buildDocs": "tsdoc"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@git.zone/tsbuild": "^2.1.70",
|
"@git.zone/tsbuild": "^4.1.2",
|
||||||
"@git.zone/tsbundle": "^2.0.8",
|
"@git.zone/tsbundle": "^2.9.0",
|
||||||
"@git.zone/tsrun": "^1.2.46",
|
"@git.zone/tsrun": "^2.0.1",
|
||||||
"@git.zone/tstest": "^1.0.81",
|
"@git.zone/tstest": "^3.1.8",
|
||||||
"@push.rocks/tapbundle": "^5.0.15",
|
"@push.rocks/tapbundle": "^6.0.3",
|
||||||
"@types/node": "^20.8.0"
|
"@types/node": "^25.3.2"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@push.rocks/isohash": "^2.0.1",
|
"@push.rocks/smarthash": "^3.2.6",
|
||||||
"@push.rocks/lik": "^6.0.5",
|
"@push.rocks/smartjson": "^6.0.0",
|
||||||
"@push.rocks/smartjson": "^5.0.10",
|
"@push.rocks/smartpromise": "^4.2.3",
|
||||||
"@push.rocks/smartpromise": "^4.0.3",
|
"@push.rocks/smartrx": "^3.0.10",
|
||||||
"@push.rocks/smartrx": "^3.0.6",
|
"@push.rocks/webstore": "^2.0.20"
|
||||||
"@push.rocks/webstore": "^2.0.13"
|
|
||||||
},
|
},
|
||||||
"files": [
|
"files": [
|
||||||
"ts/**/*",
|
"ts/**/*",
|
||||||
@@ -43,5 +42,29 @@
|
|||||||
],
|
],
|
||||||
"browserslist": [
|
"browserslist": [
|
||||||
"last 1 chrome versions"
|
"last 1 chrome versions"
|
||||||
]
|
],
|
||||||
|
"keywords": [
|
||||||
|
"state management",
|
||||||
|
"reactive programming",
|
||||||
|
"TypeScript",
|
||||||
|
"observables",
|
||||||
|
"web storage",
|
||||||
|
"state action",
|
||||||
|
"state selection",
|
||||||
|
"state notification",
|
||||||
|
"asynchronous state",
|
||||||
|
"cumulative notification",
|
||||||
|
"middleware",
|
||||||
|
"computed state",
|
||||||
|
"batch updates",
|
||||||
|
"context protocol",
|
||||||
|
"web components",
|
||||||
|
"AbortSignal"
|
||||||
|
],
|
||||||
|
"homepage": "https://code.foss.global/push.rocks/smartstate",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://code.foss.global/push.rocks/smartstate.git"
|
||||||
|
},
|
||||||
|
"packageManager": "pnpm@10.11.0+sha512.6540583f41cc5f628eb3d9773ecee802f4f9ef9923cc45b69890fb47991d4b092964694ec3a4f738a420c918a333062c8b925d312f42e4f0c263eb603551f977"
|
||||||
}
|
}
|
||||||
|
|||||||
12984
pnpm-lock.yaml
generated
12984
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
77
readme.hints.md
Normal file
77
readme.hints.md
Normal file
@@ -0,0 +1,77 @@
|
|||||||
|
# Smartstate Implementation Notes
|
||||||
|
|
||||||
|
## Current API (as of v2.0.31)
|
||||||
|
|
||||||
|
### State Part Initialization
|
||||||
|
- State parts can be created with different init modes: 'soft' (default), 'mandatory', 'force', 'persistent'
|
||||||
|
- 'soft' - returns existing state part if exists, creates new if not
|
||||||
|
- 'mandatory' - requires state part to not exist, fails if it does
|
||||||
|
- 'force' - always creates new state part, overwriting any existing
|
||||||
|
- 'persistent' - like 'soft' but with WebStore persistence (IndexedDB)
|
||||||
|
- Persistent mode automatically calls init() internally
|
||||||
|
- State merge order fixed: initial state takes precedence over stored state
|
||||||
|
|
||||||
|
### Actions
|
||||||
|
- Actions are created with `createAction()` method
|
||||||
|
- Two ways to dispatch: `stateAction.trigger(payload)` or `statePart.dispatchAction(stateAction, payload)`
|
||||||
|
- Both return Promise<TStatePayload>
|
||||||
|
|
||||||
|
### State Management Methods
|
||||||
|
- `select(fn?, { signal? })` - returns Observable, memoized by selector fn ref, supports AbortSignal
|
||||||
|
- `waitUntilPresent(fn?, number | { timeoutMs?, signal? })` - waits for state condition, backward compat with number arg
|
||||||
|
- `stateSetup()` - async state initialization with cumulative defer
|
||||||
|
- `notifyChangeCumulative()` - defers notification to end of call stack
|
||||||
|
- `getState()` - returns current state or undefined
|
||||||
|
- `setState()` - runs middleware, validates, persists, notifies
|
||||||
|
- `addMiddleware(fn)` - intercepts setState, returns removal function
|
||||||
|
|
||||||
|
### Middleware
|
||||||
|
- Type: `(newState, oldState) => newState | Promise<newState>`
|
||||||
|
- Runs sequentially in insertion order before validation/persistence
|
||||||
|
- Throw to reject state changes (atomic — state unchanged on error)
|
||||||
|
- Does NOT run during initial createStatePart() hydration
|
||||||
|
|
||||||
|
### Selector Memoization
|
||||||
|
- Uses WeakMap<Function, Observable> for fn-keyed cache
|
||||||
|
- `defaultSelectObservable` for no-arg select()
|
||||||
|
- Wrapped in `shareReplay({ bufferSize: 1, refCount: true })`
|
||||||
|
- NOT cached when AbortSignal is provided
|
||||||
|
|
||||||
|
### Batch Updates
|
||||||
|
- `smartstate.batch(async () => {...})` — defers notifications until batch completes
|
||||||
|
- Supports nesting — only flushes at outermost level
|
||||||
|
- StatePart has `smartstateRef` set by `createStatePart()` for batch awareness
|
||||||
|
- State parts created via `new StatePart()` directly work without batching
|
||||||
|
|
||||||
|
### Computed State
|
||||||
|
- `computed(sources, fn)` — standalone function using `combineLatest` + `map`
|
||||||
|
- Also available as `smartstate.computed(sources, fn)`
|
||||||
|
- Lazy — only subscribes when subscribed to
|
||||||
|
|
||||||
|
### Context Protocol Bridge
|
||||||
|
- `attachContextProvider(element, { context, statePart, selectorFn? })` — returns cleanup fn
|
||||||
|
- Listens for `context-request` CustomEvent on element
|
||||||
|
- Supports one-shot and subscription modes
|
||||||
|
- Works with Lit @consume(), FAST, or any Context Protocol consumer
|
||||||
|
|
||||||
|
### State Hash Detection
|
||||||
|
- Uses SHA256 hash to detect actual state changes
|
||||||
|
- Hash comparison properly awaits async hash calculation
|
||||||
|
- Prevents duplicate notifications for identical state values
|
||||||
|
|
||||||
|
### State Validation
|
||||||
|
- Basic validation ensures state is not null/undefined
|
||||||
|
- `validateState()` can be overridden in subclasses
|
||||||
|
|
||||||
|
### Key Notes
|
||||||
|
- `smartstateRef` creates circular ref between StatePart and Smartstate
|
||||||
|
- Use `===` not deep equality for StatePart comparison in tests
|
||||||
|
- Direct rxjs imports used for: Observable, shareReplay, takeUntil, combineLatest, map
|
||||||
|
|
||||||
|
## Dependency Versions (v2.0.31)
|
||||||
|
- @git.zone/tsbuild: ^4.1.2
|
||||||
|
- @git.zone/tsbundle: ^2.9.0
|
||||||
|
- @git.zone/tsrun: ^2.0.1
|
||||||
|
- @git.zone/tstest: ^3.1.8
|
||||||
|
- @push.rocks/smartjson: ^6.0.0
|
||||||
|
- @types/node: ^25.3.2
|
||||||
351
readme.md
351
readme.md
@@ -1,37 +1,336 @@
|
|||||||
# @push.rocks/smartstate
|
# @push.rocks/smartstate
|
||||||
a package that handles state in a good way
|
|
||||||
|
|
||||||
## Availabililty and Links
|
A TypeScript-first reactive state management library with middleware, computed state, batching, persistence, and Web Component Context Protocol support 🚀
|
||||||
* [npmjs.org (npm package)](https://www.npmjs.com/package/@push.rocks/smartstate)
|
|
||||||
* [gitlab.com (source)](https://gitlab.com/push.rocks/smartstate)
|
|
||||||
* [github.com (source mirror)](https://github.com/push.rocks/smartstate)
|
|
||||||
* [docs (typedoc)](https://push.rocks.gitlab.io/smartstate/)
|
|
||||||
|
|
||||||
## Status for master
|
## Issue Reporting and Security
|
||||||
|
|
||||||
Status Category | Status Badge
|
For reporting bugs, issues, or security vulnerabilities, please visit [community.foss.global/](https://community.foss.global/). This is the central community hub for all issue reporting. Developers who sign and comply with our contribution agreement and go through identification can also get a [code.foss.global/](https://code.foss.global/) account to submit Pull Requests directly.
|
||||||
-- | --
|
|
||||||
GitLab Pipelines | [](https://lossless.cloud)
|
## Install
|
||||||
GitLab Pipline Test Coverage | [](https://lossless.cloud)
|
|
||||||
npm | [](https://lossless.cloud)
|
```bash
|
||||||
Snyk | [](https://lossless.cloud)
|
pnpm install @push.rocks/smartstate --save
|
||||||
TypeScript Support | [](https://lossless.cloud)
|
```
|
||||||
node Support | [](https://nodejs.org/dist/latest-v10.x/docs/api/)
|
|
||||||
Code Style | [](https://lossless.cloud)
|
Or with npm:
|
||||||
PackagePhobia (total standalone install weight) | [](https://lossless.cloud)
|
|
||||||
PackagePhobia (package size on registry) | [](https://lossless.cloud)
|
```bash
|
||||||
BundlePhobia (total size when bundled) | [](https://lossless.cloud)
|
npm install @push.rocks/smartstate --save
|
||||||
|
```
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
Use TypeScript for best in class intellisense.
|
### Quick Start
|
||||||
|
|
||||||
## Contribution
|
```typescript
|
||||||
|
import { Smartstate } from '@push.rocks/smartstate';
|
||||||
|
|
||||||
We are always happy for code contributions. If you are not the code contributing type that is ok. Still, maintaining Open Source repositories takes considerable time and thought. If you like the quality of what we do and our modules are useful to you we would appreciate a little monthly contribution: You can [contribute one time](https://lossless.link/contribute-onetime) or [contribute monthly](https://lossless.link/contribute). :)
|
// 1. Define your state part names
|
||||||
|
type AppParts = 'user' | 'settings';
|
||||||
|
|
||||||
For further information read the linked docs at the top of this readme.
|
// 2. Create the root instance
|
||||||
|
const state = new Smartstate<AppParts>();
|
||||||
|
|
||||||
## Legal
|
// 3. Create state parts with initial values
|
||||||
> MIT licensed | **©** [Task Venture Capital GmbH](https://task.vc)
|
const userState = await state.getStatePart<{ name: string; loggedIn: boolean }>('user', {
|
||||||
| By using this npm module you agree to our [privacy policy](https://lossless.gmbH/privacy)
|
name: '',
|
||||||
|
loggedIn: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 4. Subscribe to changes
|
||||||
|
userState.select((s) => s.name).subscribe((name) => {
|
||||||
|
console.log('Name changed:', name);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 5. Update state
|
||||||
|
await userState.setState({ name: 'Alice', loggedIn: true });
|
||||||
|
```
|
||||||
|
|
||||||
|
### State Parts & Init Modes
|
||||||
|
|
||||||
|
State parts are isolated, typed units of state. Create them with `getStatePart()`:
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
const part = await state.getStatePart<IMyState>(name, initialState, initMode);
|
||||||
|
```
|
||||||
|
|
||||||
|
| Init Mode | Behavior |
|
||||||
|
|-----------|----------|
|
||||||
|
| `'soft'` (default) | Returns existing if found, creates new otherwise |
|
||||||
|
| `'mandatory'` | Throws if state part already exists |
|
||||||
|
| `'force'` | Always creates new, overwrites existing |
|
||||||
|
| `'persistent'` | Like `'soft'` but persists to IndexedDB via WebStore |
|
||||||
|
|
||||||
|
#### Persistent State
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
const settings = await state.getStatePart('settings', { theme: 'dark' }, 'persistent');
|
||||||
|
// Automatically saved to IndexedDB. On next app load, persisted values override defaults.
|
||||||
|
```
|
||||||
|
|
||||||
|
### Selecting State
|
||||||
|
|
||||||
|
`select()` returns an RxJS Observable that emits the current value immediately and on every change:
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// Full state
|
||||||
|
userState.select().subscribe((state) => console.log(state));
|
||||||
|
|
||||||
|
// Derived value via selector
|
||||||
|
userState.select((s) => s.name).subscribe((name) => console.log(name));
|
||||||
|
```
|
||||||
|
|
||||||
|
Selectors are **memoized** — calling `select(fn)` with the same function reference returns the same cached Observable, shared across all subscribers.
|
||||||
|
|
||||||
|
#### AbortSignal Support
|
||||||
|
|
||||||
|
Clean up subscriptions without manual `unsubscribe()`:
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
const controller = new AbortController();
|
||||||
|
|
||||||
|
userState.select((s) => s.name, { signal: controller.signal }).subscribe((name) => {
|
||||||
|
console.log(name); // stops receiving when aborted
|
||||||
|
});
|
||||||
|
|
||||||
|
// Later: clean up
|
||||||
|
controller.abort();
|
||||||
|
```
|
||||||
|
|
||||||
|
### Actions
|
||||||
|
|
||||||
|
Actions provide controlled, named state mutations:
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
const login = userState.createAction<{ name: string }>(async (statePart, payload) => {
|
||||||
|
return { ...statePart.getState(), name: payload.name, loggedIn: true };
|
||||||
|
});
|
||||||
|
|
||||||
|
// Two equivalent ways to dispatch:
|
||||||
|
await login.trigger({ name: 'Alice' });
|
||||||
|
await userState.dispatchAction(login, { name: 'Alice' });
|
||||||
|
```
|
||||||
|
|
||||||
|
### Middleware
|
||||||
|
|
||||||
|
Intercept every `setState()` call to transform, validate, or reject state changes:
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// Logging middleware
|
||||||
|
userState.addMiddleware((newState, oldState) => {
|
||||||
|
console.log('State changing from', oldState, 'to', newState);
|
||||||
|
return newState;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Validation middleware — throw to reject the change
|
||||||
|
userState.addMiddleware((newState) => {
|
||||||
|
if (!newState.name) throw new Error('Name is required');
|
||||||
|
return newState;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Transform middleware
|
||||||
|
userState.addMiddleware((newState) => {
|
||||||
|
return { ...newState, name: newState.name.trim() };
|
||||||
|
});
|
||||||
|
|
||||||
|
// Removal — addMiddleware returns a dispose function
|
||||||
|
const remove = userState.addMiddleware(myMiddleware);
|
||||||
|
remove(); // middleware no longer runs
|
||||||
|
```
|
||||||
|
|
||||||
|
Middleware runs sequentially in insertion order. If any middleware throws, the state is unchanged (atomic).
|
||||||
|
|
||||||
|
### Computed / Derived State
|
||||||
|
|
||||||
|
Derive reactive values from one or more state parts:
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import { computed } from '@push.rocks/smartstate';
|
||||||
|
|
||||||
|
const userState = await state.getStatePart('user', { firstName: 'Jane', lastName: 'Doe' });
|
||||||
|
const settingsState = await state.getStatePart('settings', { locale: 'en' });
|
||||||
|
|
||||||
|
// Standalone function
|
||||||
|
const greeting$ = computed(
|
||||||
|
[userState, settingsState],
|
||||||
|
(user, settings) => `Hello, ${user.firstName} (${settings.locale})`,
|
||||||
|
);
|
||||||
|
|
||||||
|
greeting$.subscribe((msg) => console.log(msg));
|
||||||
|
// => "Hello, Jane (en)"
|
||||||
|
|
||||||
|
// Also available as a method on Smartstate:
|
||||||
|
const greeting2$ = state.computed([userState, settingsState], (user, settings) => /* ... */);
|
||||||
|
```
|
||||||
|
|
||||||
|
Computed observables are **lazy** — they only subscribe to sources when someone subscribes to them.
|
||||||
|
|
||||||
|
### Batch Updates
|
||||||
|
|
||||||
|
Update multiple state parts without intermediate notifications:
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
const partA = await state.getStatePart('a', { value: 1 });
|
||||||
|
const partB = await state.getStatePart('b', { value: 2 });
|
||||||
|
|
||||||
|
// Subscribers see no updates during the batch — only after it completes
|
||||||
|
await state.batch(async () => {
|
||||||
|
await partA.setState({ value: 10 });
|
||||||
|
await partB.setState({ value: 20 });
|
||||||
|
// Notifications are deferred here
|
||||||
|
});
|
||||||
|
// Both subscribers now fire with their new values
|
||||||
|
|
||||||
|
// Nested batches are supported — flush happens at the outermost level
|
||||||
|
await state.batch(async () => {
|
||||||
|
await partA.setState({ value: 100 });
|
||||||
|
await state.batch(async () => {
|
||||||
|
await partB.setState({ value: 200 });
|
||||||
|
});
|
||||||
|
// Still deferred
|
||||||
|
});
|
||||||
|
// Now both fire
|
||||||
|
```
|
||||||
|
|
||||||
|
### Waiting for State
|
||||||
|
|
||||||
|
Wait for a specific state condition to be met:
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// Wait for any truthy state
|
||||||
|
const currentState = await userState.waitUntilPresent();
|
||||||
|
|
||||||
|
// Wait for a specific condition
|
||||||
|
const name = await userState.waitUntilPresent((s) => s.name || undefined);
|
||||||
|
|
||||||
|
// With timeout (backward compatible)
|
||||||
|
const name = await userState.waitUntilPresent((s) => s.name || undefined, 5000);
|
||||||
|
|
||||||
|
// With AbortSignal
|
||||||
|
const controller = new AbortController();
|
||||||
|
try {
|
||||||
|
const name = await userState.waitUntilPresent(
|
||||||
|
(s) => s.name || undefined,
|
||||||
|
{ timeoutMs: 5000, signal: controller.signal },
|
||||||
|
);
|
||||||
|
} catch (e) {
|
||||||
|
// 'Aborted' or timeout error
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Context Protocol Bridge (Web Components)
|
||||||
|
|
||||||
|
Expose state parts to web components via the [W3C Context Protocol](https://github.com/webcomponents-cg/community-protocols/blob/main/proposals/context.md):
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import { attachContextProvider } from '@push.rocks/smartstate';
|
||||||
|
|
||||||
|
// Define a context key
|
||||||
|
const themeContext = Symbol('theme');
|
||||||
|
|
||||||
|
// Attach a provider to a DOM element
|
||||||
|
const cleanup = attachContextProvider(myElement, {
|
||||||
|
context: themeContext,
|
||||||
|
statePart: settingsState,
|
||||||
|
selectorFn: (s) => s.theme, // optional: provide derived value
|
||||||
|
});
|
||||||
|
|
||||||
|
// Any descendant can request this context:
|
||||||
|
myElement.dispatchEvent(
|
||||||
|
new CustomEvent('context-request', {
|
||||||
|
bubbles: true,
|
||||||
|
composed: true,
|
||||||
|
detail: {
|
||||||
|
context: themeContext,
|
||||||
|
callback: (theme) => console.log('Theme:', theme),
|
||||||
|
subscribe: true, // receive updates on state changes
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
// Cleanup when done
|
||||||
|
cleanup();
|
||||||
|
```
|
||||||
|
|
||||||
|
This works with Lit's `@consume()` decorator, FAST, or any framework implementing the Context Protocol.
|
||||||
|
|
||||||
|
### State Validation
|
||||||
|
|
||||||
|
Built-in null/undefined validation. Extend for custom rules:
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
class ValidatedPart<T> extends StatePart<string, T> {
|
||||||
|
protected validateState(stateArg: any): stateArg is T {
|
||||||
|
return super.validateState(stateArg) && typeof stateArg.name === 'string';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Performance Features
|
||||||
|
|
||||||
|
- **SHA256 Change Detection** — identical state values don't trigger notifications, even with different object references
|
||||||
|
- **Selector Memoization** — `select(fn)` caches observables by function reference, sharing one upstream subscription across all subscribers
|
||||||
|
- **Cumulative Notifications** — `notifyChangeCumulative()` debounces rapid changes into a single notification
|
||||||
|
- **Concurrent Safety** — simultaneous `getStatePart()` calls for the same name return the same promise, preventing duplicate creation
|
||||||
|
- **Atomic Persistence** — WebStore writes complete before in-memory state updates, ensuring consistency
|
||||||
|
- **Batch Deferred Notifications** — `batch()` suppresses all notifications until the batch completes
|
||||||
|
|
||||||
|
## API Reference
|
||||||
|
|
||||||
|
### `Smartstate<T>`
|
||||||
|
|
||||||
|
| Method | Description |
|
||||||
|
|--------|-------------|
|
||||||
|
| `getStatePart(name, initial?, initMode?)` | Get or create a state part |
|
||||||
|
| `batch(fn)` | Batch updates, defer notifications |
|
||||||
|
| `computed(sources, fn)` | Create computed observable |
|
||||||
|
| `isBatching` | Whether a batch is active |
|
||||||
|
|
||||||
|
### `StatePart<TName, TPayload>`
|
||||||
|
|
||||||
|
| Method | Description |
|
||||||
|
|--------|-------------|
|
||||||
|
| `getState()` | Get current state (or undefined) |
|
||||||
|
| `setState(newState)` | Set state (runs middleware, validates, persists, notifies) |
|
||||||
|
| `select(selectorFn?, options?)` | Subscribe to state changes |
|
||||||
|
| `createAction(actionDef)` | Create a named action |
|
||||||
|
| `dispatchAction(action, payload)` | Dispatch an action |
|
||||||
|
| `addMiddleware(fn)` | Add middleware, returns removal function |
|
||||||
|
| `waitUntilPresent(selectorFn?, options?)` | Wait for state condition |
|
||||||
|
| `notifyChange()` | Manually trigger notification |
|
||||||
|
| `notifyChangeCumulative()` | Debounced notification |
|
||||||
|
| `stateSetup(fn)` | Async state initialization |
|
||||||
|
|
||||||
|
### `StateAction<TState, TPayload>`
|
||||||
|
|
||||||
|
| Method | Description |
|
||||||
|
|--------|-------------|
|
||||||
|
| `trigger(payload)` | Dispatch the action |
|
||||||
|
|
||||||
|
### Standalone Functions
|
||||||
|
|
||||||
|
| Function | Description |
|
||||||
|
|----------|-------------|
|
||||||
|
| `computed(sources, fn)` | Create computed observable from state parts |
|
||||||
|
| `attachContextProvider(element, options)` | Bridge state to Context Protocol |
|
||||||
|
|
||||||
|
## License and Legal Information
|
||||||
|
|
||||||
|
This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [license](./license) file.
|
||||||
|
|
||||||
|
**Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.
|
||||||
|
|
||||||
|
### Trademarks
|
||||||
|
|
||||||
|
This project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH or third parties, and are not included within the scope of the MIT license granted herein.
|
||||||
|
|
||||||
|
Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines or the guidelines of the respective third-party owners, and any usage must be approved in writing. Third-party trademarks used herein are the property of their respective owners and used only in a descriptive manner, e.g. for an implementation of an API or similar.
|
||||||
|
|
||||||
|
### Company Information
|
||||||
|
|
||||||
|
Task Venture Capital GmbH
|
||||||
|
Registered at District Court Bremen HRB 35230 HB, Germany
|
||||||
|
|
||||||
|
For any legal inquiries or further information, please contact us via email at hello@task.vc.
|
||||||
|
|
||||||
|
By using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.
|
||||||
|
|||||||
632
test/test.initialization.ts
Normal file
632
test/test.initialization.ts
Normal file
@@ -0,0 +1,632 @@
|
|||||||
|
import { expect, tap } from '@push.rocks/tapbundle';
|
||||||
|
import * as smartstate from '../ts/index.js';
|
||||||
|
|
||||||
|
type TTestStateParts = 'initTest' | 'persistTest' | 'forceTest';
|
||||||
|
|
||||||
|
interface ITestState {
|
||||||
|
value: number;
|
||||||
|
nested: {
|
||||||
|
data: string;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================
|
||||||
|
// Init mode tests
|
||||||
|
// ============================
|
||||||
|
|
||||||
|
tap.test('should handle soft init mode (default)', async () => {
|
||||||
|
const state = new smartstate.Smartstate<TTestStateParts>();
|
||||||
|
|
||||||
|
const statePart1 = await state.getStatePart<ITestState>('initTest', {
|
||||||
|
value: 1,
|
||||||
|
nested: { data: 'initial' }
|
||||||
|
});
|
||||||
|
expect(statePart1.getState()).toEqual({
|
||||||
|
value: 1,
|
||||||
|
nested: { data: 'initial' }
|
||||||
|
});
|
||||||
|
|
||||||
|
const statePart2 = await state.getStatePart<ITestState>('initTest');
|
||||||
|
expect(statePart1 === statePart2).toBeTrue();
|
||||||
|
});
|
||||||
|
|
||||||
|
tap.test('should handle mandatory init mode', async () => {
|
||||||
|
const state = new smartstate.Smartstate<TTestStateParts>();
|
||||||
|
|
||||||
|
const statePart1 = await state.getStatePart<ITestState>('initTest', {
|
||||||
|
value: 1,
|
||||||
|
nested: { data: 'initial' }
|
||||||
|
}, 'mandatory');
|
||||||
|
expect(statePart1).toBeInstanceOf(smartstate.StatePart);
|
||||||
|
|
||||||
|
let error: Error | null = null;
|
||||||
|
try {
|
||||||
|
await state.getStatePart<ITestState>('initTest', {
|
||||||
|
value: 2,
|
||||||
|
nested: { data: 'second' }
|
||||||
|
}, 'mandatory');
|
||||||
|
} catch (e) {
|
||||||
|
error = e as Error;
|
||||||
|
}
|
||||||
|
expect(error).not.toBeNull();
|
||||||
|
expect(error?.message).toMatch(/already exists.*mandatory/);
|
||||||
|
});
|
||||||
|
|
||||||
|
tap.test('should handle force init mode', async () => {
|
||||||
|
const state = new smartstate.Smartstate<TTestStateParts>();
|
||||||
|
|
||||||
|
const statePart1 = await state.getStatePart<ITestState>('forceTest', {
|
||||||
|
value: 1,
|
||||||
|
nested: { data: 'initial' }
|
||||||
|
});
|
||||||
|
expect(statePart1.getState()?.value).toEqual(1);
|
||||||
|
|
||||||
|
const statePart2 = await state.getStatePart<ITestState>('forceTest', {
|
||||||
|
value: 2,
|
||||||
|
nested: { data: 'forced' }
|
||||||
|
}, 'force');
|
||||||
|
expect(statePart2.getState()?.value).toEqual(2);
|
||||||
|
expect(statePart1 === statePart2).toBeFalse();
|
||||||
|
});
|
||||||
|
|
||||||
|
tap.test('should handle missing initial state error', async () => {
|
||||||
|
const state = new smartstate.Smartstate<TTestStateParts>();
|
||||||
|
|
||||||
|
let error: Error | null = null;
|
||||||
|
try {
|
||||||
|
await state.getStatePart<ITestState>('initTest');
|
||||||
|
} catch (e) {
|
||||||
|
error = e as Error;
|
||||||
|
}
|
||||||
|
expect(error).not.toBeNull();
|
||||||
|
expect(error?.message).toMatch(/does not exist.*no initial state/);
|
||||||
|
});
|
||||||
|
|
||||||
|
tap.test('should handle state validation', async () => {
|
||||||
|
const state = new smartstate.Smartstate<TTestStateParts>();
|
||||||
|
|
||||||
|
const statePart = await state.getStatePart<ITestState>('initTest', {
|
||||||
|
value: 1,
|
||||||
|
nested: { data: 'initial' }
|
||||||
|
});
|
||||||
|
|
||||||
|
let error: Error | null = null;
|
||||||
|
try {
|
||||||
|
await statePart.setState(null as any);
|
||||||
|
} catch (e) {
|
||||||
|
error = e as Error;
|
||||||
|
}
|
||||||
|
expect(error).not.toBeNull();
|
||||||
|
expect(error?.message).toMatch(/Invalid state structure/);
|
||||||
|
});
|
||||||
|
|
||||||
|
tap.test('should handle undefined state in select', async () => {
|
||||||
|
const state = new smartstate.Smartstate<TTestStateParts>();
|
||||||
|
const statePart = new smartstate.StatePart<TTestStateParts, ITestState>('initTest');
|
||||||
|
|
||||||
|
const values: (ITestState | undefined)[] = [];
|
||||||
|
statePart.select().subscribe(val => values.push(val));
|
||||||
|
|
||||||
|
expect(values).toHaveLength(0);
|
||||||
|
|
||||||
|
await statePart.setState({
|
||||||
|
value: 1,
|
||||||
|
nested: { data: 'test' }
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(values).toHaveLength(1);
|
||||||
|
expect(values[0]).toEqual({
|
||||||
|
value: 1,
|
||||||
|
nested: { data: 'test' }
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
tap.test('should not notify on duplicate state', async () => {
|
||||||
|
const state = new smartstate.Smartstate<TTestStateParts>();
|
||||||
|
const statePart = await state.getStatePart<ITestState>('initTest', {
|
||||||
|
value: 1,
|
||||||
|
nested: { data: 'initial' }
|
||||||
|
});
|
||||||
|
|
||||||
|
let notificationCount = 0;
|
||||||
|
statePart.select().subscribe(() => notificationCount++);
|
||||||
|
|
||||||
|
expect(notificationCount).toEqual(1);
|
||||||
|
|
||||||
|
await statePart.setState({ value: 1, nested: { data: 'initial' } });
|
||||||
|
await statePart.setState({ value: 1, nested: { data: 'initial' } });
|
||||||
|
await statePart.setState({ value: 1, nested: { data: 'initial' } });
|
||||||
|
|
||||||
|
expect(notificationCount).toEqual(1);
|
||||||
|
|
||||||
|
await statePart.setState({ value: 2, nested: { data: 'changed' } });
|
||||||
|
expect(notificationCount).toEqual(2);
|
||||||
|
});
|
||||||
|
|
||||||
|
// ============================
|
||||||
|
// AbortSignal tests
|
||||||
|
// ============================
|
||||||
|
|
||||||
|
tap.test('select should complete when AbortSignal fires', async () => {
|
||||||
|
const state = new smartstate.Smartstate<TTestStateParts>();
|
||||||
|
const statePart = await state.getStatePart<ITestState>('initTest', {
|
||||||
|
value: 1,
|
||||||
|
nested: { data: 'initial' }
|
||||||
|
});
|
||||||
|
|
||||||
|
const controller = new AbortController();
|
||||||
|
const values: any[] = [];
|
||||||
|
let completed = false;
|
||||||
|
|
||||||
|
statePart.select(undefined, { signal: controller.signal }).subscribe({
|
||||||
|
next: (v) => values.push(v),
|
||||||
|
complete: () => { completed = true; },
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(values.length).toBeGreaterThanOrEqual(1);
|
||||||
|
|
||||||
|
controller.abort();
|
||||||
|
// Give microtask time
|
||||||
|
await new Promise<void>((r) => setTimeout(r, 10));
|
||||||
|
|
||||||
|
expect(completed).toBeTrue();
|
||||||
|
});
|
||||||
|
|
||||||
|
tap.test('select with pre-aborted signal should complete immediately', async () => {
|
||||||
|
const state = new smartstate.Smartstate<TTestStateParts>();
|
||||||
|
const statePart = await state.getStatePart<ITestState>('initTest', {
|
||||||
|
value: 1,
|
||||||
|
nested: { data: 'initial' }
|
||||||
|
});
|
||||||
|
|
||||||
|
const controller = new AbortController();
|
||||||
|
controller.abort();
|
||||||
|
|
||||||
|
let completed = false;
|
||||||
|
statePart.select(undefined, { signal: controller.signal }).subscribe({
|
||||||
|
complete: () => { completed = true; },
|
||||||
|
});
|
||||||
|
|
||||||
|
await new Promise<void>((r) => setTimeout(r, 10));
|
||||||
|
expect(completed).toBeTrue();
|
||||||
|
});
|
||||||
|
|
||||||
|
tap.test('waitUntilPresent should reject when AbortSignal fires', async () => {
|
||||||
|
const state = new smartstate.Smartstate<TTestStateParts>();
|
||||||
|
const statePart = await state.getStatePart<ITestState>('initTest', {
|
||||||
|
value: 0,
|
||||||
|
nested: { data: '' }
|
||||||
|
}, 'force');
|
||||||
|
|
||||||
|
const controller = new AbortController();
|
||||||
|
|
||||||
|
const promise = statePart.waitUntilPresent(
|
||||||
|
(s) => s.value > 100 ? s : undefined as any,
|
||||||
|
{ signal: controller.signal }
|
||||||
|
);
|
||||||
|
|
||||||
|
// Abort before the condition can be met
|
||||||
|
setTimeout(() => controller.abort(), 20);
|
||||||
|
|
||||||
|
let error: Error | null = null;
|
||||||
|
try {
|
||||||
|
await promise;
|
||||||
|
} catch (e) {
|
||||||
|
error = e as Error;
|
||||||
|
}
|
||||||
|
expect(error).not.toBeNull();
|
||||||
|
expect(error?.message).toEqual('Aborted');
|
||||||
|
});
|
||||||
|
|
||||||
|
tap.test('waitUntilPresent should still work with numeric timeout (backward compat)', async () => {
|
||||||
|
const state = new smartstate.Smartstate<TTestStateParts>();
|
||||||
|
const statePart = await state.getStatePart<ITestState>('initTest', {
|
||||||
|
value: 42,
|
||||||
|
nested: { data: 'present' }
|
||||||
|
}, 'force');
|
||||||
|
|
||||||
|
const result = await statePart.waitUntilPresent(undefined, 5000);
|
||||||
|
expect(result.value).toEqual(42);
|
||||||
|
});
|
||||||
|
|
||||||
|
// ============================
|
||||||
|
// Middleware tests
|
||||||
|
// ============================
|
||||||
|
|
||||||
|
tap.test('middleware should transform state', async () => {
|
||||||
|
const state = new smartstate.Smartstate<TTestStateParts>();
|
||||||
|
const statePart = await state.getStatePart<ITestState>('initTest', {
|
||||||
|
value: 1,
|
||||||
|
nested: { data: 'initial' }
|
||||||
|
}, 'force');
|
||||||
|
|
||||||
|
statePart.addMiddleware((newState, oldState) => {
|
||||||
|
return { ...newState, nested: { data: newState.nested.data.toUpperCase() } };
|
||||||
|
});
|
||||||
|
|
||||||
|
await statePart.setState({ value: 2, nested: { data: 'hello' } });
|
||||||
|
expect(statePart.getState().nested.data).toEqual('HELLO');
|
||||||
|
});
|
||||||
|
|
||||||
|
tap.test('middleware should reject state changes on throw', async () => {
|
||||||
|
const state = new smartstate.Smartstate<TTestStateParts>();
|
||||||
|
const statePart = await state.getStatePart<ITestState>('initTest', {
|
||||||
|
value: 1,
|
||||||
|
nested: { data: 'initial' }
|
||||||
|
}, 'force');
|
||||||
|
|
||||||
|
statePart.addMiddleware((newState) => {
|
||||||
|
if (newState.value < 0) {
|
||||||
|
throw new Error('Value must be non-negative');
|
||||||
|
}
|
||||||
|
return newState;
|
||||||
|
});
|
||||||
|
|
||||||
|
let error: Error | null = null;
|
||||||
|
try {
|
||||||
|
await statePart.setState({ value: -1, nested: { data: 'bad' } });
|
||||||
|
} catch (e) {
|
||||||
|
error = e as Error;
|
||||||
|
}
|
||||||
|
|
||||||
|
expect(error).not.toBeNull();
|
||||||
|
expect(error?.message).toEqual('Value must be non-negative');
|
||||||
|
// State should be unchanged
|
||||||
|
expect(statePart.getState().value).toEqual(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
tap.test('multiple middlewares should run in order', async () => {
|
||||||
|
const state = new smartstate.Smartstate<TTestStateParts>();
|
||||||
|
const statePart = await state.getStatePart<ITestState>('initTest', {
|
||||||
|
value: 1,
|
||||||
|
nested: { data: 'initial' }
|
||||||
|
}, 'force');
|
||||||
|
|
||||||
|
const order: number[] = [];
|
||||||
|
|
||||||
|
statePart.addMiddleware((newState) => {
|
||||||
|
order.push(1);
|
||||||
|
return { ...newState, value: newState.value + 10 };
|
||||||
|
});
|
||||||
|
|
||||||
|
statePart.addMiddleware((newState) => {
|
||||||
|
order.push(2);
|
||||||
|
return { ...newState, value: newState.value * 2 };
|
||||||
|
});
|
||||||
|
|
||||||
|
await statePart.setState({ value: 5, nested: { data: 'test' } });
|
||||||
|
expect(order).toEqual([1, 2]);
|
||||||
|
// (5 + 10) * 2 = 30
|
||||||
|
expect(statePart.getState().value).toEqual(30);
|
||||||
|
});
|
||||||
|
|
||||||
|
tap.test('middleware removal should work', async () => {
|
||||||
|
const state = new smartstate.Smartstate<TTestStateParts>();
|
||||||
|
const statePart = await state.getStatePart<ITestState>('initTest', {
|
||||||
|
value: 1,
|
||||||
|
nested: { data: 'initial' }
|
||||||
|
}, 'force');
|
||||||
|
|
||||||
|
const remove = statePart.addMiddleware((newState) => {
|
||||||
|
return { ...newState, value: newState.value * 100 };
|
||||||
|
});
|
||||||
|
|
||||||
|
await statePart.setState({ value: 2, nested: { data: 'test' } });
|
||||||
|
expect(statePart.getState().value).toEqual(200);
|
||||||
|
|
||||||
|
remove();
|
||||||
|
|
||||||
|
await statePart.setState({ value: 3, nested: { data: 'test' } });
|
||||||
|
expect(statePart.getState().value).toEqual(3);
|
||||||
|
});
|
||||||
|
|
||||||
|
// ============================
|
||||||
|
// Selector memoization tests
|
||||||
|
// ============================
|
||||||
|
|
||||||
|
tap.test('select with same selector fn should return cached observable', async () => {
|
||||||
|
const state = new smartstate.Smartstate<TTestStateParts>();
|
||||||
|
const statePart = await state.getStatePart<ITestState>('initTest', {
|
||||||
|
value: 1,
|
||||||
|
nested: { data: 'initial' }
|
||||||
|
}, 'force');
|
||||||
|
|
||||||
|
const selector = (s: ITestState) => s.value;
|
||||||
|
const obs1 = statePart.select(selector);
|
||||||
|
const obs2 = statePart.select(selector);
|
||||||
|
expect(obs1).toEqual(obs2);
|
||||||
|
});
|
||||||
|
|
||||||
|
tap.test('select with no args should return cached observable', async () => {
|
||||||
|
const state = new smartstate.Smartstate<TTestStateParts>();
|
||||||
|
const statePart = await state.getStatePart<ITestState>('initTest', {
|
||||||
|
value: 1,
|
||||||
|
nested: { data: 'initial' }
|
||||||
|
}, 'force');
|
||||||
|
|
||||||
|
const obs1 = statePart.select();
|
||||||
|
const obs2 = statePart.select();
|
||||||
|
expect(obs1).toEqual(obs2);
|
||||||
|
});
|
||||||
|
|
||||||
|
tap.test('select with different selectors should return different observables', async () => {
|
||||||
|
const state = new smartstate.Smartstate<TTestStateParts>();
|
||||||
|
const statePart = await state.getStatePart<ITestState>('initTest', {
|
||||||
|
value: 1,
|
||||||
|
nested: { data: 'initial' }
|
||||||
|
}, 'force');
|
||||||
|
|
||||||
|
const obs1 = statePart.select((s) => s.value);
|
||||||
|
const obs2 = statePart.select((s) => s.nested);
|
||||||
|
expect(obs1).not.toEqual(obs2);
|
||||||
|
});
|
||||||
|
|
||||||
|
// ============================
|
||||||
|
// Batch update tests
|
||||||
|
// ============================
|
||||||
|
|
||||||
|
tap.test('batch should defer notifications until complete', async () => {
|
||||||
|
type TBatchParts = 'partA' | 'partB';
|
||||||
|
const state = new smartstate.Smartstate<TBatchParts>();
|
||||||
|
const partA = await state.getStatePart<ITestState>('partA', {
|
||||||
|
value: 1,
|
||||||
|
nested: { data: 'a' }
|
||||||
|
});
|
||||||
|
const partB = await state.getStatePart<ITestState>('partB', {
|
||||||
|
value: 2,
|
||||||
|
nested: { data: 'b' }
|
||||||
|
});
|
||||||
|
|
||||||
|
const notificationsA: number[] = [];
|
||||||
|
const notificationsB: number[] = [];
|
||||||
|
|
||||||
|
partA.select((s) => s.value).subscribe((v) => notificationsA.push(v));
|
||||||
|
partB.select((s) => s.value).subscribe((v) => notificationsB.push(v));
|
||||||
|
|
||||||
|
// Reset after initial notifications
|
||||||
|
notificationsA.length = 0;
|
||||||
|
notificationsB.length = 0;
|
||||||
|
|
||||||
|
await state.batch(async () => {
|
||||||
|
await partA.setState({ value: 10, nested: { data: 'aa' } });
|
||||||
|
await partB.setState({ value: 20, nested: { data: 'bb' } });
|
||||||
|
|
||||||
|
// During batch, no notifications yet
|
||||||
|
expect(notificationsA).toHaveLength(0);
|
||||||
|
expect(notificationsB).toHaveLength(0);
|
||||||
|
});
|
||||||
|
|
||||||
|
// After batch, both should have notified
|
||||||
|
expect(notificationsA).toContain(10);
|
||||||
|
expect(notificationsB).toContain(20);
|
||||||
|
});
|
||||||
|
|
||||||
|
tap.test('nested batches should only flush at outermost level', async () => {
|
||||||
|
type TBatchParts = 'nested';
|
||||||
|
const state = new smartstate.Smartstate<TBatchParts>();
|
||||||
|
const part = await state.getStatePart<ITestState>('nested', {
|
||||||
|
value: 0,
|
||||||
|
nested: { data: 'start' }
|
||||||
|
});
|
||||||
|
|
||||||
|
const values: number[] = [];
|
||||||
|
part.select((s) => s.value).subscribe((v) => values.push(v));
|
||||||
|
values.length = 0;
|
||||||
|
|
||||||
|
await state.batch(async () => {
|
||||||
|
await part.setState({ value: 1, nested: { data: 'a' } });
|
||||||
|
|
||||||
|
await state.batch(async () => {
|
||||||
|
await part.setState({ value: 2, nested: { data: 'b' } });
|
||||||
|
// Still inside outer batch
|
||||||
|
expect(values).toHaveLength(0);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Inner batch ended but outer batch still active
|
||||||
|
expect(values).toHaveLength(0);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Now outer batch is done — should see final notification
|
||||||
|
expect(values.length).toBeGreaterThanOrEqual(1);
|
||||||
|
expect(values[values.length - 1]).toEqual(2);
|
||||||
|
});
|
||||||
|
|
||||||
|
// ============================
|
||||||
|
// Computed state tests
|
||||||
|
// ============================
|
||||||
|
|
||||||
|
tap.test('computed should derive from multiple state parts', async () => {
|
||||||
|
type TComputedParts = 'first' | 'second';
|
||||||
|
const state = new smartstate.Smartstate<TComputedParts>();
|
||||||
|
const first = await state.getStatePart<{ count: number }>('first', { count: 5 });
|
||||||
|
const second = await state.getStatePart<{ count: number }>('second', { count: 10 });
|
||||||
|
|
||||||
|
const derived$ = state.computed(
|
||||||
|
[first, second],
|
||||||
|
(a, b) => a.count + b.count,
|
||||||
|
);
|
||||||
|
|
||||||
|
const values: number[] = [];
|
||||||
|
derived$.subscribe((v) => values.push(v));
|
||||||
|
|
||||||
|
expect(values).toContain(15);
|
||||||
|
});
|
||||||
|
|
||||||
|
tap.test('computed should update when a source changes', async () => {
|
||||||
|
type TComputedParts = 'x' | 'y';
|
||||||
|
const state = new smartstate.Smartstate<TComputedParts>();
|
||||||
|
const x = await state.getStatePart<{ n: number }>('x', { n: 1 });
|
||||||
|
const y = await state.getStatePart<{ n: number }>('y', { n: 2 });
|
||||||
|
|
||||||
|
const derived$ = state.computed(
|
||||||
|
[x, y],
|
||||||
|
(xState, yState) => xState.n * yState.n,
|
||||||
|
);
|
||||||
|
|
||||||
|
const values: number[] = [];
|
||||||
|
derived$.subscribe((v) => values.push(v));
|
||||||
|
|
||||||
|
// Initial: 1 * 2 = 2
|
||||||
|
expect(values[0]).toEqual(2);
|
||||||
|
|
||||||
|
await x.setState({ n: 5 });
|
||||||
|
|
||||||
|
// After update: 5 * 2 = 10
|
||||||
|
expect(values[values.length - 1]).toEqual(10);
|
||||||
|
});
|
||||||
|
|
||||||
|
tap.test('standalone computed function should work', async () => {
|
||||||
|
type TParts = 'a' | 'b';
|
||||||
|
const state = new smartstate.Smartstate<TParts>();
|
||||||
|
const a = await state.getStatePart<{ val: string }>('a', { val: 'hello' });
|
||||||
|
const b = await state.getStatePart<{ val: string }>('b', { val: 'world' });
|
||||||
|
|
||||||
|
const derived$ = smartstate.computed(
|
||||||
|
[a, b],
|
||||||
|
(aState, bState) => `${aState.val} ${bState.val}`,
|
||||||
|
);
|
||||||
|
|
||||||
|
const values: string[] = [];
|
||||||
|
derived$.subscribe((v) => values.push(v));
|
||||||
|
|
||||||
|
expect(values[0]).toEqual('hello world');
|
||||||
|
|
||||||
|
await a.setState({ val: 'hi' });
|
||||||
|
expect(values[values.length - 1]).toEqual('hi world');
|
||||||
|
});
|
||||||
|
|
||||||
|
// ============================
|
||||||
|
// Context Protocol tests
|
||||||
|
// ============================
|
||||||
|
|
||||||
|
tap.test('attachContextProvider should respond to context-request events', async () => {
|
||||||
|
// EventTarget and CustomEvent are available in Node 18+
|
||||||
|
if (typeof EventTarget === 'undefined') {
|
||||||
|
console.log('Skipping context test — EventTarget not available');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
type TParts = 'ctx';
|
||||||
|
const state = new smartstate.Smartstate<TParts>();
|
||||||
|
const statePart = await state.getStatePart<{ theme: string }>('ctx', { theme: 'dark' });
|
||||||
|
|
||||||
|
const myContext = Symbol('test-context');
|
||||||
|
|
||||||
|
// Use an EventTarget as a mock element
|
||||||
|
const element = new EventTarget() as any as HTMLElement;
|
||||||
|
|
||||||
|
const cleanup = smartstate.attachContextProvider(element, {
|
||||||
|
context: myContext,
|
||||||
|
statePart,
|
||||||
|
});
|
||||||
|
|
||||||
|
let receivedValue: any = null;
|
||||||
|
|
||||||
|
// Dispatch a context-request event
|
||||||
|
const event = new CustomEvent('context-request', {
|
||||||
|
detail: {
|
||||||
|
context: myContext,
|
||||||
|
callback: (value: any) => { receivedValue = value; },
|
||||||
|
subscribe: false,
|
||||||
|
},
|
||||||
|
bubbles: true,
|
||||||
|
composed: true,
|
||||||
|
});
|
||||||
|
(element as any).dispatchEvent(event);
|
||||||
|
|
||||||
|
expect(receivedValue).toEqual({ theme: 'dark' });
|
||||||
|
|
||||||
|
cleanup();
|
||||||
|
});
|
||||||
|
|
||||||
|
tap.test('attachContextProvider should support subscriptions', async () => {
|
||||||
|
if (typeof EventTarget === 'undefined') {
|
||||||
|
console.log('Skipping context subscription test — EventTarget not available');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
type TParts = 'ctxSub';
|
||||||
|
const state = new smartstate.Smartstate<TParts>();
|
||||||
|
const statePart = await state.getStatePart<{ count: number }>('ctxSub', { count: 0 });
|
||||||
|
|
||||||
|
const myContext = Symbol('sub-context');
|
||||||
|
const element = new EventTarget() as any as HTMLElement;
|
||||||
|
|
||||||
|
const cleanup = smartstate.attachContextProvider(element, {
|
||||||
|
context: myContext,
|
||||||
|
statePart,
|
||||||
|
});
|
||||||
|
|
||||||
|
const receivedValues: any[] = [];
|
||||||
|
let unsubFn: (() => void) | undefined;
|
||||||
|
|
||||||
|
const event = new CustomEvent('context-request', {
|
||||||
|
detail: {
|
||||||
|
context: myContext,
|
||||||
|
callback: (value: any, unsub?: () => void) => {
|
||||||
|
receivedValues.push(value);
|
||||||
|
if (unsub) unsubFn = unsub;
|
||||||
|
},
|
||||||
|
subscribe: true,
|
||||||
|
},
|
||||||
|
bubbles: true,
|
||||||
|
composed: true,
|
||||||
|
});
|
||||||
|
(element as any).dispatchEvent(event);
|
||||||
|
|
||||||
|
expect(receivedValues).toHaveLength(1);
|
||||||
|
expect(receivedValues[0]).toEqual({ count: 0 });
|
||||||
|
|
||||||
|
// Update state — should trigger subscription callback
|
||||||
|
await statePart.setState({ count: 42 });
|
||||||
|
|
||||||
|
// Give a tick for the subscription to fire
|
||||||
|
await new Promise<void>((r) => setTimeout(r, 10));
|
||||||
|
|
||||||
|
expect(receivedValues.length).toBeGreaterThanOrEqual(2);
|
||||||
|
expect(receivedValues[receivedValues.length - 1]).toEqual({ count: 42 });
|
||||||
|
|
||||||
|
// Unsubscribe
|
||||||
|
expect(unsubFn).toBeDefined();
|
||||||
|
unsubFn!();
|
||||||
|
|
||||||
|
cleanup();
|
||||||
|
});
|
||||||
|
|
||||||
|
tap.test('attachContextProvider should ignore non-matching contexts', async () => {
|
||||||
|
if (typeof EventTarget === 'undefined') {
|
||||||
|
console.log('Skipping context mismatch test — EventTarget not available');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
type TParts = 'ctxMismatch';
|
||||||
|
const state = new smartstate.Smartstate<TParts>();
|
||||||
|
const statePart = await state.getStatePart<{ v: number }>('ctxMismatch', { v: 1 });
|
||||||
|
|
||||||
|
const myContext = Symbol('my-context');
|
||||||
|
const otherContext = Symbol('other-context');
|
||||||
|
const element = new EventTarget() as any as HTMLElement;
|
||||||
|
|
||||||
|
const cleanup = smartstate.attachContextProvider(element, {
|
||||||
|
context: myContext,
|
||||||
|
statePart,
|
||||||
|
});
|
||||||
|
|
||||||
|
let called = false;
|
||||||
|
const event = new CustomEvent('context-request', {
|
||||||
|
detail: {
|
||||||
|
context: otherContext,
|
||||||
|
callback: () => { called = true; },
|
||||||
|
subscribe: false,
|
||||||
|
},
|
||||||
|
bubbles: true,
|
||||||
|
composed: true,
|
||||||
|
});
|
||||||
|
(element as any).dispatchEvent(event);
|
||||||
|
|
||||||
|
expect(called).toBeFalse();
|
||||||
|
|
||||||
|
cleanup();
|
||||||
|
});
|
||||||
|
|
||||||
|
export default tap.start();
|
||||||
@@ -55,4 +55,4 @@ tap.test('should dispatch a state action', async (tools) => {
|
|||||||
await done.promise;
|
await done.promise;
|
||||||
});
|
});
|
||||||
|
|
||||||
tap.start();
|
export default tap.start();
|
||||||
@@ -1,8 +1,8 @@
|
|||||||
/**
|
/**
|
||||||
* autocreated commitinfo by @pushrocks/commitinfo
|
* autocreated commitinfo by @push.rocks/commitinfo
|
||||||
*/
|
*/
|
||||||
export const commitinfo = {
|
export const commitinfo = {
|
||||||
name: '@push.rocks/smartstate',
|
name: '@push.rocks/smartstate',
|
||||||
version: '2.0.16',
|
version: '2.1.0',
|
||||||
description: 'a package that handles state in a good way'
|
description: 'A TypeScript-first reactive state management library with middleware, computed state, batching, persistence, and Web Component Context Protocol support.'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,3 +1,5 @@
|
|||||||
export * from './smartstate.classes.smartstate.js';
|
export * from './smartstate.classes.smartstate.js';
|
||||||
export * from './smartstate.classes.statepart.js';
|
export * from './smartstate.classes.statepart.js';
|
||||||
export * from './smartstate.classes.stateaction.js';
|
export * from './smartstate.classes.stateaction.js';
|
||||||
|
export * from './smartstate.classes.computed.js';
|
||||||
|
export * from './smartstate.contextprovider.js';
|
||||||
|
|||||||
16
ts/smartstate.classes.computed.ts
Normal file
16
ts/smartstate.classes.computed.ts
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
import * as plugins from './smartstate.plugins.js';
|
||||||
|
import { combineLatest, map } from 'rxjs';
|
||||||
|
import type { StatePart } from './smartstate.classes.statepart.js';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* creates a computed observable derived from multiple state parts.
|
||||||
|
* the observable is lazy — it only subscribes to sources when subscribed to.
|
||||||
|
*/
|
||||||
|
export function computed<TResult>(
|
||||||
|
sources: StatePart<any, any>[],
|
||||||
|
computeFn: (...states: any[]) => TResult,
|
||||||
|
): plugins.smartrx.rxjs.Observable<TResult> {
|
||||||
|
return combineLatest(sources.map((sp) => sp.select())).pipe(
|
||||||
|
map((states) => computeFn(...states)),
|
||||||
|
) as plugins.smartrx.rxjs.Observable<TResult>;
|
||||||
|
}
|
||||||
@@ -1,71 +1,145 @@
|
|||||||
import * as plugins from './smartstate.plugins.js';
|
import * as plugins from './smartstate.plugins.js';
|
||||||
import { StatePart } from './smartstate.classes.statepart.js';
|
import { StatePart } from './smartstate.classes.statepart.js';
|
||||||
|
import { computed } from './smartstate.classes.computed.js';
|
||||||
|
|
||||||
export type TInitMode = 'soft' | 'mandatory' | 'force' | 'persistent';
|
export type TInitMode = 'soft' | 'mandatory' | 'force' | 'persistent';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Smartstate takes care of providing state
|
* Smartstate takes care of providing state
|
||||||
*/
|
*/
|
||||||
export class Smartstate<StatePartNameType> {
|
export class Smartstate<StatePartNameType extends string> {
|
||||||
public statePartMap: { [key: string]: StatePart<StatePartNameType, any> } = {};
|
public statePartMap: { [key in StatePartNameType]?: StatePart<StatePartNameType, any> } = {};
|
||||||
|
|
||||||
|
private pendingStatePartCreation: Map<string, Promise<StatePart<StatePartNameType, any>>> = new Map();
|
||||||
|
|
||||||
|
// Batch support
|
||||||
|
private batchDepth = 0;
|
||||||
|
private pendingNotifications = new Set<StatePart<any, any>>();
|
||||||
|
|
||||||
constructor() {}
|
constructor() {}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Allows getting and initializing a new statepart
|
* whether state changes are currently being batched
|
||||||
* initMode === 'soft' it will allow existing stateparts
|
|
||||||
* initMode === 'mandatory' will fail if there is an exiting statepart
|
|
||||||
* initMode === 'force' will overwrite any existing statepart
|
|
||||||
* @param statePartNameArg
|
|
||||||
* @param initialArg
|
|
||||||
* @param initMode
|
|
||||||
*/
|
*/
|
||||||
public async getStatePart<PayloadType>(
|
public get isBatching(): boolean {
|
||||||
statePartNameArg: string & StatePartNameType,
|
return this.batchDepth > 0;
|
||||||
initialArg?: PayloadType,
|
}
|
||||||
initMode?: TInitMode
|
|
||||||
): Promise<StatePart<StatePartNameType, PayloadType>> {
|
/**
|
||||||
if (this.statePartMap[statePartNameArg as any]) {
|
* registers a state part for deferred notification during a batch
|
||||||
if (initialArg && (!initMode || initMode !== 'soft')) {
|
*/
|
||||||
throw new Error(
|
public registerPendingNotification(statePart: StatePart<any, any>): void {
|
||||||
`${statePartNameArg} already exists, yet you try to set an initial state again`
|
this.pendingNotifications.add(statePart);
|
||||||
);
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* batches multiple state updates so subscribers are only notified once all updates complete
|
||||||
|
*/
|
||||||
|
public async batch(updateFn: () => Promise<void> | void): Promise<void> {
|
||||||
|
this.batchDepth++;
|
||||||
|
try {
|
||||||
|
await updateFn();
|
||||||
|
} finally {
|
||||||
|
this.batchDepth--;
|
||||||
|
if (this.batchDepth === 0) {
|
||||||
|
const pending = [...this.pendingNotifications];
|
||||||
|
this.pendingNotifications.clear();
|
||||||
|
for (const sp of pending) {
|
||||||
|
await sp.notifyChange();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
return this.statePartMap[statePartNameArg] as StatePart<StatePartNameType, PayloadType>;
|
|
||||||
} else {
|
|
||||||
if (!initialArg) {
|
|
||||||
throw new Error(
|
|
||||||
`${statePartNameArg} does not yet exist, yet you don't provide an initial state`
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return this.createStatePart<PayloadType>(statePartNameArg, initialArg, initMode);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* creates a statepart
|
* creates a computed observable derived from multiple state parts
|
||||||
* @param statePartName
|
*/
|
||||||
* @param initialPayloadArg
|
public computed<TResult>(
|
||||||
|
sources: StatePart<StatePartNameType, any>[],
|
||||||
|
computeFn: (...states: any[]) => TResult,
|
||||||
|
): plugins.smartrx.rxjs.Observable<TResult> {
|
||||||
|
return computed(sources, computeFn);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Allows getting and initializing a new statepart
|
||||||
|
*/
|
||||||
|
public async getStatePart<PayloadType>(
|
||||||
|
statePartNameArg: StatePartNameType,
|
||||||
|
initialArg?: PayloadType,
|
||||||
|
initMode: TInitMode = 'soft'
|
||||||
|
): Promise<StatePart<StatePartNameType, PayloadType>> {
|
||||||
|
// Return pending creation if one exists to prevent duplicate state parts
|
||||||
|
const pending = this.pendingStatePartCreation.get(statePartNameArg);
|
||||||
|
if (pending) {
|
||||||
|
return pending as Promise<StatePart<StatePartNameType, PayloadType>>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const existingStatePart = this.statePartMap[statePartNameArg];
|
||||||
|
|
||||||
|
if (existingStatePart) {
|
||||||
|
switch (initMode) {
|
||||||
|
case 'mandatory':
|
||||||
|
throw new Error(
|
||||||
|
`State part '${statePartNameArg}' already exists, but initMode is 'mandatory'`
|
||||||
|
);
|
||||||
|
case 'force':
|
||||||
|
break;
|
||||||
|
case 'soft':
|
||||||
|
case 'persistent':
|
||||||
|
default:
|
||||||
|
return existingStatePart as StatePart<StatePartNameType, PayloadType>;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (!initialArg) {
|
||||||
|
throw new Error(
|
||||||
|
`State part '${statePartNameArg}' does not exist and no initial state provided`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const creationPromise = this.createStatePart<PayloadType>(statePartNameArg, initialArg, initMode);
|
||||||
|
this.pendingStatePartCreation.set(statePartNameArg, creationPromise);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await creationPromise;
|
||||||
|
return result;
|
||||||
|
} finally {
|
||||||
|
this.pendingStatePartCreation.delete(statePartNameArg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates a statepart
|
||||||
*/
|
*/
|
||||||
private async createStatePart<PayloadType>(
|
private async createStatePart<PayloadType>(
|
||||||
statePartName: StatePartNameType,
|
statePartName: StatePartNameType,
|
||||||
initialPayloadArg: PayloadType,
|
initialPayloadArg: PayloadType,
|
||||||
initMode?: TInitMode
|
initMode: TInitMode = 'soft'
|
||||||
): Promise<StatePart<StatePartNameType, PayloadType>> {
|
): Promise<StatePart<StatePartNameType, PayloadType>> {
|
||||||
const newState = new StatePart<StatePartNameType, PayloadType>(
|
const newState = new StatePart<StatePartNameType, PayloadType>(
|
||||||
statePartName,
|
statePartName,
|
||||||
initMode === 'persistent' ? {
|
initMode === 'persistent'
|
||||||
dbName: 'smartstate',
|
? {
|
||||||
storeName: statePartName as any,
|
dbName: 'smartstate',
|
||||||
} : null
|
storeName: statePartName,
|
||||||
|
}
|
||||||
|
: null
|
||||||
);
|
);
|
||||||
|
newState.smartstateRef = this;
|
||||||
await newState.init();
|
await newState.init();
|
||||||
const currentState = newState.getState();
|
const currentState = newState.getState();
|
||||||
await newState.setState({
|
|
||||||
...initialPayloadArg,
|
if (initMode === 'persistent' && currentState !== undefined) {
|
||||||
...currentState,
|
await newState.setState({
|
||||||
});
|
...initialPayloadArg,
|
||||||
this.statePartMap[statePartName as any] = newState;
|
...currentState,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
await newState.setState(initialPayloadArg);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.statePartMap[statePartName] = newState;
|
||||||
return newState;
|
return newState;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ export class StateAction<TStateType, TActionPayloadType> {
|
|||||||
public actionDef: IActionDef<TStateType, TActionPayloadType>
|
public actionDef: IActionDef<TStateType, TActionPayloadType>
|
||||||
) {}
|
) {}
|
||||||
|
|
||||||
public trigger(payload: TActionPayloadType) {
|
public trigger(payload: TActionPayloadType): Promise<TStateType> {
|
||||||
this.statePartRef.dispatchAction(this, payload);
|
return this.statePartRef.dispatchAction(this, payload);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,19 +1,54 @@
|
|||||||
import * as plugins from './smartstate.plugins.js';
|
import * as plugins from './smartstate.plugins.js';
|
||||||
|
import { Observable, shareReplay, takeUntil } from 'rxjs';
|
||||||
import { StateAction, type IActionDef } from './smartstate.classes.stateaction.js';
|
import { StateAction, type IActionDef } from './smartstate.classes.stateaction.js';
|
||||||
|
import type { Smartstate } from './smartstate.classes.smartstate.js';
|
||||||
|
|
||||||
|
export type TMiddleware<TPayload> = (
|
||||||
|
newState: TPayload,
|
||||||
|
oldState: TPayload | undefined,
|
||||||
|
) => TPayload | Promise<TPayload>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* creates an Observable that emits once when the given AbortSignal fires
|
||||||
|
*/
|
||||||
|
function fromAbortSignal(signal: AbortSignal): Observable<void> {
|
||||||
|
return new Observable<void>((subscriber) => {
|
||||||
|
if (signal.aborted) {
|
||||||
|
subscriber.next();
|
||||||
|
subscriber.complete();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const handler = () => {
|
||||||
|
subscriber.next();
|
||||||
|
subscriber.complete();
|
||||||
|
};
|
||||||
|
signal.addEventListener('abort', handler);
|
||||||
|
return () => signal.removeEventListener('abort', handler);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
export class StatePart<TStatePartName, TStatePayload> {
|
export class StatePart<TStatePartName, TStatePayload> {
|
||||||
public name: TStatePartName;
|
public name: TStatePartName;
|
||||||
public state = new plugins.smartrx.rxjs.Subject<TStatePayload>();
|
public state = new plugins.smartrx.rxjs.Subject<TStatePayload>();
|
||||||
public stateStore: TStatePayload;
|
public stateStore: TStatePayload | undefined;
|
||||||
|
public smartstateRef?: Smartstate<any>;
|
||||||
private cumulativeDeferred = plugins.smartpromise.cumulativeDefer();
|
private cumulativeDeferred = plugins.smartpromise.cumulativeDefer();
|
||||||
|
|
||||||
|
private pendingCumulativeNotification: ReturnType<typeof setTimeout> | null = null;
|
||||||
|
private pendingBatchNotification = false;
|
||||||
|
|
||||||
private webStoreOptions: plugins.webstore.IWebStoreOptions;
|
private webStoreOptions: plugins.webstore.IWebStoreOptions;
|
||||||
private webStore: plugins.webstore.WebStore<TStatePayload> | null = null; // Add WebStore instance
|
private webStore: plugins.webstore.WebStore<TStatePayload> | null = null;
|
||||||
|
|
||||||
|
private middlewares: TMiddleware<TStatePayload>[] = [];
|
||||||
|
|
||||||
|
// Selector memoization
|
||||||
|
private selectorCache = new WeakMap<Function, plugins.smartrx.rxjs.Observable<any>>();
|
||||||
|
private defaultSelectObservable: plugins.smartrx.rxjs.Observable<TStatePayload> | null = null;
|
||||||
|
|
||||||
constructor(nameArg: TStatePartName, webStoreOptionsArg?: plugins.webstore.IWebStoreOptions) {
|
constructor(nameArg: TStatePartName, webStoreOptionsArg?: plugins.webstore.IWebStoreOptions) {
|
||||||
this.name = nameArg;
|
this.name = nameArg;
|
||||||
|
|
||||||
// Initialize WebStore if webStoreOptions are provided
|
|
||||||
if (webStoreOptionsArg) {
|
if (webStoreOptionsArg) {
|
||||||
this.webStoreOptions = webStoreOptionsArg;
|
this.webStoreOptions = webStoreOptionsArg;
|
||||||
}
|
}
|
||||||
@@ -27,9 +62,9 @@ export class StatePart<TStatePartName, TStatePayload> {
|
|||||||
this.webStore = new plugins.webstore.WebStore<TStatePayload>(this.webStoreOptions);
|
this.webStore = new plugins.webstore.WebStore<TStatePayload>(this.webStoreOptions);
|
||||||
await this.webStore.init();
|
await this.webStore.init();
|
||||||
const storedState = await this.webStore.get(String(this.name));
|
const storedState = await this.webStore.get(String(this.name));
|
||||||
if (storedState) {
|
if (storedState && this.validateState(storedState)) {
|
||||||
this.stateStore = storedState;
|
this.stateStore = storedState;
|
||||||
this.notifyChange();
|
await this.notifyChange();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -37,72 +72,157 @@ export class StatePart<TStatePartName, TStatePayload> {
|
|||||||
/**
|
/**
|
||||||
* gets the state from the state store
|
* gets the state from the state store
|
||||||
*/
|
*/
|
||||||
public getState(): TStatePayload {
|
public getState(): TStatePayload | undefined {
|
||||||
return this.stateStore;
|
return this.stateStore;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* adds a middleware that intercepts setState calls.
|
||||||
|
* middleware can transform the state or throw to reject it.
|
||||||
|
* returns a removal function.
|
||||||
|
*/
|
||||||
|
public addMiddleware(middleware: TMiddleware<TStatePayload>): () => void {
|
||||||
|
this.middlewares.push(middleware);
|
||||||
|
return () => {
|
||||||
|
const idx = this.middlewares.indexOf(middleware);
|
||||||
|
if (idx !== -1) {
|
||||||
|
this.middlewares.splice(idx, 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* sets the stateStore to the new state
|
* sets the stateStore to the new state
|
||||||
* @param newStateArg
|
|
||||||
*/
|
*/
|
||||||
public async setState(newStateArg: TStatePayload) {
|
public async setState(newStateArg: TStatePayload) {
|
||||||
this.stateStore = newStateArg;
|
// Run middleware chain
|
||||||
this.notifyChange();
|
let processedState = newStateArg;
|
||||||
|
for (const mw of this.middlewares) {
|
||||||
// Save state to WebStore if initialized
|
processedState = await mw(processedState, this.stateStore);
|
||||||
if (this.webStore) {
|
|
||||||
await this.webStore.set(String(this.name), newStateArg);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Validate state structure
|
||||||
|
if (!this.validateState(processedState)) {
|
||||||
|
throw new Error(`Invalid state structure for state part '${this.name}'`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Save to WebStore first to ensure atomicity
|
||||||
|
if (this.webStore) {
|
||||||
|
await this.webStore.set(String(this.name), processedState);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update in-memory state after successful persistence
|
||||||
|
this.stateStore = processedState;
|
||||||
|
await this.notifyChange();
|
||||||
|
|
||||||
|
return this.stateStore;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Validates state structure - can be overridden for custom validation
|
||||||
|
*/
|
||||||
|
protected validateState(stateArg: any): stateArg is TStatePayload {
|
||||||
|
return stateArg !== null && stateArg !== undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* notifies of a change on the state
|
* notifies of a change on the state
|
||||||
*/
|
*/
|
||||||
public notifyChange() {
|
public async notifyChange() {
|
||||||
const createStateHash = (stateArg: any) => {
|
if (!this.stateStore) {
|
||||||
return plugins.isohash.sha256FromString(plugins.smartjson.stringify(stateArg));
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// If inside a batch, defer the notification
|
||||||
|
if (this.smartstateRef?.isBatching) {
|
||||||
|
this.pendingBatchNotification = true;
|
||||||
|
this.smartstateRef.registerPendingNotification(this);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const createStateHash = async (stateArg: any) => {
|
||||||
|
return await plugins.smarthashWeb.sha256FromString(plugins.smartjson.stableOneWayStringify(stateArg));
|
||||||
};
|
};
|
||||||
|
const currentHash = await createStateHash(this.stateStore);
|
||||||
if (
|
if (
|
||||||
this.stateStore &&
|
|
||||||
this.lastStateNotificationPayloadHash &&
|
this.lastStateNotificationPayloadHash &&
|
||||||
createStateHash(this.stateStore) === this.lastStateNotificationPayloadHash
|
currentHash === this.lastStateNotificationPayloadHash
|
||||||
) {
|
) {
|
||||||
return;
|
return;
|
||||||
} else {
|
} else {
|
||||||
this.lastStateNotificationPayloadHash = this.stateStore;
|
this.lastStateNotificationPayloadHash = currentHash;
|
||||||
}
|
}
|
||||||
this.state.next(this.stateStore);
|
this.state.next(this.stateStore);
|
||||||
}
|
}
|
||||||
private lastStateNotificationPayloadHash: any;
|
private lastStateNotificationPayloadHash: any;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* creates a cumulative notification by adding a change notification at the end of the call stack;
|
* creates a cumulative notification by adding a change notification at the end of the call stack
|
||||||
*/
|
*/
|
||||||
public notifyChangeCumulative() {
|
public notifyChangeCumulative() {
|
||||||
// TODO: check viability
|
if (this.pendingCumulativeNotification) {
|
||||||
setTimeout(() => this.state.next(this.stateStore), 0);
|
clearTimeout(this.pendingCumulativeNotification);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.pendingCumulativeNotification = setTimeout(async () => {
|
||||||
|
this.pendingCumulativeNotification = null;
|
||||||
|
if (this.stateStore) {
|
||||||
|
await this.notifyChange();
|
||||||
|
}
|
||||||
|
}, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* selects a state or a substate
|
* selects a state or a substate.
|
||||||
|
* supports an optional AbortSignal for automatic unsubscription.
|
||||||
|
* memoizes observables by selector function reference.
|
||||||
*/
|
*/
|
||||||
public select<T = TStatePayload>(
|
public select<T = TStatePayload>(
|
||||||
selectorFn?: (state: TStatePayload) => T
|
selectorFn?: (state: TStatePayload) => T,
|
||||||
|
options?: { signal?: AbortSignal }
|
||||||
): plugins.smartrx.rxjs.Observable<T> {
|
): plugins.smartrx.rxjs.Observable<T> {
|
||||||
if (!selectorFn) {
|
const hasSignal = options?.signal != null;
|
||||||
selectorFn = (state: TStatePayload) => <T>(<any>state);
|
|
||||||
|
// Check memoization cache (only for non-signal selects)
|
||||||
|
if (!hasSignal) {
|
||||||
|
if (!selectorFn) {
|
||||||
|
if (this.defaultSelectObservable) {
|
||||||
|
return this.defaultSelectObservable as unknown as plugins.smartrx.rxjs.Observable<T>;
|
||||||
|
}
|
||||||
|
} else if (this.selectorCache.has(selectorFn)) {
|
||||||
|
return this.selectorCache.get(selectorFn)!;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
const mapped = this.state.pipe(
|
|
||||||
|
const effectiveSelectorFn = selectorFn || ((state: TStatePayload) => <T>(<any>state));
|
||||||
|
|
||||||
|
let mapped = this.state.pipe(
|
||||||
plugins.smartrx.rxjs.ops.startWith(this.getState()),
|
plugins.smartrx.rxjs.ops.startWith(this.getState()),
|
||||||
|
plugins.smartrx.rxjs.ops.filter((stateArg): stateArg is TStatePayload => stateArg !== undefined),
|
||||||
plugins.smartrx.rxjs.ops.map((stateArg) => {
|
plugins.smartrx.rxjs.ops.map((stateArg) => {
|
||||||
try {
|
try {
|
||||||
return selectorFn(stateArg);
|
return effectiveSelectorFn(stateArg);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
// Nothing here
|
console.error(`Selector error in state part '${this.name}':`, e);
|
||||||
|
return undefined;
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
return mapped;
|
|
||||||
|
if (hasSignal) {
|
||||||
|
mapped = mapped.pipe(takeUntil(fromAbortSignal(options.signal)));
|
||||||
|
return mapped;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Apply shareReplay for caching and store in memo cache
|
||||||
|
const shared = mapped.pipe(shareReplay({ bufferSize: 1, refCount: true }));
|
||||||
|
if (!selectorFn) {
|
||||||
|
this.defaultSelectObservable = shared as unknown as plugins.smartrx.rxjs.Observable<TStatePayload>;
|
||||||
|
} else {
|
||||||
|
this.selectorCache.set(selectorFn, shared);
|
||||||
|
}
|
||||||
|
|
||||||
|
return shared;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -125,22 +245,74 @@ export class StatePart<TStatePartName, TStatePayload> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* waits until a certain part of the state becomes available
|
* waits until a certain part of the state becomes available.
|
||||||
* @param selectorFn
|
* supports optional timeout and AbortSignal.
|
||||||
*/
|
*/
|
||||||
public async waitUntilPresent<T = TStatePayload>(
|
public async waitUntilPresent<T = TStatePayload>(
|
||||||
selectorFn?: (state: TStatePayload) => T
|
selectorFn?: (state: TStatePayload) => T,
|
||||||
|
optionsOrTimeout?: number | { timeoutMs?: number; signal?: AbortSignal }
|
||||||
): Promise<T> {
|
): Promise<T> {
|
||||||
|
// Parse backward-compatible args
|
||||||
|
let timeoutMs: number | undefined;
|
||||||
|
let signal: AbortSignal | undefined;
|
||||||
|
if (typeof optionsOrTimeout === 'number') {
|
||||||
|
timeoutMs = optionsOrTimeout;
|
||||||
|
} else if (optionsOrTimeout) {
|
||||||
|
timeoutMs = optionsOrTimeout.timeoutMs;
|
||||||
|
signal = optionsOrTimeout.signal;
|
||||||
|
}
|
||||||
|
|
||||||
const done = plugins.smartpromise.defer<T>();
|
const done = plugins.smartpromise.defer<T>();
|
||||||
const selectedObservable = this.select(selectorFn);
|
const selectedObservable = this.select(selectorFn);
|
||||||
const subscription = selectedObservable.subscribe(async (value) => {
|
let resolved = false;
|
||||||
if (value) {
|
|
||||||
|
// Check if already aborted
|
||||||
|
if (signal?.aborted) {
|
||||||
|
throw new Error('Aborted');
|
||||||
|
}
|
||||||
|
|
||||||
|
const subscription = selectedObservable.subscribe((value) => {
|
||||||
|
if (value && !resolved) {
|
||||||
|
resolved = true;
|
||||||
done.resolve(value);
|
done.resolve(value);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
const result = await done.promise;
|
|
||||||
subscription.unsubscribe();
|
let timeoutId: ReturnType<typeof setTimeout> | undefined;
|
||||||
return result;
|
if (timeoutMs) {
|
||||||
|
timeoutId = setTimeout(() => {
|
||||||
|
if (!resolved) {
|
||||||
|
resolved = true;
|
||||||
|
subscription.unsubscribe();
|
||||||
|
done.reject(new Error(`waitUntilPresent timed out after ${timeoutMs}ms`));
|
||||||
|
}
|
||||||
|
}, timeoutMs);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle abort signal
|
||||||
|
const abortHandler = signal ? () => {
|
||||||
|
if (!resolved) {
|
||||||
|
resolved = true;
|
||||||
|
subscription.unsubscribe();
|
||||||
|
if (timeoutId) clearTimeout(timeoutId);
|
||||||
|
done.reject(new Error('Aborted'));
|
||||||
|
}
|
||||||
|
} : undefined;
|
||||||
|
|
||||||
|
if (signal && abortHandler) {
|
||||||
|
signal.addEventListener('abort', abortHandler);
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await done.promise;
|
||||||
|
return result;
|
||||||
|
} finally {
|
||||||
|
subscription.unsubscribe();
|
||||||
|
if (timeoutId) clearTimeout(timeoutId);
|
||||||
|
if (signal && abortHandler) {
|
||||||
|
signal.removeEventListener('abort', abortHandler);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -151,6 +323,6 @@ export class StatePart<TStatePartName, TStatePayload> {
|
|||||||
) {
|
) {
|
||||||
const resultPromise = funcArg(this);
|
const resultPromise = funcArg(this);
|
||||||
this.cumulativeDeferred.addPromise(resultPromise);
|
this.cumulativeDeferred.addPromise(resultPromise);
|
||||||
this.setState(await resultPromise);
|
await this.setState(await resultPromise);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
61
ts/smartstate.contextprovider.ts
Normal file
61
ts/smartstate.contextprovider.ts
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
import type { StatePart } from './smartstate.classes.statepart.js';
|
||||||
|
|
||||||
|
export interface IContextProviderOptions<TPayload> {
|
||||||
|
/** the context key (compared by strict equality) */
|
||||||
|
context: unknown;
|
||||||
|
/** the state part to provide */
|
||||||
|
statePart: StatePart<any, TPayload>;
|
||||||
|
/** optional selector to provide a derived value instead of the full state */
|
||||||
|
selectorFn?: (state: TPayload) => any;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* attaches a Context Protocol provider to an HTML element.
|
||||||
|
* listens for `context-request` events and responds with the state part's value.
|
||||||
|
* if subscribe=true, retains the callback and invokes it on every state change.
|
||||||
|
* returns a cleanup function that removes the listener and unsubscribes.
|
||||||
|
*/
|
||||||
|
export function attachContextProvider<TPayload>(
|
||||||
|
element: HTMLElement,
|
||||||
|
options: IContextProviderOptions<TPayload>,
|
||||||
|
): () => void {
|
||||||
|
const { context, statePart, selectorFn } = options;
|
||||||
|
const subscribers = new Set<(value: any, unsubscribe?: () => void) => void>();
|
||||||
|
|
||||||
|
const subscription = statePart.select(selectorFn).subscribe((value) => {
|
||||||
|
for (const cb of subscribers) {
|
||||||
|
cb(value);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const getValue = (): any => {
|
||||||
|
const state = statePart.getState();
|
||||||
|
if (state === undefined) return undefined;
|
||||||
|
return selectorFn ? selectorFn(state) : state;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handler = (event: Event) => {
|
||||||
|
const e = event as CustomEvent;
|
||||||
|
const detail = e.detail;
|
||||||
|
if (!detail || detail.context !== context) return;
|
||||||
|
|
||||||
|
e.stopPropagation();
|
||||||
|
|
||||||
|
if (detail.subscribe) {
|
||||||
|
const cb = detail.callback;
|
||||||
|
subscribers.add(cb);
|
||||||
|
const unsubscribe = () => subscribers.delete(cb);
|
||||||
|
cb(getValue(), unsubscribe);
|
||||||
|
} else {
|
||||||
|
detail.callback(getValue());
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
element.addEventListener('context-request', handler);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
element.removeEventListener('context-request', handler);
|
||||||
|
subscription.unsubscribe();
|
||||||
|
subscribers.clear();
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
import * as isohash from '@push.rocks/isohash';
|
import * as smarthashWeb from '@push.rocks/smarthash/web';
|
||||||
import * as smartjson from '@push.rocks/smartjson';
|
import * as smartjson from '@push.rocks/smartjson';
|
||||||
import * as smartpromise from '@push.rocks/smartpromise';
|
import * as smartpromise from '@push.rocks/smartpromise';
|
||||||
import * as smartrx from '@push.rocks/smartrx';
|
import * as smartrx from '@push.rocks/smartrx';
|
||||||
import * as webstore from '@push.rocks/webstore';
|
import * as webstore from '@push.rocks/webstore';
|
||||||
|
|
||||||
export { isohash, smartjson, smartpromise, smartrx, webstore };
|
export { smarthashWeb, smartjson, smartpromise, smartrx, webstore };
|
||||||
|
|||||||
Reference in New Issue
Block a user