Merge pull request #334 from glimmerjs/sync-template-compilation-with…

…-ember

Sync template compilation details with Ember, add @glimmer/babel-preset

.eslintrc.js

@@ -30,6 +30,7 @@ module.exports = {
         'webpack.config.js',
         'packages/babel-plugins/**/*.js',
         'packages/@glimmer/blueprint/index.js',
+        '**/babel-plugins.js'
       ],
       env: {
         es6: true,

package.json

@@ -19,7 +19,7 @@
     "problems": "tsc -p tsconfig.json --noEmit",
     "start": "webpack-dev-server",
     "test": "npm-run-all lint test:browsers test:babel-plugins test:types",
-    "test:babel-plugins": "mocha -r esm --timeout 5000 test/babel-plugins.js",
+    "test:babel-plugins": "yarn workspace @glimmer/babel-preset test",
     "test:browsers": "testem ci",
     "test:ember": "yarn workspace @glimmer/component ember try:one",
     "test:types": "dtslint test/types",

packages/@glimmer/blueprint/files/.babelrc.js

@@ -1,11 +1,5 @@
-module.exports = function (api) {
+module.exports = function () {
   return {
-    plugins: [
-      ['@glimmer/babel-plugin-glimmer-env', { DEBUG: !api.env('production') }],
-      '@glimmer/babel-plugin-strict-template-precompile',
-      ['@babel/plugin-proposal-decorators', { legacy: true }],
-      '@babel/plugin-proposal-class-properties',
-    ],
-    presets: ['@babel/preset-env', '@babel/preset-typescript'],
+    presets: ['@glimmer/babel-preset', '@babel/preset-env', '@babel/preset-typescript'],
   };
 };

packages/@glimmer/blueprint/files/package.json

@@ -16,18 +16,15 @@
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/plugin-proposal-decorators": "^7.8.3",
     "@babel/preset-env": "^7.9.0",
     "@babel/preset-typescript": "^7.9.0",
-    "@glimmer/babel-plugin-glimmer-env": "~2.0.0-beta.12",
-    "@glimmer/babel-plugin-strict-template-precompile": "~2.0.0-beta.12",
     "@glimmer/blueprint": "~2.0.0-beta.12",
     "@glimmer/component": "~2.0.0-beta.12",
     "@glimmer/core": "~2.0.0-beta.12",
     "@glimmer/env": "^0.1.7",
     "@glimmer/helper": "~2.0.0-beta.12",
     "@glimmer/modifier": "~2.0.0-beta.12",
+    "@glimmer/babel-preset": "~2.0.0-beta.12",
     "@types/qunit": "^2.9.1",
     "@typescript-eslint/eslint-plugin": "^2.26.0",
     "@typescript-eslint/parser": "^2.26.0",

packages/@glimmer/blueprint/files/src/App.js

@@ -1,5 +1,5 @@
 import Component from '@glimmer/component';
-import { setComponentTemplate, createTemplate } from '@glimmer/core';
+import { setComponentTemplate, precompileTemplate } from '@glimmer/core';
 
 import logo from './logo.svg';
 import './App.css';
@@ -9,7 +9,8 @@ export default class App extends Component {
 }
 
 setComponentTemplate(
-  createTemplate(`
+  precompileTemplate(
+    `
     <div id="intro">
       <img src={{this.logo}}/>
 
@@ -19,6 +20,8 @@ setComponentTemplate(
         and run tests by visiting <a href="./tests">/tests</a>
       </h3>
     </div>
-  `),
+  `,
+    { strictMode: true }
+  ),
   App
 );

packages/@glimmer/component/test/interactive/args-test.ts

@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
-import { setComponentTemplate, createTemplate } from '@glimmer/core';
+import { setComponentTemplate, precompileTemplate } from '@glimmer/core';
 import { test, render, settled } from '@glimmer/core/test/utils';
 
 QUnit.module('[@glimmer/component] Component Arguments', () => {
@@ -27,14 +27,17 @@ QUnit.module('[@glimmer/component] Component Arguments', () => {
     }
 
     setComponentTemplate(
-      createTemplate(
-        { ChildComponent },
-        '<ChildComponent @firstName={{this.firstName}} @status={{this.status}} />'
+      precompileTemplate(
+        '<ChildComponent @firstName={{this.firstName}} @status={{this.status}} />',
+        { strictMode: true, scope: { ChildComponent } }
       ),
       ParentComponent
     );
 
-    setComponentTemplate(createTemplate('{{this.name}} {{@status}}'), ChildComponent);
+    setComponentTemplate(
+      precompileTemplate('{{this.name}} {{@status}}', { strictMode: true }),
+      ChildComponent
+    );
 
     assert.equal(await render(ParentComponent), 'Tom Dale is dope');
 

packages/@glimmer/component/test/interactive/lifecycle-hook-test.ts

@@ -2,7 +2,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
 import { test, render, settled } from '@glimmer/core/test/utils';
-import { setComponentTemplate, createTemplate } from '@glimmer/core';
+import { setComponentTemplate, precompileTemplate } from '@glimmer/core';
 
 QUnit.module('[@glimmer/component] Lifecycle Hooks', () => {
   test('Lifecycle hook ordering', async function (assert) {
@@ -37,31 +37,37 @@ QUnit.module('[@glimmer/component] Lifecycle Hooks', () => {
     class Component5 extends HookLoggerComponent {}
 
     setComponentTemplate(
-      createTemplate(
-        { Component2, Component3 },
+      precompileTemplate(
         `
           {{#if this.showChildren}}
             <Component2 @name="component2" @firstName={{this.firstName}} />
             <Component3 @name="component3"/>
           {{/if}}
-        `
+        `,
+        {
+          strictMode: true,
+          scope: { Component2, Component3 },
+        }
       ),
       Component1
     );
 
     setComponentTemplate(
-      createTemplate(
-        { Component4, Component5 },
+      precompileTemplate(
         `
           {{@firstName}}
           <Component4 @name="component4"/>
           <Component5 @name="component5"/>
-        `
+        `,
+        {
+          strictMode: true,
+          scope: { Component4, Component5 },
+        }
       ),
       Component2
     );
 
-    const emptyTemplate = createTemplate('');
+    const emptyTemplate = precompileTemplate('');
 
     setComponentTemplate(emptyTemplate, Component3);
     setComponentTemplate(emptyTemplate, Component4);

packages/@glimmer/core/index.ts

@@ -16,19 +16,19 @@ export type {
   HelperManager,
 } from '@glimmer/interfaces';
 
+export { templateFactory as createTemplateFactory } from '@glimmer/opcode-compiler';
 export { templateOnlyComponent } from '@glimmer/runtime';
 
-export { TemplateArgs } from './src/interfaces';
-
 export {
   setComponentManager,
   setModifierManager,
-  modifierCapabilities,
   setHelperManager,
   componentCapabilities,
+  modifierCapabilities,
   helperCapabilities,
+  setComponentTemplate,
 } from '@glimmer/manager';
 
 export { getOwner, setOwner } from '@glimmer/owner';
 
-export { createTemplate, setComponentTemplate } from './src/template';
+export { precompileTemplate } from './src/template';

packages/@glimmer/core/src/template.ts

@@ -1,25 +1,19 @@
 import { DEBUG } from '@glimmer/env';
-import { setComponentTemplate as vmSetComponentTemplate } from '@glimmer/manager';
-import { SerializedTemplateWithLazyBlock, Dict } from '@glimmer/interfaces';
-import { templateFactory } from '@glimmer/opcode-compiler';
+import { TemplateFactory } from '@glimmer/interfaces';
 
-// This is provided by the `babel-plugin-strict-template-precompile` plugin
-export let createTemplate: (
-  scopeOrTemplate: Dict<unknown> | string,
-  template?: string
-) => SerializedTemplateWithLazyBlock;
+// This is provided by `@glimmer/babel-preset`
+export let precompileTemplate: (
+  template: string,
+  options?: {
+    strictMode?: boolean;
+    scope?: Record<string, unknown>;
+  }
+) => TemplateFactory;
 
 if (DEBUG) {
-  createTemplate = (): SerializedTemplateWithLazyBlock => {
+  precompileTemplate = (): TemplateFactory => {
     throw new Error(
-      'createTemplate() is meant to be preprocessed with a babel plugin, @glimmer/babel-plugin-strict-template-precompile. If you are seeing this error message, it means that you do not have this babel plugin installed, or it is not enabled correctly'
+      'precompileTemplate() is meant to be preprocessed with babel, using @glimmer/babel-preset. If you are seeing this error message, it means that you do not have this babel preset installed, or it is not enabled correctly'
     );
   };
 }
-
-export function setComponentTemplate(
-  template: SerializedTemplateWithLazyBlock,
-  ComponentClass: object
-): object {
-  return vmSetComponentTemplate(templateFactory(template), ComponentClass);
-}

packages/@glimmer/core/test/interactive/fn-test.ts

@@ -3,7 +3,7 @@ import Component from '@glimmer/component';
 import { fn } from '@glimmer/helper';
 import { on, action } from '@glimmer/modifier';
 
-import { setComponentTemplate, createTemplate, templateOnlyComponent } from '@glimmer/core';
+import { setComponentTemplate, precompileTemplate, templateOnlyComponent } from '@glimmer/core';
 
 QUnit.module('[@glimmer/core] interactive - {{fn}}', () => {
   test('can curry arguments via fn', async function (assert) {
@@ -29,9 +29,12 @@ QUnit.module('[@glimmer/core] interactive - {{fn}}', () => {
     }
 
     setComponentTemplate(
-      createTemplate(
-        { on, fn },
-        '<button {{on "click" (fn this.userDidClick "hello" @name)}}>Hello World</button>'
+      precompileTemplate(
+        '<button {{on "click" (fn this.userDidClick "hello" @name)}}>Hello World</button>',
+        {
+          strictMode: true,
+          scope: { on, fn },
+        }
       ),
       HelloWorld
     );
@@ -82,23 +85,26 @@ QUnit.module('[@glimmer/core] interactive - {{fn}}', () => {
     }
 
     const Grandchild = setComponentTemplate(
-      createTemplate({ on, fn }, '<button {{on "click" (fn @userDidClick 5 6)}}></button>'),
+      precompileTemplate('<button {{on "click" (fn @userDidClick 5 6)}}></button>', {
+        strictMode: true,
+        scope: { on, fn },
+      }),
       templateOnlyComponent()
     );
 
     const Child = setComponentTemplate(
-      createTemplate(
-        { Grandchild, fn },
-        '<div><Grandchild @userDidClick={{fn @userDidClick 3 4}} /></div>'
-      ),
+      precompileTemplate('<div><Grandchild @userDidClick={{fn @userDidClick 3 4}} /></div>', {
+        strictMode: true,
+        scope: { Grandchild, fn },
+      }),
       templateOnlyComponent()
     );
 
     setComponentTemplate(
-      createTemplate(
-        { Child, fn },
-        '<div><Child @userDidClick={{fn this.userDidClick 1 2}} /></div>'
-      ),
+      precompileTemplate('<div><Child @userDidClick={{fn this.userDidClick 1 2}} /></div>', {
+        strictMode: true,
+        scope: { Child, fn },
+      }),
       ParentComponent
     );
 
@@ -116,7 +122,10 @@ QUnit.module('[@glimmer/core] interactive - {{fn}}', () => {
     class Parent extends Component {}
 
     setComponentTemplate(
-      createTemplate({ on, fn }, '<button {{on "click" (fn this.doesntExist)}}></button>'),
+      precompileTemplate('<button {{on "click" (fn this.doesntExist)}}></button>', {
+        strictMode: true,
+        scope: { on, fn },
+      }),
       Parent
     );
 

packages/@glimmer/core/test/interactive/modifier-test.ts

@@ -2,7 +2,7 @@ import { test, render, settled, tracked } from '../utils';
 import { click } from '../utils/dom';
 import { on, action } from '@glimmer/modifier';
 import Component from '@glimmer/component';
-import { setComponentTemplate, createTemplate } from '@glimmer/core';
+import { setComponentTemplate, precompileTemplate } from '@glimmer/core';
 
 QUnit.module('Modifier Tests', () => {
   test('Supports the on modifier', async (assert) => {
@@ -16,9 +16,12 @@ QUnit.module('Modifier Tests', () => {
     }
 
     setComponentTemplate(
-      createTemplate(
-        { on },
-        `<button {{on "click" this.incrementCounter}}>Count: {{@count}}</button>`
+      precompileTemplate(
+        `<button {{on "click" this.incrementCounter}}>Count: {{@count}}</button>`,
+        {
+          strictMode: true,
+          scope: { on },
+        }
       ),
       MyComponent
     );

packages/@glimmer/core/test/interactive/render-test.ts

@@ -1,4 +1,4 @@
-import { createTemplate } from '@glimmer/core';
+import { precompileTemplate } from '@glimmer/core';
 
 import { test, render } from '../utils';
 
@@ -11,8 +11,14 @@ QUnit.module(`[@glimmer/core] interactive rendering tests`, () => {
     const firstContainerElement = document.createElement('div');
     const secondContainerElement = document.createElement('div');
 
-    await render(createTemplate(`<h1>Hello Glimmer!</h1>`), firstContainerElement);
-    await render(createTemplate(`<h1>Hello Robbie!</h1>`), secondContainerElement);
+    await render(
+      precompileTemplate(`<h1>Hello Glimmer!</h1>`, { strictMode: true }),
+      firstContainerElement
+    );
+    await render(
+      precompileTemplate(`<h1>Hello Robbie!</h1>`, { strictMode: true }),
+      secondContainerElement
+    );
 
     assert.equal(firstContainerElement.innerHTML, '<h1>Hello Glimmer!</h1>');
     assert.equal(secondContainerElement.innerHTML, '<h1>Hello Robbie!</h1>');
@@ -30,7 +36,10 @@ QUnit.module(`[@glimmer/core] interactive rendering tests`, () => {
     containerElement.appendChild(previousSibling);
     containerElement.appendChild(document.createTextNode('bar'));
 
-    await render(createTemplate(`<h1>Hello Glimmer!</h1>`), containerElement);
+    await render(
+      precompileTemplate(`<h1>Hello Glimmer!</h1>`, { strictMode: true }),
+      containerElement
+    );
 
     assert.equal(containerElement.innerHTML, '<p>foo</p>bar<h1>Hello Glimmer!</h1>');
   });
@@ -40,7 +49,7 @@ QUnit.module(`[@glimmer/core] interactive rendering tests`, () => {
     containerElement.innerHTML =
       '<!--%+b:0%--><!--%+b:1%--><h1>Hello World</h1><!--%-b:1%--><!--%-b:0%-->';
 
-    await render(createTemplate(`<h1>Hello World</h1>`), {
+    await render(precompileTemplate(`<h1>Hello World</h1>`, { strictMode: true }), {
       element: containerElement,
       rehydrate: true,
     });
@@ -53,7 +62,7 @@ QUnit.module(`[@glimmer/core] interactive rendering tests`, () => {
     containerElement.innerHTML =
       '<!--%+b:0%--><!--%+b:1%--><div id="test"><!--%+b:2%--><h1>Hello <!--%+b:3%-->World<!--%-b:3%--></h1><!--%-b:2%--></div><!--%-b:1%--><!--%-b:0%-->';
 
-    await render(createTemplate(`<h1>Hello {{@name}}</h1>`), {
+    await render(precompileTemplate(`<h1>Hello {{@name}}</h1>`, { strictMode: true }), {
       element: containerElement.querySelector('#test')!,
       rehydrate: true,
       args: {