create-puck-app 0.22.0-canary.f4f83ac1 → 0.22.0

package/index.js

@@ -95,10 +95,6 @@ program
             name: "React Router",
             value: "react-router",
           },
-          {
-            name: "Remix",
-            value: "remix",
-          },
         ],
       },
       {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-puck-app",
-  "version": "0.22.0-canary.f4f83ac1",
+  "version": "0.22.0",
   "author": "Chris Villa <chris@puckeditor.com>",
   "repository": "puckeditor/puck",
   "bugs": "https://github.com/puckeditor/puck/issues",
@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "commander": "^10.0.1",
-    "glob": "^11.1.0",
+    "glob": "^12.0.0",
     "handlebars": "^4.7.7",
     "inquirer": "^9.2.7",
     "prettier": "^2.8.8"

package/templates/next-ai/package.json.hbs

@@ -9,8 +9,8 @@
   },
   "dependencies": {
     "@puckeditor/core": "{{puckVersion}}",
-    "@puckeditor/cloud-client": "^0.5.0",
-    "@puckeditor/plugin-ai": "^0.5.0",
+    "@puckeditor/cloud-client": "^0.7.0",
+    "@puckeditor/plugin-ai": "^0.7.0",
     "classnames": "^2.3.2",
     "next": "^16.0.8",
     "react": "^19.2.1",

package/templates/react-router-ai/package.json.hbs

@@ -11,8 +11,8 @@
   },
   "dependencies": {
     "@puckeditor/core": "{{puckVersion}}",
-    "@puckeditor/cloud-client": "^0.5.0",
-    "@puckeditor/plugin-ai": "^0.5.0",
+    "@puckeditor/cloud-client": "^0.7.0",
+    "@puckeditor/plugin-ai": "^0.7.0",
     "@react-router/node": "^7.5.3",
     "@react-router/serve": "^7.5.3",
     "isbot": "^5",

package/templates/gitignore

@@ -1,8 +0,0 @@
-# # Ignore everything
-*.*
-
-# # Explicitly ignore gitignore without extension
-gitignore
-
-# # Except for handlebars files
-!*.hbs

package/templates/next/.eslintrc.js

@@ -1,4 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ["custom"],
-};

package/templates/next/README.md

@@ -1,38 +0,0 @@
-# `next` recipe
-
-The `next` recipe showcases one of the most powerful ways to implement Puck using to provide an authoring tool for any route in your Next app.
-
-## Demonstrates
-
-- Next.js App Router implementation
-- JSON database implementation with HTTP API
-- Catch-all routes to use puck for any route on the platform
-- Incremental static regeneration (ISR) for all Puck pages
-
-## Usage
-
-Run the generator and enter `next` when prompted
-
-```
-npx create-puck-app my-app
-```
-
-Start the server
-
-```
-yarn dev
-```
-
-Navigate to the homepage at https://localhost:3000. To edit the homepage, access the Puck editor at https://localhost:3000/edit.
-
-You can do this for any route on the application, **even if the page doesn't exist**. For example, visit https://localhost:3000/hello/world and you'll receive a 404. You can author and publish a page by visiting https://localhost:3000/hello/world/edit. After publishing, go back to the original URL to see your page.
-
-## Using this recipe
-
-To adopt this recipe you will need to:
-
-- **IMPORTANT** Add authentication to `/edit` routes. This can be done by modifying the example API routes in `/app/puck/api/route.ts` and server component in `/app/puck/[...puckPath]/page.tsx`. **If you don't do this, Puck will be completely public.**
-- Integrate your database into the API calls in `/app/puck/api/route.ts`
-- Implement a custom puck configuration in `puck.config.tsx`
-
-By default, this recipe will generate static pages by setting `dynamic` to [`force-static`](https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic) in the `/app/[...puckPath]/page.tsx`. This will strip headers and cookies. If you need dynamic pages, you can delete this.

package/templates/next/app/[...puckPath]/client.tsx

