@xylabs/sdk-react 2.7.23 → 2.8.1

package/rollup.config.js

@@ -1,119 +1,5 @@
-import image from '@rollup/plugin-image'
-import json from '@rollup/plugin-json'
-import replace from '@rollup/plugin-replace'
-import strip from '@rollup/plugin-strip'
-import typescriptPlugin from '@rollup/plugin-typescript'
-import typescript from 'typescript'
+import { getRollupConfig } from '@xylabs/rollup-config'
 
 import pkg from './package.json'
 
-const deps = Object.keys(Object.assign({}, pkg.peerDependencies, pkg.dependencies))
-
-const BUILD_TARGET_MAGIC_STRING = '__BUILD_TARGET__'
-
-function generateBuildTargetReplaceConfig(moduleFormat, languageTarget) {
-  let buildTarget = ''
-
-  switch (moduleFormat.toLowerCase()) {
-    case 'esm':
-      buildTarget += 'esm'
-      break
-    case 'cjs':
-      buildTarget += 'cjs'
-      break
-    default:
-      throw Error(`unsupported module format ${moduleFormat}. Valid values are esm and cjs.`)
-  }
-
-  if (typeof languageTarget !== 'number') {
-    throw Error('languageTarget accepts only number')
-  }
-
-  // simplified input validation
-  if (languageTarget != 5 && languageTarget < 2015) {
-    throw Error(`invalid languageTarget ${languageTarget}. Valid values are 5, 2015, 2016, etc.`)
-  }
-
-  buildTarget += languageTarget
-
-  return {
-    [BUILD_TARGET_MAGIC_STRING]: buildTarget,
-    preventAssignment: true,
-  }
-}
-
-function emitModulePackageFile() {
-  return {
-    generateBundle() {
-      this.emitFile({
-        fileName: 'package.json',
-        source: '{"type":"module"}',
-        type: 'asset',
-      })
-    },
-    name: 'emit-module-package-file',
-  }
-}
-
-const getPlugIns = (outDir) => {
-  return [
-    image(),
-    json(),
-    strip({
-      functions: ['debugAssert.*'],
-    }),
-    typescriptPlugin({
-      outDir,
-      typescript,
-    }),
-  ]
-}
-
-const browserBuilds = [
-  {
-    external: (id) => deps.some((dep) => id === dep || id.startsWith(`${dep}/`)),
-    input: {
-      index: './src/index.ts',
-    },
-    output: [{ dir: './dist/esm5', format: 'es', sourcemap: true }],
-    plugins: [...getPlugIns('./dist/esm5'), replace(generateBuildTargetReplaceConfig('esm', 5))],
-  },
-  {
-    external: (id) => deps.some((dep) => id === dep || id.startsWith(`${dep}/`)),
-    input: {
-      index: './src/index.ts',
-    },
-    output: {
-      dir: './dist/esm2017',
-      format: 'es',
-      sourcemap: true,
-    },
-    plugins: [...getPlugIns('./dist/esm2017'), replace(generateBuildTargetReplaceConfig('esm', 2017))],
-  },
-]
-
-const nodeBuilds = [
-  {
-    external: (id) => deps.some((dep) => id === dep || id.startsWith(`${dep}/`)),
-    input: {
-      index: './src/index.ts',
-    },
-    output: [{ dir: './dist/node', format: 'cjs', sourcemap: true }],
-    plugins: [...getPlugIns('./dist/node'), replace(generateBuildTargetReplaceConfig('cjs', 5))],
-  },
-  {
-    external: (id) => deps.some((dep) => id === dep || id.startsWith(`${dep}/`)),
-    input: {
-      index: './src/index.ts',
-    },
-    output: [{ dir: './dist/node-esm', format: 'es', sourcemap: true }],
-    plugins: [
-      ...getPlugIns('./dist/node-esm'),
-      replace(generateBuildTargetReplaceConfig('esm', 2017)),
-      emitModulePackageFile(),
-    ],
-  },
-]
-
-// eslint-disable-next-line import/no-default-export
-export default [...browserBuilds, ...nodeBuilds]
+export default getRollupConfig(pkg)

package/src/components/Experiments/Experiments.tsx

@@ -1,8 +1,8 @@
-import { Log } from '@xylabs/sdk-js'
+import { forget, Log } from '@xylabs/sdk-js'
 import React, { ReactElement, useContext } from 'react'
 
 import { UserEventsContext } from '../../contexts'
-import { getLocalStorageObject, isLocalhost, setLocalStorageObject } from '../../lib'
+import { getLocalStorageObject, setLocalStorageObject } from '../../lib'
 import { ExperimentProps } from './Experiment'
 
 const defaultLocalStorageKey = 'testData'
@@ -31,7 +31,6 @@ type Props = {
   children: ReactElement<ExperimentProps>[] | ReactElement<ExperimentProps>
   localStorageProp?: string | boolean
   name: string
-  testStarted?: () => Promise<void>
 }
 
 const missingKeyError = new Error('Experiment Elements must have Keys')
