allow reuse of bindings

Author: patricklx

__tests__/tests.ts

@@ -33,6 +33,7 @@ describe('htmlbars-inline-precompile', function () {
   });
 
   afterEach(function () {
+    sharedStateToBabel = null;
     sinon.restore();
   });
 
@@ -654,13 +655,23 @@ describe('htmlbars-inline-precompile', function () {
     );
   });
 
+  let sharedStateToBabel = null as any;
+
   let expressionTransform: ExtendedPluginBuilder = (env) => {
     return {
       name: 'expression-transform',
       visitor: {
         PathExpression(node, path) {
           if (node.original === 'onePlusOne') {
+            let boundName = sharedStateToBabel?.boundName;
+            if (boundName) {
+              env.meta.jsutils.bindVariable(boundName);
+              return env.syntax.builders.path(boundName);
+            }
             let name = env.meta.jsutils.bindExpression('1+1', path, { nameHint: 'two' });
+            if (sharedStateToBabel) {
+              sharedStateToBabel.boundName = name;
+            }
             return env.syntax.builders.path(name);
           }
           return undefined;
@@ -1314,6 +1325,47 @@ describe('htmlbars-inline-precompile', function () {
       `);
     });
 
+    it('can reuse bindings', function () {
+      plugins = [
+        [HTMLBarsInlinePrecompile, { targetFormat: 'hbs', transforms: [expressionTransform] }],
+      ];
+
+      sharedStateToBabel = {};
+
+      let transformed = transform(stripIndent`
+        import { precompileTemplate } from '@ember/template-compilation';
+        import Message from 'message';
+        const template = precompileTemplate('<Message @text={{onePlusOne}} />', {
+          scope: () => ({
+            Message
+          })
+        });
+         const template2 = precompileTemplate('<Message @text={{onePlusOne}} />', {
+          scope: () => ({
+            Message
+          })
+        });
+      `);
+
+      expect(transformed).toEqualCode(`
+        import { precompileTemplate } from '@ember/template-compilation';
+        import Message from 'message';
+        let two = 1 + 1;
+        const template = precompileTemplate("<Message @text={{two}} />", {
+          scope: () => ({
+            Message,
+            two
+          })
+        });
+        const template2 = precompileTemplate("<Message @text={{two}} />", {
+          scope: () => ({
+            Message,
+            two
+          })
+        });
+      `);
+    });
+
     it('adds new locals to preexisting renamed scope', function () {
       plugins = [
         [HTMLBarsInlinePrecompile, { targetFormat: 'hbs', transforms: [expressionTransform] }],
@@ -1323,6 +1375,12 @@ describe('htmlbars-inline-precompile', function () {
         import { precompileTemplate } from '@ember/template-compilation';
         import Message$ from 'message';
         import Label from 'label';
+        const template2 = precompileTemplate('<Label /><Message />', {
+          scope: () => ({
+            Label,
+            Message: Message$
+          })
+        });
         const template = precompileTemplate('<Label /><Message @text={{onePlusOne}} />', {
           scope: () => ({
             Label,
@@ -1336,6 +1394,12 @@ describe('htmlbars-inline-precompile', function () {
         import Message$ from 'message';
         import Label from 'label';
         let two = 1 + 1;
+        const template2 = precompileTemplate("<Label /><Message />", {
+          scope: () => ({
+            Label,
+            Message: Message$,
+          }),
+        });
         const template = precompileTemplate("<Label /><Message @text={{two}} />", {
           scope: () => ({
             Label,
@@ -1862,6 +1926,16 @@ describe('htmlbars-inline-precompile', function () {
       expect(spy.firstCall.lastArg).toHaveProperty('locals', ['foo', 'bar']);
     });
 
+    it('correctly removes not used scope', function () {
+      let spy = sinon.spy(compiler, 'precompile');
+      transform(`
+        import { precompileTemplate } from '@ember/template-compilation';
+        let foo, bar;
+        var compiled = precompileTemplate('<foo /><bar/>', { scope: () => ({ foo, bar, baz }) });
+      `);
+      expect(spy.firstCall.lastArg).toHaveProperty('locals', ['foo', 'bar']);
+    });
+
     it('does not automagically add to scope when not using implicit-scope-form', function () {
       let spy = sinon.spy(compiler, 'precompile');
       transform(`
@@ -2205,6 +2279,63 @@ describe('htmlbars-inline-precompile', function () {
         `);
     });
 
+    it('works with two components', function () {
+      plugins = [
+        [
+          HTMLBarsInlinePrecompile,
+          {
+            targetFormat: 'hbs',
+          },
+        ],
+      ];
+
+      let p = new Preprocessor();
+      let processed = p.process(
+        `
+        import Component from '@glimmer/component';
+
+        export default class Test extends Component {
+          foo = 1;
+
+          <template>
+            <Icon />
+          </template>
+        }
+
+        const Icon = <template>Icon</template>;
+        `
+      );
+
+      let transformed = transform(processed);
+
+      expect(transformed).toEqualCode(`
+        import Component from "@glimmer/component";
+        import { precompileTemplate } from "@ember/template-compilation";
+        import { setComponentTemplate } from "@ember/component";
+        import templateOnly from "@ember/component/template-only";
+        export default class Test extends Component {
+          foo = 1;
+          static {
+            setComponentTemplate(
+              precompileTemplate("\\n            <Icon />\\n          ", {
+                strictMode: true,
+                scope: () => ({
+                  Icon,
+                }),
+              }),
+              this
+            );
+          }
+        }
+        const Icon = setComponentTemplate(
+          precompileTemplate("Icon", {
+            strictMode: true,
+          }),
+          templateOnly()
+        );
+    `);
+    });
+
     it('works for class member form with `this` references', function () {
       plugins = [
         [

src/js-utils.ts

@@ -16,7 +16,7 @@ export class JSUtils {
   #babel: typeof Babel;
   #state: State;
   #template: NodePath<t.Expression>;
-  #addedBinding: (name: string) => void;
+  #addedBinding: (name: string, jsName?: string) => void;
   #importer: ImportUtil;
 
   constructor(
@@ -84,6 +84,20 @@ export class JSUtils {
     return name;
   }
 
+  /**
+   * Allows (re)use of binding that you already have in the js code or created with bindExpression
+   * Especially useful if you have a custom transform that creates a binding that you want to reuse
+   *
+   * @param hbsName the name you are using in your template to access the binding
+   * @param jsName the name of a js variable
+   *
+   * @return The name you can use in your template to access the binding.
+   */
+  bindVariable(hbsName: string, jsName?: string) {
+    this.#addedBinding(hbsName, jsName);
+    return hbsName;
+  }
+
   #emitStatement<T extends t.Statement>(statement: T): NodePath<T> {
     if (this.#state.lastInsertedPath) {
       this.#state.lastInsertedPath = this.#state.lastInsertedPath.insertAfter(statement)[0];