npm - create-catalyst-app-internal - Versions diffs - 0.0.1-beta.9 → 0.0.2-canary.2 - Mend

create-catalyst-app-internal 0.0.1-beta.9 → 0.0.2-canary.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (45) hide show

package/Readme.md +56 -0
package/codemod/new-route/index.js +98 -0
package/codemod/new-route/template.js +119 -0
package/codemod/new-route/transformers/createReducer.js +38 -0
package/codemod/new-route/transformers/createRoute.js +33 -0
package/codemod/new-route/utils.js +90 -0
package/license +10 -0
package/package.json +7 -8
package/scripts/cli.cjs +58 -37
package/templates/common/.eslintignore +1 -0
package/templates/common/.eslintrc +28 -0
package/templates/common/README.md +2 -2
package/templates/common/api.js +12 -23
package/templates/common/client/styles.js +1 -12
package/templates/common/config/config.json +2 -23
package/templates/common/public/favicon.ico +0 -0
package/templates/common/server/{document.js → document.jsx} +2 -4
package/templates/common/server/index.js +1 -0
package/templates/common/server/server.js +13 -1
package/templates/common/src/js/containers/Home/{Home.js → Home.jsx} +1 -1
package/templates/common/src/js/routes/index.jsx +11 -0
package/templates/common/src/static/css/resources/index.scss +1 -0
package/templates/none-js/client/index.jsx +18 -0
package/templates/none-js/package.json +11 -5
package/templates/{redux-js/src/js/containers/App/index.js → none-js/src/js/containers/App/index.jsx} +2 -2
package/templates/none-js/src/js/routes/utils.jsx +54 -0
package/templates/redux-js/client/index.jsx +23 -0
package/templates/redux-js/package.json +11 -5
package/templates/{none-js/src/js/containers/App/index.js → redux-js/src/js/containers/App/index.jsx} +2 -2
package/templates/redux-js/src/js/containers/App/reducer.js +1 -2
package/templates/redux-js/src/js/routes/utils.jsx +54 -0
package/templates/redux-js/src/js/store/index.js +2 -2
package/templates/rtk-js/client/index.jsx +24 -0
package/templates/rtk-js/package.json +11 -5
package/templates/rtk-js/src/js/containers/App/{index.js → index.jsx} +2 -2
package/templates/rtk-js/src/js/containers/App/reducer.js +1 -1
package/templates/rtk-js/src/js/routes/utils.jsx +54 -0
package/templates/rtk-js/src/js/store/index.js +2 -2
package/templates/common/.babelrc +0 -26
package/templates/common/src/js/routes/index.js +0 -17
package/templates/common/src/js/routes/utils.js +0 -29
package/templates/none-js/client/index.js +0 -23
package/templates/redux-js/client/index.js +0 -28
package/templates/rtk-js/client/index.js +0 -28
/package/templates/common/src/js/containers/Home/{Home.scss → Home.module.scss} +0 -0

package/templates/common/api.js CHANGED Viewed

