build: 出力されたmjsの内部参照で拡張子を指定するようにアップデート (#1178)

* build: 出力されたmjsの内部参照で拡張子を指定するようにアップデート

* ci: extensionReplaceをbuildのworkflowへ追加

* test: outputExtensionReplaceのテストコードを追加

* refactor: getMjsFilesの削除

* chore: main関数内でのreplaceImportsInFile実行方法を修正

* refactor: try/catch部分をPromise.allSettledを利用した形に置き換え

* feat: jscodeshiftを利用した置き換えに修正

* chore: 実行コマンドの軽微な修正

* feat: ターゲットとなったファイルと処理を出力するように修正

* refactor: checkFileExistsのタイミングを変更

* test: test.eachを利用したテスト方法へ変更

* chore: lintのルールをアップデート

* chore: lockファイルの修正

---------

Co-authored-by: re-taro <[email protected]>

.eslintrc.json

@@ -17,7 +17,8 @@
   },
   "env": {
     "browser": true,
-    "node": true
+    "node": true,
+    "jest": true
   },
   "overrides": [
     {

.github/workflows/build.yml

@@ -28,3 +28,4 @@ jobs:
           yarn lerna run --scope @openameba/spindle-hooks build
           yarn lerna run --scope @openameba/spindle-ui storybook:build
           yarn lerna run --scope @openameba/spindle-ui build
+          yarn build:extensionReplace

bin/outputExtensionReplace.js

@@ -0,0 +1,67 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { access } = require('fs').promises;
+const { dirname, join, resolve } = require('path');
+
+async function checkFileExists(filePath) {
+  try {
+    await access(filePath);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+const shouldReplaceExtension = (value) =>
+  (value.startsWith('./') || value.startsWith('../')) &&
+  !value.endsWith('.mjs');
+
+/**
+ *
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+module.exports = async function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  await Promise.all(
+    [
+      j.ImportDeclaration,
+      j.ExportNamedDeclaration,
+      j.ExportAllDeclaration,
+      j.ExportDefaultDeclaration,
+    ]
+      .flatMap((declaration) => root.find(declaration).nodes())
+      .flatMap(async (node) => {
+        const source = node.source;
+        if (!source) {
+          return;
+        }
+        const value = source.value;
+
+        if (shouldReplaceExtension(value)) {
+          const importPath = resolve(dirname(file.path), value);
+          const mjsPath = `${importPath}.mjs`;
+          const indexPath = join(importPath, 'index.mjs');
+
+          if (await checkFileExists(mjsPath)) {
+            node.source.value = `${value}.mjs`;
+          } else if (await checkFileExists(indexPath)) {
+            node.source.value = `${value}/index.mjs`;
+          } else {
+            console.error(
+              `missing ${mjsPath} and ${indexPath} for ${file.path}`,
+            );
+            return;
+          }
+          console.info(
+            `change ${value} to ${node.source.value} in ${file.path}`,
+          );
+        }
+      }),
+  );
+
+  return root.toSource();
+};
+
+module.exports.checkFileExists = checkFileExists;
+module.exports.shouldReplaceExtension = shouldReplaceExtension;

bin/outputExtensionReplace.test.js

@@ -0,0 +1,35 @@
+const {
+  checkFileExists,
+  shouldReplaceExtension,
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+} = require('./outputExtensionReplace');
+
+describe('checkFileExists', () => {
+  it('should return true if the file exists', async () => {
+    const result = await checkFileExists(__filename);
+    expect(result).toBe(true);
+  });
+
+  it('should return false if the file does not exist', async () => {
+    const filePath = 'non_existent_file.dummy';
+    const result = await checkFileExists(filePath);
+    expect(result).toBe(false);
+  });
+});
+
+describe('shouldReplaceExtension', () => {
+  test.each([
+    ['./foo', true],
+    ['../foo', true],
+    ['./foo/bar', true],
+    ['../foo/bar', true],
+    ['./foo.mjs', false],
+    ['../foo.mjs', false],
+    ['./foo/bar.mjs', false],
+    ['../foo/bar.mjs', false],
+    ['react', false],
+  ])('should return %p if the value is %p', (value, expected) => {
+    const result = shouldReplaceExtension(value);
+    expect(result).toBe(expected);
+  });
+});

package.json

@@ -2,8 +2,9 @@
   "name": "spindle",
   "private": true,
   "scripts": {
-    "test": "run-p lint format test:packages",
+    "test": "run-p lint format test:*",
     "test:packages": "lerna run test",
+    "test:bin": "jest bin",
     "lint": "run-p lint:*",
     "lint:script": "eslint --cache 'packages/**/src/**/*.{js,ts,tsx}'",
     "lint:yaml": "yamllint .github/workflows/*.yml",
@@ -16,7 +17,9 @@
     "fix:format": "prettier --write '**/*.{js,ts,tsx}'",
     "fix:text": "textlint --fix .",
     "bootstrap": "lerna bootstrap",
-    "build": "lerna run build",
+    "build": "run-s build:*",
+    "build:package": "lerna run build",
+    "build:extensionReplace": "jscodeshift -t ./bin/outputExtensionReplace.js packages/*/dist/** --extensions=mjs",
     "prepare": "is-ci || husky install"
   },
   "devDependencies": {
@@ -31,6 +34,8 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^9.1.5",
     "is-ci": "^3.0.0",
+    "jest": "^29.7.0",
+    "jscodeshift": "^17.1.1",
     "lerna": "^8.0.0",
     "npm-run-all2": "^6.0.0",
     "prettier": "3.3.3",