Merge branch 'main' into derived-diamond-problem

.eslintrc.cjs

@@ -3,12 +3,14 @@
 /** @type {import('eslint').Linter.Config} */
 const config = {
   root: true,
+  reportUnusedDisableDirectives: true,
+  ignorePatterns: ['**/build', '**/coverage', '**/dist'],
   parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint', 'compat', 'import'],
+  plugins: ['@typescript-eslint', 'import'],
   extends: [
-    'plugin:@typescript-eslint/eslint-recommended',
+    'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
-    'plugin:compat/recommended',
+    'plugin:@typescript-eslint/stylistic',
     'plugin:import/recommended',
     'plugin:import/typescript',
     'prettier',
@@ -19,7 +21,7 @@ const config = {
   },
   parserOptions: {
     tsconfigRootDir: __dirname,
-    project: './tsconfig.json',
+    project: true,
     sourceType: 'module',
     ecmaVersion: 2020,
   },
@@ -35,26 +37,56 @@ const config = {
     },
   },
   rules: {
+    '@typescript-eslint/array-type': 'off',
     '@typescript-eslint/ban-types': 'off',
     '@typescript-eslint/ban-ts-comment': 'off',
-    '@typescript-eslint/consistent-type-imports': 'error',
+    '@typescript-eslint/consistent-type-definitions': 'off',
+    '@typescript-eslint/consistent-type-imports': [
+      'error',
+      { prefer: 'type-imports' },
+    ],
     '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/method-signature-style': 'error',
     '@typescript-eslint/no-empty-interface': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/no-non-null-assertion': 'off',
     '@typescript-eslint/no-unnecessary-condition': 'error',
+    '@typescript-eslint/no-unused-vars': 'off',
     '@typescript-eslint/no-inferrable-types': [
       'error',
-      {
-        ignoreParameters: true,
-      },
+      { ignoreParameters: true },
     ],
-    'no-shadow': 'error',
+    '@typescript-eslint/prefer-for-of': 'off',
+    'import/default': 'off',
+    'import/export': 'off',
+    'import/namespace': 'off',
+    'import/newline-after-import': 'error',
     'import/no-cycle': 'error',
+    'import/no-duplicates': 'off',
+    'import/no-named-as-default-member': 'off',
     'import/no-unresolved': ['error', { ignore: ['^@tanstack/'] }],
     'import/no-unused-modules': ['off', { unusedExports: true }],
+    'import/order': [
+      'error',
+      {
+        groups: [
+          'builtin',
+          'external',
+          'internal',
+          'parent',
+          'sibling',
+          'index',
+          'object',
+          'type',
+        ],
+      },
+    ],
+    'no-async-promise-executor': 'off',
+    'no-empty': 'off',
     'no-redeclare': 'off',
-    '@typescript-eslint/no-unused-vars': 'off',
+    'no-shadow': 'error',
+    'no-undef': 'off',
+    'sort-imports': ['error', { ignoreDeclarationSort: true }],
   },
   overrides: [
     {

.gitattributes

@@ -1,2 +1,2 @@
 # Auto detect text files and perform LF normalization
-* text=auto
+* text=auto eol=lf

.github/workflows/ci.yml

@@ -35,10 +35,15 @@ jobs:
         with:
           node-version-file: .nvmrc
           cache: pnpm
+      - name: Start Nx Agents
+        run: npx nx-cloud start-ci-run --distribute-on=".nx/workflows/dynamic-changesets.yaml"
       - name: Install dependencies
         run: pnpm install --frozen-lockfile --prefer-offline
       - name: Run Tests
-        run: pnpm run test:ci
+        run: pnpm run test:ci --parallel=3
+      - name: Stop Nx Agents
+        if: ${{ always() }}
+        run: npx nx-cloud stop-all-agents
       - name: Publish
         run: |
           git config --global user.name 'Tanner Linsley'

.github/workflows/pr.yml

@@ -32,11 +32,16 @@ jobs:
         with:
           node-version-file: .nvmrc
           cache: pnpm
+      - name: Start Nx Agents
+        run: npx nx-cloud start-ci-run --distribute-on=".nx/workflows/dynamic-changesets.yaml"
       - name: Install dependencies
         run: pnpm install --frozen-lockfile --prefer-offline
       - name: Get base and head commits for `nx affected`
         uses: nrwl/nx-set-shas@v3
         with:
           main-branch-name: 'main'
       - name: Run Checks
-        run: pnpm run test:pr
+        run: pnpm run test:pr --parallel=3
+      - name: Stop Nx Agents
+        if: ${{ always() }}
+        run: npx nx-cloud stop-all-agents

.gitignore

@@ -7,16 +7,9 @@ package-lock.json
 yarn.lock
 
 # builds
-types
 build
-*/build
-dist
-lib
-es
-artifacts
-.rpt2_cache
 coverage
-*.tgz
+dist
 
 # misc
 .DS_Store
@@ -38,16 +31,11 @@ stats.html
 .vscode/settings.json
 
 *.log
-.DS_Store
-node_modules
 .cache
-dist
 .idea
-
-nx-cloud.env
-.nx
-
 .nx/cache
+.pnpm-store
 .tsup
+
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*

.nx/workflows/dynamic-changesets.yaml

@@ -0,0 +1,4 @@
+distribute-on:
+  small-changeset: 8 linux-medium-js
+  medium-changeset: 10 linux-medium-js
+  large-changeset: 12 linux-medium-js

docs/config.json

@@ -98,6 +98,29 @@
           ]
         }
       ]
