create-plasmic-app 0.0.151 → 0.0.153

package/cpa-out/tanstack-codegen-ts/src/components/plasmic/plasmic__default_style.css

@@ -0,0 +1,363 @@
+:where(.plasmic_default__all) {
+  display: block;
+  white-space: inherit;
+  grid-row: auto;
+  grid-column: auto;
+  position: relative;
+  background: none;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  row-gap: 0px;
+  column-gap: 0px;
+  box-shadow: none;
+  box-sizing: border-box;
+  text-decoration-line: none;
+  margin: 0;
+  border-width: 0px;
+}
+:where(.__wab_expr_html_text *) {
+  white-space: inherit;
+  grid-row: auto;
+  grid-column: auto;
+  background: none;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  row-gap: 0px;
+  column-gap: 0px;
+  box-shadow: none;
+  box-sizing: border-box;
+  margin: 0;
+  border-width: 0px;
+}
+
+:where(.plasmic_default__img) {
+  display: inline-block;
+}
+:where(.__wab_expr_html_text img) {
+  white-space: inherit;
+}
+
+:where(.plasmic_default__li) {
+  display: list-item;
+}
+:where(.__wab_expr_html_text li) {
+  white-space: inherit;
+}
+
+:where(.plasmic_default__span) {
+  display: inline;
+  position: static;
+  font-family: inherit;
+  line-height: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  color: inherit;
+  text-transform: inherit;
+}
+:where(.__wab_expr_html_text span) {
+  white-space: inherit;
+  font-family: inherit;
+  line-height: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  color: inherit;
+  text-transform: inherit;
+}
+
+:where(.plasmic_default__input) {
+  font-family: inherit;
+  line-height: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  color: inherit;
+  text-transform: inherit;
+  background-image: linear-gradient(#ffffff, #ffffff);
+  padding: 2px;
+  border: 1px solid lightgray;
+}
+:where(.__wab_expr_html_text input) {
+  white-space: inherit;
+  font-family: inherit;
+  line-height: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  color: inherit;
+  text-transform: inherit;
+  background-image: linear-gradient(#ffffff, #ffffff);
+  padding: 2px;
+  border: 1px solid lightgray;
+}
+
+:where(.plasmic_default__textarea) {
+  font-family: inherit;
+  line-height: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  color: inherit;
+  text-transform: inherit;
+  padding: 2px;
+  border: 1px solid lightgray;
+}
+:where(.__wab_expr_html_text textarea) {
+  white-space: inherit;
+  font-family: inherit;
+  line-height: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  color: inherit;
+  text-transform: inherit;
+  padding: 2px;
+  border: 1px solid lightgray;
+}
+
+:where(.plasmic_default__button) {
+  font-family: inherit;
+  line-height: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  color: inherit;
+  text-transform: inherit;
+  background-image: none;
+  align-items: flex-start;
+  text-align: center;
+  padding: 2px 6px;
+  border: 1px solid lightgray;
+}
+:where(.__wab_expr_html_text button) {
+  white-space: inherit;
+  font-family: inherit;
+  line-height: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  color: inherit;
+  text-transform: inherit;
+  background-image: none;
+  align-items: flex-start;
+  text-align: center;
+  padding: 2px 6px;
+  border: 1px solid lightgray;
+}
+
+:where(.plasmic_default__code) {
+  font-family: inherit;
+  line-height: inherit;
+}
+:where(.__wab_expr_html_text code) {
+  white-space: inherit;
+  font-family: inherit;
+  line-height: inherit;
+}
+
+:where(.plasmic_default__pre) {
+  font-family: inherit;
+  line-height: inherit;
+}
+:where(.__wab_expr_html_text pre) {
+  white-space: inherit;
+  font-family: inherit;
+  line-height: inherit;
+}
+
+:where(.plasmic_default__p) {
+  font-family: inherit;
+  line-height: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  color: inherit;
+  text-transform: inherit;
+}
+:where(.__wab_expr_html_text p) {
+  white-space: inherit;
+  font-family: inherit;
+  line-height: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  color: inherit;
+  text-transform: inherit;
+}
+
+:where(.plasmic_default__i) {
+  font-family: inherit;
+  line-height: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  color: inherit;
+  text-transform: inherit;
+}
+:where(.__wab_expr_html_text i) {
+  white-space: inherit;
+  font-family: inherit;
+  line-height: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  color: inherit;
+  text-transform: inherit;
+}
+
+:where(.plasmic_default__em) {
+  font-family: inherit;
+  line-height: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  color: inherit;
+  text-transform: inherit;
+}
+:where(.__wab_expr_html_text em) {
+  white-space: inherit;
+  font-family: inherit;
+  line-height: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  color: inherit;
+  text-transform: inherit;
+}
+
+:where(.plasmic_default__strong) {
+  font-family: inherit;
+  line-height: inherit;
+  font-size: inherit;
+  color: inherit;
+  text-transform: inherit;
+}
+:where(.__wab_expr_html_text strong) {
+  white-space: inherit;
+  font-family: inherit;
+  line-height: inherit;
+  font-size: inherit;
+  color: inherit;
+  text-transform: inherit;
+}
+
+:where(.plasmic_default__h1) {
+  font-size: inherit;
+  font-weight: inherit;
+}
+:where(.__wab_expr_html_text h1) {
+  white-space: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+:where(.plasmic_default__h2) {
+  font-size: inherit;
+  font-weight: inherit;
+}
+:where(.__wab_expr_html_text h2) {
+  white-space: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+:where(.plasmic_default__h3) {
+  font-size: inherit;
+  font-weight: inherit;
+}
+:where(.__wab_expr_html_text h3) {
+  white-space: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+:where(.plasmic_default__h4) {
+  font-size: inherit;
+  font-weight: inherit;
+}
+:where(.__wab_expr_html_text h4) {
+  white-space: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+:where(.plasmic_default__h5) {
+  font-size: inherit;
+  font-weight: inherit;
+}
+:where(.__wab_expr_html_text h5) {
+  white-space: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+:where(.plasmic_default__h6) {
+  font-size: inherit;
+  font-weight: inherit;
+}
+:where(.__wab_expr_html_text h6) {
+  white-space: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+:where(.plasmic_default__address) {
+  font-style: inherit;
+}
+:where(.__wab_expr_html_text address) {
+  white-space: inherit;
+  font-style: inherit;
+}
+
+:where(.plasmic_default__a) {
+  color: inherit;
+}
+:where(.__wab_expr_html_text a) {
+  white-space: inherit;
+  color: inherit;
+}
+
+:where(.plasmic_default__ol) {
+  list-style-type: none;
+  padding: 0;
+}
+:where(.__wab_expr_html_text ol) {
+  white-space: inherit;
+  list-style-type: none;
+  padding: 0;
+}
+
+:where(.plasmic_default__ul) {
+  list-style-type: none;
+  padding: 0;
+}
+:where(.__wab_expr_html_text ul) {
+  white-space: inherit;
+  list-style-type: none;
+  padding: 0;
+}
+
+:where(.plasmic_default__select) {
+  padding: 2px 6px;
+}
+:where(.__wab_expr_html_text select) {
+  white-space: inherit;
+  padding: 2px 6px;
+}
+
+.plasmic_default__component_wrapper {
+  display: grid;
+}
+.plasmic_default__inline {
+  display: inline;
+}
+.plasmic_page_wrapper {
+  display: flex;
+  width: 100%;
+  min-height: 100vh;
+  align-items: stretch;
+  align-self: start;
+}
+.plasmic_page_wrapper > * {
+  height: auto !important;
+}
+.__wab_expr_html_text {
+  white-space: normal;
+}

package/cpa-out/tanstack-codegen-ts/src/routes/dynamic/$slug/index.tsx

@@ -5,15 +5,35 @@ import { PageParamsProvider as PageParamsProvider__ } from "@plasmicapp/react-we
 
 import {
   PlasmicDynamicPage,
-  PlasmicDynamicPage__HeadOptions
+  PlasmicDynamicPage__HeadOptions,
+  serverQueryTree
 } from "../../../components/plasmic/create_plasmic_app/PlasmicDynamicPage";
 import { createFileRoute } from "@tanstack/react-router";
+import { unstable_executePlasmicQueries } from "@plasmicapp/react-web/lib/data-sources";
+import { PlasmicQueryDataProvider } from "@plasmicapp/react-web/lib/query";
 
 export const Route = createFileRoute("/dynamic/$slug/")({
   head: () => ({
     meta: [...PlasmicDynamicPage__HeadOptions.meta],
     links: [...PlasmicDynamicPage__HeadOptions.links]
   }),
+  loaderDeps: ({ search }) => ({ search }),
+  loader: async ({ params, location, deps }) => {
+    const $ctx = {
+      pageRoute: "/dynamic/[slug]",
+      pagePath: location.pathname,
+      params: (params ?? {}) as Record<string, string | string[] | undefined>,
+      query: (deps.search ?? {}) as Record<
+        string,
+        string | string[] | undefined
+      >
+    };
+    const { cache: prefetchedCache } = await unstable_executePlasmicQueries(
+      serverQueryTree,
+      { $props: {}, $ctx }
+    );
+    return { prefetchedCache: prefetchedCache as Record<string, any> };
+  },
   component: DynamicPage
 });
 
@@ -35,14 +55,17 @@ function DynamicPage() {
   // TanStack Router __root Route
   // (https://tanstack.com/router/latest/docs/framework/react/guide/tanstack-start#the-root-of-your-application).
 
+  const { prefetchedCache } = Route.useLoaderData();
   return (
-    <PageParamsProvider__
-      route={Route.fullPath}
-      params={Route.useParams()}
-      query={Route.useSearch()}
-    >
-      <PlasmicDynamicPage />
-    </PageParamsProvider__>
+    <PlasmicQueryDataProvider prefetchedCache={prefetchedCache}>
+      <PageParamsProvider__
+        route={Route.fullPath}
+        params={Route.useParams()}
+        query={Route.useSearch()}
+      >
+        <PlasmicDynamicPage />
+      </PageParamsProvider__>
+    </PlasmicQueryDataProvider>
   );
 }
 

package/cpa-out/tanstack-codegen-ts/src/styles.css

@@ -0,0 +1,17 @@
+
+@import "tailwindcss";
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+}
+

package/dist/nextjs/nextjs.js

@@ -61,6 +61,19 @@ exports.nextjsStrategy = {
     }),
     overwriteConfig: (args) => __awaiter(void 0, void 0, void 0, function* () {
         const { projectPath, scheme, jsOrTs } = args;
+        // create-next-app's globals.css forces a dark background with `prefers-color-scheme: dark`.
+        // It's imported by the /plasmic-host layout/_app and paints the Studio canvas black.
+        const globalsCssCandidates = [
+            path_1.default.join(projectPath, "app", "globals.css"),
+            path_1.default.join(projectPath, "src", "app", "globals.css"),
+            path_1.default.join(projectPath, "styles", "globals.css"),
+            path_1.default.join(projectPath, "src", "styles", "globals.css"),
+        ];
+        for (const globalsCssPath of globalsCssCandidates) {
+            if ((0, fs_1.existsSync)(globalsCssPath)) {
+                yield fs_1.promises.writeFile(globalsCssPath, makeNeutralGlobalsCss());
+            }
+        }
         if (scheme === "codegen") {
             const isTs = jsOrTs === "ts";
             const typePragma = isTs
@@ -89,6 +102,23 @@ export default nextConfig;`);
         yield (0, cmd_utils_1.spawnOrFail)(`${npmRunCmd} build`, projectPath);
     }),
 };
+/**
+ * Canvas-safe globals.css: no body background/color or dark `color-scheme`,
+ * since it's loaded by /plasmic-host (for Studio canvas).
+ */
+function makeNeutralGlobalsCss() {
+    return `* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+`;
+}
 function generateFilesAppDir(args) {
     return __awaiter(this, void 0, void 0, function* () {
         const { projectPath, scheme, jsOrTs, projectId, projectApiToken } = args;
@@ -107,10 +137,6 @@ 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
@@ -125,8 +151,20 @@ function generateFilesAppDir(args) {
                 projectApiToken,
                 projectPath,
             });
-            // Make an index (/) page if the project didn't have one.
+            // 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 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"));
@@ -148,8 +186,6 @@ 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
@@ -161,8 +197,18 @@ function generateFilesPagesDir(args) {
                 projectApiToken,
                 projectPath,
             });
-            // Make an index page if the project didn't have one.
+            // 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 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"));
@@ -170,3 +216,29 @@ 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 } from "../../../utils/types";
-export declare function makeLayout_app_codegen(jsOrTs: JsOrTs): string;
+import { JsOrTs, PlasmicCssImport } from "../../../utils/types";
+export declare function makeLayout_app_codegen(jsOrTs: JsOrTs, cssImports?: PlasmicCssImport[]): string;

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

@@ -2,8 +2,14 @@
 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) {
-    return `import '@/app/globals.css'
+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'
 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 } from "../../../utils/types";
-export declare function makeCustomApp_pages_codegen(jsOrTs: JsOrTs): string;
+import { JsOrTs, PlasmicCssImport } from "../../../utils/types";
+export declare function makeCustomApp_pages_codegen(jsOrTs: JsOrTs, cssImports?: PlasmicCssImport[]): string;

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

@@ -2,8 +2,14 @@
 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) {
-    return `import '@/styles/globals.css'
+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'
 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,4 +6,8 @@ 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.151",
+  "version": "0.0.153",
   "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.363",
+    "@plasmicapp/cli": "0.1.364",
     "@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": "f9760e92bc673fce71817beaf70d910d4137fbd0"
+  "gitHead": "8b7eabd6a238363ef53da368b1091fb251b43de4"
 }