create-catalyst-app-internal 0.0.1-beta.33 → 0.0.1-beta.34

package/codemod/new-route/index.js

@@ -0,0 +1,98 @@
+const fs = require("fs")
+const path = require("path")
+const pc = require("picocolors")
+const prompts = require('prompts');
+const { program } = require('commander');
+
+const { createNewComponent, createRTKReducerFile, createReduxActionFile, createReduxReducerFile } = require("./template")
+const { validateComponentName, validatePath, discardChanges, createDirectory, createReducerEntryInStore, createNewRoute, toCamelCase, checkIfRoutePathExist } = require("./utils")
+
+// Configure commander to accept CLI options
+program
+    .option('-p, --path <path>', 'Path for the new route')
+    .option('-c, --component <component>', 'Component name for the new route')
+    .parse(process.argv);
+
+
+async function main() {
+    let { routePath, templateType, componentName } = program;
+
+    // If all options are not provided, prompt the user for input
+    if (!routePath || !componentName || !templateType) {
+        const response = await prompts([
+            {
+                type: "select",
+                name: "templateType",
+                message: "Choose state management:",
+                choices: [
+                    { title: "Redux", value: "redux" },
+                    { title: "Redux Toolkit (RTK)", value: "rtk" },
+                    { title: "None", value: "none" },
+                ],
+            },
+            {
+                type: routePath ? null : 'text',
+                name: 'routePath',
+                message: "Enter the route path",
+                validate: validatePath
+            },
+            {
+                type: componentName ? null : 'text',
+                name: 'componentName',
+                message: 'Enter the component name for new route',
+                validate: validateComponentName
+            }
+        ]);
+
+        routePath = routePath || response.routePath;
+        templateType = templateType || response.templateType
+        componentName = componentName || response.componentName;
+    }
+
+
+    // Code transformations
+    if (componentName && routePath && templateType) {
+
+        const reducerName = toCamelCase(componentName)
+        const containersDir = path.join(__dirname, "../../", 'src/js/containers');
+        const routeTransformerPath = path.join(__dirname, "./", 'transformers/createRoute.js')
+        const reducerTransformerPath = path.join(__dirname, "./", 'transformers/createReducer.js');
+
+        const funcArgs = { containersDir, componentName, routePath, reducerName, templateType, reducerTransformerPath, routeTransformerPath }
+
+        // create directory 
+        if (createDirectory(funcArgs)) {
+
+            try {
+
+                checkIfRoutePathExist(funcArgs)
+
+                if (templateType === "none") {
+                    createNewComponent(funcArgs)
+                }
+
+                if (templateType === "redux") {
+                    createNewComponent(funcArgs)
+                    createReduxActionFile(funcArgs)
+                    createReduxReducerFile(funcArgs)
+                    createReducerEntryInStore(funcArgs)
+                }
+
+                if (templateType === "rtk") {
+                    createNewComponent(funcArgs)
+                    createRTKReducerFile(funcArgs)
+                    createReducerEntryInStore(funcArgs)
+                }
+
+                createNewRoute(funcArgs);
+
+            } catch (e) {
+                discardChanges(funcArgs)
+                console.log(pc.red(`\n${e}`))
+            }
+        }
+
+    }
+}
+
+main();

package/codemod/new-route/template.js

