@picked/client 0.0.1-dev.1785305085063 → 0.0.1-dev.1785908062293

package/dist/docs/tutorials/first-server-rendered-page.mdx

@@ -0,0 +1,186 @@
+---
+type: tutorial
+layout: docs
+---
+
+import { Screenshot } from '../../../components/Screenshot'
+
+# Your first server-rendered page
+
+In this tutorial we make a landing page in the Picked CMS and render it on your server.
+A search engine reads the content in the first response, and the browser takes over after
+that.
+
+At the end you have one page layout, one content entry, and a server that returns your
+content in its HTML.
+
+## Before you start
+
+- A Picked project. [Add Picked to your application](/tutorials/first-experience)
+  makes one.
+- A server that renders React or Svelte and can add a script tag to its HTML.
+- Node 20 or later.
+
+## 1. Model the page layout
+
+A page layout sets which fields your page holds.
+
+1. Open your workspace.
+2. Click **Pages** in the sidebar, then **Page Layouts**.
+3. Click **New model**.
+4. Set **Category** to **Page layout**.
+5. Enter the name `Page hero` and the key `page-hero`. The key is stable, and your SDK
+   code and your API calls both use it.
+6. Add a **Single-line text** field with the key `title`.
+7. Add a **Markdown** field with the key `body`.
+8. Click **Create model**.
+
+<Screenshot
+  route="/{orgSlug}/{projectId}/workspaces/{workspaceId}/models"
+  alt="A page layout in the schema builder on the Picked dashboard"
+/>
+
+Your layout now holds two fields. It holds no content yet.
+
+## 2. Make the page and fill it
+
+1. Click **Pages** in the sidebar.
+2. Click **New Experience**.
+3. Choose the **Page** type.
+4. Choose your `page-hero` layout.
+5. Open the **Properties** tab.
+6. Enter a `title` and a `body`.
+7. Click **Save**. Picked makes a content entry and links it to the page.
+8. Correct every field error.
+
+## 3. Publish the workspace
+
+1. Click **Publish** in the workspace toolbar.
+2. Click **Publish** to confirm.
+
+Your content is now live. Read it back with `curl`, and put your own project ID in the
+path:
+
+```bash
+curl https://api.picked.app/api/v1/projects/proj_123
+```
+
+The answer holds your steps. Each one carries a `layoutContentId`, which points at the
+content entry behind it.
+
+## 4. Make the snapshot on your server
+
+`serialize()` finds which experiences match the URL and reads their content. It gives you
+a snapshot as plain JSON.
+
+Make one client for each request, in `server.ts`:
+
+```ts
+import { createClient } from '@picked/client'
+import { serialize } from '@picked/client/server'
+
+const client = createClient(options)
+
+const snapshot = await serialize(client, {
+  projectConfig,
+  attributes: { location: { pathname: url.pathname } },
+})
+```
+
+Write the snapshot into your HTML answer:
+
+```ts
+const html = `
+  <div id="root">${appHtml}</div>
+  <script>window.__PICKED__ = ${JSON.stringify(snapshot)}</script>
+`
+```
+
+## 5. Render the slot
+
+`<ExperienceSlot name="page" />` renders every experience that points at that slot. Give
+the provider your snapshot, so the first paint in the browser matches the HTML from your
+server.
+
+Register the component under the same name that the page uses. Here it is `CMSPage`.
+
+:::code-group
+
+```tsx [React]
+import type { CreateClientOptions } from '@picked/client'
+import { dynamicExperiencesPlugin } from '@picked/client/plugins/dynamic-experiences'
+import { adaptReactComponent, ExperienceSlot, PickedProvider } from '@picked/react'
+import { reactFrameworkPlugin } from '@picked/react/plugins/framework'
+import { useStepContent } from '@picked/react/hooks'
+
+function CMSPage() {
+  const content = useStepContent()
+  const title = typeof content?.title === 'string' ? content.title : ''
+  return <h1>{title}</h1>
+}
+
+const options = {
+  projectId: 'proj_123',
+  components: { CMSPage: adaptReactComponent(CMSPage) },
+  plugins: [reactFrameworkPlugin({ components: {} }), dynamicExperiencesPlugin()],
+} satisfies CreateClientOptions
+
+export function Page({ snapshot }) {
+  return (
+    <PickedProvider options={options} snapshot={snapshot}>
+      <ExperienceSlot name="page" />
+    </PickedProvider>
+  )
+}
+```
+
+```svelte [Svelte]
+<script lang="ts">
+  import type { CreateClientOptions } from '@picked/client'
+  import { dynamicExperiencesPlugin } from '@picked/client/plugins/dynamic-experiences'
+  import { adaptSvelteComponent, ExperienceSlot, setPickedContext } from '@picked/svelte'
+  import { svelteFrameworkPlugin } from '@picked/svelte/plugins/framework'
+  import CMSPage from './CMSPage.svelte'
+
+  const { snapshot } = $props()
+
+  const options = {
+    projectId: 'proj_123',
+    components: { CMSPage: adaptSvelteComponent(CMSPage) },
+    plugins: [svelteFrameworkPlugin({ components: {} }), dynamicExperiencesPlugin()],
+  } satisfies CreateClientOptions
+
+  setPickedContext({ options, snapshot })
+</script>
+
+<ExperienceSlot name="page" />
+```
+
+:::
+
+Point your page experience at the slot. Set its target selector to `.picked-slot-page`,
+and publish again.
+
+## 6. Check that a crawler can read it
+
+1. Read the answer from your server with `curl`, or with the view-source command of your
+   browser.
+2. Find your `title` in the HTML.
+
+Your title is in the first response, not in a script that the browser must run. A crawler
+and a social preview both read it.
+
+## What you built
+
+You have a page whose content lives in the Picked CMS and whose HTML comes from your
+server. An editor changes the copy in the dashboard and publishes. Your server serves the
+new content on the next request, and you deploy nothing.
+
+## Where to go next
+
+- [About server-side rendering](/explanation/why-server-side-rendering) — why the
+  snapshot exists, and what it carries.
+- [Server snapshot](/reference/sdk/ssr/serialize) — every `serialize()` parameter.
+- [Page and step layouts](/reference/dashboard/content/layouts) — every field type.
+- [Preview, cache, and crawlers](/reference/delivery-api/preview-caching-crawling) — how
+  a draft stays out of the search index.