@@ -61,9 +60,9 @@ const calcTotalWeight = (childList: ReactElement<ExperimentProps>[]) => {
 }
 
 const Experiments: React.FC<Props> = (props) => {
-  const { name, children, testStarted, localStorageProp = true } = props
-  const userEventsConntext = useContext(UserEventsContext)
-  const { userEvents } = userEventsConntext
+  const { name, children, localStorageProp = true } = props
+  const userEventsContext = useContext(UserEventsContext)
+  const { userEvents } = userEventsContext
   loadOutcomes()
 
   const localStorageKey = buildLocalStorageKey(localStorageProp)
@@ -87,9 +86,8 @@ const Experiments: React.FC<Props> = (props) => {
       if (localStorageProp !== false) {
         localStorage.setItem(localStorageKey, mergeData(experimentsTestData))
       }
-      if (!isLocalhost) {
-        userEvents?.testStarted({})
-        testStarted?.()
+      if (userEvents) {
+        forget(userEvents.testStarted({ name, variation: child.key }))
       }
     }
 

package/src/components/InvertableThemeProvider/InvertableThemeContext.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
+import { createContext } from 'react'
 
 import { InvertableTheme } from './InvertableTheme'
 
-const InvertableThemeContext = React.createContext<InvertableTheme>({
+const InvertableThemeContext = createContext<InvertableTheme>({
   options: {},
 })
 

package/src/contexts/Ethers/Context.ts

@@ -1,7 +1,7 @@
 import { Signer } from '@ethersproject/abstract-signer'
 import { Provider } from '@ethersproject/providers'
 import { EthAddress } from '@xylabs/sdk-js'
-import React from 'react'
+import { createContext } from 'react'
 
 export interface EthersData {
   busy?: boolean
@@ -18,4 +18,4 @@ export interface EthersData {
   walletProvider?: Provider | null
 }
 
-export const EthersContext = React.createContext<EthersData>({})
+export const EthersContext = createContext<EthersData>({})

package/src/contexts/Ethers/Opera.tsx

@@ -1,7 +1,8 @@
 import { JsonRpcProvider, JsonRpcSigner, Web3Provider } from '@ethersproject/providers'
 import { EthAddress } from '@xylabs/sdk-js'
-import React, { PropsWithChildren, useState } from 'react'
+import { PropsWithChildren, useState } from 'react'
 
+import { useAsyncEffect } from '../../lib'
 import { EthersContext } from './Context'
 
 interface Props {
@@ -23,37 +24,30 @@ export const OperaEthersLoader: React.FC<PropsWithChildren<Props>> = (props) =>
   const chainId = ethereum?.chainId ? parseInt(ethereum?.chainId) : 1
   const isConnected = ethereum?.isConnected() ?? false
 
-  React.useEffect(() => {
-    let cancelled = false
-
-    if (ethereum) {
-      ethereum.enable()
-      const operaProvider = new Web3Provider(ethereum)
-      const provider = operaProvider
-      const signer = operaProvider.getSigner()
-      const load = async () => {
+  useAsyncEffect(
+    async (mounted) => {
+      if (ethereum) {
+        ethereum.enable()
+        const operaProvider = new Web3Provider(ethereum)
+        const provider = operaProvider
+        const signer = operaProvider.getSigner()
         try {
           const localAddress = EthAddress.fromString(await signer.getAddress())
           ethereum.autoRefreshOnNetworkChange = false
-          if (!cancelled) {
+          if (mounted()) {
             setSigner(signer)
             setProvider(provider)
             setLocalAddress(localAddress)
           }
         } catch (ex) {
-          if (!cancelled) {
+          if (mounted()) {
             setError(Error(`localAddress: ${ex}`))
           }
         }
       }
-
-      load()
-    }
-
-    return () => {
-      cancelled = true
-    }
-  }, [ethereum])
+    },
+    [ethereum]
+  )
 
   return (
     <EthersContext.Provider

package/src/contexts/Ethers/Trust.tsx

@@ -1,7 +1,8 @@
 import { Web3Provider } from '@ethersproject/providers'
 import { EthAddress } from '@xylabs/sdk-js'
-import React, { PropsWithChildren, useEffect, useState } from 'react'
+import { PropsWithChildren, useState } from 'react'
 
+import { useAsyncEffect } from '../../lib'
 import { EthersContext } from './Context'
 
 interface Props {
@@ -22,30 +23,23 @@ export const TrustEthersLoader: React.FC<PropsWithChildren<Props>> = (props) =>
 
   const provider = trustProvider
 
-  useEffect(() => {
-    let cancelled = false
-
-    if (signer) {
-      const load = async () => {
+  useAsyncEffect(
+    async (mounted) => {
+      if (signer) {
         try {
           const localAddress = EthAddress.fromString(await signer.getAddress())
-          if (!cancelled) {
+          if (mounted()) {
             setLocalAddress(localAddress)
           }
         } catch (ex) {
-          if (!cancelled) {
+          if (mounted()) {
             setError(Error(`localAddress: ${ex}`))
           }
         }
       }
-
-      load()
-    }
-
-    return () => {
-      cancelled = true
-    }
-  }, [signer])
+    },
+    [signer]
+  )
 
   return (
     <EthersContext.Provider

package/src/contexts/NetworkSettings/Context.ts

@@ -1,7 +1,7 @@
 import { EthAddress } from '@xylabs/sdk-js'
-import React from 'react'
+import { createContext } from 'react'
 
-const NetworkSettingsContext = React.createContext<{
+const NetworkSettingsContext = createContext<{
   xyStakingConsensusAddress?: EthAddress
   xyBondAddress?: EthAddress
   xyGovernanceAddress?: EthAddress

package/src/contexts/UserEvents/Context.ts

@@ -1,9 +1,9 @@
 import { UserEventHandler } from '@xylabs/pixel'
-import React from 'react'
+import { createContext } from 'react'
 
 interface Props {
   userEvents?: UserEventHandler<unknown>
 }
 
-const UserEventsContext = React.createContext<Props>({})
+const UserEventsContext = createContext<Props>({})
 export { UserEventsContext }

package/src/lib/Tracking/Facebook/Fbq.ts

@@ -1,5 +1,3 @@
-import { delay } from '@xylabs/sdk-js'
-
 import { global } from '../../global'
 
 class Fbq {
@@ -36,18 +34,16 @@ class Fbq {
     return this.instance
   }
 
-  public async track(event: string, data: Record<string, unknown>) {
+  public track(event: string, data: Record<string, unknown>) {
     this.fbq('track', event, {
       ...data,
     })
-    await delay(0)
   }
 
-  public async trackCustom(event: string, data: Record<string, unknown>) {
+  public trackCustom(event: string, data: Record<string, unknown>) {
     this.fbq('trackCustom', event, {
       ...data,
     })
-    await delay(0)
   }
 }
 

package/src/lib/Tracking/Reddit/Rdt.ts

@@ -1,5 +1,3 @@
-import { delay } from '@xylabs/sdk-js'
-
 import { global } from '../../global'
 
 class Rdt {
@@ -26,12 +24,11 @@ class Rdt {
     }
   }
 
-  public async track(event: string, data?: Record<string, unknown>) {
+  public track(event: string, data?: Record<string, unknown>) {
     try {
       Rdt.getRdt()('track', event, {
         ...data,
       })
-      await delay(0)
     } catch (ex) {
       console.error(ex)
     }

package/src/lib/Tracking/Snapchat/Snaptr.ts

@@ -1,5 +1,3 @@
-import { delay } from '@xylabs/sdk-js'
-
 import { global } from '../../global'
 
 class SnapTr {
@@ -15,10 +13,9 @@ class SnapTr {
     this.track('PAGE_VIEW')
   }
 
-  public static async track<T>(event: string, data?: T) {
+  public static track<T>(event: string, data?: T) {
     this.getSnapTr()('init', this.pixelId)
     this.getSnapTr()('track', event, data)
-    await delay(0)
   }
 }
 

package/src/lib/Tracking/Tiktok/Ttq.ts

@@ -1,5 +1,3 @@
-import { delay } from '@xylabs/sdk-js'
-
 import { global } from '../../global'
 
 class Ttq {
@@ -18,21 +16,19 @@ class Ttq {
     return global.ttq
   }
 
-  public static async page() {
+  public static page() {
     try {
       Ttq.getTtq().page()
-      await delay(0)
     } catch (ex) {
       console.error(`Ttq.page: ${ex}`)
     }
   }
 
-  public async track(event: string, data?: Record<string, unknown>) {
+  public track(event: string, data?: Record<string, unknown>) {
     try {
       Ttq.getTtq().track(event, {
         ...data,
       })
-      await delay(0)
     } catch (ex) {
       console.error(`Ttq.track: ${ex}`)
     }

package/src/lib/useAsyncEffect.tsx

@@ -12,11 +12,15 @@ function useAsyncEffect(effect: EffectFunc, inputs?: unknown[]) {
       return mounted
     })
 
-    Promise.resolve(promise).then((callback) => {
-      if (callback) {
-        callback?.()
-      }
-    })
+    Promise.resolve(promise)
+      .then((callback) => {
+        if (callback) {
+          callback?.()
+        }
+      })
+      .catch((reason) => {
+        console.log(`useAsyncEffect Excepted: ${reason}`)
+      })
 
     return function () {
       mounted = false

package/index.node.ts

@@ -1 +0,0 @@
-export * from './src'

package/index.ts

@@ -1 +0,0 @@
-export * from './src'