create-plasmic-app 0.0.151 → 0.0.152

package/cpa-out/nextjs-app-codegen-ts/components/plasmic/create_plasmic_app/PlasmicDynamicPageServer.tsx

@@ -14,6 +14,14 @@ import { ClientDynamicPage } from "../../../app/dynamic/[slug]/page-client"; //
 
 const $$ = {};
 
+import { unstable_executePlasmicQueries } from "@plasmicapp/react-web/lib/data-sources";
+import type {
+  PlasmicQuery,
+  PlasmicQueryResult
+} from "@plasmicapp/react-web/lib/data-sources";
+import type { QueryComponentNode } from "@plasmicapp/react-web/lib/data-sources";
+import { PlasmicQueryDataProvider } from "@plasmicapp/react-web/lib/query";
+
 export type PageCtx = {
   pageRoute: string;
   pagePath: string;
@@ -29,6 +37,93 @@ export function generateDynamicMetadata($q: any, $ctx: PageCtx) {
     }
   };
 }
+export const serverQueryTree: QueryComponentNode = {
+  type: "component",
+  queries: {
+    sha256: {
+      id: "custom:krgWtF9Kkesx",
+      fn: async ({ $q, $props, $ctx, $state }) => {
+        console.log("Running SHA-256");
+        const data = new TextEncoder().encode($ctx.params.slug);
+        const hash = await crypto.subtle.digest("SHA-256", data);
+        return [...new Uint8Array(hash)]
+          .map(b => b.toString(16).padStart(2, "0"))
+          .join("-");
+      },
+      args: ({ $q, $props, $ctx, $state }) => {
+        return [
+          {
+            $ctx: {
+              params: $ctx["params"]
+            },
+            $props: {},
+            $q: {},
+            $state: {}
+          }
+        ];
+      }
+    }
+  },
+  stateSpecs: [],
+  propsContext: {},
+  children: [
+    {
+      type: "component",
+      queries: {},
+      stateSpecs: [],
+      propsContext: {},
+      children: [
+        {
+          type: "component",
+          queries: {},
+          stateSpecs: [
+            {
+              path: "showStartIcon",
+              type: "private",
+              variableType: "variant",
+              initFunc: ({ $props, $state, $queries, $q, $ctx }) =>
+                $props.showStartIcon
+            },
+            {
+              path: "showEndIcon",
+              type: "private",
+              variableType: "variant",
+              initFunc: ({ $props, $state, $queries, $q, $ctx }) =>
+                $props.showEndIcon
+            },
+            {
+              path: "isDisabled",
+              type: "private",
+              variableType: "variant",
+              initFunc: ({ $props, $state, $queries, $q, $ctx }) =>
+                $props.isDisabled
+            },
+            {
+              path: "shape",
+              type: "private",
+              variableType: "variant",
+              initFunc: ({ $props, $state, $queries, $q, $ctx }) => $props.shape
+            },
+            {
+              path: "size",
+              type: "private",
+              variableType: "variant",
+              initFunc: ({ $props, $state, $queries, $q, $ctx }) => $props.size
+            },
+            {
+              path: "color",
+              type: "private",
+              variableType: "variant",
+              initFunc: ({ $props, $state, $queries, $q, $ctx }) => $props.color
+            }
+          ],
+          propsContext: { submitsForm: ({ $q, $props, $ctx, $state }) => true },
+          children: []
+        }
+      ]
+    }
+  ]
+};
 
 function mkPathFromRouteAndParams(
   route: string,
@@ -77,6 +172,19 @@ export async function makeAppRouterPageCtx({
 export type PlasmicDynamicPageServerProps = DefaultDynamicPageProps &
   DynamicPageServerSkeletonProps;
 
-export function PlasmicDynamicPageServer(props: PlasmicDynamicPageServerProps) {
-  return <ClientDynamicPage {...props} />;
+export async function PlasmicDynamicPageServer(
+  props: PlasmicDynamicPageServerProps
+) {
+  const { params, searchParams, ...rest } = props;
+  const ctx = await makeAppRouterPageCtx({ params, searchParams });
+  const { cache: prefetchedCache } = await unstable_executePlasmicQueries(
+    serverQueryTree,
+    { $props: rest, $ctx: ctx }
+  );
+
+  return (
+    <PlasmicQueryDataProvider prefetchedCache={prefetchedCache}>
+      <ClientDynamicPage {...rest} />
+    </PlasmicQueryDataProvider>
+  );
 }

package/cpa-out/nextjs-app-codegen-ts/components/plasmic/create_plasmic_app/PlasmicHomepage.module.css

@@ -0,0 +1,43 @@
+.root {
+  display: flex;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  min-width: 0;
+  min-height: 0;
+  padding: 0px;
+}
+.section {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  height: auto;
+  max-width: 100%;
+  row-gap: 16px;
+  min-width: 0;
+  padding: 96px 24px;
+}
+.h1 {
+  position: relative;
+  max-width: 800px;
+  height: auto;
+  width: 100%;
+  min-width: 0;
+}
+.text {
+  position: relative;
+  max-width: 800px;
+  height: auto;
+  width: 100%;
+  min-width: 0;
+}
+.randomDynamicPageButton:global(.__wab_instance):global(.__wab_instance) {
+  max-width: 100%;
+  position: relative;
+}

package/cpa-out/nextjs-app-codegen-ts/components/plasmic/create_plasmic_app/PlasmicHomepage.tsx

@@ -64,7 +64,6 @@ import {
 import { generateDynamicMetadata, PageCtx } from "./PlasmicHomepageServer"; // plasmic-import: 6uuAAE1jiCew/rscServer
 
 import RandomDynamicPageButton from "../../RandomDynamicPageButton"; // plasmic-import: Q23H1_1M_P/component
-import { Fetcher } from "@plasmicapp/react-web/lib/data-sources";
 import { _useGlobalVariants } from "./plasmic"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectModule
 import { _useStyleTokens } from "./PlasmicStyleTokensProvider"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/styleTokensProvider
 
@@ -198,7 +197,9 @@ function PlasmicHomepage__RenderFunc(props: {
                 sty.h1
               )}
             >
-              {"create-plasmic-app"}
+              {hasVariant(globalVariants, "screen", "desktopOnly")
+                ? "create-plasmic-app"
+                : "cpa"}
             </h1>
             <div
               data-plasmic-name={"text"}
@@ -209,44 +210,9 @@ function PlasmicHomepage__RenderFunc(props: {
                 sty.text
               )}
             >
-              {hasVariant(globalVariants, "screen", "desktopOnly") ? (
-                <React.Fragment>
-                  <React.Fragment>
-                    {
-                      "This project is used by run-cpa.ts in the create-plasmic-app repo.\n\nrun-cpa.ts runs create-plasmic-app for many combinations of args (e.g. nextjs + appDir + loader + typescript) to check for changes in generated files. Any changes to this project will result in lots of changes to the generated files. "
-                    }
-                  </React.Fragment>
-                  <span
-                    className={
-                      "plasmic_default__all plasmic_default__span plasmic_default__span__47tFX"
-                    }
-                    style={{ fontWeight: 700 }}
-                  >
-                    {"Therefore, please avoid changing this project."}
-                  </span>
-                </React.Fragment>
-              ) : (
-                <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\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
-                    className={
-                      "plasmic_default__all plasmic_default__span plasmic_default__span__47tFX"
-                    }
-                    style={{ fontWeight: 700 }}
-                  >
-                    {"Code"}
-                  </span>
-                  <React.Fragment>
-                    {
-                      " button in the top right and follow the quickstart instructions.\n\nJoin our Slack community (icon in bottom left) for help any time."
-                    }
-                  </React.Fragment>
-                </React.Fragment>
-              )}
+              {
+                "This project is used by run-cpa.ts in the create-plasmic-app repo.\n\n\nrun-cpa.ts runs create-plasmic-app for many combinations of args (e.g. nextjs + appDir + loader + typescript) to check for changes in generated files. Any changes to this project will result in lots of changes to the generated files. Therefore, please avoid changing this project.\n"
+              }
             </div>
             <RandomDynamicPageButton
               data-plasmic-name={"randomDynamicPageButton"}

package/cpa-out/nextjs-app-codegen-ts/components/plasmic/create_plasmic_app/PlasmicRandomDynamicPageButton.module.css

@@ -0,0 +1,16 @@
+.root:global(.__wab_instance) {
+  max-width: 100%;
+  position: relative;
+}
+.svg__p2Hdu {
+  position: relative;
+  object-fit: cover;
+  width: auto;
+  height: 1em;
+}
+.svg__jkBz {
+  position: relative;
+  object-fit: cover;
+  width: auto;
+  height: 1em;
+}