@tma.js/sdk-solid 0.1.3 → 0.1.4

package/dist/cjs/index.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("solid-js"),t=require("solid-js/web"),n=require("@tma.js/sdk"),r=require("@tma.js/utils");const o=e.createContext(void 0,{name:"SDKContext"});function a(){const t=e.useContext(o);if(void 0===t)throw new Error("useSDKContext hook was used outside of SDKProvider.");return t}function i(t,n,r){const[o,a]=e.createSignal(t()[n],{equals:!1});return e.createEffect((()=>{const t=o();r.forEach((e=>{t.on(e,(()=>a((()=>t))))})),e.onCleanup((()=>{r.forEach((e=>{t.off(e,(()=>a((()=>t))))}))}))})),o}function s(t,n){return e.createMemo((()=>t()[n]))}Object.defineProperty(exports,"classNames",{enumerable:!0,get:function(){return r.classNames}}),Object.defineProperty(exports,"mergeClassNames",{enumerable:!0,get:function(){return r.mergeClassNames}}),exports.SDKContext=o,exports.SDKProvider=function(r){const a=e.createMemo((()=>r.initOptions||{})),[i]=e.createResource(a,n.init),s=e.createMemo((()=>"ready"===i.state?i():null)),u=e.createMemo((()=>i.loading)),c=e.createMemo((()=>void 0===i.error?null:i.error));return t.createComponent(o.Provider,{value:{initResult:s,loading:u,error:c},get children(){return r.children}})},exports.useSDK=function(){const{initResult:t}=a(),n=e.createMemo((()=>{const e=t();if(null===e)throw new Error("Unable to use SDK as it is not ready.");return e}));return{backButton:i(n,"backButton",["isVisibleChanged"]),closingBehavior:i(n,"closingBehavior",["isConfirmationNeededChanged"]),cloudStorage:s(n,"cloudStorage"),haptic:s(n,"haptic"),initData:s(n,"initData"),initDataRaw:s(n,"initDataRaw"),mainButton:i(n,"mainButton",["backgroundColorChanged","isVisibleChanged","isProgressVisibleChanged","isEnabledChanged","textChanged","textColorChanged"]),popup:i(n,"popup",["isOpenedChanged"]),postEvent:s(n,"postEvent"),qrScanner:i(n,"qrScanner",["isOpenedChanged"]),themeParams:i(n,"themeParams",["changed"]),viewport:i(n,"viewport",["heightChanged","isExpandedChanged","stableHeightChanged","widthChanged"]),webApp:i(n,"webApp",["backgroundColorChanged","headerColorChanged"])}},exports.useSDKContext=a;
+"use strict";var e=require("solid-js"),t=require("solid-js/web"),n=require("@tma.js/sdk"),r=require("@tma.js/utils");const o=e.createContext(void 0,{name:"SDKContext"});function a(){const t=e.useContext(o);if(void 0===t)throw new Error("useSDKContext hook was used outside of SDKProvider.");return t}function i(t,n){return e.createMemo((()=>t()[n]))}function s(t,n,r){const o=i(t,n),[a,s]=e.createSignal(o(),{equals:!1});return e.createEffect((()=>{const t=o(),n=()=>{s((e=>e))};r.forEach((e=>t.on(e,n))),e.onCleanup((()=>{r.forEach((e=>t.off(e,n)))}))})),a}Object.defineProperty(exports,"classNames",{enumerable:!0,get:function(){return r.classNames}}),Object.defineProperty(exports,"mergeClassNames",{enumerable:!0,get:function(){return r.mergeClassNames}}),exports.SDKContext=o,exports.SDKProvider=function(r){const a=e.createMemo((()=>r.initOptions||{})),[i]=e.createResource(a,n.init),s=e.createMemo((()=>"ready"===i.state?i():null)),u=e.createMemo((()=>i.loading)),c=e.createMemo((()=>void 0===i.error?null:i.error));return t.createComponent(o.Provider,{value:{initResult:s,loading:u,error:c},get children(){return r.children}})},exports.useSDK=function(){const{initResult:t}=a(),n=e.createMemo((()=>{const e=t();if(null===e)throw new Error("Unable to use SDK as it is not ready.");return e}));return{backButton:s(n,"backButton",["isVisibleChanged"]),closingBehavior:s(n,"closingBehavior",["isConfirmationNeededChanged"]),cloudStorage:i(n,"cloudStorage"),haptic:i(n,"haptic"),initData:i(n,"initData"),initDataRaw:i(n,"initDataRaw"),mainButton:s(n,"mainButton",["backgroundColorChanged","isVisibleChanged","isProgressVisibleChanged","isEnabledChanged","textChanged","textColorChanged"]),popup:s(n,"popup",["isOpenedChanged"]),postEvent:i(n,"postEvent"),qrScanner:s(n,"qrScanner",["isOpenedChanged"]),themeParams:s(n,"themeParams",["changed"]),viewport:s(n,"viewport",["heightChanged","isExpandedChanged","stableHeightChanged","widthChanged"]),webApp:s(n,"webApp",["backgroundColorChanged","headerColorChanged"])}},exports.useSDKContext=a;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/context.ts","../../src/hooks.ts","../../src/useSDK.ts","../../src/SDKProvider.tsx"],"sourcesContent":["import { createContext } from 'solid-js';\n\nimport type { SDKContextType } from './types.js';\n\nexport const SDKContext = createContext<SDKContextType>(undefined, { name: 'SDKContext' });\n","import { useContext } from 'solid-js';\n\nimport { SDKContext } from './context.js';\nimport type { SDKContextType } from './types.js';\n\n/**\n * Uses SDKContext context.\n */\nexport function useSDKContext(): SDKContextType {\n  const context = useContext(SDKContext);\n\n  if (context === undefined) {\n    throw new Error('useSDKContext hook was used outside of SDKProvider.');\n  }\n  return context;\n}\n","import { type Accessor, createEffect, createMemo, createSignal, onCleanup } from 'solid-js';\n\nimport type { SDKInitResult, SDKInitResultKey, SDKInitResultValue } from './types.js';\nimport { useSDKContext } from './hooks.js';\n\ninterface Trackable {\n  on: (event: any, ...args: any[]) => void;\n  off: (event: any, ...args: any[]) => void;\n}\n\ntype EventName<T extends Trackable> = T extends {\n  on(event: infer E, ...args: any[]): any\n} ? E : never;\n\ntype DynamicComponentKey = {\n  [K in SDKInitResultKey]: SDKInitResultValue<K> extends Trackable\n    ? K\n    : never;\n}[SDKInitResultKey];\n\nexport type SDK = {\n  [K in SDKInitResultKey]: Accessor<SDKInitResultValue<K>>\n};\n\nfunction useDynamicComponent<K extends DynamicComponentKey>(\n  initResult: Accessor<SDKInitResult>,\n  key: K,\n  events: EventName<SDKInitResultValue<K>>[],\n): Accessor<SDKInitResultValue<K>> {\n  const [component, setComponent] = createSignal(initResult()[key], { equals: false });\n\n  createEffect(() => {\n    const obj = component();\n\n    events.forEach(event => {\n      (obj as any).on(event, () => setComponent(() => obj));\n    });\n\n    onCleanup(() => {\n      events.forEach(event => {\n        (obj as any).off(event, () => setComponent(() => obj));\n      });\n    });\n  });\n\n  return component;\n}\n\nfunction useInitResultValue<K extends SDKInitResultKey>(initResult: Accessor<SDKInitResult>, key: K) {\n  const value = createMemo<SDKInitResultValue<K>>(() => initResult()[key]);\n\n  return value;\n}\n\n/**\n * Returns ready to use SDK components.\n */\nexport function useSDK(): SDK {\n  const { initResult } = useSDKContext();\n\n  const sdk = createMemo(() => {\n    const result = initResult();\n\n    if (result === null) {\n      throw new Error('Unable to use SDK as it is not ready.');\n    }\n    return result;\n  });\n\n  return {\n    backButton: useDynamicComponent(sdk, 'backButton', ['isVisibleChanged']),\n    closingBehavior: useDynamicComponent(sdk, 'closingBehavior', ['isConfirmationNeededChanged']),\n    cloudStorage: useInitResultValue(sdk, 'cloudStorage'),\n    haptic: useInitResultValue(sdk, 'haptic'),\n    initData: useInitResultValue(sdk, 'initData'),\n    initDataRaw: useInitResultValue(sdk, 'initDataRaw'),\n    mainButton: useDynamicComponent(sdk, 'mainButton', [\n      'backgroundColorChanged',\n      'isVisibleChanged',\n      'isProgressVisibleChanged',\n      'isEnabledChanged',\n      'textChanged',\n      'textColorChanged',\n    ]),\n    popup: useDynamicComponent(sdk, 'popup', ['isOpenedChanged']),\n    postEvent: useInitResultValue(sdk, 'postEvent'),\n    qrScanner: useDynamicComponent(sdk, 'qrScanner', ['isOpenedChanged']),\n    themeParams: useDynamicComponent(sdk, 'themeParams', ['changed']),\n    viewport: useDynamicComponent(sdk, 'viewport', [\n      'heightChanged',\n      'isExpandedChanged',\n      'stableHeightChanged',\n      'widthChanged',\n    ]),\n    webApp: useDynamicComponent(sdk, 'webApp', ['backgroundColorChanged', 'headerColorChanged']),\n  };\n}","import { createMemo, createResource, ParentProps } from 'solid-js';\nimport { init } from '@tma.js/sdk';\n\nimport { SDKContext } from './context.js';\nimport type { SDKInitOptions } from './types.js';\n\nexport type SDKProviderProps = ParentProps<{ initOptions?: SDKInitOptions }>;\n\nexport function SDKProvider(props: SDKProviderProps) {\n  const initOptions = createMemo(() => props.initOptions || {});\n  const [data] = createResource(initOptions, init);\n\n  const initResult = createMemo(() => {\n    return data.state === 'ready' ? data() : null;\n  });\n  const loading = createMemo(() => data.loading);\n  const error = createMemo(() => data.error === undefined ? null : data.error);\n\n  return (\n    <SDKContext.Provider value={{ initResult, loading, error }}>\n      {props.children}\n    </SDKContext.Provider>\n  );\n}\n"],"names":["SDKContext","createContext","undefined","name","useSDKContext","context","useContext","Error","useDynamicComponent","initResult","key","events","component","setComponent","createSignal","equals","createEffect","obj","forEach","event","on","onCleanup","off","useInitResultValue","createMemo","props","initOptions","data","createResource","init","state","loading","error","_$createComponent","createComponent","Provider","value","children","sdk","result","backButton","closingBehavior","cloudStorage","haptic","initData","initDataRaw","mainButton","popup","postEvent","qrScanner","themeParams","viewport","webApp"],"mappings":"2HAIaA,EAAaC,EAAaA,mBAAiBC,EAAW,CAAEC,KAAM,eCIpE,SAASC,IACd,MAAMC,EAAUC,aAAWN,GAE3B,QAAgBE,IAAZG,EACF,MAAM,IAAIE,MAAM,uDAElB,OAAOF,CACT,CCSA,SAASG,EACPC,EACAC,EACAC,GAEA,MAAOC,EAAWC,GAAgBC,EAAYA,aAACL,IAAaC,GAAM,CAAEK,QAAQ,IAgB5E,OAdAC,EAAAA,cAAa,KACX,MAAMC,EAAML,IAEZD,EAAOO,SAAQC,IACZF,EAAYG,GAAGD,GAAO,IAAMN,GAAa,IAAMI,KAAK,IAGvDI,EAAAA,WAAU,KACRV,EAAOO,SAAQC,IACZF,EAAYK,IAAIH,GAAO,IAAMN,GAAa,IAAMI,KAAK,GACtD,GACF,IAGGL,CACT,CAEA,SAASW,EAA+Cd,EAAqCC,GAG3F,OAFcc,EAAAA,YAAkC,IAAMf,IAAaC,IAGrE,oPC5CO,SAAqBe,GAC1B,MAAMC,EAAcF,EAAAA,YAAW,IAAMC,EAAMC,aAAe,CAAE,KACrDC,GAAQC,EAAcA,eAACF,EAAaG,EAAIA,MAEzCpB,EAAae,EAAAA,YAAW,IACN,UAAfG,EAAKG,MAAoBH,IAAS,OAErCI,EAAUP,EAAUA,YAAC,IAAMG,EAAKI,UAChCC,EAAQR,cAAW,SAAqBtB,IAAfyB,EAAKK,MAAsB,KAAOL,EAAKK,QAEtE,OAAAC,EAAAC,gBACGlC,EAAWmC,SAAQ,CAACC,MAAO,CAAE3B,aAAYsB,UAASC,SAAOK,eAAA,OACvDZ,EAAMY,QAAQ,GAGrB,iBDkCO,WACL,MAAM5B,WAAEA,GAAeL,IAEjBkC,EAAMd,EAAAA,YAAW,KACrB,MAAMe,EAAS9B,IAEf,GAAe,OAAX8B,EACF,MAAM,IAAIhC,MAAM,yCAElB,OAAOgC,CAAM,IAGf,MAAO,CACLC,WAAYhC,EAAoB8B,EAAK,aAAc,CAAC,qBACpDG,gBAAiBjC,EAAoB8B,EAAK,kBAAmB,CAAC,gCAC9DI,aAAcnB,EAAmBe,EAAK,gBACtCK,OAAQpB,EAAmBe,EAAK,UAChCM,SAAUrB,EAAmBe,EAAK,YAClCO,YAAatB,EAAmBe,EAAK,eACrCQ,WAAYtC,EAAoB8B,EAAK,aAAc,CACjD,yBACA,mBACA,2BACA,mBACA,cACA,qBAEFS,MAAOvC,EAAoB8B,EAAK,QAAS,CAAC,oBAC1CU,UAAWzB,EAAmBe,EAAK,aACnCW,UAAWzC,EAAoB8B,EAAK,YAAa,CAAC,oBAClDY,YAAa1C,EAAoB8B,EAAK,cAAe,CAAC,YACtDa,SAAU3C,EAAoB8B,EAAK,WAAY,CAC7C,gBACA,oBACA,sBACA,iBAEFc,OAAQ5C,EAAoB8B,EAAK,SAAU,CAAC,yBAA0B,uBAE1E"}
+{"version":3,"file":"index.js","sources":["../../src/context.ts","../../src/hooks.ts","../../src/useInitResultValue.ts","../../src/useDynamicInitResultValue.ts","../../src/SDKProvider.tsx","../../src/useSDK.ts"],"sourcesContent":["import { createContext } from 'solid-js';\n\nimport type { SDKContextType } from './types.js';\n\nexport const SDKContext = createContext<SDKContextType>(undefined, { name: 'SDKContext' });\n","import { useContext } from 'solid-js';\n\nimport { SDKContext } from './context.js';\nimport type { SDKContextType } from './types.js';\n\n/**\n * Uses SDKContext context.\n */\nexport function useSDKContext(): SDKContextType {\n  const context = useContext(SDKContext);\n\n  if (context === undefined) {\n    throw new Error('useSDKContext hook was used outside of SDKProvider.');\n  }\n  return context;\n}\n","import { SDKInitResult, SDKInitResultKey, SDKInitResultValue } from './types.js';\nimport { Accessor, createMemo } from 'solid-js';\n\n/**\n * Extracts value from the SDK init result by key.\n * @param result - init result accessor.\n * @param key - key to extract.\n */\nexport function useInitResultValue<K extends SDKInitResultKey>(\n  result: Accessor<SDKInitResult>,\n  key: K\n): Accessor<SDKInitResultValue<K>> {\n  return createMemo(() => result()[key]);\n}","import { Accessor, createEffect, createSignal, onCleanup } from 'solid-js';\nimport { SDKInitResult, SDKInitResultKey, SDKInitResultValue } from './types.js';\nimport { useInitResultValue } from './useInitResultValue.js';\n\ninterface Trackable {\n  on: (event: any, ...args: any[]) => void;\n  off: (event: any, ...args: any[]) => void;\n}\n\ntype EventName<T extends Trackable> = T extends {\n  on(event: infer E, ...args: any[]): any\n} ? E : never;\n\ntype DynamicComponentKey = {\n  [K in SDKInitResultKey]: SDKInitResultValue<K> extends Trackable ? K : never;\n}[SDKInitResultKey];\n\n/**\n * Extracts value from the SDK init result by specified key and listens to its all specified\n * events, making the returned value to update.\n * @param initResult - SDK init result.\n * @param key - SDK init result key.\n * @param events - tracked events list.\n */\nexport function useDynamicInitResultValue<K extends DynamicComponentKey>(\n  initResult: Accessor<SDKInitResult>,\n  key: K,\n  events: EventName<SDKInitResultValue<K>>[],\n): Accessor<SDKInitResultValue<K>> {\n  // Get original value from init result.\n  const initResultValue = useInitResultValue(initResult, key);\n\n  // Here we store value, which should always update it in case, some of its props\n  // were changed/\n  const [value, setValue] = createSignal(initResultValue(), { equals: false });\n\n  createEffect(() => {\n    const value = initResultValue();\n    const listener = () => {\n      // We use prev => prev on purpose. This will make Solid sure, something inside\n      // dynamic value changed.\n      setValue(prev => prev);\n    };\n\n    events.forEach(event => value.on(event, listener));\n    onCleanup(() => {\n      events.forEach(event => value.off(event, listener));\n    });\n  });\n\n  return value;\n}","import { createMemo, createResource, ParentProps } from 'solid-js';\nimport { init } from '@tma.js/sdk';\n\nimport { SDKContext } from './context.js';\nimport type { SDKInitOptions } from './types.js';\n\nexport type SDKProviderProps = ParentProps<{ initOptions?: SDKInitOptions }>;\n\nexport function SDKProvider(props: SDKProviderProps) {\n  const initOptions = createMemo(() => props.initOptions || {});\n  const [data] = createResource(initOptions, init);\n\n  const initResult = createMemo(() => {\n    return data.state === 'ready' ? data() : null;\n  });\n  const loading = createMemo(() => data.loading);\n  const error = createMemo(() => data.error === undefined ? null : data.error);\n\n  return (\n    <SDKContext.Provider value={{ initResult, loading, error }}>\n      {props.children}\n    </SDKContext.Provider>\n  );\n}\n","import { createMemo, type Accessor } from 'solid-js';\n\nimport { useSDKContext } from './hooks.js';\nimport { useInitResultValue } from './useInitResultValue.js';\nimport { useDynamicInitResultValue } from './useDynamicInitResultValue.js';\nimport type { SDKInitResultKey, SDKInitResultValue } from './types.js';\n\nexport type SDK = {\n  [K in SDKInitResultKey]: Accessor<SDKInitResultValue<K>>\n};\n\n/**\n * Returns ready to use SDK components.\n */\nexport function useSDK(): SDK {\n  const { initResult } = useSDKContext();\n\n  const sdk = createMemo(() => {\n    const result = initResult();\n\n    if (result === null) {\n      throw new Error('Unable to use SDK as it is not ready.');\n    }\n    return result;\n  });\n\n  return {\n    backButton: useDynamicInitResultValue(sdk, 'backButton', ['isVisibleChanged']),\n    closingBehavior: useDynamicInitResultValue(sdk, 'closingBehavior', ['isConfirmationNeededChanged']),\n    cloudStorage: useInitResultValue(sdk, 'cloudStorage'),\n    haptic: useInitResultValue(sdk, 'haptic'),\n    initData: useInitResultValue(sdk, 'initData'),\n    initDataRaw: useInitResultValue(sdk, 'initDataRaw'),\n    mainButton: useDynamicInitResultValue(sdk, 'mainButton', [\n      'backgroundColorChanged',\n      'isVisibleChanged',\n      'isProgressVisibleChanged',\n      'isEnabledChanged',\n      'textChanged',\n      'textColorChanged',\n    ]),\n    popup: useDynamicInitResultValue(sdk, 'popup', ['isOpenedChanged']),\n    postEvent: useInitResultValue(sdk, 'postEvent'),\n    qrScanner: useDynamicInitResultValue(sdk, 'qrScanner', ['isOpenedChanged']),\n    themeParams: useDynamicInitResultValue(sdk, 'themeParams', ['changed']),\n    viewport: useDynamicInitResultValue(sdk, 'viewport', [\n      'heightChanged',\n      'isExpandedChanged',\n      'stableHeightChanged',\n      'widthChanged',\n    ]),\n    webApp: useDynamicInitResultValue(sdk, 'webApp', ['backgroundColorChanged', 'headerColorChanged']),\n  };\n}"],"names":["SDKContext","createContext","undefined","name","useSDKContext","context","useContext","Error","useInitResultValue","result","key","createMemo","useDynamicInitResultValue","initResult","events","initResultValue","value","setValue","createSignal","equals","createEffect","listener","prev","forEach","event","on","onCleanup","off","props","initOptions","data","createResource","init","state","loading","error","_$createComponent","createComponent","Provider","children","sdk","backButton","closingBehavior","cloudStorage","haptic","initData","initDataRaw","mainButton","popup","postEvent","qrScanner","themeParams","viewport","webApp"],"mappings":"2HAIaA,EAAaC,EAAaA,mBAAiBC,EAAW,CAAEC,KAAM,eCIpE,SAASC,IACd,MAAMC,EAAUC,aAAWN,GAE3B,QAAgBE,IAAZG,EACF,MAAM,IAAIE,MAAM,uDAElB,OAAOF,CACT,CCPO,SAASG,EACdC,EACAC,GAEA,OAAOC,EAAUA,YAAC,IAAMF,IAASC,IACnC,CCWO,SAASE,EACdC,EACAH,EACAI,GAGA,MAAMC,EAAkBP,EAAmBK,EAAYH,IAIhDM,EAAOC,GAAYC,EAAYA,aAACH,IAAmB,CAAEI,QAAQ,IAgBpE,OAdAC,EAAAA,cAAa,KACX,MAAMJ,EAAQD,IACRM,EAAWA,KAGfJ,GAASK,GAAQA,GAAK,EAGxBR,EAAOS,SAAQC,GAASR,EAAMS,GAAGD,EAAOH,KACxCK,EAAAA,WAAU,KACRZ,EAAOS,SAAQC,GAASR,EAAMW,IAAIH,EAAOH,IAAU,GACnD,IAGGL,CACT,oPC3CO,SAAqBY,GAC1B,MAAMC,EAAclB,EAAAA,YAAW,IAAMiB,EAAMC,aAAe,CAAE,KACrDC,GAAQC,EAAcA,eAACF,EAAaG,EAAIA,MAEzCnB,EAAaF,EAAAA,YAAW,IACN,UAAfmB,EAAKG,MAAoBH,IAAS,OAErCI,EAAUvB,EAAUA,YAAC,IAAMmB,EAAKI,UAChCC,EAAQxB,cAAW,SAAqBT,IAAf4B,EAAKK,MAAsB,KAAOL,EAAKK,QAEtE,OAAAC,EAAAC,gBACGrC,EAAWsC,SAAQ,CAACtB,MAAO,CAAEH,aAAYqB,UAASC,SAAOI,eAAA,OACvDX,EAAMW,QAAQ,GAGrB,iBCTO,WACL,MAAM1B,WAAEA,GAAeT,IAEjBoC,EAAM7B,EAAAA,YAAW,KACrB,MAAMF,EAASI,IAEf,GAAe,OAAXJ,EACF,MAAM,IAAIF,MAAM,yCAElB,OAAOE,CAAM,IAGf,MAAO,CACLgC,WAAY7B,EAA0B4B,EAAK,aAAc,CAAC,qBAC1DE,gBAAiB9B,EAA0B4B,EAAK,kBAAmB,CAAC,gCACpEG,aAAcnC,EAAmBgC,EAAK,gBACtCI,OAAQpC,EAAmBgC,EAAK,UAChCK,SAAUrC,EAAmBgC,EAAK,YAClCM,YAAatC,EAAmBgC,EAAK,eACrCO,WAAYnC,EAA0B4B,EAAK,aAAc,CACvD,yBACA,mBACA,2BACA,mBACA,cACA,qBAEFQ,MAAOpC,EAA0B4B,EAAK,QAAS,CAAC,oBAChDS,UAAWzC,EAAmBgC,EAAK,aACnCU,UAAWtC,EAA0B4B,EAAK,YAAa,CAAC,oBACxDW,YAAavC,EAA0B4B,EAAK,cAAe,CAAC,YAC5DY,SAAUxC,EAA0B4B,EAAK,WAAY,CACnD,gBACA,oBACA,sBACA,iBAEFa,OAAQzC,EAA0B4B,EAAK,SAAU,CAAC,yBAA0B,uBAEhF"}

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-import{createContext as e,useContext as n,createMemo as t,createResource as o,createSignal as r,createEffect as a,onCleanup as i}from"solid-js";import{createComponent as s}from"solid-js/web";import{init as d}from"@tma.js/sdk";export{classNames,mergeClassNames}from"@tma.js/utils";const h=e(void 0,{name:"SDKContext"});function u(){const e=n(h);if(void 0===e)throw new Error("useSDKContext hook was used outside of SDKProvider.");return e}function l(e){const n=t((()=>e.initOptions||{})),[r]=o(n,d),a=t((()=>"ready"===r.state?r():null)),i=t((()=>r.loading)),u=t((()=>void 0===r.error?null:r.error));return s(h.Provider,{value:{initResult:a,loading:i,error:u},get children(){return e.children}})}function c(e,n,t){const[o,s]=r(e()[n],{equals:!1});return a((()=>{const e=o();t.forEach((n=>{e.on(n,(()=>s((()=>e))))})),i((()=>{t.forEach((n=>{e.off(n,(()=>s((()=>e))))}))}))})),o}function g(e,n){return t((()=>e()[n]))}function p(){const{initResult:e}=u(),n=t((()=>{const n=e();if(null===n)throw new Error("Unable to use SDK as it is not ready.");return n}));return{backButton:c(n,"backButton",["isVisibleChanged"]),closingBehavior:c(n,"closingBehavior",["isConfirmationNeededChanged"]),cloudStorage:g(n,"cloudStorage"),haptic:g(n,"haptic"),initData:g(n,"initData"),initDataRaw:g(n,"initDataRaw"),mainButton:c(n,"mainButton",["backgroundColorChanged","isVisibleChanged","isProgressVisibleChanged","isEnabledChanged","textChanged","textColorChanged"]),popup:c(n,"popup",["isOpenedChanged"]),postEvent:g(n,"postEvent"),qrScanner:c(n,"qrScanner",["isOpenedChanged"]),themeParams:c(n,"themeParams",["changed"]),viewport:c(n,"viewport",["heightChanged","isExpandedChanged","stableHeightChanged","widthChanged"]),webApp:c(n,"webApp",["backgroundColorChanged","headerColorChanged"])}}export{h as SDKContext,l as SDKProvider,p as useSDK,u as useSDKContext};
+import{createContext as e,useContext as n,createMemo as t,createResource as o,createSignal as r,createEffect as a,onCleanup as i}from"solid-js";import{createComponent as s}from"solid-js/web";import{init as d}from"@tma.js/sdk";export{classNames,mergeClassNames}from"@tma.js/utils";const h=e(void 0,{name:"SDKContext"});function u(){const e=n(h);if(void 0===e)throw new Error("useSDKContext hook was used outside of SDKProvider.");return e}function l(e){const n=t((()=>e.initOptions||{})),[r]=o(n,d),a=t((()=>"ready"===r.state?r():null)),i=t((()=>r.loading)),u=t((()=>void 0===r.error?null:r.error));return s(h.Provider,{value:{initResult:a,loading:i,error:u},get children(){return e.children}})}function c(e,n){return t((()=>e()[n]))}function g(e,n,t){const o=c(e,n),[s,d]=r(o(),{equals:!1});return a((()=>{const e=o(),n=()=>{d((e=>e))};t.forEach((t=>e.on(t,n))),i((()=>{t.forEach((t=>e.off(t,n)))}))})),s}function p(){const{initResult:e}=u(),n=t((()=>{const n=e();if(null===n)throw new Error("Unable to use SDK as it is not ready.");return n}));return{backButton:g(n,"backButton",["isVisibleChanged"]),closingBehavior:g(n,"closingBehavior",["isConfirmationNeededChanged"]),cloudStorage:c(n,"cloudStorage"),haptic:c(n,"haptic"),initData:c(n,"initData"),initDataRaw:c(n,"initDataRaw"),mainButton:g(n,"mainButton",["backgroundColorChanged","isVisibleChanged","isProgressVisibleChanged","isEnabledChanged","textChanged","textColorChanged"]),popup:g(n,"popup",["isOpenedChanged"]),postEvent:c(n,"postEvent"),qrScanner:g(n,"qrScanner",["isOpenedChanged"]),themeParams:g(n,"themeParams",["changed"]),viewport:g(n,"viewport",["heightChanged","isExpandedChanged","stableHeightChanged","widthChanged"]),webApp:g(n,"webApp",["backgroundColorChanged","headerColorChanged"])}}export{h as SDKContext,l as SDKProvider,p as useSDK,u as useSDKContext};
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/context.ts","../../src/hooks.ts","../../src/SDKProvider.tsx","../../src/useSDK.ts"],"sourcesContent":["import { createContext } from 'solid-js';\n\nimport type { SDKContextType } from './types.js';\n\nexport const SDKContext = createContext<SDKContextType>(undefined, { name: 'SDKContext' });\n","import { useContext } from 'solid-js';\n\nimport { SDKContext } from './context.js';\nimport type { SDKContextType } from './types.js';\n\n/**\n * Uses SDKContext context.\n */\nexport function useSDKContext(): SDKContextType {\n  const context = useContext(SDKContext);\n\n  if (context === undefined) {\n    throw new Error('useSDKContext hook was used outside of SDKProvider.');\n  }\n  return context;\n}\n","import { createMemo, createResource, ParentProps } from 'solid-js';\nimport { init } from '@tma.js/sdk';\n\nimport { SDKContext } from './context.js';\nimport type { SDKInitOptions } from './types.js';\n\nexport type SDKProviderProps = ParentProps<{ initOptions?: SDKInitOptions }>;\n\nexport function SDKProvider(props: SDKProviderProps) {\n  const initOptions = createMemo(() => props.initOptions || {});\n  const [data] = createResource(initOptions, init);\n\n  const initResult = createMemo(() => {\n    return data.state === 'ready' ? data() : null;\n  });\n  const loading = createMemo(() => data.loading);\n  const error = createMemo(() => data.error === undefined ? null : data.error);\n\n  return (\n    <SDKContext.Provider value={{ initResult, loading, error }}>\n      {props.children}\n    </SDKContext.Provider>\n  );\n}\n","import { type Accessor, createEffect, createMemo, createSignal, onCleanup } from 'solid-js';\n\nimport type { SDKInitResult, SDKInitResultKey, SDKInitResultValue } from './types.js';\nimport { useSDKContext } from './hooks.js';\n\ninterface Trackable {\n  on: (event: any, ...args: any[]) => void;\n  off: (event: any, ...args: any[]) => void;\n}\n\ntype EventName<T extends Trackable> = T extends {\n  on(event: infer E, ...args: any[]): any\n} ? E : never;\n\ntype DynamicComponentKey = {\n  [K in SDKInitResultKey]: SDKInitResultValue<K> extends Trackable\n    ? K\n    : never;\n}[SDKInitResultKey];\n\nexport type SDK = {\n  [K in SDKInitResultKey]: Accessor<SDKInitResultValue<K>>\n};\n\nfunction useDynamicComponent<K extends DynamicComponentKey>(\n  initResult: Accessor<SDKInitResult>,\n  key: K,\n  events: EventName<SDKInitResultValue<K>>[],\n): Accessor<SDKInitResultValue<K>> {\n  const [component, setComponent] = createSignal(initResult()[key], { equals: false });\n\n  createEffect(() => {\n    const obj = component();\n\n    events.forEach(event => {\n      (obj as any).on(event, () => setComponent(() => obj));\n    });\n\n    onCleanup(() => {\n      events.forEach(event => {\n        (obj as any).off(event, () => setComponent(() => obj));\n      });\n    });\n  });\n\n  return component;\n}\n\nfunction useInitResultValue<K extends SDKInitResultKey>(initResult: Accessor<SDKInitResult>, key: K) {\n  const value = createMemo<SDKInitResultValue<K>>(() => initResult()[key]);\n\n  return value;\n}\n\n/**\n * Returns ready to use SDK components.\n */\nexport function useSDK(): SDK {\n  const { initResult } = useSDKContext();\n\n  const sdk = createMemo(() => {\n    const result = initResult();\n\n    if (result === null) {\n      throw new Error('Unable to use SDK as it is not ready.');\n    }\n    return result;\n  });\n\n  return {\n    backButton: useDynamicComponent(sdk, 'backButton', ['isVisibleChanged']),\n    closingBehavior: useDynamicComponent(sdk, 'closingBehavior', ['isConfirmationNeededChanged']),\n    cloudStorage: useInitResultValue(sdk, 'cloudStorage'),\n    haptic: useInitResultValue(sdk, 'haptic'),\n    initData: useInitResultValue(sdk, 'initData'),\n    initDataRaw: useInitResultValue(sdk, 'initDataRaw'),\n    mainButton: useDynamicComponent(sdk, 'mainButton', [\n      'backgroundColorChanged',\n      'isVisibleChanged',\n      'isProgressVisibleChanged',\n      'isEnabledChanged',\n      'textChanged',\n      'textColorChanged',\n    ]),\n    popup: useDynamicComponent(sdk, 'popup', ['isOpenedChanged']),\n    postEvent: useInitResultValue(sdk, 'postEvent'),\n    qrScanner: useDynamicComponent(sdk, 'qrScanner', ['isOpenedChanged']),\n    themeParams: useDynamicComponent(sdk, 'themeParams', ['changed']),\n    viewport: useDynamicComponent(sdk, 'viewport', [\n      'heightChanged',\n      'isExpandedChanged',\n      'stableHeightChanged',\n      'widthChanged',\n    ]),\n    webApp: useDynamicComponent(sdk, 'webApp', ['backgroundColorChanged', 'headerColorChanged']),\n  };\n}"],"names":["SDKContext","createContext","undefined","name","useSDKContext","context","useContext","Error","SDKProvider","props","initOptions","createMemo","data","createResource","init","initResult","state","loading","error","_$createComponent","Provider","value","children","useDynamicComponent","key","events","component","setComponent","createSignal","equals","createEffect","obj","forEach","event","on","onCleanup","off","useInitResultValue","useSDK","sdk","result","backButton","closingBehavior","cloudStorage","haptic","initData","initDataRaw","mainButton","popup","postEvent","qrScanner","themeParams","viewport","webApp"],"mappings":"8RAIaA,EAAaC,OAA8BC,EAAW,CAAEC,KAAM,eCIpE,SAASC,IACd,MAAMC,EAAUC,EAAWN,GAE3B,QAAgBE,IAAZG,EACF,MAAM,IAAIE,MAAM,uDAElB,OAAOF,CACT,CCPO,SAASG,EAAYC,GAC1B,MAAMC,EAAcC,GAAW,IAAMF,EAAMC,aAAe,CAAE,KACrDE,GAAQC,EAAeH,EAAaI,GAErCC,EAAaJ,GAAW,IACN,UAAfC,EAAKI,MAAoBJ,IAAS,OAErCK,EAAUN,GAAW,IAAMC,EAAKK,UAChCC,EAAQP,GAAW,SAAqBT,IAAfU,EAAKM,MAAsB,KAAON,EAAKM,QAEtE,OAAAC,EACGnB,EAAWoB,SAAQ,CAACC,MAAO,CAAEN,aAAYE,UAASC,SAAOI,eAAA,OACvDb,EAAMa,QAAQ,GAGrB,CCCA,SAASC,EACPR,EACAS,EACAC,GAEA,MAAOC,EAAWC,GAAgBC,EAAab,IAAaS,GAAM,CAAEK,QAAQ,IAgB5E,OAdAC,GAAa,KACX,MAAMC,EAAML,IAEZD,EAAOO,SAAQC,IACZF,EAAYG,GAAGD,GAAO,IAAMN,GAAa,IAAMI,KAAK,IAGvDI,GAAU,KACRV,EAAOO,SAAQC,IACZF,EAAYK,IAAIH,GAAO,IAAMN,GAAa,IAAMI,KAAK,GACtD,GACF,IAGGL,CACT,CAEA,SAASW,EAA+CtB,EAAqCS,GAG3F,OAFcb,GAAkC,IAAMI,IAAaS,IAGrE,CAKO,SAASc,IACd,MAAMvB,WAAEA,GAAeX,IAEjBmC,EAAM5B,GAAW,KACrB,MAAM6B,EAASzB,IAEf,GAAe,OAAXyB,EACF,MAAM,IAAIjC,MAAM,yCAElB,OAAOiC,CAAM,IAGf,MAAO,CACLC,WAAYlB,EAAoBgB,EAAK,aAAc,CAAC,qBACpDG,gBAAiBnB,EAAoBgB,EAAK,kBAAmB,CAAC,gCAC9DI,aAAcN,EAAmBE,EAAK,gBACtCK,OAAQP,EAAmBE,EAAK,UAChCM,SAAUR,EAAmBE,EAAK,YAClCO,YAAaT,EAAmBE,EAAK,eACrCQ,WAAYxB,EAAoBgB,EAAK,aAAc,CACjD,yBACA,mBACA,2BACA,mBACA,cACA,qBAEFS,MAAOzB,EAAoBgB,EAAK,QAAS,CAAC,oBAC1CU,UAAWZ,EAAmBE,EAAK,aACnCW,UAAW3B,EAAoBgB,EAAK,YAAa,CAAC,oBAClDY,YAAa5B,EAAoBgB,EAAK,cAAe,CAAC,YACtDa,SAAU7B,EAAoBgB,EAAK,WAAY,CAC7C,gBACA,oBACA,sBACA,iBAEFc,OAAQ9B,EAAoBgB,EAAK,SAAU,CAAC,yBAA0B,uBAE1E"}
+{"version":3,"file":"index.js","sources":["../../src/context.ts","../../src/hooks.ts","../../src/SDKProvider.tsx","../../src/useInitResultValue.ts","../../src/useDynamicInitResultValue.ts","../../src/useSDK.ts"],"sourcesContent":["import { createContext } from 'solid-js';\n\nimport type { SDKContextType } from './types.js';\n\nexport const SDKContext = createContext<SDKContextType>(undefined, { name: 'SDKContext' });\n","import { useContext } from 'solid-js';\n\nimport { SDKContext } from './context.js';\nimport type { SDKContextType } from './types.js';\n\n/**\n * Uses SDKContext context.\n */\nexport function useSDKContext(): SDKContextType {\n  const context = useContext(SDKContext);\n\n  if (context === undefined) {\n    throw new Error('useSDKContext hook was used outside of SDKProvider.');\n  }\n  return context;\n}\n","import { createMemo, createResource, ParentProps } from 'solid-js';\nimport { init } from '@tma.js/sdk';\n\nimport { SDKContext } from './context.js';\nimport type { SDKInitOptions } from './types.js';\n\nexport type SDKProviderProps = ParentProps<{ initOptions?: SDKInitOptions }>;\n\nexport function SDKProvider(props: SDKProviderProps) {\n  const initOptions = createMemo(() => props.initOptions || {});\n  const [data] = createResource(initOptions, init);\n\n  const initResult = createMemo(() => {\n    return data.state === 'ready' ? data() : null;\n  });\n  const loading = createMemo(() => data.loading);\n  const error = createMemo(() => data.error === undefined ? null : data.error);\n\n  return (\n    <SDKContext.Provider value={{ initResult, loading, error }}>\n      {props.children}\n    </SDKContext.Provider>\n  );\n}\n","import { SDKInitResult, SDKInitResultKey, SDKInitResultValue } from './types.js';\nimport { Accessor, createMemo } from 'solid-js';\n\n/**\n * Extracts value from the SDK init result by key.\n * @param result - init result accessor.\n * @param key - key to extract.\n */\nexport function useInitResultValue<K extends SDKInitResultKey>(\n  result: Accessor<SDKInitResult>,\n  key: K\n): Accessor<SDKInitResultValue<K>> {\n  return createMemo(() => result()[key]);\n}","import { Accessor, createEffect, createSignal, onCleanup } from 'solid-js';\nimport { SDKInitResult, SDKInitResultKey, SDKInitResultValue } from './types.js';\nimport { useInitResultValue } from './useInitResultValue.js';\n\ninterface Trackable {\n  on: (event: any, ...args: any[]) => void;\n  off: (event: any, ...args: any[]) => void;\n}\n\ntype EventName<T extends Trackable> = T extends {\n  on(event: infer E, ...args: any[]): any\n} ? E : never;\n\ntype DynamicComponentKey = {\n  [K in SDKInitResultKey]: SDKInitResultValue<K> extends Trackable ? K : never;\n}[SDKInitResultKey];\n\n/**\n * Extracts value from the SDK init result by specified key and listens to its all specified\n * events, making the returned value to update.\n * @param initResult - SDK init result.\n * @param key - SDK init result key.\n * @param events - tracked events list.\n */\nexport function useDynamicInitResultValue<K extends DynamicComponentKey>(\n  initResult: Accessor<SDKInitResult>,\n  key: K,\n  events: EventName<SDKInitResultValue<K>>[],\n): Accessor<SDKInitResultValue<K>> {\n  // Get original value from init result.\n  const initResultValue = useInitResultValue(initResult, key);\n\n  // Here we store value, which should always update it in case, some of its props\n  // were changed/\n  const [value, setValue] = createSignal(initResultValue(), { equals: false });\n\n  createEffect(() => {\n    const value = initResultValue();\n    const listener = () => {\n      // We use prev => prev on purpose. This will make Solid sure, something inside\n      // dynamic value changed.\n      setValue(prev => prev);\n    };\n\n    events.forEach(event => value.on(event, listener));\n    onCleanup(() => {\n      events.forEach(event => value.off(event, listener));\n    });\n  });\n\n  return value;\n}","import { createMemo, type Accessor } from 'solid-js';\n\nimport { useSDKContext } from './hooks.js';\nimport { useInitResultValue } from './useInitResultValue.js';\nimport { useDynamicInitResultValue } from './useDynamicInitResultValue.js';\nimport type { SDKInitResultKey, SDKInitResultValue } from './types.js';\n\nexport type SDK = {\n  [K in SDKInitResultKey]: Accessor<SDKInitResultValue<K>>\n};\n\n/**\n * Returns ready to use SDK components.\n */\nexport function useSDK(): SDK {\n  const { initResult } = useSDKContext();\n\n  const sdk = createMemo(() => {\n    const result = initResult();\n\n    if (result === null) {\n      throw new Error('Unable to use SDK as it is not ready.');\n    }\n    return result;\n  });\n\n  return {\n    backButton: useDynamicInitResultValue(sdk, 'backButton', ['isVisibleChanged']),\n    closingBehavior: useDynamicInitResultValue(sdk, 'closingBehavior', ['isConfirmationNeededChanged']),\n    cloudStorage: useInitResultValue(sdk, 'cloudStorage'),\n    haptic: useInitResultValue(sdk, 'haptic'),\n    initData: useInitResultValue(sdk, 'initData'),\n    initDataRaw: useInitResultValue(sdk, 'initDataRaw'),\n    mainButton: useDynamicInitResultValue(sdk, 'mainButton', [\n      'backgroundColorChanged',\n      'isVisibleChanged',\n      'isProgressVisibleChanged',\n      'isEnabledChanged',\n      'textChanged',\n      'textColorChanged',\n    ]),\n    popup: useDynamicInitResultValue(sdk, 'popup', ['isOpenedChanged']),\n    postEvent: useInitResultValue(sdk, 'postEvent'),\n    qrScanner: useDynamicInitResultValue(sdk, 'qrScanner', ['isOpenedChanged']),\n    themeParams: useDynamicInitResultValue(sdk, 'themeParams', ['changed']),\n    viewport: useDynamicInitResultValue(sdk, 'viewport', [\n      'heightChanged',\n      'isExpandedChanged',\n      'stableHeightChanged',\n      'widthChanged',\n    ]),\n    webApp: useDynamicInitResultValue(sdk, 'webApp', ['backgroundColorChanged', 'headerColorChanged']),\n  };\n}"],"names":["SDKContext","createContext","undefined","name","useSDKContext","context","useContext","Error","SDKProvider","props","initOptions","createMemo","data","createResource","init","initResult","state","loading","error","_$createComponent","Provider","value","children","useInitResultValue","result","key","useDynamicInitResultValue","events","initResultValue","setValue","createSignal","equals","createEffect","listener","prev","forEach","event","on","onCleanup","off","useSDK","sdk","backButton","closingBehavior","cloudStorage","haptic","initData","initDataRaw","mainButton","popup","postEvent","qrScanner","themeParams","viewport","webApp"],"mappings":"8RAIaA,EAAaC,OAA8BC,EAAW,CAAEC,KAAM,eCIpE,SAASC,IACd,MAAMC,EAAUC,EAAWN,GAE3B,QAAgBE,IAAZG,EACF,MAAM,IAAIE,MAAM,uDAElB,OAAOF,CACT,CCPO,SAASG,EAAYC,GAC1B,MAAMC,EAAcC,GAAW,IAAMF,EAAMC,aAAe,CAAE,KACrDE,GAAQC,EAAeH,EAAaI,GAErCC,EAAaJ,GAAW,IACN,UAAfC,EAAKI,MAAoBJ,IAAS,OAErCK,EAAUN,GAAW,IAAMC,EAAKK,UAChCC,EAAQP,GAAW,SAAqBT,IAAfU,EAAKM,MAAsB,KAAON,EAAKM,QAEtE,OAAAC,EACGnB,EAAWoB,SAAQ,CAACC,MAAO,CAAEN,aAAYE,UAASC,SAAOI,eAAA,OACvDb,EAAMa,QAAQ,GAGrB,CCfO,SAASC,EACdC,EACAC,GAEA,OAAOd,GAAW,IAAMa,IAASC,IACnC,CCWO,SAASC,EACdX,EACAU,EACAE,GAGA,MAAMC,EAAkBL,EAAmBR,EAAYU,IAIhDJ,EAAOQ,GAAYC,EAAaF,IAAmB,CAAEG,QAAQ,IAgBpE,OAdAC,GAAa,KACX,MAAMX,EAAQO,IACRK,EAAWA,KAGfJ,GAASK,GAAQA,GAAK,EAGxBP,EAAOQ,SAAQC,GAASf,EAAMgB,GAAGD,EAAOH,KACxCK,GAAU,KACRX,EAAOQ,SAAQC,GAASf,EAAMkB,IAAIH,EAAOH,IAAU,GACnD,IAGGZ,CACT,CCrCO,SAASmB,IACd,MAAMzB,WAAEA,GAAeX,IAEjBqC,EAAM9B,GAAW,KACrB,MAAMa,EAAST,IAEf,GAAe,OAAXS,EACF,MAAM,IAAIjB,MAAM,yCAElB,OAAOiB,CAAM,IAGf,MAAO,CACLkB,WAAYhB,EAA0Be,EAAK,aAAc,CAAC,qBAC1DE,gBAAiBjB,EAA0Be,EAAK,kBAAmB,CAAC,gCACpEG,aAAcrB,EAAmBkB,EAAK,gBACtCI,OAAQtB,EAAmBkB,EAAK,UAChCK,SAAUvB,EAAmBkB,EAAK,YAClCM,YAAaxB,EAAmBkB,EAAK,eACrCO,WAAYtB,EAA0Be,EAAK,aAAc,CACvD,yBACA,mBACA,2BACA,mBACA,cACA,qBAEFQ,MAAOvB,EAA0Be,EAAK,QAAS,CAAC,oBAChDS,UAAW3B,EAAmBkB,EAAK,aACnCU,UAAWzB,EAA0Be,EAAK,YAAa,CAAC,oBACxDW,YAAa1B,EAA0Be,EAAK,cAAe,CAAC,YAC5DY,SAAU3B,EAA0Be,EAAK,WAAY,CACnD,gBACA,oBACA,sBACA,iBAEFa,OAAQ5B,EAA0Be,EAAK,SAAU,CAAC,yBAA0B,uBAEhF"}

