refactor(angular-query): build with vite, publish d.ts files to package root

packages/angular-query-experimental/.attw.json

@@ -1,3 +1,3 @@
 {
-  "ignoreRules": ["cjs-resolves-to-esm", "no-resolution"]
+  "ignoreRules": ["cjs-resolves-to-esm"]
 }

packages/angular-query-experimental/package.json

@@ -27,7 +27,7 @@
     "tanstack"
   ],
   "scripts": {
-    "clean": "premove ./build ./coverage ./dist-ts",
+    "clean": "premove ./dist ./coverage ./dist-ts",
     "compile": "tsc --build",
     "test:eslint": "eslint ./src",
     "test:types": "npm-run-all --serial test:types:*",
@@ -37,33 +37,30 @@
     "test:types:ts53": "node ../../node_modules/typescript53/lib/tsc.js --build",
     "test:types:ts54": "node ../../node_modules/typescript54/lib/tsc.js --build",
     "test:types:ts55": "node ../../node_modules/typescript55/lib/tsc.js --build",
-    "test:types:ts56": "node ../../node_modules/typescript56/lib/tsc.js  --build",
-    "test:types:ts57": "node ../../node_modules/typescript57/lib/tsc.js  --build",
+    "test:types:ts56": "node ../../node_modules/typescript56/lib/tsc.js --build",
+    "test:types:ts57": "node ../../node_modules/typescript57/lib/tsc.js --build",
     "test:types:tscurrent": "tsc --build",
     "test:lib": "vitest",
     "test:lib:dev": "pnpm run test:lib --watch",
-    "test:build": "publint --strict && attw --pack",
-    "build": "pnpm build:tsup",
-    "build:tsup": "tsup --tsconfig tsconfig.prod.json"
+    "test:build": "pnpm pack && publint ./dist/*.tgz --strict && attw ./dist/*.tgz; premove ./dist/*.tgz",
+    "build": "vite build",
+    "prepack": "node ./scripts/prepack.js"
   },
   "type": "module",
-  "types": "build/index.d.ts",
-  "module": "build/index.mjs",
+  "types": "dist/index.d.ts",
+  "module": "dist/index.mjs",
   "exports": {
     ".": {
       "@tanstack/custom-condition": "./src/index.ts",
-      "types": "./build/index.d.ts",
-      "default": "./build/index.mjs"
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.mjs"
     },
-    "./package.json": {
-      "default": "./package.json"
-    }
+    "./package.json": "./package.json"
   },
   "sideEffects": false,
   "files": [
-    "build",
-    "src",
-    "!src/__tests__"
+    "**/*.d.ts",
+    "**/*.mjs.*"
   ],
   "dependencies": {
     "@tanstack/query-core": "workspace:*",
@@ -74,13 +71,19 @@
     "@angular/compiler": "^20.0.0",
     "@angular/core": "^20.0.0",
     "@angular/platform-browser": "^20.0.0",
-    "@angular/platform-browser-dynamic": "^20.0.0",
     "@tanstack/query-test-utils": "workspace:*",
     "eslint-plugin-jsdoc": "^50.5.0",
-    "npm-run-all2": "^5.0.0"
+    "npm-run-all2": "^5.0.0",
+    "vite-plugin-dts": "4.2.3",
+    "vite-plugin-externalize-deps": "^0.9.0",
+    "vite-tsconfig-paths": "^5.1.4"
   },
   "peerDependencies": {
     "@angular/common": ">=16.0.0",
     "@angular/core": ">=16.0.0"
+  },
+  "publishConfig": {
+    "directory": "dist",
+    "linkDirectory": false
   }
 }

packages/angular-query-experimental/scripts/prepack.js

