npm - create-plasmic-app - Versions diffs - 0.0.62 → 0.0.64 - Mend

create-plasmic-app 0.0.62 → 0.0.64

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (209) hide show

package/cpa-out/nextjs-pages-codegen-ts/components/plasmic/create_plasmic_app/PlasmicHomepage.tsx ADDED Viewed

@@ -0,0 +1,287 @@
+// @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 Head from "next/head";
+import Link, { LinkProps } from "next/link";
+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 {}
+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>
+      <Head></Head>
+      <style>{`
+        body {
+          margin: 0;
+        }
+      `}</style>
+      <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/nextjs-pages-codegen-ts/next.config.js ADDED Viewed

@@ -0,0 +1,10 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  trailingSlash: true,
+};
+module.exports = nextConfig;

package/cpa-out/nextjs-pages-codegen-ts/package.json ADDED Viewed

@@ -0,0 +1,26 @@
+{
+  "name": "nextjs-pages-codegen-ts",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@next/font": "13.1.6",
+    "@plasmicapp/cli": "^0.1.205",
+    "@plasmicapp/host": "^1.0.100",
+    "@plasmicapp/react-web": "^0.2.150",
+    "@types/node": "18.11.18",
+    "@types/react": "18.0.27",
+    "@types/react-dom": "18.0.10",
+    "eslint": "8.33.0",
+    "eslint-config-next": "13.1.6",
+    "next": "13.1.6",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "typescript": "4.9.5"
+  }
+}

package/cpa-out/nextjs-pages-codegen-ts/pages/_app.tsx ADDED Viewed

@@ -0,0 +1,12 @@
+import 'styles/globals.css'
+import { PlasmicRootProvider } from "@plasmicapp/react-web";
+import type { AppProps } from "next/app";
+import Head from "next/head";
+export default function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <PlasmicRootProvider Head={Head}>
+      <Component {...pageProps} />
+    </PlasmicRootProvider>
+  );
+}

package/cpa-out/nextjs-pages-codegen-ts/pages/api/hello.ts ADDED Viewed

@@ -0,0 +1,13 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next'
+type Data = {
+  name: string
+}
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  res.status(200).json({ name: 'John Doe' })
+}

package/cpa-out/nextjs-pages-codegen-ts/pages/index.tsx ADDED Viewed

@@ -0,0 +1,37 @@
+// This is a skeleton starter React page generated by Plasmic.
+// This file is owned by you, feel free to edit as you see fit.
+import * as React from "react";
+import * as ph from "@plasmicapp/host";
+import { ScreenVariantProvider } from "../components/plasmic/create_plasmic_app/PlasmicGlobalVariant__Screen";
+import { PlasmicHomepage } from "../components/plasmic/create_plasmic_app/PlasmicHomepage";
+import { useRouter } from "next/router";
+function Homepage() {
+  // Use PlasmicHomepage to render this component as it was
+  // designed in Plasmic, by activating the appropriate variants,
+  // attaching the appropriate event handlers, etc.  You
+  // can also install whatever React hooks you need here to manage state or
+  // fetch data.
+  //
+  // Props you can pass into PlasmicHomepage are:
+  // 1. Variants you want to activate,
+  // 2. Contents for slots you want to fill,
+  // 3. Overrides for any named node in the component to attach behavior and data,
+  // 4. Props to set on the root node.
+  //
+  // By default, PlasmicHomepage is wrapped by your project's global
+  // variant context providers. These wrappers may be moved to
+  // Next.js Custom App component
+  // (https://nextjs.org/docs/advanced-features/custom-app).
+  return (
+    <ph.PageParamsProvider
+      params={useRouter()?.query}
+      query={useRouter()?.query}
+    >
+      <PlasmicHomepage />
+    </ph.PageParamsProvider>
+  );
+}
+export default Homepage;

package/cpa-out/nextjs-pages-codegen-ts/pages/plasmic-host.tsx ADDED Viewed

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { PlasmicCanvasHost, registerComponent } from '@plasmicapp/host';
+// You can register any code components that you want to use here; see
+// https://docs.plasmic.app/learn/code-components-ref/
+// And configure your Plasmic project to use the host url pointing at
+// the /plasmic-host page of your nextjs app (for example,
+// http://localhost:3000/plasmic-host).  See
+// https://docs.plasmic.app/learn/app-hosting/#set-a-plasmic-project-to-use-your-app-host
+// registerComponent(...)
+export default function PlasmicHost() {
+  return <PlasmicCanvasHost />;
+}

