create-plasmic-app 0.0.131 → 0.0.133

package/cpa-out/tanstack-codegen-ts/src/components/plasmic/create_plasmic_app/plasmic.tsx

@@ -0,0 +1,14 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-nocheck
+
+// This code is auto-generated by Plasmic; please do not edit!
+// Plasmic Project: 47tFXWjN2C4NyHFGGpaYQ3
+
+import { createUseGlobalVariants } from "@plasmicapp/react-web";
+
+import { useScreenVariants as useScreenVariantsscBjPxgdxdzbv } from "./PlasmicGlobalVariant__Screen"; // plasmic-import: SCBjPXGDXDZBV/globalVariant
+
+export const _useGlobalVariants = createUseGlobalVariants({
+  screen: useScreenVariantsscBjPxgdxdzbv
+});

package/cpa-out/tanstack-codegen-ts/src/main.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { RouterProvider, createRouter } from '@tanstack/react-router'
+import { routeTree } from './routeTree.gen'
+
+const router = createRouter({
+  routeTree,
+  defaultPreload: 'intent',
+  scrollRestoration: true,
+})
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+
+const rootElement = document.getElementById('app')!
+
+if (!rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement)
+  root.render(<RouterProvider router={router} />)
+}

package/cpa-out/tanstack-codegen-ts/src/routeTree.gen.ts

