Biophilic Glimmer Component Format

biophilic-glimmer-component.md

Idea for Ember Component Format/Syntax

The basis is, turn working and existing html into a glimmer component.

The html might look like this:

<!-- woohoo.html -->
<script>

const sayHello = () => {
  console.log('hello');
}

document.getElementById('woohoo').addEventListener('click', sayHello);
</script>

<style>
button {
  border: 1px solid blue;
  color: blue;
  background: white;
}
</style>

<button id="woohoo">Woohoo</button>

It has three elements to it:

• markup
• styling
• behavior

Changing the file name from woohoo.html to woohoo.gc would make it continue to work !!!! (that's the whole point of this design)

Now let's give it glimmer/ember syntax specials:

{{! woohoo.gc }}

<script>
import { on } from 'whereever/glimmer/has/it';

const sayHello = () => {
  console.log('hello');
}
</script>

<style>
button {
  border: 1px solid blue;
  color: blue;
  background: white;
}
</style>

<button {{on "click" sayHello}}>Woohoo</button>

That's it =)