Merge pull request #1 from ReStruct-Corporate-Advantage/layout

Vite Template with TS Plop

package.json

@@ -7,6 +7,7 @@
     "dev": "vite",
     "start": "vite",
     "build": "tsc && vite build",
+    "generate": "plop",
     "preview": "vite preview",
     "test": "vitest",
     "format": "prettier --write .",
@@ -34,6 +35,7 @@
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-prettier": "^4.2.1",
     "jsdom": "^21.1.0",
+    "plop": "^3.1.2",
     "prettier": "^2.7.1",
     "prettier-config-nick": "^1.0.2",
     "typescript": "^5.0.2",

plop-templates/Page/Page.slice.ts.hbs

@@ -0,0 +1,18 @@
+import { createSlice } from "@reduxjs/toolkit"
+
+export interface {{pascalCase name}}State {}
+
+const initialState: {{pascalCase name}}State = {}
+
+export const {{snakeCase name}}Slice = createSlice({
+  name: "{{snakeCase name}}",
+  initialState,
+  reducers: {
+    increment: (state) => {},
+  },
+  extraReducers: (builder) => {},
+})
+
+export const { increment } = {{snakeCase name}}Slice.actions
+
+export default {{snakeCase name}}Slice.reducer

plop-templates/Page/index.ts.hbs

@@ -1,3 +1,3 @@
-import {{pascalCase name}} from "./{{pascalCase name}}.jsx";
+import {{pascalCase name}} from "./{{pascalCase name}}.jsx"
 
-export default {{pascalCase name}};
+export default {{pascalCase name}}

plopfile.cjs

@@ -1,22 +1,16 @@
 module.exports = (plop) => {
   plop.setGenerator("component", {
     description: "Create a component",
-    // User input prompts provided as arguments to the template
     prompts: [
       {
-        // Raw text input
         type: "input",
-        // Variable name for this input
         name: "name",
-        // Prompt to display on command line
         message: "What is your component name?",
       },
     ],
     actions: [
       {
         type: "add",
-        // Plop will create directories for us if they do not exist
-        // so it's okay to add files in nested locations.
         path: "src/app/components/{{pascalCase name}}/{{pascalCase name}}.tsx",
         templateFile: "plop-templates/Component/Component.tsx.hbs",
       },
@@ -36,20 +30,16 @@ module.exports = (plop) => {
         templateFile: "plop-templates/Component/index.ts.hbs",
       },
       {
-        // Adds an index.ts file if it does not already exist
         type: "add",
         path: "src/app/components/index.ts",
         templateFile: "plop-templates/injectable-index.ts.hbs",
-        // If index.ts already exists in this location, skip this action
         skipIfExists: true,
       },
       {
-        // Action type 'append' injects a template into an existing file
         type: "append",
         path: "src/app/components/index.ts",
-        // Pattern tells plop where in the file to inject the template
         pattern: `/* PLOP_INJECT_IMPORT */`,
-        template: `import {{pascalCase name}} from './{{pascalCase name}}';`,
+        template: `import {{pascalCase name}} from "./{{pascalCase name}}"`,
       },
       {
         type: "append",
@@ -84,29 +74,16 @@ module.exports = (plop) => {
         path: "src/app/pages/{{pascalCase name}}/{{pascalCase name}}.module.scss",
         templateFile: "plop-templates/Page/Page.module.scss.hbs",
       },
-      {
-        type: "add",
-        path: "src/app/pages/{{pascalCase name}}/reducer.ts",
-        templateFile: "plop-templates/Page/reducer.ts.hbs",
-        skipIfExists: true,
-      },
-      {
-        type: "add",
-        path: "src/app/pages/{{pascalCase name}}/selectors.ts",
-        templateFile: "plop-templates/Page/selectors.ts.hbs",
-        skipIfExists: true,
-      },
-      {
-        type: "add",
-        path: "src/app/pages/{{pascalCase name}}/actions.ts",
-        templateFile: "plop-templates/Page/actions.ts.hbs",
-        skipIfExists: true,
-      },
       {
         type: "add",
         path: "src/app/pages/{{pascalCase name}}/index.ts",
         templateFile: "plop-templates/Page/index.ts.hbs",
       },
+      {
+        type: "add",
+        path: "src/app/pages/{{pascalCase name}}/{{pascalCase name}}.slice.ts",
+        templateFile: "plop-templates/Page/Page.slice.ts.hbs",
+      },
       {
         type: "add",
         path: "src/app/pages/index.ts",
@@ -117,7 +94,7 @@ module.exports = (plop) => {
         type: "append",
         path: "src/app/pages/index.ts",
         pattern: `/* PLOP_INJECT_IMPORT */`,
-        template: `import {{pascalCase name}} from './{{pascalCase name}}';`,
+        template: `import {{pascalCase name}} from "./{{pascalCase name}}"`,
       },
       {
         type: "append",