@tanstack/angular-store 0.4.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Tanner Linsley
+
+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.

package/dist/cjs/index.cjs

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const core = require("@angular/core");
+function injectStore(store, selector = (d) => d, options = {
+  equal: shallow
+}) {
+  !options.injector && core.assertInInjectionContext(injectStore);
+  if (!options.injector) {
+    options.injector = core.inject(core.Injector);
+  }
+  return core.runInInjectionContext(options.injector, () => {
+    const slice = core.signal(selector(store.state), options);
+    core.effect(
+      (onCleanup) => {
+        const unsub = store.subscribe(() => {
+          slice.set(selector(store.state));
+        });
+        onCleanup(unsub);
+      },
+      { allowSignalWrites: true }
+    );
+    return slice.asReadonly();
+  });
+}
+function shallow(objA, objB) {
+  if (Object.is(objA, objB)) {
+    return true;
+  }
+  if (typeof objA !== "object" || objA === null || typeof objB !== "object" || objB === null) {
+    return false;
+  }
+  const keysA = Object.keys(objA);
+  if (keysA.length !== Object.keys(objB).length) {
+    return false;
+  }
+  for (let i = 0; i < keysA.length; i++) {
+    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !Object.is(objA[keysA[i]], objB[keysA[i]])) {
+      return false;
+    }
+  }
+  return true;
+}
+exports.injectStore = injectStore;
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/index.ts"],"sourcesContent":["import {\n  effect,\n  signal,\n  type CreateSignalOptions,\n  Injector,\n  assertInInjectionContext,\n  inject,\n  runInInjectionContext,\n} from '@angular/core'\nimport type { AnyUpdater, Store } from '@tanstack/store'\n\ntype NoInfer<T> = [T][T extends any ? 0 : never]\n\nexport function injectStore<\n  TState,\n  TSelected = NoInfer<TState>,\n  TUpdater extends AnyUpdater = AnyUpdater,\n>(\n  store: Store<TState, TUpdater>,\n  selector: (state: NoInfer<TState>) => TSelected = (d) => d as TSelected,\n  options: CreateSignalOptions<TSelected> & { injector?: Injector } = {\n    equal: shallow,\n  },\n) {\n  !options.injector && assertInInjectionContext(injectStore)\n\n  if (!options.injector) {\n    options.injector = inject(Injector)\n  }\n\n  return runInInjectionContext(options.injector, () => {\n    const slice = signal(selector(store.state), options)\n\n    effect(\n      (onCleanup) => {\n        const unsub = store.subscribe(() => {\n          slice.set(selector(store.state))\n        })\n        onCleanup(unsub)\n      },\n      { allowSignalWrites: true },\n    )\n\n    return slice.asReadonly()\n  })\n}\n\nfunction shallow<T>(objA: T, objB: T) {\n  if (Object.is(objA, objB)) {\n    return true\n  }\n\n  if (\n    typeof objA !== 'object' ||\n    objA === null ||\n    typeof objB !== 'object' ||\n    objB === null\n  ) {\n    return false\n  }\n\n  const keysA = Object.keys(objA)\n  if (keysA.length !== Object.keys(objB).length) {\n    return false\n  }\n\n  for (let i = 0; i < keysA.length; i++) {\n    if (\n      !Object.prototype.hasOwnProperty.call(objB, keysA[i] as string) ||\n      !Object.is(objA[keysA[i] as keyof T], objB[keysA[i] as keyof T])\n    ) {\n      return false\n    }\n  }\n  return true\n}\n"],"names":["assertInInjectionContext","inject","Injector","runInInjectionContext","signal","effect"],"mappings":";;;AAaO,SAAS,YAKd,OACA,WAAkD,CAAC,MAAM,GACzD,UAAoE;AAAA,EAClE,OAAO;AACT,GACA;AACC,GAAA,QAAQ,YAAYA,KAAA,yBAAyB,WAAW;AAErD,MAAA,CAAC,QAAQ,UAAU;AACb,YAAA,WAAWC,YAAOC,KAAAA,QAAQ;AAAA,EACpC;AAEO,SAAAC,KAAA,sBAAsB,QAAQ,UAAU,MAAM;AACnD,UAAM,QAAQC,KAAAA,OAAO,SAAS,MAAM,KAAK,GAAG,OAAO;AAEnDC,SAAA;AAAA,MACE,CAAC,cAAc;AACP,cAAA,QAAQ,MAAM,UAAU,MAAM;AAClC,gBAAM,IAAI,SAAS,MAAM,KAAK,CAAC;AAAA,QAAA,CAChC;AACD,kBAAU,KAAK;AAAA,MACjB;AAAA,MACA,EAAE,mBAAmB,KAAK;AAAA,IAAA;AAG5B,WAAO,MAAM;EAAW,CACzB;AACH;AAEA,SAAS,QAAW,MAAS,MAAS;AACpC,MAAI,OAAO,GAAG,MAAM,IAAI,GAAG;AAClB,WAAA;AAAA,EACT;AAGE,MAAA,OAAO,SAAS,YAChB,SAAS,QACT,OAAO,SAAS,YAChB,SAAS,MACT;AACO,WAAA;AAAA,EACT;AAEM,QAAA,QAAQ,OAAO,KAAK,IAAI;AAC9B,MAAI,MAAM,WAAW,OAAO,KAAK,IAAI,EAAE,QAAQ;AACtC,WAAA;AAAA,EACT;AAEA,WAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AAEnC,QAAA,CAAC,OAAO,UAAU,eAAe,KAAK,MAAM,MAAM,CAAC,CAAW,KAC9D,CAAC,OAAO,GAAG,KAAK,MAAM,CAAC,CAAY,GAAG,KAAK,MAAM,CAAC,CAAY,CAAC,GAC/D;AACO,aAAA;AAAA,IACT;AAAA,EACF;AACO,SAAA;AACT;;"}

