refactor(general): 💡 update to v5

Author: NetanelBasal

.editorconfig

@@ -0,0 +1,35 @@
+{
+  "root": true,
+  "ignorePatterns": ["**/*"],
+  "plugins": ["@nx"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {
+        "@nx/enforce-module-boundaries": [
+          "error",
+          {
+            "enforceBuildableLibDependency": true,
+            "allow": [],
+            "depConstraints": [
+              {
+                "sourceTag": "*",
+                "onlyDependOnLibsWithTags": ["*"]
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "extends": ["plugin:@nx/typescript"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "extends": ["plugin:@nx/javascript"],
+      "rules": {}
+    }
+  ]
+}

.eslintrc.base.json

@@ -1,42 +1,36 @@
 {
-  "root": true,
-  "ignorePatterns": ["**/*"],
-  "plugins": ["@nx"],
+  "ignorePatterns": ["!**/*"],
   "overrides": [
     {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
       "rules": {
-        "@nx/enforce-module-boundaries": [
+        "@angular-eslint/directive-selector": [
           "error",
           {
-            "enforceBuildableLibDependency": true,
-            "allow": [],
-            "depConstraints": [
-              {
-                "sourceTag": "*",
-                "onlyDependOnLibsWithTags": ["*"]
-              }
-            ]
+            "type": "attribute",
+            "prefix": "query",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "query",
+            "style": "kebab-case"
           }
         ]
       }
     },
     {
-      "files": ["*.ts", "*.tsx"],
-      "extends": ["plugin:@nx/typescript"],
-      "rules": {}
-    },
-    {
-      "files": ["*.js", "*.jsx"],
-      "extends": ["plugin:@nx/javascript"],
-      "rules": {}
-    },
-    {
-      "files": ["*.spec.ts", "*.spec.tsx", "*.spec.js", "*.spec.jsx"],
-      "env": {
-        "jest": true
-      },
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
       "rules": {}
     }
-  ]
+  ],
+  "extends": ["./.eslintrc.base.json"]
 }

.eslintrc.json

@@ -29,10 +29,10 @@ jobs:
           cache: 'npm'
 
       - name: Install dependencies
-        run: npm i --legacy-peer-deps
+        run: npm i
 
       - name: Run Build
         run: npm run build:all
 
-      - name: Run unit tests
+      - name: Run tests
         run: npm run test:all

.github/workflows/ci.yml

@@ -1,4 +1,4 @@
-name: Deploy Playground to GitHub Pages
+name: Deploy playground to GitHub pages
 on:
   push:
     branches:
@@ -17,26 +17,22 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v3
-        # this action has a built-in functionality for caching and restoring dependencies
-        # https://github.com/actions/setup-node#caching-global-packages-data
         with:
           node-version: 16
           cache: 'npm'
       - name: Install and Build
         run: |
-          npm ci --legacy-peer-deps 
+          npm i 
           npx nx build playground -- --base-href /query/
       - name: Duplicated index.html
-        # https://angular.io/guide/deployment#deploy-to-github-pages
-        # To prevent 404 errors for application routes when refreshing the page
         run: |
           cp dist/packages/playground/index.html dist/packages/playground/404.html
       - name: Setup Pages
         uses: actions/configure-pages@v2
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1
         with:
-          path: './dist/packages/playground'
+          path: './dist/packages/query-playground'
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v1

.github/workflows/gh-pages.yml

@@ -1,8 +1,8 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
 # compiled output
-/dist
-/tmp
+dist
+tmp
 /out-tsc
 
 # dependencies
@@ -38,5 +38,5 @@ testem.log
 .DS_Store
 Thumbs.db
 
+.nx/cache
 .angular
-.nx

.gitignore

@@ -3,3 +3,4 @@
 /dist
 /coverage
 .angular
+.nx

.prettierignore

@@ -3,6 +3,7 @@
     "nrwl.angular-console",
     "esbenp.prettier-vscode",
     "firsttris.vscode-jest-runner",
+    "ms-playwright.playwright",
     "dbaeumer.vscode-eslint"
   ]
 }

.vscode/extensions.json

@@ -377,19 +377,18 @@ export class TodosPageComponent {
         };
       })
     );
-    
+
     // Map the result `data` of multiple queries
