Fix types, better exports and use tsup for build, remove parcel (#6461)

Co-authored-by: Steve Piercy <[email protected]>

packages/client/news/6461.internal

@@ -0,0 +1 @@
+Bump local `typescript` version. @sneridagh

packages/client/package.json

@@ -83,8 +83,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "release-it": "17.1.1",
-    "tsup": "^8.0.2",
-    "typescript": "^5.4.5",
+    "tsup": "^8.3.5",
+    "typescript": "^5.6.3",
     "uuid": "^9.0.1",
     "vite": "^5.4.8",
     "vite-plugin-dts": "^3.7.3",

packages/helpers/package.json

@@ -62,7 +62,7 @@
     "parcel": "^2.12.0",
     "release-it": "^17.1.1",
     "tsconfig": "workspace:*",
-    "typescript": "^5.4.5",
+    "typescript": "^5.6.3",
     "vitest": "^2.1.3"
   }
 }

packages/providers/news/6461.internal

@@ -0,0 +1 @@
+Bump local `typescript` version. @sneridagh

packages/providers/package.json

@@ -79,7 +79,7 @@
     "parcel": "^2.12.0",
     "release-it": "17.1.1",
     "tsconfig": "workspace:*",
-    "typescript": "^5.4.5",
+    "typescript": "^5.6.3",
     "vitest": "^2.1.3"
   }
 }

packages/registry/news/6461.bugfix

@@ -0,0 +1 @@
+Fix types for add-on's TypeScript. Fix `.tsconfig` for Node.js side. @sneridagh

packages/registry/news/6461.internal

@@ -0,0 +1 @@
+Replace `parcel` with `tsup` for build. @sneridagh

packages/registry/package.json

@@ -32,48 +32,34 @@
     "access": "public"
   },
   "type": "module",