package/dist/cjs/index.d.cts

@@ -0,0 +1,7 @@
+import { type CreateSignalOptions, Injector } from '@angular/core';
+import type { AnyUpdater, Store } from '@tanstack/store';
+type NoInfer<T> = [T][T extends any ? 0 : never];
+export declare function injectStore<TState, TSelected = NoInfer<TState>, TUpdater extends AnyUpdater = AnyUpdater>(store: Store<TState, TUpdater>, selector?: (state: NoInfer<TState>) => TSelected, options?: CreateSignalOptions<TSelected> & {
+    injector?: Injector;
+}): import("@angular/core").Signal<TSelected>;
+export {};

package/dist/esm/index.d.ts

@@ -0,0 +1,7 @@
+import { type CreateSignalOptions, Injector } from '@angular/core';
+import type { AnyUpdater, Store } from '@tanstack/store';
+type NoInfer<T> = [T][T extends any ? 0 : never];
+export declare function injectStore<TState, TSelected = NoInfer<TState>, TUpdater extends AnyUpdater = AnyUpdater>(store: Store<TState, TUpdater>, selector?: (state: NoInfer<TState>) => TSelected, options?: CreateSignalOptions<TSelected> & {
+    injector?: Injector;
+}): import("@angular/core").Signal<TSelected>;
+export {};

package/dist/esm/index.js