-    combineLatest([
-      this.todosService.getTodos(),
-      this.todosService.getTodos(),
-    ]).pipe(
-      mapResultsData(([todos, todos2]) => {
-        return {
-          todos: todos.data.todos.filter(predicate),
-          todos2: todos2.data.todos.filter(predicate),
-        };
-      })
-    ).subscribe(console.log); // { isLoading: boolean, isSuccess: boolean, isError: boolean, error: unknown, data: { todos: [], todos2: [] } }
+    combineLatest([this.todosService.getTodos(), this.todosService.getTodos()])
+      .pipe(
+        mapResultsData(([todos, todos2]) => {
+          return {
+            todos: todos.data.todos.filter(predicate),
+            todos2: todos2.data.todos.filter(predicate),
+          };
+        })
+      )
+      .subscribe(console.log); // { isLoading: boolean, isSuccess: boolean, isError: boolean, error: unknown, data: { todos: [], todos2: [] } }
 
     // process error or success result directly
     this.todosService

README.md

@@ -1,5 +1,5 @@
 {
-  "extends": ["../../.eslintrc.json"],
+  "extends": ["../.eslintrc.base.json"],
   "ignorePatterns": ["!**/*"],
   "overrides": [
     {
@@ -13,15 +13,15 @@
           "error",
           {
             "type": "attribute",
-            "prefix": "ngQuery",
+            "prefix": "query",
             "style": "camelCase"
           }
         ],
         "@angular-eslint/component-selector": [
           "error",
           {
             "type": "element",
-            "prefix": "ng-query",
+            "prefix": "query",
             "style": "kebab-case"
           }
         ]
@@ -31,6 +31,13 @@
       "files": ["*.html"],
       "extends": ["plugin:@nx/angular-template"],
       "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": "error"
+      }
     }
   ]
 }

packages/playground/.eslintrc.json renamed to devtools/.eslintrc.json

@@ -1,7 +1,7 @@
-# ng-query
+# devtools
 
 This library was generated with [Nx](https://nx.dev).
 
 ## Running unit tests
 
-Run `nx test ng-query` to execute the unit tests.
+Run `nx test devtools` to execute the unit tests.

packages/ng-query/README.md renamed to devtools/README.md

@@ -1,10 +1,9 @@
 /* eslint-disable */
 export default {
-  displayName: 'playground',
-  preset: '../../jest.preset.js',
+  displayName: 'devtools',
+  preset: '../jest.preset.js',
   setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
-  globals: {},
-  coverageDirectory: '../../coverage/packages/playground',
+  coverageDirectory: '../coverage/devtools',
   transform: {
     '^.+\\.(ts|mjs|js|html)$': [
       'jest-preset-angular',

packages/playground/jest.config.ts renamed to devtools/jest.config.ts

@@ -0,0 +1,7 @@
+{
+  "$schema": "../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../dist/devtools",
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

devtools/ng-package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@ngneat/query-devtools",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/core": "^16.2.0",
+    "@tanstack/query-devtools": "5.4.2"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

devtools/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "devtools",
+  "$schema": "../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "devtools/src",
+  "prefix": "query",
+  "tags": [],
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nx/angular:package",
+      "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
+      "options": {
+        "project": "devtools/ng-package.json"
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "devtools/tsconfig.lib.prod.json"
+        },
+        "development": {
+          "tsConfig": "devtools/tsconfig.lib.json"
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "devtools/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": [
+          "devtools/**/*.ts",
+          "devtools/**/*.html",
+          "devtools/package.json"
+        ]
+      }
+    }
+  }
+}

devtools/project.json

@@ -0,0 +1,27 @@
+import {
+  DestroyRef,
+  ENVIRONMENT_INITIALIZER,
+  inject,
+  makeEnvironmentProviders,
+} from '@angular/core';
+import { TanstackQueryDevtoolsConfig } from '@tanstack/query-devtools';
+import { injectQueryClient } from '@ngneat/query';
+
+export function provideQueryDevTools(
+  devToolOptions: Partial<Omit<TanstackQueryDevtoolsConfig, 'client'>> = {}
+) {
+  return makeEnvironmentProviders([
+    {
+      provide: ENVIRONMENT_INITIALIZER,
+      multi: true,
+      useValue() {
+        const queryClient = injectQueryClient();
+        const destroyRef = inject(DestroyRef);
+
+        import('./lib/devtools/devtools').then((m) => {
+          m.queryDevtools({ queryClient, destroyRef, ...devToolOptions });
+        });
+      },
+    },
+  ]);
+}