@@ -1,9 +0,0 @@
-"use client";
-
-import type { Data } from "@puckeditor/core";
-import { Render } from "@puckeditor/core";
-import config from "../../puck.config";
-
-export function Client({ data }: { data: Data }) {
-  return <Render config={config} data={data} />;
-}

package/templates/next/app/[...puckPath]/page.tsx

@@ -1,49 +0,0 @@
-/**
- * This file implements a catch-all route that renders the user-facing pages
- * generated by Puck. For any route visited (with exception of other hardcoded
- * pages in /app), it will check your database (via `getPage`) for a Puck page
- * and render it using <Render>.
- *
- * All routes produced by this page are statically rendered using incremental
- * static site generation. After the first visit, the page will be cached as
- * a static file. Subsequent visits will receive the cache. Publishing a page
- * will invalidate the cache as the page is written in /api/puck/route.ts
- */
-
-import { Client } from "./client";
-import { notFound } from "next/navigation";
-import { Metadata } from "next";
-import { getPage } from "../../lib/get-page";
-
-export async function generateMetadata({
-  params,
-}: {
-  params: Promise<{ puckPath: string[] }>;
-}): Promise<Metadata> {
-  const { puckPath = [] } = await params;
-  const path = `/${puckPath.join("/")}`;
-
-  return {
-    title: getPage(path)?.root.props?.title,
-  };
-}
-
-export default async function Page({
-  params,
-}: {
-  params: Promise<{ puckPath: string[] }>;
-}) {
-  const { puckPath = [] } = await params;
-  const path = `/${puckPath.join("/")}`;
-  const data = getPage(path);
-
-  if (!data) {
-    return notFound();
-  }
-
-  return <Client data={data} />;
-}
-
-// Force Next.js to produce static pages: https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic
-// Delete this if you need dynamic rendering, such as access to headers or cookies
-export const dynamic = "force-static";

package/templates/next/app/layout.tsx

@@ -1,13 +0,0 @@
-import "./styles.css";
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <html lang="en">
-      <body>{children}</body>
-    </html>
-  );
-}

package/templates/next/app/page.tsx

@@ -1 +0,0 @@
-export { default, generateMetadata } from "./[...puckPath]/page";

package/templates/next/app/puck/[...puckPath]/client.tsx

@@ -1,20 +0,0 @@
-"use client";
-
-import type { Data } from "@puckeditor/core";
-import { Puck } from "@puckeditor/core";
-import config from "../../../puck.config";
-
-export function Client({ path, data }: { path: string; data: Partial<Data> }) {
-  return (
-    <Puck
-      config={config}
-      data={data}
-      onPublish={async (data) => {
-        await fetch("/puck/api", {
-          method: "post",
-          body: JSON.stringify({ data, path }),
-        });
-      }}
-    />
-  );
-}

package/templates/next/app/puck/[...puckPath]/page.tsx

@@ -1,44 +0,0 @@
-/**
- * This file implements a *magic* catch-all route that renders the Puck editor.
- *
- * This route exposes /puck/[...puckPath], but is disabled by middleware.ts. The middleware
- * then rewrites all URL requests ending in `/edit` to this route, allowing you to visit any
- * page in your application and add /edit to the end to spin up a Puck editor.
- *
- * This approach enables public pages to be statically rendered whilst the /puck route can
- * remain dynamic.
- *
- * NB this route is public, and you will need to add authentication
- */
-
-import "@puckeditor/core/puck.css";
-import { Client } from "./client";
-import { Metadata } from "next";
-import { getPage } from "../../../lib/get-page";
-
-export async function generateMetadata({
-  params,
-}: {
-  params: Promise<{ puckPath: string[] }>;
-}): Promise<Metadata> {
-  const { puckPath = [] } = await params;
-  const path = `/${puckPath.join("/")}`;
-
-  return {
-    title: "Puck: " + path,
-  };
-}
-
-export default async function Page({
-  params,
-}: {
-  params: Promise<{ puckPath: string[] }>;
-}) {
-  const { puckPath = [] } = await params;
-  const path = `/${puckPath.join("/")}`;
-  const data = getPage(path);
-
-  return <Client path={path} data={data || {}} />;
-}
-
-export const dynamic = "force-dynamic";

