[Glimmer2] Add support for target actions and migrate tests

Author: Joel Kang

packages/ember-glimmer/lib/component.js

@@ -5,6 +5,8 @@ import ViewStateSupport from 'ember-views/mixins/view_state_support';
 import InstrumentationSupport from 'ember-views/mixins/instrumentation_support';
 import AriaRoleSupport from 'ember-views/mixins/aria_role_support';
 import ViewMixin from 'ember-views/mixins/view_support';
+import ActionSupport from 'ember-views/mixins/action_support';
+import TargetActionSupport from 'ember-runtime/mixins/target_action_support';
 import EmberView from 'ember-views/views/view';
 import symbol from 'ember-metal/symbol';
 import EmptyObject from 'ember-metal/empty_object';
@@ -36,17 +38,22 @@ const Component = CoreView.extend(
   ClassNamesSupport,
   InstrumentationSupport,
   AriaRoleSupport,
+  TargetActionSupport,
+  ActionSupport,
   ViewMixin, {
     isComponent: true,
     layoutName: null,
     layout: null,
+    controller: null,
+    _controller: null,
 
     init() {
       this._super(...arguments);
       this._viewRegistry = this._viewRegistry || EmberView.views;
       this[DIRTY_TAG] = new DirtyableTag();
       this[ROOT_REF] = null;
       this[REFS] = new EmptyObject();
+      this.controller = this;
 
       // If a `defaultLayout` was specified move it to the `layout` prop.
       // `layout` is no longer a CP, so this just ensures that the `defaultLayout`

packages/ember-glimmer/lib/renderer.js

@@ -149,7 +149,7 @@ class Renderer {
   appendTo(view, target) {
     let env = this._env;
     let self = new RootReference(view);
-    let dynamicScope = new DynamicScope({ view });
+    let dynamicScope = new DynamicScope({ view, controller: view.controller });
 
     env.begin();
     let result = view.template.asEntryPoint().render(self, env, { appendTo: target, dynamicScope });

packages/ember-glimmer/lib/syntax/curly-component.js

@@ -6,6 +6,8 @@ import processArgs from '../utils/process-args';
 import { getOwner } from 'container/owner';
 import { privatize as P } from 'container/registry';
 import get from 'ember-metal/property_get';
+import { ComponentDefinition } from 'glimmer-runtime';
+import Component from '../component';
 
 const DEFAULT_LAYOUT = P`template:components/-default`;
 
@@ -78,6 +80,13 @@ class CurlyComponentManager {
     dynamicScope.view = component;
     parentView.appendChild(component);
 
+    if (parentView.controller) {
+      dynamicScope.controller = parentView.controller;
+    }
+
+    component._controller = dynamicScope.controller;
+
+
     component.trigger('didInitAttrs', { attrs });
     component.trigger('didReceiveAttrs', { newAttrs: attrs });
     component.trigger('willInsertElement');
@@ -226,9 +235,6 @@ class CurlyComponentManager {
 
 const MANAGER = new CurlyComponentManager();
 
-import { ComponentDefinition } from 'glimmer-runtime';
-import Component from '../component';
-
 function tagName(vm) {
   let { tagName } = vm.dynamicScope().view;
 

packages/ember-glimmer/lib/syntax/outlet.js

@@ -128,8 +128,10 @@ const TOP_LEVEL_MANAGER = new TopLevelOutletComponentManager();
 
 class OutletComponentManager extends AbstractOutletComponentManager {
   create(definition, args, dynamicScope) {
-    let outletState = dynamicScope.outletState = dynamicScope.outletState.get(definition.outletName);
-    return outletState.value();
+    let outletStateReference = dynamicScope.outletState = dynamicScope.outletState.get(definition.outletName);
+    let outletState = outletStateReference.value();
+    dynamicScope.controller = outletState.render.controller;
+    return outletState;
   }
 }
 

packages/ember-glimmer/lib/utils/process-args.js

@@ -4,6 +4,7 @@ import { assert } from 'ember-metal/debug';
 import EmptyObject from 'ember-metal/empty_object';
 import { ARGS } from '../component';
 import { UPDATE } from './references';
+import { MUTABLE_CELL } from 'ember-views/compat/attrs-proxy';
 
 export default function processArgs(args, positionalParamsDefinition) {
   if (!positionalParamsDefinition || positionalParamsDefinition.length === 0 || args.positional.length === 0) {
@@ -65,8 +66,6 @@ class SimpleArgs {
   }
 }
 
-const MUTABLE_CELL = symbol('MUTABLE_CELL');
-
 export function isCell(val) {
   return val && val[MUTABLE_CELL];
 }

packages/ember-glimmer/tests/integration/application/rendering-test.js

@@ -241,6 +241,29 @@ moduleFor('Application test: rendering', class extends ApplicationTest {
     });
   }
 
+  ['@test it should have the right controller in scope for the route template']() {
+    this.router.map(function() {
+      this.route('a');
+      this.route('b');
+    });
+
+    this.registerController('a', Controller.extend({
+      value: 'a'
+    }));
+
+    this.registerController('b', Controller.extend({
+      value: 'b'
+    }));
+
+    this.registerTemplate('a', '{{value}}');
+    this.registerTemplate('b', '{{value}}');
+
+    return this.visit('/a').then(() => {
+      this.assertText('a');
+      return this.visit('/b');
+    }).then(() => this.assertText('b'));
+  }
+
   ['@test it should update correctly when the controller changes'](assert) {
     this.router.map(function() {
       this.route('color', { path: '/colors/:color' });

packages/ember-glimmer/tests/integration/components/dynamic-components-test.js

@@ -399,7 +399,7 @@ moduleFor('Components test: dynamic components', class extends RenderingTest {
     this.assertText('foo-bar Caracas Caracas arepas!');
   }
 
-  ['@htmlbars component helper with actions'](assert) {
+  ['@test component helper with actions'](assert) {
     this.registerComponent('inner-component', {
       template: 'inner-component {{yield}}',
       ComponentClass: Component.extend({