Vite

apps/repl/babel.config.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+let config = require('./node_modules/.embroider/rewritten-app/_babel_config_');
+
+let macrosPlugin = config.plugins.find(
+  (p) => Array.isArray(p) && p[0].endsWith('macros-babel-plugin.js')
+);
+
+if (macrosPlugin?.[1].importSyncImplementation !== 'cjs') {
+  throw new Error('expected to find macrosPlugin');
+}
+
+macrosPlugin[1].importSyncImplementation = 'eager';
+
+console.log('config', config);
+
+module.exports = config;

apps/repl/ember-cli-build.js

@@ -42,12 +42,12 @@ module.exports = async function (defaults) {
   //  - @glimmer/syntax
   app.import('vendor/ember/ember-template-compiler.js');
 
-  const { Webpack } = require('@embroider/webpack');
-  const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+  // const { Webpack } = require('@embroider/webpack');
+  // const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 
   const { EsbuildPlugin } = require('esbuild-loader');
 
-  return require('@embroider/compat').compatBuild(app, Webpack, {
+  return require('@embroider/compat').compatBuild(app, undefined, {
     extraPublicTrees: [
       require('@nullvoxpopuli/limber-codemirror/broccoli-funnel')(),
       // Tailwind
@@ -102,54 +102,57 @@ module.exports = async function (defaults) {
     implicitModulesStrategy: 'packageNames',
     // required due to this app being a dynamic component generator
     allowUnsafeDynamicComponents: true,
+    amdCompatibility: {
+      es: [],
+    },
     packagerOptions: {
-      webpackConfig: {
-        // embroider 1.8.3 might have an issues with gts + sourcemaps?
-        devtool: false,
-        // devtool: 'source-map',
-        // devtool: isProduction ? 'source-map' : false,
-        experiments: {
-          // Causes app to not boot
-          // lazyCompilation: true,
-        },
-        // output: {
-        //   Causes app to not boot
-        //   chunkFormat: 'module',
-        // },
-        resolve: {
-          alias: {
-            path: 'path-browserify',
-          },
-          fallback: {
-            path: require.resolve('path-browserify'),
-          },
-        },
-        optimization: {
-          minimizer: [
-            new EsbuildPlugin({
-              legalComments: 'none',
-              sourcemap: true,
-              minify: isProduction,
-              css: true,
-              exclude: [/codemirror/],
-            }),
-          ],
-        },
-        node: {
-          global: false,
-          __filename: true,
-          __dirname: true,
-        },
-        plugins: isProduction
-          ? [
-              new BundleAnalyzerPlugin({
-                analyzerMode: 'static',
-                openAnalyzer: false,
-                reportFilename: 'bundle.html',
-              }),
-            ]
-          : [],
-      },
+      // webpackConfig: {
+      //   // embroider 1.8.3 might have an issues with gts + sourcemaps?
+      //   devtool: false,
+      //   // devtool: 'source-map',
+      //   // devtool: isProduction ? 'source-map' : false,
+      //   experiments: {
+      //     // Causes app to not boot
+      //     // lazyCompilation: true,
+      //   },
+      //   // output: {
+      //   //   Causes app to not boot
+      //   //   chunkFormat: 'module',
+      //   // },
+      //   resolve: {
+      //     alias: {
+      //       path: 'path-browserify',
+      //     },
+      //     fallback: {
+      //       path: require.resolve('path-browserify'),
+      //     },
+      //   },
+      //   optimization: {
+      //     minimizer: [
+      //       new EsbuildPlugin({
+      //         legalComments: 'none',
+      //         sourcemap: true,
+      //         minify: isProduction,
+      //         css: true,
+      //         exclude: [/codemirror/],
+      //       }),
+      //     ],
+      //   },
+      //   node: {
+      //     global: false,
+      //     __filename: true,
+      //     __dirname: true,
+      //   },
+      //   plugins: isProduction
+      //     ? [
+      //         new BundleAnalyzerPlugin({
+      //           analyzerMode: 'static',
+      //           openAnalyzer: false,
+      //           reportFilename: 'bundle.html',
+      //         }),
+      //       ]
+      //     : [],
+      // },
     },
   });
 };

apps/repl/package.json

@@ -18,11 +18,16 @@
   "scripts": {
     "ember:canary": "npx ember-source-channel-url canary --write",
     "ember:beta": "npx ember-source-channel-url beta --write",
-    "build": "ember build --environment=production",
+    "build": "pnpm prebuild:prod && vite --build",
+    "prebuild:dev": "ember build --environment=development",
+    "prebuild:prod": "ember build --environment=production",
     "lint:types": "glint",
     "lint:fix": "pnpm -w exec lint fix",
-    "start": "concurrently 'ember serve -p 4201' 'pnpm _syncPnpm --watch' --names 'serve,ync deps'",
-    "start:iframe": "pnpx http-server ./public -i -p 4204",
+    "start": "pnpm prebuild:dev && concurrently \"npm:start:*\" --names 'start:'",
+    "start:prebuild": "ember build --watch",
+    "start:dev": "vite",
+    "start:syncPnpm": "pnpm _syncPnpm --watch",
+    "iframe:start": "pnpx http-server ./public -i -p 4204",
     "test:browserstack": "./scripts/browserstack.sh",
     "test:ember": "ember test --test-port 0",
     "_syncPnpm": "pnpm sync-dependencies-meta-injected",
@@ -51,6 +56,7 @@
     "@ember/test-helpers": "^3.2.0",
     "@embroider/compat": "3.2.1",
     "@embroider/core": "3.2.1",
+    "@embroider/vite": "^0.1.2",
     "@embroider/webpack": "3.1.5",
     "@fortawesome/ember-fontawesome": "^1.0.1",
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
@@ -63,6 +69,7 @@
     "@glint/template": "^1.1.0",
     "@nullvoxpopuli/eslint-configs": "^3.2.2",
     "@nullvoxpopuli/limber-untyped": "workspace:^0.0.0",
+    "@rollup/plugin-babel": "^6.0.3",
     "@types/babel__core": "^7.20.1",
     "@types/codemirror": "5.60.9",
     "@types/common-tags": "^1.8.1",
@@ -76,6 +83,7 @@
     "@types/unist": "^3.0.0",
     "@typescript-eslint/eslint-plugin": "^6.4.1",
     "@typescript-eslint/parser": "^6.4.1",
+    "babel-plugin-ember-template-compilation": "^2.2.0",
     "broccoli-asset-rev": "^3.0.0",
     "broccoli-merge-trees": "^4.2.0",
     "build-time-reporter-webpack-plugin": "^1.4.3",
@@ -120,6 +128,8 @@
     "type-fest": "4.3.1",
     "typescript": "^5.2.2",
     "vfile": "^6.0.1",
+    "vite": "^4.4.9",
+    "vite-plugin-commonjs": "^0.8.2",
     "webpack": "^5.88.2",
     "yn": "^5.0.0"
   },

apps/repl/tsconfig.json

@@ -3,10 +3,11 @@
     "environment": ["ember-loose", "ember-template-imports"]
   },
   "compilerOptions": {
-    "skipLibCheck": true,
     "target": "ESNext",
+    "moduleResolution": "bundler",
+    "module": "esnext",
+    "skipLibCheck": true,
     "allowJs": true,
-    "moduleResolution": "node",
     "allowSyntheticDefaultImports": true,
     "noImplicitAny": true,
     "noImplicitThis": true,
@@ -22,7 +23,6 @@
     "inlineSourceMap": true,
     "inlineSources": true,
     "baseUrl": ".",
-    "module": "esnext",
     "experimentalDecorators": true,
     "paths": {
       "limber/tests/*": ["tests/*"],

apps/repl/vite.config.mts

@@ -0,0 +1,55 @@
+import { defineConfig } from "vite";
+import { resolver, hbs, scripts, templateTag, addons } from "@embroider/vite";
+import { resolve } from "node:path";
+import module from 'node:module';
+import { babel } from "@rollup/plugin-babel";
+
+const root = "node_modules/.embroider/rewritten-app";
+const require = module.createRequire(import.meta.url);
+
+export default defineConfig({
+  root,
+  plugins: [
+    hbs(),
+    templateTag(),
+    scripts(),
+    resolver(),
+
+    babel({
+      babelHelpers: "runtime",
+
+      // this needs .hbs because our hbs() plugin above converts them to
+      // javascript but the javascript still also needs babel, but we don't want
+      // to rename them because vite isn't great about knowing how to hot-reload
+      // them if we resolve them to made-up names.
+      extensions: [".gjs", ".gts", ".js", ".ts", ".hbs"],
+    }),
+  ],
+  optimizeDeps: {
+    exclude: [
+      ...addons(__dirname),
+    ],
+    include: [
+      'babel-plugin-ember-template-compilation',
+    ],
+  },
+  server: {
+    watch: {
+      ignored: ["!**/node_modules/.embroider/rewritten-app/**"],
+    },
+  },
+  build: {
+    commonjsOptions: { include: [] },
+    rollupOptions: {
+      input: {
+        main: resolve(root, "index.html"),
+        tests: resolve(root, "tests/index.html"),
+      },
+    },
+  },
+   resolve: {
+      alias: {
+        path: "path-browserify",
+      },
+   }
+});

packages/ember-repl/addon/package.json

@@ -76,10 +76,11 @@
     "@embroider/addon-shim": "1.8.6",
     "@embroider/macros": "1.13.1",
     "babel-import-util": "^1.4.1",
-    "babel-plugin-ember-template-compilation": "^2.2.0",
     "broccoli-file-creator": "^2.1.1",
     "change-case": "^4.1.2",
     "common-tags": "^1.8.2",
+    "content-tag": "github:NullVoxPopuli/content-tag#72b6c765262e4ad2d7182438db28b09c74785103",
+    "ember-template-tag": "^2.3.4",
     "line-column": "^1.0.2",
     "magic-string": "^0.30.3",
     "mdast": "^3.0.0",
@@ -126,6 +127,7 @@
     "@types/uuid": "^9.0.2",
     "@typescript-eslint/eslint-plugin": "^6.4.1",
     "@typescript-eslint/parser": "^6.4.1",
+    "babel-plugin-ember-template-compilation": "^2.2.0",
     "concurrently": "^8.2.1",
     "ember-resources": "^6.4.0",
     "ember-source": "^5.2.0",
@@ -160,6 +162,7 @@
     "@glimmer/component": "^1.1.2",
     "@glimmer/syntax": "^0.84.3",
     "@glint/template": "^1.1.0",
+    "babel-plugin-ember-template-compilation": "^2.2.0",
     "ember-resources": "^6.4.0",
     "ember-source": "^5.2.0"
   },

packages/ember-repl/addon/src/browser/cjs/index.ts

@@ -31,7 +31,7 @@ export async function compileJS(code: string, extraModules?: ExtraModules): Prom
 }
 
 async function compileGJS({ code: input, name }: Info) {
-  let preprocessed = preprocess(input, name);
+  let preprocessed = await preprocess(input, name);
   let result = await transform(preprocessed, name);
 
   if (!result) {