create-plasmic-app 0.0.151 → 0.0.152

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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-plasmic-app",
-  "version": "0.0.151",
+  "version": "0.0.152",
   "description": "Create Plasmic-powered React apps",
   "main": "./dist/lib.js",
   "types": "./dist/lib.d.ts",
@@ -47,5 +47,5 @@
     "validate-npm-package-name": "^3.0.0",
     "yargs": "^16.2.0"
   },
-  "gitHead": "f9760e92bc673fce71817beaf70d910d4137fbd0"
+  "gitHead": "c8685b26363d59652d7a8899ddaa38727680c81c"
 }

package/src/nextjs/nextjs.ts

@@ -1,4 +1,4 @@
-import { promises as fs } from "fs";
+import { existsSync, promises as fs } from "fs";
 import L from "lodash";
 import path from "path";
 import { spawnOrFail } from "../utils/cmd-utils";
@@ -52,6 +52,21 @@ export const nextjsStrategy: CPAStrategy = {
   },
   overwriteConfig: async (args) => {
     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.join(projectPath, "app", "globals.css"),
+      path.join(projectPath, "src", "app", "globals.css"),
+      path.join(projectPath, "styles", "globals.css"),
+      path.join(projectPath, "src", "styles", "globals.css"),
+    ];
+    for (const globalsCssPath of globalsCssCandidates) {
+      if (existsSync(globalsCssPath)) {
+        await fs.writeFile(globalsCssPath, makeNeutralGlobalsCss());
+      }
+    }
+
     if (scheme === "codegen") {
       const isTs = jsOrTs === "ts";
       const typePragma = isTs
@@ -83,6 +98,24 @@ export default nextConfig;`
   },
 };
 
+/**
+ * Canvas-safe globals.css: no body background/color or dark `color-scheme`,
+ * since it's loaded by /plasmic-host (for Studio canvas).
+ */
+function makeNeutralGlobalsCss(): string {
+  return `* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+`;
+}
+
 async function generateFilesAppDir(args: GenerateFilesArgs) {
   const { projectPath, scheme, jsOrTs, projectId, projectApiToken } = args;