Merge pull request #20 from bertdeblock/support-class-based-modifiers

Support class-based modifiers

.prettierignore

@@ -1,6 +1,6 @@
-/.scaffdog/documents/
 /coverage/
 /dist/
+/documents/
 /test/output/
 /CHANGELOG.md
 /pnpm-lock.yaml

README.md

@@ -7,46 +7,93 @@ Generate components, helpers, modifiers and services in v2 addons.
 
 Uses [scaffdog](https://scaff.dog/) underneath.
 
+## Notes
+
+- Only supports `.gjs` (default) and `.gts` files for components
+
 ## Installation
 
+<details open>
+  <summary>npm</summary>
+
 ```shell
-bun add -D @bertdeblock/gember
+npm install -D @bertdeblock/gember
 ```
 
+</details>
+
+<details>
+  <summary>bun</summary>
+
 ```shell
-npm install -D @bertdeblock/gember
+bun add -D @bertdeblock/gember
 ```
 
+</details>
+
+<details>
+  <summary>pnpm</summary>
+
 ```shell
 pnpm add -D @bertdeblock/gember
 ```
 
+</details>
+
+<details>
+  <summary>yarn</summary>
+
 ```shell
 yarn add -D @bertdeblock/gember
 ```
 
+</details>
+
 ## Usage
 
+<details open>
+  <summary>Generating components</summary>
+
 ```shell
 pnpm gember component foo
 pnpm gember component foo --class
 pnpm gember component foo --gts
 pnpm gember component foo --path="src/-private"
+```
+
+</details>
+
+<details>
+  <summary>Generating helpers</summary>
 
+```shell
 pnpm gember helper foo
 pnpm gember helper foo --class
 pnpm gember helper foo --ts
 pnpm gember helper foo --path="src/-private"
+```
+
+</details>
+
+<details>
+  <summary>Generating modifiers</summary>
 
+```shell
 pnpm gember modifier foo
+pnpm gember modifier foo --class
 pnpm gember modifier foo --ts
 pnpm gember modifier foo --path="src/-private"
+```
+
+</details>
+
+<details>
+  <summary>Generating services</summary>
 
+```shell
 pnpm gember service foo
 pnpm gember service foo --ts
 pnpm gember service foo --path="src/-private"
 ```
 
-## Notes
-
-- Only supports `.gjs` (default) and `.gts` files for components
+</details>

.scaffdog/documents/component.md → documents/component.md

@@ -28,18 +28,19 @@ export default class [[name]] extends Component {
 
 ```gts
 [[name := pascal(inputs.name)-]]
+[[signature := (name + "Signature")-]]
 
 import type { TOC } from '@ember/component/template-only';
 
-export interface [[name]]Signature {
+export interface [[signature]] {
   Args: {};
   Blocks: {
     default: [];
   };
   Element: null;
 }
 
-const [[name]]: TOC<[[name]]Signature> = <template>{{yield}}</template>;
+const [[name]]: TOC<[[signature]]> = <template>{{yield}}</template>;
 
 export default [[name]];
 
@@ -49,18 +50,19 @@ export default [[name]];
 
 ```gts
 [[name := pascal(inputs.name)-]]
+[[signature := (name + "Signature")-]]
 
 import Component from "@glimmer/component";
 
-export interface [[name]]Signature {
+export interface [[signature]] {
   Args: {};
   Blocks: {
     default: [];
   };
   Element: null;
 }
 
-export default class [[name]] extends Component<[[name]]Signature> {
+export default class [[name]] extends Component<[[signature]]> {
   <template>
     {{yield}}
   </template>

.scaffdog/config.js → documents/config.ts

@@ -1,4 +1,4 @@
 export default {
-  files: ["documents/*.md"],
+  files: ["*.md"],
   tags: ["[[", "]]"],
 };

documents/modifier.md

@@ -0,0 +1,75 @@
+---
+name: "modifier"
+root: "."
+output: "**/*"
+---
+
+# [[inputs.authoringFormat == "js" ? (inputs.classBased ? "!" : "") : "!"]][[inputs.name]].js
+
+```js
+[[name := camel(inputs.name)-]]
+
+import { modifier } from "ember-modifier";
+
+export default modifier(function [[name]](element, positional, named) {});
+
+```
+
+# [[inputs.authoringFormat == "js" ? (inputs.classBased ? "" : "!") : "!"]][[inputs.name]].js
+
+```js
+[[name := pascal(inputs.name)-]]
+
+import Modifier from "ember-modifier";
+
+export default class [[name]] extends Modifier {
+  modify(element, positional, named) {}
+}
+
+```
+
+# [[inputs.authoringFormat == "ts" ? (inputs.classBased ? "!" : "") : "!"]][[inputs.name]].ts
+
+```ts
+[[name := camel(inputs.name)-]]
+[[signature := (pascal(inputs.name) + "Signature")-]]
+
+import { modifier, type NamedArgs, type PositionalArgs } from "ember-modifier";
+
+export interface [[signature]] {
+  Args: {
+    Named: {};
+    Positional: [];
+  };
+  Element: null;
+}
+
+export default modifier<[[signature]]>(function [[name]](element, positional, named) {});
+
+```
+
+# [[inputs.authoringFormat == "ts" ? (inputs.classBased ? "" : "!") : "!"]][[inputs.name]].ts
+
+```ts
+[[name := pascal(inputs.name)-]]
+[[signature := (pascal(inputs.name) + "Signature")-]]
+
+import Modifier, { type NamedArgs, type PositionalArgs } from "ember-modifier";
+
+export interface [[signature]] {
+  Args: {
+    Named: {};
+    Positional: [];
+  };
+  Element: null;
+}
+
+export default class [[name]] extends Modifier<[[signature]]> {
+  modify(
+    element: [[signature]]["Element"],
+    positional: PositionalArgs<[[signature]]>,
+    named: NamedArgs<[[signature]]>,
+  ) {}
+}
+
+```

package.json

@@ -10,9 +10,9 @@
     "gember": "bin/gember.js"
   },
   "files": [
-    ".scaffdog/",
     "bin/",
     "dist/",
+    "documents/",
     "CHANGELOG.md"
   ],
   "scripts": {

src/cli.ts

@@ -91,6 +91,12 @@ yargs(hideBin(process.argv))
           description: "The modifier's name",
           type: "string",
         })
+        .option("class-based", {
+          alias: ["class"],
+          default: false,
+          description: "Generate a class-based modifier",
+          type: "boolean",
+        })
         .option("path", {
           default: "",
           description: "Generate a modifier at a custom path",
@@ -105,6 +111,7 @@ yargs(hideBin(process.argv))
     handler(options) {
       generateModifier(options.name, {
         authoringFormat: options.ts ? "ts" : "js",
+        classBased: options.classBased,
         path: options.path,
       });
     },

src/generate-document.ts

@@ -21,7 +21,7 @@ export async function generateDocument(
   } = {},
 ) {
   const directory = dirname(fileURLToPath(import.meta.url));
-  const scaffdog = await loadScaffdog(join(directory, "..", ".scaffdog"));
+  const scaffdog = await loadScaffdog(join(directory, "../documents"));
   const documents = await scaffdog.list();
   const document = documents.find((document) => document.name === documentName);
 

src/generators.ts

@@ -46,17 +46,19 @@ export function generateModifier(
   name: string,
   {
     authoringFormat = "js",
+    classBased = false,
     cwd = "",
     path = "",
   }: {
     authoringFormat?: "js" | "ts";
+    classBased?: boolean;
     cwd?: string;
     path?: string;
   } = {},
 ) {
   return generateDocument("modifier", name, {
     cwd,
-    inputs: { authoringFormat },
+    inputs: { authoringFormat, classBased },
     path,
   });
 }

test/__snapshots__/generate-modifier.test.ts.snap

@@ -1,29 +1,75 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`generates a \`.js\` modifier 1`] = `
-"import { modifier } from "ember-modifier";
+exports[`generates a class-based \`.js\` modifier 1`] = `
+"import Modifier from "ember-modifier";
 
-export default modifier(function foo(element /*, positional, named*/) {});
+export default class Foo extends Modifier {
+  modify(element, positional, named) {}
+}
 "
 `;
 
-exports[`generates a \`.js\` modifier at a custom path 1`] = `
-"import { modifier } from "ember-modifier";
+exports[`generates a class-based \`.ts\` modifier 1`] = `
+"import Modifier, { type NamedArgs, type PositionalArgs } from "ember-modifier";
 
-export default modifier(function foo(element /*, positional, named*/) {});
+export interface FooSignature {
+  Args: {
+    Named: {};
+    Positional: [];
+  };
+  Element: null;
+}
+
+export default class Foo extends Modifier<FooSignature> {
+  modify(
+    element: FooSignature["Element"],
+    positional: PositionalArgs<FooSignature>,
+    named: NamedArgs<FooSignature>,
+  ) {}
+}
 "
 `;
 
-exports[`generates a \`.ts\` modifier 1`] = `
+exports[`generates a function-based \`.js\` modifier 1`] = `
 "import { modifier } from "ember-modifier";
 
-export default modifier(function foo(element /*, positional, named*/) {});
+export default modifier(function foo(element, positional, named) {});
 "
 `;
 
-exports[`generates a \`.ts\` modifier at a custom path 1`] = `
+exports[`generates a function-based \`.js\` modifier at a custom path 1`] = `
 "import { modifier } from "ember-modifier";
 
-export default modifier(function foo(element /*, positional, named*/) {});
+export default modifier(function foo(element, positional, named) {});
+"
+`;
+
+exports[`generates a function-based \`.ts\` modifier 1`] = `
+"import { modifier, type NamedArgs, type PositionalArgs } from "ember-modifier";
+
+export interface FooSignature {
+  Args: {
+    Named: {};
+    Positional: [];
+  };
+  Element: null;
+}
+
+export default modifier<FooSignature>(function foo(element, positional, named) {});
+"
+`;
+
+exports[`generates a function-based \`.ts\` modifier at a custom path 1`] = `
+"import { modifier, type NamedArgs, type PositionalArgs } from "ember-modifier";
+
+export interface FooSignature {
+  Args: {
+    Named: {};
+    Positional: [];
+  };
+  Element: null;
+}
+
+export default modifier<FooSignature>(function foo(element, positional, named) {});
 "
 `;