@@ -0,0 +1,44 @@
+import { assertInInjectionContext, inject, Injector, runInInjectionContext, signal, effect } from "@angular/core";
+function injectStore(store, selector = (d) => d, options = {
+  equal: shallow
+}) {
+  !options.injector && assertInInjectionContext(injectStore);
+  if (!options.injector) {
+    options.injector = inject(Injector);
+  }
+  return runInInjectionContext(options.injector, () => {
+    const slice = signal(selector(store.state), options);
+    effect(
+      (onCleanup) => {
+        const unsub = store.subscribe(() => {
+          slice.set(selector(store.state));
+        });
+        onCleanup(unsub);
+      },
+      { allowSignalWrites: true }
+    );
+    return slice.asReadonly();
+  });
+}
+function shallow(objA, objB) {
+  if (Object.is(objA, objB)) {
+    return true;
+  }
+  if (typeof objA !== "object" || objA === null || typeof objB !== "object" || objB === null) {
+    return false;
+  }
+  const keysA = Object.keys(objA);
+  if (keysA.length !== Object.keys(objB).length) {
+    return false;
+  }
+  for (let i = 0; i < keysA.length; i++) {
+    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !Object.is(objA[keysA[i]], objB[keysA[i]])) {
+      return false;
+    }
+  }
+  return true;
+}
+export {
+  injectStore
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":["import {\n  effect,\n  signal,\n  type CreateSignalOptions,\n  Injector,\n  assertInInjectionContext,\n  inject,\n  runInInjectionContext,\n} from '@angular/core'\nimport type { AnyUpdater, Store } from '@tanstack/store'\n\ntype NoInfer<T> = [T][T extends any ? 0 : never]\n\nexport function injectStore<\n  TState,\n  TSelected = NoInfer<TState>,\n  TUpdater extends AnyUpdater = AnyUpdater,\n>(\n  store: Store<TState, TUpdater>,\n  selector: (state: NoInfer<TState>) => TSelected = (d) => d as TSelected,\n  options: CreateSignalOptions<TSelected> & { injector?: Injector } = {\n    equal: shallow,\n  },\n) {\n  !options.injector && assertInInjectionContext(injectStore)\n\n  if (!options.injector) {\n    options.injector = inject(Injector)\n  }\n\n  return runInInjectionContext(options.injector, () => {\n    const slice = signal(selector(store.state), options)\n\n    effect(\n      (onCleanup) => {\n        const unsub = store.subscribe(() => {\n          slice.set(selector(store.state))\n        })\n        onCleanup(unsub)\n      },\n      { allowSignalWrites: true },\n    )\n\n    return slice.asReadonly()\n  })\n}\n\nfunction shallow<T>(objA: T, objB: T) {\n  if (Object.is(objA, objB)) {\n    return true\n  }\n\n  if (\n    typeof objA !== 'object' ||\n    objA === null ||\n    typeof objB !== 'object' ||\n    objB === null\n  ) {\n    return false\n  }\n\n  const keysA = Object.keys(objA)\n  if (keysA.length !== Object.keys(objB).length) {\n    return false\n  }\n\n  for (let i = 0; i < keysA.length; i++) {\n    if (\n      !Object.prototype.hasOwnProperty.call(objB, keysA[i] as string) ||\n      !Object.is(objA[keysA[i] as keyof T], objB[keysA[i] as keyof T])\n    ) {\n      return false\n    }\n  }\n  return true\n}\n"],"names":[],"mappings":";AAaO,SAAS,YAKd,OACA,WAAkD,CAAC,MAAM,GACzD,UAAoE;AAAA,EAClE,OAAO;AACT,GACA;AACC,GAAA,QAAQ,YAAY,yBAAyB,WAAW;AAErD,MAAA,CAAC,QAAQ,UAAU;AACb,YAAA,WAAW,OAAO,QAAQ;AAAA,EACpC;AAEO,SAAA,sBAAsB,QAAQ,UAAU,MAAM;AACnD,UAAM,QAAQ,OAAO,SAAS,MAAM,KAAK,GAAG,OAAO;AAEnD;AAAA,MACE,CAAC,cAAc;AACP,cAAA,QAAQ,MAAM,UAAU,MAAM;AAClC,gBAAM,IAAI,SAAS,MAAM,KAAK,CAAC;AAAA,QAAA,CAChC;AACD,kBAAU,KAAK;AAAA,MACjB;AAAA,MACA,EAAE,mBAAmB,KAAK;AAAA,IAAA;AAG5B,WAAO,MAAM;EAAW,CACzB;AACH;AAEA,SAAS,QAAW,MAAS,MAAS;AACpC,MAAI,OAAO,GAAG,MAAM,IAAI,GAAG;AAClB,WAAA;AAAA,EACT;AAGE,MAAA,OAAO,SAAS,YAChB,SAAS,QACT,OAAO,SAAS,YAChB,SAAS,MACT;AACO,WAAA;AAAA,EACT;AAEM,QAAA,QAAQ,OAAO,KAAK,IAAI;AAC9B,MAAI,MAAM,WAAW,OAAO,KAAK,IAAI,EAAE,QAAQ;AACtC,WAAA;AAAA,EACT;AAEA,WAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AAEnC,QAAA,CAAC,OAAO,UAAU,eAAe,KAAK,MAAM,MAAM,CAAC,CAAW,KAC9D,CAAC,OAAO,GAAG,KAAK,MAAM,CAAC,CAAY,GAAG,KAAK,MAAM,CAAC,CAAY,CAAC,GAC/D;AACO,aAAA;AAAA,IACT;AAAA,EACF;AACO,SAAA;AACT;"}

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@tanstack/angular-store",
+  "author": "Tanner Linsley",
+  "version": "0.4.0",
+  "license": "MIT",
+  "repository": "tanstack/store",
+  "homepage": "https://tanstack.com/store",
+  "description": "",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "keywords": [
+    "store",
+    "typescript",
+    "angular"
+  ],
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "type": "module",
+  "types": "dist/esm/index.d.ts",
+  "main": "dist/cjs/index.cjs",
+  "module": "dist/esm/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/index.d.cts",
+        "default": "./dist/cjs/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@tanstack/store": "0.3.1"
+  },
+  "devDependencies": {
+    "@analogjs/vite-plugin-angular": "^0.2.32",
+    "@angular/core": "^17.1.2",
+    "@angular/common": "^17.1.2",
+    "@angular/compiler": "^17.1.2",
+    "@angular/compiler-cli": "^17.1.2",
+    "@angular/platform-browser": "^17.1.2",
+    "@angular/platform-browser-dynamic": "^17.1.2",
+    "zone.js": "^0.14.3"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=16 < 18",
+    "@angular/common": ">=16 < 18"
+  },
+  "scripts": {
+    "clean": "rimraf ./dist && rimraf ./coverage",
+    "test:eslint": "eslint --ext .ts,.tsx ./src",
+    "test:types": "tsc",
+    "test:lib": "vitest",
+    "test:lib:dev": "pnpm run test:lib --watch",
+    "test:build": "publint --strict",
+    "build": "vite build"
+  }
+}

