diff --git a/apps/repl/public/samples/repl.md b/apps/repl/public/samples/repl.md index 41e958ed0..023a40b20 100644 --- 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 index 401c73671..3155880c2 100644 --- 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> { - // @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: [],