create-plasmic-app 0.0.62 → 0.0.64

package/cpa-out/react-loader-ts/src/components/plasmic/create_plasmic_app/PlasmicHomepage.tsx

@@ -0,0 +1,280 @@
+// @ts-nocheck
+/* eslint-disable */
+/* tslint:disable */
+/* prettier-ignore-start */
+
+/** @jsxRuntime classic */
+/** @jsx createPlasmicElementProxy */
+/** @jsxFrag React.Fragment */
+
+// This class is auto-generated by Plasmic; please do not edit!
+// Plasmic Project: 47tFXWjN2C4NyHFGGpaYQ3
+// Component: 6uuAAE1jiCew
+import * as React from "react";
+
+import * as p from "@plasmicapp/react-web";
+import * as ph from "@plasmicapp/host";
+
+import {
+  hasVariant,
+  classNames,
+  wrapWithClassName,
+  createPlasmicElementProxy,
+  makeFragment,
+  MultiChoiceArg,
+  SingleBooleanChoiceArg,
+  SingleChoiceArg,
+  pick,
+  omit,
+  useTrigger,
+  StrictProps,
+  deriveRenderOpts,
+  ensureGlobalVariants
+} from "@plasmicapp/react-web";
+
+import { useScreenVariants as useScreenVariantsscBjPxgdxdzbv } from "./PlasmicGlobalVariant__Screen"; // plasmic-import: SCBjPXGDXDZBV/globalVariant
+
+import "@plasmicapp/react-web/lib/plasmic.css";
+
+import projectcss from "./plasmic_create_plasmic_app.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss
+import sty from "./PlasmicHomepage.module.css"; // plasmic-import: 6uuAAE1jiCew/css
+
+export type PlasmicHomepage__VariantMembers = {};
+export type PlasmicHomepage__VariantsArgs = {};
+type VariantPropType = keyof PlasmicHomepage__VariantsArgs;
+export const PlasmicHomepage__VariantProps = new Array<VariantPropType>();
+
+export type PlasmicHomepage__ArgsType = {};
+type ArgPropType = keyof PlasmicHomepage__ArgsType;
+export const PlasmicHomepage__ArgProps = new Array<ArgPropType>();
+
+export type PlasmicHomepage__OverridesType = {
+  root?: p.Flex<"div">;
+  section?: p.Flex<"section">;
+  h1?: p.Flex<"h1">;
+  text?: p.Flex<"div">;
+};
+
+export interface DefaultHomepageProps {
+  className?: string;
+}
+
+const __wrapUserFunction =
+  globalThis.__PlasmicWrapUserFunction ?? ((loc, fn) => fn());
+const __wrapUserPromise =
+  globalThis.__PlasmicWrapUserPromise ??
+  (async (loc, promise) => {
+    return await promise;
+  });
+
+function PlasmicHomepage__RenderFunc(props: {
+  variants: PlasmicHomepage__VariantsArgs;
+  args: PlasmicHomepage__ArgsType;
+  overrides: PlasmicHomepage__OverridesType;
+
+  forNode?: string;
+}) {
+  const { variants, overrides, forNode } = props;
+
+  const $ctx = ph.useDataEnv?.() || {};
+  const args = React.useMemo(() => Object.assign({}, props.args), [props.args]);
+
+  const $props = {
+    ...args,
+    ...variants
+  };
+
+  const currentUser = p.useCurrentUser?.() || {};
+
+  const [$queries, setDollarQueries] = React.useState({});
+
+  const globalVariants = ensureGlobalVariants({
+    screen: useScreenVariantsscBjPxgdxdzbv()
+  });
+
+  return (
+    <React.Fragment>
+      {}
+
+      <div className={projectcss.plasmic_page_wrapper}>
+        <div
+          data-plasmic-name={"root"}
+          data-plasmic-override={overrides.root}
+          data-plasmic-root={true}
+          data-plasmic-for-node={forNode}
+          className={classNames(
+            projectcss.all,
+            projectcss.root_reset,
+            projectcss.plasmic_default_styles,
+            projectcss.plasmic_mixins,
+            sty.root
+          )}
+        >
+          <p.Stack
+            as={"section"}
+            data-plasmic-name={"section"}
+            data-plasmic-override={overrides.section}
+            hasGap={true}
+            className={classNames(projectcss.all, sty.section)}
+          >
+            <h1
+              data-plasmic-name={"h1"}
+              data-plasmic-override={overrides.h1}
+              className={classNames(
+                projectcss.all,
+                projectcss.h1,
+                projectcss.__wab_text,
+                sty.h1
+              )}
+            >
+              {"create-plasmic-app"}
+            </h1>
+
+            <div
+              data-plasmic-name={"text"}
+              data-plasmic-override={overrides.text}
+              className={classNames(
+                projectcss.all,
+                projectcss.__wab_text,
+                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"}
+                    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—do 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—press the "
+                    }
+                  </React.Fragment>
+                  <span
+                    className={"plasmic_default__all plasmic_default__span"}
+                    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>
+              )}
+            </div>
+          </p.Stack>
+        </div>
+      </div>
+    </React.Fragment>
+  ) as React.ReactElement | null;
+}
+
+const PlasmicDescendants = {
+  root: ["root", "section", "h1", "text"],
+  section: ["section", "h1", "text"],
+  h1: ["h1"],
+  text: ["text"]
+} as const;
+type NodeNameType = keyof typeof PlasmicDescendants;
+type DescendantsType<T extends NodeNameType> =
+  (typeof PlasmicDescendants)[T][number];
+type NodeDefaultElementType = {
+  root: "div";
+  section: "section";
+  h1: "h1";
+  text: "div";
+};
+
+type ReservedPropsType = "variants" | "args" | "overrides";
+type NodeOverridesType<T extends NodeNameType> = Pick<
+  PlasmicHomepage__OverridesType,
+  DescendantsType<T>
+>;
+type NodeComponentProps<T extends NodeNameType> =
+  // Explicitly specify variants, args, and overrides as objects
+  {
+    variants?: PlasmicHomepage__VariantsArgs;
+    args?: PlasmicHomepage__ArgsType;
+    overrides?: NodeOverridesType<T>;
+  } & Omit<PlasmicHomepage__VariantsArgs, ReservedPropsType> & // Specify variants directly as props
+    /* Specify args directly as props*/ Omit<
+      PlasmicHomepage__ArgsType,
+      ReservedPropsType
+    > &
+    /* Specify overrides for each element directly as props*/ Omit<
+      NodeOverridesType<T>,
+      ReservedPropsType | VariantPropType | ArgPropType
+    > &
+    /* Specify props for the root element*/ Omit<
+      Partial<React.ComponentProps<NodeDefaultElementType[T]>>,
+      ReservedPropsType | VariantPropType | ArgPropType | DescendantsType<T>
+    >;
+
+function makeNodeComponent<NodeName extends NodeNameType>(nodeName: NodeName) {
+  type PropsType = NodeComponentProps<NodeName> & { key?: React.Key };
+  const func = function <T extends PropsType>(
+    props: T & StrictProps<T, PropsType>
+  ) {
+    const { variants, args, overrides } = React.useMemo(
+      () =>
+        deriveRenderOpts(props, {
+          name: nodeName,
+          descendantNames: [...PlasmicDescendants[nodeName]],
+          internalArgPropNames: PlasmicHomepage__ArgProps,
+          internalVariantPropNames: PlasmicHomepage__VariantProps
+        }),
+      [props, nodeName]
+    );
+
+    return PlasmicHomepage__RenderFunc({
+      variants,
+      args,
+      overrides,
+      forNode: nodeName
+    });
+  };
+  if (nodeName === "root") {
+    func.displayName = "PlasmicHomepage";
+  } else {
+    func.displayName = `PlasmicHomepage.${nodeName}`;
+  }
+  return func;
+}
+
+export const PlasmicHomepage = Object.assign(
+  // Top-level PlasmicHomepage renders the root element
+  makeNodeComponent("root"),
+  {
+    // Helper components rendering sub-elements
+    section: makeNodeComponent("section"),
+    h1: makeNodeComponent("h1"),
+    text: makeNodeComponent("text"),
+
+    // Metadata about props expected for PlasmicHomepage
+    internalVariantProps: PlasmicHomepage__VariantProps,
+    internalArgProps: PlasmicHomepage__ArgProps,
+
+    // Page metadata
+    pageMetadata: {
+      title: "",
+      description: "",
+      ogImageSrc: "",
+      canonical: ""
+    }
+  }
+);
+
+export default PlasmicHomepage;
+/* prettier-ignore-end */

