@40q/40q-cli 1.0.1 → 1.0.3

package/Readme.md

@@ -19,4 +19,18 @@ Setup is intended to scaffold tools configurations.
 ```
 
 Supported Tools:
-* eslint
+* eslint
+
+### Codegen
+Codegen generates code for you.
+
+```
+40q codegen [type] [template]
+```
+
+Supported Types:
+* block: generates code for Gutenberg blocks
+
+Templates are optional, if empty, it creates an example boilerplate for a Gutenberg block.
+
+For supported templates, run: `40q codegen block --help`

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@40q/40q-cli",
-    "version": "1.0.1",
+    "version": "1.0.3",
     "description": "40q CLI tool",
     "main": "index.js",
     "bin": {

package/src/commands/Codegen/Codegen.command.ts

@@ -1,6 +1,6 @@
 import { ArgumentsCamelCase, Argv } from 'yargs';
 import { Command } from '../Command';
-import inquirer, { QuestionCollection } from 'inquirer';
+import inquirer from 'inquirer';
 import { GenerateBlock } from './Generators/GenerateBlock';
 import { Templates, Types, templateChoices, typeChoices } from './Codegen.types';
 
@@ -26,27 +26,21 @@ export class CodegenCommand implements Command {
         const template = (argv.template ?? 'default') as Templates;
 
         if (type === 'block') {
-            const answers = await CodegenCommand.prompt(
+            const answers = await inquirer.prompt(
                 [
                     {
                         type: 'input',
                         name: 'name',
                         message: 'Please enter a name for the block:',
-                        default: 'section-header',
+                        default: template || 'section-header',
                     },
                 ],
-                template === 'default'
             );
 
             const name = (answers?.name as string) || null;
 
-            return GenerateBlock.run(template, name);
+            const blockGenerator = new GenerateBlock(template, name);
+            return blockGenerator.run();
         }
     }
-
-    static async prompt(prompts: QuestionCollection, condition: boolean) {
-        if (!condition) return null;
-
-        return await inquirer.prompt(prompts);
-    }
 }

package/src/commands/Codegen/Generators/GenerateBlock.ts

@@ -1,36 +1,81 @@
-import { execSync } from 'child_process';
 import * as fs from 'fs';
 import path from 'path';
+import { execSync } from 'child_process';
 import { Templates } from '../Codegen.types';
 import { findCliRoot } from '../../../lib/cliRoot';
 
 export class GenerateBlock {
-    static run(template: Templates, name: string | null) {
-        const title =
-            name
-                ?.split('-')
-                .map((word) => {
-                    return word.charAt(0).toUpperCase() + word.slice(1);
-                })
-                .join(' ') ?? '';
-        const dirAndFileName = name || template;
-
-        execSync(`mkdir -p resources/scripts/editor/blocks/${dirAndFileName}`);
+    private template: Templates = 'default';
+    private name: string = '';
+    private title: string = '';
+    private camelCaseName: string = '';
 
-        const cliRoot = findCliRoot(__dirname);
-        const templateContent = fs.readFileSync(
-            path.join(cliRoot, 'templates/blocks/', `${template}.txt`),
-            'utf8'
+    constructor(template: Templates, name: string | null) {
+        this.template = template;
+        this.name = name ?? '';
+        this.camelCaseName = this.toCamelCase(this.name);
+        this.title = this.parseName(this.name);
+    }
+
+    public run() {
+        this.createBlockFolder();
+        this.createBlockFiles();
+    }
+
+    private createBlockFolder() {
+        execSync(`mkdir -p resources/scripts/editor/blocks/${this.name}`);
+    }
+
+    private createBlockFiles() {
+        fs.writeFileSync(
+            path.join(
+                process.cwd(),
+                `resources/scripts/editor/blocks/${this.name}/${this.name}.tsx`
+            ),
+            this.getTemplate('tsx')
+                .replace(/{{name}}/g, this.name ?? '')
+                .replace(/{{title}}/g, this.title)
         );
 
         fs.writeFileSync(
             path.join(
                 process.cwd(),
-                `resources/scripts/editor/blocks/${dirAndFileName}/${dirAndFileName}.tsx`
+                `resources/views/blocks/${this.name}.blade.php`
             ),
-            templateContent
-                .replace(/{{name}}/g, name ?? '')
-                .replace(/{{title}}/g, title)
+            ''
+        );
+
+        fs.writeFileSync(
+            path.join(process.cwd(), `app/Blocks/${this.camelCaseName}.php`),
+            this.getTemplate('php')
+                .replace(/{{name}}/g, this.name ?? '')
+                .replace(/{{camelCaseName}}/g, this.camelCaseName)
+        );
+    }
+
+    private parseName(name: string) {
+        return name
+            .split('-')
+            .map((word) => {
+                return word.charAt(0).toUpperCase() + word.slice(1);
+            })
+            .join(' ');
+    }
+
+    private toCamelCase(name: string) {
+        return (
+            name.split('-').reduce((acc, word) => {
+                return acc + word.charAt(0).toUpperCase() + word.slice(1);
+            }, '') ?? ''
+        );
+    }
+
+    private getTemplate(name: string) {
+        const cliRoot = findCliRoot(__dirname);
+        const templateFolder = `templates/blocks/${this.template}`;
+        return fs.readFileSync(
+            path.join(cliRoot, `${templateFolder}/${name}.txt`),
+            'utf8'
         );
     }
 }

package/templates/blocks/default/php.txt

@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Blocks;
+
+class {{camelCaseName}} extends BlockHandler
+{
+    public function __invoke($block_content, $block)
+    {
+        return view('blocks.{{name}}', [
+            'title' => $block['attrs']['title'] ?? null,
+        ]);
+    }
+}

package/templates/blocks/{default.txt → default/tsx.txt}

@@ -7,10 +7,10 @@ import {
 } from "@wordpress/block-editor";
 
 /* Block name */
-export const name = "by40q/section-header";
+export const name = "by40q/{{name}}";
 
 /* Block title */
-export const title = __("Section Header", "40q");
+export const title = __("{{title}}", "40q");
 
 /* Block category */
 export const category = "text";
@@ -32,7 +32,7 @@ export const edit = ({ attributes, setAttributes }) => {
   return (
     <>
       <InspectorControls>
-        <PanelBody title={__("Section Header Settings")} initialOpen></PanelBody>
+        <PanelBody title={__("{{title}} Settings")} initialOpen></PanelBody>
       </InspectorControls>
 
       <div {...blockProps}>