@norith/glimmerx-babel-preset 1.0.8 → 1.0.11

package/index.js

@@ -2,6 +2,20 @@ function defaultTo(value, defaultVal) {
   return value === undefined ? defaultVal : value;
 }
 
+// The preserve-scope plugin MUST be added as a top-level plugin in the
+// consumer's babel config, not inside this preset. See
+// ./preserve-scope-plugin.js for the reason. We cannot wire it in here
+// because presets expand in reverse array order — any plugin inside this
+// preset would run AFTER @babel/preset-typescript's import stripper, which
+// is too late to prevent template-only imports from being removed.
+//
+// Consumers must add it like so:
+//
+//   plugins: [
+//     require('@glimmerx/babel-preset/preserve-scope-plugin'),
+//     // ...their other plugins
+//   ],
+
 module.exports = function (api, options) {
   let __loadPlugins = defaultTo(options.__loadPlugins, false);
 
@@ -44,3 +58,9 @@ module.exports = function (api, options) {
     ],
   };
 };
+
+// Named re-export so consumers can do:
+//   const { preserveScopePlugin } = require('@glimmerx/babel-preset');
+// as an alternative to:
+//   require('@glimmerx/babel-preset/preserve-scope-plugin')
+module.exports.preserveScopePlugin = require('./preserve-scope-plugin');

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@norith/glimmerx-babel-preset",
-  "version": "1.0.8",
+  "version": "1.0.11",
   "description": "GlimmerX Babel Preset",
-  "repository": "https://github.com/snorith/glimmer-experimental",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/snorith/glimmer-experimental"
+  },
   "author": "Tom Dale <tom@tomdale.net>",
   "license": "MIT",
   "private": false,
@@ -10,7 +13,7 @@
     "test": "mocha -r esm"
   },
   "dependencies": {
-    "@norith/glimmer-babel-preset": "^1.0.1"
+    "@norith/glimmer-babel-preset": "^1.0.2"
   },
   "devDependencies": {
     "babel-plugin-tester": "^6.4.0",

package/preserve-scope-plugin.js

@@ -0,0 +1,63 @@
+// Preserves top-level bindings through the babel pass so that other transforms
+// (notably @babel/preset-typescript's unused-import stripper) do not remove
+// imports that are referenced only from inside an `hbs` tagged template string.
+//
+// Babel's scope tracker cannot see identifiers inside template literal strings,
+// so a bare `import X from './X'` whose only use is `hbs\`<X />\`` looks
+// unused to preset-typescript and gets stripped. By the time
+// babel-plugin-htmlbars-inline-precompile walks the template and calls
+// getScope(path.scope), the binding is already gone — the template compiles
+// with no locals and fails with `not in scope in a strict mode template`.
+//
+// This plugin runs first in the pass. On Program.enter it calls
+// binding.reference(noop) for every top-level binding, which bumps each
+// binding's reference count to >= 1 from preset-typescript's perspective, so
+// preset-typescript leaves the imports alone. By the time
+// babel-plugin-htmlbars-inline-precompile visits the `hbs` tag and emits the
+// scope closure (`scope: () => [X, Y]`), it sees the bindings intact and
+// references them for real inside the closure. On Program.exit we remove the
+// phantom references and the noop placeholder — the real references inside
+// the scope closure remain and carry the imports through tree-shaking.
+//
+// Ported from the removed @glimmerx/babel-plugin-component-templates (which
+// used the same mechanism until the upstream consolidation around
+// babel-plugin-htmlbars-inline-precompile dropped it).
+
+module.exports = function preserveScopePlugin({ types: t }) {
+  return {
+    name: '@norith/glimmerx-babel-preset/preserve-scope',
+    visitor: {
+      Program: {
+        enter(path, state) {
+          const parentScope = path.scope.getProgramParent();
+
+          // Skip TS type-only bindings — we don't need to keep those alive and
+          // marking them would interfere with preset-typescript's type-only
+          // import handling.
+          const bindings = Object.values(parentScope.bindings).filter(
+            (b) => !b.referencePaths.some((p) => p.parent && p.parent.type === 'TSTypeReference')
+          );
+
+          if (bindings.length === 0) return;
+
+          // Insert a noop at the top of the program to anchor the phantom refs.
+          let firstNode = path.get('body.0');
+          firstNode.insertBefore(t.noop());
+          firstNode = path.get('body.0');
+
+          bindings.forEach((b) => b.reference(firstNode));
+
+          state.originalBindings = bindings;
+          state.emptyPath = firstNode;
+        },
+
+        exit(path, state) {
+          if (state.originalBindings) {
+            state.originalBindings.forEach((b) => b.dereference(state.emptyPath));
+            state.emptyPath.remove();
+          }
+        },
+      },
+    },
+  };
+};

package/test/fixtures/preserve-scope-typescript/.babelrc.js

@@ -0,0 +1,16 @@
+// Reproduces the consumer pipeline that triggered the bug:
+// @babel/preset-typescript strips PlainAwait/on (referenced only inside an
+// `hbs` tagged template literal) before babel-plugin-htmlbars-inline-precompile
+// can extract the template scope. The preserveScopePlugin top-level plugin
+// fixes this by phantom-referencing every top-level binding through the pass.
+const path = require('path');
+
+module.exports = {
+  plugins: [
+    require(path.resolve(__dirname, '../../../preserve-scope-plugin')),
+  ],
+  presets: [
+    ['@glimmerx/babel-preset', { isDebug: false }],
+    ['@babel/preset-typescript', { allowDeclareFields: true }],
+  ],
+};

package/test/fixtures/preserve-scope-typescript/code.ts

@@ -0,0 +1,8 @@
+import Component, { hbs } from '@norith/glimmerx-component';
+import { on } from '@norith/glimmerx-modifier';
+import PlainAwait from 'components/PlainAwait';
+
+export default class Foo extends Component {
+  go() {}
+  static template = hbs`<PlainAwait /><button {{on 'click' this.go}}>Go</button>`;
+}

package/test/fixtures/preserve-scope-typescript/output.js

@@ -0,0 +1,19 @@
+import { setComponentTemplate as _setComponentTemplate } from "@norith/glimmer-core";
+import { createTemplateFactory as _createTemplateFactory } from "@norith/glimmer-core";
+import Component from '@norith/glimmerx-component';
+import { on } from '@norith/glimmerx-modifier';
+import PlainAwait from 'components/PlainAwait';
+export default class Foo extends Component {
+  go() {}
+}
+_setComponentTemplate(_createTemplateFactory(
+/*
+  <PlainAwait /><button {{on 'click' this.go}}>Go</button>
+*/
+{
+  "id": "3B6tIOMC",
+  "block": "[[[8,[32,0],null,null,null],[11,\"button\"],[4,[32,1],[\"click\",[30,0,[\"go\"]]],null],[12],[1,\"Go\"],[13]],[],false,[]]",
+  "moduleName": "(unknown template module)",
+  "scope": () => [PlainAwait, on],
+  "isStrictMode": true
+}), Foo);