use-chisel 0.1.3 → 0.1.4

package/README.md

@@ -44,8 +44,20 @@ Supports Next.js 14 through 16 with React 18 or 19, including both App Router an
 npm install use-chisel
 ```
 
-Run `npx chisel` to open the hosted Chisel sign-in page. Connecting your project
-to the hosted workspace is not available yet.
+Run `npx chisel` from a Next.js App Router project to sign in and connect it to
+hosted Chisel. The command adds a `/chisel` route and a preview component to the
+app layout, and saves the project's public ID in `.chisel.json`. It does not
+overwrite an existing `/chisel` route. Restart your development server and open
+`/chisel` to sign in and review the site. Shared comments are stored by Chisel's
+hosted service; project credentials and Supabase service keys are not required
+in the client project. The hosted workspace currently supports text comments,
+replies, resolution, and review links; rich text, attachments, presence, and
+unread indicators are not yet available there.
+
+The generated route defaults off in production. To use it on a deployed review
+site, set `CHISEL_ENABLED=1` for that deployment and redeploy. Hosted connections
+require HTTPS, except on localhost. Automatic setup currently requires an App
+Router layout containing a single `</body>` tag.
 
 Run `npx chisel enable` or `npx chisel disable` in your project to update its
 local `.env.local` settings. Restart the development server afterwards. These

package/bin/chisel.js

@@ -1,8 +1,51 @@
 #!/usr/bin/env node
 import { spawn } from "node:child_process";
-import { existsSync, readFileSync, writeFileSync } from "node:fs";
+import { existsSync, mkdirSync, readFileSync, unlinkSync, writeFileSync } from "node:fs";
+import { randomBytes, randomUUID } from "node:crypto";
+import { createServer } from "node:http";
 import { join } from "node:path";
 
+function openBrowser(url) {
+  console.log(`Open ${url} to continue in your browser.`);
+  const command = process.platform === "darwin" ? "open" : process.platform === "win32" ? "rundll32" : "xdg-open";
+  const args = process.platform === "win32" ? ["url.dll,FileProtocolHandler", url] : [url];
+  const browser = spawn(command, args, { detached: true, stdio: "ignore" });
+  browser.on("error", () => console.error("Could not open a browser. Open the link above instead."));
+  browser.unref();
+}
+
+function scaffoldInfo() {
+  const app = ["app", "src/app"].find(dir => existsSync(dir));
+  const layout = app && ["layout.tsx", "layout.jsx", "layout.js"].map(file => join(app, file)).find(existsSync);
+  if (!layout) throw new Error("Chisel currently sets up Next.js App Router projects with an app/layout file.");
+  const source = readFileSync(layout, "utf8");
+  if ((source.match(/<\/body\s*>/g) || []).length !== 1 || source.includes("ChiselConnectedPreview")) throw new Error("Could not safely update the app layout. Add ChiselPreview to the layout and create the /chisel route manually.");
+  const directory = join(app, "chisel");
+  if (["page.tsx", "page.jsx", "page.js"].some(file => existsSync(join(directory, file)))) throw new Error("The /chisel route already exists. Chisel will not overwrite it.");
+  return { layout, source, directory, extension: layout.endsWith(".tsx") ? "tsx" : "jsx" };
+}
+
+function scaffoldProject(info, projectId, configFile) {
+  const closingBody = info.source.match(/<\/body\s*>/)[0];
+  const updated = info.source.replace(closingBody, `<ChiselConnectedPreview />\n      ${closingBody}`);
+  const directive = updated.match(/^\s*["']use client["'];?\s*/)?.[0] || "";
+  const layout = `${directive}import { ChiselPreview as ChiselConnectedPreview } from "use-chisel/workspace";\n${updated.slice(directive.length)}`;
+  const page = `import { notFound } from "next/navigation";\nimport { HostedChisel } from "use-chisel/hosted";\n\nexport default function ChiselPage() {\n  const enabled = process.env.CHISEL_ENABLED === undefined ? process.env.NODE_ENV !== "production" : process.env.CHISEL_ENABLED === "1";\n  if (!enabled) notFound();\n  return <HostedChisel projectId="${projectId}" />;\n}\n`;
+  const pageFile = join(info.directory, `page.${info.extension}`);
+  if (readFileSync(info.layout, "utf8") !== info.source) throw new Error("The layout changed during setup. Run npx chisel again.");
+  mkdirSync(info.directory, { recursive: true });
+  writeFileSync(pageFile, page, { flag: "wx" });
+  let layoutWritten = false;
+  try {
+    writeFileSync(info.layout, layout); layoutWritten = true;
+    writeFileSync(configFile, JSON.stringify({ projectId }, null, 2) + "\n", { flag: "wx", mode: 0o600 });
+  } catch (error) {
+    if (layoutWritten && existsSync(info.layout) && readFileSync(info.layout, "utf8") === layout) writeFileSync(info.layout, info.source);
+    if (existsSync(pageFile) && readFileSync(pageFile, "utf8") === page) unlinkSync(pageFile);
+    throw error;
+  }
+}
+
 const action = process.argv[2];
 if (action === "enable" || action === "disable") {
   if (!existsSync("package.json")) {
@@ -27,11 +70,41 @@ if (action === "enable" || action === "disable") {
   console.error("Usage: npx chisel [enable|disable]");
   process.exitCode = 1;
 } else {
-  const url = "https://chisel-review.vercel.app/chisel/start";
-  console.log(`Open ${url} to sign in to Chisel.`);
-  const command = process.platform === "darwin" ? "open" : process.platform === "win32" ? "rundll32" : "xdg-open";
-  const args = process.platform === "win32" ? ["url.dll,FileProtocolHandler", url] : [url];
-  const browser = spawn(command, args, { detached: true, stdio: "ignore" });
-  browser.on("error", () => console.error("Could not open a browser. Open the link above instead."));
-  browser.unref();
+  const configFile = join(process.cwd(), ".chisel.json");
+  if (!existsSync("package.json")) {
+    openBrowser("https://chisel-review.vercel.app/chisel/start");
+  } else if (existsSync(configFile)) {
+    console.log("This project is already connected. Start your development server and open /chisel.");
+  } else {
+    let name, info;
+    try { name = JSON.parse(readFileSync("package.json", "utf8")).name || "My project"; }
+    catch { console.error("Could not read this project's package.json."); process.exit(1); }
+    try { info = scaffoldInfo(); }
+    catch (error) { console.error(error.message); process.exit(1); }
+    if (typeof name !== "string" || !name.trim()) name = "My project";
+    const state = randomBytes(32).toString("hex"), requestId = randomUUID();
+    const server = createServer((request, response) => {
+      let url;
+      try { url = new URL(request.url || "/", "http://127.0.0.1"); }
+      catch { response.writeHead(400).end("Invalid connection request."); return; }
+      const project = url.searchParams.get("project");
+      if (request.method !== "GET" || url.pathname !== "/" || url.searchParams.get("state") !== state || !project || !/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/.test(project)) {
+        response.writeHead(400).end("Invalid connection request."); return;
+      }
+      try { scaffoldProject(info, project, configFile); }
+      catch (error) { console.error(`Could not finish project setup: ${error.message}`); response.writeHead(500).end("Could not finish project setup. Return to your terminal."); return; }
+      response.writeHead(200, { "Content-Type": "text/plain", "Cache-Control": "no-store" }).end("Project connected. You can return to your terminal.");
+      console.log("Project connected. Start your development server and open /chisel.");
+      clearTimeout(timeout); server.close();
+    });
+    server.on("error", () => { console.error("Could not start the local connection listener."); process.exitCode = 1; });
+    server.listen(0, "127.0.0.1", () => {
+      const url = new URL("https://chisel-review.vercel.app/chisel/start");
+      url.search = new URLSearchParams({ state, port: String(server.address().port), request: requestId, name: name.trim().slice(0, 120) }).toString();
+      openBrowser(url.toString());
+      console.log("Waiting for project confirmation. Press Ctrl+C to cancel.");
+    });
+    const timeout = setTimeout(() => { console.error("Project connection timed out. Run npx chisel again to retry."); server.close(); process.exitCode = 1; }, 300000);
+    timeout.unref();
+  }
 }

package/dist/hosted-entry.d.ts

@@ -0,0 +1,3 @@
+export declare function HostedChisel({ projectId }: {
+    projectId: string;
+}): import("react").JSX.Element;

package/dist/hosted-entry.js

@@ -0,0 +1 @@
+"use client";import{jsx as i,jsxs as l,Fragment as L}from"react/jsx-runtime";import{useCallback as R,useEffect as b,useMemo as j,useRef as w,useState as f}from"react";import{ChiselWorkspace as I,ChiselWorkspaceStyles as E}from"use-chisel/workspace";var u="https://chisel-review.vercel.app";function N({projectId:h}){let a=`chisel:session:${h}`,r=w(""),[c,C]=f(null),[P,d]=f(!0),[v,p]=f(""),[x,y]=f(!1),S=w(null);S.current=c;let m=w(null),g=w(""),o=R(async(t,e)=>{let n=await fetch(`${u}/chisel/api/hosted/comments`,{method:t,headers:{Authorization:`Bearer ${r.current}`,...e?{"Content-Type":"application/json","X-Chisel-Protocol":"2"}:{}},...e?{body:JSON.stringify(e)}:{}}),s=await n.json();if(!n.ok)throw n.status===401&&S.current&&y(!0),Object.assign(new Error(s.error||"Chisel is unavailable. Please try again."),{status:n.status});if(s.siteId&&s.siteId!==h)throw new Error("This session belongs to another project.");return s},[h]),T=j(()=>({async list(){return(await o("GET")).comments},async mutate(t){return(await o("POST",t)).comment},async delete(t){await o("POST",{type:"delete",id:t})}}),[o]);b(()=>{if(r.current=sessionStorage.getItem(a)||"",!r.current){d(!1);return}let t=!0;return o("GET").then(e=>{t&&C(e)}).catch(()=>{t&&(r.current="",sessionStorage.removeItem(a))}).finally(()=>{t&&d(!1)}),()=>{t=!1}},[a,o]),b(()=>{let t=e=>{e.origin!==u||e.source!==m.current||e.data?.type!=="chisel:session"||e.data.state!==g.current||!/^[0-9a-f]{64}$/.test(e.data.token)||(r.current=e.data.token,sessionStorage.setItem(a,r.current),g.current="",m.current=null,S.current||d(!0),p(""),o("GET").then(n=>{C(n),y(!1);let s=new URL(window.location.href);s.searchParams.delete("invite"),window.history.replaceState(window.history.state,"",s)}).catch(n=>{r.current="",sessionStorage.removeItem(a),p(n instanceof Error?n.message:"Could not connect to Chisel.")}).finally(()=>d(!1)))};return window.addEventListener("message",t),()=>window.removeEventListener("message",t)},[a,o]);function k(){let t=crypto.getRandomValues(new Uint8Array(32));g.current=Array.from(t,s=>s.toString(16).padStart(2,"0")).join("");let e=new URL("/chisel/connect",u);e.searchParams.set("site",h),e.searchParams.set("origin",window.location.origin),e.searchParams.set("state",g.current);let n=new URLSearchParams(window.location.search).get("invite");n&&e.searchParams.set("invite",n),m.current=window.open(e.toString(),"chisel-sign-in","popup,width=520,height=700"),m.current||p("Allow pop-ups for this site, then try again.")}return P?l("main",{className:"chisel-sign-in",children:[i(E,{}),i("section",{children:i("p",{children:"Connecting to Chisel\u2026"})})]}):c?l(L,{children:[i(I,{user:c.user,commentStore:T,canManageComments:c.role==="owner",getReviewLink:c.role==="owner"?async(t=!1)=>{let e=await fetch(`${u}/chisel/api/hosted/invite`,{method:"POST",headers:{Authorization:`Bearer ${r.current}`,"Content-Type":"application/json","X-Chisel-Protocol":"2"},body:JSON.stringify({rotate:t})}),n=await e.json();if(e.status===401&&y(!0),!e.ok||typeof n.invite!="string")throw new Error(n.error||"Could not create a review link.");let s=new URL("/chisel",window.location.origin);return s.searchParams.set("mode","comment"),s.searchParams.set("invite",n.invite),s.toString()}:void 0,validateSession:async()=>!!r.current,signOut:async()=>{let t=await fetch(`${u}/chisel/api/hosted/logout`,{method:"DELETE",headers:{Authorization:`Bearer ${r.current}`,"X-Chisel-Protocol":"2"}});if(!t.ok&&t.status!==401)throw new Error("Sign out failed.");r.current="",sessionStorage.removeItem(a)}}),x&&l("div",{role:"alert",style:{position:"fixed",bottom:16,right:16,zIndex:999999,background:"white",color:"black",padding:12,borderRadius:8,boxShadow:"0 2px 12px #0003"},children:["Your Chisel session expired. ",i("button",{type:"button",onClick:k,children:"Sign in again"})]})]}):l("main",{className:"chisel-sign-in",children:[i(E,{}),l("section",{children:[i("strong",{className:"chisel-sign-in-brand",children:"chisel"}),i("h1",{children:"Sign in to review"}),i("p",{children:"Connect this website to your Chisel account."}),i("button",{onClick:k,children:"Continue with Chisel"}),v&&i("p",{role:"alert",children:v})]})]})}export{N as HostedChisel};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-chisel",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Dev-only visual editing layer for Next.js apps.",
   "type": "module",
   "keywords": [
@@ -25,6 +25,10 @@
     "chisel": "./bin/chisel.js"
   },
   "exports": {
+    "./hosted": {
+      "types": "./dist/hosted-entry.d.ts",
+      "import": "./dist/hosted-entry.js"
+    },
     "./workspace": {
       "types": "./dist/workspace-entry.d.ts",
       "import": "./dist/workspace-entry.js"
@@ -38,6 +42,7 @@
     "bin/chisel.js",
     "dist/index.js",
     "dist/workspace-entry.js",
+    "dist/hosted-entry.js",
     "dist/**/*.d.ts",
     "README.md"
   ],
@@ -45,7 +50,7 @@
     "access": "public"
   },
   "scripts": {
-    "build": "tsc -p tsconfig.json && esbuild dist/index.js dist/workspace-entry.js --bundle --minify --format=esm --platform=browser --external:react --external:react/jsx-runtime --external:react-dom --external:use-chisel --define:process.env.NODE_ENV=process.env.NODE_ENV --outdir=dist --allow-overwrite",
+    "build": "tsc -p tsconfig.json && esbuild dist/index.js dist/workspace-entry.js dist/hosted-entry.js --bundle --minify --format=esm --platform=browser --external:react --external:react/jsx-runtime --external:react-dom --external:use-chisel --define:process.env.NODE_ENV=process.env.NODE_ENV --outdir=dist --allow-overwrite",
     "prepack": "npm run build",
     "test": "vitest run",
     "typecheck": "tsc -p tsconfig.json --noEmit"