package/templates/next/app/puck/api/route.ts

@@ -1,25 +0,0 @@
-import { revalidatePath } from "next/cache";
-import { NextResponse } from "next/server";
-import fs from "fs";
-
-export async function POST(request: Request) {
-  const payload = await request.json();
-
-  const existingData = JSON.parse(
-    fs.existsSync("database.json")
-      ? fs.readFileSync("database.json", "utf-8")
-      : "{}"
-  );
-
-  const updatedData = {
-    ...existingData,
-    [payload.path]: payload.data,
-  };
-
-  fs.writeFileSync("database.json", JSON.stringify(updatedData));
-
-  // Purge Next.js cache
-  revalidatePath(payload.path);
-
-  return NextResponse.json({ status: "ok" });
-}

package/templates/next/app/puck/page.tsx

@@ -1,3 +0,0 @@
-export { default, generateMetadata } from "./[...puckPath]/page";
-
-export const dynamic = "force-dynamic";

package/templates/next/app/styles.css

@@ -1,3 +0,0 @@
-body {
-  margin: 0;
-}

package/templates/next/database.json

@@ -1 +0,0 @@
-{"/":{"content":[{"type":"HeadingBlock","props":{"title":"Edit this page by adding /edit to the end of the URL","id":"HeadingBlock-1694032984497"}}],"root":{"props": {"title":""}}}}

package/templates/next/gitignore

@@ -1,34 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-# vercel
-.vercel

package/templates/next/lib/get-page.ts

@@ -1,11 +0,0 @@
-import { Data } from "@puckeditor/core";
-import fs from "fs";
-
-// Replace with call to your database
-export const getPage = (path: string) => {
-  const allData: Record<string, Data> | null = fs.existsSync("database.json")
-    ? JSON.parse(fs.readFileSync("database.json", "utf-8"))
-    : null;
-
-  return allData ? allData[path] : null;
-};

package/templates/next/next-env.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/templates/next/next.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  reactStrictMode: true,
-};

package/templates/next/proxy.ts

@@ -1,27 +0,0 @@
-import { NextResponse } from "next/server";
-
-import type { NextRequest } from "next/server";
-
-export async function proxy(req: NextRequest) {
-  const res = NextResponse.next({ request: req });
-
-  if (req.method === "GET") {
-    // Rewrite routes that match "/[...puckPath]/edit" to "/puck/[...puckPath]"
-    if (req.nextUrl.pathname.endsWith("/edit")) {
-      const pathWithoutEdit = req.nextUrl.pathname.slice(
-        0,
-        req.nextUrl.pathname.length - 5
-      );
-      const pathWithEditPrefix = `/puck${pathWithoutEdit}`;
-
-      return NextResponse.rewrite(new URL(pathWithEditPrefix, req.url));
-    }
-
-    // Disable "/puck/[...puckPath]"
-    if (req.nextUrl.pathname.startsWith("/puck")) {
-      return NextResponse.redirect(new URL("/", req.url));
-    }
-  }
-
-  return res;
-}

package/templates/next/puck.config.tsx

@@ -1,25 +0,0 @@
-import type { Config } from "@puckeditor/core";
-
-type Props = {
-  HeadingBlock: { title: string };
-};
-
-export const config: Config<Props> = {
-  components: {
-    HeadingBlock: {
-      fields: {
-        title: { type: "text" },
-      },
-      defaultProps: {
-        title: "Heading",
-      },
-      render: ({ title }) => (
-        <div style={{ padding: 64 }}>
-          <h1>{title}</h1>
-        </div>
-      ),
-    },
-  },
-};
-
-export default config;