+    },
+    {
+      "framework": "angular",
+      "menuItems": [
+        {
+          "label": "Getting Started",
+          "children": [
+            {
+              "label": "Quick Start",
+              "to": "framework/angular/quick-start"
+            }
+          ]
+        },
+        {
+          "label": "API Reference",
+          "children": [
+            {
+              "label": "injectStore",
+              "to": "framework/angular/reference/injectStore"
+            }
+          ]
+        }
+      ]
     }
   ]
 }

docs/framework/angular/quick-start.md

@@ -0,0 +1,73 @@
+---
+title: Quick Start
+id: quick-start
+---
+
+The basic angular app example to get started with the Tanstack angular-store.
+
+**app.component.ts**
+```html
+<h1>How many of your friends like cats or dogs?</h1>
+<p>Press one of the buttons to add a counter of how many of your friends like cats or dogs</p>
+<app-increment animal="dogs" />
+<app-display animal="dogs" />
+<app-increment animal="cats" />
+<app-display animal="cats" />
+```
+
+**store.ts**
+```js
+import { Store } from '@tanstack/store';
+
+// You can use @tanstack/store outside of App components too!
+export const store = new Store({
+  dogs: 0,
+  cats: 0,
+});
+
+export function updateState(animal: 'dogs' | 'cats') {
+  store.setState((state) => {
+    return {
+      ...state,
+      [animal]: state[animal] + 1,
+    };
+  });
+}
+```
+
+**display.component.ts**
+```typescript
+import { injectStore } from '@tanstack/angular-store';
+import { store } from './store';
+
+@Component({
+    selector: 'app-display',
+    template: `
+        <!-- This will only re-render when animal changes. If an unrelated store property changes, it won't re-render -->
+        <div>{{ animal() }}: {{ count() }}</div>
+    `,
+    standalone: true
+})
+export class Display {
+    animal = input.required<string>();
+    count = injectStore(store, (state) => state[this.animal()]);
+}
+```
+
+**increment.component.ts**
+```typescript
+import { injectStore } from '@tanstack/angular-store';
+import { store, updateState } from './store';
+
+@Component({
+    selector: 'app-increment',
+    template: `
+        <button (click)="updateState(animal())">My Friend Likes {{ animal() }}</button>
+    `,
+    standalone: true
+})
+export class Increment {
+    animal = input.required<string>();
+    updateState = injectStore(store, updateState);
+}
+```

docs/framework/angular/reference/injectStore.md

@@ -0,0 +1,6 @@
+---
+title: Inject Store
+id: injectStore
+---
+
+Please see [/packages/angular-store/src/index.ts](https://github.com/tanstack/store/tree/main/packages/angular-store/src/index.ts)

docs/installation.md

@@ -20,3 +20,11 @@ npm install @tanstack/vue-store
 ```
 
 TanStack Store is compatible with Vue 2 and 3.
+
+## Angular
+
+```sh
+npm install @tanstack/angular-store
+```
+
+TanStack Store is compatible with Angular 16+

docs/overview.md

@@ -3,6 +3,6 @@ title: Overview
 id: overview
 ---
 
-TanStack Store is a framework agnostic data store that ships with framework specific adapters for major frameworks like React, Solid, Vue and Svelte.
+TanStack Store is a framework agnostic data store that ships with framework specific adapters for major frameworks like React, Solid, Vue, Angular, and Svelte.
 
 TanStack Store is primarily used for state management internally for most framework agnostic TanStack libraries. It can also be used as a standalone library for any framework or application.

knip.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/knip@4/schema.json",
+  "workspaces": {
+    "packages/angular-store": {
+      "ignoreDependencies": ["@angular/compiler-cli"]
+    },
+    "packages/vue-store": {
+      "ignoreDependencies": ["vue2", "vue2.7"]
+    }
+  }
+}

nx.json

@@ -4,7 +4,7 @@
     "defaultBase": "main"
   },
   "defaultBase": "main",
-  "nxCloudAccessToken": "OTI3Y2U3NGQtYzQ3ZC00ZmE3LWJjZWQtYTYxOTEyNmNiN2IyfHJlYWQtb25seQ==",
+  "nxCloudAccessToken": "MDZiNDc1ZWQtODJjMi00MjA3LWJlYzktMWUyNmI1NzQyNmYyfHJlYWQ=",
   "parallel": 5,
   "namedInputs": {
     "sharedGlobals": [
@@ -52,6 +52,18 @@
       "dependsOn": ["build"],
       "inputs": ["^public"],
       "cache": true
+    },
+    "test:knip": {
+      "cache": true,
+      "inputs": ["{workspaceRoot}/**/*"]
+    },
+    "test:format": {
+      "cache": true,
+      "inputs": ["{workspaceRoot}/**/*"]
+    },
+    "test:sherif": {
+      "cache": true,
+      "inputs": ["{workspaceRoot}/**/*"]
     }
   }
 }