@picked/svelte 0.0.1-dev.1765928585401 → 0.0.1-dev.1765971320697

package/dist/components/LazyImage.svelte

@@ -0,0 +1,226 @@
+<script lang="ts">
+  import type { HTMLImgAttributes } from 'svelte/elements'
+  import { onMount } from 'svelte'
+
+  type CommonProps = Omit<HTMLImgAttributes, 'src' | 'loading' | 'width' | 'height'> & {
+    src: string
+    loading?: 'eager' | 'lazy'
+    alt: string
+    sizes?: string
+    objectFit?: string
+    loader?: (params: { src: string; width: number }) => string | undefined
+  }
+
+  type FillProps = {
+    fill: true
+    width?: never
+    height?: never
+  }
+
+  type FixedSizeProps = {
+    fill?: false
+    width: number
+    height: number
+  }
+
+  type Props = (CommonProps & FillProps) | (CommonProps & FixedSizeProps)
+
+  const {
+    src,
+    width,
+    height,
+    loading = 'lazy',
+    alt,
+    sizes = '100vw',
+    objectFit = 'cover',
+    fill = false,
+    loader,
+    ...restProps
+  }: Props = $props()
+
+  let imgElement = $state<HTMLImageElement | undefined>(undefined)
+  let placeholderElement = $state<HTMLDivElement | undefined>(undefined)
+  let isLoaded = $state(false)
+  let isInView = $state(false)
+  let observer: IntersectionObserver | undefined
+
+  const aspectRatio = $derived.by(() =>
+    !fill && typeof width === 'number' && typeof height === 'number' && height !== 0
+      ? width / height
+      : undefined,
+  )
+
+  const SUPPORTED_SIZES = [
+    16, 32, 48, 64, 96, 128, 256, 384, 640, 750, 828, 1080, 1200, 1920, 2048, 3840,
+  ]
+
+  function findClosestSize(targetSize: number): number {
+    const roundedTargetSize = Math.round(targetSize)
+    return SUPPORTED_SIZES.reduce(
+      (prev, curr) =>
+        Math.abs(curr - roundedTargetSize) < Math.abs(prev - roundedTargetSize) ? curr : prev,
+      SUPPORTED_SIZES[0],
+    )
+  }
+
+  function isConvincelyDomain(url: URL): boolean {
+    try {
+      return url.hostname.endsWith('.convincely.io')
+    } catch {
+      return false
+    }
+  }
+
+  function isShopifyDomain(url: URL): boolean {
+    try {
+      return url.hostname === 'cdn.shopify.com'
+    } catch {
+      return false
+    }
+  }
+
+  /**
+   * Add dpl param to Convincely domain URLs for deployment-specific routing.
+   */
+  function addDplParamIfNeeded(imageSrc: string): string {
+    try {
+      const url = new URL(imageSrc, import.meta.url)
+      
+      if (isConvincelyDomain(url)) {
+        // Check for Vercel deployment ID (works in both browser and server contexts)
+        const vercelDeploymentId = typeof import.meta.env !== 'undefined' 
+          ? import.meta.env.VERCEL_DEPLOYMENT_ID 
+          : undefined
+        const vercelSkewProtection = typeof import.meta.env !== 'undefined'
+          ? import.meta.env.VERCEL_SKEW_PROTECTION_ENABLED
+          : undefined
+
+        if (vercelDeploymentId && vercelSkewProtection === '1') {
+          url.searchParams.set('dpl', vercelDeploymentId)
+        }
+        return url.toString()
+      }
+      
+      return imageSrc
+    } catch {
+      return imageSrc
+    }
+  }
+
+  function getOptimizedImageUrl(imageSrc: string, targetWidth: number): string {
+    const width = findClosestSize(targetWidth)
+    
+    try {
+      const url = new URL(imageSrc, import.meta.url)
+      
+      // If it's a Shopify domain and a custom loader is provided, use the loader
+      if (isShopifyDomain(url) && loader) {
+        const customUrl = loader({ src: imageSrc, width })
+        if (customUrl) return customUrl
+      }
+    } catch {
+      // If URL parsing fails, continue with default behavior
+    }
+
+    // Default optimization: use img.convincely.io for all images
+    const imgUrl = getImgUrl(imageSrc)
+    const encodedUrl = encodeURIComponent(imgUrl)
+    return `https://img.convincely.io/_next/image?url=${encodedUrl}&w=${width}&q=75`
+  }
+
+  function getImgUrl(imageSrc: string): string {
+    if (imageSrc.startsWith('data:')) {
+      return imageSrc
+    }
+
+    const baseUrl = new URL(import.meta.url).origin
+    return imageSrc.startsWith('http') ? imageSrc : `${baseUrl}${imageSrc}`
+  }
+
+  // Add dpl param to src if it's a Convincely domain
+  const processedSrc = $derived(addDplParamIfNeeded(src))
+
+  function handleLoad() {
+    isLoaded = true
+  }
+
+  onMount(() => {
+    if (loading === 'lazy') {
+      const elementToObserve = placeholderElement || imgElement
+      if (elementToObserve) {
+        observer = new IntersectionObserver(
+          (entries) => {
+            entries.forEach((entry) => {
+              if (entry.isIntersecting) {
+                isInView = true
+                observer?.unobserve(entry.target)
+              }
+            })
+          },
+          {
+            rootMargin: '50px',
+          },
+        )
+        observer.observe(elementToObserve)
+
+        return () => {
+          observer?.disconnect()
+        }
+      }
+    } else if (loading === 'eager') {
+      isInView = true
+    }
+  })
+
+  const shouldLoadImage = $derived(loading === 'eager' || isInView)
+
+  const widthCandidates = $derived.by(() => {
+    if (typeof width === 'number' && Number.isFinite(width)) {
+      const filtered = SUPPORTED_SIZES.filter((w) => w <= width)
+      return filtered.length ? filtered : [width]
+    }
+
+    return SUPPORTED_SIZES
+  })
+
+  const srcSet = $derived.by(() =>
+    widthCandidates.map((w) => `${getOptimizedImageUrl(processedSrc, w)} ${w}w`).join(', '),
+  )
+
+  const fallbackSrc = $derived.by(() => getOptimizedImageUrl(processedSrc, widthCandidates[0]))
+
+  const fadeClasses = $derived.by(() => {
+    if (loading === 'eager') return ''
+    return `transition-opacity duration-300 ${isLoaded ? 'opacity-100' : 'opacity-0'}`
+  })
+</script>
+
+{#if shouldLoadImage}
+  <img
+    {...restProps}
+    bind:this={imgElement}
+    src={fallbackSrc}
+    srcset={srcSet}
+    {sizes}
+    width={fill ? undefined : width}
+    height={fill ? undefined : height}
+    {alt}
+    style:aspect-ratio={aspectRatio}
+    style:object-fit={objectFit}
+    style:position={fill ? 'absolute' : undefined}
+    style:inset={fill ? 0 : undefined}
+    {loading}
+    onload={handleLoad}
+    class="{fadeClasses} {restProps.class || ''}"
+    data-testid="lazy-image-element"
+  />
+{:else}
+  <div
+    bind:this={placeholderElement}
+    style:aspect-ratio={aspectRatio}
+    style:position={fill ? 'absolute' : undefined}
+    style:inset={fill ? 0 : undefined}
+    aria-label={alt}
+    data-testid="lazy-image-placeholder"
+  ></div>
+{/if}

package/dist/components/index.d.ts

@@ -0,0 +1 @@
+export { default as LazyImage } from './LazyImage.svelte';

package/dist/components/index.js

@@ -0,0 +1 @@
+import{default as f}from"./LazyImage.svelte";export{f as LazyImage};

package/dist/form/index.d.ts

@@ -1,17 +1,14 @@
-import { Field, ValidationError } from '@picked/client';
-import { Store } from 'effector';
-import { FieldWithValue } from '../hooks';
+import { ValidationError } from '@picked/client';
 interface GetFormOptions {
     id: string;
     title: string;
-    fields: Store<Field[] | FieldWithValue[]>;
     onSuccess?: () => void | Promise<void>;
     onError?: (errors: ValidationError[]) => void | Promise<void>;
 }
 type SubmitEventWithCurrentTarget = SubmitEvent & {
     currentTarget: EventTarget & HTMLFormElement;
 };
-export declare function getForm({ id: formId, title, fields, onError, onSuccess }: GetFormOptions): {
+export declare function getForm({ id: formId, title, onError, onSuccess }: GetFormOptions): {
     form: {
         onsubmit: import('effector').EventCallable<SubmitEventWithCurrentTarget>;
     };

package/dist/form/index.js

@@ -1 +1 @@
-import{createEvent as k,createEffect as u,attach as b,sample as x,split as F}from"effector";import{getPicked as B,getExperience as D}from"../hooks/client.js";import"svelte";import"@picked/client";import"svelte/store";import"@picked/analytics";function T({id:m,title:f,fields:g,onError:l,onSuccess:d}){const o=B(),n=D(),{currentStepStore:h}=n,v=k(),y=u(r=>o.responses.commit(r)),A=b({source:{step:h},effect:u(({step:r})=>{o.eventBus({type:"form_submit_success",form:{id:m,title:f},experience:n,step:r??void 0}),d==null||d()})}),_=b({source:{step:h},mapParams:(r,s)=>({step:s.step,errors:r.errors}),effect:u(({step:r,errors:s})=>{o.eventBus({type:"form_submit_error",form:{id:m,title:f},exception:{reason:s},experience:n,step:r??void 0}),s.forEach(c=>{o.eventBus({type:"field_validation_error",exception:{reason:[c]},experience:n,step:r??void 0})}),console.error("[Picked] Form submission errors:",{errors:s}),l==null||l(s)})});return x({clock:v,source:{step:h},fn:({step:r})=>({formId:m,title:f,step:r}),target:u(({formId:r,title:s,step:c})=>{o.eventBus({type:"form_submit",form:{id:r,title:s},experience:n,step:c??void 0})})}),x({clock:v,source:{fields:o.fields.listStore,stepFields:g},fn:({stepFields:r},s)=>{s.preventDefault();const c=new FormData(s.currentTarget),E=Array.from(c.entries()),p={data:{},push(t){const a=t.questionId,e=this.data[a];e?Array.isArray(e)&&Array.isArray(t.value)?Array.isArray(e)&&Array.isArray(t.value)&&(typeof e[0]=="string"?this.data[a]=[...e,...t.value].map(String):typeof e[0]=="number"?this.data[a]=[...e,...t.value].map(Number):typeof e[0]=="boolean"?this.data[a]=[...e,...t.value].map(i=>!!i):this.data[a]=t.value):this.data[a]=t.value:this.data[a]=t.value}};return r.forEach(t=>{let a=E.filter(([e])=>e===t.id);a.length===0&&(a=[[t.id,""]]),a.forEach(([,e])=>{const i=t.id;if(e===""){p.push({questionId:i,value:null});return}switch(t.type){case"text":p.push({questionId:i,value:t.multiple?[String(e)]:String(e)});break;case"number":p.push({questionId:i,value:t.multiple?[Number(e)]:Number(e)});break;case"boolean":p.push({questionId:i,value:t.multiple?[e==="true"]:e==="true"});break}})}),p.data},target:y}),F({source:y.doneData,match:{hasErrors:({errors:r})=>r.length>0},cases:{hasErrors:_,__:A}}),{form:{onsubmit:v}}}export{T as getForm};
+import{createEvent as k,createEffect as m,attach as b,sample as g,split as D}from"effector";import{getPicked as F,getExperience as S}from"../hooks/client.js";import{getStep as B}from"../hooks/step.js";import"svelte";import"svelte/store";import"@picked/client";import"@picked/analytics";function z({id:f,title:l,onError:d,onSuccess:h}){const o=F(),x=B(),n=S(),{currentStepStore:u}=n,v=k(),y=m(r=>o.responses.commit(r)),A=b({source:{step:u},effect:m(({step:r})=>{o.eventBus({type:"form_submit_success",form:{id:f,title:l},experience:n,step:r??void 0}),h==null||h()})}),_=b({source:{step:u},mapParams:(r,a)=>({step:a.step,errors:r.errors}),effect:m(({step:r,errors:a})=>{o.eventBus({type:"form_submit_error",form:{id:f,title:l},exception:{reason:a},experience:n,step:r??void 0}),a.forEach(p=>{o.eventBus({type:"field_validation_error",exception:{reason:[p]},experience:n,step:r??void 0})}),d==null||d(a)})});return g({clock:v,source:{step:u},fn:({step:r})=>({formId:f,title:l,step:r}),target:m(({formId:r,title:a,step:p})=>{o.eventBus({type:"form_submit",form:{id:r,title:a},experience:n,step:p??void 0})})}),g({clock:v,source:{fields:o.fields.listStore,stepFields:x.fields,step:u},fn:({stepFields:r},a)=>{a.preventDefault();const p=new FormData(a.currentTarget),E=Array.from(p.entries()),c={data:{},push(t){const s=t.questionId,e=this.data[s];e?Array.isArray(e)&&Array.isArray(t.value)?Array.isArray(e)&&Array.isArray(t.value)&&(typeof e[0]=="string"?this.data[s]=[...e,...t.value].map(String):typeof e[0]=="number"?this.data[s]=[...e,...t.value].map(Number):typeof e[0]=="boolean"?this.data[s]=[...e,...t.value].map(i=>!!i):this.data[s]=t.value):this.data[s]=t.value:this.data[s]=t.value}};return r.forEach(t=>{let s=E.filter(([e])=>e===t.id);s.length===0&&(s=[[t.id,""]]),s.forEach(([,e])=>{const i=t.id;if(e===""){c.push({questionId:i,value:null});return}switch(t.type){case"text":c.push({questionId:i,value:t.multiple?[String(e)]:String(e)});break;case"number":c.push({questionId:i,value:t.multiple?[Number(e)]:Number(e)});break;case"boolean":c.push({questionId:i,value:t.multiple?[e==="true"]:e==="true"});break}})}),c.data},target:y}),D({source:y.doneData,match:{hasErrors:({errors:r})=>r.length>0},cases:{hasErrors:_,__:A}}),{form:{onsubmit:v}}}export{z as getForm};

package/dist/hooks/index.d.ts

@@ -1,5 +1,5 @@
 export { getPicked, getExperience } from './client';
-export { getStep, setStepContext, type FieldWithValue } from './step';
+export { getStep, setStepContext } from './step';
 export { useUnit, getContextScope, setContextScope } from './stores';
 export { createSessionStorageStore, createLocalStorageStore } from './storage.js';
 export { getTrackRecommendationPresentEvent } from './events';

package/dist/hooks/step.d.ts

@@ -1,20 +1,13 @@
 import { Store } from 'effector';
-import { ExperienceStep, Field, Response, ValidationError } from '@picked/client';
-import { getForm } from '../form';
-export type FieldWithValue = Field & {
+import { ExperienceStep, Field, Response } from '@picked/client';
+type FieldWithValue = Field & {
     value: Response | undefined;
 };
-interface BaseStepContext {
+export interface StepContext {
     step: Store<ExperienceStep>;
     fields: Store<FieldWithValue[]>;
     isActiveStep: Store<boolean>;
 }
-export interface StepContext extends BaseStepContext {
-    form: ReturnType<typeof getForm>['form'];
-}
-export declare function getStep(options?: {
-    onFormSuccess?: () => void | Promise<void>;
-    onFormError?: (errors: ValidationError[]) => void | Promise<void>;
-}): StepContext;
-export declare function setStepContext(stepId: string): BaseStepContext;
+export declare function getStep(): StepContext;
+export declare function setStepContext(stepId: string): StepContext;
 export {};

package/dist/hooks/step.js

@@ -1 +1 @@
-import{getContext as v,setContext as F}from"svelte";import{createStore as h,combine as m,attach as w,createEffect as C,sample as u}from"effector";import{getStepFields as T}from"@picked/client";import{STEP_CONTEXT_KEY as S}from"../context.js";import{getStepRouter as A}from"../router/context.js";import{getForm as b}from"../form/index.js";import{getExperience as p,getPicked as y}from"./client.js";function K(e){const i=v(S),n=p(),o=i.step.getState(),{form:a}=b({id:`${o.id}`,title:o.label||o.id,fields:i.fields,onError(f){var r;(r=e==null?void 0:e.onFormError)==null||r.call(e,f)},async onSuccess(){var r;await((r=e==null?void 0:e.onFormSuccess)==null?void 0:r.call(e))!==!1&&n.goToNextStep()}});return{...i,form:a}}function O(e){const i=p(),n=y(),{activeStep:o}=A(),a=o.map(t=>(t==null?void 0:t.id)===e),f=i.treeStore.map(t=>{const c=t.steps.find(s=>s.id===e);if(!c)throw new Error(`Step with id "${e}" not found in the experience tree.`);return c}),r=h([]),g=m({fields:r,responses:n.responses.listStore},({fields:t,responses:c})=>t.map(s=>{var d;const x=(d=c.find(E=>E.fieldId===s.id))==null?void 0:d.value;return{...s,value:x}})),l=w({source:m({step:f,fields:n.fields.listStore}),effect:C(async({step:{fieldIds:t},fields:c})=>await T(n,c.filter(s=>t.includes(s.id))))});return u({source:{isActiveStep:a},filter:({isActiveStep:t})=>t,target:l}),u({source:l.doneData,target:r}),F(S,{step:f,fields:g,isActiveStep:a})}export{K as getStep,O as setStepContext};
+import{getContext as v,setContext as E}from"svelte";import{createStore as h,combine as a,attach as w,createEffect as C,sample as l}from"effector";import{getStepFields as A}from"@picked/client";import{STEP_CONTEXT_KEY as d}from"../context.js";import{getStepRouter as F}from"../router/context.js";import{getExperience as T,getPicked as P}from"./client.js";function N(){return v(d)}function O(o){const u=T(),i=P(),{activeStep:m}=F(),n=m.map(e=>(e==null?void 0:e.id)===o),s=u.treeStore.map(e=>{const t=e.steps.find(r=>r.id===o);if(!t)throw new Error(`Step with id "${o}" not found in the experience tree.`);return t}),c=h([]),S=a({fields:c,responses:i.responses.listStore},({fields:e,responses:t})=>e.map(r=>{var f;const g=(f=t.find(x=>x.fieldId===r.id))==null?void 0:f.value;return{...r,value:g}})),p=w({source:a({step:s,fields:i.fields.listStore}),effect:C(async({step:{fieldIds:e},fields:t})=>await A(i,t.filter(r=>e.includes(r.id))))});return l({source:{isActiveStep:n},filter:({isActiveStep:e})=>e,target:p}),l({source:p.doneData,target:c}),E(d,{step:s,fields:S,isActiveStep:n})}export{N as getStep,O as setStepContext};

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export { adaptSvelteComponent, isValidAdaptedComponent } from './component';
-export type * from './component';
+export type { ComponentWithProps } from './component';
+export { LazyImage } from './components';

package/dist/index.js

@@ -1 +1 @@
-import{adaptSvelteComponent as t,isValidAdaptedComponent as p}from"./component.js";export{t as adaptSvelteComponent,p as isValidAdaptedComponent};
+import{adaptSvelteComponent as o,isValidAdaptedComponent as t}from"./component.js";import{default as d}from"./components/LazyImage.svelte";export{d as LazyImage,o as adaptSvelteComponent,t as isValidAdaptedComponent};

package/dist/render/browser.js

@@ -1 +1 @@
-import{mount as d}from"svelte";import{isValidAdaptedComponent as E}from"../component.js";import{CLIENT_CONTEXT_KEY as f,EXPERIENCE_CONTEXT_KEY as y}from"../context.js";import{mergeArrays as u}from"../utils/array.js";import h from"../utils/ErrorBoundary.svelte";function C(n,e){return new Map([[f,n],[y,e]])}const k=async(n,e,s,o,i)=>{var p,a;if(!E(e))throw new Error("The component is invalid.");const c=u((p=e.style)==null?void 0:p.sheets,i.stylesheets),m=u((a=e.style)==null?void 0:a.css,i.css);c.length&&c.forEach(r=>{const t=document.createElement("link");t.setAttribute("rel","stylesheet"),t.setAttribute("href",r),t.setAttribute("type","text/css"),t.setAttribute("picked-injected","true"),n.appendChild(t)}),m.length&&m.forEach(r=>{const t=document.createElement("style");t.textContent=r,t.setAttribute("type","text/css"),t.setAttribute("picked-injected","true"),n.appendChild(t)});const l=r=>{d(h,{target:n,props:{component:r,componentProps:{client:s,experience:o}},context:C(s,o)})};if(e.component instanceof Promise){const{default:r}=await e.component;l(r);return}l(e.component)},N=n=>{};export{C as createContext,k as renderSvelteComponent,N as unRenderSvelteComponent};
+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};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@picked/svelte",
-  "version": "0.0.1-dev.1765928585401",
+  "version": "0.0.1-dev.1765971320697",
   "dependencies": {
     "d3": "^7.9.0"
   },
@@ -75,7 +75,7 @@
   ],
   "module": "./dist/index.js",
   "peerDependencies": {
-    "@picked/client": "0.0.1-dev.1765928585401",
+    "@picked/client": "0.0.1-dev.1765971320697",
     "effector": "^23.3.0",
     "svelte": "^5.34.3"
   },

package/dist/utils/ErrorBoundary.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-  import { getPicked } from '../hooks'
-  import type { ComponentWithProps } from 'src/component'
-
-  interface Props {
-    component: ComponentWithProps
-    componentProps?: Record<string, unknown>
-  }
-
-  const { component: InnerComponent, componentProps }: Props = $props()
-
-  function handleError(error: unknown) {
-    const client = getPicked()
-
-    client.eventBus({
-      type: 'exception',
-      level: 'error',
-      data: error,
-    })
-  }
-</script>
-
-<svelte:boundary onerror={handleError}><InnerComponent {...componentProps} /></svelte:boundary>