package/cpa-out/nextjs-pages-codegen-ts/plasmic.json ADDED Viewed

@@ -0,0 +1,79 @@
+{
+  "platform": "nextjs",
+  "code": {
+    "lang": "ts",
+    "scheme": "blackbox",
+    "reactRuntime": "classic"
+  },
+  "style": {
+    "scheme": "css-modules",
+    "defaultStyleCssFilePath": "plasmic/plasmic__default_style.css"
+  },
+  "images": {
+    "scheme": "public-files",
+    "publicDir": "../public",
+    "publicUrlPrefix": "/"
+  },
+  "tokens": {
+    "scheme": "theo",
+    "tokensFilePath": "plasmic-tokens.theo.json"
+  },
+  "srcDir": "components",
+  "defaultPlasmicDir": "./plasmic",
+  "projects": [
+    {
+      "projectId": "47tFXWjN2C4NyHFGGpaYQ3",
+      "projectApiToken": "7BRFratDxPLMGZHnd2grV5QP6mlHcZ1AK3BJSIeh7xzUlHgWh25XpgXvUaKAqHXFMXQQuzpADqboibF6nqNWQ",
+      "projectName": "create-plasmic-app",
+      "version": "latest",
+      "cssFilePath": "plasmic/create_plasmic_app/plasmic_create_plasmic_app.module.css",
+      "components": [
+        {
+          "id": "6uuAAE1jiCew",
+          "name": "Homepage",
+          "type": "managed",
+          "projectId": "47tFXWjN2C4NyHFGGpaYQ3",
+          "renderModuleFilePath": "plasmic/create_plasmic_app/PlasmicHomepage.tsx",
+          "importSpec": {
+            "modulePath": "../pages/index.tsx"
+          },
+          "cssFilePath": "plasmic/create_plasmic_app/PlasmicHomepage.module.css",
+          "scheme": "blackbox",
+          "componentType": "page"
+        }
+      ],
+      "icons": [],
+      "images": [],
+      "indirect": false,
+      "globalContextsFilePath": "",
+      "codeComponents": [
+        {
+          "id": "P6aGdYWZ2R",
+          "name": "PlasmicHead",
+          "componentImportPath": "@plasmicapp/react-web"
+        },
+        {
+          "id": "8G2A-uTjGa",
+          "name": "Fetcher",
+          "componentImportPath": "@plasmicapp/react-web/lib/data-sources"
+        }
+      ]
+    }
+  ],
+  "globalVariants": {
+    "variantGroups": [
+      {
+        "id": "SCBjPXGDXDZBV",
+        "name": "Screen",
+        "projectId": "47tFXWjN2C4NyHFGGpaYQ3",
+        "contextFilePath": "plasmic/create_plasmic_app/PlasmicGlobalVariant__Screen.tsx"
+      }
+    ]
+  },
+  "wrapPagesWithGlobalContexts": true,
+  "nextjsConfig": {
+    "pagesDir": "../pages"
+  },
+  "cliVersion": "0.1.205",
+  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.205/dist/plasmic.schema.json"
+}

package/cpa-out/nextjs-pages-codegen-ts/tsconfig.json ADDED Viewed

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

package/cpa-out/nextjs-pages-loader-js/next.config.js ADDED Viewed

@@ -0,0 +1,10 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // Turn off React StrictMode for now, as react-aria (used by Plasmic)
+  // has some troubles with it. See
+  // https://github.com/adobe/react-spectrum/labels/strict%20mode
+  reactStrictMode: false,
+};
+module.exports = nextConfig;

package/cpa-out/nextjs-pages-loader-js/package.json ADDED Viewed

@@ -0,0 +1,20 @@
+{
+  "name": "nextjs-pages-loader-js",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@next/font": "13.1.6",
+    "@plasmicapp/loader-nextjs": "^1.0.224",
+    "eslint": "8.33.0",
+    "eslint-config-next": "13.1.6",
+    "next": "13.1.6",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  }
+}

package/cpa-out/nextjs-pages-loader-js/pages/[[...catchall]].jsx ADDED Viewed