package/templates/next/tsconfig/base.json

@@ -1,20 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "display": "Default",
-  "compilerOptions": {
-    "composite": false,
-    "declaration": true,
-    "declarationMap": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "inlineSources": false,
-    "isolatedModules": true,
-    "moduleResolution": "node",
-    "noUnusedLocals": false,
-    "noUnusedParameters": false,
-    "preserveWatchOutput": true,
-    "skipLibCheck": true,
-    "strict": true
-  },
-  "exclude": ["node_modules"]
-}

package/templates/next/tsconfig/nextjs.json

@@ -1,21 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "display": "Next.js",
-  "extends": "./base.json",
-  "compilerOptions": {
-    "plugins": [{ "name": "next" }],
-    "allowJs": true,
-    "declaration": false,
-    "declarationMap": false,
-    "incremental": true,
-    "jsx": "preserve",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "module": "esnext",
-    "noEmit": true,
-    "resolveJsonModule": true,
-    "strict": false,
-    "target": "es5"
-  },
-  "include": ["src", "next-env.d.ts"],
-  "exclude": ["node_modules"]
-}

package/templates/next/tsconfig.json

@@ -1,8 +0,0 @@
-{
-  "extends": "./tsconfig/nextjs.json",
-  "compilerOptions": {
-    "plugins": [{ "name": "next" }]
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
-}

package/templates/next-ai/.env.example

@@ -1,2 +0,0 @@
-# Add your key here, more information available at: https://puckeditor.com/docs/ai/getting-started#generate-an-api-key
-PUCK_API_KEY=

package/templates/next-ai/.eslintrc.js

@@ -1,4 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ["custom"],
-};

package/templates/next-ai/README.md