@@ -0,0 +1,92 @@
+import fs from 'node:fs'
+import path from 'node:path'
+
+console.log('Running prepack script')
+
+/**
+ * Files to copy to the dist directory
+ * @type {string[]}
+ */
+const FILES_TO_COPY = ['README.md']
+
+/**
+ * Fields to remove from the package.json copy
+ * @type {string[]}
+ */
+const FIELDS_TO_REMOVE = [
+  'devDependencies',
+  'files',
+  'publishConfig',
+  'scripts',
+]
+
+/**
+ * Replaces 'dist/' or './dist/' prefix from a file path with './'
+ * @param {string} filePath - The file path to process
+ * @returns {string} The path without dist prefix
+ */
+function removeDist(filePath) {
+  return filePath.replace(/^(\.\/)?dist\//, './')
+}
+
+/**
+ * Recursively processes exports object to remove dist prefixes
+ * @param {Record<string, any>} exports - The exports object to process
+ * @returns {Record<string, any>} The processed exports object
+ */
+function processExports(exports) {
+  return Object.fromEntries(
+    Object.entries(exports).map(([key, value]) => [
+      key,
+      typeof value === 'string'
+        ? removeDist(value)
+        : typeof value === 'object' && value !== null
+          ? processExports(value)
+          : value,
+    ]),
+  )
+}
+
+console.log('Copying modified package.json')
+
+/** @type {Record<string, any>} */
+const packageJson = JSON.parse(fs.readFileSync('package.json', 'utf8'))
+
+const distPackageJson = { ...packageJson }
+
+if (distPackageJson.types) {
+  distPackageJson.types = removeDist(distPackageJson.types)
+}
+
+if (distPackageJson.module) {
+  distPackageJson.module = removeDist(distPackageJson.module)
+}
+
+if (distPackageJson.exports) {
+  distPackageJson.exports = processExports(distPackageJson.exports)
+}
+
+for (const field of FIELDS_TO_REMOVE) {
+  delete distPackageJson[field]
+}
+
+if (!fs.existsSync('dist')) {
+  fs.mkdirSync('dist', { recursive: true })
+}
+
+fs.writeFileSync(
+  path.join('dist', 'package.json'),
+  JSON.stringify(distPackageJson, null, 2),
+)
+
+console.log('Copying other files')
+for (const fileName of FILES_TO_COPY) {
+  if (fs.existsSync(fileName)) {
+    fs.copyFileSync(fileName, path.join('dist', fileName))
+    console.log(`${fileName}`)
+  } else {
+    console.log(`${fileName} not found, skipping`)
+  }
+}
+
+console.log('prepack complete')

packages/angular-query-experimental/src/test-setup.ts

@@ -1,10 +1,7 @@
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting,
-} from '@angular/platform-browser-dynamic/testing'
 import { getTestBed } from '@angular/core/testing'
+import {
+  BrowserTestingModule,
+  platformBrowserTesting,
+} from '@angular/platform-browser/testing'
 
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(),
-)
+getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting())

packages/angular-query-experimental/tsconfig.json

@@ -3,8 +3,6 @@
   "compilerOptions": {
     "outDir": "./dist-ts",
     "rootDir": ".",
-    "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
     "noFallthroughCasesInSwitch": true,
     "useDefineForClassFields": false,
     "target": "ES2022"

packages/angular-query-experimental/tsconfig.prod.json

@@ -3,6 +3,7 @@
   "compilerOptions": {
     "incremental": false,
     "composite": false,
-    "rootDir": "../../"
+    "rootDir": "../../",
+    "customConditions": null
   }
 }

packages/angular-query-experimental/vite.config.ts

@@ -1,8 +1,32 @@
-import { defineConfig } from 'vitest/config'
-
+import { defineConfig, mergeConfig } from 'vitest/config'
+import { externalizeDeps } from 'vite-plugin-externalize-deps'
+import tsconfigPaths from 'vite-tsconfig-paths'
+import dts from 'vite-plugin-dts'
 import packageJson from './package.json'
