create-plasmic-app 0.0.149 → 0.0.150

package/dist/nextjs/nextjs.js

@@ -107,6 +107,10 @@ function generateFilesAppDir(args) {
             yield fs_1.promises.writeFile(path_1.default.join(projectPath, "app", "[[...catchall]]", `page.${jsOrTs}x`), (0, catchall_page_1.makeCatchallPage_app_loader)(jsOrTs));
         }
         else {
+            // Replace starter layout. Removes app/layout.js in JS projects before writing layout.jsx.
+            (0, file_utils_1.deleteGlob)(path_1.default.join(projectPath, "app", "layout.*"));
+            // ./app/layout.tsx
+            yield fs_1.promises.writeFile(path_1.default.join(projectPath, "app", `layout.${jsOrTs}x`), (0, layout_1.makeLayout_app_codegen)(jsOrTs));
             // ./plasmic-init-client.tsx
             yield fs_1.promises.writeFile(path_1.default.join(projectPath, `plasmic-init-client.${jsOrTs}x`), (0, plasmic_init_client_1.makePlasmicInitClient_app_codegen)(jsOrTs));
             // ./app/plasmic-host/page.tsx
@@ -121,20 +125,8 @@ function generateFilesAppDir(args) {
                 projectApiToken,
                 projectPath,
             });
-            // Read plasmic.json so we can wire each top-level project's plasmic.css
-            // import directly into the root layout template.
-            const config = yield (0, file_utils_1.getPlasmicConfig)(projectPath, "nextjs", scheme);
-            const layoutAbsPath = path_1.default.join(projectPath, "app", `layout.${jsOrTs}x`);
-            const cssImports = getPlasmicCssImports({
-                projectPath,
-                rootFileAbsPath: layoutAbsPath,
-                config,
-            });
-            // Replace starter layout. Removes app/layout.js in JS projects before writing layout.jsx.
-            (0, file_utils_1.deleteGlob)(path_1.default.join(projectPath, "app", "layout.*"));
-            // ./app/layout.tsx
-            yield fs_1.promises.writeFile(path_1.default.join(projectPath, "app", `layout.${jsOrTs}x`), (0, layout_1.makeLayout_app_codegen)(jsOrTs, cssImports));
             // Make an index (/) page if the project didn't have one.
+            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("app/page."))) {
                 yield fs_1.promises.writeFile(path_1.default.join(projectPath, "app", `page.${jsOrTs}x`), (0, file_utils_1.generateWelcomePage)(config, "nextjs"));
@@ -156,6 +148,8 @@ function generateFilesPagesDir(args) {
             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));
             // ./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_codegen)());
             // This should generate
@@ -167,18 +161,8 @@ function generateFilesPagesDir(args) {
                 projectApiToken,
                 projectPath,
             });
-            // Read plasmic.json so we can wire each top-level project's plasmic.css
-            // import directly into the _app template.
-            const config = yield (0, file_utils_1.getPlasmicConfig)(projectPath, "nextjs", scheme);
-            const appAbsPath = path_1.default.join(projectPath, "pages", `_app.${jsOrTs}x`);
-            const cssImports = getPlasmicCssImports({
-                projectPath,
-                rootFileAbsPath: appAbsPath,
-                config,
-            });
-            // ./pages/_app.tsx
-            yield fs_1.promises.writeFile(appAbsPath, (0, app_1.makeCustomApp_pages_codegen)(jsOrTs, cssImports));
             // Make an index page if the project didn't have one.
+            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"));
@@ -186,29 +170,3 @@ function generateFilesPagesDir(args) {
         }
     });
 }
-/**
- * Builds the list of `plasmic.css` imports the Next.js root file (Pages Router
- * `_app.{ext}`, App Router `app/layout.{ext}`) needs for every top-level
- * project in `plasmic.json`. Next.js disallows global non-module CSS imports
- * outside of those files.
- *
- * The marker comment in the emitted import (plasmic-import: <id>/projectcss)
- * matches the convention used by @plasmicapp/cli sync, so subsequent syncs
- * can update paths in-place without producing duplicates.
- *
- * @param rootFileAbsPath Absolute path to the Next.js root file (`_app.{ext}`
- *   for Pages Router, `app/layout.{ext}` for App Router).
- */
-function getPlasmicCssImports(args) {
-    const { projectPath, rootFileAbsPath, config } = args;
-    return (config.projects || [])
-        .filter((p) => !p.indirect && !!p.cssFilePath)
-        .map((p) => {
-        const absoluteCssPath = path_1.default.join(projectPath, config.srcDir, p.cssFilePath);
-        let relPath = path_1.default.relative(path_1.default.dirname(rootFileAbsPath), absoluteCssPath);
-        if (!relPath.startsWith(".")) {
-            relPath = `./${relPath}`;
-        }
-        return { projectId: p.projectId, importPath: relPath };
-    });
-}

