Babel implementation of Ember's low-level template-compilation API

JavaScript 1.59% TypeScript 98.41%

babel-plugin-ember-template-compilation's People

Contributors

Stargazers

Watchers

Forkers

isabella232 nullvoxpopuli dfreeman wagenet asakusuma candunaj achambers runspired patricklx little-habucas-scary-appartment-block

babel-plugin-ember-template-compilation's Issues

2.2.2 breaking change: 'modifier' keyword is now overridden by local state

This worked under 2.2.1:

import { modifier } from "ember-modifier";

const addClass = modifier((el) => {
  el.classList.add("foo");
});

const shouldAddClass = true;

<template>
  <div {{(if shouldAddClass (modifier addClass))}}>
  </div>
</template>

modifier in the template would refer to the built-in modifier helper, not the modifier function in the local scope.

Under 2.2.2, the template now takes modifier from the local scope, which (understandably) leads to some very strange errors.

We can work around the issue by changing the name of the import like

import { modifier as renamedModifier } from "ember-modifier";

so that it doesn't clash with the builtin.

Clearly the old behaviour was quite 'magic'... so changing the behaviour here in a major version seems reasonable. Perhaps the modifier helper should always be explicitly imported, rather than being a built-in? But having this behaviour change as part of a patch version bump is not ideal.

2.2.2 breaking Embroider tests

FYI my addon's Embroider tests are suddenly failing, I believe due to the 2.2.2 release of this package. I haven't investigated this issue fully, so perhaps I have something configured incorrectly but I just wanted to put this out.

Here is the full build error:

Build Error

