@tma.js/sdk-solid 0.1.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Telegram Web Apps
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,24 @@
+# @tma.js/sdk-solid
+
+[code-badge]: https://img.shields.io/badge/source-black?logo=github
+
+[code-link]: https://github.com/Telegram-Mini-Apps/tma.js/tree/master/packages/sdk-solid
+
+[docs-link]: https://docs.telegram-mini-apps.com/docs/libraries/tma-js-sdk-solid
+
+[docs-badge]: https://img.shields.io/badge/documentation-blue?logo=gitbook&logoColor=white
+
+[npm-link]: https://npmjs.com/package/@tma.js/sdk-solid
+
+[npm-badge]: https://img.shields.io/npm/v/@tma.js/sdk-solid?logo=npm
+
+[size-badge]: https://img.shields.io/bundlephobia/minzip/@tma.js/sdk-solid
+
+[![NPM][npm-badge]][npm-link]
+![Size][size-badge]
+[![docs-badge]][docs-link]
+[![code-badge]][code-link]
+
+Solid JS bindings for client SDK. Contains hooks, components and other useful tools which allow usage of Solid JS along with Web Apps client SDK. Tracks SDK components changes out of box.
+
+This library is a part of TypeScript packages ecosystem around Telegram Web Apps. You can learn more about this package in this [documentation](https://docs.telegram-mini-apps.com/docs/libraries/tma-js-sdk-solid).

package/dist/cjs/index.js

@@ -0,0 +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;
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +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"}

package/dist/esm/index.js

@@ -0,0 +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};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +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"}

package/dist/source/SDKProvider.jsx

@@ -0,0 +1,15 @@
+import { createMemo, createResource } from 'solid-js';
+import { init } from '@tma.js/sdk';
+import { SDKContext } from './context.js';
+export function SDKProvider(props) {
+    const initOptions = createMemo(() => props.initOptions || {});
+    const [data] = createResource(initOptions, init);
+    const initResult = createMemo(() => {
+        return data.state === 'ready' ? data() : null;
+    });
+    const loading = createMemo(() => data.loading);
+    const error = createMemo(() => data.error === undefined ? null : data.error);
+    return (<SDKContext.Provider value={{ initResult, loading, error }}>
+      {props.children}
+    </SDKContext.Provider>);
+}

package/dist/source/context.js

@@ -0,0 +1,2 @@
+import { createContext } from 'solid-js';
+export const SDKContext = createContext(undefined, { name: 'SDKContext' });

package/dist/source/hooks.js

@@ -0,0 +1,12 @@
+import { useContext } from 'solid-js';
+import { SDKContext } from './context.js';
+/**
+ * Uses SDKContext context.
+ */
+export function useSDKContext() {
+    const context = useContext(SDKContext);
+    if (context === undefined) {
+        throw new Error('useSDKContext hook was used outside of SDKProvider.');
+    }
+    return context;
+}

package/dist/source/index.js

@@ -0,0 +1,6 @@
+export * from './context.js';
+export * from './hooks.js';
+export * from './SDKProvider.jsx';
+export * from './types.js';
+export * from './useSDK.js';
+export { classNames, mergeClassNames } from '@tma.js/utils';

package/dist/source/types.js

@@ -0,0 +1 @@
+export {};

package/dist/source/useSDK.js

@@ -0,0 +1,61 @@
+import { createEffect, createMemo, createSignal, onCleanup } 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;
+}
+/**
+ * Returns ready to use SDK components.
+ */
+export function useSDK() {
+    const { initResult } = useSDKContext();
+    const sdk = createMemo(() => {
+        const result = initResult();
+        if (result === null) {
+            throw new Error('Unable to use SDK as it is not ready.');
+        }
+        return result;
+    });
+    return {
+        backButton: useDynamicComponent(sdk, 'backButton', ['isVisibleChanged']),
+        closingBehavior: useDynamicComponent(sdk, 'closingBehavior', ['isConfirmationNeededChanged']),
+        cloudStorage: useInitResultValue(sdk, 'cloudStorage'),
+        haptic: useInitResultValue(sdk, 'haptic'),
+        initData: useInitResultValue(sdk, 'initData'),
+        initDataRaw: useInitResultValue(sdk, 'initDataRaw'),
+        mainButton: useDynamicComponent(sdk, 'mainButton', [
+            'backgroundColorChanged',
+            'isVisibleChanged',
+            'isProgressVisibleChanged',
+            'isEnabledChanged',
+            'textChanged',
+            'textColorChanged',
+        ]),
+        popup: useDynamicComponent(sdk, 'popup', ['isOpenedChanged']),
+        postEvent: useInitResultValue(sdk, 'postEvent'),
+        qrScanner: useDynamicComponent(sdk, 'qrScanner', ['isOpenedChanged']),
+        themeParams: useDynamicComponent(sdk, 'themeParams', ['changed']),
+        viewport: useDynamicComponent(sdk, 'viewport', [
+            'heightChanged',
+            'isExpandedChanged',
+            'stableHeightChanged',
+            'widthChanged',
+        ]),
+        webApp: useDynamicComponent(sdk, 'webApp', ['backgroundColorChanged', 'headerColorChanged']),
+    };
+}

