@picked/svelte 0.0.1-dev.1789541668638 → 0.0.1-next.2

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.
Files changed (132) hide show
  1. package/dist/component.d.ts +5 -5
  2. package/dist/component.js +1 -1
  3. package/dist/context.js +1 -1
  4. package/dist/form/index.d.ts +15 -3
  5. package/dist/form/index.js +1 -1
  6. package/dist/hooks/client.d.ts +1 -1
  7. package/dist/hooks/client.js +1 -1
  8. package/dist/hooks/field.d.ts +5 -16
  9. package/dist/hooks/field.js +1 -1
  10. package/dist/hooks/index.d.ts +1 -9
  11. package/dist/hooks/index.js +1 -1
  12. package/dist/hooks/step.d.ts +15 -93
  13. package/dist/hooks/step.js +1 -1
  14. package/dist/hooks/storage.d.ts +2 -2
  15. package/dist/hooks/storage.js +1 -1
  16. package/dist/hooks/stores.d.ts +1 -1
  17. package/dist/hooks/stores.js +1 -1
  18. package/dist/index.d.ts +1 -8
  19. package/dist/index.js +1 -1
  20. package/dist/plugins/devtools/DevToolsExperience.svelte +53 -355
  21. package/dist/plugins/devtools/PickedLogo.svelte +58 -0
  22. package/dist/plugins/devtools/components/ExperienceInstanceListItem.svelte +4 -17
  23. package/dist/plugins/devtools/components/ExperienceInstancesTable.svelte +19 -26
  24. package/dist/plugins/devtools/components/Tabs.svelte +12 -69
  25. package/dist/plugins/devtools/experience.d.ts +1 -0
  26. package/dist/plugins/devtools/experience.js +1 -0
  27. package/dist/plugins/devtools/index.d.ts +0 -2
  28. package/dist/plugins/devtools/index.js +1 -1
  29. package/dist/plugins/devtools/plugin.d.ts +5 -37
  30. package/dist/plugins/devtools/plugin.js +1 -1
  31. package/dist/plugins/devtools/screens/components/ComponentsListScreen.svelte +14 -18
  32. package/dist/plugins/devtools/screens/experience-instances/ExperienceInstancesListScreen.svelte +3 -1
  33. package/dist/plugins/devtools/screens/experiences/ExperienceDetailsScreen.svelte +33 -31
  34. package/dist/plugins/devtools/screens/experiences/ExperienceExperienceInstancesListScreen.svelte +3 -1
  35. package/dist/plugins/devtools/screens/experiences/ExperienceTreeScreen.svelte +103 -293
  36. package/dist/plugins/devtools/screens/experiences/ExperiencesListScreen.svelte +1 -2
  37. package/dist/plugins/devtools/screens/frameworks/FrameworksListScreen.svelte +13 -15
  38. package/dist/plugins/devtools/screens/history/HistoryEntriesTable.svelte +16 -22
  39. package/dist/plugins/devtools/screens/history/HistoryEntryListItem.svelte +1 -7
  40. package/dist/plugins/devtools/screens/predicates/PredicatesListScreen.svelte +13 -15
  41. package/dist/plugins/devtools/screens/project/ProjectScreen.svelte +1 -46
  42. package/dist/plugins/framework/index.js +1 -1
  43. package/dist/plugins/framework/plugin.d.ts +4 -4
  44. package/dist/plugins/framework/plugin.js +1 -1
  45. package/dist/render/browser.d.ts +2 -35
  46. package/dist/render/browser.js +1 -1
  47. package/dist/render/server.d.ts +8 -22
  48. package/dist/render/server.js +1 -1
  49. package/dist/router/Step.svelte +4 -6
  50. package/dist/router/StepRouter.svelte +34 -14
  51. package/dist/router/context.d.ts +3 -3
  52. package/dist/router/context.js +1 -1
  53. package/dist/router/index.js +1 -1
  54. package/dist/server/index.d.ts +2 -2
  55. package/dist/server/index.js +1 -1
  56. package/dist/utils/array.js +1 -1
  57. package/dist/vite-env.d.js +1 -0
  58. package/package.json +33 -106
  59. package/dist/.tsbuildinfo +0 -1
  60. package/dist/_virtual/_vite/preload-helper.js +0 -1
  61. package/dist/components/LazyImage.svelte +0 -192
  62. package/dist/components/index.d.ts +0 -1
  63. package/dist/components/index.js +0 -1
  64. package/dist/experience/ExperienceHost.svelte +0 -112
  65. package/dist/experience/ExperienceSlot.svelte +0 -154
  66. package/dist/experience/HtmlRender.svelte +0 -52
  67. package/dist/experience/set-picked-context.d.ts +0 -29
  68. package/dist/experience/set-picked-context.js +0 -1
  69. package/dist/form/__tests__/CreateFormHarness.svelte +0 -30
  70. package/dist/form/create-form.js +0 -1
  71. package/dist/form/create-form.svelte.d.ts +0 -40
  72. package/dist/form/create-form.svelte.js +0 -1
  73. package/dist/form/get-form.d.ts +0 -30
  74. package/dist/form/get-form.js +0 -1
  75. package/dist/hooks/action.d.ts +0 -40
  76. package/dist/hooks/action.js +0 -1
  77. package/dist/hooks/content.d.ts +0 -18
  78. package/dist/hooks/content.js +0 -1
  79. package/dist/hooks/create-query/index.d.ts +0 -145
  80. package/dist/hooks/create-query/index.js +0 -1
  81. package/dist/hooks/events.d.ts +0 -2
  82. package/dist/hooks/events.js +0 -1
  83. package/dist/hooks/feature.d.ts +0 -47
  84. package/dist/hooks/feature.js +0 -1
  85. package/dist/hooks/predicate.d.ts +0 -3
  86. package/dist/hooks/predicate.js +0 -1
  87. package/dist/hooks/reference.d.ts +0 -61
  88. package/dist/hooks/reference.js +0 -1
  89. package/dist/plugins/devtools/PickedIcon.svelte +0 -19
  90. package/dist/plugins/devtools/components/AdaptedToolHost.svelte +0 -103
  91. package/dist/plugins/devtools/customTools.d.ts +0 -27
  92. package/dist/plugins/devtools/customTools.js +0 -1
  93. package/dist/plugins/devtools/screens/config/ConfigScreen.svelte +0 -160
  94. package/dist/plugins/devtools/screens/content/ContentListScreen.svelte +0 -89
  95. package/dist/plugins/devtools/screens/custom-tools/CustomToolsScreen.svelte +0 -29
  96. package/dist/plugins/devtools/screens/events/EventListItem.svelte +0 -216
  97. package/dist/plugins/devtools/screens/events/EventsListScreen.svelte +0 -18
  98. package/dist/plugins/devtools/screens/events/EventsTable.svelte +0 -76
  99. package/dist/plugins/devtools/screens/features/FeaturesListScreen.svelte +0 -239
  100. package/dist/plugins/devtools/screens/fields/FieldTableRow.svelte +0 -276
  101. package/dist/plugins/devtools/screens/fields/FieldsListScreen.svelte +0 -12
  102. package/dist/plugins/devtools/screens/fields/FieldsTable.svelte +0 -78
  103. package/dist/plugins/devtools/screens/identity/IdentityScreen.svelte +0 -66
  104. package/dist/plugins/devtools/screens/responses/ResponseTableRow.svelte +0 -280
  105. package/dist/plugins/devtools/screens/responses/ResponsesListScreen.svelte +0 -12
  106. package/dist/plugins/devtools/screens/responses/ResponsesTable.svelte +0 -88
  107. package/dist/plugins/devtools/ui/actions/Button.svelte +0 -175
  108. package/dist/plugins/devtools/ui/actions/CopyButton.svelte +0 -88
  109. package/dist/plugins/devtools/ui/data/Badge.svelte +0 -62
  110. package/dist/plugins/devtools/ui/data/CodeBlock.svelte +0 -38
  111. package/dist/plugins/devtools/ui/data/DataTable.svelte +0 -144
  112. package/dist/plugins/devtools/ui/data/EmptyState.svelte +0 -26
  113. package/dist/plugins/devtools/ui/data/ExpandableRow.svelte +0 -66
  114. package/dist/plugins/devtools/ui/data/VisualizationContainer.svelte +0 -55
  115. package/dist/plugins/devtools/ui/feedback/Banner.svelte +0 -116
  116. package/dist/plugins/devtools/ui/feedback/Spinner.svelte +0 -79
  117. package/dist/plugins/devtools/ui/forms/Checkbox.svelte +0 -139
  118. package/dist/plugins/devtools/ui/forms/RadioGroup.svelte +0 -218
  119. package/dist/plugins/devtools/ui/forms/Select.svelte +0 -137
  120. package/dist/plugins/devtools/ui/forms/Switch.svelte +0 -158
  121. package/dist/plugins/devtools/ui/forms/TextField.svelte +0 -125
  122. package/dist/plugins/devtools/ui/index.d.ts +0 -22
  123. package/dist/plugins/devtools/ui/index.js +0 -1
  124. package/dist/plugins/devtools/ui/layout/Card.svelte +0 -55
  125. package/dist/plugins/devtools/ui/layout/Divider.svelte +0 -34
  126. package/dist/plugins/devtools/ui/layout/Spacer.svelte +0 -11
  127. package/dist/plugins/devtools/ui/layout/Stack.svelte +0 -129
  128. package/dist/plugins/devtools/ui/overlays/Tooltip.svelte +0 -90
  129. package/dist/plugins/devtools/ui/tokens.css +0 -144
  130. package/dist/plugins/devtools/ui/typography/Heading.svelte +0 -55
  131. package/dist/plugins/devtools/ui/typography/Text.svelte +0 -93
  132. package/dist/utils/ErrorBoundary.svelte +0 -27