@@ -0,0 +1,66 @@
+import * as React from "react";
+import {
+  PlasmicComponent,
+  extractPlasmicQueryData,
+  ComponentRenderData,
+  PlasmicRootProvider,
+} from "@plasmicapp/loader-nextjs";
+import Error from "next/error";
+import { useRouter } from "next/router";
+import { PLASMIC } from "plasmic-init";
+export default function PlasmicLoaderPage(props) {
+  const { plasmicData, queryCache } = props;
+  const router = useRouter();
+  if (!plasmicData || plasmicData.entryCompMetas.length === 0) {
+    return <Error statusCode={404} />;
+  }
+  const pageMeta = plasmicData.entryCompMetas[0];
+  return (
+    <PlasmicRootProvider
+      loader={PLASMIC}
+      prefetchedData={plasmicData}
+      prefetchedQueryData={queryCache}
+      pageParams={pageMeta.params}
+      pageQuery={router.query}
+    >
+      <PlasmicComponent component={pageMeta.displayName} />
+    </PlasmicRootProvider>
+  );
+}
+export const getStaticProps = async (context) => {
+  const { catchall } = context.params ?? {};
+  const plasmicPath = typeof catchall === 'string' ? catchall : Array.isArray(catchall) ? `/${catchall.join('/')}` : '/';
+  const plasmicData = await PLASMIC.maybeFetchComponentData(plasmicPath);
+  if (!plasmicData) {
+    // non-Plasmic catch-all
+    return { props: {} };
+  }
+  const pageMeta = plasmicData.entryCompMetas[0];
+  // Cache the necessary data fetched for the page
+  const queryCache = await extractPlasmicQueryData(
+    <PlasmicRootProvider
+      loader={PLASMIC}
+      prefetchedData={plasmicData}
+      pageParams={pageMeta.params}
+    >
+      <PlasmicComponent component={pageMeta.displayName} />
+    </PlasmicRootProvider>
+  );
+  // Use revalidate if you want incremental static regeneration
+  return { props: { plasmicData, queryCache }, revalidate: 60 };
+}
+export const getStaticPaths = async () => {
+  const pageModules = await PLASMIC.fetchPages();
+  return {
+    paths: pageModules.map((mod) => ({
+      params: {
+        catchall: mod.path.substring(1).split("/"),
+      },
+    })),
+    fallback: "blocking",
+  };
+}

package/cpa-out/nextjs-pages-loader-js/pages/api/hello.js ADDED Viewed

@@ -0,0 +1,5 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+export default function handler(req, res) {
+  res.status(200).json({ name: 'John Doe' })
+}

package/cpa-out/nextjs-pages-loader-js/pages/plasmic-host.jsx ADDED Viewed

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { PlasmicCanvasHost } from '@plasmicapp/loader-nextjs';
+import { PLASMIC } from 'plasmic-init';
+export default function PlasmicHost() {
+  return PLASMIC && <PlasmicCanvasHost />;
+}

package/cpa-out/nextjs-pages-loader-js/plasmic-init.js ADDED Viewed

@@ -0,0 +1,25 @@
+import { initPlasmicLoader } from "@plasmicapp/loader-nextjs";
+export const PLASMIC = initPlasmicLoader({
+  projects: [
+    {
+      id: "47tFXWjN2C4NyHFGGpaYQ3",
+      token: "7BRFratDxPLMGZHnd2grV5QP6mlHcZ1AK3BJSIeh7xzUlHgWh25XpgXvUaKAqHXFMXQQuzpADqboibF6nqNWQ",
+    },
+  ],
+  // By default Plasmic will use the last published version of your project.
+  // For development, you can set preview to true, which will use the unpublished
+  // project, allowing you to see your designs without publishing.  Please
+  // only use this for development, as this is significantly slower.
+  preview: false,
+});
+// You can register any code components that you want to use here; see
+// https://docs.plasmic.app/learn/code-components-ref/
+// And configure your Plasmic project to use the host url pointing at
+// the /plasmic-host page of your nextjs app (for example,
+// http://localhost:3000/plasmic-host).  See
+// https://docs.plasmic.app/learn/app-hosting/#set-a-plasmic-project-to-use-your-app-host
+// PLASMIC.registerComponent(...);

package/cpa-out/nextjs-pages-loader-ts/next.config.js ADDED Viewed

@@ -0,0 +1,10 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // Turn off React StrictMode for now, as react-aria (used by Plasmic)
+  // has some troubles with it. See
+  // https://github.com/adobe/react-spectrum/labels/strict%20mode
+  reactStrictMode: false,
+};
+module.exports = nextConfig;