[WIP] Implement plop base

.changeset/cold-ants-refuse.md

@@ -0,0 +1,5 @@
+---
+"start-frontend": minor
+---
+
+use plop for project code generation

.prettierignore

@@ -11,3 +11,7 @@ dist
 build
 public
 .turbo
+
+# Exclude Handlebars.js (.hbs) files
+# TODO: Figure out how to format hanldebar templates
+**/*.hbs

code/react/handlebar-templates/App.tsx.hbs

@@ -0,0 +1,23 @@
+import { Suspense } from "react";
+{{#if router}}
+  import { Router } from './routes';
+{{else}}
+  import Home from './ui/pages';
+{{/if}}
+import { AppProviders } from "./context";
+
+function App() {
+  return (
+    <AppProviders>
+      <Suspense>
+        {{#if router}}
+        <Router />
+        {{else}}
+        <Home />
+        {{/if}}
+      </Suspense>
+    </AppProviders>
+  )
+}
+
+export default App;

package.json

@@ -13,7 +13,7 @@
     "eslint-config-custom": "workspace:*",
     "husky": "9.1.6",
     "lint-staged": "15.2.2",
-    "prettier": "2.8.4",
+    "prettier": "3.2.5",
     "turbo": "1.13.4"
   },
   "lint-staged": {

packages/start-frontend/package.json

@@ -24,6 +24,7 @@
     "gradient-string": "2.0.2",
     "inquirer": "8.2.3",
     "meow": "7.1.1",
+    "node-plop": "0.32.0",
     "picocolors": "1.1.0"
   },
   "devDependencies": {

packages/start-frontend/src/index.ts

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import { format } from "prettier";
+import prettier from "prettier";
 import fse from "fs-extra";
 import meow from "meow";
 import os from "node:os";
@@ -236,7 +236,7 @@ async function copyTests(
 /**
  * Copy common files into the target app directory
  */
-function copyCommon(appDir: string, sharedConfigDir: string) {
+async function copyCommon(appDir: string, sharedConfigDir: string) {
   fse.copySync(`${sharedConfigDir}/gitignore`, `${appDir}/gitignore`);
 
   // Rename dot files
@@ -268,7 +268,9 @@ function copyCommon(appDir: string, sharedConfigDir: string) {
   // Rewrite tsconfig.json
   fse.writeFileSync(
     path.join(appDir, "tsconfig.json"),
-    format(JSON.stringify(tsconfigObjs, null, 2), { parser: "json" })
+    await prettier.format(JSON.stringify(tsconfigObjs, null, 2), {
+      parser: "json",
+    })
   );
 }
 
@@ -329,8 +331,18 @@ async function run() {
     removeEslintConfig();
   }
 
+  const { default: nodePlop } = await import("node-plop");
+  const plopFilePath = path.resolve(__dirname, "plopfile.js");
+  const plop = await nodePlop(plopFilePath, {
+    destBasePath: appDir,
+    force: true,
+  });
+
+  const baseGenerator = plop.getGenerator("constructBase");
+  await baseGenerator.runActions({});
+
   // Copy commons
-  copyCommon(appDir, sharedConfigDir);
+  await copyCommon(appDir, sharedConfigDir);
 
   // stop spinner
   loadingStop();

packages/start-frontend/src/plopfile.ts

@@ -0,0 +1,29 @@
+import type { NodePlopAPI } from "node-plop";
+import path from "node:path";
+import prettier from "prettier";
+
+const TEMP_DIR = path.resolve(__dirname, "temp");
+
+module.exports = function (plop: NodePlopAPI) {
+  plop.setHelper("reverseEach", (ctx, { fn }) =>
+    ctx.reverse().map(fn).join("")
+  );
+
+  plop.setGenerator("constructBase", {
+    actions: [
+      {
+        type: "add",
+        force: true,
+        path: "src/app.tsx",
+        templateFile: path.resolve(
+          TEMP_DIR,
+          "handlebar-templates",
+          "app.tsx.hbs"
+        ),
+        transform: async (template) => {
+          return await prettier.format(template, { parser: "typescript" });
+        },
+      },
+    ],
+  });
+};

packages/start-frontend/tsconfig.json

@@ -1,7 +1,8 @@
 {
   "extends": "tsconfig/library.json",
   "compilerOptions": {
-    "rootDir": "."
+    "rootDir": ".",
+    "module": "ESNext"
   },
   "include": ["src", "tsup.config.ts"],
   "exclude": ["templates"]

packages/start-frontend/tsup.config.ts

@@ -1,11 +1,12 @@
 import { defineConfig, Options } from "tsup";
 
 export default defineConfig((options: Options) => ({
-  entry: ["src/index.ts"],
+  entry: ["src/index.ts", "src/plopfile.ts"],
   format: ["cjs"],
   clean: true,
   define: {
     "process.env.BRANCH_NAME": `"${process.env.BRANCH_NAME}"`,
   },
+  shims: true,
   ...options,
 }));