add license, workflow, basics

.github/workflows/workflow.yml

@@ -0,0 +1,55 @@
+name: workflow
+
+on:
+  push:
+    tags:
+      - '*.*.*'
+    branches:
+      - '**'
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    env:
+      TZ: Europe/Amsterdam
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          registry-url: https://registry.npmjs.org/
+      - run: |
+          npm ci --ignore-scripts --legacy-peer-deps
+          npm run test
+
+  publish:
+    if: startsWith(github.ref, 'refs/tags/')
+    needs: [test]
+    runs-on: ubuntu-latest
+    env:
+      TZ: Europe/Amsterdam
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          registry-url: https://registry.npmjs.org/
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NODE_AUTH_TOKEN }}
+      - run: |
+          npm ci --ignore-scripts --legacy-peer-deps
+          npm run build:lib
+      - run: |
+          cd dist/ngrx-signals-storage
+
+          version=${{ github.ref_name }}
+          pkgJson="./package.json"
+          sed -i "s/\"version\": \"[^\"]*\"/\"version\": \"$version\"/" $pkgJson
+
+          ls -ltra .
+          cat pkgJson
+
+          npm publish

.npmrc

@@ -0,0 +1 @@
+tag-version-prefix=""

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Lars Kniep
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -4,22 +4,35 @@
 ![npm](https://img.shields.io/npm/dw/@larscom/ngrx-signals-storage)
 [![license](https://img.shields.io/npm/l/@larscom/ngrx-signals-storage.svg)](https://github.com/larscom/ngrx-signals-storage/blob/master/LICENSE)
 
-> Simply save the signal state to localstorage/sessionstorage and restore state on page reload.
+> Save signal state (@ngrx/signals) to localStorage/sessionStorage and restore the state on page load.
+
+## Installation
+
+```bash
+npm install @larscom/ngrx-signals-storage
+```
 
 ## Dependencies
 
 `@larscom/ngrx-signals-storage` depends on [@ngrx/signals](https://ngrx.io/guide/signals/install) and [Angular](https://github.com/angular/angular)
 
-## Installation
-
 ```bash
-npm install @larscom/ngrx-signals-storage
+   npm install @ngrx/signals
 ```
 
 ## Usage
 
 Import `withStorage` function
 
 ```ts
-
+import { withStorage } from '@larscom/ngrx-signals-storage'
+import { withState, signalStore } from '@ngrx/signals'
+
+export const CounterStore = signalStore(
+  withState({
+    count: 0
+  }),
+  // state will be saved to sessionStorage under the key: 'myKey'
+  withStorage('myKey', sessionStorage)
+)
 ```

package.json

@@ -1,12 +1,12 @@
 {
   "name": "ngrx-signals-storage",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
+    "test": "exit 0",
     "build": "ng build",
-    "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "build:lib": "ng build ngrx-signals-storage && cpx README.md dist/ngrx-signals-storage"
   },
   "private": true,
   "dependencies": {

projects/ngrx-signals-storage/package.json

@@ -1,10 +1,36 @@
 {
-  "name": "ngrx-signals-storage",
+  "name": "@larscom/ngrx-signals-storage",
   "version": "0.0.0",
+  "description": "Save signal state (@ngrx/signals) to localstorage/sessionstorage and restore the state on page load.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/larscom/ngrx-signals-storage.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "angular",
+    "ngrx",
+    "redux",
+    "store",
+    "state",
+    "signals",
+    "storage",
+    "localstorage",
+    "sessionstorage",
+    "reactive"
+  ],
+  "author": "Lars Kniep",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/larscom/ngrx-signals-storage/issues"
+  },
+  "homepage": "https://github.com/larscom/ngrx-signals-storage#readme",
   "peerDependencies": {
     "@angular/common": "^17.0.0",
     "@angular/core": "^17.0.0",
-    "@ngrx/signals" : "^17.0.0"
+    "@ngrx/signals": "^17.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

projects/ngrx-signals-storage/src/lib/with-storage.ts

@@ -3,28 +3,51 @@ import { effect } from '@angular/core'
 import { getState, patchState } from '@ngrx/signals'
 import { EmptyFeatureResult, SignalStoreFeature, SignalStoreFeatureResult } from '@ngrx/signals/src/signal-store-models'
 
+/**
+ * The `withStorage` function that lets you save the state to localstorage/sessionstorage
+ * and rehydrate the state upon page load.
+ *
+ * @param key the key under which the state should be saved into `Storage`
+ * @param storage the implementation
+ *
+ * @example
+ *  export const CounterStore = signalStore(
+ *     withState({
+ *       count: 0
+ *     }),
+ *     withStorage('myKey', sessionStorage)
+ *   )
+ *
+ * Check out github for more information.
+ * @see https://github.com/larscom/ngrx-signals-storage
+ */
 export function withStorage<State extends SignalStoreFeatureResult>(
   key: string,
   storage: Storage
 ): SignalStoreFeature<State, EmptyFeatureResult> {
-  const state = storage.getItem(key)
-  const fromStorage = state ? JSON.parse(state) : null
+  const item = storage.getItem(key)
+  const storageState: State['state'] | null = item ? JSON.parse(item) : null
+
+  let hydrated = false
 
-  let patched = false
   return (store) => {
     if (Object.keys(store.slices).length === 0) {
       throw Error("'withStorage' must be after 'withState'")
     }
 
-    if (fromStorage != null && !patched) {
-      const state = Object.keys(store.slices).reduce<State>((state, key) => {
-        return {
-          ...state,
-          [key]: fromStorage[key]
-        }
-      }, Object())
+    if (storageState != null && !hydrated) {
+      const state = Object.keys(store.slices).reduce((state, key) => {
+        const value = storageState[key as keyof State['state']]
+        return value
+          ? {
+              ...state,
+              [key]: value
+            }
+          : state
+      }, getState(store))
+
       patchState(store, state)
-      patched = true
+      hydrated = true
     }
 
     effect(() => {

src/app/app.component.html

@@ -1,2 +1,5 @@
-<h1>Hello World!</h1>
+<h1>Counter</h1>
 <div>{{ store.count() }}</div>
+
+<h1>Date</h1>
+<div>{{ store.date() }}</div>

src/app/app.component.ts

@@ -7,19 +7,16 @@ import { patchState, signalStore, withMethods, withState } from '@ngrx/signals'
 
 export const CounterStore = signalStore(
   withState({
-    count: 10,
-    count2: 100,
-    nested: {
-      myval: 500
-    }
+    count: 100,
+    date: new Date()
   }),
   withStorage('state', sessionStorage),
   withMethods(({ count, ...store }) => ({
+    setDate(date: Date) {
+      patchState(store, { date })
+    },
     increment(by: number) {
       patchState(store, { count: count() + by })
-    },
-    decrement(by: number) {
-      patchState(store, { count: count() - by })
     }
   }))
 )
@@ -37,7 +34,5 @@ export class AppComponent {
 
   constructor() {
     setTimeout(() => this.store.increment(100), 3000)
-    // setTimeout(() => this.store.increment(100), 4000)
-    // setTimeout(() => this.store.increment(100), 6000)
   }
 }

src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>NgrxSignalsStorageApp</title>
+  <title>@larscom/ngrx-signals-storage</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">