create-plasmic-app 0.0.96 → 0.0.98

package/cpa-out/react-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicHomepage.tsx

@@ -13,34 +13,60 @@
 
 import * as React from "react";
 
-import * as p from "@plasmicapp/react-web";
-import * as ph from "@plasmicapp/react-web/lib/host";
-
 import {
-  hasVariant,
-  classNames,
-  wrapWithClassName,
-  createPlasmicElementProxy,
-  makeFragment,
+  Flex as Flex__,
   MultiChoiceArg,
+  PlasmicDataSourceContextProvider as PlasmicDataSourceContextProvider__,
+  PlasmicIcon as PlasmicIcon__,
+  PlasmicImg as PlasmicImg__,
+  PlasmicLink as PlasmicLink__,
+  PlasmicPageGuard as PlasmicPageGuard__,
   SingleBooleanChoiceArg,
   SingleChoiceArg,
-  pick,
-  omit,
-  useTrigger,
+  Stack as Stack__,
   StrictProps,
+  Trans as Trans__,
+  classNames,
+  createPlasmicElementProxy,
   deriveRenderOpts,
-  ensureGlobalVariants
+  ensureGlobalVariants,
+  generateOnMutateForSpec,
+  generateStateOnChangeProp,
+  generateStateOnChangePropForCodeComponents,
+  generateStateValueProp,
+  get as $stateGet,
+  hasVariant,
+  initializeCodeComponentStates,
+  initializePlasmicStates,
+  makeFragment,
+  omit,
+  pick,
+  renderPlasmicSlot,
+  set as $stateSet,
+  useCurrentUser,
+  useDollarState,
+  usePlasmicTranslator,
+  useTrigger,
+  wrapWithClassName
 } from "@plasmicapp/react-web";
+import {
+  DataCtxReader as DataCtxReader__,
+  useDataEnv,
+  useGlobalActions
+} from "@plasmicapp/react-web/lib/host";
+
 import RandomDynamicPageButton from "../../RandomDynamicPageButton"; // plasmic-import: Q23H1_1M_P/component
+import { Fetcher } from "@plasmicapp/react-web/lib/data-sources";
 
 import { useScreenVariants as useScreenVariantsscBjPxgdxdzbv } from "./PlasmicGlobalVariant__Screen"; // plasmic-import: SCBjPXGDXDZBV/globalVariant
 
 import "@plasmicapp/react-web/lib/plasmic.css";
 
-import projectcss from "./plasmic_create_plasmic_app.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss
+import projectcss from "./plasmic.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss
 import sty from "./PlasmicHomepage.module.css"; // plasmic-import: 6uuAAE1jiCew/css
 
+createPlasmicElementProxy;
+
 export type PlasmicHomepage__VariantMembers = {};
 export type PlasmicHomepage__VariantsArgs = {};
 type VariantPropType = keyof PlasmicHomepage__VariantsArgs;
@@ -51,24 +77,18 @@ type ArgPropType = keyof PlasmicHomepage__ArgsType;
 export const PlasmicHomepage__ArgProps = new Array<ArgPropType>();
 
 export type PlasmicHomepage__OverridesType = {
-  root?: p.Flex<"div">;
-  section?: p.Flex<"section">;
-  h1?: p.Flex<"h1">;
-  text?: p.Flex<"div">;
-  randomDynamicPageButton?: p.Flex<typeof RandomDynamicPageButton>;
+  root?: Flex__<"div">;
+  section?: Flex__<"section">;
+  h1?: Flex__<"h1">;
+  text?: Flex__<"div">;
+  randomDynamicPageButton?: Flex__<typeof RandomDynamicPageButton>;
 };
 
 export interface DefaultHomepageProps {
   className?: string;
 }
 