package/cpa-out/react-loader-ts/src/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
+  
+    <App />
+  
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

package/cpa-out/react-loader-ts/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

package/cpa-out/react-loader-ts/src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

package/cpa-out/react-loader-ts/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

package/cpa-out/react-loader-ts/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}

package/dist/gatsby/gatsby.d.ts

@@ -0,0 +1,6 @@
+import { CPAStrategy } from "../utils/strategy";
+export declare const GATSBY_TEMPLATES: {
+    js: string;
+    ts: string;
+};
+export declare const gatsbyStrategy: CPAStrategy;

package/dist/{strategies → gatsby}/gatsby.js

@@ -42,38 +42,38 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.GATSBY_TEMPLATES = void 0;
+exports.gatsbyStrategy = exports.GATSBY_TEMPLATES = void 0;
 const fs_1 = require("fs");
 const path_1 = __importDefault(require("path"));
 const readline = __importStar(require("readline"));
-const gatsby_1 = require("../templates/gatsby");
 const cmd_utils_1 = require("../utils/cmd-utils");
+const codegen_1 = require("../utils/codegen");
 const file_utils_1 = require("../utils/file-utils");
 const lang_utils_1 = require("../utils/lang-utils");
 const npm_utils_1 = require("../utils/npm-utils");
-const common_1 = require("./common");
+const template_1 = require("./template");
 exports.GATSBY_TEMPLATES = {
     js: `https://github.com/gatsbyjs/gatsby-starter-minimal.git`,
     ts: `https://github.com/gatsbyjs/gatsby-starter-minimal-ts.git`,
 };