package/dist/source/useDynamicInitResultValue.js

@@ -0,0 +1,29 @@
+import { createEffect, createSignal, onCleanup } from 'solid-js';
+import { useInitResultValue } from './useInitResultValue.js';
+/**
+ * Extracts value from the SDK init result by specified key and listens to its all specified
+ * events, making the returned value to update.
+ * @param initResult - SDK init result.
+ * @param key - SDK init result key.
+ * @param events - tracked events list.
+ */
+export function useDynamicInitResultValue(initResult, key, events) {
+    // Get original value from init result.
+    const initResultValue = useInitResultValue(initResult, key);
+    // Here we store value, which should always update it in case, some of its props
+    // were changed/
+    const [value, setValue] = createSignal(initResultValue(), { equals: false });
+    createEffect(() => {
+        const value = initResultValue();
+        const listener = () => {
+            // We use prev => prev on purpose. This will make Solid sure, something inside
+            // dynamic value changed.
+            setValue(prev => prev);
+        };
+        events.forEach(event => value.on(event, listener));
+        onCleanup(() => {
+            events.forEach(event => value.off(event, listener));
+        });
+    });
+    return value;
+}

package/dist/source/useInitResultValue.js

@@ -0,0 +1,9 @@
+import { createMemo } from 'solid-js';
+/**
+ * Extracts value from the SDK init result by key.
+ * @param result - init result accessor.
+ * @param key - key to extract.
+ */
+export function useInitResultValue(result, key) {
+    return createMemo(() => result()[key]);
+}

