Glimmer Big-Picture Integration Checklist #12907

We will try to keep this up-to-date during integration. It enumerates the big-picture integration items.

If you hit a not-yet-completed item on this list while trying to help, it's probably better to wait for the initial integration work to finish. On the flip side, if initial integration work for a given feature has finished, it's probably fine to smooth out edge cases and do polish work.

• top-level templates
  • {{foo.bar}} for basic POJOs Integrate with Glimmer reference interface #12901
  • {{foo.bar}} using Ember.get (computed properties, etc.) Integrate with Glimmer reference interface #12901
  • Handle {{foo}} where foo resolves to undefined, null, etc Fix Glimmer 2 content normalization #13141
  • Align glimmer and ember semantics for attrs vs props
• syntax
  • {{#if}} Some initial tests for {{#if}} and {{#unless}} #12912, Implement Ember semantics for {{#if}}/{{#unless}} #12914 (need help reviewing/porting the rest of the tests)
  • {{#unless}} Some initial tests for {{#if}} and {{#unless}} #12912, Implement Ember semantics for {{#if}}/{{#unless}} #12914 (need help reviewing/porting the rest of the tests)
  • {{#with}} with-tests #12919, [Glimmer2] More with tests #12927
  • {{#each}} Implement Ember semantics for Glimmer {{#each}} #13048
  • {{#each-in}}
• helpers
  • "simple" (shorthand/function) helpers Port {{concat}} helper test to ember-glimmer #12910
  • "class-based" ("stateful") helpers Implement class-based helpers in Glimmer #13087
  • builtin helpers Port {{concat}} helper test to ember-glimmer #12910 (e.g. {{concat}})
    • if [Glimmer2] inline if #12920 Merge + minor cleanup for #12920 #13009
    • unless Glimmer2 inline {{unless}} #13019 Glimmer2 inline {{unless}} #13092
    • hash [Glimmer2] Migrating hash helper #13093
    • unbound [GLIMMER2] Moves unbound tests #13137
    • hasBlock
    • link-to
  • user helpers lookup Implement user-helpers resolution #12917 (need help reviewing/porting the rest of the tests)
• components
  • curly components Basic (curly/classic) components support #12948 Use new glimmer engine APIs for building component layout #12962 (need help reviewing/porting the rest of the tests – note that a lot of features, are not implemented yet: see below)
  • glimmer components (<angle-brackets>)
  • {{component}} Glimmer dynamic components (component helpers) #13057
  • view state transition Implement Glimmer teardown #13008
  • view hierarchy Track view-tree hierarchy in Glimmer #12978
  • teardown Implement Glimmer teardown #13008
  • old lifecycle hooks (didInsertElement, etc.) [Glimmer2] Move willDestroyElement tests. #13156 [Glimmer 2] Implement component lifecycle hooks #13168
  • new lifecycle hooks (willRender, etc.)
  • attributeBindings, classNameBindings, classNames [Glimmer 2] Implement attribute/classNameBindings #13160
  • tagName [Glimmer 2] Add support for dynamic tagName #13145
  • this.element Implement this.element for components #12975
  • this.$() Implement Glimmer teardown #13008
  • {{yield}}-ing block arguments
• partials
• {{render}}
• element helpers ({{action}} etc.)
• legacy functionality when using addons
  • {{view}} Track view-tree hierarchy in Glimmer #12978
  • {{view.prop}} Track view-tree hierarchy in Glimmer #12978
  • {{controller}}
• {{outlet}} Implement {{outlet}} in Glimmer #13067
• runloop integration (auto rerender after set, etc – this is shimmed by forcing a rerender inside this.runTask in the test cases, so it shouldn't be an immediate blocker)
• framework-level integration (using ember-glimmer to render route templates, injecting the ember-glimmer renderer to components/views etc)
• make it possible to switch between the two engines in apps by toggling the feature flag

Available to work on (roughly ordered from easiest to most difficult):

• Add tests for rending false, undefined, null etc in content-test.js, similar to

  ember.js/packages/ember-glimmer/tests/integration/syntax/if-unless-test.js

  Lines 42 to 91 in 3ee1cfa

  	const BASIC_TRUTHY_TESTS = {
  	cases: [
  	true,
  	' ',
  	'hello',
  	'false',
  	'null',
  	'undefined',
  	1,
  	['hello'],
  	emberA(['hello']),
  	{},
  	{ foo: 'bar' },
  	EmberObject.create(),
  	EmberObject.create({ foo: 'bar' }),
  	/*jshint -W053 */
  	new String('hello'),
  	new String(''),
  	new Boolean(true),
  	new Boolean(false),
  	new Date()
  	/*jshint +W053 */
  	],
  	generate(value) {
  	return {
  	[`@test it should consider ${JSON.stringify(value)} truthy`]() {
  	this.renderValues(value);
  	this.assertText('T1');
  	this.inZone(() => this.rerender());
  	this.assertText('T1');
  	this.inZone(() => set(this.context, 'cond1', false));
  	this.assertText('F1');
  	this.inZone(() => set(this.context, 'cond1', value));
  	this.assertText('T1');
  	}
  	};
  	}
  	};

  . This would fail in glimmer atm, so it needs to be @htmlbars.
• Implement inline if/else helpers (see comments in Implement Ember semantics for {{#if}}/{{#unless}} #12914).
• Port remaining built-in helpers. Should be similar to Port {{concat}} helper test to ember-glimmer #12910. Some helpers are easier than the others.
• Implement {{#with}} (this is slightly more difficult, but generally follows the footsteps of Make {{#if}} and {{#unless}} a built-in syntax glimmerjs/glimmer-vm#61 and Implement Ember semantics for {{#if}}/{{#unless}} #12914).
• Review and port remaining tests in if_unless_test.js (see comments in Implement Ember semantics for {{#if}}/{{#unless}} #12914). This requires carefully analysis of the tests and git history digging.