create-plasmic-app 0.0.74 → 0.0.76

package/dist/index.js

@@ -169,7 +169,8 @@ function run() {
             type: "list",
             choices: () => [
                 {
-                    name: "Next.js",
+                    name: "Next.js (recommended)",
+                    short: "Next.js",
                     value: "nextjs",
                 },
                 {
@@ -177,7 +178,8 @@ function run() {
                     value: "gatsby",
                 },
                 {
-                    name: "Create React App",
+                    name: "Create React App (advanced)",
+                    short: "Create React App",
                     value: "react",
                 },
             ],
@@ -192,12 +194,12 @@ function run() {
                 type: "list",
                 choices: () => [
                     {
-                        name: "PlasmicLoader: recommended default for most websites",
+                        name: "PlasmicLoader (recommended default for most websites)",
                         short: "PlasmicLoader",
                         value: "loader",
                     },
                     {
-                        name: "Codegen: for building complex stateful apps",
+                        name: "Codegen (advanced feature for building complex stateful apps)",
                         short: "Codegen",
                         value: "codegen",
                     },

package/dist/nextjs/nextjs.d.ts

@@ -1,2 +1,2 @@
-import { CPAStrategy } from '../utils/strategy';
+import { CPAStrategy } from "../utils/strategy";
 export declare const nextjsStrategy: CPAStrategy;

package/dist/nextjs/nextjs.js

@@ -36,9 +36,9 @@ exports.nextjsStrategy = {
         const { projectPath, template, jsOrTs, platformOptions } = args;
         const typescriptArg = `--${jsOrTs}`;
         const experimentalAppArg = ((_a = platformOptions.nextjs) === null || _a === void 0 ? void 0 : _a.appDir)
-            ? '--experimental-app'
-            : '--no-experimental-app';
-        const templateArg = template ? ` --template ${template}` : '';
+            ? "--app"
+            : "--no-app";
+        const templateArg = template ? ` --template ${template}` : "";
         const createCommand = `npx create-next-app@latest ${projectPath} ${typescriptArg} ${experimentalAppArg} ${templateArg}` +
             ` --eslint --no-src-dir  --import-alias "@/*" --no-tailwind`;
         // Default Next.js starter already supports Typescript
@@ -46,13 +46,8 @@ exports.nextjsStrategy = {
         yield (0, cmd_utils_1.spawnOrFail)(createCommand);
     }),
     installDeps: ({ scheme, projectPath }) => __awaiter(void 0, void 0, void 0, function* () {
-        // Locking to version 13.3.0 until this is fixed and released:
-        // https://github.com/vercel/next.js/issues/48593
-        yield (0, npm_utils_1.installUpgrade)('next@13.3.0', {
-            workingDir: projectPath,
-        });
-        if (scheme === 'loader') {
-            return yield (0, npm_utils_1.installUpgrade)('@plasmicapp/loader-nextjs', {
+        if (scheme === "loader") {
+            return yield (0, npm_utils_1.installUpgrade)("@plasmicapp/loader-nextjs", {
                 workingDir: projectPath,
             });
         }
@@ -63,14 +58,14 @@ exports.nextjsStrategy = {
     overwriteConfig: (args) => __awaiter(void 0, void 0, void 0, function* () {
         var _b;
         const { projectPath, scheme, platformOptions } = args;
-        const nextjsConfigFile = path_1.default.join(projectPath, 'next.config.js');
+        const nextjsConfigFile = path_1.default.join(projectPath, "next.config.js");
         const appDirOption = ((_b = platformOptions.nextjs) === null || _b === void 0 ? void 0 : _b.appDir)
             ? `
   experimental: {
     appDir: true,
   }`
-            : '';
-        if (scheme === 'codegen') {
+            : "";
+        if (scheme === "codegen") {
             yield fs_1.promises.writeFile(nextjsConfigFile, `
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -113,37 +108,37 @@ function generateFilesAppDir(args) {
     return __awaiter(this, void 0, void 0, function* () {
         const { projectPath, jsOrTs, projectId, projectApiToken } = args;
         // Delete existing pages
-        (0, file_utils_1.deleteGlob)(path_1.default.join(projectPath, 'app', 'page.*'));
+        (0, file_utils_1.deleteGlob)(path_1.default.join(projectPath, "app", "page.*"));
         // ./plasmic-init.ts
         yield fs_1.promises.writeFile(path_1.default.join(projectPath, `plasmic-init.${jsOrTs}`), (0, plasmic_init_1.makePlasmicInit_app_loader)(projectId, (0, lang_utils_1.ensure)(projectApiToken)));
         // ./plasmic-init-client.ts
         yield fs_1.promises.writeFile(path_1.default.join(projectPath, `plasmic-init-client.${jsOrTs}x`), (0, plasmic_init_client_1.makePlasmicInitClient_app_loader)(jsOrTs));
         // ./app/plasmic-host/page.tsx
-        yield fs_1.promises.mkdir(path_1.default.join(projectPath, 'app', 'plasmic-host'));
-        yield fs_1.promises.writeFile(path_1.default.join(projectPath, 'app', 'plasmic-host', `page.${jsOrTs}x`), (0, plasmic_host_1.makePlasmicHostPage_app_loader)());
+        yield fs_1.promises.mkdir(path_1.default.join(projectPath, "app", "plasmic-host"));
+        yield fs_1.promises.writeFile(path_1.default.join(projectPath, "app", "plasmic-host", `page.${jsOrTs}x`), (0, plasmic_host_1.makePlasmicHostPage_app_loader)());
         // ./app/[[...catchall]]/page.tsx
-        yield fs_1.promises.mkdir(path_1.default.join(projectPath, 'app', '[[...catchall]]'));
-        yield fs_1.promises.writeFile(path_1.default.join(projectPath, 'app', '[[...catchall]]', `page.${jsOrTs}x`), (0, catchall_page_1.makeCatchallPage_app_loader)(jsOrTs));
+        yield fs_1.promises.mkdir(path_1.default.join(projectPath, "app", "[[...catchall]]"));
+        yield fs_1.promises.writeFile(path_1.default.join(projectPath, "app", "[[...catchall]]", `page.${jsOrTs}x`), (0, catchall_page_1.makeCatchallPage_app_loader)(jsOrTs));
     });
 }
 function generateFilesPagesDir(args) {
     return __awaiter(this, void 0, void 0, function* () {
         const { projectPath, scheme, jsOrTs, projectId, projectApiToken } = args;
         // Delete existing pages
-        (0, file_utils_1.deleteGlob)(path_1.default.join(projectPath, 'pages', '*.*'));
-        if (scheme === 'loader') {
+        (0, file_utils_1.deleteGlob)(path_1.default.join(projectPath, "pages", "*.*"));
+        if (scheme === "loader") {
             // ./plasmic-init.ts
             yield fs_1.promises.writeFile(path_1.default.join(projectPath, `plasmic-init.${jsOrTs}`), (0, plasmic_init_2.makePlasmicInit_pages_loader)(projectId, (0, lang_utils_1.ensure)(projectApiToken)));
             // ./pages/plasmic-host.tsx
-            yield fs_1.promises.writeFile(path_1.default.join(projectPath, 'pages', `plasmic-host.${jsOrTs}x`), (0, plasmic_host_3.makePlasmicHostPage_pages_loader)());
+            yield fs_1.promises.writeFile(path_1.default.join(projectPath, "pages", `plasmic-host.${jsOrTs}x`), (0, plasmic_host_3.makePlasmicHostPage_pages_loader)());
             // ./pages/[[...catchall]].tsx
-            yield fs_1.promises.writeFile(path_1.default.join(projectPath, 'pages', `[[...catchall]].${jsOrTs}x`), (0, catchall_page_2.makeCatchallPage_pages_loader)(jsOrTs));
+            yield fs_1.promises.writeFile(path_1.default.join(projectPath, "pages", `[[...catchall]].${jsOrTs}x`), (0, catchall_page_2.makeCatchallPage_pages_loader)(jsOrTs));
         }
         else {
             // ./pages/_app.tsx
-            yield fs_1.promises.writeFile(path_1.default.join(projectPath, 'pages', `_app.${jsOrTs}x`), (0, app_1.makeCustomApp_pages_codegen)(jsOrTs));
+            yield fs_1.promises.writeFile(path_1.default.join(projectPath, "pages", `_app.${jsOrTs}x`), (0, app_1.makeCustomApp_pages_codegen)(jsOrTs));
             // ./pages/plasmic-host.tsx
-            yield fs_1.promises.writeFile(path_1.default.join(projectPath, 'pages', `plasmic-host.${jsOrTs}x`), (0, plasmic_host_2.makePlasmicHostPage_pages_codegen)());
+            yield fs_1.promises.writeFile(path_1.default.join(projectPath, "pages", `plasmic-host.${jsOrTs}x`), (0, plasmic_host_2.makePlasmicHostPage_pages_codegen)());
             // This should generate
             // ./plasmic.json
             // ./pages/index.tsx
@@ -154,10 +149,10 @@ function generateFilesPagesDir(args) {
                 projectPath,
             });
             // Make an index page if the project didn't have one.
-            const config = yield (0, file_utils_1.getPlasmicConfig)(projectPath, 'nextjs', scheme);
+            const config = yield (0, file_utils_1.getPlasmicConfig)(projectPath, "nextjs", scheme);
             const plasmicFiles = lodash_1.default.map(lodash_1.default.flatMap(config.projects, (p) => p.components), (c) => c.importSpec.modulePath);
-            if (!plasmicFiles.find((f) => f.includes('/index.'))) {
-                yield fs_1.promises.writeFile(path_1.default.join(projectPath, 'pages', `index.${jsOrTs}x`), (0, file_utils_1.generateWelcomePage)(config, 'nextjs'));
+            if (!plasmicFiles.find((f) => f.includes("/index."))) {
+                yield fs_1.promises.writeFile(path_1.default.join(projectPath, "pages", `index.${jsOrTs}x`), (0, file_utils_1.generateWelcomePage)(config, "nextjs"));
             }
         }
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-plasmic-app",
-  "version": "0.0.74",
+  "version": "0.0.76",
   "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": "aed79bb7319dc8f42c185c212f9ba23f26591fd4"
+  "gitHead": "e9389d3457fefb5a2e1f3079956325912c556799"
 }

package/src/index.ts

@@ -65,8 +65,7 @@ const argv = yargs
 
 // Initialize Sentry
 Sentry.init({
-  dsn:
-    "https://0d602108de7f44aa9470a41cc069395f@o328029.ingest.sentry.io/5679926",
+  dsn: "https://0d602108de7f44aa9470a41cc069395f@o328029.ingest.sentry.io/5679926",
 });
 Sentry.configureScope((scope) => {
   //scope.setUser({ email: auth.user });
@@ -152,7 +151,8 @@ async function run(): Promise<void> {
     type: "list",
     choices: () => [
       {
-        name: "Next.js",
+        name: "Next.js (recommended)",
+        short: "Next.js",
         value: "nextjs",
       },
       {
@@ -160,7 +160,8 @@ async function run(): Promise<void> {
         value: "gatsby",
       },
       {
-        name: "Create React App",
+        name: "Create React App (advanced)",
+        short: "Create React App",
         value: "react",
       },
     ],
@@ -177,12 +178,12 @@ async function run(): Promise<void> {
           type: "list",
           choices: () => [
             {
-              name: "PlasmicLoader: recommended default for most websites",
+              name: "PlasmicLoader (recommended default for most websites)",
               short: "PlasmicLoader",
               value: "loader",
             },
             {
-              name: "Codegen: for building complex stateful apps",
+              name: "Codegen (advanced feature for building complex stateful apps)",
               short: "Codegen",
               value: "codegen",
             },

package/src/nextjs/nextjs.ts

@@ -1,34 +1,34 @@
-import { promises as fs } from 'fs';
-import L from 'lodash';
-import path from 'path';
-import { spawnOrFail } from '../utils/cmd-utils';
-import { installCodegenDeps, runCodegenSync } from '../utils/codegen';
+import { promises as fs } from "fs";
+import L from "lodash";
+import path from "path";
+import { spawnOrFail } from "../utils/cmd-utils";
+import { installCodegenDeps, runCodegenSync } from "../utils/codegen";
 import {
   deleteGlob,
   generateWelcomePage,
   getPlasmicConfig,
-} from '../utils/file-utils';
-import { ensure } from '../utils/lang-utils';
-import { installUpgrade } from '../utils/npm-utils';
-import { CPAStrategy, GenerateFilesArgs } from '../utils/strategy';
-import { makeCatchallPage_app_loader } from './templates/app-loader/catchall-page';
-import { makePlasmicHostPage_app_loader } from './templates/app-loader/plasmic-host';
-import { makePlasmicInit_app_loader } from './templates/app-loader/plasmic-init';
-import { makePlasmicInitClient_app_loader } from './templates/app-loader/plasmic-init-client';
-import { makeCustomApp_pages_codegen } from './templates/pages-codegen/app';
-import { makePlasmicHostPage_pages_codegen } from './templates/pages-codegen/plasmic-host';
-import { makeCatchallPage_pages_loader } from './templates/pages-loader/catchall-page';
-import { makePlasmicHostPage_pages_loader } from './templates/pages-loader/plasmic-host';
-import { makePlasmicInit_pages_loader } from './templates/pages-loader/plasmic-init';
+} from "../utils/file-utils";
+import { ensure } from "../utils/lang-utils";
+import { installUpgrade } from "../utils/npm-utils";
+import { CPAStrategy, GenerateFilesArgs } from "../utils/strategy";
+import { makeCatchallPage_app_loader } from "./templates/app-loader/catchall-page";
+import { makePlasmicHostPage_app_loader } from "./templates/app-loader/plasmic-host";
+import { makePlasmicInit_app_loader } from "./templates/app-loader/plasmic-init";
+import { makePlasmicInitClient_app_loader } from "./templates/app-loader/plasmic-init-client";
+import { makeCustomApp_pages_codegen } from "./templates/pages-codegen/app";
+import { makePlasmicHostPage_pages_codegen } from "./templates/pages-codegen/plasmic-host";
+import { makeCatchallPage_pages_loader } from "./templates/pages-loader/catchall-page";
+import { makePlasmicHostPage_pages_loader } from "./templates/pages-loader/plasmic-host";
+import { makePlasmicInit_pages_loader } from "./templates/pages-loader/plasmic-init";
 
 export const nextjsStrategy: CPAStrategy = {
   create: async (args) => {
     const { projectPath, template, jsOrTs, platformOptions } = args;
     const typescriptArg = `--${jsOrTs}`;
     const experimentalAppArg = platformOptions.nextjs?.appDir
-      ? '--experimental-app'
-      : '--no-experimental-app';
-    const templateArg = template ? ` --template ${template}` : '';
+      ? "--app"
+      : "--no-app";
+    const templateArg = template ? ` --template ${template}` : "";
     const createCommand =
       `npx create-next-app@latest ${projectPath} ${typescriptArg} ${experimentalAppArg} ${templateArg}` +
       ` --eslint --no-src-dir  --import-alias "@/*" --no-tailwind`;
@@ -38,13 +38,8 @@ export const nextjsStrategy: CPAStrategy = {
     await spawnOrFail(createCommand);
   },
   installDeps: async ({ scheme, projectPath }) => {
-    // Locking to version 13.3.0 until this is fixed and released:
-    // https://github.com/vercel/next.js/issues/48593
-    await installUpgrade('next@13.3.0', {
-      workingDir: projectPath,
-    });
-    if (scheme === 'loader') {
-      return await installUpgrade('@plasmicapp/loader-nextjs', {
+    if (scheme === "loader") {
+      return await installUpgrade("@plasmicapp/loader-nextjs", {
         workingDir: projectPath,
       });
     } else {
@@ -53,14 +48,14 @@ export const nextjsStrategy: CPAStrategy = {
   },
   overwriteConfig: async (args) => {
     const { projectPath, scheme, platformOptions } = args;
-    const nextjsConfigFile = path.join(projectPath, 'next.config.js');
+    const nextjsConfigFile = path.join(projectPath, "next.config.js");
     const appDirOption = platformOptions.nextjs?.appDir
       ? `
   experimental: {
     appDir: true,
   }`
-      : '';
-    if (scheme === 'codegen') {
+      : "";
+    if (scheme === "codegen") {
       await fs.writeFile(
         nextjsConfigFile,
         `
@@ -107,7 +102,7 @@ async function generateFilesAppDir(args: GenerateFilesArgs) {
   const { projectPath, jsOrTs, projectId, projectApiToken } = args;
 
   // Delete existing pages
-  deleteGlob(path.join(projectPath, 'app', 'page.*'));
+  deleteGlob(path.join(projectPath, "app", "page.*"));
 
   // ./plasmic-init.ts
   await fs.writeFile(
@@ -122,16 +117,16 @@ async function generateFilesAppDir(args: GenerateFilesArgs) {
   );
 
   // ./app/plasmic-host/page.tsx
-  await fs.mkdir(path.join(projectPath, 'app', 'plasmic-host'));
+  await fs.mkdir(path.join(projectPath, "app", "plasmic-host"));
   await fs.writeFile(
-    path.join(projectPath, 'app', 'plasmic-host', `page.${jsOrTs}x`),
+    path.join(projectPath, "app", "plasmic-host", `page.${jsOrTs}x`),
     makePlasmicHostPage_app_loader()
   );
 
   // ./app/[[...catchall]]/page.tsx
-  await fs.mkdir(path.join(projectPath, 'app', '[[...catchall]]'));
+  await fs.mkdir(path.join(projectPath, "app", "[[...catchall]]"));
   await fs.writeFile(
-    path.join(projectPath, 'app', '[[...catchall]]', `page.${jsOrTs}x`),
+    path.join(projectPath, "app", "[[...catchall]]", `page.${jsOrTs}x`),
     makeCatchallPage_app_loader(jsOrTs)
   );
 }
@@ -140,9 +135,9 @@ async function generateFilesPagesDir(args: GenerateFilesArgs) {
   const { projectPath, scheme, jsOrTs, projectId, projectApiToken } = args;
 
   // Delete existing pages
-  deleteGlob(path.join(projectPath, 'pages', '*.*'));
+  deleteGlob(path.join(projectPath, "pages", "*.*"));
 
-  if (scheme === 'loader') {
+  if (scheme === "loader") {
     // ./plasmic-init.ts
     await fs.writeFile(
       path.join(projectPath, `plasmic-init.${jsOrTs}`),
@@ -151,25 +146,25 @@ async function generateFilesPagesDir(args: GenerateFilesArgs) {
 
     // ./pages/plasmic-host.tsx
     await fs.writeFile(
-      path.join(projectPath, 'pages', `plasmic-host.${jsOrTs}x`),
+      path.join(projectPath, "pages", `plasmic-host.${jsOrTs}x`),
       makePlasmicHostPage_pages_loader()
     );
 
     // ./pages/[[...catchall]].tsx
     await fs.writeFile(
-      path.join(projectPath, 'pages', `[[...catchall]].${jsOrTs}x`),
+      path.join(projectPath, "pages", `[[...catchall]].${jsOrTs}x`),
       makeCatchallPage_pages_loader(jsOrTs)
     );
   } else {
     // ./pages/_app.tsx
     await fs.writeFile(
-      path.join(projectPath, 'pages', `_app.${jsOrTs}x`),
+      path.join(projectPath, "pages", `_app.${jsOrTs}x`),
       makeCustomApp_pages_codegen(jsOrTs)
     );
 
     // ./pages/plasmic-host.tsx
     await fs.writeFile(
-      path.join(projectPath, 'pages', `plasmic-host.${jsOrTs}x`),
+      path.join(projectPath, "pages", `plasmic-host.${jsOrTs}x`),
       makePlasmicHostPage_pages_codegen()
     );
 
@@ -184,15 +179,15 @@ async function generateFilesPagesDir(args: GenerateFilesArgs) {
     });
 
     // Make an index page if the project didn't have one.
-    const config = await getPlasmicConfig(projectPath, 'nextjs', scheme);
+    const config = await getPlasmicConfig(projectPath, "nextjs", scheme);
     const plasmicFiles = L.map(
       L.flatMap(config.projects, (p) => p.components),
       (c) => c.importSpec.modulePath
     );
-    if (!plasmicFiles.find((f) => f.includes('/index.'))) {
+    if (!plasmicFiles.find((f) => f.includes("/index."))) {
       await fs.writeFile(
-        path.join(projectPath, 'pages', `index.${jsOrTs}x`),
-        generateWelcomePage(config, 'nextjs')
+        path.join(projectPath, "pages", `index.${jsOrTs}x`),
+        generateWelcomePage(config, "nextjs")
       );
     }
   }