+import type { Options } from '@tanstack/config/vite'
+
+function ensureImportFileExtension({
+  content,
+  extension,
+}: {
+  content: string
+  extension: string
+}) {
+  // replace e.g. `import { foo } from './foo'` with `import { foo } from './foo.js'`
+  content = content.replace(
+    /(im|ex)port\s[\w{}/*\s,]+from\s['"](?:\.\.?\/)+?[^.'"]+(?=['"];?)/gm,
+    `$&.${extension}`,
+  )
+
+  // replace e.g. `import('./foo')` with `import('./foo.js')`
+  content = content.replace(
+    /import\(['"](?:\.\.?\/)+?[^.'"]+(?=['"];?)/gm,
+    `$&.${extension}`,
+  )
+  return content
+}
 
-export default defineConfig({
+const config = defineConfig({
   // fix from https://github.com/vitest-dev/vitest/issues/6992#issuecomment-2509408660
   resolve: {
     conditions: ['@tanstack/custom-condition'],
@@ -26,3 +50,70 @@ export default defineConfig({
     restoreMocks: true,
   },
 })
+
+// copy from @tanstack/config/vite with changes:
+// - build - lib - fileName: [name.mjs]
+// - rollup - output - preserveModulesRoot: src
+export const tanstackViteConfig = (options: Options) => {
+  const outDir = options.outDir ?? 'dist'
+  const cjs = options.cjs ?? true
+
+  return defineConfig({
+    plugins: [
+      externalizeDeps({ include: options.externalDeps ?? [] }),
+      tsconfigPaths({
+        projects: options.tsconfigPath ? [options.tsconfigPath] : undefined,
+      }),
+      dts({
+        outDir,
+        entryRoot: options.srcDir,
+        include: options.srcDir,
+        exclude: options.exclude,
+        tsconfigPath: options.tsconfigPath,
+        compilerOptions: {
+          module: 99, // ESNext
+          declarationMap: false,
+        },
+        beforeWriteFile: (filePath, content) => {
+          return {
+            filePath,
+            content: ensureImportFileExtension({ content, extension: 'js' }),
+          }
+        },
+        afterDiagnostic: (diagnostics) => {
+          if (diagnostics.length > 0) {
+            console.error('Please fix the above type errors')
+            process.exit(1)
+          }
+        },
+      }),
+    ],
+    build: {
+      outDir,
+      minify: false,
+      sourcemap: true,
+      lib: {
+        entry: options.entry,
+        formats: cjs ? ['es', 'cjs'] : ['es'],
+        fileName: () => '[name].mjs',
+      },
+      rollupOptions: {
+        output: {
+          preserveModules: true,
+          preserveModulesRoot: 'src',
+        },
+      },
+    },
+  })
+}
+
+export default mergeConfig(
+  config,
+  tanstackViteConfig({
+    cjs: false,
+    entry: ['./src/index.ts'],
+    exclude: ['./src/__tests__'],
+    srcDir: './src',
+    tsconfigPath: './tsconfig.prod.json',
+  }),
+)

packages/angular-query-persist-client/.attw.json

@@ -1,3 +1,3 @@
 {
-  "ignoreRules": ["cjs-resolves-to-esm", "no-resolution"]
+  "ignoreRules": ["cjs-resolves-to-esm"]
 }

packages/angular-query-persist-client/package.json

@@ -62,7 +62,6 @@
     "@angular/compiler": "^20.0.0",
     "@angular/core": "^20.0.0",
     "@angular/platform-browser": "^20.0.0",
-    "@angular/platform-browser-dynamic": "^20.0.0",
     "@tanstack/angular-query-experimental": "workspace:*",
     "@tanstack/query-test-utils": "workspace:*",
     "@testing-library/angular": "^17.3.7",
@@ -73,6 +72,6 @@
   "peerDependencies": {
     "@angular/common": ">=16.0.0",
     "@angular/core": ">=16.0.0",
-    "@tanstack/angular-query-experimental": "workspace:*"
+    "@tanstack/angular-query-experimental": "workspace:^"
   }
 }

packages/angular-query-persist-client/src/test-setup.ts

@@ -1,10 +1,7 @@
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting,
-} from '@angular/platform-browser-dynamic/testing'
 import { getTestBed } from '@angular/core/testing'
+import {
+  BrowserTestingModule,
+  platformBrowserTesting,
+} from '@angular/platform-browser/testing'
 
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(),
-)
+getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting())

packages/angular-query-persist-client/tsconfig.json

@@ -3,9 +3,6 @@
   "compilerOptions": {
     "outDir": "./dist-ts",
     "rootDir": ".",
-    "moduleResolution": "Bundler",
-    "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
     "noFallthroughCasesInSwitch": true,
     "useDefineForClassFields": false,
     "target": "ES2022"