@@ -0,0 +1,119 @@
+const fs = require("fs")
+const path = require("path")
+const pc = require("picocolors")
+
+// Function to create component using given input
+function createNewComponent({ componentName, containersDir }) {
+
+    const componentPath = path.join(containersDir, `${componentName}/${componentName}.js`);
+
+    // Component template
+    const componentTemplate = `import React from 'react';
+  
+  const ${componentName} = () => {
+    return (
+      <div>
+        <h1>${componentName}</h1>
+        <p>This is the ${componentName} component.</p>
+      </div>
+    );
+  };
+  
+  export default ${componentName};
+  `;
+
+    fs.writeFileSync(componentPath, componentTemplate, 'utf8');
+    console.log(`\n${pc.cyan(componentName)} component created at ${pc.gray(componentPath)}`);
+}
+
+
+// Function to create rtk reducer file using given input
+function createRTKReducerFile({ componentName, containersDir, reducerName }) {
+    const reducerPath = path.join(containersDir, `${componentName}/reducer.js`);
+
+    // rtk reducer template
+    const reducerTemplate = `import { createSlice } from "@reduxjs/toolkit"
+
+const initialState = {
+    testActionDispatched: false,
+}
+
+export const appSlice = createSlice({
+    name: ${reducerName}Reducer,
+    initialState: initialState,
+    reducers: {
+        reduxTest: (state) => {
+            state.testActionDispatched = true
+        },
+    },
+})
+
+export const { reduxTest } = appSlice.actions
+export const ${reducerName}Reducer = appSlice.reducer
+`;
+
+    fs.writeFileSync(reducerPath, reducerTemplate, 'utf8');
+    console.log(`\n${pc.cyan("reducer.js")} file created at ${pc.gray(reducerPath)} `);
+}
+
+
+// Function to create redux action file using given input
+function createReduxActionFile({ componentName, containersDir, reducerName }) {
+    const actionsPath = path.join(containersDir, `${componentName}/actions.js`);
+
+    // redux action template
+    const actionTemplate = `const createActionTypes = (prefix, actionTypeList = []) => {
+    const actionTypesObject = {}
+    actionTypeList.forEach((item) => {
+        actionTypesObject[item] =  prefix + "/" + item
+})
+
+return actionTypesObject
+}
+
+export default createActionTypes
+
+export const ${reducerName}Actions = createActionTypes(${reducerName}Actions, ["REDUX_TEST"])
+export const reduxTest = () => {
+    return {
+        type: ${reducerName}Actions.REDUX_TEST,
+    }
+}
+`;
+
+    fs.writeFileSync(actionsPath, actionTemplate, 'utf8');
+    console.log(`\n${pc.cyan("action.js")} file created at ${pc.gray(actionsPath)} `);
+
+}
+
+// Function to create redux reducer file using given input
+function createReduxReducerFile({ componentName, containersDir, reducerName }) {
+    const reducerPath = path.join(containersDir, `${componentName}/reducer.js`);
+
+    // redux reducer template
+    const reducerTemplate = `import { ${reducerName}Actions } from "./actions"
+
+export const defaultState = {
+    testActionDispatched: false,
+}
+
+export const ${reducerName}Reducer = (state = defaultState, action) => {
+    switch (action.type) {
+        case ${reducerName}Actions.REDUX_TEST: {
+            return {
+                ...state,
+                testActionDispatched: true,
+            }
+        }
+
+        default:
+            return state
+    }
+}
+`;
+
+    fs.writeFileSync(reducerPath, reducerTemplate, 'utf8');
+    console.log(`\n${pc.cyan("reducer.js")} file created at ${pc.gray(reducerPath)} `);
+}
+
+module.exports = { createNewComponent, createRTKReducerFile, createReduxActionFile, createReduxReducerFile }

package/codemod/new-route/transformers/createReducer.js

@@ -0,0 +1,38 @@
+const pc = require("picocolors")
+
+module.exports = function (fileInfo, api, options) {
+    const jscodeshift = api.jscodeshift;
+    const root = jscodeshift(fileInfo.source);
+
+    const { componentName, reducerName } = options;
+
+    // Insert the node at the top of the file
+    root.find(jscodeshift.Program).get('body', 0).insertBefore(`import { ${reducerName}Reducer } from '@containers/${componentName}/reducer.js'`);
+
+    root.find(jscodeshift.CallExpression, {
+        callee: {
+            name: 'combineReducers'
+        }
+    }).forEach(path => {
+        const args = path.value.arguments;
+        if (args.length > 0 && args[0].type === 'ObjectExpression') {
+            args[0].properties.push(
+                jscodeshift.property(
+                    'init',
+                    jscodeshift.identifier(`${reducerName}Reducer`),
+                    jscodeshift.identifier(`${reducerName}Reducer`)
+                )
+            );
+            args[0].properties.forEach(property => {
+                if (property.key.name === property.value.name) {
+                    property.shorthand = true;
+                }
+            });
+        }
+    })
+
+    console.log(`\nReducer added in ${pc.gray("src/js/store/index.js")}`);
+    return root.toSource();
+
+};
+

package/codemod/new-route/transformers/createRoute.js

@@ -0,0 +1,33 @@
+const pc = require("picocolors")
+
+module.exports = function (fileInfo, api, options) {
+    const jscodeshift = api.jscodeshift;
+    const root = jscodeshift(fileInfo.source);
+
+    const { routePath, componentName } = options;
+
+    // Create a new route object using a template expression
+    const newObject = jscodeshift.template.expression`
+    {
+        path: ${JSON.stringify(routePath)},
+        end: true,
+        component: ${componentName}
+    }
+    `;
+
+    // Insert the node at the top of the file
+    root.find(jscodeshift.Program).get('body', 0).insertBefore(`import ${componentName} from '@containers/${componentName}/${componentName}'`);
+
+    root.find(jscodeshift.VariableDeclarator, { id: { name: 'routes' } })
+        .forEach(path => {
+            // Ensure we are modifying the top-level array expression
+            if (path.value.init.type === 'ArrayExpression') {
+                path.value.init.elements.push(newObject);
+            }
+        });
+
+    console.log(pc.green('\nNew route added successfully.'));
+    return root.toSource();
+
+};
+