package/dist/nextjs/templates/app-codegen/layout.d.ts

@@ -1,2 +1,2 @@
-import { JsOrTs, PlasmicCssImport } from "../../../utils/types";
-export declare function makeLayout_app_codegen(jsOrTs: JsOrTs, cssImports?: PlasmicCssImport[]): string;
+import { JsOrTs } from "../../../utils/types";
+export declare function makeLayout_app_codegen(jsOrTs: JsOrTs): string;

package/dist/nextjs/templates/app-codegen/layout.js

@@ -2,14 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeLayout_app_codegen = void 0;
 const file_utils_1 = require("../../../utils/file-utils");
-function makeLayout_app_codegen(jsOrTs, cssImports = []) {
-    const plasmicCssImportLines = cssImports
-        .map((i) => `import "${i.importPath}"; // plasmic-import: ${i.projectId}/projectcss`)
-        .join("\n");
-    const plasmicCssImportsBlock = plasmicCssImportLines
-        ? `${plasmicCssImportLines}\n`
-        : "";
-    return `${plasmicCssImportsBlock}import '@/app/globals.css'
+function makeLayout_app_codegen(jsOrTs) {
+    return `import '@/app/globals.css'
 import { ClientPlasmicRootProvider } from "@/plasmic-init-client";
 
 export default function RootLayout({

package/dist/nextjs/templates/pages-codegen/app.d.ts

@@ -1,2 +1,2 @@
-import { JsOrTs, PlasmicCssImport } from "../../../utils/types";
-export declare function makeCustomApp_pages_codegen(jsOrTs: JsOrTs, cssImports?: PlasmicCssImport[]): string;
+import { JsOrTs } from "../../../utils/types";
+export declare function makeCustomApp_pages_codegen(jsOrTs: JsOrTs): string;

package/dist/nextjs/templates/pages-codegen/app.js

@@ -2,14 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeCustomApp_pages_codegen = void 0;
 const file_utils_1 = require("../../../utils/file-utils");
-function makeCustomApp_pages_codegen(jsOrTs, cssImports = []) {
-    const plasmicCssImportLines = cssImports
-        .map((i) => `import "${i.importPath}"; // plasmic-import: ${i.projectId}/projectcss`)
-        .join("\n");
-    const plasmicCssImportsBlock = plasmicCssImportLines
-        ? `${plasmicCssImportLines}\n`
-        : "";
-    return `${plasmicCssImportsBlock}import '@/styles/globals.css'
+function makeCustomApp_pages_codegen(jsOrTs) {
+    return `import '@/styles/globals.css'
 import { PlasmicRootProvider } from "@plasmicapp/react-web";${(0, file_utils_1.ifTs)(jsOrTs, `
 import type { AppProps } from "next/app";`)}
 import Head from "next/head";

package/dist/utils/types.d.ts

@@ -6,8 +6,4 @@ export type PlatformOptions = {
     };
 };
 export type SchemeType = "codegen" | "loader";
-export type PlasmicCssImport = {
-    projectId: string;
-    importPath: string;
-};
 export declare function platformTypeToString(s: PlatformType): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-plasmic-app",
-  "version": "0.0.149",
+  "version": "0.0.150",
   "description": "Create Plasmic-powered React apps",
   "main": "./dist/lib.js",
   "types": "./dist/lib.d.ts",
@@ -33,7 +33,7 @@
     "tsx": "^4.21.0"
   },
   "dependencies": {
-    "@plasmicapp/cli": "0.1.362",
+    "@plasmicapp/cli": "0.1.363",
     "@sentry/node": "^6.2.2",
     "chalk": "^4.1.0",
     "execa": "^5.0.0",
@@ -47,5 +47,5 @@
     "validate-npm-package-name": "^3.0.0",
     "yargs": "^16.2.0"
   },
-  "gitHead": "2dd9cf093c62331b86ac29449b8e6e33f55c863c"
+  "gitHead": "87c9e3389e9f775db1b87fb66ee2fe1c74647914"
 }

package/src/nextjs/nextjs.ts

@@ -1,4 +1,3 @@
-import { PlasmicConfig } from "@plasmicapp/cli/dist/utils/config-utils";
 import { promises as fs } from "fs";
 import L from "lodash";
 import path from "path";
@@ -12,7 +11,6 @@ import {
 import { ensure } from "../utils/lang-utils";
 import { installUpgrade } from "../utils/npm-utils";
 import { CPAStrategy, GenerateFilesArgs } from "../utils/strategy";
-import { PlasmicCssImport } from "../utils/types";
 import { makeLayout_app_codegen } from "./templates/app-codegen/layout";
 import { makePlasmicHostPage_app_codegen } from "./templates/app-codegen/plasmic-host";
 import { makePlasmicInitClient_app_codegen } from "./templates/app-codegen/plasmic-init-client";
@@ -121,6 +119,15 @@ async function generateFilesAppDir(args: GenerateFilesArgs) {
       makeCatchallPage_app_loader(jsOrTs)
     );
   } else {
+    // Replace starter layout. Removes app/layout.js in JS projects before writing layout.jsx.
+    deleteGlob(path.join(projectPath, "app", "layout.*"));
+
+    // ./app/layout.tsx
+    await fs.writeFile(
+      path.join(projectPath, "app", `layout.${jsOrTs}x`),
+      makeLayout_app_codegen(jsOrTs)
+    );
+
     // ./plasmic-init-client.tsx
     await fs.writeFile(
       path.join(projectPath, `plasmic-init-client.${jsOrTs}x`),
@@ -144,26 +151,8 @@ async function generateFilesAppDir(args: GenerateFilesArgs) {
       projectPath,
     });
 
-    // Read plasmic.json so we can wire each top-level project's plasmic.css
-    // import directly into the root layout template.
-    const config = await getPlasmicConfig(projectPath, "nextjs", scheme);
-    const layoutAbsPath = path.join(projectPath, "app", `layout.${jsOrTs}x`);
-    const cssImports = getPlasmicCssImports({
-      projectPath,
-      rootFileAbsPath: layoutAbsPath,
-      config,
-    });
-
-    // Replace starter layout. Removes app/layout.js in JS projects before writing layout.jsx.
-    deleteGlob(path.join(projectPath, "app", "layout.*"));
-
-    // ./app/layout.tsx
-    await fs.writeFile(
-      path.join(projectPath, "app", `layout.${jsOrTs}x`),
-      makeLayout_app_codegen(jsOrTs, cssImports)
-    );
-
     // Make an index (/) page if the project didn't have one.
+    const config = await getPlasmicConfig(projectPath, "nextjs", scheme);
     const plasmicFiles = L.map(
       L.flatMap(config.projects, (p) => p.components),
       (c) => c.importSpec.modulePath
@@ -205,6 +194,12 @@ async function generateFilesPagesDir(args: GenerateFilesArgs) {
       makeCatchallPage_pages_loader(jsOrTs)
     );
   } else {
+    // ./pages/_app.tsx
+    await fs.writeFile(
+      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`),
@@ -221,23 +216,8 @@ async function generateFilesPagesDir(args: GenerateFilesArgs) {
       projectPath,
     });
 
-    // Read plasmic.json so we can wire each top-level project's plasmic.css
-    // import directly into the _app template.
-    const config = await getPlasmicConfig(projectPath, "nextjs", scheme);
-    const appAbsPath = path.join(projectPath, "pages", `_app.${jsOrTs}x`);
-    const cssImports = getPlasmicCssImports({
-      projectPath,
-      rootFileAbsPath: appAbsPath,
-      config,
-    });
-
-    // ./pages/_app.tsx
-    await fs.writeFile(
-      appAbsPath,
-      makeCustomApp_pages_codegen(jsOrTs, cssImports)
-    );
-
     // Make an index page if the project didn't have one.
+    const config = await getPlasmicConfig(projectPath, "nextjs", scheme);
     const plasmicFiles = L.map(
       L.flatMap(config.projects, (p) => p.components),
       (c) => c.importSpec.modulePath
@@ -250,42 +230,3 @@ async function generateFilesPagesDir(args: GenerateFilesArgs) {
     }
   }
 }
-
-/**
- * Builds the list of `plasmic.css` imports the Next.js root file (Pages Router
- * `_app.{ext}`, App Router `app/layout.{ext}`) needs for every top-level
- * project in `plasmic.json`. Next.js disallows global non-module CSS imports
- * outside of those files.
- *
- * The marker comment in the emitted import (plasmic-import: <id>/projectcss)
- * matches the convention used by @plasmicapp/cli sync, so subsequent syncs
- * can update paths in-place without producing duplicates.
- *
- * @param rootFileAbsPath Absolute path to the Next.js root file (`_app.{ext}`
- *   for Pages Router, `app/layout.{ext}` for App Router).
- */
-function getPlasmicCssImports(args: {
-  projectPath: string;
-  rootFileAbsPath: string;
-  config: PlasmicConfig;
-}): PlasmicCssImport[] {
-  const { projectPath, rootFileAbsPath, config } = args;
-  return (config.projects || [])
-    .filter((p) => !p.indirect && !!p.cssFilePath)
-    .map((p) => {
-      const absoluteCssPath = path.join(
-        projectPath,
-        config.srcDir,
-        p.cssFilePath
-      );
-      let relPath = path.relative(
-        path.dirname(rootFileAbsPath),
-        absoluteCssPath
-      );
-      if (!relPath.startsWith(".")) {
-        relPath = `./${relPath}`;
-      }
-
-      return { projectId: p.projectId, importPath: relPath };
-    });
-}

package/src/nextjs/templates/app-codegen/layout.ts

@@ -1,21 +1,8 @@
 import { ifTs } from "../../../utils/file-utils";
-import { JsOrTs, PlasmicCssImport } from "../../../utils/types";
+import { JsOrTs } from "../../../utils/types";
 
-export function makeLayout_app_codegen(
-  jsOrTs: JsOrTs,
-  cssImports: PlasmicCssImport[] = []
-): string {
-  const plasmicCssImportLines = cssImports
-    .map(
-      (i) =>
-        `import "${i.importPath}"; // plasmic-import: ${i.projectId}/projectcss`
-    )
-    .join("\n");
-  const plasmicCssImportsBlock = plasmicCssImportLines
-    ? `${plasmicCssImportLines}\n`
-    : "";
-
-  return `${plasmicCssImportsBlock}import '@/app/globals.css'
+export function makeLayout_app_codegen(jsOrTs: JsOrTs): string {
+  return `import '@/app/globals.css'
 import { ClientPlasmicRootProvider } from "@/plasmic-init-client";
 
 export default function RootLayout({

package/src/nextjs/templates/pages-codegen/app.ts

@@ -1,21 +1,8 @@
 import { ifTs } from "../../../utils/file-utils";
-import { JsOrTs, PlasmicCssImport } from "../../../utils/types";
+import { JsOrTs } from "../../../utils/types";
 
-export function makeCustomApp_pages_codegen(
-  jsOrTs: JsOrTs,
-  cssImports: PlasmicCssImport[] = []
-): string {
-  const plasmicCssImportLines = cssImports
-    .map(
-      (i) =>
-        `import "${i.importPath}"; // plasmic-import: ${i.projectId}/projectcss`
-    )
-    .join("\n");
-  const plasmicCssImportsBlock = plasmicCssImportLines
-    ? `${plasmicCssImportLines}\n`
-    : "";
-
-  return `${plasmicCssImportsBlock}import '@/styles/globals.css'
+export function makeCustomApp_pages_codegen(jsOrTs: JsOrTs): string {
+  return `import '@/styles/globals.css'
 import { PlasmicRootProvider } from "@plasmicapp/react-web";${ifTs(
     jsOrTs,
     `

package/src/utils/types.ts

@@ -7,11 +7,6 @@ export type PlatformOptions = {
 };
 export type SchemeType = "codegen" | "loader";
 
-export type PlasmicCssImport = {
-  projectId: string;
-  importPath: string;
-};
-
 export function platformTypeToString(s: PlatformType): string {
   return s === "nextjs"
     ? "Next.js"