-const gatsbyStrategy = {
+exports.gatsbyStrategy = {
     create: (args) => __awaiter(void 0, void 0, void 0, function* () {
-        const { projectPath, template, useTypescript } = args;
+        const { projectPath, template, jsOrTs } = args;
         if (template) {
             console.log(`Warning: Ignoring template '${template}' (argument is not supported by Gatsby).`);
         }
-        const gatsbyTemplate = exports.GATSBY_TEMPLATES[useTypescript ? "ts" : "js"];
+        const gatsbyTemplate = exports.GATSBY_TEMPLATES[jsOrTs];
         const createCommand = `git clone ${gatsbyTemplate} ${projectPath} --recursive --depth 1 --quiet`;
         yield (0, cmd_utils_1.spawnOrFail)(`${createCommand}`);
         // Remove .git and LICENSE so that we don't generate linked outputs
         yield (0, cmd_utils_1.spawnOrFail)(`rm -rf ${projectPath}/.git`);
         yield (0, cmd_utils_1.spawnOrFail)(`rm -rf ${projectPath}/LICENSE`);
     }),
-    installDeps: ({ projectPath, scheme, useTypescript }) => __awaiter(void 0, void 0, void 0, function* () {
+    installDeps: ({ projectPath, scheme, jsOrTs }) => __awaiter(void 0, void 0, void 0, function* () {
         const installedHelmet = yield (0, npm_utils_1.installUpgrade)("react-helmet", {
             workingDir: projectPath,
         });
-        const installedHelmetTypes = !useTypescript ||
+        const installedHelmetTypes = jsOrTs === "js" ||
             (yield (0, npm_utils_1.installUpgrade)("@types/react-helmet", {
                 workingDir: projectPath,
                 dev: true,
@@ -90,13 +90,12 @@ const gatsbyStrategy = {
             });
         }
         else {
-            return yield (0, common_1.installCodegenDeps)({ projectPath });
+            return yield (0, codegen_1.installCodegenDeps)({ projectPath });
         }
     }),
     overwriteConfig: (args) => __awaiter(void 0, void 0, void 0, function* () {
         var _a, e_1, _b, _c;
-        const { projectId, projectPath, projectApiToken, useTypescript, scheme, } = args;
-        const extension = useTypescript ? "ts" : "js";
+        const { projectId, projectPath, projectApiToken, jsOrTs, scheme } = args;
         const packageName = path_1.default.basename(projectPath);
         // Update package.json: adding name and description, removing license and author
         const packageJsonPath = path_1.default.join(projectPath, "package.json");
@@ -109,15 +108,15 @@ const gatsbyStrategy = {
         yield fs_1.promises.writeFile(packageJsonPath, JSON.stringify(packageJsonObject, null, 2));
         if (scheme === "loader") {
             // create-gatsby will create a default gatsby-config that we need to modify
-            const gatsbyConfigFile = path_1.default.join(projectPath, `gatsby-config.${extension}`);
+            const gatsbyConfigFile = path_1.default.join(projectPath, `gatsby-config.${jsOrTs}`);
             const rl = readline.createInterface({
                 input: (0, fs_1.createReadStream)(gatsbyConfigFile),
                 crlfDelay: Infinity,
             });
             // Typescript doesn't accept require.resolve
             // https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/#requireresolve
-            let result = useTypescript ? `import path from "path";\n` : "";
-            const pluginConfig = (0, gatsby_1.GATSBY_PLUGIN_CONFIG)(projectId, (0, lang_utils_1.ensure)(projectApiToken), useTypescript);
+            let result = (0, file_utils_1.ifTs)(jsOrTs, `import path from "path";\n`);
+            const pluginConfig = (0, template_1.GATSBY_PLUGIN_CONFIG)(projectId, (0, lang_utils_1.ensure)(projectApiToken), jsOrTs);
             try {
                 for (var _d = true, rl_1 = __asyncValues(rl), rl_1_1; rl_1_1 = yield rl_1.next(), _a = rl_1_1.done, !_a;) {
                     _c = rl_1_1.value;
@@ -152,31 +151,30 @@ const gatsbyStrategy = {
     generateFiles: (args) => __awaiter(void 0, void 0, void 0, function* () {
         // in gatsby we can delete all existing pages/components, since all pages are going
         // to be handled by templates/defaultPlasmicPage
-        const { projectId, projectApiToken, projectPath, useTypescript, scheme, } = args;
-        const extension = useTypescript ? "ts" : "js";
+        const { projectId, projectApiToken, projectPath, jsOrTs, scheme } = args;
         (0, file_utils_1.deleteGlob)(path_1.default.join(projectPath, "src/@(pages|components|templates)/*.*"));
         // Create a very basic 404 page - `gatsby build` fails without it.
-        yield fs_1.promises.writeFile(path_1.default.join(projectPath, `src/pages/404.${extension}`), gatsby_1.GATSBY_404);
+        yield fs_1.promises.writeFile(path_1.default.join(projectPath, `src/pages/404.${jsOrTs}`), template_1.GATSBY_404);
         // Add plasmic-host page
-        yield fs_1.promises.writeFile(path_1.default.join(projectPath, `src/pages/plasmic-host.${extension}x`), (0, gatsby_1.makeGatsbyHostPage)({
-            useTypescript,
+        yield fs_1.promises.writeFile(path_1.default.join(projectPath, `src/pages/plasmic-host.${jsOrTs}x`), (0, template_1.makeGatsbyHostPage)({
+            jsOrTs,
             scheme,
         }));
         // Start with an empty gatsby-node
-        yield fs_1.promises.writeFile(path_1.default.join(projectPath, `gatsby-node.${extension}`), "");
+        yield fs_1.promises.writeFile(path_1.default.join(projectPath, `gatsby-node.${jsOrTs}`), "");
         // Updates `gatsby-ssr` to include script tag for preamble
-        yield fs_1.promises.writeFile(path_1.default.join(projectPath, `gatsby-ssr.${extension}x`), gatsby_1.GATSBY_SSR_CONFIG);
+        yield fs_1.promises.writeFile(path_1.default.join(projectPath, `gatsby-ssr.${jsOrTs}x`), template_1.GATSBY_SSR_CONFIG);
         if (scheme === "loader") {
-            yield fs_1.promises.writeFile(path_1.default.join(projectPath, `src/plasmic-init.${extension}`), (0, gatsby_1.makeGatsbyPlasmicInit)(extension));
+            yield fs_1.promises.writeFile(path_1.default.join(projectPath, `src/plasmic-init.${jsOrTs}`), (0, template_1.makeGatsbyPlasmicInit)(jsOrTs));
             const templatesFolder = path_1.default.join(projectPath, "src/templates");
             if (!(0, fs_1.existsSync)(templatesFolder)) {
                 yield fs_1.promises.mkdir(templatesFolder);
             }
-            const defaultPagePath = path_1.default.join(templatesFolder, `defaultPlasmicPage.${extension}x`);
-            yield fs_1.promises.writeFile(defaultPagePath, (0, gatsby_1.makeGatsbyDefaultPage)(extension));
+            const defaultPagePath = path_1.default.join(templatesFolder, `defaultPlasmicPage.${jsOrTs}x`);
+            yield fs_1.promises.writeFile(defaultPagePath, (0, template_1.makeGatsbyDefaultPage)(jsOrTs));
         }
         else {
-            yield (0, common_1.runCodegenSync)({
+            yield (0, codegen_1.runCodegenSync)({
                 projectId,
                 projectApiToken,
                 projectPath,
@@ -184,10 +182,10 @@ const gatsbyStrategy = {
             // Overwrite the index file
             yield (0, file_utils_1.overwriteIndex)(projectPath, "gatsby", scheme);
             // Overwrite the wrapper files to wrap PlasmicRootProvider
-            const wrapperContent = (0, gatsby_1.wrapAppRootForCodegen)();
-            const browserFilePath = path_1.default.join(projectPath, `gatsby-browser.${extension}x`);
+            const wrapperContent = (0, template_1.wrapAppRootForCodegen)();
+            const browserFilePath = path_1.default.join(projectPath, `gatsby-browser.${jsOrTs}x`);
             yield fs_1.promises.writeFile(browserFilePath, wrapperContent);
-            const ssrFilePath = path_1.default.join(projectPath, `gatsby-ssr.${extension}x`);
+            const ssrFilePath = path_1.default.join(projectPath, `gatsby-ssr.${jsOrTs}x`);
             yield fs_1.promises.writeFile(ssrFilePath, wrapperContent);
         }
     }),
@@ -200,4 +198,3 @@ const gatsbyStrategy = {
         yield (0, cmd_utils_1.spawnOrFail)(`${npmRunCmd} build`, projectPath);
     }),
 };
-exports.default = gatsbyStrategy;

package/dist/gatsby/template.d.ts

@@ -0,0 +1,11 @@
+import { JsOrTs, SchemeType } from "../utils/types";
+export declare function makeGatsbyDefaultPage(jsOrTs: JsOrTs): string;
+export declare const GATSBY_404 = "const NotFound = () => {\n  return \"Not Found\";\n};\nexport default NotFound;\n";
+export declare function GATSBY_PLUGIN_CONFIG(projectId: string, projectApiToken: string, jsOrTs: JsOrTs): string;
+export declare function makeGatsbyHostPage(opts: {
+    jsOrTs: JsOrTs;
+    scheme: SchemeType;
+}): string;
+export declare const GATSBY_SSR_CONFIG = "/**\n * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.\n *\n * See: https://www.gatsbyjs.com/docs/ssr-apis/\n */\n\nconst React = require(\"react\")\n\nconst HeadComponents = [\n  <script\n    key=\"plasmic-hmr\"\n    type=\"text/javascript\"\n    dangerouslySetInnerHTML={{\n      __html: `\n        if (typeof window !== \"undefined\" && /\\\\/plasmic-host\\\\/?$/.test(window.location.pathname)) {\n          const RealEventSource = window.EventSource;\n          window.EventSource = function(url, config) {\n            if (/[^a-zA-Z]hmr($|[^a-zA-Z])/.test(url)) {\n              console.warn(\"Plasmic: disabled EventSource request for\", url);\n              return {\n                onerror() {}, onmessage() {}, onopen() {}, close() {}\n              };\n            } else {\n              return new RealEventSource(url, config);\n            }\n          }\n        }\n      `,\n    }}\n  />\n]\n\nconst isProduction = process.env.NODE_ENV === \"production\"\n\nexports.onRenderBody = ({ pathname, setHeadComponents }) => {\n  /**\n   * We add the preamble tag script to all pages during development mode\n   * because during development all pages are dynamically rendered based\n   * on `/` route, during production we add it only in `/plasmic-host/`\n   */\n  if (!isProduction || pathname === \"/plasmic-host/\") {\n    setHeadComponents(HeadComponents)\n  }\n}\n";
+export declare function makeGatsbyPlasmicInit(jsOrTs: JsOrTs): string;
+export declare function wrapAppRootForCodegen(): string;