@@ -1,26 +1,24 @@
1
1
  <script lang="ts">
2
2
  import { getPicked } from '../../../../hooks'
3
- import { Card, DataTable, EmptyState, Stack } from '../../ui'
4
3
 
5
4
  const client = getPicked()
6
5
 
7
6
  $: predicates = client.predicates.listStore
8
-
9
- const columns = [{ key: 'name', header: 'Name' }]
10
7
  </script>
11
8
 
12
- <Stack padding="medium">
13
- <Card sectioned>
14
- <DataTable columns={columns} rows={$predicates}>
15
- {#snippet row(item)}
16
- {@const predicate = item}
9
+ <div>
10
+ <table>
11
+ <thead>
12
+ <tr>
13
+ <th>Name</th>
14
+ </tr>
15
+ </thead>
16
+ <tbody>
17
+ {#each $predicates as predicate (predicate.name)}
17
18
  <tr>
18
19
  <td>{predicate.name}</td>
19
20
  </tr>
20
- {/snippet}
21
- {#snippet empty()}
22
- <EmptyState message="No predicates" />
23
- {/snippet}
24
- </DataTable>
25
- </Card>
26
- </Stack>
21
+ {/each}
22
+ </tbody>
23
+ </table>
24
+ </div>
@@ -1,46 +1 @@
1
- <script lang="ts">
2
- import { getPicked } from '../../../../hooks'
3
- import { Button, Card, CodeBlock, DataTable, Stack, Text } from '../../ui'
4
-
5
- const client = getPicked()
6
-
7
- const dashboardProjectUrl = `${client.dashboardUrl}/p/${client.projectId}`
8
-
9
- const columns = [
10
- { key: 'label', header: 'Property' },
11
- { key: 'value', header: 'Value' },
12
- ]
13
-
14
- const rows = [
15
- { label: 'Project ID', value: client.projectId },
16
- { label: 'API URL', value: client.apiUrl },
17
- { label: 'Dashboard URL', value: client.dashboardUrl },
18
- ]
19
- </script>
20
-
21
- <Stack direction="vertical" gap="medium" padding="medium">
22
- <Text size="caption" color="subdued">
23
- Project configuration for this Picked client instance.
24
- </Text>
25
-
26
- <Card sectioned>
27
- <DataTable {columns} {rows}>
28
- {#snippet row(item)}
29
- <tr>
30
- <td>
31
- <Text size="small" weight="medium">{item.label}</Text>
32
- </td>
33
- <td>
34
- <CodeBlock code={item.value} inline />
35
- </td>
36
- </tr>
37
- {/snippet}
38
- </DataTable>
39
- </Card>
40
-
41
- <Stack direction="horizontal" gap="small">
42
- <Button variant="primary" size="small" href={dashboardProjectUrl} target="_blank">
43
- Open in Dashboard
44
- </Button>
45
- </Stack>
46
- </Stack>
1
+ <p>todo: project</p>
@@ -1 +1 @@
1
- import{svelteFrameworkPlugin as e}from"./plugin.js";export{e as svelteFrameworkPlugin};
1
+ import{svelteFrameworkPlugin as o}from"./plugin.js";export{o as svelteFrameworkPlugin};
@@ -1,6 +1,5 @@
1
- /** @file Svelte framework plugin that registers the Svelte renderer and unmounter with the Picked client. */
2
- import type { AdaptableComponents, AdaptedComponentStyle, Plugin } from '@picked/client';
3
- import { type ComponentWithProps } from '../../component';
1
+ import { AdaptableComponents, AdaptedComponentStyle, Plugin } from '@picked/client';
2
+ import { ComponentWithProps } from '../../component';
4
3
  export type AdapterComponents = Partial<Record<keyof AdaptableComponents, {
5
4
  component: ComponentWithProps;
6
5
  style?: AdaptedComponentStyle;
@@ -15,8 +14,9 @@ export interface SvelteFrameworkPluginOptions {
15
14
  * This plugin registers the Svelte framework and allows rendering Svelte components
16
15
  * with the client's experience data.
17
16
  *
18
- * @param {SvelteFrameworkPluginOptions} options - Configuration options for the Svelte plugin.
17
+ * @param {SvelteFrameworkPluginOptions} options - Configuration options for the Svelte plugin
19
18
  * @returns {Plugin} The plugin.
19
+ *
20
20
  * @example
21
21
  * ```typescript
22
22
  * createClient({
@@ -1 +1 @@
1
- import{adaptSvelteComponent as e}from"../../component.js";import{renderSvelteComponent as t,unRenderSvelteComponent as n}from"../../render/browser.js";var r=r=>({name:`svelte-framework`,setup:i=>{i.registerFramework({name:`svelte`,render(...e){return t(...e,{stylesheets:r.stylesheets,css:r.css})},unmount:e=>n(e)});let a=r.components.experience;a&&i.registerComponent(`experience`,e(a.component,a.style))}});export{r as svelteFrameworkPlugin};
1
+ import{adaptSvelteComponent as o}from"../../component.js";import{renderSvelteComponent as s}from"../../render/browser.js";const c=e=>({name:"svelte-framework",setup:t=>{t.registerFramework({name:"svelte",render(...n){return s(...n,{stylesheets:e.stylesheets,css:e.css})}});const r=e.components.experience;r&&t.registerComponent("experience",o(r.component,r.style))}});export{c as svelteFrameworkPlugin};
@@ -1,40 +1,7 @@
1
- /** @file Browser-side helpers that mount and unmount Svelte experience components into shadow roots. */
2
- import type { AdaptedComponent, ExperienceInstance, Picked } from '@picked/client';
3
- /**
4
- * Builds the Svelte context map that exposes the client and experience to rendered components.
5
- *
6
- * @param {Picked} client - The Picked client to expose via context.
7
- * @param {ExperienceInstance} experience - The experience instance to expose via context.
8
- * @returns {Map<symbol, Picked | ExperienceInstance>} The context map keyed by the client and experience symbols.
9
- * @example
10
- * mount(Comp, { target, context: createContext(client, experience) })
11
- */
1
+ import { AdaptedComponent, ExperienceInstance, Picked } from '@picked/client';
12
2
  export declare function createContext(client: Picked, experience: ExperienceInstance): Map<symbol, Picked | ExperienceInstance>;
13
- /**
14
- * Renders an adapted Svelte component into a shadow root, injecting its stylesheets and inline CSS.
15
- *
16
- * @param {ShadowRoot} shadowRoot - The shadow root to render into.
17
- * @param {AdaptedComponent<string, unknown>} component - The adapted component to render.
18
- * @param {Picked} client - The Picked client.
19
- * @param {ExperienceInstance} experience - The experience instance.
20
- * @param {object} options - Stylesheets and inline CSS to inject into the shadow root.
21
- * @param {string[]} [options.stylesheets] - Stylesheet URLs to inject as `<link>` elements.
22
- * @param {string[]} [options.css] - Inline CSS blocks to inject as `<style>` elements.
23
- * @returns {Promise<void>} A promise that resolves once the component is mounted.
24
- * @throws {Error} When the component is not a valid adapted Svelte component.
25
- * @example
26
- * await renderSvelteComponent(shadowRoot, component, client, experience, {})
27
- */
28
3
  export declare const renderSvelteComponent: (shadowRoot: ShadowRoot, component: AdaptedComponent<string, unknown>, client: Picked, experience: ExperienceInstance, options: {
29
4
  stylesheets?: string[];
30
5
  css?: string[];
31
6
  }) => Promise<void>;
32
- /**
33
- * Unmounts a Svelte component previously rendered into the given shadow root and clears its tracked instance.
34
- *
35
- * @param {ShadowRoot} target - The shadow root the component was rendered into.
36
- * @returns {void} Nothing.
37
- * @example
38
- * unRenderSvelteComponent(host.shadowRoot)
39
- */
40
- export declare const unRenderSvelteComponent: (target: ShadowRoot) => void;
7
+ export declare const unRenderSvelteComponent: (target: Element) => void;
@@ -1 +1 @@
1
- import{isValidAdaptedComponent as e}from"../component.js";import{CLIENT_CONTEXT_KEY as t,EXPERIENCE_CONTEXT_KEY as n}from"../context.js";import{mergeArrays as r}from"../utils/array.js";import{mount as i,unmount as a}from"svelte";import{isLazyLoader as o}from"@picked/client";import s from"../utils/ErrorBoundary.svelte";var c=new WeakMap;function l(e,r){return new Map([[t,e],[n,r]])}var u=async(t,n,a,u,d)=>{if(!e(n))throw Error(`The component is invalid.`);let f=r(n.style?.sheets,d.stylesheets),p=r(n.style?.css,d.css);f.length&&f.forEach(e=>{let n=document.createElement(`link`);n.setAttribute(`rel`,`stylesheet`),n.setAttribute(`href`,e),n.setAttribute(`type`,`text/css`),n.setAttribute(`picked-injected`,`true`),t.appendChild(n)}),p.length&&p.forEach(e=>{let n=document.createElement(`style`);n.textContent=e,n.setAttribute(`type`,`text/css`),n.setAttribute(`picked-injected`,`true`),t.appendChild(n)});let m=e=>{let n=i(s,{target:t,props:{component:e,componentProps:{client:a,experience:u}},context:l(a,u)});c.set(t,n)};if(o(n.component)){let{default:e}=await n.component.load();m(e);return}if(n.component instanceof Promise){let{default:e}=await n.component;m(e);return}m(n.component)},d=e=>{let t=c.get(e);t&&(a(t),c.delete(e))};export{l as createContext,u as renderSvelteComponent,d as unRenderSvelteComponent};
1
+ import{mount as a}from"svelte";import{isValidAdaptedComponent as d}from"../component.js";import{CLIENT_CONTEXT_KEY as f,EXPERIENCE_CONTEXT_KEY as C}from"../context.js";import{mergeArrays as u}from"../utils/array.js";function E(r,e){return new Map([[f,r],[C,e]])}const g=async(r,e,n,o,i)=>{var m,p;if(!d(e))throw new Error("The component is invalid.");const c=u((m=e.style)==null?void 0:m.sheets,i.stylesheets),l=u((p=e.style)==null?void 0:p.css,i.css);if(c.length&&c.forEach(s=>{const t=document.createElement("link");t.setAttribute("rel","stylesheet"),t.setAttribute("href",s),t.setAttribute("type","text/css"),t.setAttribute("picked-injected","true"),r.appendChild(t)}),l.length&&l.forEach(s=>{const t=document.createElement("style");t.textContent=s,t.setAttribute("type","text/css"),t.setAttribute("picked-injected","true"),r.appendChild(t)}),e.component instanceof Promise){const{default:s}=await e.component;a(s,{target:r,props:{client:n,experience:o},context:E(n,o)});return}a(e.component,{target:r,props:{client:n,experience:o},context:E(n,o)})},T=r=>{};export{E as createContext,g as renderSvelteComponent,T as unRenderSvelteComponent};
@@ -1,26 +1,12 @@
1
- import type { AdaptedComponent, ExperienceInstance, Picked } from '@picked/client';
2
- /**
3
- * Result of server-side rendering a Svelte component.
4
- * Matches svelte/server's RenderOutput with additional stylesheet/css arrays.
5
- */
6
- export interface StaticRenderResult {
7
- /** Stylesheets to include in the document */
8
- stylesheets: string[];
9
- /** Inline CSS to include in the document */
10
- css: string[];
11
- /** HTML that goes into the `<head>` */
12
- head: string;
13
- /** @deprecated use `body` instead */
14
- html: string;
15
- /** HTML that goes somewhere into the `<body>` */
16
- body: string;
17
- /** CSP hashes for inline scripts */
18
- hashes: {
19
- script: `sha256-${string}`[];
20
- };
21
- }
1
+ import { AdaptedComponent, ExperienceInstance, Picked } from '@picked/client';
22
2
  export declare function createContext(client: Picked, experience: ExperienceInstance): Map<symbol, Picked | ExperienceInstance>;
23
3
  export declare const staticRenderSvelteComponent: (component: AdaptedComponent<string, unknown>, client: Picked, experience: ExperienceInstance, options: {
24
4
  stylesheets?: string[];
25
5
  css?: string[];
26
- }) => Promise<StaticRenderResult>;
6
+ }) => Promise<{
7
+ head: string;
8
+ html: string;
9
+ body: string;
10
+ stylesheets: string[];
11
+ css: string[];
12
+ }>;
@@ -1 +1 @@
1
- import{isValidAdaptedComponent as e}from"../component.js";import{CLIENT_CONTEXT_KEY as t,EXPERIENCE_CONTEXT_KEY as n}from"../context.js";import{mergeArrays as r}from"../utils/array.js";import{isLazyLoader as i}from"@picked/client";import{render as a}from"svelte/server";function o(e,r){return new Map([[t,e],[n,r]])}var s=async(t,n,s,c)=>{if(!e(t))throw Error(`The component is invalid.`);let l=r(t.style?.sheets,c.stylesheets),u=r(t.style?.css,c.css),d;d=i(t.component)?(await t.component.load()).default:t.component instanceof Promise?(await t.component).default:t.component;let f=a(d,{props:{client:n,experience:s},context:o(n,s)});return{stylesheets:l,css:u,head:f.head,html:f.html,body:f.body,hashes:f.hashes}};export{o as createContext,s as staticRenderSvelteComponent};
1
+ import{render as m}from"svelte/server";import{isValidAdaptedComponent as C}from"../component.js";import{CLIENT_CONTEXT_KEY as c,EXPERIENCE_CONTEXT_KEY as l}from"../context.js";import{mergeArrays as p}from"../utils/array.js";function E(t,s){return new Map([[c,t],[l,s]])}const w=async(t,s,r,o)=>{var n,a;if(!C(t))throw new Error("The component is invalid.");const d=p((n=t.style)==null?void 0:n.sheets,o.stylesheets),f=p((a=t.style)==null?void 0:a.css,o.css);let e;if(t.component instanceof Promise){const{default:i}=await t.component;e=m(i,{props:{client:s,experience:r},context:E(s,r)})}else e=m(t.component,{props:{client:s,experience:r},context:E(s,r)});return{stylesheets:d,css:f,...e}};export{E as createContext,w as staticRenderSvelteComponent};
@@ -1,25 +1,23 @@
1
1
  <script lang="ts">
2
- /** @file Step component that registers a step with the router and renders its content. */
3
2
  import { type Component, type Snippet } from 'svelte'
4
3
  import { setStepContext } from '../hooks'
5
4
  import { getStepRouter } from './context'
6
5
 
7
6
  interface Props {
8
- key: string
7
+ id: string
9
8
  component?: Component | Promise<Component> | Promise<{ default: Component }>
10
9
  children?: Snippet
11
10
  }
12
11
 
13
- const { key, component, children }: Props = $props()
14
-
12
+ const { id, component, children }: Props = $props()
15
13
 
16
14
  const step = {
17
- key,
15
+ id,
18
16
  }
19
17
 
20
18
  const { registerStep, unregisterStep } = getStepRouter()
21
19
 
22
- setStepContext(key)
20
+ setStepContext(id)
23
21
 
24
22
  $effect(() => {
25
23
  registerStep(step)
@@ -1,6 +1,6 @@
1
1
  <script lang="ts">
2
- /** @file Root router component that manages step registration and active step detection via Effector. */
3
- import { combine, createEvent, createStore } from 'effector'
2
+ import { writable } from 'svelte/store'
3
+ import { supportsWindow } from '@picked/client'
4
4
  import { getExperience } from '../hooks'
5
5
  import { setStepRouter, type Step } from './context'
6
6
 
@@ -8,25 +8,45 @@
8
8
 
9
9
  const { currentStepStore } = experience
10
10
 
11
- const stepsStore = createStore<Step[]>([])
11
+ const activeStep = writable<Step | null>(null)
12
+ let hasActiveStep = false
13
+ const steps = writable<Step[]>([])
12
14
 
13
- const registerStep = createEvent<Step>()
14
- const unregisterStep = createEvent<Step>()
15
+ const registerStep = (step: Step) => {
16
+ // todo: getIsSSR context
15
17
 
16
- stepsStore
17
- .on(registerStep, (state, step) => [...state, step])
18
- .on(unregisterStep, (state, step) => state.filter((s) => s !== step))
18
+ if (!supportsWindow()) {
19
+ // In SSR we should set the activeStep immediately if it is a match.
20
+ // If there are more Routes being registered after a match is found,
21
+ // we just skip them.
22
+ if (hasActiveStep) return
19
23
 
20
- const activeStepStore = combine(
21
- { steps: stepsStore, currentStep: currentStepStore },
22
- ({ steps, currentStep }) => steps.find((s) => s.key === currentStep?.key) ?? null,
23
- )
24
+ const isMatchingStep = step.id === $currentStepStore?.id
25
+
26
+ if (isMatchingStep) {
27
+ activeStep.set(step)
28
+ hasActiveStep = true
29
+ }
30
+ } else {
31
+ steps.update((steps) => [...steps, step])
32
+ }
33
+ }
34
+
35
+ const unregisterStep = (step: Step) => {
36
+ steps.update((st) => st.filter((s) => s !== step))
37
+ }
38
+
39
+ $: {
40
+ activeStep.set($steps.find((s) => s.id === $currentStepStore?.id) || null)
41
+ }
24
42
 
25
43
  setStepRouter({
26
44
  registerStep,
27
45
  unregisterStep,
28
- activeStep: activeStepStore,
46
+ activeStep,
29
47
  })
30
48
  </script>
31
49
 
32
- <slot />
50
+ {#if $currentStepStore?.id}
51
+ <slot />
52
+ {/if}
@@ -1,9 +1,9 @@
1
- import type { Store } from 'effector';
1
+ import { Writable } from 'svelte/store';
2
2
  export interface Step {
3
- key: string;
3
+ id: string;
4
4
  }
5
5
  interface ContextOptions {
6
- activeStep: Store<Step | null>;
6
+ activeStep?: Writable<Step | null>;
7
7
  unregisterStep: (step: Step) => void;
8
8
  registerStep: (step: Step) => void;
9
9
  }
@@ -1 +1 @@
1
- import{getContext as e,setContext as t}from"svelte";var n=Symbol(`router`),r=e=>t(n,e),i=()=>e(n);export{i as getStepRouter,r as setStepRouter};
1
+ import{getContext as o,setContext as r}from"svelte";const t=Symbol("router"),s=e=>r(t,e),p=()=>o(t);export{p as getStepRouter,s as setStepRouter};
@@ -1 +1 @@
1
- import e from"./StepRouter.svelte";import t from"./Step.svelte";export{t as Step,e as StepRouter};
1
+ import{default as o}from"./StepRouter.svelte";import{default as a}from"./Step.svelte";export{a as Step,o as StepRouter};
@@ -1,3 +1,3 @@
1
- import type { Renderer } from '@picked/client/server';
2
- import type { AdaptedComponent } from '@picked/client';
1
+ import { Renderer } from '@picked/client/server';
2
+ import { AdaptedComponent } from '@picked/client';
3
3
  export declare const renderer: Renderer<AdaptedComponent<string, unknown>>;
@@ -1 +1 @@
1
- import{isValidAdaptedComponent as e}from"../component.js";import{staticRenderSvelteComponent as t}from"../render/server.js";var n={isValidComponent:e,render:async(e,n,r)=>{let i=await t(e,n,r,{});return{head:i.head,body:i.body}}};export{n as renderer};
1
+ import{isValidAdaptedComponent as n}from"../component.js";import{staticRenderSvelteComponent as d}from"../render/server.js";const m={isValidComponent:n,render:async(o,t,r)=>{const e=await d(o,t,r,{});return{head:e.head,body:e.body}}};export{m as renderer};
@@ -1 +1 @@
1
- var e=(e,t)=>[...e||[],...t||[]];export{e as mergeArrays};
1
+ const t=(r,e)=>[...r||[],...e||[]];export{t as mergeArrays};
@@ -0,0 +1 @@
1
+
package/package.json CHANGED
@@ -1,165 +1,92 @@
1
1
  {
2
2
  "name": "@picked/svelte",
3
- "version": "0.0.1-dev.1789541668638",
3
+ "version": "0.0.1-next.2",
4
4
  "dependencies": {
5
5
  "d3": "^7.9.0"
6
6
  },
7
7
  "devDependencies": {
8
- "@picked/analytics": "workspace:*",
9
8
  "@picked/client": "workspace:*",
10
9
  "@repo/eslint-config": "workspace:*",
11
10
  "@repo/typescript-config": "workspace:*",
12
- "@size-limit/file": "^12.1.0",
13
- "@sveltejs/vite-plugin-svelte": "^7.2.0",
14
- "@tsconfig/svelte": "^5.0.8",
11
+ "@sveltejs/package": "^2.3.11",
12
+ "@sveltejs/vite-plugin-svelte": "^5.1.0",
13
+ "@tsconfig/svelte": "^5.0.4",
15
14
  "@types/d3": "^7.4.3",
16
- "@types/node": "^24",
17
- "@vitest/coverage-v8": "^4.1.11",
18
- "effector": "^23.4.4",
15
+ "@types/node": "^22",
16
+ "effector": "^23.3.0",
19
17
  "fast-glob": "^3.3.3",
20
- "happy-dom": "^20.11.1",
21
- "size-limit": "^12.1.0",
22
- "svelte": "^5.56.8",
23
- "svelte-check": "^4.7.4",
24
- "typedoc": "^0.28.20",
25
- "typedoc-plugin-markdown": "^4.12.0",
26
- "vite": "^8.2.0",
27
- "vitest": "^4.1.10"
18
+ "svelte-check": "^4.2.2",
19
+ "typedoc": "^0.28.5",
20
+ "typedoc-plugin-markdown": "^4.6.3",
21
+ "vite": "^6.3.5",
22
+ "vite-plugin-dts": "^4.5.4"
28
23
  },
29
24
  "exports": {
30
25
  ".": {
31
26
  "types": "./dist/index.d.ts",
32
27
  "import": "./dist/index.js",
33
- "svelte": "./dist/index.js",
34
- "default": "./dist/index.js"
28
+ "default": "./dist/index.js",
29
+ "svelte": "./dist/index.js"
35
30
  },
36
31
  "./server": {
37
32
  "types": "./dist/server/index.d.ts",
38
33
  "import": "./dist/server/index.js",
39
- "svelte": "./dist/server/index.js",
40
- "default": "./dist/server/index.js"
34
+ "default": "./dist/server/index.js",
35
+ "svelte": "./dist/server/index.js"
41
36
  },
42
37
  "./router": {
43
38
  "types": "./dist/router/index.d.ts",
44
39
  "import": "./dist/router/index.js",
45
- "svelte": "./dist/router/index.js",
46
- "default": "./dist/router/index.js"
40
+ "default": "./dist/router/index.js",
41
+ "svelte": "./dist/router/index.js"
47
42
  },
48
43
  "./form": {
49
44
  "types": "./dist/form/index.d.ts",
50
45
  "import": "./dist/form/index.js",
51
- "svelte": "./dist/form/index.js",
52
- "default": "./dist/form/index.js"
46
+ "default": "./dist/form/index.js",
47
+ "svelte": "./dist/form/index.js"
53
48
  },
54
49
  "./hooks": {
55
50
  "types": "./dist/hooks/index.d.ts",
56
51
  "import": "./dist/hooks/index.js",
57
- "svelte": "./dist/hooks/index.js",
58
- "default": "./dist/hooks/index.js"
52
+ "default": "./dist/hooks/index.js",
53
+ "svelte": "./dist/hooks/index.js"
59
54
  },
60
55
  "./plugins/framework": {
61
56
  "types": "./dist/plugins/framework/index.d.ts",
62
57
  "import": "./dist/plugins/framework/index.js",
63
- "svelte": "./dist/plugins/framework/index.js",
64
- "default": "./dist/plugins/framework/index.js"
58
+ "default": "./dist/plugins/framework/index.js",
59
+ "svelte": "./dist/plugins/framework/index.js"
65
60
  },
66
61
  "./plugins/devtools": {
67
62
  "types": "./dist/plugins/devtools/index.d.ts",
68
63
  "import": "./dist/plugins/devtools/index.js",
69
- "svelte": "./dist/plugins/devtools/index.js",
70
- "default": "./dist/plugins/devtools/index.js"
64
+ "default": "./dist/plugins/devtools/index.js",
65
+ "svelte": "./dist/plugins/devtools/index.js"
71
66
  }
72
67
  },
73
68
  "files": [
74
69
  "dist"
75
70
  ],
76
- "knip": {
77
- "ignoreBinaries": [
78
- "attw",
79
- "eslint",
80
- "jscpd",
81
- "knip",
82
- "tsgo"
83
- ],
84
- "entry": [
85
- "src/index.ts",
86
- "src/server/index.ts",
87
- "src/router/index.ts",
88
- "src/form/index.ts",
89
- "src/hooks/index.ts",
90
- "src/plugins/framework/index.ts",
91
- "src/plugins/devtools/index.ts",
92
- "src/plugins/devtools/ui/index.ts"
93
- ],
94
- "ignore": [
95
- "eslint.config.js"
96
- ],
97
- "ignoreDependencies": [
98
- "@picked/analytics",
99
- "@picked/client",
100
- "@repo/eslint-config",
101
- "@repo/typescript-config",
102
- "@tsconfig/svelte"
103
- ],
104
- "ignoreExportsUsedInFile": true
105
- },
106
71
  "module": "./dist/index.js",
107
72
  "peerDependencies": {
108
- "@picked/client": "0.0.1-dev.1789541668638",
109
- "effector": "^23.4.4",
110
- "svelte": "^5.15.0"
73
+ "@picked/client": "0.0.1-next.2",
74
+ "effector": "^23.3.0",
75
+ "svelte": "^5.34.3"
111
76
  },
112
77
  "private": false,
113
78
  "scripts": {
114
- "build": "vite build && tsgo -p tsconfig.build.json",
79
+ "build": "vite build",
115
80
  "build:docs": "pnpm typedoc",
116
- "check": "pnpm type-check && pnpm lint && pnpm svelte-check && pnpm knip && pnpm jscpd",
117
- "dev": "node ../../scripts/sdk-watch-build.mjs",
118
- "jscpd": "jscpd src",
119
- "knip": "knip",
120
- "lint": "if [ \"$AGENT\" = \"true\" ]; then echo \"[AGENT HINT] Prefer running lint on specific files from the repo root: node scripts/lint-files.js <files>\"; fi && eslint . --cache --cache-location node_modules/.cache/eslint",
81
+ "dev": "vite build --watch",
82
+ "lint": "eslint .",
121
83
  "lint-files": "eslint",
122
84
  "lint:format": "eslint . --fix",
123
- "lint:report": "eslint . --cache --cache-location node_modules/.cache/eslint -o './.reports/eslint.json' -f json || [ -f './.reports/eslint.json' ]",
124
- "size": "size-limit",
125
- "svelte-check": "svelte-check --tsconfig ./tsconfig.json",
85
+ "lint:report": "eslint . -o './.reports/eslint.json' -f json || [ -f './.reports/eslint.json' ]",
126
86
  "svelte-check:report": "mkdir -p ./.reports && pnpm svelte-check --tsconfig ./tsconfig.json --output=machine > ./.reports/svelte-check.txt || [ -f './.reports/svelte-check.txt' ]",
127
- "test": "vitest run",
128
- "test:coverage": "../../scripts/vitest-coverage.sh",
129
87
  "test:packaged-types": "attw --pack",
130
- "test:watch": "vitest",
131
- "type-check": "tsgo -p . --noEmit"
88
+ "type-check": "tsc -p . --noEmit"
132
89
  },
133
- "size-limit": [
134
- {
135
- "path": "dist/index.js",
136
- "limit": "10 kB"
137
- },
138
- {
139
- "path": "dist/server/index.js",
140
- "limit": "10 kB"
141
- },
142
- {
143
- "path": "dist/router/index.js",
144
- "limit": "5 kB"
145
- },
146
- {
147
- "path": "dist/form/index.js",
148
- "limit": "5 kB"
149
- },
150
- {
151
- "path": "dist/hooks/index.js",
152
- "limit": "5 kB"
153
- },
154
- {
155
- "path": "dist/plugins/framework/index.js",
156
- "limit": "5 kB"
157
- },
158
- {
159
- "path": "dist/plugins/devtools/index.js",
160
- "limit": "5 kB"
161
- }
162
- ],
163
90
  "svelte": "./dist/index.js",
164
91
  "type": "module",
165
92
  "types": "./dist/index.d.ts"