Update blueprints (#21)

* feature: Updated blueprints for generate component

* bugfix: Derived addon location from name to improve DX

* chore: Updated test setups

* chore: Updated fixtures

* chore: Updated README

* chore: Ran update-blueprints-addon

* chore: Updated blueprints (create-v2-addon-repo)

* chore: Added changeset

---------

Co-authored-by: ijlee2 <ijlee2@users.noreply.github.com>

.changeset/gold-olives-laugh.md

@@ -0,0 +1,5 @@
+---
+"create-v2-addon-repo": minor
+---
+
+Updated blueprints

packages/blueprints-addon/README.md

@@ -45,7 +45,7 @@ Install `blueprints-addon` as a development dependency in these locations:
 <summary>V2 addon in <code>packages</code></summary>
 
 ```json5
-/* Example: packages/ui/button/package.json */
+/* Example: packages/ui/form/package.json */
 {
   "scripts": {
     "addon": "blueprints-addon --test-app-location '../../../test-app'"
@@ -63,6 +63,60 @@ Install `blueprints-addon` as a development dependency in these locations:
 > After you build `blueprints-addon`, please run `pnpm install` at the workspace root so that the blueprints are available.
 
 
+### Create addon
+
+From the workspace root, run the `new` command to create a package in `packages`. The package will be added to `docs-app` and `test-app`.
+
+```sh
+pnpm addon new <name> [options]
+
+# Example: Create the addon `ui/form`
+pnpm addon new ui/form
+
+# Example: Specify the location
+pnpm addon new @my-org-ui/form --location ui/form
+```
+
+
+### Create entity
+
+From the addon root, run the `generate` command to create the source code and its test file.
+
+```sh
+pnpm addon generate <component|helper|modifier|service|util> <name> [options]
+
+# Example: Create a component
+pnpm addon generate component ui/form/input
+
+# Example: Use alias
+pnpm addon g component ui/form/textarea
+```
+
+There may be more than 1 blueprint available. You can pass `--blueprint` to select the right one.
+
+```sh
+# Example: Create a <template> tag component
+pnpm addon g component ui/form/select --blueprint glimmer-strict
+```
+
+For more information, pass `--help`.
+
+
+### Remove entity
+
+From the addon root, run the `destroy` command to remove the source code and its test file.
+
+```sh
+pnpm addon destroy <component|helper|modifier|service|util> <name> 
+
+# Example: Remove a component
+pnpm addon destroy component ui/form/input
+
+# Example: Use alias
+pnpm addon d component ui/form/textarea
+```
+
+
 ## Compatibility
 
 - Node.js v18 or above

packages/blueprints-addon/bin/blueprints-addon.ts

@@ -11,7 +11,7 @@ process.title = 'blueprints-addon';
 
 // Set codemod options
 const DEFAULT_BLUEPRINT_VALUE = {
-  component: 'glimmer',
+  component: 'glimmer-loose',
   helper: 'class',
   modifier: 'class',
   service: 'class',
@@ -95,7 +95,12 @@ yargs(hideBin(process.argv))
                 type: 'string',
               })
               .option('blueprint', {
-                choices: ['glimmer', 'template-tag'] as const,
+                choices: [
+                  'glimmer-loose',
+                  'glimmer-strict',
+                  'template-only-loose',
+                  'template-only-strict',
+                ] as const,
                 describe: 'Which blueprint to run',
                 type: 'string',
               })
@@ -243,11 +248,11 @@ yargs(hideBin(process.argv))
     builder: (yargs) => {
       return yargs
         .positional('name', {
-          describe: "Name of the addon (e.g. '@my-org-ui/button')",
+          describe: "Name of the addon (e.g. '@my-org-ui/form')",
           type: 'string',
         })
         .option('location', {
-          describe: "Location of the addon (e.g. 'ui/button')",
+          describe: "Location of the addon (e.g. 'ui/form')",
           type: 'string',
         })
         .option('root', {

packages/blueprints-addon/src/blueprints/run-generate/component/glimmer-strict/__fileName__.gts

@@ -0,0 +1,20 @@
+import Component from '@glimmer/component';
+
+import styles from './<%= data.localFileName %>.css';
+
+interface <%= options.entity.classifiedName %>Signature {
+  Args: {};
+  Blocks: {
+    default: [];
+  };
+  Element: null;
+}
+
+// eslint-disable-next-line ember/no-empty-glimmer-component-classes
+export default class <%= options.entity.classifiedName %>Component extends Component<<%= options.entity.classifiedName %>Signature> {
+  <template>
+    <div class={{styles.container}}>
+      {{yield}}
+    </div>
+  </template>
+}

packages/blueprints-addon/src/blueprints/run-generate/component/template-only-loose/__fileName__.hbs

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

packages/blueprints-addon/src/blueprints/run-generate/component/template-only-loose/__fileName__.ts

@@ -0,0 +1,14 @@
+import templateOnlyComponent from '@ember/component/template-only';
+
+interface <%= options.entity.classifiedName %>Signature {
+  Args: {};
+  Blocks: {
+    default: [];
+  };
+  Element: null;
+}
+
+const <%= options.entity.classifiedName %>Component =
+  templateOnlyComponent<<%= options.entity.classifiedName %>Signature>();
+
+export default <%= options.entity.classifiedName %>Component;

packages/blueprints-addon/src/blueprints/run-new/__addonLocation__/README.md

@@ -22,24 +22,49 @@ pnpm start
 
 <details>
 
-<summary>Generate and destroy</summary>
+<summary>Create entity</summary>
 
-From the package root, you can create (or remove) the source code and its corresponding test file in `<%= options.testApp.name %>`.
+From the addon root, run the `generate` command to create the source code and its test file.
 
 ```sh
-pnpm addon <generate|destroy> <component|helper|modifier|service|util> <name> [options]
+pnpm addon generate <component|helper|modifier|service|util> <name> [options]
 
-# Examples
-pnpm addon g component hello-world
-pnpm addon d component hello-world
+# Example: Create a component
+pnpm addon generate component ui/form/input
+
+# Example: Use alias
+pnpm addon g component ui/form/textarea
 ```
 
 There may be more than 1 blueprint available. You can pass `--blueprint` to select the right one.
 
+```sh
+# Example: Create a <template> tag component
+pnpm addon g component ui/form/select --blueprint glimmer-strict
+```
+
 For more information, pass `--help`.
 
 </details>
 
+<details>
+
+<summary>Remove entity</summary>
+
+From the addon root, run the `destroy` command to remove the source code and its test file.
+
+```sh
+pnpm addon destroy <component|helper|modifier|service|util> <name> 
+
+# Example: Remove a component
+pnpm addon destroy component ui/form/input
+
+# Example: Use alias
+pnpm addon d component ui/form/textarea
+```
+
+</details>
+
 
 ## Compatibility
 

packages/blueprints-addon/src/steps/run-generate/update-addon/update-barrel-file.ts

@@ -9,7 +9,10 @@ function addExportStatement(file: string, options: Options): string {
 
   switch (entity.type) {
     case 'component': {
-      if (entity.blueprint === 'template-tag') {
+      if (
+        entity.blueprint === 'glimmer-strict' ||
+        entity.blueprint === 'template-only-strict'
+      ) {
         line = `export { default as ${entity.classifiedName} } from './${entity.type}s/${entity.name}.gts';\n`;
       } else {
         line = `export { default as ${entity.classifiedName} } from './${entity.type}s/${entity.name}.ts';\n`;

packages/blueprints-addon/src/steps/run-generate/update-addon/update-template-registry.ts

@@ -13,7 +13,10 @@ function addImportStatement(file: string, options: Options): string {
 
   switch (entity.type) {
     case 'component': {
-      if (entity.blueprint === 'template-tag') {
+      if (
+        entity.blueprint === 'glimmer-strict' ||
+        entity.blueprint === 'template-only-strict'
+      ) {
         line = `import type ${localName} from './${entity.type}s/${entity.name}.gts';\n`;
       } else {
         line = `import type ${localName} from './${entity.type}s/${entity.name}.ts';\n`;

packages/blueprints-addon/src/steps/run-new/create-options.ts

@@ -21,7 +21,7 @@ export function createOptions(codemodOptions: CodemodOptions): Options {
   const dasherizedName = dasherize(name);
   const pascalCaseName = pascalCase(name);
 
-  const addonLocation = join('packages', location ?? dasherizedName);
+  const addonLocation = join('packages', location ?? name);
   const addonLocationInverse = relative(addonLocation, '.');
 
   return {

packages/blueprints-addon/src/types/run-generate.ts

@@ -1,6 +1,10 @@
 type EntityType =
   | {
-      blueprint: 'glimmer' | 'template-tag';
+      blueprint:
+        | 'glimmer-loose'
+        | 'glimmer-strict'
+        | 'template-only-loose'
+        | 'template-only-strict';
       type: 'component';
     }
   | {

packages/blueprints-addon/tests/fixtures/run-destroy/input/packages/ui/button/package.json → packages/blueprints-addon/tests/fixtures/run-destroy/input/packages/ui/form/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@my-org-ui/button",
+  "name": "@my-org-ui/form",
   "version": "0.0.0",
   "ember-addon": {
     "app-js": {}

packages/blueprints-addon/tests/fixtures/run-destroy/input/packages/ui/form/src/components/my-component/glimmer-loose.ts

@@ -0,0 +1,15 @@
+import Component from '@glimmer/component';
+
+import styles from './glimmer-loose.css';
+
+interface MyComponentGlimmerLooseSignature {
+  Args: {};
+  Blocks: {
+    default: [];
+  };
+  Element: null;
+}
+
+export default class MyComponentGlimmerLooseComponent extends Component<MyComponentGlimmerLooseSignature> {
+  styles = styles;
+}

packages/create-v2-addon-repo/src/blueprints/blueprints-addon/tests/fixtures/run-destroy/input/packages/ui/button/src/components/my-example/template-tag.gts → packages/blueprints-addon/tests/fixtures/run-destroy/input/packages/ui/form/src/components/my-component/glimmer-strict.gts

@@ -1,8 +1,8 @@
 import Component from '@glimmer/component';
 
-import styles from './template-tag.css';
+import styles from './glimmer-strict.css';
 
-interface MyExampleTemplateTagSignature {
+interface MyComponentGlimmerStrictSignature {
   Args: {};
   Blocks: {
     default: [];
@@ -11,7 +11,7 @@ interface MyExampleTemplateTagSignature {
 }
 
 // eslint-disable-next-line ember/no-empty-glimmer-component-classes
-export default class MyExampleTemplateTagComponent extends Component<MyExampleTemplateTagSignature> {
+export default class MyComponentGlimmerStrictComponent extends Component<MyComponentGlimmerStrictSignature> {
   <template>
     <div class={{styles.container}}>
       {{yield}}

packages/blueprints-addon/tests/fixtures/run-destroy/input/packages/ui/form/src/components/my-component/template-only-loose.hbs

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

packages/blueprints-addon/tests/fixtures/run-destroy/input/packages/ui/form/src/components/my-component/template-only-loose.ts

@@ -0,0 +1,14 @@
+import templateOnlyComponent from '@ember/component/template-only';
+
+interface MyComponentTemplateOnlyLooseSignature {
+  Args: {};
+  Blocks: {
+    default: [];
+  };
+  Element: null;
+}
+
+const MyComponentTemplateOnlyLooseComponent =
+  templateOnlyComponent<MyComponentTemplateOnlyLooseSignature>();
+
+export default MyComponentTemplateOnlyLooseComponent;

packages/blueprints-addon/tests/fixtures/run-destroy/input/packages/ui/form/src/components/my-component/template-only-strict.gts

@@ -0,0 +1,20 @@
+import type { TOC } from '@ember/component/template-only';
+
+import styles from './template-only-strict.css';
+
+interface MyComponentTemplateOnlyStrictSignature {
+  Args: {};
+  Blocks: {
+    default: [];
+  };
+  Element: null;
+}
+
+const MyComponentTemplateOnlyStrictComponent: TOC<MyComponentTemplateOnlyStrictSignature> =
+  <template>
+    <div class={{styles.container}}>
+      {{yield}}
+    </div>
+  </template>;
+
+export default MyComponentTemplateOnlyStrictComponent;