@01tech/sportsbook-vue 0.66.0 → 0.68.0

package/dist/index.d.ts

@@ -1,28 +1,16 @@
 import * as vue from 'vue';
 
-type SportsFramePlatformType = 'mobile' | 'tablet' | 'desktop';
+type SportsbookPlatformType = 'mobile' | 'tablet' | 'desktop';
 
-type SportsFrameColorSchemeType = 'light' | 'dark';
+type SportsbookColorScheme = 'light' | 'dark';
 
-type SportsFrameColorSchemeModalType = SportsFrameColorSchemeType | 'auto';
-
-interface SportsFrameNotificationEventPayload {
+type SportsbookNotificationPayload = {
   variant: 'success' | 'info' | 'error';
   title: string;
   text?: string;
-}
-
-interface SportsFrameImageVariant {
-  url: string;
-  /**
-   * Mostly used to avoid unnecessary layout shift; in most cases, recommended to use.
-   */
-  height?: number;
-  width?: number;
-  // srcset?: [];
-}
+};
 
-type SportsFrameCoefFormat =
+type SportsbookCoefFormat =
   | 'decimal'
   | 'fractional'
   | 'american'
@@ -30,8 +18,8 @@ type SportsFrameCoefFormat =
   | 'indonesian'
   | 'malay';
 
