refactor: using esm (#84)

Author: sorrycc

.changeset/cold-students-share.md

@@ -0,0 +1,5 @@
+---
+'@umijs/tnf': patch
+---
+
+refactor: using esm

.commitlintrc.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   extends: ['@commitlint/config-conventional'],
   rules: {
     'type-enum': [2, 'always', [

.fatherrc.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from 'father';
 
 export default defineConfig({
-  cjs: {
+  esm: {
     transformer: 'babel',
     input: 'src',
     output: 'dist',

.prettierrc.js

@@ -1,15 +1,9 @@
-module.exports = {
+export default {
   printWidth: 80,
   singleQuote: true,
   trailingComma: 'all',
   proseWrap: 'never',
   plugins: ['@trivago/prettier-plugin-sort-imports'],
-  importOrder: [
-    '^react',
-    '^@umijs/tnf/?',
-    '^@?\\w',
-    '^@/',
-    '^[./]'
-  ],
+  importOrder: ['^react', '^@umijs/tnf/?', '^@?\\w', '^@/', '^[./]'],
   importOrderSortSpecifiers: true,
 };

bin/tnf.js

@@ -17,4 +17,4 @@ if (process.env.DEBUG_CONSOLE) {
   });
 }
 
-require('../dist/cli');
+import('../dist/cli.js').catch(console.error);

compiled/gradient-string/index.d.ts

@@ -27,6 +27,7 @@
     "tsc": "tsc --noEmit",
     "sync:docs": "tsx scripts/syncDocs.ts"
   },
+  "type": "module",
   "bin": {
     "tnf": "bin/tnf.js"
   },

compiled/gradient-string/index.js

@@ -1,6 +1,10 @@
 import { getPackages } from '@manypkg/get-packages';
+import { fileURLToPath } from 'url';
 import 'zx/globals';
 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
 const root = path.join(__dirname, '../');
 const changesetConfig = path.join(__dirname, '../.changeset/config.json');
 

package.json

@@ -1,10 +1,10 @@
 import 'zx/globals';
 
 const files = {
-  'gradient-string': {
-    file: './node_modules/gradient-string/dist/index.js',
-    dts: './node_modules/gradient-string/dist/index.d.ts',
-  },
+  // 'gradient-string': {
+  //   file: './node_modules/gradient-string/dist/index.js',
+  //   dts: './node_modules/gradient-string/dist/index.d.ts',
+  // },
 };
 
 const bundleWithMako = async (name: string) => {

scripts/changeset.ts

@@ -1,8 +1,8 @@
-import * as buildTools from './tools_build';
-import * as configTools from './tools_config';
-import * as doctorTools from './tools_doctor';
-import * as generateTools from './tools_generate';
-import * as syncTools from './tools_sync';
+import * as buildTools from './tools_build.js';
+import * as configTools from './tools_config.js';
+import * as doctorTools from './tools_doctor.js';
+import * as generateTools from './tools_generate.js';
+import * as syncTools from './tools_sync.js';
 
 const tools = {
   ...generateTools,

scripts/compile.ts

@@ -1,14 +1,14 @@
 import chokidar from 'chokidar';
 import fs from 'fs';
 import path from 'pathe';
-import { BundlerType, createBundler } from './bundler/bundler';
-import { doctor } from './doctor/doctor';
-import * as logger from './fishkit/logger';
-import { buildHtml } from './html';
-import { PluginHookType } from './plugin/plugin_manager';
-import { sync } from './sync/sync';
-import { type Context } from './types';
-import { Watcher } from './watch/watcher';
+import { BundlerType, createBundler } from './bundler/bundler.js';
+import { doctor } from './doctor/doctor.js';
+import * as logger from './fishkit/logger.js';
+import { buildHtml } from './html.js';
+import { PluginHookType } from './plugin/plugin_manager.js';
+import { sync } from './sync/sync.js';
+import { type Context } from './types/index.js';
+import { Watcher } from './watch/watcher.js';
 
 export async function build({
   context,

src/ai/ai.ts

@@ -1,6 +1,6 @@
 import express from 'express';
-import type { Config } from '../config/types';
-import type { Mode } from '../types';
+import type { Config } from '../config/types.js';
+import type { Mode } from '../types/index.js';
 
 interface BundlerOpts {
   bundler: BundlerType;

src/build.ts

@@ -3,8 +3,8 @@ import assert from 'assert';
 import proxy from 'express-http-proxy';
 import { getPort } from 'get-port-please';
 import { createProxyMiddleware } from 'http-proxy-middleware';
-import { Mode } from '../types';
-import type { Bundler } from './bundler';
+import { Mode } from '../types/index.js';
+import type { Bundler } from './bundler.js';
 
 let _hmrPort: number;
 let _host: string;

src/bundler/bundler.ts

@@ -1,4 +1,4 @@
-import type { Bundler } from './bundler';
+import type { Bundler } from './bundler.js';
 
 export default {
   build: async (_opts) => {

src/bundler/bundler_mako.ts

@@ -1,19 +1,23 @@
 import assert from 'assert';
 import fs from 'fs';
+import { instagram } from 'gradient-string';
 import path from 'pathe';
 import yargsParser from 'yargs-parser';
-import { instagram } from '../compiled/gradient-string';
-import { loadConfig } from './config/config';
-import { ConfigSchema } from './config/types';
-import { FRAMEWORK_NAME, MIN_NODE_VERSION } from './constants';
-import { debug, error, info, warn } from './fishkit/logger';
-import * as logger from './fishkit/logger';
-import { checkVersion, setNoDeprecation, setNodeTitle } from './fishkit/node';
-import { mock } from './funplugins/mock/mock';
-import { reactCompiler } from './funplugins/react_compiler/react_compiler';
-import { reactScan } from './funplugins/react_scan/react_scan';
-import { PluginHookType, PluginManager } from './plugin/plugin_manager';
-import { type Context, Mode } from './types';
+import { loadConfig } from './config/config.js';
+import { ConfigSchema } from './config/types.js';
+import { FRAMEWORK_NAME, MIN_NODE_VERSION } from './constants.js';
+import { debug, error, info, warn } from './fishkit/logger.js';
+import * as logger from './fishkit/logger.js';
+import {
+  checkVersion,
+  setNoDeprecation,
+  setNodeTitle,
+} from './fishkit/node.js';
+import { mock } from './funplugins/mock/mock.js';
+import { reactCompiler } from './funplugins/react_compiler/react_compiler.js';
+import { reactScan } from './funplugins/react_scan/react_scan.js';
+import { PluginHookType, PluginManager } from './plugin/plugin_manager.js';
+import { type Context, Mode } from './types/index.js';
 
 async function buildContext(cwd: string): Promise<Context> {
   const argv = yargsParser(process.argv.slice(2));

src/bundler/bundler_webpack.ts

@@ -7,11 +7,12 @@ import { updateConfig } from 'c12/update';
 import fs from 'fs';
 import path from 'pathe';
 import pc from 'picocolors';
-import { CONFIG_FILE } from '../constants';
-import * as logger from '../fishkit/logger';
-import type { Context, Pkg } from '../types';
-import type { Config } from './types';
-import { ConfigSchema } from './types';
+import { fileURLToPath } from 'url';
+import { CONFIG_FILE } from '../constants.js';
+import * as logger from '../fishkit/logger.js';
+import type { Context, Pkg } from '../types/index.js';
+import type { Config } from './types.js';
+import { ConfigSchema } from './types.js';
 
 interface ConfigOpts {
   cwd: string;
@@ -20,6 +21,10 @@ interface ConfigOpts {
   overrides?: Partial<Config>;
 }
 
+async function resolveModule(id: string) {
+  return fileURLToPath(await import.meta.resolve(id));
+}
+
 export async function loadConfig(opts: ConfigOpts): Promise<Config> {
   const { config: rawConfig } = await loadC12Config(createLoadConfigOpts(opts));
   const result = ConfigSchema.safeParse(rawConfig);
@@ -28,17 +33,24 @@ export async function loadConfig(opts: ConfigOpts): Promise<Config> {
   }
   const config = result.data;
   const reactPath =
-    resolveUserLib('react', opts.pkg || {}, opts.cwd) || resolveLib('react');
+    resolveUserLib('react', opts.pkg || {}, opts.cwd) ||
+    (await resolveLib('react'));
   const reactDomPath =
     resolveUserLib('react-dom', opts.pkg || {}, opts.cwd) ||
-    resolveLib('react-dom');
+    (await resolveLib('react-dom'));
   config.alias = [
     ['@', path.join(opts.cwd, 'src')],
     ['react', reactPath],
     ['react-dom', reactDomPath],
-    ['@tanstack/react-router', resolveLib('@tanstack/react-router')],
-    ['@tanstack/router-devtools', resolveLib('@tanstack/router-devtools')],
-    ['click-to-react-component', require.resolve('click-to-react-component')],
+    ['@tanstack/react-router', await resolveLib('@tanstack/react-router')],
+    [
+      '@tanstack/router-devtools',
+      await resolveLib('@tanstack/router-devtools'),
+    ],
+    [
+      'click-to-react-component',
+      await resolveModule('click-to-react-component'),
+    ],
     ...(config.alias || []),
   ];
   config.mountElementId = config.mountElementId || 'root';
@@ -58,8 +70,8 @@ function resolveUserLib(lib: string, pkg: Record<string, any>, cwd: string) {
   return null;
 }
 
-function resolveLib(lib: string) {
-  return path.dirname(require.resolve(`${lib}/package.json`));
+async function resolveLib(lib: string) {
+  return path.dirname(await resolveModule(`${lib}/package.json`));
 }
 
 export function watchConfig(opts: ConfigOpts) {

src/cli.ts

@@ -1,5 +1,5 @@
 import { z } from 'zod';
-import { PluginSchema } from '../plugin/types';
+import { PluginSchema } from '../plugin/types.js';
 
 // why no use { configSchema } from '@tanstack/router-generator';
 // configSchema has default

src/config/config.ts

@@ -1,10 +1,10 @@
-import { build } from './build';
-import { createBundler } from './bundler/bundler';
-import { BundlerType } from './bundler/bundler';
-import { createServer } from './fishkit/server';
-import { buildHtml } from './html';
-import { PluginHookType } from './plugin/plugin_manager';
-import type { Context } from './types';
+import { build } from './build.js';
+import { createBundler } from './bundler/bundler.js';
+import { BundlerType } from './bundler/bundler.js';
+import { createServer } from './fishkit/server.js';
+import { buildHtml } from './html.js';
+import { PluginHookType } from './plugin/plugin_manager.js';
+import type { Context } from './types/index.js';
 
 export async function dev({ context }: { context: Context }) {
   const devServer = context.config?.devServer || {};

src/config/types.ts

@@ -1,6 +1,6 @@
 import path from 'pathe';
 import { expect, test } from 'vitest';
-import { buildSrc } from './build_src';
+import { buildSrc } from './build_src.js';
 
 test('buildSrc', async () => {
   const entry = path.join(__dirname, 'fixtures/build_src/index.tsx');

src/dev.ts

@@ -1,10 +1,10 @@
 import assert from 'assert';
-import { CachedInputFileSystem, ResolverFactory } from 'enhanced-resolve';
+import enhancedResolve from 'enhanced-resolve';
 import { init, parse } from 'es-module-lexer';
 import esbuild from 'esbuild';
 import fs from 'fs';
 import path from 'pathe';
-import * as logger from '../fishkit/logger';
+import * as logger from '../fishkit/logger.js';
 
 interface BuildSrcOptions {
   entry: string;
@@ -21,6 +21,7 @@ export async function buildSrc(opts: BuildSrcOptions) {
   const queue = [];
   queue.push(entry);
   await init;
+  const { CachedInputFileSystem, ResolverFactory } = enhancedResolve;
   const resolver = ResolverFactory.createResolver({
     fileSystem: new CachedInputFileSystem(fs, 4000),
     extensions: ['.tsx', '.ts', '.jsx', '.js', '.json'],

src/doctor/build_src.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from 'vitest';
-import { checkUnsupportedPackages } from './check_dependency';
+import { checkUnsupportedPackages } from './check_dependency.js';
 
 test('checkUnsupportedPackages() - should throw error for monaco-editor', () => {
   expect(() =>