-  "source": "src/index.ts",
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
-  "types": "dist/types.d.ts",
+  "main": "dist/index.js",
   "exports": {
-    "./src/*": "./src/*.cjs",
+    "./package.json": "./package.json",
     "./addon-registry": {
-      "require": "./dist/cjs/addon-registry.cjs",
-      "import": "./dist/esm/addon-registry.js",
-      "types": "./dist/esm/addon-registry.d.ts"
+      "import": "./dist/addon-registry/addon-registry.js",
+      "default": "./dist/addon-registry/addon-registry.cjs"
     },
     "./create-addons-loader": {
-      "require": "./dist/cjs/create-addons-loader.cjs",
-      "import": "./dist/esm/create-addons-loader.js",
-      "types": "./dist/esm/create-addons-loader.d.ts"
+      "import": "./dist/addon-registry/create-addons-loader.js",
+      "default": "./dist/addon-registry/create-addons-loader.cjs"
     },
     "./create-theme-loader": {
-      "require": "./dist/cjs/create-theme-loader.cjs",
-      "import": "./dist/esm/create-theme-loader.js",
-      "types": "./dist/esm/create-theme-loader.d.ts"
+      "import": "./dist/addon-registry/create-theme-loader.js",
+      "default": "./dist/addon-registry/create-theme-loader.cjs"
     },
     "./vite-plugin": {
       "import": "./vite-plugin.js",
       "types": "./vite-plugin.d.ts"
     },
     ".": {
-      "types": "./dist/types.d.ts",
       "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    }
-  },
-  "targets": {
-    "main": {
-      "includeNodeModules": false
+      "default": "./dist/index.cjs"
     }
   },
   "scripts": {
-    "watch": "parcel watch",
-    "build": "parcel build && pnpm build:node:esm && pnpm build:node:cjs",
-    "build:force": "rm -rf dist && parcel build --no-cache && pnpm build:node:esm && pnpm build:node:cjs",
-    "build:node:esm": "tsc --project tsconfig.node.json || true",
-    "build:node:cjs": "tsc --project tsconfig.node.json --module commonjs --moduleResolution Node --outDir dist/cjs || true && make fix-build",
+    "build": "tsup",
+    "build:force": "rm -rf dist && tsup",
+    "check:exports": "attw --pack .",
     "test": "vitest",
     "test:debug": "vitest --inspect-brk --no-file-parallelism registry",
     "dry-release": "release-it --dry-run",
@@ -99,20 +85,19 @@
     "tmp": "0.2.1"
   },
   "devDependencies": {
-    "@parcel/packager-ts": "^2.12.0",
-    "@parcel/transformer-typescript-types": "^2.12.0",
+    "@arethetypeswrong/cli": "^0.16.4",
     "@plone/types": "workspace:*",
     "@types/debug": "^4.1.12",
     "@types/glob": "^8.1.0",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@types/tmp": "^0.2.6",
-    "parcel": "^2.12.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "release-it": "16.2.1",
     "tsconfig": "workspace:*",
+    "tsup": "^8.3.5",
     "typescript": "^5.6.3",
     "vite": "^5.4.8",
     "vitest": "^2.1.3"

packages/registry/src/addon-registry/addon-registry.ts

@@ -97,7 +97,10 @@ function buildDependencyGraph(
       }
 
       addons.forEach((loaderString) => {
-        const [name, extra] = loaderString.split(':');
+        const [name, extra] = loaderString.split(':') as [
+          string,
+          string | undefined,
+        ];
         if (!graph.hasNode(name)) {
           graph.addNode(name, []);
         }
@@ -199,7 +202,7 @@ class AddonRegistry {
 
     this.addonNames = this.resultantMergedAddons.map(
       (s: string) => s.split(':')[0],
-    );
+    ) as Array<string>;
     this.packages = {};
     this.customizations = new Map();
 
@@ -215,14 +218,14 @@ class AddonRegistry {
     this.dependencyGraph = buildDependencyGraph(
       [
         ...(Object.keys(this.coreAddons).map(
-          (key) => this.coreAddons[key].package,
+          (key) => this.coreAddons[key]?.package as string,
         ) || []),
         ...this.resultantMergedAddons,
         ...(process.env.ADDONS ? process.env.ADDONS.split(';') : []),
       ],
       (name) => {
         this.initPublishedPackage(name);
-        return this.packages[name].addons || [];
+        return this.packages[name]?.addons || [];
       },
     );
 
@@ -361,14 +364,15 @@ class AddonRegistry {
   initDevelopmentPackage(name: string) {
     const [baseUrl, pathsConfig] = this.getTSConfigPaths();
     if (pathsConfig && pathsConfig.hasOwnProperty(name)) {
-      const packagePath = `${this.projectRootPath}/${baseUrl}/${pathsConfig[name][0]}`;
+      const packagePath = `${this.projectRootPath}/${baseUrl}/${pathsConfig[name]![0]}`;
       const packageJsonPath = `${getPackageBasePath(packagePath)}/package.json`;
       const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
       const innerAddons: Array<string> = packageJson.addons || [];
       const innerAddonsNormalized = innerAddons.map((s) => s.split(':')[0]);
       if (this.addonNames.includes(name) && innerAddonsNormalized.length > 0) {
         innerAddonsNormalized.forEach((name) => {
-          if (!this.addonNames.includes(name)) this.addonNames.push(name);
+          if (!this.addonNames.includes(name as string))
+            this.addonNames.push(name as string);
         });
       }
       const pkg = {
@@ -415,7 +419,8 @@ class AddonRegistry {
       const innerAddonsNormalized = innerAddons.map((s) => s.split(':')[0]);
       if (this.addonNames.includes(name) && innerAddonsNormalized.length > 0) {
         innerAddonsNormalized.forEach((name) => {
-          if (!this.addonNames.includes(name)) this.addonNames.push(name);
+          if (!this.addonNames.includes(name as string))
+            this.addonNames.push(name as string);
         });
       }
       const packageTSConfig = this.getTSConfigPaths(basePath);
@@ -444,7 +449,7 @@ class AddonRegistry {
 
   // An add-on from the ADDONS env var can only be a published one
   initAddonFromEnvVar(name: string) {
-    const normalizedAddonName = name.split(':')[0];
+    const normalizedAddonName = name.split(':')[0] as string;
     this.initPublishedPackage(normalizedAddonName);
   }
 
@@ -460,14 +465,14 @@ class AddonRegistry {
    */
   initAddonExtenders() {
     this.getAddons().forEach((addon) => {
-      const base = path.dirname(addon.packageJson);
+      const base = path.dirname(addon!.packageJson);
       const razzlePath = path.resolve(`${base}/razzle.extend.js`);
       if (fs.existsSync(razzlePath)) {
-        addon.razzleExtender = razzlePath;
+        addon!.razzleExtender = razzlePath;
       }
       const eslintPath = path.resolve(`${base}/eslint.extend.js`);
       if (fs.existsSync(eslintPath)) {
-        addon.eslintExtender = eslintPath;
+        addon!.eslintExtender = eslintPath;
       }
     });
   }
@@ -483,13 +488,13 @@ class AddonRegistry {
 
   getAddonExtenders() {
     return this.getAddons()
-      .map((o) => o.razzleExtender)
+      .map((o) => o?.razzleExtender)
       .filter((e) => e);
   }
 
   getEslintExtenders() {
     return this.getAddons()
-      .map((o) => o.eslintExtender)
+      .map((o) => o?.eslintExtender)
       .filter((e) => e);
   }
 
@@ -503,11 +508,11 @@ class AddonRegistry {
     };
 
     this.getAddonDependencies().forEach((addon) => {
-      const normalizedAddonName = addon.split(':')[0];
+      const normalizedAddonName = addon.split(':')[0] as string;
       // We have two possible insertion points, variables and main
 
-      const customThemeVariables = `${this.packages[normalizedAddonName].modulePath}/theme/_variables.scss`;
-      const customThemeMain = `${this.packages[normalizedAddonName].modulePath}/theme/_main.scss`;
+      const customThemeVariables = `${this.packages[normalizedAddonName]?.modulePath}/theme/_variables.scss`;
+      const customThemeMain = `${this.packages[normalizedAddonName]?.modulePath}/theme/_main.scss`;
       if (
         fs.existsSync(customThemeVariables) &&
         normalizedAddonName !== this.theme
@@ -555,12 +560,12 @@ class AddonRegistry {
   getResolveAliases() {
     const pairs: [string, string][] = Object.keys(this.packages).map((o) => [
       o,
-      this.packages[o].modulePath,
+      this.packages[o]?.modulePath || '',
     ]);
 
     let aliasesFromTSPaths = {};
     Object.keys(this.packages).forEach((o) => {
-      if (this.packages[o].tsConfigPaths) {
+      if (this.packages[o]?.tsConfigPaths) {
         aliasesFromTSPaths = {
           ...aliasesFromTSPaths,
           ...this.getAliasesFromTSConfig(
@@ -734,8 +739,8 @@ class AddonRegistry {
       aliases = {
         ...aliases,
         ...this.getCustomizationPaths(
-          JSON.parse(fs.readFileSync(addon.packageJson, 'utf-8')),
-          getPackageBasePath(addon.modulePath),
+          JSON.parse(fs.readFileSync(addon!.packageJson, 'utf-8')),
+          getPackageBasePath(addon!.modulePath),
         ),
       };
     });
@@ -805,7 +810,7 @@ class AddonRegistry {
 
         if (!seen.has(dep)) {
           seen.add(dep);
-          queue.push(dep);
+          queue.push(dep as string);
         }
         out += `    "${name}" -> "${dep}"\n`;
       }

packages/registry/src/addon-registry/create-addons-loader.ts

@@ -46,10 +46,11 @@ Instead, change the "addons" setting in your package.json file.
     let extras: string[] | string[][] = []; // TODO: Improve this typing
     const addonConfigLoadInfo = addonConfigString.split(':');
     const pkgName = addonConfigLoadInfo[0];
-    const defaultImport = nameFromPackage(pkgName);
+    const defaultImport = nameFromPackage(pkgName as string);
     if (addonConfigLoadInfo.length > 1) {
       extras = addonConfigLoadInfo[1].split(',');
     }
+    // @ts-expect-error This forEach is a complete mess
     extras = extras.map((name) => [name, `${name}${counter++}`]);
     const line = `import ${defaultImport}${
       extras.length

packages/registry/src/addon-registry/create-theme-loader.ts

@@ -22,7 +22,7 @@ function nameFromPackage(name: string) {
  * Creates a static file with code necessary to load the addons configuration
  *
  */
-function getThemeLoaderCode(name, customThemeAddons = []) {
+function getThemeLoaderCode(name: string, customThemeAddons = []) {
   let buf = `/*
 This file is autogenerated. Don't change it directly.
 Add a ./theme/_${name}.scss in your add-on to load your theme customizations in the current theme.

packages/registry/tsconfig.json

@@ -1,23 +1,30 @@
 {
   "compilerOptions": {
-    "target": "ESNext",
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "module": "commonjs",
-    "allowJs": true,
-    "skipLibCheck": true,
     "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "strictPropertyInitialization": false,
-    "moduleResolution": "Node",
+    "skipLibCheck": true,
+    "target": "es2022",
+    "allowJs": true,
     "resolveJsonModule": true,
+    "moduleDetection": "force",
     "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+
+    "strict": true,
+    "noImplicitOverride": true,
+
+    "lib": ["es2022", "dom", "dom.iterable"],
+    "module": "preserve",
     "noEmit": true,
+
     "jsx": "react-jsx",
+
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "strictPropertyInitialization": false,
+
     "paths": {}
   },
-  "include": ["src/index.ts", "src/**/*.js", "src/**/*.cjs"],
+  "include": ["src/index.ts"],
   "exclude": [
     "node_modules",
     "build",
@@ -26,5 +33,6 @@
     "src/**/*.test.{js,jsx,ts,tsx}",
     "src/**/*.spec.{js,jsx,ts,tsx}",
     "src/**/*.stories.{js,jsx,ts,tsx}"
-  ]
+  ],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }

packages/registry/tsconfig.node.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "composite": true,
     /* Base Options: */
     "esModuleInterop": true,
     "skipLibCheck": true,
@@ -10,11 +11,10 @@
     "isolatedModules": true,
     /* Strictness */
     "strict": true,
-    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
     /* If transpiling with TypeScript: */
-    "moduleResolution": "NodeNext",
-    "module": "NodeNext",
-    "outDir": "dist/esm",
+    "module": "Preserve",
+    "outDir": "dist",
     "sourceMap": true,
     /* If your code doesn't run in the DOM: */
     "lib": ["es2022"],

packages/registry/tsup.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entryPoints: ['src/index.ts', 'src/addon-registry/**/*.ts'],
+  format: ['cjs', 'esm'],
+  dts: true,
+  outDir: 'dist',
+  clean: true,
+});