package/src/index.ts

@@ -0,0 +1,76 @@
+import {
+  effect,
+  signal,
+  type CreateSignalOptions,
+  Injector,
+  assertInInjectionContext,
+  inject,
+  runInInjectionContext,
+} from '@angular/core'
+import type { AnyUpdater, Store } from '@tanstack/store'
+
+type NoInfer<T> = [T][T extends any ? 0 : never]
+
+export function injectStore<
+  TState,
+  TSelected = NoInfer<TState>,
+  TUpdater extends AnyUpdater = AnyUpdater,
+>(
+  store: Store<TState, TUpdater>,
+  selector: (state: NoInfer<TState>) => TSelected = (d) => d as TSelected,
+  options: CreateSignalOptions<TSelected> & { injector?: Injector } = {
+    equal: shallow,
+  },
+) {
+  !options.injector && assertInInjectionContext(injectStore)
+
+  if (!options.injector) {
+    options.injector = inject(Injector)
+  }
+
+  return runInInjectionContext(options.injector, () => {
+    const slice = signal(selector(store.state), options)
+
+    effect(
+      (onCleanup) => {
+        const unsub = store.subscribe(() => {
+          slice.set(selector(store.state))
+        })
+        onCleanup(unsub)
+      },
+      { allowSignalWrites: true },
+    )
+
+    return slice.asReadonly()
+  })
+}
+
+function shallow<T>(objA: T, objB: T) {
+  if (Object.is(objA, objB)) {
+    return true
+  }
+
+  if (
+    typeof objA !== 'object' ||
+    objA === null ||
+    typeof objB !== 'object' ||
+    objB === null
+  ) {
+    return false
+  }
+
+  const keysA = Object.keys(objA)
+  if (keysA.length !== Object.keys(objB).length) {
+    return false
+  }
+
+  for (let i = 0; i < keysA.length; i++) {
+    if (
+      !Object.prototype.hasOwnProperty.call(objB, keysA[i] as string) ||
+      !Object.is(objA[keysA[i] as keyof T], objB[keysA[i] as keyof T])
+    ) {
+      return false
+    }
+  }
+  return true
+}

