@picked/svelte 0.0.101-next.2 → 0.0.101-next.3
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.
- package/README.md +51 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
# @picked/svelte
|
|
2
|
+
|
|
3
|
+
Renders Picked experiences with Svelte components, and reads the client from Svelte through
|
|
4
|
+
functions and components.
|
|
5
|
+
|
|
6
|
+
## Install
|
|
7
|
+
|
|
8
|
+
```bash
|
|
9
|
+
npm install picked @picked/svelte
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
Requires Svelte 5.55 or later.
|
|
13
|
+
|
|
14
|
+
## Usage
|
|
15
|
+
|
|
16
|
+
```typescript
|
|
17
|
+
import { createClient } from 'picked'
|
|
18
|
+
import { adaptSvelteComponent } from '@picked/svelte'
|
|
19
|
+
import { svelteFrameworkPlugin } from '@picked/svelte/plugins/framework'
|
|
20
|
+
import { dynamicExperiencesPlugin } from '@picked/client/plugins/dynamic-experiences'
|
|
21
|
+
import MyWidget from './MyWidget.svelte'
|
|
22
|
+
|
|
23
|
+
export const picked = createClient({
|
|
24
|
+
projectId: 'your-project-id',
|
|
25
|
+
plugins: [svelteFrameworkPlugin({ components: {} }), dynamicExperiencesPlugin()],
|
|
26
|
+
components: {
|
|
27
|
+
MyWidget: adaptSvelteComponent(MyWidget),
|
|
28
|
+
},
|
|
29
|
+
})
|
|
30
|
+
|
|
31
|
+
picked.start()
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
A key in `components` matches the component name of an experience in the dashboard.
|
|
35
|
+
|
|
36
|
+
| Import | Gives you |
|
|
37
|
+
| ---------------------------------- | --------------------------------------------------------------------------------------- |
|
|
38
|
+
| `@picked/svelte` | `adaptSvelteComponent`, `setPickedContext`, `ExperienceSlot`, `HtmlRender`, `LazyImage` |
|
|
39
|
+
| `@picked/svelte/plugins/framework` | `svelteFrameworkPlugin({ components, stylesheets?, css? })` |
|
|
40
|
+
| `@picked/svelte/plugins/devtools` | `svelteDevtoolsPlugin({ enabled?, customTools? })`, for the Picked Chrome extension |
|
|
41
|
+
| `@picked/svelte/hooks` | `getStep`, `getFeature`, `getContent`, `getReference` and the other functions |
|
|
42
|
+
| `@picked/svelte/router` | `StepRouter`, `Step` |
|
|
43
|
+
| `@picked/svelte/form` | `getForm` |
|
|
44
|
+
| `@picked/svelte/server` | The server renderer for server-side rendering |
|
|
45
|
+
|
|
46
|
+
## Docs
|
|
47
|
+
|
|
48
|
+
- **Web:** [Svelte](https://docs.picked.app/reference/sdk/svelte)
|
|
49
|
+
- **Local:** `node_modules/picked/docs/reference/sdk/svelte.md`. The `picked` package carries every page under `node_modules/picked/docs/`.
|
|
50
|
+
- **CLI:** `npx picked docs read /reference/sdk/svelte`. `npx picked docs list [words]` lists the pages.
|
|
51
|
+
- **MCP:** call `read_picked_doc` with `{ "path": "/reference/sdk/svelte" }`; `list_picked_docs` lists the pages. Add the server with `claude mcp add --transport http picked https://api.picked.app/mcp`, or see [How to connect the MCP server](https://docs.picked.app/how-to/connect-the-mcp-server) for other tools.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@picked/svelte",
|
|
3
|
-
"version": "0.0.101-next.
|
|
3
|
+
"version": "0.0.101-next.3",
|
|
4
4
|
"dependencies": {
|
|
5
5
|
"d3": "^7.9.0"
|
|
6
6
|
},
|
|
@@ -106,7 +106,7 @@
|
|
|
106
106
|
"license": "SEE LICENSE IN LICENSE",
|
|
107
107
|
"module": "./dist/index.js",
|
|
108
108
|
"peerDependencies": {
|
|
109
|
-
"@picked/client": "0.0.101-next.
|
|
109
|
+
"@picked/client": "0.0.101-next.3",
|
|
110
110
|
"effector": "^23.4.4",
|
|
111
111
|
"svelte": "^5.55.7"
|
|
112
112
|
},
|