workflow: use esbuild for dev scripts

Author: yyx990803

.github/contributing.md

@@ -123,16 +123,19 @@ The `dev` script bundles a target package (default: `vue`) in a specified format
 ```bash
 $ nr dev
 
-> rollup v1.19.4
-> bundles packages/vue/src/index.ts → packages/vue/dist/vue.global.js...
+> watching: packages/vue/dist/vue.global.js
 ```
 
-- The `dev` script also supports fuzzy match for the target package, but will only match the first package matched.
+- **Important:** output of the `dev` script is for development and debugging only. While it has the same runtime behavior, the generated code should never be published to npm.
+
+- The `dev` script does not support fuzzy match - you must specify the full package name, e.g. `nr dev runtime-core`.
 
 - The `dev` script supports specifying build format via the `-f` flag just like the `build` script.
 
 - The `dev` script also supports the `-s` flag for generating source maps, but it will make rebuilds slower.
 
+- The `dev` script supports the `-i` flag for inlining all deps. This is useful when debugging `esm-bundler` builds which externalizes deps by default.
+
 ### `nr dev-compiler`
 
 The `dev-compiler` script builds, watches and serves the [Template Explorer](https://github.com/vuejs/vue-next/tree/master/packages/template-explorer) at `http://localhost:5000`. This is extremely useful when working on the compiler.

package.json

@@ -18,7 +18,7 @@
     "release": "node scripts/release.js",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
     "dev-compiler": "run-p \"dev template-explorer\" serve",
-    "dev-sfc": "run-p \"dev compiler-sfc -- -f esm-browser\" \"dev runtime-core -- -f esm-bundler\" \"dev runtime-dom -- -f esm-bundler\" serve-sfc-playground",
+    "dev-sfc": "run-p \"dev compiler-sfc -- -f esm-browser\" \"dev vue -- -if esm-bundler-runtime \" serve-sfc-playground",
     "serve-sfc-playground": "vite packages/sfc-playground --host",
     "serve": "serve",
     "open": "open http://localhost:5000/packages/template-explorer/local.html",
@@ -48,6 +48,7 @@
   },
   "devDependencies": {
     "@babel/types": "^7.12.0",
+    "@esbuild-plugins/node-modules-polyfill": "^0.1.4",
     "@microsoft/api-extractor": "^7.15.1",
     "@rollup/plugin-commonjs": "^18.0.0",
     "@rollup/plugin-json": "^4.0.0",
@@ -66,6 +67,7 @@
     "conventional-changelog-cli": "^2.0.31",
     "csstype": "^3.0.3",
     "enquirer": "^2.3.2",
+    "esbuild": "^0.14.11",
     "eslint": "^7.7.0",
     "execa": "^4.0.2",
     "fs-extra": "^9.0.1",
@@ -86,11 +88,11 @@
     "semver": "^7.3.2",
     "serve": "^12.0.0",
     "todomvc-app-css": "^2.3.0",
-    "tslib": "^2.3.1",
     "ts-jest": "^27.0.5",
+    "tslib": "^2.3.1",
     "typescript": "^4.2.2",
-    "vue": "workspace:*",
     "vite": "^2.7.1",
+    "vue": "workspace:*",
     "yorkie": "^2.0.0"
   }
 }

packages/template-explorer/src/index.ts

@@ -62,7 +62,7 @@ window.init = () => {
   if (persistedState) {
     // functions are not persistable, so delete it in case we sometimes need
     // to debug with custom nodeTransforms
-    delete persistedState.options.nodeTransforms
+    delete persistedState.options?.nodeTransforms
     ssrMode.value = persistedState.ssr
     Object.assign(compilerOptions, persistedState.options)
   }
@@ -142,7 +142,7 @@ window.init = () => {
   }
 
   const editor = monaco.editor.create(document.getElementById('source')!, {
-    value: persistedState?.src || `<div>Hello World!</div>`,
+    value: persistedState?.src || `<div>Hello World</div>`,
     language: 'html',
     ...sharedEditorOptions,
     wordWrap: 'bounded'