Made sample app code less verbose

Author: Erin Singer

test-packages/demo-untyped-glimmerx-app/src/App.js

@@ -1,18 +1,45 @@
 import Component, { hbs, tracked } from '@glimmerx/component';
-import { action } from '@glimmerx/modifier';
+import { on, action } from '@glimmerx/modifier';
+
 import './App.css';
+import GreetingHeader from './GreetingHeader';
+
+function formatName(name) {
+  return `${name} the Great and Powerful`;
+}
+
+class FormattedName extends Component {
+  static template = hbs`
+    {{formatName this.args.name}}!
+  `;
 
-import Carousel from './Carousel';
+  get name() {
+    return this.args.name || 'glimmerx';
+  }
+}
+
+const I_AM_CONSTANT = 'and I am a constant';
+const ComponentAsArg = hbs`
+  <h1>I am {{@title}}</h1>
+  {{I_AM_CONSTANT}}
+`;
+export default class HelloWorld extends Component {
+  static template = hbs`
+    <ComponentAsArg @title={{component FormattedName name="Oz"}}/>
+    <GreetingHeader @greeting="hello"/>
+    <IncrementableButton @startCount={{100}}/>
+  `;
+}
 
-export default class App extends Component {
-  @tracked count = 1;
+class IncrementableButton extends Component {
+  @tracked count = this.args.startCount;
 
   @action increment() {
     this.count++;
   }
 
   static template = hbs`
-    <h1>Welcome to the untyped JS GlimmerX demo app!</h1>
-    <Carousel @title="My Awesome Carousel"/>
+    <p>You have clicked the button {{this.count}} times.</p>
+    <button {{on "click" this.increment}}>Click</button>
   `;
 }

test-packages/demo-untyped-glimmerx-app/src/Carousel.css

@@ -0,0 +1,16 @@
+import Component from '@glimmerx/component';
+import { hbs } from '@glimmerx/component';
+import { helper } from '@glimmerx/helper';
+
+const or = helper(([a, b]) => a || b);
+
+export default class GreetingHeader extends Component {
+  static template = hbs`
+    <h1>{{@greeting}}, {{or @target 'glimmerx'}}</h1>
+    <img src={{this.src}}/>
+  `;
+
+  get src() {
+    return this.args.src || 'https://picsum.photos/250';
+  }
+}

test-packages/demo-untyped-glimmerx-app/src/Carousel.js

@@ -6,6 +6,6 @@ module('App test', () => {
   test('it works', async (assert) => {
     await renderComponent(App);
 
-    assert.dom('h1').containsText('Welcome to the untyped JS GlimmerX demo app!');
+    assert.dom('h1').containsText('I am Oz the Great and Powerful!');
   });
 });