Updates to the cheat sheet for the Octane launch

code/constructors/classic.js

@@ -3,6 +3,6 @@ import Component from '@ember/component';
 export default Component.extend({
     init() {
         this._super(...arguments)
-        this.set('bestActor', "Milo")
+        this.set('answer', 42)
     }
 });

code/constructors/octane.js

@@ -2,7 +2,7 @@ import Component from '@glimmer/component';
 
 export default class SomeComponent extends Component {
   constructor() {
-    super();
-    this.bestActor = 'Milo';
+    super(...arguments);
+    this.answer = 42;
   }
 }

code/ddau/classic-child.handlebars

@@ -0,0 +1,5 @@
+{{!-- child-component.hbs --}}
+
+<button {{action "plusOne"}}>
+  Click Me
+</button>

code/ddau/classic-child.js

@@ -0,0 +1,12 @@
+// child-component.js
+
+import Component from '@ember/component';
+
+export default Component.extend({
+  actions: {
+    plusOne() {
+      let count = this.get("count");
+      this.set("count", count)
+    }
+  }
+});

code/ddau/classic-parent.handlebars

@@ -0,0 +1,3 @@
+{{!-- parent-component.hbs --}}
+{{child-component count=count}}
+Count: {{this.count}}

code/ddau/classic-parent.js

@@ -0,0 +1,6 @@
+// parent-component.js
+import Component from '@ember/component';
+
+export default Component.extend({
+  count: 0
+});

code/ddau/octane-child.handlebars

@@ -0,0 +1,5 @@
+{{!-- child-component.hbs --}}
+
+<button {{on "click" @plusOne}}>
+  Click Me
+</button>

code/ddau/octane-parent.handlebars

@@ -0,0 +1,4 @@
+{{!-- parent-component.hbs --}}
+
+<ChildComponent @plusOne={{this.plusOne}} />
+Count: {{this.count}}

code/ddau/octane-parent.js

@@ -0,0 +1,13 @@
+// parent-component.js
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class ParentComponent extends Component {
+  @tracked count = 0;
+
+  @action
+  plusOne() {
+    this.count += 1;
+  }
+}

code/element-id/classic.handlebars

@@ -0,0 +1,8 @@
+<div class="form-group">
+  <label for="textInput-{{elementId}}">{{inputLabelText}}</label>
+  <input 
+    id="textInput-{{elementId}}"
+    name={{inputName}} 
+    type="text" 
+  />
+</div>

code/element-id/classic.js

@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  didInsertElement() {
+    console.log("Elememt id ", this.elementId)
+  }
+});

code/element-id/octane.handlebars

@@ -0,0 +1,8 @@
+<div class="form-group">
+  <label for={{this.inputId}}>{{@inputLabelText}}</label>
+  <input 
+    id={{this.inputId}} 
+    name={{@inputName}} 
+    type="text" 
+  />
+</div>

code/element-id/octane.js

@@ -0,0 +1,6 @@
+import Component from '@glimmer/component';
+import { guidFor } from '@ember/object/internals';
+
+export default class InputTextComponent extends Component {
+  inputId = 'textInput-' + guidFor(this); 
+}

code/file-structure/classic.text

@@ -0,0 +1,6 @@
+app/
+  components/
+    my-component.js
+  templates/
+    components/
+      my-component.hbs

code/file-structure/octane.text

@@ -0,0 +1,5 @@
+app/
+  components/
+    my-component.js
+    my-component.hbs
+

code/generating-component/classic.shell

@@ -0,0 +1 @@
+ember generate component

code/generating-component/octane.shell

@@ -0,0 +1,8 @@
+# -gc stands for glimmer component
+ember generate component my-component -gc
+
+# -cc stands for classic component
+ember generate component my-component -cc
+
+# See the full set of options with this:
+ember generate component --help

code/get-and-set/classic.js

@@ -0,0 +1,12 @@
+// child-component.js
+
+import Component from '@ember/component';
+
+export default Component.extend({
+  count: 0,
+  actions: {
+    minusOne() {
+      this.set("count", this.count - 1)
+    }
+  }
+});

code/get-and-set/octane.js

@@ -0,0 +1,12 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class SomeComponent extends Component {
+  @tracked count = 0;
+
+  @action
+  minusOne() {
+    this.count = this.count - 1
+  }
+}

code/js-boilerplate/classic.js

@@ -3,7 +3,5 @@ import Component from '@ember/component';
 export default Component.extend({
   init() {
     this._super(...arguments);
-
-    // initialize
   },
 });

code/js-properties/classic.js

@@ -1,6 +1,6 @@
 import Component from '@ember/component';
 
 export default Component.extend({
-  fireNation: 'Zuko',
-  airNation: 'Tenzen',
+  min: 0,
+  max: 100,
 });

code/js-properties/octane.js

@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
 
 export default class SomeComponent extends Component {
-  fireNation = 'Zuko';
-  airNation = 'Tenzen';
+  min = 0;
+  max = 100;
 }

code/mixins/classic.js

@@ -0,0 +1,6 @@
+import Component from '@ember/component';
+import SomeMixin from 'some-addon';
+
+export default Component.extend(SomeMixin, {
+  // ...
+});

code/model-access/classic.handlebars

@@ -0,0 +1 @@
+First name: {{model.firstName}}

code/model-access/octane.handlebars

@@ -0,0 +1 @@
+First name: {{@model.firstName}}

code/template-arguments-default/classic.handlebars

@@ -1,4 +1,4 @@
-{{my-component avatar=avatar}}
+{{my-component answer=answer}}
 
 <!-- my-component's template -->
-{{avatar}}
+{{answer}}

code/template-arguments-default/classic.js

@@ -1,5 +1,5 @@
 import Component from '@ember/component';
 
 export default Component.extend({
-  avatar: 'default',
+  answer: 42,
 });

code/template-arguments-default/octane.handlebars

@@ -1,4 +1,4 @@
-<MyComponent @avatar={{this.avatar}} />
+<MyComponent @answer={{this.answer}} />
 
 <!-- my-component's template -->
-{{this.avatar}}
+{{this.answer}}

code/template-arguments-default/octane.js

@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 
 export default class MyComponent extends Component {
-  get avatar() {
-    return this.args.avatar || 'default';
+  get answer() {
+    return this.args.answer || 42;
   }
 }

code/template-arguments-named/classic.handlebars

@@ -1 +1 @@
-{{my-component avatar="aang"}}
+{{my-component answer=42}}

code/template-arguments-named/octane.handlebars

@@ -1 +1 @@
-<MyComponent @avatar="aang" />
+<MyComponent @answer={{42}} />

code/template-arguments-this/classic.handlebars

@@ -1 +1 @@
-{{my-component avatar=avatar}}
+{{my-component answer=answer}}

code/template-arguments-this/octane.handlebars

@@ -1 +1 @@
-<MyComponent @avatar={{this.avatar}} />
+<MyComponent @answer={{this.answer}} />

code/template-named/classic.handlebars

@@ -1 +1 @@
-{{avatar}} is the master of all four elements.
+{{answer}} is the answer.

code/template-named/octane.handlebars

@@ -1 +1 @@
-{{@avatar}} is the master of all four elements.
+{{@answer}} is the answer.

code/template-this/classic.handlebars

@@ -1 +1 @@
-{{bestEpisode}} is my favorite
+{{answer}} is the answer.

code/template-this/octane.handlebars

@@ -1 +1 @@
-{{this.bestEpisode}} is my favorite
+{{this.answer}} is the answer.