Convert AST transform to functional style, fixing Ember 4

index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-const EcsyModiferTransform = require('./lib/ast-transform');
-
 module.exports = {
   name: require('./package').name,
 
@@ -22,15 +20,13 @@ module.exports = {
   },
 
   _buildPlugin() {
+    const ecsyModiferTransform = require('./lib/ast-transform');
+
     return {
       name: 'ember-ecsy-modifier',
-      plugin: EcsyModiferTransform,
-      baseDir() {
-        return __dirname;
-      },
-      cacheKey() {
-        return 'ember-ecsy-modifier';
-      },
+      plugin: ecsyModiferTransform,
+      baseDir: ecsyModiferTransform.baseDir,
+      cacheKey: ecsyModiferTransform.cacheKey,
     };
   },
 };

lib/ast-transform.js

@@ -1,31 +1,30 @@
 'use strict';
 
-class EcsyModifierTransform {
-  transform(ast) {
-    const b = this.syntax.builders;
+module.exports = function ecsyModifierTransform(env) {
+  const b = env.syntax.builders;
 
-    // in order to debug in https://astexplorer.net/#/gist/85496faa66b4eea93ac890558477b954/c982a29ac733abe24d174815f3d41f925e93866e
-    // **** copy from here ****
-    function getValidAttr(k, v) {
-      let value;
+  function getValidAttr(k, v) {
+    let value;
 
-      switch (v.type) {
-        case 'SubExpression':
-          value = b.mustache(v.path, v.params, v.hash);
-          break;
-        case 'StringLiteral':
-          value = b.text(v.value);
-          break;
-        default:
-          value = b.mustache(v);
-          break;
-      }
-
-      return b.attr(`@${k}`, value);
+    switch (v.type) {
+      case 'SubExpression':
+        value = b.mustache(v.path, v.params, v.hash);
+        break;
+      case 'StringLiteral':
+        value = b.text(v.value);
+        break;
+      default:
+        value = b.mustache(v);
+        break;
     }
 
-    // TODO: somehow get the name of the block param that is used in the root component
-    const visitor = {
+    return b.attr(`@${k}`, value);
+  }
+
+  return {
+    name: 'ember-ecsy-modifier',
+
+    visitor: {
       ElementNode(node) {
         const tagParts = node.tag.split('.');
 
@@ -93,13 +92,14 @@ class EcsyModifierTransform {
         node.children = [...node.children, ...ecsyComponentHelpers];
         node.modifiers = [];
       },
-    };
-    // **** copy to here ****
-
-    this.syntax.traverse(ast, visitor);
+    },
+  };
+};
 
-    return ast;
-  }
-}
+module.exports.baseDir = function () {
+  return __dirname;
+};
 
-module.exports = EcsyModifierTransform;
+module.exports.cacheKey = function () {
+  return 'ember-ecsy-modifier';
+};

package.json

@@ -32,7 +32,7 @@
     "@babylonjs/core": "^4.2.0",
     "@babylonjs/inspector": "^4.2.0",
     "@babylonjs/loaders": "^4.2.0",
-    "@ember/render-modifiers": "^1.0.2",
+    "@ember/render-modifiers": "^2.0.0",
     "@glimmer/env": "^0.1.7",
     "@glimmer/tracking": "^1.0.4",
     "ecsy": "^0.4.2",
@@ -50,7 +50,7 @@
   },
   "devDependencies": {
     "@ember/optional-features": "^2.0.0",
-    "@ember/test-helpers": "^2.4.2",
+    "@ember/test-helpers": "^2.6.0",
     "@embroider/test-setup": "^0.43.5",
     "@glimmer/component": "^1.0.4",
     "@glimmer/tracking": "^1.0.4",
@@ -69,10 +69,8 @@
     "ember-cli-sri": "^2.1.1",
     "ember-cli-terser": "^4.0.2",
     "ember-cli-typescript-blueprints": "^3.0.0",
-    "ember-css-modules": "^1.5.0",
     "ember-disable-prototype-extensions": "^1.1.3",
     "ember-export-application-global": "^2.0.1",
-    "ember-get-config": "^0.3.0",
     "ember-load-initializers": "^2.1.2",
     "ember-maybe-import-regenerator": "^0.1.6",
     "ember-page-title": "^6.2.2",

tests/integration/components/ecsy/ecsy-component-test.ts

@@ -9,7 +9,11 @@ module('Integration | Component | ecsy/component', function (hooks) {
   setupRenderingTest(hooks);
   const getData = setupDataDumper(hooks);
 
-  test('it add component to entity', async function (assert) {
+  hooks.beforeEach(function () {
+    this.set('systems', []);
+  });
+
+  test('it adds component to entity', async function (assert) {
     class DummyComponent extends Component<DummyComponent> {
       foo?: string;
 
@@ -21,7 +25,7 @@ module('Integration | Component | ecsy/component', function (hooks) {
     this.set('components', new Map([['dummy', DummyComponent]]));
 
     await render(hbs`
-      <Ecsy @systems={{array}} @components={{this.components}} as |world|>
+      <Ecsy @systems={{this.systems}} @components={{this.components}} as |world|>
         {{dump world.world}}
         <world.Entity {{dummy foo="bar"}}/>
       </Ecsy>
@@ -50,7 +54,7 @@ module('Integration | Component | ecsy/component', function (hooks) {
     this.set('instance', instance);
 
     await render(hbs`
-      <Ecsy @systems={{array}} @components={{this.components}} as |world|>
+      <Ecsy @systems={{this.systems}} @components={{this.components}} as |world|>
         {{dump world.world}}
         <world.Entity {{dummy foo=this.instance}}/>
       </Ecsy>

tests/integration/components/ecsy/ecsy-entity-test.ts

@@ -8,11 +8,15 @@ module('Integration | Component | ecsy/entity', function (hooks) {
   setupRenderingTest(hooks);
   const getData = setupDataDumper(hooks);
 
+  hooks.beforeEach(function () {
+    this.set('systems', []);
+  });
+
   test('it adds entity', async function (assert) {
     this.set('show', false);
     this.set('components', new Map());
     await render(hbs`
-      <Ecsy @systems={{array}} @components={{this.components}} as |world|>
+      <Ecsy @systems={{this.systems}} @components={{this.components}} as |world|>
         {{dump world.world}}
         {{#if this.show}}
           <world.Entity />