package/src/tests/index.test.tsx

@@ -0,0 +1,94 @@
+import { Component, effect } from '@angular/core'
+import { TestBed } from '@angular/core/testing'
+import { By } from '@angular/platform-browser'
+import { Store } from '@tanstack/store'
+import { injectStore } from '../index'
+
+describe('injectStore', () => {
+  test(`allows us to select state using a selector`, () => {
+    const store = new Store({ select: 0, ignored: 1 })
+
+    @Component({
+      template: `<p>Store: {{ storeVal() }}</p>`,
+      standalone: true,
+    })
+    class MyCmp {
+      storeVal = injectStore(store, (state) => state.select)
+    }
+
+    const fixture = TestBed.createComponent(MyCmp)
+    fixture.detectChanges()
+
+    const element = fixture.nativeElement
+    expect(element.textContent).toContain('Store: 0')
+  })
+
+  test('only triggers a re-render when selector state is updated', async () => {
+    const store = new Store({ select: 0, ignored: 1 })
+    let count = 0
+
+    @Component({
+      template: `
+        <div>
+          <p>Store: {{ storeVal() }}</p>
+          <button id="updateSelect" (click)="updateSelect()">
+            Update select
+          </button>
+          <button id="updateIgnored" (click)="updateIgnored()">
+            Update ignored
+          </button>
+        </div>
+      `,
+      standalone: true,
+    })
+    class MyCmp {
+      storeVal = injectStore(store, (state) => state.select)
+
+      constructor() {
+        effect(() => {
+          console.log(this.storeVal())
+          count++
+        })
+      }
+
+      updateSelect() {
+        store.setState((v) => ({
+          ...v,
+          select: 10,
+        }))
+      }
+
+      updateIgnored() {
+        store.setState((v) => ({
+          ...v,
+          ignored: 10,
+        }))
+      }
+    }
+
+    const fixture = TestBed.createComponent(MyCmp)
+    fixture.detectChanges()
+
+    const element = fixture.nativeElement
+    const debugElement = fixture.debugElement
+
+    expect(element.textContent).toContain('Store: 0')
+    expect(count).toEqual(1)
+
+    debugElement
+      .query(By.css('button#updateSelect'))
+      .triggerEventHandler('click', null)
+
+    fixture.detectChanges()
+    expect(element.textContent).toContain('Store: 10')
+    expect(count).toEqual(2)
+
+    debugElement
+      .query(By.css('button#updateIgnored'))
+      .triggerEventHandler('click', null)
+
+    fixture.detectChanges()
+    expect(element.textContent).toContain('Store: 10')
+    expect(count).toEqual(2)
+  })
+})

package/src/tests/test-setup.ts

@@ -0,0 +1,12 @@
+import '@analogjs/vite-plugin-angular/setup-vitest'
+
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from '@angular/platform-browser-dynamic/testing'
+import { getTestBed } from '@angular/core/testing'
+
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+)