ERROR in ./assets/dummy.js
Module build failed (from ../../thread-loader/dist/cjs.js):
Thread Loader (Worker 0)
/home/runner/work/design-system/design-system/node_modules/.embroider/rewritten-app/assets/dummy.js: when targetFormat==="wire" you must set the compiler or compilerPath option

    at normalizeOpts (/home/runner/work/design-system/design-system/node_modules/babel-plugin-ember-template-compilation/src/plugin.js:57:19)
    at PluginPass.enter (/home/runner/work/design-system/design-system/node_modules/babel-plugin-ember-template-compilation/src/plugin.js:72:48)
    at NodePath._call (/home/runner/work/design-system/design-system/node_modules/@babel/traverse/lib/path/context.js:[46](https://github.com/trusted-american/design-system/actions/runs/8727954701/job/23946690512?pr=68#step:5:47):20)
    at NodePath.call (/home/runner/work/design-system/design-system/node_modules/@babel/traverse/lib/path/context.js:36:17)
    at NodePath.visit (/home/runner/work/design-system/design-system/node_modules/@babel/traverse/lib/path/context.js:82:31)
    at TraversalContext.visitQueue (/home/runner/work/design-system/design-system/node_modules/@babel/traverse/lib/context.js:89:16)
    at TraversalContext.visitSingle (/home/runner/work/design-system/design-system/node_modules/@babel/traverse/lib/context.js:65:19)
    at TraversalContext.visit (/home/runner/work/design-system/design-system/node_modules/@babel/traverse/lib/context.js:112:19)
    at traverseNode (/home/runner/work/design-system/design-system/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at Object.traverse (/home/runner/work/design-system/design-system/node_modules/@babel/traverse/lib/index.js:[52](https://github.com/trusted-american/design-system/actions/runs/8727954701/job/23946690512?pr=68#step:5:53):34)
    at PluginPass.pre (/home/runner/work/design-system/design-system/node_modules/babel-plugin-ember-template-compilation/src/plugin.js:170:23)
    at PluginPass.<anonymous> (/home/runner/work/design-system/design-system/node_modules/@embroider/core/src/portable-babel-launcher.js:31:33)
    at transformFile (/home/runner/work/design-system/design-system/node_modules/@babel/core/lib/transformation/index.js:73:27)
    at transformFile.next (<anonymous>)
    at run (/home/runner/work/design-system/design-system/node_modules/@babel/core/lib/transformation/index.js:24:12)
    at run.next (<anonymous>)
    at transform (/home/runner/work/design-system/design-system/node_modules/@babel/core/lib/transform.js:22:33)
    at transform.next (<anonymous>)
    at step (/home/runner/work/design-system/design-system/node_modules/gensync/index.js:261:32)
    at /home/runner/work/design-system/design-system/node_modules/gensync/index.js:273:13
    at async.call.result.err.err (/home/runner/work/design-system/design-system/node_modules/gensync/index.js:223:11)
    at /home/runner/work/design-system/design-system/node_modules/gensync/index.js:189:28
    at /home/runner/work/design-system/design-system/node_modules/@babel/core/lib/gensync-utils/async.js:67:7
    at /home/runner/work/design-system/design-system/node_modules/gensync/index.js:113:33
    at step (/home/runner/work/design-system/design-system/node_modules/gensync/index.js:287:14)
    at /home/runner/work/design-system/design-system/node_modules/gensync/index.js:273:13
    at async.call.result.err.err (/home/runner/work/design-system/design-system/node_modules/gensync/index.js:223:11)

.gts test files not working in 2.2.2

Since the upgrade to babel-plugin-ember-template-compilation version 2.2.2, my test files with template imports (gts files) are not loading anymore.

In QUnit I'm getting 1 global failure:

1. Error: 
Error: Could not find module `ember-template-compiler` imported from `@ember/template-compilation/index`
TypeError: Cannot read properties of undefined (reading 'exports')
TypeError: Cannot read properties of undefined (reading 'exports')
TypeError: Cannot read properties of undefined (reading 'exports')
TypeError: Cannot read properties of undefined (reading 'exports')
TypeError: Cannot read properties of undefined (reading 'exports')
Source: 	
Error: 
Error: Could not find module `ember-template-compiler` imported from `@ember/template-compilation/index`
TypeError: Cannot read properties of undefined (reading 'exports')
TypeError: Cannot read properties of undefined (reading 'exports')
TypeError: Cannot read properties of undefined (reading 'exports')
TypeError: Cannot read properties of undefined (reading 'exports')
TypeError: Cannot read properties of undefined (reading 'exports')
    at eval (webpack://__ember_auto_import__/./node_modules/ember-qunit/dist/test-loader.js?:11:62)
    at eval (webpack://__ember_auto_import__/./node_modules/qunit/qunit/qunit.js?:376:140)

and all my gts test files have an error too:

1. Died on test #1: Cannot read properties of undefined (reading 'exports')
    at TestLoader.moduleLoadFailure (webpack://__ember_auto_import__/./node_modules/ember-qunit/dist/test-loader.js?:12:301)
    at TestLoader.require (http://localhost:4304/assets/test-support.js:7438:14)
    at TestLoader.loadModules (http://localhost:4304/assets/test-support.js:7430:14)
    at loadTests (webpack://__ember_auto_import__/./node_modules/ember-qunit/dist/test-loader.js?:25:42)
    at start (webpack://__ember_auto_import__/./node_modules/ember-qunit/dist/index.js?:83:119)
    at Module.callback (http://localhost:4304/assets/tests.js:4831:25)
    at Module.exports (http://localhost:4304/assets/vendor.js:125:32)@ 0 ms
Source: 	
TypeError: Cannot read properties of undefined (reading 'exports')
    at Module._reify (http://localhost:4304/assets/vendor.js:162:59)
    at Module.reify (http://localhost:4304/assets/vendor.js:149:27)
    at Module.exports (http://localhost:4304/assets/vendor.js:123:10)
    at Module._reify (http://localhost:4304/assets/vendor.js:162:59)
    at Module.reify (http://localhost:4304/assets/vendor.js:149:27)
    at Module.exports (http://localhost:4304/assets/vendor.js:123:10)
    at requireModule (http://localhost:4304/assets/vendor.js:46:18)
    at TestLoader.require (http://localhost:4304/assets/test-support.js:7436:9)
    at TestLoader.loadModules (http://localhost:4304/assets/test-support.js:7430:14)
    at loadTests (webpack://__ember_auto_import__/./node_modules/ember-qunit/dist/test-loader.js?:25:42)

1. Died on test #1: Could not find module `ember-template-compiler` imported from `@ember/template-compilation/index`
    at TestLoader.moduleLoadFailure (webpack://__ember_auto_import__/./node_modules/ember-qunit/dist/test-loader.js?:12:301)
    at TestLoader.require (http://localhost:4304/assets/test-support.js:7438:14)
    at TestLoader.loadModules (http://localhost:4304/assets/test-support.js:7430:14)
    at loadTests (webpack://__ember_auto_import__/./node_modules/ember-qunit/dist/test-loader.js?:25:42)
    at start (webpack://__ember_auto_import__/./node_modules/ember-qunit/dist/index.js?:83:119)
    at Module.callback (http://localhost:4304/assets/tests.js:4831:25)
    at Module.exports (http://localhost:4304/assets/vendor.js:125:32)@ 0 ms
Source: 	
Error: Could not find module `ember-template-compiler` imported from `@ember/template-compilation/index`
    at missingModule (http://localhost:4304/assets/vendor.js:266:11)
    at findModule (http://localhost:4304/assets/vendor.js:277:7)
    at Module.findDeps (http://localhost:4304/assets/vendor.js:187:24)
    at findModule (http://localhost:4304/assets/vendor.js:281:11)
    at Module.findDeps (http://localhost:4304/assets/vendor.js:187:24)
    at findModule (http://localhost:4304/assets/vendor.js:281:11)
    at requireModule (http://localhost:4304/assets/vendor.js:43:15)
    at TestLoader.require (http://localhost:4304/assets/test-support.js:7436:9)
    at TestLoader.loadModules (http://localhost:4304/assets/test-support.js:7430:14)
    at loadTests (webpack://__ember_auto_import__/./node_modules/ember-qunit/dist/test-loader.js?:25:42)

Instructions unclear, got precompile is not a function.

babel config

import { createRequire } from 'module';

const require = createRequire(import.meta.url);
const resolve = require.resolve;

export default {
  plugins: [
    [
      resolve('@babel/plugin-transform-typescript'),
      {
        allowDeclareFields: true,
        onlyRemoveTypeImports: true,
        // Default enums are IIFEs
        optimizeConstEnums: true,
      },
    ],
    [
      resolve('@babel/plugin-proposal-class-properties'),
      {
        // Only support browsers that also support class properties...
        // If all addons do this, it greatly reduces shipped JS
        loose: true,
      },
    ],
    [resolve('babel-plugin-ember-template-compilation'), {
      enableLegacyModules: [
        'ember-cli-htmlbars',
      ]
    }],
    resolve('@embroider/addon-dev/template-colocation-plugin'),
  ],
};

rollup config

import path from 'path';
import { nodeResolve } from '@rollup/plugin-node-resolve';

import { babel } from '@rollup/plugin-babel';

import { Addon } from '@embroider/addon-dev/rollup';

const addon = new Addon({
  srcDir: 'src',
  destDir: 'dist',
});

const extensions = ['.js', '.ts'];

const rollupConfig = {
  input: [path.join('src', 'index.ts'), path.join('src', 'registration.ts')],

  // This provides defaults that work well alongside `publicEntrypoints` below.
  // You can augment this if you need to.
  output: { ...addon.output(), entryFileNames: '[name].js' },

  plugins: [
    // this is needed so we can have files that import other files...
    nodeResolve({ resolveOnly: ['./'], extensions }),

    // These are the modules that users should be able to import from your
    // addon. Anything not listed here may get optimized away.
    addon.publicEntrypoints(['index.js', 'registration.js']),

    // These are the modules that should get reexported into the traditional
    // "app" tree. Things in here should also be in publicEntrypoints above, but
    // not everything in publicEntrypoints necessarily needs to go here.
    // addon.appReexports(['components/**/*.js', 'services/**/*.js']),

    // This babel config should *not* apply presets or compile away ES modules.
    // It exists only to provide development niceties for you, like automatic
    // template colocation.
    // See `babel.config.json` for the actual Babel configuration!
    babel({ babelHelpers: 'bundled', extensions }),

    // Follow the V2 Addon rules about dependencies. Your code can import from
    // `dependencies` and `peerDependencies` as well as standard Ember-provided
    // package names.
    addon.dependencies(),

    // Ensure that standalone .hbs files are properly integrated as Javascript.
    addon.hbs(),

    // addons are allowed to contain imports of .css files, which we want rollup
    // to leave alone and keep in the published output.
    // addon.keepAssets(['**/*.css']),

    // Remove leftover build artifacts when starting a new build.
    addon.clean(),
  ],
};

export default rollupConfig;

Error:

[build:js] [!] (plugin babel) TypeError: /✂️/ember-statechart-component/ember-statechart-component/src/registration.ts: precompile is not a function
[build:js] src/registration.ts
[build:js] TypeError: /✂️/ember-statechart-component/ember-statechart-component/src/registration.ts: precompile is not a function
[build:js]     at insertCompiledTemplate (/✂️/ember-statechart-component/node_modules/babel-plugin-ember-template-compilation/src/plugin.ts:107:34)
[build:js]     at PluginPass.TaggedTemplateExpression (/✂️/ember-statechart-component/node_modules/babel-plugin-ember-template-compilation/src/plugin.ts:177:11)
[build:js]     at newFn (/✂️/ember-statechart-component/node_modules/@babel/traverse/lib/visitors.js:177:21)
[build:js]     at NodePath._call (/✂️/ember-statechart-component/node_modules/@babel/traverse/lib/path/context.js:53:20)

Code that was trying to be transpiled:

import { setComponentManager, setComponentTemplate } from '@ember/component';
import { hbs } from 'ember-cli-htmlbars';
// ...
setComponentTemplate(hbs`{{yield this.state this.send}}`, StateNode.prototype);

All options properties in the README say "optional" (?:)

Reason for only allowing direct references to in-scope values?

This assertion seems to allow only scopes defined as { foo } or { foo: foo }, but not { foo: bar }. I wonder why that is?

The problem I was running into:

I am using rollup-plugin-glimmer-template-tag and rollup-plugin-ts in a v2 addon, I was importing the default export of a component HeadlessFormFieldComponent under a shorter name, like this:

import FieldComponent from './field';

But during the compilation process (/dist output of v2 addon), this gets implicitly transformed to something like this:

import HeadlessFormFieldComponent from './field';

setComponentTemplate(precompileTemplate(`...`, {
  strictMode: true,
  scope: () => ({
    FieldComponent: HeadlessFormFieldComponent
  })

Idk why this is being done, but it seems perfectly valid from a pure JS standpoint. But the babel plugin then throws Scope objects for precompileTemplate may only contain direct references to in-scope values, e.g. { FieldComponent } or { FieldComponent: FieldComponent }

Similar things happen when you import by assigning an alias, like

import { EnsureSafeComponentHelper as ensureSafeComponent } from '@embroider/util';

...which gets rewritten to

import { EnsureSafeComponentHelper } from '@embroider/util';

setComponentTemplate(precompileTemplate(`...`, {
  strictMode: true,
  scope: () => ({
    ensureSafeComponent: EnsureSafeComponentHelper
  })

2.0.3 Errors with missing @babel/traverse

Related ember-auto-import issue though I suspect the issue is probably in this plugin embroider-build/ember-auto-import#580

note: EmberData does not automatically install peer-dependencies and isolates node_modules (no hoisting) we we are more susceptible to improperly declared peer-dependencies. I suspect that is what has occurred here

babel-plugin-ember-template-compilation/package.json

Line 45 in d67cca1

"@babel/traverse": "^7.14.5",

Potential issue with 2.0.1

EmberData's no-lockfile test scenario hits this issue when picking up the new release:

tests/request test:   - errorType: [undefined]
tests/request test:   - location:
tests/request test:     - column: [undefined]
tests/request test:     - file: [undefined]
tests/request test:     - line: [undefined]
tests/request test:   - message: Cannot find module 'babel-plugin-ember-template-compilation'
tests/request test: Require stack:
tests/request test: - /home/runner/work/data/data/node_modules/.pnpm/[email protected][email protected]/node_modules/ember-auto-import/js/package.js
tests/request test: - /home/runner/work/data/data/node_modules/.pnpm/[email protected][email protected]/node_modules/ember-auto-import/js/auto-import.js
tests/request test: - /home/runner/work/data/data/node_modules/.pnpm/[email protected][email protected]/node_modules/ember-auto-import/js/index.js

2.2.2 breaking change: globals are now 'not in scope' for templates?

There appears to be a breaking change between 2.2.1 and 2.2.2. Previously, in gjs files, we could reference JS globals directly as helpers. For example, we were using @something=(Boolean this.blah) to cast a value to a boolean.

Now, we get the error:

Error: Attempted to resolve a helper in a strict mode template, but that value was not in scope: Boolean

Adding const Boolean = window.Boolean to the file works around the problem.

This problem is not limited to helpers. Something like {{document.title}} previously worked, but now throws a 'not in scope' error.

emberjs / babel-plugin-ember-template-compilation Goto Github PK

babel-plugin-ember-template-compilation's People

Contributors

Stargazers

Watchers

Forkers

babel-plugin-ember-template-compilation's Issues

2.2.2 breaking change: 'modifier' keyword is now overridden by local state

2.2.2 breaking Embroider tests

.gts test files not working in 2.2.2

Instructions unclear, got precompile is not a function.

Reason for only allowing direct references to in-scope values?

2.0.3 Errors with missing @babel/traverse

Potential issue with 2.0.1

2.2.2 breaking change: globals are now 'not in scope' for templates?

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent