add experimental codes for plop

generator/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "generator",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "type": "module",
+  "devDependencies": {
+    "plop": "4.0.1"
+  }
+}

generator/sample.js

@@ -0,0 +1,16 @@
+const args = process.argv.slice(2);
+import { Plop, run } from "plop/src/plop.js";
+import minimist from "minimist";
+const argv = minimist(args);
+
+Plop.prepare(
+  {
+    cwd: argv.cwd,
+    preload: argv.preload || [],
+    configPath: argv.plopfile,
+    completion: argv.completion,
+  },
+  function (env) {
+    Plop.execute(env, run);
+  },
+);

package.json

@@ -7,12 +7,14 @@
     "type": "turbo run type",
     "lint": "turbo run lint",
     "prepare": "husky install",
-    "release": "turbo run build && changeset version && changeset publish"
+    "release": "turbo run build && changeset version && changeset publish",
+    "plop": "plop"
   },
   "devDependencies": {
     "eslint-config-custom": "workspace:*",
     "husky": "8.0.3",
     "lint-staged": "13.1.1",
+    "plop": "4.0.1",
     "prettier": "2.8.4",
     "turbo": "1.7.4"
   },

plop-templates/Component.hbs

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const {{pascalCase name}} = () => {
+  return (
+    <div>
+      <h1>{{pascalCase name}} Component</h1>
+    </div>
+  );
+};
+
+export default {{pascalCase name}};

plop-templates/routes.hbs

@@ -0,0 +1,29 @@
+import { lazy, PropsWithChildren } from "react";
+import { Switch, Route } from "wouter";
+import { Layout } from "@/ui/pages/layout";
+
+const Home = lazy(() => import("@/ui/pages"));
+const About = lazy(() => import("@/ui/pages/about"));
+const NotFound = lazy(() => import("@/ui/pages/not-found"));
+
+function RouteWithLayout({ children }: PropsWithChildren<{ path: string }>) {
+  return <Layout>{children}</Layout>;
+}
+
+function routes() {
+  return (
+    <Switch>
+      <RouteWithLayout path="/about">
+        <About />
+      </RouteWithLayout>
+      <RouteWithLayout path="/">
+        <Home />
+      </RouteWithLayout>
+      <Route>
+        <NotFound />
+      </Route>
+    </Switch>
+  );
+}
+
+export default routes;

plopfile.js

@@ -0,0 +1,30 @@
+module.exports = function (
+  /** @type {import('plop').NodePlopAPI} */
+  plop
+  ) {
+
+  // declare a new generator
+  plop.setGenerator('component', {
+    description: 'Create a React component',
+    prompts: [{
+      type: 'input',
+      name: 'name',
+      message: 'Component name?',
+    }],
+    actions: [{
+      type: 'add',
+      path: 'src/components/{{pascalCase name}}/{{pascalCase name}}.js',
+      templateFile: 'plop-templates/Component.hbs',
+    }]
+  });
+
+  plop.setGenerator('routes', {
+    description: 'Create routes',
+    prompts: [],
+    actions: [{
+      type: 'add',
+      path: 'src/routes.ts',
+      templateFile: 'plop-templates/routes.hbs'
+    }]
+  })
+};