create-catalyst-app-internal 0.0.1-beta.67 → 0.0.1-beta.69

package/package.json

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

package/scripts/cli.cjs

@@ -34,6 +34,7 @@ const program = new Commander.Command()
                 tailWindSupport: null,
                 description: null,
                 stateManagement: cmd.stateManagement,
+                mcpSupport: null,
             }
 
             if (process.argv.includes("new-route")) {
@@ -55,6 +56,7 @@ const program = new Commander.Command()
                     tailWindSupport: false,
                     description: "Default catalyst app",
                     stateManagement: "none",
+                    mcpSupport: true,
                 }
             }
 
@@ -74,6 +76,7 @@ const program = new Commander.Command()
             const language = config.language || (await promptTypescript())
             const tailWindSupport = config.tailWindSupport !== null || (await promptTailwind())
             const stateManagement = config.stateManagement || (await promptStateManagement())
+            const mcpSupport = config.mcpSupport !== null || (await promptMcp())
 
             // Define mapping of options to repository suffixes
             const repositorySuffixes = {
@@ -90,9 +93,11 @@ const program = new Commander.Command()
             const commonCodeDirectory = "package/templates/common"
             const selectedTemplateCode = `package/templates/${repositorySuffixes[stateManagement]}-${repositorySuffixes[language]}`
             const tailwindCodeDirectory = "package/templates/tailwind"
+            const mcpCodeDirectory = "package/templates/mcp-root"
 
             const subDirectoriesToExtract = [commonCodeDirectory, selectedTemplateCode]
             if (tailWindSupport) subDirectoriesToExtract.push(tailwindCodeDirectory)
+            if (mcpSupport) subDirectoriesToExtract.push(mcpCodeDirectory)
 
             const extractionDestination = `/${projectName}/`
             let tempDir
@@ -106,6 +111,7 @@ const program = new Commander.Command()
                     createGitignore(projectName)
 
                     if (tailWindSupport) setupTailwind(projectName)
+                    if (mcpSupport) setupMcp(projectName)
 
                     execSync(
                         `cd ${projectName} && npm i && npm pkg set name=${projectName} ${projectDescription ? `description="${projectDescription}"` : ""} && git init --quiet && git add . && git commit -m "initial commit from Create Catalyst App"`,
@@ -183,6 +189,9 @@ const program = new Commander.Command()
                             if (entry.path.startsWith(tailwindCodeDirectory)) {
                                 entry.path = entry.path.replace(tailwindCodeDirectory, extractionDestination)
                             }
+                            if (entry.path.startsWith(mcpCodeDirectory)) {
+                                entry.path = entry.path.replace(mcpCodeDirectory, extractionDestination)
+                            }
                         },
                     })
                 } catch (e) {
@@ -278,6 +287,19 @@ async function promptTailwind() {
     return response.tailwind
 }
 
+async function promptMcp() {
+    const response = await prompts({
+        type: "select",
+        name: "mcp",
+        message: "Would you like to setup an MCP server?",
+        choices: [
+            { title: "Yes", value: true },
+            { title: "No", value: false },
+        ],
+    })
+    return response.mcp
+}
+
 async function setupTailwind(projectName) {
     try {
         const packageJsonPath = path.join(process.cwd(), projectName, "package.json")
@@ -294,6 +316,21 @@ async function setupTailwind(projectName) {
     }
 }
 
+async function setupMcp(projectName) {
+    try {
+        const packageJsonPath = path.join(process.cwd(), projectName, "package.json")
+        const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf8"))
+        packageJson.dependencies = {
+            ...(packageJson.dependencies || {}),
+            "@modelcontextprotocol/sdk": "^1.12.3",
+        }
+        fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2))
+    } catch (error) {
+        console.log("Error while setting up MCP:", error)
+        process.exit(1)
+    }
+}
+
 function validateOptions(cmd) {
     // Validate language option
     if (cmd.lang && !["js", "ts"].includes(cmd.lang.toLowerCase())) {

package/templates/common/server/document.js

@@ -1,5 +1,5 @@
 import React from "react"
-import { Head, Body } from "catalyst-core-internal"
+import { Head, Body } from "catalyst-core"
 
 function Document(props) {
     return (

package/templates/mcp-root/mcp/context.md

@@ -0,0 +1,509 @@
+Catalyst Context
+
+-   Catalyst is a framework over react to build UIs
+
+---
+
+TITLE: Creating a new catalyst application
+
+DESCRIPTION: A new catalyst app can be created using the create-catalyst-app CLI command
+
+SOURCE: https://catalyst.1mg.com/public_docs/content/installation
+
+LANGUAGE: bash
+CODE:
+
+```
+npx create-catalyst-app@latest -y
+```
+
+---
+
+---
+
+TITLE: Starting the catalyst application
+
+DESCRIPTION: This snippet starts the catalyst development application, The application supports hot reloading
+the application is typically served on `http://localhost:3005`
+
+SOURCE: https://catalyst.1mg.com/public_docs/content/installation
+
+LANGUAGE: bash
+CODE:
+
+```
+npm run start
+```
+
+---
+
+---
+
+TITLE: Adding routes in catalyst
+
+DESCRIPTION:
+
+-   Catalyst uses @tata1mg/router package for routing, which is a wrapper around react-router
+-   Catalyst uses react-router-v6 based routing
+-   Routes are defined in "src/js/routes/index.js" file
+-   Pages are imported at top of this file
+-   A new entry in the routes array is added like this
+
+SOURCE: https://catalyst.1mg.com/public_docs/content/Core%20Concepts/Routing/routing/index
+
+LANGUAGE: js
+CODE:
+
+```
+{
+    path: "", // path of the page
+    end: false,
+    component: Page, // name of the page
+},
+```
+
+---
+
+---
+
+TITLE: Navigation in catalyst
+
+DESCRIPTION:
+
+-   Navigation in @tata1mg/router is based on react-router-v6, and client side navigation can be achieved through components like <Navigate> or <Link> or through hooks like useNavigate
+
+LANGUAGE: js
+CODE:
+
+```
+import { useNavigate } from "@tata1mg/router"
+const Page = () => {
+    const navigate = useNavigate()
+    return (
+        <div onClick={() => navigate("/about")}>Click to navigate</div>
+    )
+}
+```
+
+LANGUAGE: js
+CODE:
+
+```
+import { Link } from "@tata1mg/router"
+const Page = () => {
+    const navigate = useNavigate()
+    return (
+        <Link to="/about">Click to navigate</Link>
+    )
+}
+```
+
+-   Navigation inside clientFetcher function can be achieved through the navigate property which is available as an argument in clientFetcher.
+
+LANGUAGE: js
+CODE:
+
+```
+Page.clientFetcher = async ({ navigate }) => {
+  navigate("/about")
+}
+```
+
+-   Navigation inside serverFetcher function can also be achieved through the navigate property which is available as an argument in serverFetcher.
+    navigate available inside server fetcher is a wrapper around response.send() so it would result it server side navigation.
+
+LANGUAGE: js
+CODE:
+
+```
+Page.serverFetcher = async ({ navigate }) => {
+  navigate("/about") // will be navigated to /about on the server
+}
+```
+
+---
+
+---
+
+TITLE: Data fetching in catalyst
+
+DESCRIPTION:
+
+-   Routes can fetch data using two primary functions:
+
+1. **Client Fetcher**: Executes during client-side navigation or absence of **_server fetcher_**.
+2. **Server Fetcher**: Executes during server-side rendering (SSR)
+
+LANGUAGE: js
+CODE:
+
+```
+const Page = ()=> <div>Some Page</div>
+
+// Client-side data fetching
+Page.clientFetcher = (routerProps,fetcherArgs) => { return new Promise()}
+
+// Server-side data fetching
+Page.serverFetcher = (serverRouterProps,fetcherArgs) => { return new Promise()}
+```
+
+clientFetcher will be called during client side navigation, when navigating through <Link/> or <Navigate> components or by using hooks like useNavigate provided by router.
+
+LANGUAGE: js
+CODE:
+
+```
+Page.clientFetcher = async ({ route, location, params, searchParams, navigate }, { store }) => {
+  const res = await await fetch('<https://api.example.com/data>');
+  const json = await res.json();
+  return json;
+};
+```
+
+serverFetcher will be called during the first fold request or when navigation is done by window.location.href or similar methods. It will only be called on the server and will not be included in the client bundle, so it is safe to use server only secrets in this function
+
+LANGUAGE: js
+CODE:
+
+```
+Page.serverFunction = async ({ route, location, params, searchParams, navigate },{ store }) => {
+  const res = await fetch('<https://api.example.com/data>');
+  const json = await res.json();
+  return json;
+};
+```
+
+useCurrentRouteData hook from @tata1mg/router returns the current router context object with data, error, isFetching, isFetched, refetch and clear properties.
+
+LANGUAGE: js
+CODE:
+
+```
+import { useCurrentRouteData } from "@tata1mg/router"
+const Home = () => {
+  const { isFetching, isFetched, error, data, refetch, clear } = useCurrentRouteData()
+}
+
+Home.clientFetcher = async () => {
+  return {status:200}
+}
+```
+
+The useRouterData hook returns a router context object with data of all the fetchers in the current route tree.
+
+refetch executes the client loader. A custom argument can be passed while calling it through refetch in client loader to handle use cases where the fetch function needs to access the application state like for pagination, infinite scroll, etc.
+
+LANGUAGE: js
+CODE:
+
+```
+const Home = () => {
+  ...
+  useEffect(()=>{
+    refetch({pageNo})
+  },[pageNo])
+}
+Home.clientFetcher = async ({},{},{pageNo}) => {
+  const res = await fetch(`some_url/${pageNo}`)
+  const json = await res.json()
+  return json
+}
+```
+
+The clear function clears the data for the particular route from where it is called.
+
+LANGUAGE: js
+CODE:
+
+```
+const Home = () => {
+  ...
+  useEffect(()=>{
+    clear()
+  },[pathname])
+
+  //will clear data for this particular route on navigation
+}
+```
+
+---
+
+---
+
+TITLE: Environment variables in catalyst
+
+DESCRIPTION:
+
+-   Catalyst can be configured through a config/config.json file in the root of your project directory. You can define your keys to access them inside the project.
+-   These variables will be accessible through process.env[variable_name].
+-   Out of the complete contents of config/config.json, keys listed in CLIENT_ENV_KEYS are filtered and made available for the client side code.
+-   Any key that is listed in CLIENT_ENV_KEYS will be exposed on the client and can become a security issue. Be careful while adding keys
+
+---
+
+---
+
+TITLE: App shell in catalyst
+
+DESCRIPTION:
+
+-   Catalyst offers an app shell, which serves as a wrapper around your page code, enabling you to perform common operations required for all pages. You can access the app shell inside the src/js/containers/App directory under the src folder.
+-   All your pages will be rendered in this app shell. It will be the parent component for all your apps.
+-   The app shell provides you with a function called serverSideFunction, which you can use to perform any operations while rendering your page on the server. This function is similar to serverFetcher, which we define in the page component. The key distinction lies in the fact that serverSideFunction runs on each page request, whereas serverFetcher runs only when that specific page is requested.
+
+LANGUAGE: js
+CODE:
+
+```
+import React from "react"
+import { Outlet } from "@tata1mg/router"
+
+const App = () => {
+    return (
+        <>
+            <Outlet />
+        </>
+    )
+}
+
+App.serverSideFunction = ({store, req, res}) => {
+    return new Promise((resolve) => resolve())
+}
+
+export default App
+```
+
+---
+
+---
+
+TITLE: Lifecycle methods in catalyst
+
+DESCRIPTION:
+
+-   Catalyst provides several methods to handle different stages of the SSR lifecycle, allowing for more fine grain control over the flow
+-   Functions
+    1. preServerInit - Triggers before starting the server.
+    2. onServerError - Triggered if the SSR server fails to start or encounters a critical error. Useful for handling server initialization issues.
+    3. onRouteMatch - Called after route matching attempts, regardless of whether a match was found or not. This method enables you to handle both successful and failed route matches
+    4. onFetcherSuccess - Triggered after running a container's serverFetcher (currently running for both success and failure case)
+    5. onRenderError - Executes when the rendering process encounters an error. This allows you to handle any failures during component rendering.
+    6. onRequestError - Executes if any error occurs while handling the document request (think of it like the outer most catch block)
+-   All these functions can be defined in and exported from server/index.js
+
+LANGUAGE: js
+CODE:
+
+```
+export const preServerInit = () => {}
+```
+
+---
+
+---
+
+TITLE: Adding middlewares on the server
+
+DESCRIPTION:
+
+-   Catalyst offers a flexible approach to defining server-side code, granting you greater control and customization over server operations.
+-   To modify the server behavior, create a file named server.js within the server directory of your app.
+-   Define a function named addMiddlewares, which receives the app server instance as a parameter. Catalyst - provides this instance when executing the function on the server.
+-   Use the app parameter to configure middleware for your application.
+
+LANGUAGE: js
+File: server/server.js
+CODE:
+
+```
+export function addMiddlewares(app) {
+  // server code
+}
+```
+
+---
+
+---
+
+TITLE: Styling in catalyst
+
+DESCRIPTION:
+
+-   Catalyst offers a variety of methods for styling your application
+
+Global CSS
+
+-   Global styles can be imported into any layout, page, or component.
+-   Place all your global css in "/src/static/css/base"
+-   Placing css in "/src/static/css/base" would prevent it from being modularized as css-module is enabled by default in Catalyst
+-   Import these global css file in client/styles.js so that it can be available globally.
+
+LANGUAGE: js
+File: Home.js
+CODE:
+
+```
+const Home = () => {
+    return <section className="marginTop-4">Home</section>
+}
+```
+
+LANGUAGE: js
+File: client/styles.js
+CODE:
+
+```
+import "src/static/css/base/layout.css"
+```
+
+LANGUAGE: css
+File: src/static/css/base/layout.css
+CODE:
+
+```
+.marginTop-4 {
+    margin-top: 4px;
+}
+```
+
+CSS modules
+
+-   Catalyst enables support for css-module out-of-the-box. CSS-modules locally scope CSS by creating unique names. This allows you to use same classnames in different files without worrying about naming conflicts.
+
+LANGUAGE: js
+CODE:
+
+```
+import css from "./styles.css"
+
+const Home = () => {
+    return <section className={css.layout}>Home</section>
+}
+```
+
+Sass
+
+-   Catalyst includes out-of-the-box support for Sass. Utilize Sass in Catalyst with the .scss file extension.
+-   Place all mixins, variables, and other Sass resources in /src/static/css/resources. These will be automatically imported into your .scss files, allowing you to use these resources without manual imports.
+
+---
+
+---
+
+TITLE: Code splitting in catalyst
+
+DESCRIPTION:
+
+-   Catalyst utilizes loadable-components for efficient code splitting on both the client and server. It offers built-in support for code splitting, making it easy to split your code into smaller chunks.
+
+LANGUAGE: js
+CODE:
+
+```
+const Component = loadable(()=> import("@components/Component.js"),{
+    fallback: <div>Fallback</div>,
+    ssr:false
+})
+
+const App = () => {
+  return (
+      <Component />
+  );
+};
+```
+
+---
+
+---
+
+TITLE: Module aliases in catalyst
+
+DESCRIPTION:
+
+-   Catalyst supports module aliases to create shorter and more descriptive import paths for modules. This practice can make the codebase cleaner and more maintainable. Some module aliases come pre-configured when setting up Catalyst, making imports cleaner.
+-   To create module aliases, add \_moduleAliases key to package.json
+
+LANGUAGE: JSON
+CODE:
+
+```
+{
+  "_moduleAliases": {
+    "@api": "api.js",
+    "@containers": "src/js/containers",
+    "@server": "server",
+    "@config": "config",
+    "@css": "src/static/css",
+    "@routes": "src/js/routes/",
+    "@store": "src/js/store/index.js"
+  }
+}
+```
+
+---
+
+---
+
+TITLE: Custom document
+
+DESCRIPTION:
+
+-   The document is an HTML file served by the Node server whenever a page request is made. It contains the head, body, and all HTML tags.
+-   Custom Document enables ability to update these tags and render the data according to the needs.
+-   Head and Body tags are required and the application won't work without it. It is mandatory to pass props because they are used in Head and Body tags.
+-   Custom tags should be added between the Head and Body tags.
+
+LANGUAGE: js
+FILE: server/document.js
+CODE:
+
+```
+import { Head, Body } from "catalyst"
+
+function Document(props) {
+    return (
+        <html lang={props.lang}>
+            <Head {...props} />
+            <Body {...props} />
+        </html>
+    )
+}
+export default Document
+```
+
+---
+
+---
+
+TITLE: Webpack customization
+
+DESCRIPTION:
+
+-   Catalyst provides ways to customize webpack configuration for specific needs through the webpackConfig.js file.
+
+Catalyst allows customizing webpack's chunk splitting behavior through the splitChunksConfig option
+LANGUAGE: js
+CODE:
+
+```
+module.exports = {
+  splitChunksConfig: {
+    chunks: 'all',
+    minSize: 20000,
+    minChunks: 1,
+  }
+};
+```
+
+Some packages are distributed as ESM-only (ECMAScript Modules) and cannot be directly imported in Catalyst's CommonJS environment. To handle these packages, you can use the transpileModules option:
+
+```
+module.exports = {
+  transpileModules: [
+    'esm-only-package',
+    /@scope/another-esm-package/
+  ]
+};
+```
+
+---

package/templates/mcp-root/mcp/mcp.js

@@ -0,0 +1,36 @@
+const fs = require("fs")
+const path = require("path")
+const { McpServer } = require("@modelcontextprotocol/sdk/server/mcp.js")
+const { StdioServerTransport } = require("@modelcontextprotocol/sdk/server/stdio.js")
+
+const server = new McpServer({
+    name: "catalyst",
+    version: "1.0.0",
+    capabilities: {
+        tools: {},
+    },
+})
+
+server.tool("get_context", "Complete context of catalyst framework", {}, () => {
+    const context = fs.readFileSync(path.join(__dirname, "context.md"), "utf-8")
+    return {
+        content: [
+            {
+                type: "text",
+                text: context,
+            },
+        ],
+    }
+})
+
+const init = async () => {
+    try {
+        const transport = new StdioServerTransport()
+        await server.connect(transport)
+        console.log("MCP Server Running!")
+    } catch (error) {
+        console.error("Error starting MCP server:", error)
+    }
+}
+
+init()

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

@@ -3,7 +3,7 @@ import "./styles"
 import { hydrateRoot } from "react-dom/client"
 import { loadableReady } from "@loadable/component"
 import { RouterProvider } from "@tata1mg/router"
-import clientRouter from "catalyst-core-internal/router/ClientRouter"
+import clientRouter from "catalyst-core/router/ClientRouter"
 
 window.addEventListener("load", () => {
     loadableReady(() => {

package/templates/none-js/package.json

@@ -20,7 +20,7 @@
     "dependencies": {
         "@loadable/component": "^5.16.3",
         "@tata1mg/router": "^0.0.1-beta.7",
-        "catalyst-core-internal": "0.0.1-beta.65"
+        "catalyst-core": "0.0.1-beta.14"
     },
     "devDependencies": {
         "eslint": "^8.26.0",

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

@@ -3,7 +3,7 @@ import "./styles"
 import { hydrateRoot } from "react-dom/client"
 import { loadableReady } from "@loadable/component"
 import { RouterProvider } from "@tata1mg/router"
-import clientRouter from "catalyst-core-internal/router/ClientRouter"
+import clientRouter from "catalyst-core/router/ClientRouter"
 
 window.addEventListener("load", () => {
     loadableReady(() => {

package/templates/none-ts/package.json

@@ -21,7 +21,7 @@
     "dependencies": {
         "@loadable/component": "^5.16.3",
         "@tata1mg/router": "^0.0.1-beta.7",
-        "catalyst-core-internal": "0.0.1-beta.65"
+        "catalyst-core": "0.0.1-beta.14"
     },
     "devDependencies": {
         "eslint": "^8.26.0",

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

@@ -4,7 +4,7 @@ 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-internal/router/ClientRouter"
+import clientRouter from "catalyst-core/router/ClientRouter"
 import configureStore from "@store"
 
 window.addEventListener("load", () => {

package/templates/redux-js/package.json

@@ -21,7 +21,7 @@
     "dependencies": {
         "@loadable/component": "^5.16.3",
         "@tata1mg/router": "^0.0.1-beta.7",
-        "catalyst-core-internal": "0.0.1-beta.65",
+        "catalyst-core": "0.0.1-beta.14",
         "@reduxjs/toolkit": "1.9.3",
         "react-redux": "^8.1.3"
     },

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

@@ -4,7 +4,7 @@ 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-internal/router/ClientRouter"
+import clientRouter from "catalyst-core/router/ClientRouter"
 import configureStore from "@store"
 
 window.addEventListener("load", () => {

package/templates/redux-ts/package.json

@@ -22,7 +22,7 @@
     "dependencies": {
         "@loadable/component": "^5.16.3",
         "@tata1mg/router": "^0.0.1-beta.7",
-        "catalyst-core-internal": "0.0.1-beta.65",
+        "catalyst-core": "0.0.1-beta.14",
         "@reduxjs/toolkit": "1.9.3",
         "react-redux": "^8.1.3"
     },

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

@@ -4,7 +4,7 @@ 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-internal/router/ClientRouter"
+import clientRouter from "catalyst-core/router/ClientRouter"
 import configureStore from "@store"
 
 window.addEventListener("load", () => {

package/templates/rtk-js/package.json

@@ -21,7 +21,7 @@
     "dependencies": {
         "@loadable/component": "^5.16.3",
         "@tata1mg/router": "^0.0.1-beta.7",
-        "catalyst-core-internal": "0.0.1-beta.65",
+        "catalyst-core": "0.0.1-beta.14",
         "@reduxjs/toolkit": "1.9.3",
         "react-redux": "^8.1.3"
     },

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

@@ -4,7 +4,7 @@ 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-internal/router/ClientRouter"
+import clientRouter from "catalyst-core/router/ClientRouter"
 import configureStore from "@store"
 
 window.addEventListener("load", () => {

package/templates/rtk-ts/package.json

@@ -22,7 +22,7 @@
     "dependencies": {
         "@loadable/component": "^5.16.3",
         "@tata1mg/router": "^0.0.1-beta.7",
-        "catalyst-core-internal": "0.0.1-beta.65",
+        "catalyst-core": "0.0.1-beta.14",
         "@reduxjs/toolkit": "1.9.3",
         "react-redux": "^8.1.3"
     },