@@ -32,7 +32,7 @@ const DynamicSlugIndexRoute = DynamicSlugIndexRouteImport.update({
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/plasmic-host': typeof PlasmicHostRoute
-  '/dynamic/$slug': typeof DynamicSlugIndexRoute
+  '/dynamic/$slug/': typeof DynamicSlugIndexRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
@@ -47,7 +47,7 @@ export interface FileRoutesById {
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/plasmic-host' | '/dynamic/$slug'
+  fullPaths: '/' | '/plasmic-host' | '/dynamic/$slug/'
   fileRoutesByTo: FileRoutesByTo
   to: '/' | '/plasmic-host' | '/dynamic/$slug'
   id: '__root__' | '/' | '/plasmic-host' | '/dynamic/$slug/'
@@ -78,7 +78,7 @@ declare module '@tanstack/react-router' {
     '/dynamic/$slug/': {
       id: '/dynamic/$slug/'
       path: '/dynamic/$slug'
-      fullPath: '/dynamic/$slug'
+      fullPath: '/dynamic/$slug/'
       preLoaderRoute: typeof DynamicSlugIndexRouteImport
       parentRoute: typeof rootRouteImport
     }

package/cpa-out/tanstack-codegen-ts/src/router.tsx

@@ -1,20 +1,20 @@
-import { createRouter as createTanstackRouter } from '@tanstack/react-router'
-
-// Import the generated route tree
+import { createRouter as createTanStackRouter } from '@tanstack/react-router'
 import { routeTree } from './routeTree.gen'
 
-// Create a new router instance
-export const createRouter = () => {
-  return createTanstackRouter({
+export function getRouter() {
+  const router = createTanStackRouter({
     routeTree,
+
     scrollRestoration: true,
+    defaultPreload: 'intent',
     defaultPreloadStaleTime: 0,
   })
+
+  return router
 }
 
-// Register the router instance for type safety
 declare module '@tanstack/react-router' {
   interface Register {
-    router: ReturnType<typeof createRouter>
+    router: ReturnType<typeof getRouter>
   }
 }

package/cpa-out/tanstack-codegen-ts/tsconfig.json

@@ -4,6 +4,10 @@
     "target": "ES2022",
     "jsx": "react-jsx",
     "module": "ESNext",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
     "lib": ["ES2022", "DOM", "DOM.Iterable"],
     "types": ["vite/client"],
 
@@ -19,10 +23,6 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true,
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"],
-    }
+    "noUncheckedSideEffectImports": true
   }
 }

package/cpa-out/tanstack-codegen-ts/vite.config.ts

@@ -1,7 +1,10 @@
 import { defineConfig } from 'vite'
-import { tanstackStart } from '@tanstack/react-start/plugin/vite'
+import { devtools } from '@tanstack/devtools-vite'
+import tsconfigPaths from 'vite-tsconfig-paths'
+
+import { tanstackRouter } from '@tanstack/router-plugin/vite'
+
 import viteReact from '@vitejs/plugin-react'
-import viteTsConfigPaths from 'vite-tsconfig-paths'
 import tailwindcss from '@tailwindcss/vite'
 
 const config = defineConfig({
@@ -15,14 +18,10 @@ const config = defineConfig({
     ],
   },
   plugins: [
-    // this is the plugin that enables path aliases
-    viteTsConfigPaths({
-      projects: ['./tsconfig.json'],
-    }),
+    devtools(),
+    tsconfigPaths({ projects: ['./tsconfig.json'] }),
     tailwindcss(),
-    tanstackStart({
-      customViteReactPlugin: true,
-    }),
+    tanstackRouter({ target: 'react', autoCodeSplitting: true }),
     viteReact(),
   ],
 })

package/dist/utils/file-utils.js

@@ -146,12 +146,17 @@ function generateWelcomePage(config, platform) {
                 getPageSection: () => {
                     const pageLinks = components
                         .map((pc) => {
+                        var _a;
                         // Get the relative path on the filesystem
                         const relativePath = path.relative(dir, pc.importSpec.modulePath);
                         // Format as an absolute path without the extension name
                         const relativeLink = "/" + stripExtension(relativePath);
                         if (platform === "nextjs") {
-                            return `<li><Link href="${relativeLink}">${pc.name} - ${relativeLink}</Link></li>`;
+                            // Replace [param] with dummy values to avoid
+                            // Next.js App Router error: "Dynamic href found in <Link>"
+                            // https://nextjs.org/docs/messages/app-dir-dynamic-href
+                            const href = ((_a = pc.path) !== null && _a !== void 0 ? _a : relativeLink).replace(/\[(\w+)\]/g, "placeholder");
+                            return `<li><Link href="${href}">${pc.name} - ${pc.path}</Link></li>`;
                         }
                         else {
                             return `<li><a style={{ color: "blue" }} href="${relativeLink}">${pc.name} - ${relativeLink}</a></li>`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-plasmic-app",
-  "version": "0.0.131",
+  "version": "0.0.133",
   "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": "0cff43ac752f86fd735d436e5852e538268d11bd"
+  "gitHead": "a18cd21936a28b372b3cbdd9f4a4c37b7d055eae"
 }

package/src/utils/file-utils.ts

@@ -153,7 +153,14 @@ export function generateWelcomePage(
               // Format as an absolute path without the extension name
               const relativeLink = "/" + stripExtension(relativePath);
               if (platform === "nextjs") {
-                return `<li><Link href="${relativeLink}">${pc.name} - ${relativeLink}</Link></li>`;
+                // Replace [param] with dummy values to avoid
+                // Next.js App Router error: "Dynamic href found in <Link>"
+                // https://nextjs.org/docs/messages/app-dir-dynamic-href
+                const href = (pc.path ?? relativeLink).replace(
+                  /\[(\w+)\]/g,
+                  "placeholder"
+                );
+                return `<li><Link href="${href}">${pc.name} - ${pc.path}</Link></li>`;
               } else {
                 return `<li><a style={{ color: "blue" }} href="${relativeLink}">${pc.name} - ${relativeLink}</a></li>`;
               }

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

@@ -1,21 +0,0 @@
-import { Link } from '@tanstack/react-router'
-
-export default function Header() {
-  return (
-    <header className="p-2 flex gap-2 bg-white text-black justify-between">
-      <nav className="flex flex-row">
-        <div className="px-2 font-bold">
-          <Link to="/">Home</Link>
-        </div>
-
-        <div className="px-2 font-bold">
-          <Link to="/demo/start/server-funcs">Start - Server Functions</Link>
-        </div>
-
-        <div className="px-2 font-bold">
-          <Link to="/demo/start/api-request">Start - API Request</Link>
-        </div>
-      </nav>
-    </header>
-  )
-}