package/dist/source/useSDK.js

@@ -1,24 +1,7 @@
-import { createEffect, createMemo, createSignal, onCleanup } from 'solid-js';
+import { createMemo } from 'solid-js';
 import { useSDKContext } from './hooks.js';
-function useDynamicComponent(initResult, key, events) {
-    const [component, setComponent] = createSignal(initResult()[key], { equals: false });
-    createEffect(() => {
-        const obj = component();
-        events.forEach(event => {
-            obj.on(event, () => setComponent(() => obj));
-        });
-        onCleanup(() => {
-            events.forEach(event => {
-                obj.off(event, () => setComponent(() => obj));
-            });
-        });
-    });
-    return component;
-}
-function useInitResultValue(initResult, key) {
-    const value = createMemo(() => initResult()[key]);
-    return value;
-}
+import { useInitResultValue } from './useInitResultValue.js';
+import { useDynamicInitResultValue } from './useDynamicInitResultValue.js';
 /**
  * Returns ready to use SDK components.
  */
@@ -32,13 +15,13 @@ export function useSDK() {
         return result;
     });
     return {
-        backButton: useDynamicComponent(sdk, 'backButton', ['isVisibleChanged']),
-        closingBehavior: useDynamicComponent(sdk, 'closingBehavior', ['isConfirmationNeededChanged']),
+        backButton: useDynamicInitResultValue(sdk, 'backButton', ['isVisibleChanged']),
+        closingBehavior: useDynamicInitResultValue(sdk, 'closingBehavior', ['isConfirmationNeededChanged']),
         cloudStorage: useInitResultValue(sdk, 'cloudStorage'),
         haptic: useInitResultValue(sdk, 'haptic'),
         initData: useInitResultValue(sdk, 'initData'),
         initDataRaw: useInitResultValue(sdk, 'initDataRaw'),
-        mainButton: useDynamicComponent(sdk, 'mainButton', [
+        mainButton: useDynamicInitResultValue(sdk, 'mainButton', [
             'backgroundColorChanged',
             'isVisibleChanged',
             'isProgressVisibleChanged',
@@ -46,16 +29,16 @@ export function useSDK() {
             'textChanged',
             'textColorChanged',
         ]),
-        popup: useDynamicComponent(sdk, 'popup', ['isOpenedChanged']),
+        popup: useDynamicInitResultValue(sdk, 'popup', ['isOpenedChanged']),
         postEvent: useInitResultValue(sdk, 'postEvent'),
-        qrScanner: useDynamicComponent(sdk, 'qrScanner', ['isOpenedChanged']),
-        themeParams: useDynamicComponent(sdk, 'themeParams', ['changed']),
-        viewport: useDynamicComponent(sdk, 'viewport', [
+        qrScanner: useDynamicInitResultValue(sdk, 'qrScanner', ['isOpenedChanged']),
+        themeParams: useDynamicInitResultValue(sdk, 'themeParams', ['changed']),
+        viewport: useDynamicInitResultValue(sdk, 'viewport', [
             'heightChanged',
             'isExpandedChanged',
             'stableHeightChanged',
             'widthChanged',
         ]),
-        webApp: useDynamicComponent(sdk, 'webApp', ['backgroundColorChanged', 'headerColorChanged']),
+        webApp: useDynamicInitResultValue(sdk, 'webApp', ['backgroundColorChanged', 'headerColorChanged']),
     };
 }

package/dist/types/useDynamicInitResultValue.d.ts

@@ -0,0 +1,21 @@
+import { Accessor } from 'solid-js';
+import { SDKInitResult, SDKInitResultKey, SDKInitResultValue } from './types.js';
+interface Trackable {
+    on: (event: any, ...args: any[]) => void;
+    off: (event: any, ...args: any[]) => void;
+}
+type EventName<T extends Trackable> = T extends {
+    on(event: infer E, ...args: any[]): any;
+} ? E : never;
+type DynamicComponentKey = {
+    [K in SDKInitResultKey]: SDKInitResultValue<K> extends Trackable ? K : never;
+}[SDKInitResultKey];
+/**
+ * Extracts value from the SDK init result by specified key and listens to its all specified
+ * events, making the returned value to update.
+ * @param initResult - SDK init result.
+ * @param key - SDK init result key.
+ * @param events - tracked events list.
+ */
+export declare function useDynamicInitResultValue<K extends DynamicComponentKey>(initResult: Accessor<SDKInitResult>, key: K, events: EventName<SDKInitResultValue<K>>[]): Accessor<SDKInitResultValue<K>>;
+export {};

package/dist/types/useInitResultValue.d.ts

@@ -0,0 +1,8 @@
+import { SDKInitResult, SDKInitResultKey, SDKInitResultValue } from './types.js';
+import { Accessor } from 'solid-js';
+/**
+ * Extracts value from the SDK init result by key.
+ * @param result - init result accessor.
+ * @param key - key to extract.
+ */
+export declare function useInitResultValue<K extends SDKInitResultKey>(result: Accessor<SDKInitResult>, key: K): Accessor<SDKInitResultValue<K>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tma.js/sdk-solid",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Solid JS bindings for Web Apps client SDK.",
   "author": "Vladislav Kibenko <wolfram.deus@gmail.com>",
   "homepage": "https://github.com/Telegram-Mini-Apps/tma.js#readme",
@@ -49,7 +49,7 @@
   },
   "dependencies": {
     "@tma.js/utils": "0.5.2",
-    "@tma.js/sdk": "0.11.3"
+    "@tma.js/sdk": "0.11.4"
   },
   "peerDependencies": {
     "solid-js": "^1.0.0"

package/src/useDynamicInitResultValue.ts

@@ -0,0 +1,52 @@
+import { Accessor, createEffect, createSignal, onCleanup } from 'solid-js';
+import { SDKInitResult, SDKInitResultKey, SDKInitResultValue } from './types.js';
+import { useInitResultValue } from './useInitResultValue.js';
+
+interface Trackable {
+  on: (event: any, ...args: any[]) => void;
+  off: (event: any, ...args: any[]) => void;
+}
+
+type EventName<T extends Trackable> = T extends {
+  on(event: infer E, ...args: any[]): any
+} ? E : never;
+
+type DynamicComponentKey = {
+  [K in SDKInitResultKey]: SDKInitResultValue<K> extends Trackable ? K : never;
+}[SDKInitResultKey];
+
+/**
+ * Extracts value from the SDK init result by specified key and listens to its all specified
+ * events, making the returned value to update.
+ * @param initResult - SDK init result.
+ * @param key - SDK init result key.
+ * @param events - tracked events list.
+ */
+export function useDynamicInitResultValue<K extends DynamicComponentKey>(
+  initResult: Accessor<SDKInitResult>,
+  key: K,
+  events: EventName<SDKInitResultValue<K>>[],
+): Accessor<SDKInitResultValue<K>> {
+  // Get original value from init result.
+  const initResultValue = useInitResultValue(initResult, key);
+
+  // Here we store value, which should always update it in case, some of its props
+  // were changed/
+  const [value, setValue] = createSignal(initResultValue(), { equals: false });
+
+  createEffect(() => {
+    const value = initResultValue();
+    const listener = () => {
+      // We use prev => prev on purpose. This will make Solid sure, something inside
+      // dynamic value changed.
+      setValue(prev => prev);
+    };
+
+    events.forEach(event => value.on(event, listener));
+    onCleanup(() => {
+      events.forEach(event => value.off(event, listener));
+    });
+  });
+
+  return value;
+}

package/src/useInitResultValue.ts

@@ -0,0 +1,14 @@
+import { SDKInitResult, SDKInitResultKey, SDKInitResultValue } from './types.js';
+import { Accessor, createMemo } from 'solid-js';
+
+/**
+ * Extracts value from the SDK init result by key.
+ * @param result - init result accessor.
+ * @param key - key to extract.
+ */
+export function useInitResultValue<K extends SDKInitResultKey>(
+  result: Accessor<SDKInitResult>,
+  key: K
+): Accessor<SDKInitResultValue<K>> {
+  return createMemo(() => result()[key]);
+}

package/src/useSDK.ts

@@ -1,57 +1,14 @@
-import { type Accessor, createEffect, createMemo, createSignal, onCleanup } from 'solid-js';
+import { createMemo, type Accessor } from 'solid-js';
 
-import type { SDKInitResult, SDKInitResultKey, SDKInitResultValue } from './types.js';
 import { useSDKContext } from './hooks.js';
-
-interface Trackable {
-  on: (event: any, ...args: any[]) => void;
-  off: (event: any, ...args: any[]) => void;
-}
-
-type EventName<T extends Trackable> = T extends {
-  on(event: infer E, ...args: any[]): any
-} ? E : never;
-
-type DynamicComponentKey = {
-  [K in SDKInitResultKey]: SDKInitResultValue<K> extends Trackable
-    ? K
-    : never;
-}[SDKInitResultKey];
+import { useInitResultValue } from './useInitResultValue.js';
+import { useDynamicInitResultValue } from './useDynamicInitResultValue.js';
+import type { SDKInitResultKey, SDKInitResultValue } from './types.js';
 
 export type SDK = {
   [K in SDKInitResultKey]: Accessor<SDKInitResultValue<K>>
 };
 
-function useDynamicComponent<K extends DynamicComponentKey>(
-  initResult: Accessor<SDKInitResult>,
-  key: K,
-  events: EventName<SDKInitResultValue<K>>[],
-): Accessor<SDKInitResultValue<K>> {
-  const [component, setComponent] = createSignal(initResult()[key], { equals: false });
-
-  createEffect(() => {
-    const obj = component();
-
-    events.forEach(event => {
-      (obj as any).on(event, () => setComponent(() => obj));
-    });
-
-    onCleanup(() => {
-      events.forEach(event => {
-        (obj as any).off(event, () => setComponent(() => obj));
-      });
-    });
-  });
-
-  return component;
-}
-
-function useInitResultValue<K extends SDKInitResultKey>(initResult: Accessor<SDKInitResult>, key: K) {
-  const value = createMemo<SDKInitResultValue<K>>(() => initResult()[key]);
-
-  return value;
-}
-
 /**
  * Returns ready to use SDK components.
  */
@@ -68,13 +25,13 @@ export function useSDK(): SDK {
   });
 
   return {
-    backButton: useDynamicComponent(sdk, 'backButton', ['isVisibleChanged']),
-    closingBehavior: useDynamicComponent(sdk, 'closingBehavior', ['isConfirmationNeededChanged']),
+    backButton: useDynamicInitResultValue(sdk, 'backButton', ['isVisibleChanged']),
+    closingBehavior: useDynamicInitResultValue(sdk, 'closingBehavior', ['isConfirmationNeededChanged']),
     cloudStorage: useInitResultValue(sdk, 'cloudStorage'),
     haptic: useInitResultValue(sdk, 'haptic'),
     initData: useInitResultValue(sdk, 'initData'),
     initDataRaw: useInitResultValue(sdk, 'initDataRaw'),
-    mainButton: useDynamicComponent(sdk, 'mainButton', [
+    mainButton: useDynamicInitResultValue(sdk, 'mainButton', [
       'backgroundColorChanged',
       'isVisibleChanged',
       'isProgressVisibleChanged',
@@ -82,16 +39,16 @@ export function useSDK(): SDK {
       'textChanged',
       'textColorChanged',
     ]),
-    popup: useDynamicComponent(sdk, 'popup', ['isOpenedChanged']),
+    popup: useDynamicInitResultValue(sdk, 'popup', ['isOpenedChanged']),
     postEvent: useInitResultValue(sdk, 'postEvent'),
-    qrScanner: useDynamicComponent(sdk, 'qrScanner', ['isOpenedChanged']),
-    themeParams: useDynamicComponent(sdk, 'themeParams', ['changed']),
-    viewport: useDynamicComponent(sdk, 'viewport', [
+    qrScanner: useDynamicInitResultValue(sdk, 'qrScanner', ['isOpenedChanged']),
+    themeParams: useDynamicInitResultValue(sdk, 'themeParams', ['changed']),
+    viewport: useDynamicInitResultValue(sdk, 'viewport', [
       'heightChanged',
       'isExpandedChanged',
       'stableHeightChanged',
       'widthChanged',
     ]),
-    webApp: useDynamicComponent(sdk, 'webApp', ['backgroundColorChanged', 'headerColorChanged']),
+    webApp: useDynamicInitResultValue(sdk, 'webApp', ['backgroundColorChanged', 'headerColorChanged']),
   };
 }