HTML-first .gc syntax

index.js

@@ -58,6 +58,9 @@ module.exports = {
 
   setupPreprocessorRegistry(type, registry) {
     if (type === 'parent') {
+      let GlimmerComponentPreprocessor = require('./lib/gc-preprocessor-plugin');
+      registry.add('js', new GlimmerComponentPreprocessor());
+
       let TemplateImportPreprocessor = require('./lib/preprocessor-plugin');
       registry.add(
         'js',

lib/gc-preprocessor-plugin.js

@@ -0,0 +1,42 @@
+const stew = require('broccoli-stew');
+
+const IMPORT = `import { hbs } from 'ember-template-imports';`;
+
+module.exports = class GlimmerComponentPreprocessor {
+  constructor() {
+    this.name = 'glimmer-component-preprocessor';
+  }
+
+  toTree(tree) {
+    let compiled = stew.map(tree, `**/*.gc`, (contents) => {
+      const scriptRegex = /<script[\s\S]*?>([\s\S]*?)<\/script>/i;
+      const scriptTag = contents.match(scriptRegex);
+
+      if (scriptTag) {
+        const template = contents.replace(scriptRegex, '');
+        let script = scriptTag[1].trim();
+
+        // need to check for class here
+        const signatureRegex = /export default class [^{]*? {/gi;
+        const signature = script.match(signatureRegex);
+
+        if (signature) {
+          script = script.replace(
+            signature,
+            `${signature}\n  static template = hbs\`${template}\`;\n`
+          );
+
+          return `${IMPORT} ${script}`;
+        }
+
+        return `${IMPORT} ${script} export default hbs\`${template}\`;`;
+      }
+
+      return `${IMPORT} export default hbs\`${contents}\`;`;
+    });
+
+    return stew.rename(compiled, (name) => {
+      return name.replace(/\.gc$/, '.js');
+    });
+  }
+};

tests/dummy/app/components/gc-no-class.gc

@@ -0,0 +1,13 @@
+<script>
+  import { helper } from '@ember/component/helper';
+
+  const plusOne = helper(([num]) => num + 1);
+</script>
+
+Hello, I am
+<b>
+  bold
+</b>
+
+2 + 1 = {{plusOne 2}}
+!

tests/dummy/app/components/gc-template-only.gc

@@ -0,0 +1 @@
+Hello, I am <b>bold</b>!

tests/dummy/app/components/gc-test.gc

@@ -0,0 +1,33 @@
+<script>
+  import { helper } from '@ember/component/helper';
+  import { on } from '@ember/modifier';
+  import { action } from '@ember/object';
+  import Component from '@glimmer/component';
+  import { tracked } from '@glimmer/tracking';
+
+  const plusOne = helper(([num]) => num + 1);
+
+  export default class Foo extends Component {
+    @tracked counter;
+
+    @action
+    inc() {
+      this.counter++;
+    }
+
+    @action
+    dec() {
+      this.counter--;
+    }
+  }
+</script>
+
+2 + 1 = {{plusOne 2}}
+
+Counter: {{this.counter}}
+<button {{on 'click' this.inc}}>
+  +
+</button>
+<button {{on 'click' this.dec}}>
+  -
+</button>

tests/dummy/app/templates/application.hbs

@@ -1,6 +1,11 @@
-{{page-title "Dummy"}}
+{{page-title 'Dummy'}}
 
-<h2 id="title">Welcome to Ember</h2>
+<h2 id='title'>
+  Welcome to Ember
+</h2>
 
-<GjsTest/>
-<HbsTest/>
+<GjsTest />
+<HbsTest />
+<GcTemplateOnly />
+<GcNoClass />
+<GcTest />