-const __wrapUserFunction =
-  globalThis.__PlasmicWrapUserFunction ?? ((loc, fn) => fn());
-const __wrapUserPromise =
-  globalThis.__PlasmicWrapUserPromise ??
-  (async (loc, promise) => {
-    return await promise;
-  });
+const $$ = {};
 
 function PlasmicHomepage__RenderFunc(props: {
   variants: PlasmicHomepage__VariantsArgs;
@@ -78,27 +98,32 @@ function PlasmicHomepage__RenderFunc(props: {
 }) {
   const { variants, overrides, forNode } = props;
 
-  const $ctx = ph.useDataEnv?.() || {};
-  const args = React.useMemo(() => Object.assign({}, props.args), [props.args]);
+  const args = React.useMemo(
+    () =>
+      Object.assign(
+        {},
+        Object.fromEntries(
+          Object.entries(props.args).filter(([_, v]) => v !== undefined)
+        )
+      ),
+    [props.args]
+  );
 
   const $props = {
     ...args,
     ...variants
   };
+
+  const $ctx = useDataEnv?.() || {};
   const refsRef = React.useRef({});
   const $refs = refsRef.current;
 
-  const currentUser = p.useCurrentUser?.() || {};
-  const [$queries, setDollarQueries] = React.useState({});
-
   const globalVariants = ensureGlobalVariants({
     screen: useScreenVariantsscBjPxgdxdzbv()
   });
 
   return (
     <React.Fragment>
-      {}
-
       <div className={projectcss.plasmic_page_wrapper}>
         <div
           data-plasmic-name={"root"}
@@ -110,10 +135,11 @@ function PlasmicHomepage__RenderFunc(props: {
             projectcss.root_reset,
             projectcss.plasmic_default_styles,
             projectcss.plasmic_mixins,
+            projectcss.plasmic_tokens,
             sty.root
           )}
         >
-          <p.Stack
+          <Stack__
             as={"section"}
             data-plasmic-name={"section"}
             data-plasmic-override={overrides.section}
@@ -132,7 +158,6 @@ function PlasmicHomepage__RenderFunc(props: {
             >
               {"create-plasmic-app"}
             </h1>
-
             <div
               data-plasmic-name={"text"}
               data-plasmic-override={overrides.text}
@@ -160,7 +185,7 @@ function PlasmicHomepage__RenderFunc(props: {
                 <React.Fragment>
                   <React.Fragment>
                     {
-                      "If you haven't already done so, go back and learn the basics by going through the Plasmic Levels tutorial.\n\nIt's always easier to start from examples! Add a new page using a template—do this from the list of pages in the top left (the gray + button).\n\nOr press the big blue + button to start dragging items into this page.\n\nIntegrate this project into your codebase—press the "
+                      "If you haven't already done so, go back and learn the basics by going through the Plasmic Levels tutorial.\n\nIt's always easier to start from examples! Add a new page using a template\u2014do this from the list of pages in the top left (the gray + button).\n\nOr press the big blue + button to start dragging items into this page.\n\nIntegrate this project into your codebase\u2014press the "
                     }
                   </React.Fragment>
                   <span
@@ -177,7 +202,6 @@ function PlasmicHomepage__RenderFunc(props: {
                 </React.Fragment>
               )}
             </div>
-
             <RandomDynamicPageButton
               data-plasmic-name={"randomDynamicPageButton"}
               data-plasmic-override={overrides.randomDynamicPageButton}
@@ -186,7 +210,7 @@ function PlasmicHomepage__RenderFunc(props: {
                 sty.randomDynamicPageButton
               )}
             />
-          </p.Stack>
+          </Stack__>
         </div>
       </div>
     </React.Fragment>
@@ -245,7 +269,7 @@ function makeNodeComponent<NodeName extends NodeNameType>(nodeName: NodeName) {
       () =>
         deriveRenderOpts(props, {
           name: nodeName,
-          descendantNames: [...PlasmicDescendants[nodeName]],
+          descendantNames: PlasmicDescendants[nodeName],
           internalArgPropNames: PlasmicHomepage__ArgProps,
           internalVariantPropNames: PlasmicHomepage__VariantProps
         }),

package/cpa-out/react-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicRandomDynamicPageButton.tsx

@@ -13,35 +13,60 @@
 
 import * as React from "react";
 
-import * as p from "@plasmicapp/react-web";
-import * as ph from "@plasmicapp/react-web/lib/host";
-
 import {
-  hasVariant,
-  classNames,
-  wrapWithClassName,
-  createPlasmicElementProxy,
-  makeFragment,
+  Flex as Flex__,
   MultiChoiceArg,
+  PlasmicDataSourceContextProvider as PlasmicDataSourceContextProvider__,
+  PlasmicIcon as PlasmicIcon__,
+  PlasmicImg as PlasmicImg__,
+  PlasmicLink as PlasmicLink__,
+  PlasmicPageGuard as PlasmicPageGuard__,
   SingleBooleanChoiceArg,
   SingleChoiceArg,
-  pick,
-  omit,
-  useTrigger,
+  Stack as Stack__,
   StrictProps,
+  Trans as Trans__,
+  classNames,
+  createPlasmicElementProxy,
   deriveRenderOpts,
-  ensureGlobalVariants
+  ensureGlobalVariants,
+  generateOnMutateForSpec,
+  generateStateOnChangeProp,
+  generateStateOnChangePropForCodeComponents,
+  generateStateValueProp,
+  get as $stateGet,
+  hasVariant,
+  initializeCodeComponentStates,
+  initializePlasmicStates,
+  makeFragment,
+  omit,
+  pick,
+  renderPlasmicSlot,
+  set as $stateSet,
+  useCurrentUser,
+  useDollarState,
+  usePlasmicTranslator,
+  useTrigger,
+  wrapWithClassName
 } from "@plasmicapp/react-web";
+import {
+  DataCtxReader as DataCtxReader__,
+  useDataEnv,
+  useGlobalActions
+} from "@plasmicapp/react-web/lib/host";
+
 import Button from "../../Button"; // plasmic-import: TQcvW_pSKi3/component
 
 import "@plasmicapp/react-web/lib/plasmic.css";
 
-import projectcss from "./plasmic_create_plasmic_app.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss
+import projectcss from "./plasmic.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss
 import sty from "./PlasmicRandomDynamicPageButton.module.css"; // plasmic-import: Q23H1_1M_P/css
 
-import ChecksvgIcon from "./icons/PlasmicIcon__Checksvg"; // plasmic-import: gj-_D7n31Ho/icon
+import CheckSvgIcon from "./icons/PlasmicIcon__CheckSvg"; // plasmic-import: gj-_D7n31Ho/icon
 import IconIcon from "./icons/PlasmicIcon__Icon"; // plasmic-import: 6PNxx3YMyDQ/icon
 
+createPlasmicElementProxy;
+
 export type PlasmicRandomDynamicPageButton__VariantMembers = {};
 export type PlasmicRandomDynamicPageButton__VariantsArgs = {};
 type VariantPropType = keyof PlasmicRandomDynamicPageButton__VariantsArgs;
@@ -54,20 +79,14 @@ export const PlasmicRandomDynamicPageButton__ArgProps =
   new Array<ArgPropType>();
 
 export type PlasmicRandomDynamicPageButton__OverridesType = {
-  root?: p.Flex<typeof Button>;
+  root?: Flex__<typeof Button>;
 };
 
 export interface DefaultRandomDynamicPageButtonProps {
   className?: string;
 }
 
-const __wrapUserFunction =
-  globalThis.__PlasmicWrapUserFunction ?? ((loc, fn) => fn());
-const __wrapUserPromise =
-  globalThis.__PlasmicWrapUserPromise ??
-  (async (loc, promise) => {
-    return await promise;
-  });
+const $$ = {};
 
 function PlasmicRandomDynamicPageButton__RenderFunc(props: {
   variants: PlasmicRandomDynamicPageButton__VariantsArgs;
@@ -77,19 +96,26 @@ function PlasmicRandomDynamicPageButton__RenderFunc(props: {
 }) {
   const { variants, overrides, forNode } = props;
 
-  const $ctx = ph.useDataEnv?.() || {};
-  const args = React.useMemo(() => Object.assign({}, props.args), [props.args]);
+  const args = React.useMemo(
+    () =>
+      Object.assign(
+        {},
+        Object.fromEntries(
+          Object.entries(props.args).filter(([_, v]) => v !== undefined)
+        )
+      ),
+    [props.args]
+  );
 
   const $props = {
     ...args,
     ...variants
   };
+
+  const $ctx = useDataEnv?.() || {};
   const refsRef = React.useRef({});
   const $refs = refsRef.current;
 
-  const currentUser = p.useCurrentUser?.() || {};
-  const [$queries, setDollarQueries] = React.useState({});
-
   return (
     <Button
       data-plasmic-name={"root"}
@@ -99,60 +125,47 @@ function PlasmicRandomDynamicPageButton__RenderFunc(props: {
       className={classNames("__wab_instance", sty.root)}
       onClick={async event => {
         const $steps = {};
+
         $steps["goToDynamicPage"] = true
           ? (() => {
               const actionArgs = {
-                destination: __wrapUserFunction(
-                  {
-                    type: "InteractionArgLoc",
-                    actionName: "navigation",
-                    interactionUuid: "9Y3jL0zxjA",
-                    componentUuid: "Q23H1_1M_P",
-                    argName: "destination"
-                  },
-                  () =>
-                    `/dynamic/${(() => {
-                      try {
-                        return Math.random().toString(36).slice(2);
-                      } catch (e) {
-                        if (e instanceof TypeError) {
-                          return "value";
-                        }
-                        throw e;
-                      }
-                    })()}`
-                )
+                destination: `/dynamic/${(() => {
+                  try {
+                    return Math.random().toString(36).slice(2);
+                  } catch (e) {
+                    if (
+                      e instanceof TypeError ||
+                      e?.plasmicType === "PlasmicUndefinedDataError"
+                    ) {
+                      return "value";
+                    }
+                    throw e;
+                  }
+                })()}`
               };
-              return __wrapUserFunction(
-                {
-                  type: "InteractionLoc",
-                  actionName: "navigation",
-                  interactionUuid: "9Y3jL0zxjA",
-                  componentUuid: "Q23H1_1M_P"
-                },
-                () =>
-                  (({ destination }) => {
-                    location.assign(destination);
-                  })?.apply(null, [actionArgs]),
-                actionArgs
-              );
+              return (({ destination }) => {
+                if (
+                  typeof destination === "string" &&
+                  destination.startsWith("#")
+                ) {
+                  document
+                    .getElementById(destination.substr(1))
+                    .scrollIntoView({ behavior: "smooth" });
+                } else {
+                  location.assign(destination);
+                }
+              })?.apply(null, [actionArgs]);
             })()
           : undefined;
         if (
+          $steps["goToDynamicPage"] != null &&
           typeof $steps["goToDynamicPage"] === "object" &&
           typeof $steps["goToDynamicPage"].then === "function"
         ) {
-          $steps["goToDynamicPage"] = await __wrapUserPromise(
-            {
-              type: "InteractionLoc",
-              actionName: "navigation",
-              interactionUuid: "9Y3jL0zxjA",
-              componentUuid: "Q23H1_1M_P"
-            },
-            $steps["goToDynamicPage"]
-          );
+          $steps["goToDynamicPage"] = await $steps["goToDynamicPage"];
         }
       }}
+      submitsForm={true}
     >
       {"Random Dynamic Page"}
     </Button>
@@ -203,7 +216,7 @@ function makeNodeComponent<NodeName extends NodeNameType>(nodeName: NodeName) {
       () =>
         deriveRenderOpts(props, {
           name: nodeName,
-          descendantNames: [...PlasmicDescendants[nodeName]],
+          descendantNames: PlasmicDescendants[nodeName],
           internalArgPropNames: PlasmicRandomDynamicPageButton__ArgProps,
           internalVariantPropNames: PlasmicRandomDynamicPageButton__VariantProps
         }),

package/cpa-out/react-codegen-ts/src/components/plasmic/create_plasmic_app/icons/PlasmicIcon__Checksvg.tsx

@@ -5,11 +5,11 @@
 import React from "react";
 import { classNames } from "@plasmicapp/react-web";
 
-export type ChecksvgIconProps = React.ComponentProps<"svg"> & {
+export type CheckSvgIconProps = React.ComponentProps<"svg"> & {
   title?: string;
 };
 
-export function ChecksvgIcon(props: ChecksvgIconProps) {
+export function CheckSvgIcon(props: CheckSvgIconProps) {
   const { className, style, title, ...restProps } = props;
   return (
     <svg
@@ -40,5 +40,5 @@ export function ChecksvgIcon(props: ChecksvgIconProps) {
   );
 }
 
-export default ChecksvgIcon;
+export default CheckSvgIcon;
 /* prettier-ignore-end */

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

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

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

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/cpa-out/react-codegen-ts/tsconfig.json

@@ -1,26 +1,7 @@
 {
-  "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
-  },
-  "include": [
-    "src"
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
   ]
 }

package/cpa-out/react-codegen-ts/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})

package/dist/index.js

@@ -52,7 +52,7 @@ if (process.env.CPA_DEBUG_CHDIR) {
 const createPlasmicAppVersion = (0, npm_utils_1.updateNotify)();
 // Specify command-line args
 const argv = yargs_1.default
-    .command("$0 [projectName]", "Create a Plasmic app with Next.js, Gatsby, or Create React App", (yargs) => {
+    .command("$0 [projectName]", "Create a Plasmic app with Next.js, Gatsby, or React (Vite)", (yargs) => {
     yargs
         .usage("Usage: $0 [projectName] [options]")
         .positional("projectName", {
@@ -187,8 +187,8 @@ function run() {
                     value: "gatsby",
                 },
                 {
-                    name: "Create React App (advanced)",
-                    short: "Create React App",
+                    name: "React (Vite)",
+                    short: "React (Vite)",
                     value: "react",
                 },
             ],

package/dist/lib.js

@@ -147,7 +147,7 @@ function create(args) {
             : platform === "gatsby"
                 ? `${npmRunCmd} develop`
                 : platform === "react"
-                    ? `${npmRunCmd} start`
+                    ? `${npmRunCmd} dev`
                     : "";
         const relativeDir = path.relative(process.cwd(), resolvedProjectPath);
         // Overwrite README

package/dist/react/react.js

@@ -24,9 +24,26 @@ exports.reactStrategy = {
     create: (args) => __awaiter(void 0, void 0, void 0, function* () {
         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_1.default.isAbsolute(projectPath)
+            ? projectPath
+            : path_1.default.resolve(process.cwd(), projectPath);
+        yield fs_1.promises.mkdir(fullProjectPath, { recursive: true });
+        const projectName = path_1.default.basename(fullProjectPath);
+        const parentDir = path_1.default.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}` : "";
         yield (0, cmd_utils_1.spawnOrFail)(`${createCommand}${templateArg}`);
@@ -42,14 +59,28 @@ exports.reactStrategy = {
         }
     }),
     overwriteConfig: (args) => __awaiter(void 0, void 0, void 0, function* () {
-        // No config to overwrite
+        const { projectPath, jsOrTs } = args;
+        if (jsOrTs === "ts") {
+            const tsConfigJsonPath = path_1.default.join(projectPath, "tsconfig.app.json");
+            let tsConfigJson = yield fs_1.promises.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 = Object.assign(Object.assign({}, tsConfig.compilerOptions), { noUnusedLocals: false });
+            yield fs_1.promises.writeFile(tsConfigJsonPath, JSON.stringify(tsConfig, null, 2));
+        }
     }),
     generateFiles: ({ scheme, projectApiToken, projectId, projectPath, jsOrTs, }) => __awaiter(void 0, void 0, void 0, function* () {
         if (scheme === "loader") {
             // Nothing to do
         }
         else {
-            // Delete existing entry point App.tsx and related test
+            // Delete existing App.tsx and related test
             (0, file_utils_1.deleteGlob)(path_1.default.join(projectPath, "src", "App*"));
             yield (0, codegen_1.runCodegenSync)({
                 projectId,
@@ -73,12 +104,6 @@ exports.reactStrategy = {
                 : (0, file_utils_1.generateWelcomePage)(config, "react");
             yield fs_1.promises.writeFile(indexPath, content);
         }
-        // Deactivate React.StrictMode from index.js or index.tsx
-        const indexFileName = path_1.default.join(projectPath, "src", `index.${jsOrTs === "js" ? "js" : "tsx"}`);
-        let indexFile = (yield fs_1.promises.readFile(indexFileName)).toString();
-        indexFile = indexFile.replace("<React.StrictMode>", "");
-        indexFile = indexFile.replace("</React.StrictMode>", "");
-        yield fs_1.promises.writeFile(indexFileName, indexFile);
         return;
     }),
     build: (args) => __awaiter(void 0, void 0, void 0, function* () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-plasmic-app",
-  "version": "0.0.96",
+  "version": "0.0.98",
   "description": "Create Plasmic-powered React apps",
   "main": "./dist/lib.js",
   "types": "./dist/lib.d.ts",
@@ -54,5 +54,5 @@
     "validate-npm-package-name": "^3.0.0",
     "yargs": "^16.2.0"
   },
-  "gitHead": "72c4754ab2eb51cc331f1492b78adc383e942cae"
+  "gitHead": "b43bfc6e9e68b75cac25f9fee2fed8795b5d8518"
 }

package/src/index.ts

@@ -21,7 +21,7 @@ const createPlasmicAppVersion = updateNotify();
 const argv = yargs
   .command(
     "$0 [projectName]",
-    "Create a Plasmic app with Next.js, Gatsby, or Create React App",
+    "Create a Plasmic app with Next.js, Gatsby, or React (Vite)",
     (yargs) => {
       yargs
         .usage("Usage: $0 [projectName] [options]")
@@ -176,8 +176,8 @@ async function run(): Promise<void> {
         value: "gatsby",
       },
       {
-        name: "Create React App (advanced)",
-        short: "Create React App",
+        name: "React (Vite)",
+        short: "React (Vite)",
         value: "react",
       },
     ],

package/src/lib.ts

@@ -149,7 +149,7 @@ export async function create(args: CreatePlasmicAppArgs): Promise<void> {
       : platform === "gatsby"
       ? `${npmRunCmd} develop`
       : platform === "react"
-      ? `${npmRunCmd} start`
+      ? `${npmRunCmd} dev`
       : "";
   const relativeDir = path.relative(process.cwd(), resolvedProjectPath);