npm - create-plasmic-app - Versions diffs - 0.0.142 → 0.0.144 - Mend

create-plasmic-app 0.0.142 → 0.0.144

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 (87) hide show

package/dist/tanstack/tanstack.js CHANGED Viewed

@@ -38,7 +38,17 @@ exports.tanstackStrategy = {
         const projectName = path_1.default.basename(fullProjectPath);
         const parentDir = path_1.default.dirname(fullProjectPath);
         process.chdir(parentDir);
-        const createCommand = `npx create-tsrouter-app@latest ${projectName} --template file-router --add-ons start`;
+        const createCommand = [
+            `npx create-tsrouter-app@latest ${projectName}`,
+            "--framework React",
+            "--router-only",
+            "--no-toolchain",
+            "--package-manager yarn",
+            "--git",
+            "--no-intent",
+            "--no-examples",
+            "--yes",
+        ].join(" ");
         yield (0, cmd_utils_1.spawnOrFail)(createCommand);
         // Install peer-dep of @tanstack/react-router-with-query
         yield (0, npm_utils_1.installUpgrade)("@tanstack/react-query", {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "create-plasmic-app",
-  "version": "0.0.142",
+  "version": "0.0.144",
   "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": "f110feb3414bdfdcbd84167e91a951f8dcd4dd60"
+  "gitHead": "94026327bd519c5a334ca974ef9d6d3d12855f25"
 }

package/src/nextjs/nextjs.ts CHANGED Viewed

@@ -12,6 +12,7 @@ import { ensure } from "../utils/lang-utils";
 import { installUpgrade } from "../utils/npm-utils";
 import { CPAStrategy, GenerateFilesArgs } from "../utils/strategy";
 import { makeLayout_app_codegen } from "./templates/app-codegen/layout";
+import { makePlasmicInitClient_app_codegen } from "./templates/app-codegen/plasmic-init-client";
 import { makeCatchallPage_app_loader } from "./templates/app-loader/catchall-page";
 import { makePlasmicHostPage_app_loader } from "./templates/app-loader/plasmic-host";
 import { makePlasmicInit_app_loader } from "./templates/app-loader/plasmic-init";
@@ -117,12 +118,21 @@ async function generateFilesAppDir(args: GenerateFilesArgs) {
       makeCatchallPage_app_loader(jsOrTs)
     );
   } else {
+    // Replace starter layout. Removes app/layout.js in JS projects before writing layout.jsx.
+    deleteGlob(path.join(projectPath, "app", "layout.*"));
     // ./app/layout.tsx
     await fs.writeFile(
       path.join(projectPath, "app", `layout.${jsOrTs}x`),
       makeLayout_app_codegen(jsOrTs)
     );
+    // ./plasmic-init-client.tsx
+    await fs.writeFile(
+      path.join(projectPath, `plasmic-init-client.${jsOrTs}x`),
+      makePlasmicInitClient_app_codegen(jsOrTs)
+    );
     // ./app/plasmic-host/page.tsx
     await fs.mkdir(path.join(projectPath, "app", "plasmic-host"));
     await fs.writeFile(

package/src/nextjs/templates/app-codegen/layout.ts CHANGED Viewed

@@ -3,8 +3,7 @@ import { JsOrTs } from "../../../utils/types";
 export function makeLayout_app_codegen(jsOrTs: JsOrTs): string {
   return `import '@/app/globals.css'
-import { PlasmicRootProvider } from "@plasmicapp/react-web";
-import Link from "next/link";
+import { ClientPlasmicRootProvider } from "@/plasmic-init-client";
 export default function RootLayout({
   children,
@@ -17,9 +16,9 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body>
-        <PlasmicRootProvider Link={Link}>
+        <ClientPlasmicRootProvider>
           {children}
-        </PlasmicRootProvider>
+        </ClientPlasmicRootProvider>
       </body>
     </html>
   );

package/src/nextjs/templates/app-codegen/plasmic-init-client.ts ADDED Viewed

@@ -0,0 +1,28 @@
+import { ifTs } from "../../../utils/file-utils";
+import { JsOrTs } from "../../../utils/types";
+export function makePlasmicInitClient_app_codegen(jsOrTs: JsOrTs): string {
+  return `"use client";
+${ifTs(
+  jsOrTs,
+  'import type * as React from "react";\n'
+)}import { PlasmicRootProvider } from "@plasmicapp/react-web";
+import Link from "next/link";
+/**
+ * ClientPlasmicRootProvider is a Client Component that passes Next's Link to PlasmicRootProvider.
+ *
+ * Props passed from a Server Component to a Client Component must be serializable.
+ * https://nextjs.org/docs/app/getting-started/server-and-client-components#passing-data-from-server-to-client-components
+ */
+export function ClientPlasmicRootProvider(
+  props${ifTs(
+    jsOrTs,
+    ': Omit<React.ComponentProps<typeof PlasmicRootProvider>, "Link">'
+  )}
+) {
+  return <PlasmicRootProvider Link={Link} {...props} />;
+}
+`;
+}

package/src/nextjs/templates/app-loader/plasmic-init-client.ts CHANGED Viewed

@@ -17,48 +17,10 @@ import { PLASMIC } from "@/plasmic-init";
 // PLASMIC.registerComponent(...);
 /**
- * ClientPlasmicRootProvider is a Client Component that passes in the loader for you.
+ * ClientPlasmicRootProvider is a Client Component that passes the loader to PlasmicRootProvider.
  *
- * Why? Props passed from Server to Client Components must be serializable.
+ * Props passed from a Server Component to a Client Component must be serializable.
  * https://nextjs.org/docs/app/getting-started/server-and-client-components#passing-data-from-server-to-client-components
- * However, PlasmicRootProvider requires a loader, but the loader is NOT serializable.
- *
- * In a Server Component like app/<your-path>/path.tsx, rendering the following would not work:
- *
- * \`\`\`tsx
- * import { PLASMIC } from "@/plasmic-init";
- * import { PlasmicRootProvider } from "plasmicapp/loader-nextjs";
- * export default function MyPage() {
- *   const prefetchedData = await PLASMIC.fetchComponentData("YourPage");
- *   return (
- *     <PlasmicRootProvider
- *       loader={PLASMIC} // ERROR: loader is not serializable
- *       prefetchedData={prefetchedData}
- *     >
- *       {yourContent()}
- *     </PlasmicRootProvider>;
- *   );
- * }
- * \`\`\`
- *
- * Therefore, we define ClientPlasmicRootProvider as a Client Component (this file is marked "use client").
- * ClientPlasmicRootProvider wraps the PlasmicRootProvider and passes in the loader for you,
- * while allowing your Server Component to pass in prefetched data and other serializable props:
- *
- * \`\`\`tsx
- * import { PLASMIC } from "@/plasmic-init";
- * import { ClientPlasmicRootProvider } from "@/plasmic-init-client"; // changed
- * export default function MyPage() {
- *   const prefetchedData = await PLASMIC.fetchComponentData("YourPage");
- *   return (
- *     <ClientPlasmicRootProvider // don't pass in loader
- *       prefetchedData={prefetchedData}
- *     >
- *       {yourContent()}
- *     </ClientPlasmicRootProvider>;
- *   );
- * }
- * \`\`\`
  */
 export function ClientPlasmicRootProvider(
   props${ifTs(

package/src/nextjs/templates/app-loader/plasmic-init.ts CHANGED Viewed

@@ -27,11 +27,6 @@ export const PLASMIC = initPlasmicLoader({
 // Register custom functions here so they are available during SSR.
 // See https://docs.plasmic.app/learn/registering-custom-functions/
 //
-// IMPORTANT for app-router projects: any custom function used by a server
-// query must be registered here, which runs on the server.  Registrations in
-// plasmic-init-client.tsx are only available in the browser and will cause
-// a runtime error if referenced by a server query during SSR.
-//
 // PLASMIC.registerFunction(...);
 `;
 }

package/src/tanstack/tanstack.ts CHANGED Viewed

@@ -29,7 +29,17 @@ export const tanstackStrategy: CPAStrategy = {
     const parentDir = path.dirname(fullProjectPath);
     process.chdir(parentDir);
-    const createCommand = `npx create-tsrouter-app@latest ${projectName} --template file-router --add-ons start`;
+    const createCommand = [
+      `npx create-tsrouter-app@latest ${projectName}`,
+      "--framework React",
+      "--router-only",
+      "--no-toolchain",
+      "--package-manager yarn",
+      "--git",
+      "--no-intent",
+      "--no-examples",
+      "--yes",
+    ].join(" ");
     await spawnOrFail(createCommand);

package/cpa-out/nextjs-app-codegen-js/app/layout.js DELETED Viewed

@@ -1,28 +0,0 @@
-import localFont from "next/font/local";
-import "./globals.css";
-const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
-  weight: "100 900",
-});
-const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
-  weight: "100 900",
-});
-export const metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
-export default function RootLayout({ children }) {
-  return (
-    <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable}`}>
-        {children}
-      </body>
-    </html>
-  );
-}

package/cpa-out/tanstack-codegen-ts/src/components/Footer.tsx DELETED Viewed

@@ -1,44 +0,0 @@
-export default function Footer() {
-  const year = new Date().getFullYear()
-  return (
-    <footer className="mt-20 border-t border-[var(--line)] px-4 pb-14 pt-10 text-[var(--sea-ink-soft)]">
-      <div className="page-wrap flex flex-col items-center justify-between gap-4 text-center sm:flex-row sm:text-left">
-        <p className="m-0 text-sm">
-          &copy; {year} Your name here. All rights reserved.
-        </p>
-        <p className="island-kicker m-0">Built with TanStack Start</p>
-      </div>
-      <div className="mt-4 flex justify-center gap-4">
-        <a
-          href="https://x.com/tan_stack"
-          target="_blank"
-          rel="noreferrer"
-          className="rounded-xl p-2 text-[var(--sea-ink-soft)] transition hover:bg-[var(--link-bg-hover)] hover:text-[var(--sea-ink)]"
-        >
-          <span className="sr-only">Follow TanStack on X</span>
-          <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32">
-            <path
-              fill="currentColor"
-              d="M12.6 1h2.2L10 6.48 15.64 15h-4.41L7.78 9.82 3.23 15H1l5.14-5.84L.72 1h4.52l3.12 4.73L12.6 1zm-.77 12.67h1.22L4.57 2.26H3.26l8.57 11.41z"
-            />
-          </svg>
-        </a>
-        <a
-          href="https://github.com/TanStack"
-          target="_blank"
-          rel="noreferrer"
-          className="rounded-xl p-2 text-[var(--sea-ink-soft)] transition hover:bg-[var(--link-bg-hover)] hover:text-[var(--sea-ink)]"
-        >
-          <span className="sr-only">Go to TanStack GitHub</span>
-          <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32">
-            <path
-              fill="currentColor"
-              d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
-            />
-          </svg>
-        </a>
-      </div>
-    </footer>
-  )
-}

package/cpa-out/tanstack-codegen-ts/src/components/Header.tsx DELETED Viewed

@@ -1,78 +0,0 @@
-import { Link } from '@tanstack/react-router'
-import ThemeToggle from './ThemeToggle'
-export default function Header() {
-  return (
-    <header className="sticky top-0 z-50 border-b border-[var(--line)] bg-[var(--header-bg)] px-4 backdrop-blur-lg">
-      <nav className="page-wrap flex flex-wrap items-center gap-x-3 gap-y-2 py-3 sm:py-4">
-        <h2 className="m-0 flex-shrink-0 text-base font-semibold tracking-tight">
-          <Link
-            to="/"
-            className="inline-flex items-center gap-2 rounded-full border border-[var(--chip-line)] bg-[var(--chip-bg)] px-3 py-1.5 text-sm text-[var(--sea-ink)] no-underline shadow-[0_8px_24px_rgba(30,90,72,0.08)] sm:px-4 sm:py-2"
-          >
-            <span className="h-2 w-2 rounded-full bg-[linear-gradient(90deg,#56c6be,#7ed3bf)]" />
-            TanStack Start
-          </Link>
-        </h2>
-        <div className="ml-auto flex items-center gap-1.5 sm:ml-0 sm:gap-2">
-          <a
-            href="https://x.com/tan_stack"
-            target="_blank"
-            rel="noreferrer"
-            className="hidden rounded-xl p-2 text-[var(--sea-ink-soft)] transition hover:bg-[var(--link-bg-hover)] hover:text-[var(--sea-ink)] sm:block"
-          >
-            <span className="sr-only">Follow TanStack on X</span>
-            <svg viewBox="0 0 16 16" aria-hidden="true" width="24" height="24">
-              <path
-                fill="currentColor"
-                d="M12.6 1h2.2L10 6.48 15.64 15h-4.41L7.78 9.82 3.23 15H1l5.14-5.84L.72 1h4.52l3.12 4.73L12.6 1zm-.77 12.67h1.22L4.57 2.26H3.26l8.57 11.41z"
-              />
-            </svg>
-          </a>
-          <a
-            href="https://github.com/TanStack"
-            target="_blank"
-            rel="noreferrer"
-            className="hidden rounded-xl p-2 text-[var(--sea-ink-soft)] transition hover:bg-[var(--link-bg-hover)] hover:text-[var(--sea-ink)] sm:block"
-          >
-            <span className="sr-only">Go to TanStack GitHub</span>
-            <svg viewBox="0 0 16 16" aria-hidden="true" width="24" height="24">
-              <path
-                fill="currentColor"
-                d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
-              />
-            </svg>
-          </a>
-          <ThemeToggle />
-        </div>
-        <div className="order-3 flex w-full flex-wrap items-center gap-x-4 gap-y-1 pb-1 text-sm font-semibold sm:order-2 sm:w-auto sm:flex-nowrap sm:pb-0">
-          <Link
-            to="/"
-            className="nav-link"
-            activeProps={{ className: 'nav-link is-active' }}
-          >
-            Home
-          </Link>
-          <Link
-            to="/about"
-            className="nav-link"
-            activeProps={{ className: 'nav-link is-active' }}
-          >
-            About
-          </Link>
-          <a
-            href="https://tanstack.com/start/latest/docs/framework/react/overview"
-            className="nav-link"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Docs
-          </a>
-        </div>
-      </nav>
-    </header>
-  )
-}

package/cpa-out/tanstack-codegen-ts/src/components/ThemeToggle.tsx DELETED Viewed

@@ -1,81 +0,0 @@
-import { useEffect, useState } from 'react'
-type ThemeMode = 'light' | 'dark' | 'auto'
-function getInitialMode(): ThemeMode {
-  if (typeof window === 'undefined') {
-    return 'auto'
-  }
-  const stored = window.localStorage.getItem('theme')
-  if (stored === 'light' || stored === 'dark' || stored === 'auto') {
-    return stored
-  }
-  return 'auto'
-}
-function applyThemeMode(mode: ThemeMode) {
-  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
-  const resolved = mode === 'auto' ? (prefersDark ? 'dark' : 'light') : mode
-  document.documentElement.classList.remove('light', 'dark')
-  document.documentElement.classList.add(resolved)
-  if (mode === 'auto') {
-    document.documentElement.removeAttribute('data-theme')
-  } else {
-    document.documentElement.setAttribute('data-theme', mode)
-  }
-  document.documentElement.style.colorScheme = resolved
-}
-export default function ThemeToggle() {
-  const [mode, setMode] = useState<ThemeMode>('auto')
-  useEffect(() => {
-    const initialMode = getInitialMode()
-    setMode(initialMode)
-    applyThemeMode(initialMode)
-  }, [])
-  useEffect(() => {
-    if (mode !== 'auto') {
-      return
-    }
-    const media = window.matchMedia('(prefers-color-scheme: dark)')
-    const onChange = () => applyThemeMode('auto')
-    media.addEventListener('change', onChange)
-    return () => {
-      media.removeEventListener('change', onChange)
-    }
-  }, [mode])
-  function toggleMode() {
-    const nextMode: ThemeMode =
-      mode === 'light' ? 'dark' : mode === 'dark' ? 'auto' : 'light'
-    setMode(nextMode)
-    applyThemeMode(nextMode)
-    window.localStorage.setItem('theme', nextMode)
-  }
-  const label =
-    mode === 'auto'
-      ? 'Theme mode: auto (system). Click to switch to light mode.'
-      : `Theme mode: ${mode}. Click to switch mode.`
-  return (
-    <button
-      type="button"
-      onClick={toggleMode}
-      aria-label={label}
-      title={label}
-      className="rounded-full border border-[var(--chip-line)] bg-[var(--chip-bg)] px-3 py-1.5 text-sm font-semibold text-[var(--sea-ink)] shadow-[0_8px_22px_rgba(30,90,72,0.08)] transition hover:-translate-y-0.5"
-    >
-      {mode === 'auto' ? 'Auto' : mode === 'dark' ? 'Dark' : 'Light'}
-    </button>
-  )
-}

/package/cpa-out/gatsby-codegen-js/src/components/plasmic/create_plasmic_app/icons/{PlasmicIcon__Checksvg.jsx → PlasmicIcon__CheckSvg.jsx} RENAMED Viewed

File without changes

/package/cpa-out/gatsby-codegen-ts/src/components/plasmic/create_plasmic_app/icons/{PlasmicIcon__Checksvg.tsx → PlasmicIcon__CheckSvg.tsx} RENAMED Viewed

File without changes

/package/cpa-out/nextjs-pages-codegen-js/components/plasmic/create_plasmic_app/icons/{PlasmicIcon__Checksvg.jsx → PlasmicIcon__CheckSvg.jsx} RENAMED Viewed

File without changes

/package/cpa-out/nextjs-pages-codegen-ts/components/plasmic/create_plasmic_app/icons/{PlasmicIcon__Checksvg.tsx → PlasmicIcon__CheckSvg.tsx} RENAMED Viewed

File without changes