Add .js file extension to all in-project imports

.attw.json

@@ -0,0 +1,6 @@
+{
+  "ignoreRules": [
+    "false-esm",
+    "cjs-resolves-to-esm"
+  ]
+}

.changeset/lemon-fans-shake.md

@@ -0,0 +1,5 @@
+---
+'@apollo/client': minor
+---
+
+Add .js file extensions to imports in src and dist/**/*.d.ts

.eslintrc

@@ -1,6 +1,6 @@
 {
   "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint"],
+  "plugins": ["@typescript-eslint", "import"],
   "env": {
     "browser": true,
     "node": true,
@@ -14,12 +14,13 @@
       "files": ["**/*.ts", "**/*.tsx"],
       "excludedFiles": ["**/__tests__/**/*.*"],
       "rules": {
-        "@typescript-eslint/consistent-type-imports": ["error", { 
+        "@typescript-eslint/consistent-type-imports": ["error", {
           "prefer": "type-imports",
           "disallowTypeAnnotations": false,
           "fixStyle": "separate-type-imports"
         }],
-        "@typescript-eslint/no-import-type-side-effects": "error"
+        "@typescript-eslint/no-import-type-side-effects": "error",
+        "import/extensions": ["error", "always", { "ignorePackages": true } ]
       }
     },
     {

.github/workflows/arethetypeswrong.yml

@@ -0,0 +1,29 @@
+name: AreTheTypesWrong
+on:
+  pull_request:
+    branches:
+      - main
+      - release-*
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  build:
+    name: Build library
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v3
+      - name: Setup Node.js 18.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+      - name: Install dependencies (with cache)
+        uses: bahmutov/npm-install@v1
+
+      - name: Run build
+        run: npm run build && cd dist; npm pack
+
+      - name: Run AreTheTypesWrong
+        id: attw
+        run: ./node_modules/.bin/attw ./dist/*.tgz --format ascii > $GITHUB_STEP_SUMMARY

.gitignore

@@ -70,3 +70,6 @@ junit.xml
 reports
 
 esbuild-why-*.html
+
+.yalc
+yalc.lock

config/compare-build-output-to.sh

@@ -0,0 +1,26 @@
+upstream=$1
+comparison=/tmp/comparison_checkout
+root=$(git rev-parse --show-toplevel)
+
+
+patterndiff(){
+  cd dist
+  find -name "$1" -exec bash -c "echo {}; diff <(cat '$comparison/dist/'{} | tr \"'\" '\"') <(cat {} | tr \"'\" '\"' ) -w" \; > ../diff."$1".diff
+  cd ..
+}
+
+[ -z "$upstream" ] && { echo "need upstream argument"; exit 1; }
+
+git worktree add --force --detach --checkout "$comparison" "$upstream"
+
+cd "$comparison"
+yarn
+yarn build
+cd "$root"
+yarn build
+
+patterndiff "*.js"
+patterndiff "*.cjs"
+patterndiff "*.d.ts"
+
+diff -r "$comparison/dist" "dist" -x "*.map" -x "*.native.*" -x "*.js" -x "*.cjs" -x "*.d.ts" -w > diff.rest.diff

config/entryPoints.js

@@ -88,6 +88,9 @@ exports.check = function (id, parentId) {
 function partsAfterDist(id) {
   const parts = id.split(path.sep);
   const distIndex = parts.lastIndexOf("dist");
+  if (/^index.jsx?$/.test(parts[parts.length - 1])) {
+    parts.pop();
+  }
   if (distIndex >= 0) {
     return parts.slice(distIndex + 1);
   }

config/jest.config.js

@@ -20,6 +20,7 @@ const defaults = {
       },
     ],
   },
+  resolver: "ts-jest-resolver",
 };
 
 const ignoreTSFiles = '.ts$';

config/postprocessDist.ts

@@ -1,7 +1,4 @@
-import * as fs from "fs";
-import * as path from "path";
-import resolve from "resolve";
-import { distDir, eachFile, reparse, reprint } from './helpers';
+import { distDir, eachFile } from './helpers';
 
 // The primary goal of the 'npm run resolve' script is to make ECMAScript
 // modules exposed by Apollo Client easier to consume natively in web browsers,
@@ -16,123 +13,16 @@ import { distDir, eachFile, reparse, reprint } from './helpers';
 // module first.
 
 eachFile(distDir, (file, relPath) => new Promise((resolve, reject) => {
-  fs.readFile(file, "utf8", (error, source) => {
-    if (error) return reject(error);
+  resolve(file);
 
-    const tr = new Transformer;
-    const output = tr.transform(source, file);
+    // all the transformer did here was to add `.js` or `/index.js` to the end
+    // of relative imports (and the one external import 'ts-invariant/process')
+    // and track those imports for the `__DEV__` check below
 
-    if (
-      /\b__DEV__\b/.test(source) &&
-      // Ignore modules that reside within @apollo/client/utilities/globals.
-      relPath.split(path.sep, 2).join("/") !== "utilities/globals"
-    ) {
-      let importsUtilitiesGlobals = false;
-
-      tr.absolutePaths.forEach(absPath => {
-        const distRelativePath =
-          path.relative(distDir, absPath).split(path.sep).join("/");
-        if (distRelativePath === "utilities/globals/index.js") {
-          importsUtilitiesGlobals = true;
-        }
-      });
-
-      if (!importsUtilitiesGlobals) {
-        reject(new Error(`Module ${
-          relPath
-        } uses __DEV__ but does not import @apollo/client/utilities/globals`));
-      }
-    }
-
-    if (source === output) {
-      resolve(file);
-    } else {
-      fs.writeFile(file, output, "utf8", error => {
-        error ? reject(error) : resolve(file);
-      });
-    }
-  });
+    // since we have all the file extensions in the src directory now, we can
+    // skip that part
+    // and the other PR will remove the __DEV__ check, so this whole file can
+    // soon be removed
 }));
 
-import * as recast from "recast";
-const n = recast.types.namedTypes;
-type Node = recast.types.namedTypes.Node;
-
-class Transformer {
-  absolutePaths = new Set<string>();
-
-  transform(code: string, file: string) {
-    const ast = reparse(code);
-    const transformer = this;
-
-    recast.visit(ast, {
-      visitImportDeclaration(path) {
-        this.traverse(path);
-        transformer.normalizeSourceString(file, path.node.source);
-      },
-
-      visitImportExpression(path) {
-        this.traverse(path);
-        transformer.normalizeSourceString(file, path.node.source);
-      },
-
-      visitExportAllDeclaration(path) {
-        this.traverse(path);
-        transformer.normalizeSourceString(file, path.node.source);
-      },
-
-      visitExportNamedDeclaration(path) {
-        this.traverse(path);
-        transformer.normalizeSourceString(file, path.node.source);
-      },
-    });
-
-    return reprint(ast);
-  }
-
-  isRelative(id: string) {
-    return id.startsWith("./") || id.startsWith("../");
-  }
-
-  normalizeSourceString(file: string, source?: Node | null) {
-    if (source && n.StringLiteral.check(source)) {
-      // We mostly only worry about normalizing _relative_ module identifiers,
-      // which start with a ./ or ../ and refer to other modules within the
-      // @apollo/client package, but we also manually normalize one non-relative
-      // identifier, ts-invariant/process, to prevent webpack 5 errors
-      // containing the phrase "failed to resolve only because it was resolved
-      // as fully specified," referring to webpack's resolve.fullySpecified
-      // option, which is apparently now true by default when the enclosing
-      // package's package.json file has "type": "module" (which became true for
-      // Apollo Client in v3.5).
-      if (source.value.split("/", 2).join("/") === "ts-invariant/process") {
-        source.value = "ts-invariant/process/index.js";
-      } else if (this.isRelative(source.value)) {
-        try {
-          source.value = this.normalizeId(source.value, file);
-        } catch (error) {
-          console.error(`Failed to resolve ${source.value} in ${file} with error ${error}`);
-          process.exit(1);
-        }
-      }
-    }
-  }
 
-  normalizeId(id: string, file: string) {
-    const basedir = path.dirname(file);
-    const absPath = resolve.sync(id, {
-      basedir,
-      extensions: [".mjs", ".js"],
-      packageFilter(pkg) {
-        return pkg.module ? {
-          ...pkg,
-          main: pkg.module,
-        } : pkg;
-      },
-    });
-    this.absolutePaths.add(absPath);
-    const relPath = path.relative(basedir, absPath);
-    const relId = relPath.split(path.sep).join('/');
-    return this.isRelative(relId) ? relId : "./" + relId;
-  }
-}

config/processInvariants.ts

@@ -217,7 +217,7 @@ function transform(code: string, relativeFilePath: string) {
           const normalized = posix.normalize(
             posix.join(posix.dirname(relativeFilePath), importedModuleId)
           );
-          if (normalized === 'utilities/globals') {
+          if (normalized === 'utilities/globals/index.js') {
             foundExistingImportDecl = true;
             if (
               node.specifiers?.some((s) =>
@@ -242,7 +242,7 @@ function transform(code: string, relativeFilePath: string) {
       throw new Error(
         `Missing import from "${posix.relative(
           posix.dirname(relativeFilePath),
-          'utilities/globals'
+          'utilities/globals/index.js'
         )} in ${relativeFilePath}`
       );
     }

config/rollup.config.js

@@ -1,4 +1,4 @@
-import path from 'path';
+import path, { resolve, dirname } from 'path';
 import { promises as fs } from "fs";
 
 import nodeResolve from '@rollup/plugin-node-resolve';
@@ -109,9 +109,12 @@ function prepareBundle({
 
   return {
     input: inputFile,
+    /*
     external(id, parentId) {
+      console.log({id, parentId})
       return isExternal(id, parentId, true);
     },
+    */
     output: {
       file: outputFile,
       format: 'cjs',
@@ -120,6 +123,29 @@ function prepareBundle({
       externalLiveBindings: false,
     },
     plugins: [
+      {
+        name: 'externalize-dependency',
+        resolveId(id, parentId) {
+          if (!parentId) {
+            return null;
+          }
+          function removeIndex(filename) {
+            if (filename.endsWith(`${path.sep}index.js`)) {
+              return filename.slice(0, -`${path.sep}index.js`.length)
+            }
+            return filename
+          }
+
+          const external = isExternal(id, parentId, true)
+          if (external) {
+            if (id.startsWith(".")) {
+              return { id: removeIndex(resolve(dirname(parentId), id)), external: true };
+            }
+            return { id: removeIndex(id), external: true };
+          }
+          return null;
+        }
+      },
       extensions ? nodeResolve({ extensions }) : nodeResolve(),
       {
         name: "copy *.cjs to *.cjs.native.js",
@@ -137,7 +163,8 @@ function prepareBundle({
 
 export default [
   ...entryPoints.map(prepareBundle),
-  // Convert the ESM entry point to a single CJS bundle.
+  //.filter(x => x.input.includes("utilities")),
+  // Convert the ESM entry point to a single CJS bundle.#
   prepareCJS(
     './dist/index.js',
     './dist/apollo-client.cjs',