Cleanup a bit. (#1862)

* Simplify compilation * Fix Repl * Boop
NullVoxPopuli · Nov 9, 2024 · 1ef43fd · 1ef43fd
1 parent ddabeac
commit 1ef43fd
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 14 deletions.
diff --git a/apps/repl/public/samples/repl.md b/apps/repl/public/samples/repl.md
@@ -13,7 +13,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { on } from '@ember/modifier';
-import { compileJS } from 'ember-repl';
+import { compile } from 'ember-repl';
 
 const STARTING_CODE = `import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
@@ -44,8 +44,20 @@ export default class ExampleREPL extends Component {
     submitEvent.preventDefault();
     this.error = null;
 
+    let error;
+    let component;
+
     try {
-      let { component, error } = await compileJS(this.code);
+       await compile(this.code, { 
+        format: 'gjs',
+        onCompileStart() {},
+        onSuccess(c) {
+          component = c;
+        },
+        onError(e) {
+          error = e;
+        },
+      });
 
       if (error) {
         this.error = error;

diff --git a/packages/ember-repl/addon/src/compile/formats/gjs/index.ts b/packages/ember-repl/addon/src/compile/formats/gjs/index.ts
@@ -1,4 +1,3 @@
-import babelPluginEmberTemplateCompilation from 'babel-plugin-ember-template-compilation';
 import * as compiler from 'ember-template-compiler';
 
 import { nameFor } from '../../utils.ts';
@@ -88,7 +87,25 @@ async function transform(
   intermediate: string,
   name: string
 ): Promise<ReturnType<Babel['transform']>> {
-  // @babel/standalone is a CJS module....
+  const [
+    // _parser, _traverse, _generator,
+    _decoratorTransforms,
+    emberTemplateCompilation,
+  ] = await Promise.all([
+    // @babel/* doesn't have the greatest ESM compat yet
+    // https://github.com/babel/babel/issues/14314#issuecomment-1054505190
+    //
+    // babel-standalone is so easy...
+    // import('@babel/parser'),
+    // import('@babel/traverse'),
+    // import('@babel/generator'),
+    import('decorator-transforms'),
+    import('babel-plugin-ember-template-compilation'),
+  ]);
+
+  const decoratorTransforms =
+    'default' in _decoratorTransforms ? _decoratorTransforms.default : _decoratorTransforms;
+
   // so we have to use the default export (which is all the exports)
   let maybeBabel = (await import('@babel/standalone')) as any;
   // Handle difference between vite and webpack in consuming projects...
@@ -97,30 +114,25 @@ async function transform(
   return babel.transform(intermediate, {
     filename: `${name}.js`,
     plugins: [
-      // [babelPluginIntermediateGJS],
       [
-        babelPluginEmberTemplateCompilation,
+        emberTemplateCompilation,
         {
           compiler,
         },
       ],
-      // See: https://github.com/NullVoxPopuli/limber/issues/1671
-      //     for just how bad the babel plugins are
-      //     (grow your code by 20%!)
-      // [babel.availablePlugins['proposal-decorators'], { legacy: true }],
-      // [babel.availablePlugins['proposal-class-properties']],
       [
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore - we don't care about types here..
-        await import('decorator-transforms'),
+        decoratorTransforms,
         {
           runtime: {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore - we don't care about types here..
             import: 'decorator-transforms/runtime',
           },
         },
       ],
+      // Womp.
+      // See this exploration into true ESM:
+      //   https://github.com/NullVoxPopuli/limber/pull/1805
       [babel.availablePlugins['transform-modules-commonjs']],
     ],
     presets: [],