@@ -1,60 +0,0 @@
-# `next-ai` recipe
-
-The `next-ai` recipe showcases one of the most powerful ways to combine Puck and [Puck AI](https://puckeditor.com/docs/ai/overview): providing an authoring tool with AI page generation capabilities for any route in your Next app.
-
-## Demonstrates
-
-- Puck AI integration for generating pages with AI
-- Next.js App Router implementation
-- JSON database implementation with HTTP API
-- Catch-all routes to use puck for any route on the platform
-- Incremental static regeneration (ISR) for all Puck pages
-
-## Usage
-
-Run the generator and select `Next.js` when prompted
-
-```
-npx create-puck-app my-app
-
-? Which recipe would you like to use?
-❯ Next.js
-```
-
-Confirm you want to use Puck AI
-
-```
-? Would you like to use Puck AI? (Y/n) Y
-```
-
-Start the server
-
-```
-cd my-app
-yarn dev
-```
-
-### Set up Puck AI
-
-Create a [Puck account](https://cloud.puckeditor.com) and [obtain an API key](https://cloud.puckeditor.com/api-keys).
-
-Create a `.env.local` file in the root of your project and add your API key:
-
-```
-PUCK_API_KEY=your-api-key
-```
-
-Navigate to the homepage at https://localhost:3000. To edit the homepage, access the Puck editor at https://localhost:3000/edit, and select the AI button in the left navigation bar to generate content for the page using Puck AI.
-
-You can do this for any route on the application, **even if the page doesn't exist**. For example, visit https://localhost:3000/hello/world and you'll receive a 404. You can author and publish a page by visiting https://localhost:3000/hello/world/edit. After publishing, go back to the original URL to see your page.
-
-## Using this recipe
-
-To adopt this recipe you will need to:
-
-- **IMPORTANT** Add authentication to `/edit` routes. This can be done by modifying the example API routes in `/app/puck/api/route.ts` and server component in `/app/puck/[...puckPath]/page.tsx`. **If you don't do this, Puck will be completely public.**
-- Integrate your database into the API calls in `/app/puck/api/route.ts`
-- Implement a custom puck configuration in `puck.config.tsx`
-- Add business context for the AI generation in `/app/api/puck/[...all]/route.ts`
-
-By default, this recipe will generate static pages by setting `dynamic` to [`force-static`](https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic) in the `/app/[...puckPath]/page.tsx`. This will strip headers and cookies. If you need dynamic pages, you can delete this.

package/templates/next-ai/app/[...puckPath]/client.tsx

@@ -1,9 +0,0 @@
-"use client";
-
-import type { Data } from "@puckeditor/core";
-import { Render } from "@puckeditor/core";
-import config from "../../puck.config";
-
-export function Client({ data }: { data: Data }) {
-  return <Render config={config} data={data} />;
-}

package/templates/next-ai/app/[...puckPath]/page.tsx

@@ -1,49 +0,0 @@
-/**
- * This file implements a catch-all route that renders the user-facing pages
- * generated by Puck. For any route visited (with exception of other hardcoded
- * pages in /app), it will check your database (via `getPage`) for a Puck page
- * and render it using <Render>.
- *
- * All routes produced by this page are statically rendered using incremental
- * static site generation. After the first visit, the page will be cached as
- * a static file. Subsequent visits will receive the cache. Publishing a page
- * will invalidate the cache as the page is written in /api/puck/route.ts
- */
-
-import { Client } from "./client";
-import { notFound } from "next/navigation";
-import { Metadata } from "next";
-import { getPage } from "../../lib/get-page";
-
-export async function generateMetadata({
-  params,
-}: {
-  params: Promise<{ puckPath: string[] }>;
-}): Promise<Metadata> {
-  const { puckPath = [] } = await params;
-  const path = `/${puckPath.join("/")}`;
-
-  return {
-    title: getPage(path)?.root.props?.title,
-  };
-}
-
-export default async function Page({
-  params,
-}: {
-  params: Promise<{ puckPath: string[] }>;
-}) {
-  const { puckPath = [] } = await params;
-  const path = `/${puckPath.join("/")}`;
-  const data = getPage(path);
-
-  if (!data) {
-    return notFound();
-  }
-
-  return <Client data={data} />;
-}
-
-// Force Next.js to produce static pages: https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic
-// Delete this if you need dynamic rendering, such as access to headers or cookies
-export const dynamic = "force-static";

package/templates/next-ai/app/api/pages/route.ts

@@ -1,26 +0,0 @@
-import { revalidatePath } from "next/cache";
-import { NextResponse } from "next/server";
-import fs from "fs";
-
-// Saves page data to a JSON file, replace this with your own database logic
-export async function POST(request: Request) {
-  const payload = await request.json();
-
-  const existingData = JSON.parse(
-    fs.existsSync("database.json")
-      ? fs.readFileSync("database.json", "utf-8")
-      : "{}"
-  );
-
-  const updatedData = {
-    ...existingData,
-    [payload.path]: payload.data,
-  };
-
-  fs.writeFileSync("database.json", JSON.stringify(updatedData));
-
-  // Purge Next.js cache
-  revalidatePath(payload.path);
-
-  return NextResponse.json({ status: "ok" });
-}

package/templates/next-ai/app/api/puck/[...all]/route.ts

@@ -1,13 +0,0 @@
-import { NextRequest } from "next/server";
-import { puckHandler } from "@puckeditor/cloud-client";
-
-// Handles all requests for Puck AI
-// Learn more: https://puckeditor.com/docs/ai/getting-started
-export const POST = (request: NextRequest) => {
-  return puckHandler(request, {
-    ai: {
-      // Replace with your business context
-      context: "We are Google. You create Google landing pages.",
-    },
-  });
-};

package/templates/next-ai/app/layout.tsx

@@ -1,13 +0,0 @@
-import "./styles.css";
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <html lang="en">
-      <body>{children}</body>
-    </html>
-  );
-}

package/templates/next-ai/app/page.tsx

@@ -1 +0,0 @@
-export { default, generateMetadata } from "./[...puckPath]/page";