[FEATURE glimmer-custom-component-manager] Custom Component Manager #15254

twokul · 2017-05-19T15:11:38Z

This is the first step towards opening up new APIs for Ember.js community as per
Custom Components RFC.

This will allow the following:

add-on authors can now start experimenting with Glimmer API while continue to support existing Ember.js components
developers will be able to opt into using custom component managers

This change should be considered cutting-edge and introduced behind a feature flag GLIMMER_CUSTOM_COMPONENT_MANAGER.

To enable this feature flag in config/environment.js of your Ember application:

module.exports = function(environment) {
  let ENV = {
    ...
    EmberENV: {
      FEATURES: {
        'glimmer-custom-component-manager': true
      }
    }
  };

  ...

  return ENV;
};

Or in Glimmer application, config/environment.js:

module.exports = function(environment) {
  let ENV = {
    ...

    GlimmerENV: {
      FEATURES: {
        'glimmer-custom-component-manager': true
      }
    }
  };

  return ENV;
};

After that, you should be able to opt into registering your own component managers:

for applications

App with classic structure:

my-app/
  component-managers/
    nyan.js
  components/
  templates/
    components/
      nyan-cat.hbs

{{!- tempates/components/nyan-cat.hbs -}}
{{use-component-manager "nyan"}}

<h1>🐱</h1>

App with Module Unification:

my-app/
  src/
    ui/
      component-managers/
        nyan.js
      components/
        nyan-cat/
          template.hbs

{{!- src/ui/components/nyan-cat.hbs -}}
{{use-component-manager "nyan"}}

<h1>🐱</h1>

for add-ons

nyan-cat-addon/
  addon/
    component-managers/
      glimmer.js
  app/
    templates/
      components/
        nyan-cat.hbs

rwjblue · 2017-05-19T15:13:24Z

packages/ember-glimmer/lib/environment.js