-interface SportsFrameNavigationModeSync {
-  type: 'sync';
+interface SportsbookNavigationModeManual {
+  type: 'manual';
   initialPath: string;
   push(path: string): Promise<void>;
   replace(path: string): Promise<void>;
@@ -39,48 +27,54 @@ interface SportsFrameNavigationModeSync {
   forward(): void;
 }
 
-interface SportsFrameNavigationModeAuto {
-  type: 'auto';
-}
+type SportsbookNavigationModeHistory = {
+  type: 'web-history';
+};
 
-type SportsFrameNavigation = SportsFrameNavigationModeSync | SportsFrameNavigationModeAuto;
+type SportsbookNavigationModeMemory = {
+  type: 'memory';
+  initialPath?: string;
+};
 
-interface SportsFrameThemeConfig {
-  readonly preset?: {
-    readonly name: string;
-    readonly env?: 'prod' | 'preprod';
-  };
-}
+type SportsbookNavigation =
+  | SportsbookNavigationModeManual
+  | SportsbookNavigationModeHistory
+  | SportsbookNavigationModeMemory;
 
-interface SportsFrameBonusWalletOptions {
-  readonly bonusId: string;
-  readonly amount: number;
+type SportsbookFeatures = {
   /**
-   * The bonus has its own currency and does not use the system-defined currency.
+   * @default true
    */
-  readonly currencyCode: string;
-}
-
-interface SportsFrameGraphicsConfig {
-  readonly betslipEmpty?: SportsFrameImageVariant;
-  readonly betslipSuccess?: SportsFrameImageVariant;
-  readonly freebetPromoBanner?: SportsFrameImageVariant;
-  readonly watermarkLogo?: SportsFrameImageVariant;
-}
-
-interface SportsFrameFeaturesConfig {
   readonly sharedBet?: boolean;
+  /**
+   * @default true
+   */
   readonly broadcast?: boolean;
   /**
-   * Enables the ability to switch themes within the frame.
-   * This is a stateless setting — you must manually subscribe to theme change events
-   * and update the corresponding parameter inside the frame accordingly.
+   * @deprecated
+   * @default true
    */
-  readonly colorThemeSwitcher?: boolean;
-  readonly trends?: boolean;
-}
+  readonly expressBonus?: boolean;
+};
 
-interface SportsFrameAppearanceConfig {
+type OnNavigateEventPayload = {
+  fullPath: string;
+};
+
+/**
+ * @public
+ */
+type SportsbookThemeConfig = {
+  readonly preset?: {
+    readonly name: string;
+    readonly env?: 'prod' | 'preprod';
+  };
+};
+
+/**
+ * @public
+ */
+type SportsbookAppearance = {
   /**
    * z-index values for different floating UI elements.
    * Accepts either a number or a string. The string can be a raw value (like '1000'),
@@ -121,58 +115,89 @@ interface SportsFrameAppearanceConfig {
      */
     readonly bottom?: number | string;
   };
-}
+};
 
-interface SportsFrameInitOptions {
+/**
+ * @public
+ */
+type SportsbookInitOptions = {
   /**
-   * Api Url
+   * The base path relative to which the sportsbook is rendered. This will be used for navigating and generating promo links.
    */
-  baseUrl: string;
-  navigation?: SportsFrameNavigation;
+  baseUrl?: string;
+  navigation?: SportsbookNavigation;
   apiUrl: string;
   cdnUrl?: string;
   partnerId: string;
   token?: string;
-  authed: boolean;
+  authed?: boolean;
   languageCode?: string;
+  countryCode?: string;
   rtl?: boolean;
   currencyCode?: string;
   balanceAmount?: number;
-  bonusWallet?: SportsFrameBonusWalletOptions;
-  platform: SportsFramePlatformType;
-  colorScheme?: SportsFrameColorSchemeType;
-  colorSchemeModal?: SportsFrameColorSchemeModalType;
-  theme?: SportsFrameThemeConfig;
+  platform: SportsbookPlatformType;
+  colorScheme?: SportsbookColorScheme;
+  theme?: SportsbookThemeConfig;
+  /**
+   * @default false
+   */
   inert?: boolean;
-  appearance?: SportsFrameAppearanceConfig;
-  features?: SportsFrameFeaturesConfig;
-  graphics?: SportsFrameGraphicsConfig;
-  shareLinkBehavior?: 'native' | 'manual' | 'hidden';
-  defaultCoefFormat?: SportsFrameCoefFormat;
+  appearance?: SportsbookAppearance;
+  /**
+   * @default 'decimal'
+   */
+  defaultCoefFormat?: SportsbookCoefFormat;
+  /**
+   * @default false
+   */
+  production?: boolean;
+  /**
+   * @default '01tech-sportsbook'
+   */
+  localStoragePrefix?: string;
+  features?: SportsbookFeatures;
+  // handlers
+  onReady?: () => void;
+  onError?: (err?: Error) => void;
+  onLogin?: (place?: 'bets' | 'wheel' | undefined) => void;
+  onDeposit?: () => void;
+  onRenewToken?: () => void;
+  onNavigate?: (options?: OnNavigateEventPayload) => void;
+  onSendNotification?: (payload: SportsbookNotificationPayload) => void;
+};
+
+interface SportsbookBonusWalletOptions {
+  readonly bonusId: string;
+  readonly amount: number;
+  /**
+   * The bonus has its own currency and does not use the system-defined currency.
+   */
+  readonly currencyCode: string;
+}
+
+/**
+ * @public
+ */
+interface SportsbookApp {
+  mount(el: HTMLElement): void;
+  destroy(): void;
+  setToken(token: string | undefined): void;
+  setPlatform(platform: SportsbookPlatformType): void;
+  setLanguageCode(languageCode: string | undefined): void;
+  setRtl(rtl: boolean | undefined): void;
+  setColorScheme(colorScheme: SportsbookColorScheme): void;
+  setAuthed(authed: boolean): void;
+  setInert(inert: boolean): void;
+  setCurrencyCode(currencyCode: string | undefined): void;
+  setBalanceAmount(balance: number | undefined): void;
+  setBonusWallet(wallet: SportsbookBonusWalletOptions | undefined): void;
+  setAppearance(appearance: SportsbookAppearance): void;
+  navigateTo(path: string, type?: 'push' | 'replace'): void;
 }
 
-declare const _default: vue.DefineComponent<SportsFrameInitOptions, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {} & {
-    ready: () => any;
-    login: () => any;
-    renewToken: () => any;
-    notify: (options: SportsFrameNotificationEventPayload) => any;
-    shareLink: (options: string) => any;
-    changeModalState: (options: {
-        opened: boolean;
-    }) => any;
-    topUpBalance: () => any;
-    changeColorScheme: (options: "light" | "dark") => any;
-}, string, vue.PublicProps, Readonly<SportsFrameInitOptions> & Readonly<{
-    onReady?: (() => any) | undefined;
-    onLogin?: (() => any) | undefined;
-    onRenewToken?: (() => any) | undefined;
-    onNotify?: ((options: SportsFrameNotificationEventPayload) => any) | undefined;
-    onShareLink?: ((options: string) => any) | undefined;
-    onChangeModalState?: ((options: {
-        opened: boolean;
-    }) => any) | undefined;
-    onTopUpBalance?: (() => any) | undefined;
-    onChangeColorScheme?: ((options: "light" | "dark") => any) | undefined;
-}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+declare const _default: vue.DefineComponent<SportsbookInitOptions, {
+    app: Readonly<vue.Ref<vue.ShallowRef<SportsbookApp | undefined, SportsbookApp | undefined>, vue.ShallowRef<SportsbookApp | undefined, SportsbookApp | undefined>>>;
+}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<SportsbookInitOptions> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
 
 export { _default as SportsbookFrame };

package/dist/index.js

@@ -1,67 +1,81 @@
-import { watch as s, nextTick as f, shallowRef as h, getCurrentInstance as v, onMounted as k, defineComponent as y, useTemplateRef as b, effectScope as g, ref as S, computed as U, onScopeDispose as C, createElementBlock as w, openBlock as L } from "vue";
+import { watch as s, nextTick as h, shallowRef as d, getCurrentInstance as k, onMounted as b, defineComponent as g, useAttrs as S, useTemplateRef as F, effectScope as w, ref as C, computed as U, onScopeDispose as _, toRef as A, createElementBlock as R, openBlock as B } from "vue";
 typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-function E(a, n, e) {
-  const r = s(a, (l, i, c) => {
-    l && (e?.once && f(() => r()), n(l, i, c));
+function x(o, t, e) {
+  const c = s(o, (r, l, u) => {
+    r && (e?.once && h(() => c()), t(r, l, u));
   }, {
     ...e,
     once: !1
   });
-  return r;
+  return c;
 }
 // @__NO_SIDE_EFFECTS__
-function B() {
-  const a = h(!1), n = v();
-  return n && k(() => {
-    a.value = !0;
-  }, n), a;
+function T() {
+  const o = d(!1), t = k();
+  return t && b(() => {
+    o.value = !0;
+  }, t), o;
 }
-async function _(a) {
-  const n = `${a.cdnUrl}/manifest/v1/stable/sportsbook/manifest.json`, e = await fetch(n);
+function m(o) {
+  return o.endsWith("/") ? o.slice(0, -1) : o;
+}
+function $(o) {
+  let t = o;
+  for (; t.startsWith("/"); ) t = t.slice(1);
+  return t;
+}
+function p(o, ...t) {
+  let e = m(o);
+  for (const c of t) {
+    const r = $(c);
+    r && (e = e + "/" + r);
+  }
+  return e;
+}
+async function M(o) {
+  const t = p(o.cdnUrl, `manifest/v1/${o.stage}/sportsbook/manifest.json`), e = await fetch(t);
   if (!e.ok)
     throw new Error(`Failed to fetch manifest: ${e.status} ${e.statusText}`);
   return await e.json();
 }
-const A = "0.66.0", F = "https://01-sports-frame-cdn.com";
-async function M(a, n) {
+const E = "0.68.0", W = "https://01-sports-frame-cdn.com";
+async function j(o, t) {
   return {
     createSportsbookFrame: (await import(
       /* @vite-ignore */
-      `${a}/sportsbook/v1/core/v/${n}/esm/entry.js`
+      `${o}/sportsbook/v1/core/v/${t}/esm/entry.js`
     )).createSportsbookFrame
   };
 }
-async function T(a) {
-  const n = a, { cdnUrl: e = F } = n;
-  let r;
+async function L(o = {}) {
+  const t = m(o.cdnUrl ?? W);
+  let e;
   try {
-    r = (await _({
-      cdnUrl: e,
+    e = (await M({
+      cdnUrl: t,
       stage: "stable"
     })).v1.main.version;
-  } catch (c) {
-    throw console.error("Error loading manifest:", c), c;
+  } catch (l) {
+    throw console.error("Error loading manifest:", l), l;
   }
-  console.log("Version:", r);
-  const l = `${e}/sportsbook/v1/core/v/${r}/esm/style.css`, i = await M(e, r);
+  const c = p(t, `sportsbook/v1/core/v/${e}/esm/style.css`), r = await j(t, e);
   return {
-    createApp: (c) => {
-      const d = c;
-      return i.createSportsbookFrame({
-        ...d,
-        // TODO: add path resolver
-        assetsUrl: d.cdnUrl + "/sportsbook/v1/static/",
-        cdnUrl: d.cdnUrl ?? e,
+    createApp: (l) => {
+      const u = l;
+      return r.createSportsbookFrame({
+        ...u,
+        assetsUrl: p(t, "sportsbook/v1/static"),
+        cdnUrl: t,
         __sdk: {
           stage: "stable",
-          version: A,
-          cssStyleUrl: l
+          version: E,
+          cssStyleUrl: c
         }
       });
     }
   };
 }
-const W = ["dir"], x = /* @__PURE__ */ y({
+const D = ["dir"], I = /* @__PURE__ */ g({
   inheritAttrs: !1,
   __name: "SportsbookFrame",
   props: {
@@ -73,120 +87,81 @@ const W = ["dir"], x = /* @__PURE__ */ y({
     token: {},
     authed: { type: Boolean },
     languageCode: {},
+    countryCode: {},
     rtl: { type: Boolean },
     currencyCode: {},
     balanceAmount: {},
-    bonusWallet: {},
     platform: {},
     colorScheme: {},
-    colorSchemeModal: {},
     theme: {},
     inert: { type: Boolean },
     appearance: {},
+    defaultCoefFormat: {},
+    production: { type: Boolean },
+    localStoragePrefix: {},
     features: {},
-    graphics: {},
-    shareLinkBehavior: {},
-    defaultCoefFormat: {}
+    onReady: { type: Function },
+    onError: { type: Function },
+    onLogin: { type: Function },
+    onDeposit: { type: Function },
+    onRenewToken: { type: Function },
+    onNavigate: { type: Function },
+    onSendNotification: { type: Function }
   },
-  emits: ["ready", "login", "renewToken", "notify", "changeModalState", "topUpBalance", "changeColorScheme", "shareLink"],
-  setup(a, { emit: n }) {
-    const e = a, r = n, l = b("el"), i = g(), c = /* @__PURE__ */ B(), d = S(!1), p = U(() => e.rtl ? "rtl" : "ltr");
-    let u;
-    return C(() => {
-      u?.destroy();
-    }), i.run(async () => {
-      const o = (await T({ cdnUrl: e.cdnUrl })).createApp({
-        // assetsUrl: props.assetUrl,
-        baseUrl: e.baseUrl,
-        navigation: { type: "auto" },
-        partnerId: e.partnerId ?? "",
-        apiUrl: e.apiUrl,
-        cdnUrl: e.cdnUrl ?? "",
-        token: e.token ?? "",
-        authed: e.authed ?? !1,
-        balanceAmount: e.balanceAmount,
-        bonusWallet: e.bonusWallet,
-        languageCode: e.languageCode,
-        rtl: e.rtl,
-        currencyCode: e.currencyCode,
-        platform: e.platform,
-        colorScheme: e.colorScheme,
-        // colorSchemeModal: props.modalColorScheme,
-        theme: e.theme,
-        appearance: e.appearance,
-        features: e.features,
-        shareLinkBehavior: e.shareLinkBehavior,
-        defaultCoefFormat: e.defaultCoefFormat
-        // _experiments: props.experiments,
-        // _debug: props.debug,
-        // _contentResourcesPrefix: props.contentResourcesPrefix,
-        // _trackEvent(payload) {
-        //   emit('trackEvent', payload);
-        // },
+  setup(o, { expose: t }) {
+    const e = o, c = S(), r = F("el"), l = w(), u = /* @__PURE__ */ T(), f = C(!1), y = U(() => e.rtl ? "rtl" : "ltr"), i = d();
+    return _(() => {
+      i.value?.destroy();
+    }), t({
+      app: A(() => i)
+    }), l.run(async () => {
+      const a = (await L({ cdnUrl: e.cdnUrl })).createApp({
+        ...e,
+        ...c,
+        onReady() {
+          f.value = !0, e.onReady?.();
+        }
       });
-      o.addEventListener("ready", () => {
-        d.value = !0;
-      }), u = o, o.addEventListener("shareLink", (t) => {
-        r("shareLink", t);
-      }), o.addEventListener("ready", () => {
-        d.value = !0, r("ready");
-      }), o.addEventListener("login", () => {
-        r("login");
-      }), o.addEventListener("deposit", () => {
-        r("topUpBalance");
-      }), o.addEventListener("notify", (t) => {
-        r("notify", t);
-      }), o.addEventListener("renewToken", () => {
-        r("renewToken");
-      }), o.addEventListener("setModalState", ({ opened: t }) => {
-        r("changeModalState", { opened: t });
-      }), o.addEventListener("setColorScheme", (t) => {
-        r("changeColorScheme", t);
-      }), s(
+      i.value = a, s(
         () => e.languageCode,
-        (t) => o.setLanguageCode(t)
+        (n) => a.setLanguageCode(n)
       ), s(
         () => e.rtl,
-        (t) => o.setRtl(t)
+        (n) => a.setRtl(n)
       ), s(
         () => e.platform,
-        (t) => o.setPlatform(t)
+        (n) => a.setPlatform(n)
       ), s(
         () => e.token,
-        (t) => o.setToken(t)
+        (n) => a.setToken(n)
       ), s(
         () => e.authed,
-        (t) => o.setAuthed(t)
+        (n) => a.setAuthed(n)
       ), s(
         () => e.colorScheme,
-        (t) => o.setColorScheme(t ?? "dark")
+        (n) => a.setColorScheme(n ?? "dark")
       ), s(
         () => e.currencyCode,
-        (t) => o.setCurrencyCode(t)
+        (n) => a.setCurrencyCode(n)
       ), s(
         () => e.balanceAmount,
-        (t) => o.setBalanceAmount(t)
-      ), s(
-        () => e.bonusWallet,
-        (t) => o.setBonusWallet(t)
+        (n) => a.setBalanceAmount(n)
       );
-    }), E(
-      () => c.value && d.value,
+    }), x(
+      () => u.value && f.value,
       () => {
-        if (!l.value || !u)
-          throw new Error("unexpected error");
-        u.mount(l.value);
+        !r.value || !i.value || i.value.mount(r.value);
       },
       { once: !0 }
-    ), (m, o) => (L(), w("div", {
+    ), (v, a) => (B(), R("div", {
       id: "sport-frame",
       ref_key: "el",
-      ref: l,
-      dir: p.value,
+      ref: r,
+      dir: y.value,
       "data-sport-frame": ""
-    }, null, 8, W));
+    }, null, 8, D));
   }
 });
 export {
-  x as SportsbookFrame
+  I as SportsbookFrame
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@01tech/sportsbook-vue",
   "private": false,
-  "version": "0.66.0",
+  "version": "0.68.0",
   "publishConfig": {
     "access": "public"
   },
@@ -9,16 +9,14 @@
     "sdk:build:prepare": "rm -rf ./dist",
     "dts-compile": "vue-tsc --project ./tsconfig.dts.json",
     "dts-resolve": "rollup -c rollup.dts.config.mjs",
+    "dev:micro": "rollup -c rollup.dts.config.mjs --watch",
     "sdk:build:dts": "npm run dts-compile && npm run dts-resolve",
     "sdk:build:js": "NODE_ENV=production vite build --config vite.config.ts",
     "sdk:build": "npm run sdk:build:prepare && npm run sdk:build:dts && npm run sdk:build:js",
     "sdk:dev": "NODE_ENV=development vite build --watch --config vite.config.ts"
   },
-  "devDependencies": {
-    "@01tech/sportsbook-web": "*"
-  },
   "peerDependencies": {
-    "vue": "^3.5.13",
+    "vue": "^3.5.0",
     "vue-router": "~4.5.1"
   },
   "peerDependenciesMeta": {
@@ -26,8 +24,10 @@
       "optional": true
     }
   },
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "development": "./src/index.ts",
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     }