package/codemod/new-route/utils.js

@@ -0,0 +1,90 @@
+const fs = require("fs")
+const path = require("path")
+const pc = require("picocolors")
+const { execSync } = require('child_process');
+
+// validates router path
+function validatePath(path) {
+    const pathPattern = /^\/[a-zA-Z0-9-_]+(?:\/:[a-zA-Z0-9-_]+)?(?:\?[a-zA-Z0-9-_=]*)?$/;
+
+    if (!path.startsWith('/')) {
+        return "The path must start with a forward slash (`/`).";
+    }
+    if (!pathPattern.test(path)) {
+        if (!/^[\/a-zA-Z0-9-_]+/.test(path)) {
+            s
+            return "Only letters, digits, hyphens, and underscores are allowed after the initial slash.";
+        }
+        if (/\/[^:][a-zA-Z0-9-_]+/.test(path)) {
+            return "Parameters must start with a slash and a colon, followed by valid characters.";
+        }
+        if (/\?[^a-zA-Z0-9-_=]*$/.test(path)) {
+            return "Query strings must start with a question mark and contain valid characters.";
+        }
+        return "The path is incorrectly formatted.";
+    }
+    return true;
+}
+
+// validates component name
+function validateComponentName(name) {
+    return /^[A-Z][a-zA-Z0-9]*$/.test(name) || "Component name should start with an uppercase letter and may contain alphanumeric characters";
+}
+
+
+// discard changes if anything breaks
+function discardChanges({ componentName, containersDir }) {
+    if (fs.existsSync(`${containersDir}/${componentName}`)) {
+        fs.rmSync(`${containersDir}/${componentName}`, { recursive: true, force: true });
+    }
+}
+
+// creates directory using given input
+function createDirectory({ componentName, containersDir }) {
+    try {
+        // directory check
+        if (fs.existsSync(`${containersDir}/${componentName}`)) {
+            throw new Error("directory with similar name already exist");
+        }
+
+        fs.mkdirSync(`${containersDir}/${componentName}`)
+        console.log(`\n${pc.cyan(componentName)} directory created at ${pc.gray(containersDir)}`);
+
+        return true
+
+    } catch (e) {
+        console.log(pc.red(`\nError: ${e}`))
+    }
+}
+
+// adds route object inside src/js/route/index.js file
+function createNewRoute({ componentName, routePath, routeTransformerPath }) {
+    const command = `jscodeshift --silent -t ${routeTransformerPath} --routePath ${routePath} --componentName ${componentName} src/js/routes/index.js`;
+    execSync(command, { stdio: 'inherit' });
+}
+
+// adds newly created reducer into src/js/store/index.js file
+function createReducerEntryInStore({ componentName, routePath, reducerTransformerPath, reducerName }) {
+    const command = `jscodeshift --silent -t ${reducerTransformerPath} --reducerName ${reducerName} --routePath ${routePath} --componentName ${componentName} src/js/store/index.js`;
+    execSync(command, { stdio: 'inherit' });
+}
+
+// converts string to camel case
+function toCamelCase(str) {
+    return str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (match, chr) => chr.toUpperCase());
+}
+
+function checkIfRoutePathExist({routePath, componentName}) {
+    const routeIndexPath = path.join(__dirname, "../../", "src/js/routes/index.js");
+    const data = fs.readFileSync(routeIndexPath, 'utf8')
+    // Check if the file content includes routePath
+    if (data.includes(routePath)) {
+        throw new Error(`${routePath} path already exist in src/js/routes/index.js`)
+    }
+
+    if (data.includes(`@containers/${componentName}/${componentName}`)) {
+        throw new Error(`${componentName} component path already exist in src/js/routes/index.js`)
+    }
+}
+
+module.exports = { validatePath, validateComponentName, discardChanges, createReducerEntryInStore, createNewRoute, createDirectory, toCamelCase, checkIfRoutePathExist }

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "create-catalyst-app-internal",
     "bin": "scripts/cli.cjs",