@@ -1,27 +1,16 @@
-const apiInstance = () => {
-    const fetchFunction = async (url, options) => {
-        let baseURL = process.env.API_URL
-        let finalUrl = baseURL + url
+const fetchFunction = (url, options) => {
+    let baseURL = process.env.API_URL
+    let finalUrl = baseURL + url
-        // Request Interceptor - you can modify request here
+    // Request Interceptor -  modify request here
-        // Add query params if exist
-        if (Object.keys(options?.params).length > 0) {
-            finalUrl = url + "?" + new URLSearchParams(options.params)
-        }
-        return fetch(finalUrl, options).then(async (response) => {
-            const parsedResponse = await response.json()
-            // Response Interceptor - you can modify response here
-            return parsedResponse
+    return fetch(finalUrl, options)
+        .then(response => {
+            return response.json().then(parsedResponse => {
+                // Response Interceptor -  modify response here
+                return parsedResponse
+            })
         })
-    }
-    return {
-        get: fetchFunction,
-        post: fetchFunction,
-        delete: fetchFunction,
-        patch: fetchFunction,
-        put: fetchFunction,
-    }
 }
-export default { apiInstance }
+export default fetchFunction

package/templates/common/client/styles.js CHANGED Viewed

@@ -1,14 +1,3 @@
-/* Style Loader
- *
- * Anything imported in here will either be added to the vendor CSS chunk, or
- * the main app CSS chunk. Where they will go depends on its location or its
- * extension.
- *
- * Files will be added to the vendor.css chunk if:
- * - they are located inside `node_modules`, or
- * - they are plain .css files.
- * Otherwise, files will be added to the main app.css chunk.
- */
+// Include initial base styles. Global styles will come here.
-// Include initial base styles.
 import "@css/base/index.scss"

package/templates/common/config/config.json CHANGED Viewed

@@ -5,29 +5,8 @@
     "WEBPACK_DEV_SERVER_PORT": 3006,
     "BUILD_OUTPUT_PATH": "build",
     "PUBLIC_STATIC_ASSET_PATH": "/assets/",
-    "PUBLIC_STATIC_ASSET_URL": "http://localhost:3006",
-    "NODE_ENV": "development",
-    "BUILD_ENV": "localBuild",
+    "PUBLIC_STATIC_ASSET_URL": "http://localhost:3005",
     "API_URL": "",
     "ANALYZE_BUNDLE": false,
-    "CLIENT_ENV_VARIABLES": [
-        "NODE_SERVER_HOSTNAME",
-        "NODE_SERVER_PORT",
-        "WEBPACK_DEV_SERVER_HOSTNAME",
-        "WEBPACK_DEV_SERVER_PORT",
-        "BUILD_OUTPUT_PATH",
-        "PUBLIC_STATIC_ASSET_PATH",
-        "PUBLIC_STATIC_ASSET_URL",
-        "NODE_ENV",
-        "BUILD_ENV",
-        "API_URL",
-        "ANALYZE_BUNDLE",
-        "ENABLE_DEBUG_LOGS",
-        "ENABLE_FILE_LOGGING",
-        "ENABLE_CONSOLE_LOGGING",
-        "ANALYZE_BUNDLE",
-        "ENABLE_DEBUG_LOGS",
-        "ENABLE_FILE_LOGGING",
-        "ENABLE_CONSOLE_LOGGING"
-    ]
+    "CLIENT_ENV_VARIABLES": ["API_URL"]
 }

package/templates/common/public/favicon.ico ADDED Viewed

Binary file

package/templates/common/server/{document.js → document.jsx} RENAMED Viewed

@@ -3,10 +3,8 @@ import { Head, Body } from "catalyst-core-internal"
 function Document(props) {
     return (
-        <html lang={props.lang}>
-            <Head {...props}>
-                <meta charset="final-order" />
-            </Head>
+        <html lang="en">
+            <Head {...props}></Head>
             <Body {...props} />
         </html>
     )

package/templates/common/server/index.js CHANGED Viewed

	@@ -1 +1,2 @@
1	+ // This function is executed before server starts.
1 2	export const preServerInit = () => {}

package/templates/common/server/server.js CHANGED Viewed

@@ -1 +1,13 @@
-export function addMiddlewares(app) {}
+import express from "express"
+import path from "path"
+import { fileURLToPath } from "node:url"
+import { dirname } from "node:path"
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+// Server middlewares are added here.
+export function addMiddlewares(app) {
+    app.use("/favicon.ico", express.static(path.join(__dirname, "../public/favicon.ico")))
+}

package/templates/common/src/js/containers/Home/{Home.js → Home.jsx} RENAMED Viewed

@@ -1,5 +1,5 @@
 import React from "react"
-import css from "./Home.scss"
+import css from "./Home.module.scss"
 function Home() {
     return (

package/templates/common/src/js/routes/index.jsx ADDED Viewed

@@ -0,0 +1,11 @@
+import Home from "@containers/Home/Home.jsx"
+const routes = [
+    {
+        path: "/",
+        end: true,
+        component: Home,
+    },
+]
+export default routes

package/templates/common/src/static/css/resources/index.scss ADDED Viewed

	@@ -0,0 +1 @@
1	+ @import "./variables.scss";

package/templates/none-js/client/index.jsx ADDED Viewed

@@ -0,0 +1,18 @@
+import React from "react"
+import "./styles"
+import { hydrateRoot } from "react-dom/client"
+import { RouterProvider } from "catalyst-core-internal"
+import clientRouter from "catalyst-core-internal/router/ClientRouter"
+const { __ROUTER_INITIAL_DATA__: routerInitialData } = window
+const router = clientRouter({ routerInitialState: routerInitialData })
+const Application = (
+    <React.StrictMode>
+        <RouterProvider router={router} />
+    </React.StrictMode>
+)
+const container = document.getElementById("app")
+hydrateRoot(container, Application)

package/templates/none-js/package.json CHANGED Viewed

@@ -4,7 +4,10 @@
     "scripts": {
         "start": "catalyst start",
         "build": "catalyst build",
-        "serve": "catalyst serve"
+        "serve": "catalyst serve",
+        "lint": "eslint .",
+        "devBuild": "catalyst devBuild",
+        "devServe": "catalyst devServe"
     },
     "_moduleAliases": {
         "@api": "api.js",
@@ -14,9 +17,12 @@
         "@css": "src/static/css",
         "@routes": "src/js/routes/"
     },
+    "devDependencies": {
+        "eslint": "^8.26.0",
+        "eslint-plugin-react": "^7.34.1",
+        "eslint-plugin-react-hooks": "^4.6.0"
+    },
     "dependencies": {
-        "@loadable/component": "^5.16.3",
-        "@tata1mg/router": "^0.0.1-beta.0",
-        "catalyst-core-internal": "^0.0.1-beta.3"
+        "catalyst-core-internal": "^0.0.2-canary.4"
     }
-}
+}

package/templates/{redux-js/src/js/containers/App/index.js → none-js/src/js/containers/App/index.jsx} RENAMED Viewed

@@ -1,5 +1,5 @@
 import React from "react"
-import { Outlet } from "@tata1mg/router"
+import { Outlet } from "catalyst-core-internal"
 const App = () => {
     return (
@@ -9,7 +9,7 @@ const App = () => {
     )
 }
-App.serverSideFunction = ({}) => {
+App.serverSideFunction = () => {
     return new Promise((resolve) => resolve())
 }

package/templates/none-js/src/js/routes/utils.jsx ADDED Viewed

@@ -0,0 +1,54 @@
+import React, { Suspense } from "react"
+import { RouterDataProvider, MetaTag } from "catalyst-core-internal"
+import App from "@containers/App/index.jsx"
+import routes from "./index.jsx"
+/**
+ * Making the routes array compatible with the format accepted by createBrowserRouter
+ * API on the client side
+ * https://reactrouter.com/en/main/routers/create-browser-router
+ */
+export const preparedRoutes = ({ routerInitialState }) => {
+    const getPreparedRoutes = (routes) => {
+        return routes.map((route, index) => {
+            let element = null
+            const Component = route.component
+            if (typeof Component === "object" && route.fallback) {
+                element = (
+                    <Suspense fallback={route.fallback}>
+                        <Component key={index} />
+                    </Suspense>
+                )
+            } else {
+                element = <Component key={index} />
+            }
+            const routeToRender = {
+                ...route,
+                element: element,
+            }
+            if (route.children) {
+                routeToRender.children = getPreparedRoutes(route.children)
+            }
+            return routeToRender
+        })
+    }
+    return [
+        {
+            element: (
+                <RouterDataProvider config={{}} initialState={routerInitialState}>
+                    <MetaTag />
+                    <App />
+                </RouterDataProvider>
+            ),
+            children: getPreparedRoutes(routes),
+        },
+    ]
+}
+export const getRoutes = () => {
+    return routes
+}

package/templates/redux-js/client/index.jsx ADDED Viewed

@@ -0,0 +1,23 @@
+import React from "react"
+import "./styles"
+import { hydrateRoot } from "react-dom/client"
+import { Provider } from "react-redux"
+import { RouterProvider } from "catalyst-core-internal"
+import clientRouter from "catalyst-core-internal/router/ClientRouter"
+import configureStore from "@store"
+const { __ROUTER_INITIAL_DATA__: routerInitialData, __INITIAL_STATE__ } = window
+const store = configureStore(__INITIAL_STATE__ || {})
+const router = clientRouter({ store, routerInitialState: routerInitialData })
+const Application = (
+    <Provider store={store} serverState={__INITIAL_STATE__}>
+        <React.StrictMode>
+            <RouterProvider router={router} />
+        </React.StrictMode>
+    </Provider>
+)
+const container = document.getElementById("app")
+hydrateRoot(container, Application)

package/templates/redux-js/package.json CHANGED Viewed

@@ -4,7 +4,10 @@
     "scripts": {
         "start": "catalyst start",
         "build": "catalyst build",
-        "serve": "catalyst serve"
+        "serve": "catalyst serve",
+        "lint": "eslint .",
+        "devBuild": "catalyst devBuild",
+        "devServe": "catalyst devServe"
     },
     "_moduleAliases": {
         "@api": "api.js",
@@ -16,10 +19,13 @@
         "@store": "src/js/store/index.js"
     },
     "dependencies": {
-        "@loadable/component": "^5.16.3",
-        "@tata1mg/router": "^0.0.1-beta.0",
-        "catalyst-core-internal": "^0.0.1-beta.3",
         "@reduxjs/toolkit": "1.9.3",
+        "catalyst-core-internal": "^0.0.2-canary.4",
         "react-redux": "^8.1.3"
+    },
+    "devDependencies": {
+        "eslint": "^8.26.0",
+        "eslint-plugin-react": "^7.34.1",
+        "eslint-plugin-react-hooks": "^4.6.0"
     }
-}
+}

package/templates/{none-js/src/js/containers/App/index.js → redux-js/src/js/containers/App/index.jsx} RENAMED Viewed

@@ -1,5 +1,5 @@
 import React from "react"
-import { Outlet } from "@tata1mg/router"
+import { Outlet } from "catalyst-core-internal"
 const App = () => {
     return (
@@ -9,7 +9,7 @@ const App = () => {
     )
 }
-App.serverSideFunction = ({}) => {
+App.serverSideFunction = () => {
     return new Promise((resolve) => resolve())
 }

package/templates/redux-js/src/js/containers/App/reducer.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { ShellActions } from "./actions"
+import { ShellActions } from "./actions.js"
 export const defaultState = {
     testActionDispatched: false,
@@ -17,4 +17,3 @@ export const shellReducer = (state = defaultState, action) => {
             return state
     }
 }

package/templates/redux-js/src/js/routes/utils.jsx ADDED Viewed

@@ -0,0 +1,54 @@
+import React, { Suspense } from "react"
+import { RouterDataProvider, MetaTag } from "catalyst-core-internal"
+import App from "@containers/App/index.jsx"
+import routes from "./index.jsx"
+/**
+ * Making the routes array compatible with the format accepted by createBrowserRouter
+ * API on the client side
+ * https://reactrouter.com/en/main/routers/create-browser-router
+ */
+export const preparedRoutes = ({ store, routerInitialState }) => {
+    const getPreparedRoutes = (routes) => {
+        return routes.map((route, index) => {
+            let element = null
+            const Component = route.component
+            if (typeof Component === "object" && route.fallback) {
+                element = (
+                    <Suspense fallback={route.fallback}>
+                        <Component key={index} />
+                    </Suspense>
+                )
+            } else {
+                element = <Component key={index} />
+            }
+            const routeToRender = {
+                ...route,
+                element: element,
+            }
+            if (route.children) {
+                routeToRender.children = getPreparedRoutes(route.children)
+            }
+            return routeToRender
+        })
+    }
+    return [
+        {
+            element: (
+                <RouterDataProvider config={{}} initialState={routerInitialState} fetcherArgs={{ store }}>
+                    <MetaTag />
+                    <App />
+                </RouterDataProvider>
+            ),
+            children: getPreparedRoutes(routes),
+        },
+    ]
+}
+export const getRoutes = () => {
+    return routes
+}

package/templates/redux-js/src/js/store/index.js CHANGED Viewed

@@ -6,11 +6,11 @@ import fetchInstance from "@api"
 /**
  * Function that initializes the store with the initialstate and adds middlewares that can be used during action dispatch
  * @param    {object} initialState    Default state
- * @param    {object} request   Request object that we recieve on server, this is only recieved when store is initialised on the server.
+ * @param    {object} request   Request object that we recieve on server, this is only recieved when store is initialized on the server.
  * @return   {object} The store itself
  */
-const configureStore = (initialState, request) => {
+const configureStore = (initialState) => {
     const api = fetchInstance
     const store = createStore({
         reducer: combineReducers({ shellReducer }),

package/templates/rtk-js/client/index.jsx ADDED Viewed

@@ -0,0 +1,24 @@
+import React from "react"
+import "./styles"
+import { hydrateRoot } from "react-dom/client"
+import { Provider } from "react-redux"
+import { RouterProvider } from "catalyst-core-internal"
+import clientRouter from "catalyst-core-internal/router/ClientRouter"
+import configureStore from "@store"
+const { __ROUTER_INITIAL_DATA__: routerInitialData, __INITIAL_STATE__ } = window
+const store = configureStore(__INITIAL_STATE__ || {})
+const router = clientRouter({ store, routerInitialState: routerInitialData })
+const Application = (
+    <Provider store={store} serverState={__INITIAL_STATE__}>
+        <React.StrictMode>
+            <RouterProvider router={router} />
+        </React.StrictMode>
+    </Provider>
+)
+const container = document.getElementById("app")
+hydrateRoot(container, Application)

package/templates/rtk-js/package.json CHANGED Viewed

@@ -4,7 +4,10 @@
     "scripts": {
         "start": "catalyst start",
         "build": "catalyst build",
-        "serve": "catalyst serve"
+        "serve": "catalyst serve",
+        "lint": "eslint .",
+        "devBuild": "catalyst devBuild",
+        "devServe": "catalyst devServe"
     },
     "_moduleAliases": {
         "@api": "api.js",
@@ -16,10 +19,13 @@
         "@store": "src/js/store/index.js"
     },
     "dependencies": {
-        "@loadable/component": "^5.16.3",
-        "@tata1mg/router": "^0.0.1-beta.0",
-        "catalyst-core-internal": "^0.0.1-beta.3",
         "@reduxjs/toolkit": "1.9.3",
+        "catalyst-core-internal": "^0.0.2-canary.4",
         "react-redux": "^8.1.3"
+    },
+    "devDependencies": {
+        "eslint": "^8.26.0",
+        "eslint-plugin-react": "^7.34.1",
+        "eslint-plugin-react-hooks": "^4.6.0"
     }
-}
+}

package/templates/rtk-js/src/js/containers/App/{index.js → index.jsx} RENAMED Viewed

@@ -1,5 +1,5 @@
 import React from "react"
-import { Outlet } from "@tata1mg/router"
+import { Outlet } from "catalyst-core-internal"
 const App = () => {
     return (
@@ -9,7 +9,7 @@ const App = () => {
     )
 }
-App.serverSideFunction = ({}) => {
+App.serverSideFunction = () => {
     return new Promise((resolve) => resolve())
 }

package/templates/rtk-js/src/js/containers/App/reducer.js CHANGED Viewed

@@ -8,7 +8,7 @@ export const appSlice = createSlice({
     name: "shellReducer",
     initialState: initialState,
     reducers: {
-        reduxTest: (state, action) => {
+        reduxTest: (state) => {
             state.testActionDispatched = true
         },
     },

package/templates/rtk-js/src/js/routes/utils.jsx ADDED Viewed

@@ -0,0 +1,54 @@
+import React, { Suspense } from "react"
+import { RouterDataProvider, MetaTag } from "catalyst-core-internal"
+import App from "@containers/App/index.jsx"
+import routes from "./index.jsx"
+/**
+ * Making the routes array compatible with the format accepted by createBrowserRouter
+ * API on the client side
+ * https://reactrouter.com/en/main/routers/create-browser-router
+ */
+export const preparedRoutes = ({ store, routerInitialState }) => {
+    const getPreparedRoutes = (routes) => {
+        return routes.map((route, index) => {
+            let element = null
+            const Component = route.component
+            if (typeof Component === "object" && route.fallback) {
+                element = (
+                    <Suspense fallback={route.fallback}>
+                        <Component key={index} />
+                    </Suspense>
+                )
+            } else {
+                element = <Component key={index} />
+            }
+            const routeToRender = {
+                ...route,
+                element: element,
+            }
+            if (route.children) {
+                routeToRender.children = getPreparedRoutes(route.children)
+            }
+            return routeToRender
+        })
+    }
+    return [
+        {
+            element: (
+                <RouterDataProvider config={{}} initialState={routerInitialState} fetcherArgs={{ store }}>
+                    <MetaTag />
+                    <App />
+                </RouterDataProvider>
+            ),
+            children: getPreparedRoutes(routes),
+        },
+    ]
+}
+export const getRoutes = () => {
+    return routes
+}

package/templates/rtk-js/src/js/store/index.js CHANGED Viewed

@@ -6,11 +6,11 @@ import fetchInstance from "@api"
 /**
  * Function that initializes the store with the initialstate and adds middlewares that can be used during action dispatch
  * @param    {object} initialState    Default state
- * @param    {object} request   Request object that we recieve on server, this is only recieved when store is initialised on the server.
+ * @param    {object} request   Request object that we recieve on server, this is only recieved when store is initialized on the server.
  * @return   {object} The store itself
  */
-const configureStore = (initialState, request) => {
+const configureStore = (initialState) => {
     const api = fetchInstance
     const store = createStore({
         reducer: combineReducers({ shellReducer }),

package/templates/common/.babelrc DELETED Viewed

@@ -1,26 +0,0 @@
-{
-    "presets": [
-        [
-            "@babel/preset-env",
-            {
-                "targets": {
-                    "node": "current"
-                }
-            }
-        ],
-        "@babel/preset-react"
-    ],
-    "plugins": [
-        "@babel/plugin-proposal-object-rest-spread",
-        "transform-es2015-modules-commonjs",
-        "transform-class-properties",
-        "dynamic-import-node",
-        "@loadable/babel-plugin"
-    ],
-    "env": {
-        "test": {
-            "presets": ["@babel/preset-react"]
-        }
-    },
-    "ignore": ["__TEST__"]
-}

package/templates/common/src/js/routes/index.js DELETED Viewed

@@ -1,17 +0,0 @@
-import Home from "@containers/Home/Home"
-const routes = [
-    {
-        path: "/",
-        end: true,
-        component: Home,
-    },
-]
-/**
- * Making the routes array compatible with the format accepted by createBrowserRouter
- * API on the client side
- * https://reactrouter.com/en/main/routers/create-browser-router
- */
-export default routes

package/templates/common/src/js/routes/utils.js DELETED Viewed

@@ -1,29 +0,0 @@
-import React from "react"
-import { RouterDataProvider, MetaTag } from "@tata1mg/router"
-import App from "@containers/App"
-import routes from "./index.js"
-export const preparedRoutes = ({ store, routerInitialState }) => {
-    return [
-        {
-            element: (
-                <RouterDataProvider config={{}} initialState={routerInitialState} fetcherArgs={{ store }}>
-                    <MetaTag />
-                    <App />
-                </RouterDataProvider>
-            ),
-            children: getRoutes()?.map((route, index) => {
-                const Component = route.component
-                // const pageType = route.staticPageType ? route.staticPageType : null
-                return {
-                    ...route,
-                    element: <Component key={index} />,
-                }
-            }),
-        },
-    ]
-}
-export const getRoutes = () => {
-    return routes
-}