package/dist/{dom-BwmTHeT7.js → dom-BqcToNL0.js}

@@ -72,9 +72,7 @@ function _(e, t, n, r) {
 			case "prepend":
 				e.prepend(a);
 				break;
-			case "append":
-				e.append(a);
-				break;
+			case "append": e.append(a);
 		}
 		i = a;
 	}

package/dist/{dom-CDrHc_j9.cjs → dom-DlLH3FxV.cjs}

@@ -1 +1 @@
-const e=require("./supports-DBzjGaWD.cjs");function t(t){return!e.f()||!e.i()?[]:Array.from(window.document.querySelectorAll(t)).filter(e=>e instanceof HTMLElement)}var n=`open`;function r(t){if(!e.u())throw Error(`Shadow DOM is not supported in this environment`);return t.attachShadow({mode:n})}function i(){return new Promise((t,n)=>{if(!e.i()){n();return}document.readyState===`loading`?document.addEventListener(`readystatechange`,()=>t(),{once:!0}):t()})}function a(e,t){let n=new MutationObserver(r=>{document.contains(e)||(n.disconnect(),t())});n.observe(document.body,{childList:!0,subtree:!0})}var o=`picked-root`,s=`picked-target`,c=`picked-root`;function l(e,n){return[...e,{selector:`${c}[experience-id="${n}"]`,placement:`replace`}].flatMap(e=>{let r=t(e.selector).filter(e=>!f(e,n)&&!p(e,n));return{...e,elements:r}})}function u(e,t,n){return e.flatMap(e=>e.elements.map(r=>h(r,e.placement,t,n)))}function d(e,t){e.classList.add(s),e.classList.add(`${s}-${t}`)}function f(e,t){return t?e.classList.contains(`${s}-${t}`):e.classList.contains(`${s}`)}function p(e,t){return t?e.classList.contains(`${o}-${t}`):e.classList.contains(o)}function m(e,t){let n=document.createElement(`div`);return n.style.display=`block`,n.classList.add(o),n.classList.add(`${o}-${e}`),n.classList.add(`${o}-${t}`),n}function h(e,t,n,r){let i,a=m(n,r);if(e instanceof Document)i=e.body.appendChild(a);else{switch(t){case`replace`:e.replaceWith(a);break;case`before`:e.before(a);break;case`after`:e.after(a);break;case`prepend`:e.prepend(a);break;case`append`:e.append(a);break}i=a}return i}Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"s",{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return u}});
+const e=require("./supports-DBzjGaWD.cjs");function t(t){return!e.f()||!e.i()?[]:Array.from(window.document.querySelectorAll(t)).filter(e=>e instanceof HTMLElement)}var n=`open`;function r(t){if(!e.u())throw Error(`Shadow DOM is not supported in this environment`);return t.attachShadow({mode:n})}function i(){return new Promise((t,n)=>{if(!e.i()){n();return}document.readyState===`loading`?document.addEventListener(`readystatechange`,()=>t(),{once:!0}):t()})}function a(e,t){let n=new MutationObserver(r=>{document.contains(e)||(n.disconnect(),t())});n.observe(document.body,{childList:!0,subtree:!0})}var o=`picked-root`,s=`picked-target`,c=`picked-root`;function l(e,n){return[...e,{selector:`${c}[experience-id="${n}"]`,placement:`replace`}].flatMap(e=>{let r=t(e.selector).filter(e=>!f(e,n)&&!p(e,n));return{...e,elements:r}})}function u(e,t,n){return e.flatMap(e=>e.elements.map(r=>h(r,e.placement,t,n)))}function d(e,t){e.classList.add(s),e.classList.add(`${s}-${t}`)}function f(e,t){return t?e.classList.contains(`${s}-${t}`):e.classList.contains(`${s}`)}function p(e,t){return t?e.classList.contains(`${o}-${t}`):e.classList.contains(o)}function m(e,t){let n=document.createElement(`div`);return n.style.display=`block`,n.classList.add(o),n.classList.add(`${o}-${e}`),n.classList.add(`${o}-${t}`),n}function h(e,t,n,r){let i,a=m(n,r);if(e instanceof Document)i=e.body.appendChild(a);else{switch(t){case`replace`:e.replaceWith(a);break;case`before`:e.before(a);break;case`after`:e.after(a);break;case`prepend`:e.prepend(a);break;case`append`:e.append(a)}i=a}return i}Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"s",{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return u}});

package/dist/esm/form/index.js

@@ -9,7 +9,7 @@ function c(e, t, n) {
 		return;
 	}
 	if (Array.isArray(r) && Array.isArray(n) && n.length > 0) {
-		typeof r[0] == "string" ? e[t] = [...r, ...n].map(String) : typeof r[0] == "number" ? e[t] = [...r, ...n].map(Number) : typeof r[0] == "boolean" ? e[t] = [...r, ...n].map((e) => !!e) : e[t] = n;
+		e[t] = typeof r[0] == "string" ? [...r, ...n].map(String) : typeof r[0] == "number" ? [...r, ...n].map(Number) : typeof r[0] == "boolean" ? [...r, ...n].map((e) => !!e) : n;
 		return;
 	}
 	e[t] = n;
@@ -31,9 +31,7 @@ function l(e, t) {
 				case "number":
 					c(r, e.key, e.multiple ? [Number(t)] : Number(t));
 					break;
-				case "boolean":
-					c(r, e.key, e.multiple ? [t === "true"] : t === "true");
-					break;
+				case "boolean": c(r, e.key, e.multiple ? [t === "true"] : t === "true");
 			}
 		});
 	}), r;