-    "version": "0.0.1-beta.33",
+    "version": "0.0.1-beta.34",
     "description": "cli package to scaffold Catalyst application",
     "dependencies": {
         "commander": "^8.2.0",

package/scripts/cli.cjs

@@ -28,7 +28,7 @@ const program = new Commander.Command()
     .action(async (folderName = null, cmd) => {
         try {
             if (process.argv.includes("new-route")) {
-                const createRoutePath = path.join(__dirname, "../codemod/createNewRoute.js")
+                const createRoutePath = path.join(__dirname, "../codemod/new-route/index.js")
                 execSync(`node ${createRoutePath}`, { stdio: "inherit" })
                 return
             }

package/codemod/createNewRoute.js

@@ -1,110 +0,0 @@
-const fs = require("fs");
-const path = require('path');
-const prompts = require('prompts');
-const pc = require("picocolors")
-
-const { program } = require('commander');
-const { execSync } = require('child_process');
-
-
-// Configure commander to accept CLI options
-program
-    .option('-p, --path <path>', 'Path for the new route')
-    .option('-c, --component <component>', 'Component name for the new route')
-    .parse(process.argv);
-
-
-async function main() {
-    const { path: routePath, component } = program;
-
-    // If both options are not provided, prompt the user for input
-    if (!routePath || !component) {
-        const response = await prompts([
-            {
-                type: routePath ? null : 'text',
-                name: 'path',
-                message: 'Enter the route path',
-                validate: value => (value ? true : 'Route path is required')
-            },
-            {
-                type: component ? null : 'text',
-                name: 'component',
-                message: 'Enter the component name for new route',
-                validate: value => {
-                    const componentNameRegex = /^[A-Z][a-zA-Z0-9]*$/;
-
-                    return componentNameRegex.test(value) || "Component name should start with an uppercase letter and may contain alphanumeric characters";
-                }
-            },
-        ]);
-
-
-        routePathName = routePath || response.path;
-        componentName = component || response.component;
-    }
-
-    if (componentName) {
-        // Add new component
-        const isCreated = addNewComponent(componentName)
-
-        // Add the new route
-        if (isCreated) addNewRoute(componentName, routePathName);
-    }
-}
-
-// Function to create component using given inputs
-function addNewComponent(componentName) {
-
-    const componentDir = "src/js/containers"
-    const componentPath = path.join(componentDir, `${componentName}/${componentName}.js`);
-
-    // Create the new component file
-    const componentTemplate = `import React from 'react';
-  
-  const ${componentName} = () => {
-    return (
-      <div>
-        <h1>${componentName}</h1>
-        <p>This is the ${componentName} component.</p>
-      </div>
-    );
-  };
-  
-  export default ${componentName};
-  `;
-
-    try {
-        // directory check
-        if (fs.existsSync(`${componentDir}/${componentName}`)) {
-            throw new Error("directory with similar name already exist");
-        }
-
-        // component check
-        if (fs.existsSync(componentPath)) {
-            throw new Error("component with similar name already exist");
-        }
-
-        fs.mkdirSync(`${componentDir}/${componentName}`)
-        fs.writeFileSync(componentPath, componentTemplate, 'utf8');
-        console.log(`\nComponent ${componentName} created at ${componentPath}`);
-
-        return true
-
-    } catch (e) {
-        console.log(pc.red(`\nError: ${e}`))
-    }
-}
-
-// Function to run the codemod with the provided inputs
-function addNewRoute(componentName, routePath) {
-    const codemodPath = path.join(__dirname, 'createRoute.js');
-    const command = `jscodeshift --silent -t ${codemodPath} --routePath ${routePath} --componentName ${componentName} src/js/routes/index.js`;
-
-    try {
-        execSync(command, { stdio: 'inherit' });
-    } catch (error) {
-        console.log(pc.red(`\nError running codemod: ${e}`))
-    }
-}
-
-main();

package/codemod/createRoute.js

@@ -1,43 +0,0 @@
-const pc = require("picocolors")
-
-module.exports = function (fileInfo, api, options) {
-    const jscodeshift = api.jscodeshift;
-    const root = jscodeshift(fileInfo.source);
-
-    const { routePath, componentName } = options;
-
-    // Create a new route object using a template expression
-    const newObject = jscodeshift.template.expression`
-    {
-        path: ${JSON.stringify(routePath)},
-        end: true,
-        component: ${componentName}
-    }
-    `;
-    
-
-    const result = root.find(jscodeshift.ImportDeclaration, { source: { value: `@containers/${componentName}/${componentName}` } })
-
-    if (result.__paths.length > 0) {
-        console.log(pc.red("\nError: Route with similar name already exist!"))
-        return
-    } else {
-
-        // Insert the node at the top of the file
-        root.find(jscodeshift.Program).get('body', 0).insertBefore(`import ${componentName} from '@containers/${componentName}/${componentName}'`);
-
-        root.find(jscodeshift.VariableDeclarator, { id: { name: 'routes' } })
-        .forEach(path => {
-            // Ensure we are modifying the top-level array expression
-            if (path.value.init.type === 'ArrayExpression') {
-              path.value.init.elements.push(newObject);
-            }
-          });
-            
-
-        console.log(pc.green('\nNew route added successfully.'));
-        return root.toSource();
-    }
-
-};
-