+          let managerId = layout && layout.meta.managerId;
+
+          if (managerId) {
+            customManager = owner.resolveRegistration(`component-manager:${managerId}`);


I think in general we want either .lookup or .factoryFor().class instead of resolveRegistration.

rwjblue · 2017-05-19T15:15:01Z

packages/ember-glimmer/lib/index.js

 export { setupEngineRegistry, setupApplicationRegistry } from './setup-registry';
 export { DOMChanges, NodeDOMTreeConstruction, DOMTreeConstruction } from './dom';
 export { registerMacros as _registerMacros, experimentalMacros as _experimentalMacros } from './syntax';
+export { default as ExperimentalComponentManager } from './syntax/experimental-component-manager';


Not sure we need to export this, I don't think that we want folks extending from our curly component manager. We want to allow them to create their own (which is basically "just" implement XYZ hooks and go to town).

rwjblue · 2017-05-19T15:16:22Z

packages/ember-glimmer/lib/syntax/experimental-component-manager.js

@@ -0,0 +1,308 @@
+import { OWNER } from 'ember-utils';


Not sure about this file naming. I'd prefer packages/ember-glimmer/lib/component-managers/curly.js.

rwjblue · 2017-05-19T15:18:00Z

packages/ember-glimmer/tests/integration/custom-component-manager-test.js

+      this.owner.register('component-manager:glimmer', new TestComponentManager());
+      this.registerComponent('foo-bar', {
+        template: '{{use-component-manager "glimmer"}}hello',
+        managerId: 'glimmer'


We probably shouldn't use glimmer here, because we actually intend to use that managerId in the future and it may confuse future readers of the test about what we are talking...

rwjblue · 2017-05-19T15:18:39Z

packages/ember-glimmer/tests/integration/custom-component-manager-test.js

@@ -0,0 +1,27 @@
+import { moduleFor, RenderingTest } from '../utils/test-case';
+import TestComponentManager from './helpers/test-component-manager';


I'd prefer to just implement a super simple manager in this file directly, for now we don't have a need for it across many files...

We should not attempt to extend from the curly manager, but create a new one that satisifies this interface.

rwjblue · 2017-05-19T15:25:48Z

packages/ember-glimmer/tests/integration/custom-component-manager-test.js

+
+      this.render('{{foo-bar}}');
+
+      this.assertComponentElement(this.firstChild, { content: 'hello' });


These assertions should somehow ensure that the correct manager was used. Perhaps the manager could add a special attribute to the element (for example) that you could assert is present?

rwjblue · 2017-05-19T15:27:00Z

packages/ember-template-compiler/lib/plugins/extract-pragma-tag.js

@@ -0,0 +1,26 @@
+const PRAGMA_TAG = 'use-component-manager';


How does this play with ember-cli/ember-cli-htmlbars#114? It seems like only one or the other should be required, not both.

I think it would make more sense to leave AST transform here.

rwjblue · 2017-05-19T15:28:20Z

packages/ember-template-compiler/lib/system/compile-options.js

  if (options.moduleName) {
    let meta = options.meta;
    meta.moduleName = options.moduleName;
+    meta.managerId = options.managerId;


This block is only meant as a fallback for older versions of ember-cli-htmlbars which passed { moduleName: 'here' } instead of { meta: { moduleName: 'here' } }. No need to put managerId here like this.

This is the first step towards opening up new APIs for Ember.js community as per [Custom Components RFC](https://github.com/emberjs/rfcs/blob/custom-components/text/0000-custom-components.md). This will allow the following: + add-on authors can now start experimenting with Glimmer API while continue to support existing Ember.js components + developers will be able to _opt into_ using custom component managers This change should be considered cutting-edge and introduced behind a feature flag `GLIMMER_CUSTOM_COMPONENT_MANAGER`. To enable this feature flag in `config/environment.js` of your Ember application: ```js module.exports = function(environment) { let ENV = { ... EmberENV: { FEATURES: { 'glimmer-custom-component-manager': true } } }; ... return ENV; }; ``` Or in Glimmer application, `config/environment.js`: ```js module.exports = function(environment) { let ENV = { ... GlimmerENV: { FEATURES: { 'glimmer-custom-component-manager': true } } }; return ENV; }; ``` After that, you should be able to opt into registering your own component managers: + for applications App with classic structure: ``` my-app/ component-managers/ nyan.js components/ templates/ components/ nyan-cat.hbs ``` ```hbs {{!- tempates/components/nyan-cat.hbs -}} {{use-component-manager "nyan"}} <h1>🐱</h1> ``` App with Module Unification: ``` my-app/ src/ ui/ component-managers/ nyan.js components/ nyan-cat/ template.hbs ``` ```hbs {{!- src/ui/components/nyan-cat.hbs -}} {{use-component-manager "nyan"}} <h1>🐱</h1> ``` + for add-ons ``` nyan-cat-addon/ addon/ component-managers/ glimmer.js app/ templates/ components/ nyan-cat.hbs ```

rwjblue · 2017-05-22T22:23:17Z

LGTM, we can land once green. Can you comment on the RFC PR mentioning the initial implementation here?

rwjblue · 2017-05-22T23:58:55Z

Thanks for working on this @twokul!

twokul · 2017-05-23T00:05:55Z

@rwjblue sure thing. thanks for reviewing!

twokul changed the title ~~[FEATURE glimmer-custom-component-manager] Custom Component Manager~~ [WIP] [FEATURE glimmer-custom-component-manager] Custom Component Manager May 19, 2017

rwjblue reviewed May 19, 2017

View reviewed changes

rwjblue mentioned this pull request May 20, 2017

ember 2.13.0-beta.1 is broken (using the glimmer 2 VM v0.22) adopted-ember-addons/ember-cli-hot-loader#48

Closed

twokul changed the title ~~[WIP] [FEATURE glimmer-custom-component-manager] Custom Component Manager~~ [FEATURE glimmer-custom-component-manager] Custom Component Manager May 20, 2017

twokul mentioned this pull request May 22, 2017

Introduces ability to extract pragma tag from the template ember-cli/ember-cli-htmlbars#114

Closed

rwjblue approved these changes May 22, 2017

View reviewed changes

rwjblue merged commit d8e5b24 into emberjs:master May 22, 2017

homu mentioned this pull request May 23, 2017

Bump glimmer-vm packages to 0.24. #15245

Merged

29 tasks

twokul deleted the custom-component-manager branch May 23, 2017 00:06

twokul mentioned this pull request May 23, 2017

Custom Components API emberjs/rfcs#213

Merged

		@@ -0,0 +1,27 @@
		import { moduleFor, RenderingTest } from '../utils/test-case';
		import TestComponentManager from './helpers/test-component-manager';


		this.render('{{foo-bar}}');

		this.assertComponentElement(this.firstChild, { content: 'hello' });

Uh oh!

[FEATURE glimmer-custom-component-manager] Custom Component Manager #15254

[FEATURE glimmer-custom-component-manager] Custom Component Manager #15254

Uh oh!

Conversation

twokul commented May 19, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rwjblue commented May 22, 2017

Uh oh!

rwjblue commented May 22, 2017

Uh oh!

twokul commented May 23, 2017

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

twokul commented May 19, 2017 •

edited

Loading