create-catalyst-app 0.0.1-beta.9 → 0.0.2-canary.1

package/package.json

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

package/templates/common/config/config.json

@@ -4,9 +4,11 @@
     "WEBPACK_DEV_SERVER_HOSTNAME": "localhost",
     "WEBPACK_DEV_SERVER_PORT": 3006,
     "BUILD_OUTPUT_PATH": "build",
-    "PUBLIC_STATIC_ASSET_PATH": "/assets/",
+    "PUBLIC_STATIC_ASSET_PATH": "/client/",
     "PUBLIC_STATIC_ASSET_URL": "http://localhost:3005",
     "API_URL": "",
     "ANALYZE_BUNDLE": false,
-    "CLIENT_ENV_VARIABLES": ["API_URL"]
-}
+    "CLIENT_ENV_VARIABLES": [
+        "API_URL"
+    ]
+}

package/templates/common/server/server.js

@@ -1,5 +1,10 @@
-const express = require("express")
-const path = require("path")
+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.
 

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

@@ -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.js → index.jsx}

@@ -1,4 +1,4 @@
-import Home from "@containers/Home/Home"
+import Home from "@containers/Home/Home.jsx"
 
 const routes = [
     {

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

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

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

@@ -0,0 +1,18 @@
+import React from "react"
+import "./styles"
+import { hydrateRoot } from "react-dom/client"
+import { RouterProvider } from "catalyst-core"
+import clientRouter from "catalyst-core/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

@@ -1,6 +1,7 @@
 {
     "name": "create-catalyst-app-starter",
     "version": "1.0.0",
+    "type": "module",
     "scripts": {
         "start": "catalyst start",
         "build": "catalyst build",
@@ -17,14 +18,12 @@
         "@css": "src/static/css",
         "@routes": "src/js/routes/"
     },
-    "dependencies": {
-        "@loadable/component": "^5.16.3",
-        "@tata1mg/router": "^0.0.1-beta.5",
-        "catalyst-core": "^0.0.1-beta.8"
-    },
     "devDependencies": {
         "eslint": "^8.26.0",
         "eslint-plugin-react": "^7.34.1",
         "eslint-plugin-react-hooks": "^4.6.0"
+    },
+    "dependencies": {
+        "catalyst-core": "^0.0.2-canary.1"
     }
 }

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

@@ -1,5 +1,5 @@
 import React from "react"
-import { Outlet } from "@tata1mg/router"
+import { Outlet } from "catalyst-core"
 
 const App = () => {
     return (

package/templates/none-js/src/js/routes/{utils.js → utils.jsx}

@@ -1,7 +1,7 @@
-import React from "react"
-import { RouterDataProvider, MetaTag } from "@tata1mg/router"
-import App from "@containers/App"
-import routes from "./index.js"
+import React, { Suspense } from "react"
+import { RouterDataProvider, MetaTag } from "catalyst-core"
+import App from "@containers/App/index.jsx"
+import routes from "./index.jsx"
 
 /**
  * Making the routes array compatible with the format accepted by createBrowserRouter
@@ -12,10 +12,22 @@ import routes from "./index.js"
 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: <Component key={index} />,
+                element: element,
             }
             if (route.children) {
                 routeToRender.children = getPreparedRoutes(route.children)

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

@@ -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"
+import clientRouter from "catalyst-core/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

@@ -1,6 +1,7 @@
 {
     "name": "create-catalyst-app-starter",
     "version": "1.0.0",
+    "type": "module",
     "scripts": {
         "start": "catalyst start",
         "build": "catalyst build",
@@ -19,10 +20,8 @@
         "@store": "src/js/store/index.js"
     },
     "dependencies": {
-        "@loadable/component": "^5.16.3",
-        "@tata1mg/router": "^0.0.1-beta.5",
-        "catalyst-core": "0.0.1-beta.8",
         "@reduxjs/toolkit": "1.9.3",
+        "catalyst-core": "^0.0.2-canary.1",
         "react-redux": "^8.1.3"
     },
     "devDependencies": {

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

@@ -1,5 +1,5 @@
 import React from "react"
-import { Outlet } from "@tata1mg/router"
+import { Outlet } from "catalyst-core"
 
 const App = () => {
     return (

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

@@ -1,4 +1,4 @@
-import { ShellActions } from "./actions"
+import { ShellActions } from "./actions.js"
 
 export const defaultState = {
     testActionDispatched: false,

package/templates/{rtk-js/src/js/routes/utils.js → redux-js/src/js/routes/utils.jsx}

@@ -1,7 +1,7 @@
-import React from "react"
-import { RouterDataProvider, MetaTag } from "@tata1mg/router"
-import App from "@containers/App"
-import routes from "./index.js"
+import React, { Suspense } from "react"
+import { RouterDataProvider, MetaTag } from "catalyst-core"
+import App from "@containers/App/index.jsx"
+import routes from "./index.jsx"
 
 /**
  * Making the routes array compatible with the format accepted by createBrowserRouter
@@ -12,10 +12,22 @@ import routes from "./index.js"
 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: <Component key={index} />,
+                element: element,
             }
             if (route.children) {
                 routeToRender.children = getPreparedRoutes(route.children)

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

@@ -1,4 +1,5 @@
-import { configureStore as createStore } from "@reduxjs/toolkit"
+import * as toolkitRaw from "@reduxjs/toolkit"
+const { configureStore: createStore } = toolkitRaw.default ?? toolkitRaw
 import { combineReducers } from "redux"
 import { shellReducer } from "@containers/App/reducer.js"
 import fetchInstance from "@api"

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

@@ -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"
+import clientRouter from "catalyst-core/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

@@ -1,6 +1,7 @@
 {
     "name": "create-catalyst-app-starter",
     "version": "1.0.0",
+    "type": "module",
     "scripts": {
         "start": "catalyst start",
         "build": "catalyst build",
@@ -19,10 +20,8 @@
         "@store": "src/js/store/index.js"
     },
     "dependencies": {
-        "@loadable/component": "^5.16.3",
-        "@tata1mg/router": "^0.0.1-beta.5",
-        "catalyst-core": "^0.0.1-beta.8",
         "@reduxjs/toolkit": "1.9.3",
+        "catalyst-core": "^0.0.2-canary.1",
         "react-redux": "^8.1.3"
     },
     "devDependencies": {

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

@@ -1,5 +1,5 @@
 import React from "react"
-import { Outlet } from "@tata1mg/router"
+import { Outlet } from "catalyst-core"
 
 const App = () => {
     return (

package/templates/{redux-js/src/js/routes/utils.js → rtk-js/src/js/routes/utils.jsx}

@@ -1,7 +1,7 @@
-import React from "react"
-import { RouterDataProvider, MetaTag } from "@tata1mg/router"
-import App from "@containers/App"
-import routes from "./index.js"
+import React, { Suspense } from "react"
+import { RouterDataProvider, MetaTag } from "catalyst-core"
+import App from "@containers/App/index.jsx"
+import routes from "./index.jsx"
 
 /**
  * Making the routes array compatible with the format accepted by createBrowserRouter
@@ -12,10 +12,22 @@ import routes from "./index.js"
 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: <Component key={index} />,
+                element: element,
             }
             if (route.children) {
                 routeToRender.children = getPreparedRoutes(route.children)

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

@@ -1,4 +1,5 @@
-import { configureStore as createStore } from "@reduxjs/toolkit"
+import * as toolkitRaw from "@reduxjs/toolkit"
+const { configureStore: createStore } = toolkitRaw.default ?? toolkitRaw
 import { combineReducers } from "redux"
 import { shellReducer } from "@containers/App/reducer.js"
 import fetchInstance from "@api"

package/templates/none-js/client/index.js

@@ -1,23 +0,0 @@
-import React from "react"
-import "./styles"
-import { hydrateRoot } from "react-dom/client"
-import { loadableReady } from "@loadable/component"
-import { RouterProvider } from "@tata1mg/router"
-import clientRouter from "catalyst-core/router/ClientRouter"
-
-window.addEventListener("load", () => {
-    loadableReady(() => {
-        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/redux-js/client/index.js

@@ -1,28 +0,0 @@
-import React from "react"
-import "./styles"
-import { hydrateRoot } from "react-dom/client"
-import { loadableReady } from "@loadable/component"
-import { Provider } from "react-redux"
-import { RouterProvider } from "@tata1mg/router"
-import clientRouter from "catalyst-core/router/ClientRouter"
-import configureStore from "@store"
-
-window.addEventListener("load", () => {
-    loadableReady(() => {
-        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/client/index.js

@@ -1,28 +0,0 @@
-import React from "react"
-import "./styles"
-import { hydrateRoot } from "react-dom/client"
-import { loadableReady } from "@loadable/component"
-import { Provider } from "react-redux"
-import { RouterProvider } from "@tata1mg/router"
-import clientRouter from "catalyst-core/router/ClientRouter"
-import configureStore from "@store"
-
-window.addEventListener("load", () => {
-    loadableReady(() => {
-        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)
-    })
-})