package/dist/types/SDKProvider.d.ts

@@ -0,0 +1,6 @@
+import { ParentProps } from 'solid-js';
+import type { SDKInitOptions } from './types.js';
+export type SDKProviderProps = ParentProps<{
+    initOptions?: SDKInitOptions;
+}>;
+export declare function SDKProvider(props: SDKProviderProps): import("solid-js").JSX.Element;

package/dist/types/context.d.ts

@@ -0,0 +1,2 @@
+import type { SDKContextType } from './types.js';
+export declare const SDKContext: import("solid-js").Context<SDKContextType>;

package/dist/types/hooks.d.ts

@@ -0,0 +1,5 @@
+import type { SDKContextType } from './types.js';
+/**
+ * Uses SDKContext context.
+ */
+export declare function useSDKContext(): SDKContextType;

package/dist/types/index.d.ts

@@ -0,0 +1,6 @@
+export * from './context.js';
+export * from './hooks.js';
+export * from './SDKProvider.jsx';
+export * from './types.js';
+export * from './useSDK.js';
+export { classNames, mergeClassNames } from '@tma.js/utils';

package/dist/types/types.d.ts

@@ -0,0 +1,11 @@
+import type { InitResult, InitOptions } from '@tma.js/sdk';
+import { Accessor } from 'solid-js';
+export type SDKInitOptions = InitOptions;
+export type SDKInitResult = InitResult;
+export type SDKInitResultKey = keyof SDKInitResult;
+export type SDKInitResultValue<K extends SDKInitResultKey> = SDKInitResult[K];
+export interface SDKContextType {
+    initResult: Accessor<SDKInitResult | null>;
+    loading: Accessor<boolean>;
+    error: Accessor<unknown | null>;
+}

package/dist/types/useSDK.d.ts

@@ -0,0 +1,9 @@
+import { type Accessor } from 'solid-js';
+import type { SDKInitResultKey, SDKInitResultValue } from './types.js';
+export type SDK = {
+    [K in SDKInitResultKey]: Accessor<SDKInitResultValue<K>>;
+};
+/**
+ * Returns ready to use SDK components.
+ */
+export declare function useSDK(): SDK;

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@tma.js/sdk-solid",
+  "version": "0.1.3",
+  "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",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:Telegram-Mini-Apps/tma.js.git",
+    "directory": "packages/sdk-solid"
+  },
+  "bugs": {
+    "url": "https://github.com/Telegram-Mini-Apps/tma.js/issues"
+  },
+  "keywords": [
+    "telegram-mini-apps",
+    "typescript",
+    "sdk",
+    "solidjs"
+  ],
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src"
+  ],
+  "source": "src/index.ts",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "solid": "./dist/source/index.js",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js",
+      "node": "./dist/cjs/index.js",
+      "default": "./dist/cjs/index.js"
+    },
+    "./*": {
+      "types": "./dist/types/*.d.ts",
+      "solid": "./dist/source/*.js",
+      "import": "./dist/esm/*.js",
+      "require": "./dist/cjs/*.js",
+      "node": "./dist/cjs/*.js",
+      "default": "./dist/cjs/*.js"
+    }
+  },
+  "dependencies": {
+    "@tma.js/utils": "0.5.2",
+    "@tma.js/sdk": "0.11.3"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.0.0"
+  },
+  "devDependencies": {
+    "eslint-config-custom": "0.1.0",
+    "tsconfig": "0.0.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "lint": "eslint -c .eslintrc.cjs src/**/*",
+    "build": "rimraf dist && rollup --config rollup.config.js"
+  }
+}

package/src/SDKProvider.tsx

