create-plasmic-app 0.0.96 → 0.0.97

package/src/react/react.ts

@@ -16,10 +16,31 @@ export const reactStrategy: CPAStrategy = {
   create: async (args) => {
     const { projectPath, jsOrTs } = args;
     let { template } = args;
-    const createCommand = `npx create-react-app@latest ${projectPath}`;
 
-    if (!template && jsOrTs === "ts") {
-      template = "typescript";
+    /* create-vite package checks if the targetDir doesn't exist then it creates the targetDir in the
+      current directory instead of the targetDir path. For example,
+      1. Let's say current directory is /tmp/cpa-out
+      2. npm create vite@latest /private/tmp/cpa-out/react-codegen-ts will create
+      /tmp/cpa-out/private/tmp/cpa-out/react-codegen-ts directory instead of /private/tmp/cpa-out/react-codegen-ts
+
+      To avoid this behaviour, we will ensure the fullProjectPath exists
+      1. we get the projectName (react-codegen-ts), and parentDir (/private/tmp/cpa-out)
+      2. change directory to parentDir and execute the command with projectName
+     */
+    const fullProjectPath = path.isAbsolute(projectPath)
+      ? projectPath
+      : path.resolve(process.cwd(), projectPath);
+
+    await fs.mkdir(fullProjectPath, { recursive: true });
+
+    const projectName = path.basename(fullProjectPath);
+    const parentDir = path.dirname(fullProjectPath);
+    process.chdir(parentDir);
+
+    const createCommand = `npm create vite@latest ${projectName} --`;
+
+    if (!template) {
+      template = jsOrTs === "ts" ? "react-ts" : "react";
     }
 
     const templateArg = template ? ` --template ${template}` : "";
@@ -35,7 +56,28 @@ export const reactStrategy: CPAStrategy = {
     }
   },
   overwriteConfig: async (args) => {
-    // No config to overwrite
+    const { projectPath, jsOrTs } = args;
+
+    if (jsOrTs === "ts") {
+      const tsConfigJsonPath = path.join(projectPath, "tsconfig.app.json");
+      let tsConfigJson = await fs.readFile(tsConfigJsonPath, "utf8");
+
+      /* tsconfig.app.json has comments such as /* Bundler mode */ /* Linting */
+      /* We need to remove them before parsing the json */
+      tsConfigJson = tsConfigJson.replace(/\/\*[\s\S]*?\*\//g, "");
+      tsConfigJson = tsConfigJson.replace(/\/\/.*$/gm, "");
+
+      const tsConfig = JSON.parse(tsConfigJson);
+      /* In our codegen, we have components where React is imported but not used, we need to
+        turn off the `noUnusedLocals` rule to ensure the project builds successfully.
+       */
+      tsConfig.compilerOptions = {
+        ...tsConfig.compilerOptions,
+        noUnusedLocals: false,
+      };
+
+      await fs.writeFile(tsConfigJsonPath, JSON.stringify(tsConfig, null, 2));
+    }
   },
   generateFiles: async ({
     scheme,
@@ -47,7 +89,7 @@ export const reactStrategy: CPAStrategy = {
     if (scheme === "loader") {
       // Nothing to do
     } else {
-      // Delete existing entry point App.tsx and related test
+      // Delete existing App.tsx and related test
       deleteGlob(path.join(projectPath, "src", "App*"));
 
       await runCodegenSync({
@@ -89,17 +131,6 @@ export const reactStrategy: CPAStrategy = {
       await fs.writeFile(indexPath, content);
     }
 
-    // Deactivate React.StrictMode from index.js or index.tsx
-    const indexFileName = path.join(
-      projectPath,
-      "src",
-      `index.${jsOrTs === "js" ? "js" : "tsx"}`
-    );
-    let indexFile = (await fs.readFile(indexFileName)).toString();
-    indexFile = indexFile.replace("<React.StrictMode>", "");
-    indexFile = indexFile.replace("</React.StrictMode>", "");
-    await fs.writeFile(indexFileName, indexFile);
-
     return;
   },
   build: async (args) => {

package/cpa-out/react-codegen-js/src/index.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  
-    <App />
-  
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

package/cpa-out/react-codegen-js/src/reportWebVitals.js

@@ -1,13 +0,0 @@
-const reportWebVitals = onPerfEntry => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;

package/cpa-out/react-codegen-js/src/setupTests.js

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';

package/cpa-out/react-codegen-ts/src/index.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-
-const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
-);
-root.render(
-  
-    <App />
-  
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

package/cpa-out/react-codegen-ts/src/react-app-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="react-scripts" />

package/cpa-out/react-codegen-ts/src/reportWebVitals.ts

@@ -1,15 +0,0 @@
-import { ReportHandler } from 'web-vitals';
-
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;

package/cpa-out/react-codegen-ts/src/setupTests.ts

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';

package/cpa-out/react-loader-js/package.json

@@ -1,40 +0,0 @@
-{
-  "name": "react-loader-js",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@plasmicapp/cli": "^0.1.231",
-    "@plasmicapp/react-web": "^0.2.174",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^13.0.0",
-    "@testing-library/user-event": "^13.2.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.0"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}

package/cpa-out/react-loader-js/plasmic.json

@@ -1,127 +0,0 @@
-{
-  "platform": "react",
-  "code": {
-    "lang": "js",
-    "scheme": "blackbox",
-    "reactRuntime": "classic"
-  },
-  "style": {
-    "scheme": "css-modules",
-    "defaultStyleCssFilePath": "plasmic/plasmic__default_style.css"
-  },
-  "images": {
-    "scheme": "files",
-    "publicDir": "../../public",
-    "publicUrlPrefix": "/static/"
-  },
-  "tokens": {
-    "scheme": "theo",
-    "tokensFilePath": "plasmic-tokens.theo.json"
-  },
-  "srcDir": "src/components",
-  "defaultPlasmicDir": "./plasmic",
-  "projects": [
-    {
-      "projectId": "47tFXWjN2C4NyHFGGpaYQ3",
-      "projectApiToken": "7BRFratDxPLMGZHnd2grV5QP6mlHcZ1AK3BJSIeh7xzUlHgWh25XpgXvUaKAqHXFMXQQuzpADqboibF6nqNWQ",
-      "projectName": "create-plasmic-app",
-      "version": "latest",
-      "cssFilePath": "plasmic/create_plasmic_app/plasmic_create_plasmic_app.module.css",
-      "components": [
-        {
-          "id": "6uuAAE1jiCew",
-          "name": "Homepage",
-          "type": "managed",
-          "projectId": "47tFXWjN2C4NyHFGGpaYQ3",
-          "renderModuleFilePath": "plasmic/create_plasmic_app/PlasmicHomepage.jsx",
-          "importSpec": {
-            "modulePath": "Homepage.jsx"
-          },
-          "cssFilePath": "plasmic/create_plasmic_app/PlasmicHomepage.module.css",
-          "scheme": "blackbox",
-          "componentType": "page"
-        },
-        {
-          "id": "AO44A-w7hh",
-          "name": "DynamicPage",
-          "type": "managed",
-          "projectId": "47tFXWjN2C4NyHFGGpaYQ3",
-          "renderModuleFilePath": "plasmic/create_plasmic_app/PlasmicDynamicPage.jsx",
-          "importSpec": {
-            "modulePath": "DynamicPage.jsx"
-          },
-          "cssFilePath": "plasmic/create_plasmic_app/PlasmicDynamicPage.module.css",
-          "scheme": "blackbox",
-          "componentType": "page"
-        },
-        {
-          "id": "TQcvW_pSKi3",
-          "name": "Button",
-          "type": "managed",
-          "projectId": "47tFXWjN2C4NyHFGGpaYQ3",
-          "renderModuleFilePath": "plasmic/create_plasmic_app/PlasmicButton.jsx",
-          "importSpec": {
-            "modulePath": "Button.jsx"
-          },
-          "cssFilePath": "plasmic/create_plasmic_app/PlasmicButton.module.css",
-          "scheme": "blackbox",
-          "componentType": "component",
-          "plumeType": "button"
-        },
-        {
-          "id": "Q23H1_1M_P",
-          "name": "RandomDynamicPageButton",
-          "type": "managed",
-          "projectId": "47tFXWjN2C4NyHFGGpaYQ3",
-          "renderModuleFilePath": "plasmic/create_plasmic_app/PlasmicRandomDynamicPageButton.jsx",
-          "importSpec": {
-            "modulePath": "RandomDynamicPageButton.jsx"
-          },
-          "cssFilePath": "plasmic/create_plasmic_app/PlasmicRandomDynamicPageButton.module.css",
-          "scheme": "blackbox",
-          "componentType": "component"
-        }
-      ],
-      "icons": [
-        {
-          "id": "gj-_D7n31Ho",
-          "name": "ChecksvgIcon",
-          "moduleFilePath": "plasmic/create_plasmic_app/icons/PlasmicIcon__Checksvg.jsx"
-        },
-        {
-          "id": "6PNxx3YMyDQ",
-          "name": "IconIcon",
-          "moduleFilePath": "plasmic/create_plasmic_app/icons/PlasmicIcon__Icon.jsx"
-        }
-      ],
-      "images": [],
-      "indirect": false,
-      "globalContextsFilePath": "",
-      "codeComponents": [
-        {
-          "id": "P6aGdYWZ2R",
-          "name": "PlasmicHead",
-          "componentImportPath": "@plasmicapp/react-web"
-        },
-        {
-          "id": "8G2A-uTjGa",
-          "name": "Fetcher",
-          "componentImportPath": "@plasmicapp/react-web/lib/data-sources"
-        }
-      ]
-    }
-  ],
-  "globalVariants": {
-    "variantGroups": [
-      {
-        "id": "SCBjPXGDXDZBV",
-        "name": "Screen",
-        "projectId": "47tFXWjN2C4NyHFGGpaYQ3",
-        "contextFilePath": "plasmic/create_plasmic_app/PlasmicGlobalVariant__Screen.jsx"
-      }
-    ]
-  },
-  "wrapPagesWithGlobalContexts": true,
-  "cliVersion": "0.1.231",
-  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.231/dist/plasmic.schema.json"
-}

package/cpa-out/react-loader-js/src/App.jsx

@@ -1,9 +0,0 @@
-
-import Homepage from './components/Homepage';
-
-function App() {
-  return (<Homepage />);
-}
-
-export default App;
-  

package/cpa-out/react-loader-js/src/components/Button.jsx

@@ -1,13 +0,0 @@
-import * as React from "react";
-import { PlasmicButton } from "./plasmic/create_plasmic_app/PlasmicButton";
-
-function Button_(props, ref) {
-  const { plasmicProps } = PlasmicButton.useBehavior(props, ref);
-  return <PlasmicButton {...plasmicProps} />;
-}
-
-const Button = React.forwardRef(Button_);
-
-export default Object.assign(Button, {
-  __plumeType: "button"
-});

package/cpa-out/react-loader-js/src/components/DynamicPage.jsx

@@ -1,26 +0,0 @@
-// This is a skeleton starter React component generated by Plasmic.
-// This file is owned by you, feel free to edit as you see fit.
-import * as React from "react";
-import { PlasmicDynamicPage } from "./plasmic/create_plasmic_app/PlasmicDynamicPage";
-
-function DynamicPage_(props, ref) {
-  // Use PlasmicDynamicPage to render this component as it was
-  // designed in Plasmic, by activating the appropriate variants,
-  // attaching the appropriate event handlers, etc.  You
-  // can also install whatever React hooks you need here to manage state or
-  // fetch data.
-  //
-  // Props you can pass into PlasmicDynamicPage are:
-  // 1. Variants you want to activate,
-  // 2. Contents for slots you want to fill,
-  // 3. Overrides for any named node in the component to attach behavior and data,
-  // 4. Props to set on the root node.
-  //
-  // By default, we are just piping all DynamicPageProps here, but feel free
-  // to do whatever works for you.
-  return <PlasmicDynamicPage root={{ ref }} {...props} />;
-}
-
-const DynamicPage = React.forwardRef(DynamicPage_);
-
-export default DynamicPage;

package/cpa-out/react-loader-js/src/components/Homepage.jsx

@@ -1,26 +0,0 @@
-// This is a skeleton starter React component generated by Plasmic.
-// This file is owned by you, feel free to edit as you see fit.
-import * as React from "react";
-import { PlasmicHomepage } from "./plasmic/create_plasmic_app/PlasmicHomepage";
-
-function Homepage_(props, ref) {
-  // Use PlasmicHomepage to render this component as it was
-  // designed in Plasmic, by activating the appropriate variants,
-  // attaching the appropriate event handlers, etc.  You
-  // can also install whatever React hooks you need here to manage state or
-  // fetch data.
-  //
-  // Props you can pass into PlasmicHomepage are:
-  // 1. Variants you want to activate,
-  // 2. Contents for slots you want to fill,
-  // 3. Overrides for any named node in the component to attach behavior and data,
-  // 4. Props to set on the root node.
-  //
-  // By default, we are just piping all HomepageProps here, but feel free
-  // to do whatever works for you.
-  return <PlasmicHomepage root={{ ref }} {...props} />;
-}
-
-const Homepage = React.forwardRef(Homepage_);
-
-export default Homepage;

package/cpa-out/react-loader-js/src/components/RandomDynamicPageButton.jsx

@@ -1,24 +0,0 @@
-// This is a skeleton starter React component generated by Plasmic.
-// This file is owned by you, feel free to edit as you see fit.
-import * as React from "react";
-import { PlasmicRandomDynamicPageButton } from "./plasmic/create_plasmic_app/PlasmicRandomDynamicPageButton";
-
-function RandomDynamicPageButton(props) {
-  // Use PlasmicRandomDynamicPageButton to render this component as it was
-  // designed in Plasmic, by activating the appropriate variants,
-  // attaching the appropriate event handlers, etc.  You
-  // can also install whatever React hooks you need here to manage state or
-  // fetch data.
-  //
-  // Props you can pass into PlasmicRandomDynamicPageButton are:
-  // 1. Variants you want to activate,
-  // 2. Contents for slots you want to fill,
-  // 3. Overrides for any named node in the component to attach behavior and data,
-  // 4. Props to set on the root node.
-  //
-  // By default, we are just piping all RandomDynamicPageButtonProps here, but feel free
-  // to do whatever works for you.
-  return <PlasmicRandomDynamicPageButton {...props} />;
-}
-
-export default RandomDynamicPageButton;