Work work

Author: Windvis

blueprints/component/files/__root__/__templatepath__/__templatename__.gts

@@ -1,3 +1,13 @@
+<% if (componentClass === '@glimmer/component') {%>import Component from '@glimmer/component';
+
+<%= componentSignature %>
+export default class <%= classifiedModuleName %> extends Component<<%= classifiedModuleName %>Signature> {
+  <template>
+    {{yield}}
+  </template>
+}<%} else {%>import type { TOC } from '@ember/component/template-only';
+
+<%= componentSignature %>
 <template>
   {{yield}}
-</template>
+</template> satisfies TOC<<%= classifiedModuleName %>Signature>;<%}%>

blueprints/component/index.js

@@ -4,6 +4,7 @@ const chalk = require('chalk');
 const stringUtil = require('ember-cli-string-utils');
 const getPathOption = require('ember-cli-get-component-path-option');
 const normalizeEntityName = require('ember-cli-normalize-entity-name');
+const SilentError = require('silent-error');
 const { generateComponentSignature } = require('../-utils');
 
 const typescriptBlueprintPolyfill = require('ember-cli-typescript-blueprint-polyfill');
@@ -69,6 +70,18 @@ module.exports = {
       options.componentClass = '';
     }
 
+    if (options.componentAuthoringFormat === 'strict') {
+      if (options.componentClass === '@ember/component') {
+        throw new SilentError(
+          'The "@ember/component" component class cannot be used in combination with the "--strict" flag'
+        );
+      }
+
+      if (options.componentClass === '') {
+        options.componentClass = '@ember/component/template-only';
+      }
+    }
+
     return this._super.install.apply(this, arguments);
   },
 
@@ -193,6 +206,7 @@ module.exports = {
     }
 
     return {
+      classifiedModuleName,
       importTemplate,
       importComponent,
       componentSignature,

node-tests/blueprints/component-test.js

@@ -3,6 +3,7 @@
 const blueprintHelpers = require('ember-cli-blueprint-test-helpers/helpers');
 const setupTestHooks = blueprintHelpers.setupTestHooks;
 const emberNew = blueprintHelpers.emberNew;
+const emberGenerate = blueprintHelpers.emberGenerate;
 const emberGenerateDestroy = blueprintHelpers.emberGenerateDestroy;
 const modifyPackages = blueprintHelpers.modifyPackages;
 
@@ -27,11 +28,6 @@ const templateOnlyContents = `import templateOnly from '@ember/component/templat
 export default templateOnly();
 `;
 
-const templateTagContents = `<template>
-  {{yield}}
-</template>
-`;
-
 describe('Blueprint: component', function () {
   setupTestHooks(this);
 
@@ -278,9 +274,49 @@ describe('Blueprint: component', function () {
 
     it('component foo --strict', function () {
       return emberGenerateDestroy(['component', 'foo', '--strict'], (_file) => {
-        expect(_file('app/components/foo.gjs')).to.equal(templateTagContents);
+        expect(_file('app/components/foo.gjs')).to.equal(
+          fixture('component/template-only-component.gjs')
+        );
+      });
+    });
+
+    it('component foo --strict --component-class=@glimmer/component', function () {
+      return emberGenerateDestroy(
+        ['component', 'foo', '--strict', '--component-class=@glimmer/component'],
+        (_file) => {
+          expect(_file('app/components/foo.gjs')).to.equal(
+            fixture('component/glimmer-component.gjs')
+          );
+        }
+      );
+    });
+
+    it('component foo --strict --component-class=@ember/component', async function () {
+      await expect(
+        emberGenerate(['component', 'foo', '--strict', '--component-class=@ember/component'])
+      ).to.be.rejectedWith(
+        'The "@ember/component" component class cannot be used in combination with the "--strict" flag'
+      );
+    });
+
+    it('component foo --strict --typescript', function () {
+      return emberGenerateDestroy(['component', 'foo', '--strict', '--typescript'], (_file) => {
+        expect(_file('app/components/foo.gts')).to.equal(
+          fixture('component/template-only-component.gts')
+        );
       });
     });
+
+    it('component foo --strict --component-class=@glimmer/component --typescript', function () {
+      return emberGenerateDestroy(
+        ['component', 'foo', '--strict', '--component-class=@glimmer/component', '--typescript'],
+        (_file) => {
+          expect(_file('app/components/foo.gts')).to.equal(
+            fixture('component/glimmer-component.gts')
+          );
+        }
+      );
+    });
   });
 
   describe('in addon', function () {

node-tests/fixtures/component/glimmer-component.gjs

@@ -0,0 +1,7 @@
+import Component from '@glimmer/component';
+
+export default class Foo extends Component {
+  <template>
+    {{yield}}
+  </template>
+}

node-tests/fixtures/component/glimmer-component.gts

@@ -0,0 +1,18 @@
+import Component from '@glimmer/component';
+
+export interface FooSignature {
+  // The arguments accepted by the component
+  Args: {};
+  // Any blocks yielded by the component
+  Blocks: {
+    default: []
+  };
+  // The element to which `...attributes` is applied in the component template
+  Element: null;
+}
+
+export default class Foo extends Component<FooSignature> {
+  <template>
+    {{yield}}
+  </template>
+}

node-tests/fixtures/component/template-only-component.gjs

@@ -0,0 +1,3 @@
+<template>
+  {{yield}}
+</template>

node-tests/fixtures/component/template-only-component.gts

@@ -0,0 +1,16 @@
+import type { TOC } from '@ember/component/template-only';
+
+export interface FooSignature {
+  // The arguments accepted by the component
+  Args: {};
+  // Any blocks yielded by the component
+  Blocks: {
+    default: []
+  };
+  // The element to which `...attributes` is applied in the component template
+  Element: null;
+}
+
+<template>
+  {{yield}}
+</template> satisfies TOC<FooSignature>;