@@ -0,0 +1,24 @@
+import { createMemo, createResource, ParentProps } from 'solid-js';
+import { init } from '@tma.js/sdk';
+
+import { SDKContext } from './context.js';
+import type { SDKInitOptions } from './types.js';
+
+export type SDKProviderProps = ParentProps<{ initOptions?: SDKInitOptions }>;
+
+export function SDKProvider(props: SDKProviderProps) {
+  const initOptions = createMemo(() => props.initOptions || {});
+  const [data] = createResource(initOptions, init);
+
+  const initResult = createMemo(() => {
+    return data.state === 'ready' ? data() : null;
+  });
+  const loading = createMemo(() => data.loading);
+  const error = createMemo(() => data.error === undefined ? null : data.error);
+
+  return (
+    <SDKContext.Provider value={{ initResult, loading, error }}>
+      {props.children}
+    </SDKContext.Provider>
+  );
+}

package/src/context.ts

@@ -0,0 +1,5 @@
+import { createContext } from 'solid-js';
+
+import type { SDKContextType } from './types.js';
+
+export const SDKContext = createContext<SDKContextType>(undefined, { name: 'SDKContext' });

package/src/hooks.ts

@@ -0,0 +1,16 @@
+import { useContext } from 'solid-js';
+
+import { SDKContext } from './context.js';
+import type { SDKContextType } from './types.js';
+
+/**
+ * Uses SDKContext context.
+ */
+export function useSDKContext(): SDKContextType {
+  const context = useContext(SDKContext);
+
+  if (context === undefined) {
+    throw new Error('useSDKContext hook was used outside of SDKProvider.');
+  }
+  return context;
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+export * from './context.js';
+export * from './hooks.js';
+export * from './SDKProvider.jsx';
+export * from './types.js';
+export * from './useSDK.js';
+export { classNames, mergeClassNames } from '@tma.js/utils';

package/src/types.ts

@@ -0,0 +1,13 @@
+import type { InitResult, InitOptions } from '@tma.js/sdk';
+import { Accessor } from 'solid-js';
+
+export type SDKInitOptions = InitOptions;
+export type SDKInitResult = InitResult;
+export type SDKInitResultKey = keyof SDKInitResult;
+export type SDKInitResultValue<K extends SDKInitResultKey> = SDKInitResult[K];
+
+export interface SDKContextType {
+  initResult: Accessor<SDKInitResult | null>;
+  loading: Accessor<boolean>;
+  error: Accessor<unknown | null>;
+}

package/src/useSDK.ts

@@ -0,0 +1,97 @@
+import { type Accessor, createEffect, createMemo, createSignal, onCleanup } 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];
+
+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.
+ */
+export function useSDK(): SDK {
+  const { initResult } = useSDKContext();
+
+  const sdk = createMemo(() => {
+    const result = initResult();
+
+    if (result === null) {
+      throw new Error('Unable to use SDK as it is not ready.');
+    }
+    return result;
+  });
+
+  return {
+    backButton: useDynamicComponent(sdk, 'backButton', ['isVisibleChanged']),
+    closingBehavior: useDynamicComponent(sdk, 'closingBehavior', ['isConfirmationNeededChanged']),
+    cloudStorage: useInitResultValue(sdk, 'cloudStorage'),
+    haptic: useInitResultValue(sdk, 'haptic'),
+    initData: useInitResultValue(sdk, 'initData'),
+    initDataRaw: useInitResultValue(sdk, 'initDataRaw'),
+    mainButton: useDynamicComponent(sdk, 'mainButton', [
+      'backgroundColorChanged',
+      'isVisibleChanged',
+      'isProgressVisibleChanged',
+      'isEnabledChanged',
+      'textChanged',
+      'textColorChanged',
+    ]),
+    popup: useDynamicComponent(sdk, 'popup', ['isOpenedChanged']),
+    postEvent: useInitResultValue(sdk, 'postEvent'),
+    qrScanner: useDynamicComponent(sdk, 'qrScanner', ['isOpenedChanged']),
+    themeParams: useDynamicComponent(sdk, 'themeParams', ['changed']),
+    viewport: useDynamicComponent(sdk, 'viewport', [
+      'heightChanged',
+      'isExpandedChanged',
+      'stableHeightChanged',
+      'widthChanged',
+    ]),
+    webApp: useDynamicComponent(sdk, 'webApp', ['backgroundColorChanged', 'headerColorChanged']),
+  };
+}