workflow: use esbuild for dev scripts

scripts/dev.js

@@ -1,44 +1,107 @@
-/*
-Run Rollup in watch mode for development.
+// Using esbuild for faster dev builds.
+// We are still using Rollup for production builds because it generates
+// smaller files w/ better tree-shaking.
 
-To specific the package to watch, simply pass its name and the desired build
-formats to watch (defaults to "global"):
-
-```
-# name supports fuzzy match. will watch all packages with name containing "dom"
-nr dev dom
-
-# specify the format to output
-nr dev core --formats cjs
-
-# Can also drop all __DEV__ blocks with:
-__DEV__=false nr dev
-```
-*/
-
-const execa = require('execa')
-const { fuzzyMatchTarget } = require('./utils')
+// @ts-check
+const { build } = require('esbuild')
+const nodePolyfills = require('@esbuild-plugins/node-modules-polyfill')
+const { resolve, relative } = require('path')
 const args = require('minimist')(process.argv.slice(2))
-const target = args._.length ? fuzzyMatchTarget(args._)[0] : 'vue'
-const formats = args.formats || args.f
-const sourceMap = args.sourcemap || args.s
-const commit = execa.sync('git', ['rev-parse', 'HEAD']).stdout.slice(0, 7)
 
-execa(
-  'rollup',
-  [
-    '-wc',
-    '--environment',
-    [
-      `COMMIT:${commit}`,
-      `TARGET:${target}`,
-      `FORMATS:${formats || 'global'}`,
-      sourceMap ? `SOURCE_MAP:true` : ``
-    ]
-      .filter(Boolean)
-      .join(',')
-  ],
-  {
-    stdio: 'inherit'
-  }
+const target = args._[0] || 'vue'
+const format = args.f || 'global'
+const inlineDeps = args.i || args.inline
+const pkg = require(resolve(__dirname, `../packages/${target}/package.json`))
+
+// resolve output
+const outputFormat = format.startsWith('global')
+  ? 'iife'
+  : format === 'cjs'
+  ? 'cjs'
+  : 'esm'
+
+const postfix = format.endsWith('-runtime')
+  ? `runtime.${format.replace(/-runtime$/, '')}`
+  : format
+
+const outfile = resolve(
+  __dirname,
+  `../packages/${target}/dist/${target}.${postfix}.js`
 )
+const relativeOutfile = relative(process.cwd(), outfile)
+
+// resolve extenrals
+// TODO this logic is largely duplicated from rollup.config.js
+let external = []
+if (!inlineDeps) {
+  // cjs & esm-bundler: external all deps
+  if (format === 'cjs' || format.includes('esm-bundler')) {
+    external = [
+      ...external,
+      ...Object.keys(pkg.dependencies || {}),
+      ...Object.keys(pkg.peerDependencies || {}),
+      // for @vue/compiler-sfc / server-renderer
+      'path',
+      'url',
+      'stream'
+    ]
+  }
+
+  if (target === 'compiler-sfc') {
+    const consolidateDeps = require.resolve('@vue/consolidate/package.json', {
+      paths: [resolve(__dirname, `../packages/${target}/`)]
+    })
+    external = [
+      ...external,
+      ...Object.keys(require(consolidateDeps).devDependencies),
+      'fs',
+      'vm',
+      'crypto',
+      'react-dom/server',
+      'teacup/lib/express',
+      'arc-templates/dist/es5',
+      'then-pug',
+      'then-jade'
+    ]
+  }
+}
+
+build({
+  entryPoints: [resolve(__dirname, `../packages/${target}/src/index.ts`)],
+  outfile,
+  bundle: true,
+  external,
+  sourcemap: true,
+  format: outputFormat,
+  globalName: pkg.buildOptions?.name,
+  platform: format === 'cjs' ? 'node' : 'browser',
+  plugins:
+    format === 'cjs' || pkg.buildOptions?.enableNonBrowserBranches
+      ? [nodePolyfills.default()]
+      : undefined,
+  define: {
+    __COMMIT__: `"dev"`,
+    __VERSION__: `"${pkg.version}"`,
+    __DEV__: `true`,
+    __TEST__: `false`,
+    __BROWSER__: String(
+      format !== 'cjs' && !pkg.buildOptions?.enableNonBrowserBranches
+    ),
+    __GLOBAL__: String(format === 'global'),
+    __ESM_BUNDLER__: String(format.includes('esm-bundler')),
+    __ESM_BROWSER__: String(format.includes('esm-browser')),
+    __NODE_JS__: String(format === 'cjs'),
+    __SSR__: String(format === 'cjs' || format.includes('esm-bundler')),
+    __COMPAT__: `false`,
+    __FEATURE_SUSPENSE__: `true`,
+    __FEATURE_OPTIONS_API__: `true`,
+    __FEATURE_PROD_DEVTOOLS__: `false`
+  },
+  watch: {
+    onRebuild(error) {
+      if (!error) console.log(`rebuilt: ${relativeOutfile}`)
+    }
+  }
+}).then(() => {
+  console.log(`watching: ${relativeOutfile}`)
+})