@botonic/react 1.0.0-beta.0 → 1.0.0-dev.2

package/src/experimental/components/message.jsx

@@ -1,5 +1,5 @@
 import { INPUT, isBrowser } from '@botonic/core'
-import { MessageEventAck } from '@botonic/core/lib/models/events/message'
+import { MessageEventAck } from '@botonic/core/src/models/events/message'
 import React, { useContext, useEffect, useState } from 'react'
 import Fade from 'react-reveal/Fade'
 import styled from 'styled-components'
@@ -128,7 +128,11 @@ export const Message = props => {
   } = resolveMessageTimestamps(getThemeProperty, enabletimestamps)
 
   const resolveAck = ack => {
-    // TODO: Resolution for browser app?
+    // Browser app version
+    // eslint-disable-next-line no-undef
+    if (typeof FULLSTACK === 'undefined' || !FULLSTACK) {
+      return MessageEventAck.RECEIVED
+    }
     if (ack !== undefined) return ack
     if (isFromBot) return MessageEventAck.RECEIVED
     return MessageEventAck.DRAFT
@@ -172,6 +176,8 @@ export const Message = props => {
         display: delay + typing == 0,
         customTypeName: decomposedChildren.customTypeName,
         ack: ack,
+        channel: props.channel,
+        idFromChannel: props.idFromChannel,
       }
       addMessage(message)
     }, [])

package/src/experimental/constants.js

@@ -0,0 +1,189 @@
+import BotonicLogo from '../assets/botonic_react_logo100x100.png'
+
+export const SENDERS = {
+  bot: 'bot',
+  user: 'user',
+}
+
+export const COLORS = {
+  // http://chir.ag/projects/name-that-color
+  APPLE_GREEN: 'rgba(58, 156, 53, 1)',
+  BLEACHED_CEDAR_PURPLE: 'rgba(46, 32, 59, 1)',
+  BOTONIC_BLUE: 'rgba(0, 153, 255, 1)',
+  CACTUS_GREEN: 'rgba(96, 115, 94, 1)',
+  CONCRETE_WHITE: 'rgba(243, 243, 243, 1)',
+  CURIOUS_BLUE: 'rgba(38, 139, 210, 1)',
+  DAINTREE_BLUE: 'rgba(0, 43, 53, 1)',
+  ERROR_RED: 'rgba(255, 43, 94)',
+  FRINGY_FLOWER_GREEN: 'rgba(198, 231, 192, 1)',
+  GRAY: 'rgba(129, 129, 129, 1)',
+  LIGHT_GRAY: 'rgba(209, 209, 209, 1)',
+  MID_GRAY: 'rgba(105, 105, 115, 1)',
+  PIGEON_POST_BLUE_ALPHA_0_5: 'rgba(176, 196, 222, 0.5)',
+  SCORPION_GRAY: 'rgba(87, 87, 87, 1)',
+  SEASHELL_WHITE: 'rgba(241, 240, 240, 1)',
+  SILVER: 'rgba(200, 200, 200, 1)',
+  SOLID_BLACK_ALPHA_0_2: 'rgba(0, 0, 0, 0.2)',
+  SOLID_BLACK_ALPHA_0_5: 'rgba(0, 0, 0, 0.5)',
+  SOLID_BLACK: 'rgba(0, 0, 0, 1)',
+  SOLID_WHITE_ALPHA_0_2: 'rgba(255, 255, 255, 0.2)',
+  SOLID_WHITE_ALPHA_0_8: 'rgba(255, 255, 255, 0.8)',
+  SOLID_WHITE: 'rgba(255, 255, 255, 1)',
+  TASMAN_GRAY: 'rgba(209, 216, 207, 1)',
+  TRANSPARENT: 'rgba(0, 0, 0, 0)',
+  WILD_SAND_WHITE: 'rgba(244, 244, 244, 1)',
+}
+
+export const WEBCHAT = {
+  DEFAULTS: {
+    WIDTH: 300,
+    HEIGHT: 450,
+    TITLE: 'Botonic',
+    LOGO: BotonicLogo,
+    PLACEHOLDER: 'Ask me something...',
+    FONT_FAMILY: "'Noto Sans JP', sans-serif",
+    BORDER_RADIUS_TOP_CORNERS: '6px 6px 0px 0px',
+    ELEMENT_WIDTH: 222,
+    ELEMENT_MARGIN_RIGHT: 6,
+    STORAGE_KEY: 'botonicState',
+    HOST_ID: 'root',
+    ID: 'botonic-webchat',
+    BUTTON_AUTO_DISABLE: false,
+    BUTTON_DISABLED_STYLE: {
+      opacity: 0.5,
+      cursor: 'auto',
+      pointerEvents: 'none',
+    },
+  },
+  SELECTORS: {
+    SCROLLABLE_CONTENT: '#botonic-scrollable-content',
+    SIMPLEBAR_CONTENT: '.simplebar-content',
+    SIMPLEBAR_WRAPPER: '.simplebar-content-wrapper',
+  },
+  CUSTOM_PROPERTIES: {
+    // General
+    enableAnimations: 'animations.enable',
+    markdownStyle: 'markdownStyle',
+    scrollbar: 'scrollbar',
+    // Mobile
+    mobileBreakpoint: 'mobileBreakpoint',
+    mobileStyle: 'mobileStyle',
+    // Webviews
+    webviewHeaderStyle: 'webview.header.style',
+    webviewStyle: 'webview.style',
+    // Brand
+    brandColor: 'brand.color',
+    brandImage: 'brand.image',
+    // Header
+    customHeader: 'header.custom',
+    headerImage: 'header.image',
+    headerStyle: 'header.style',
+    headerSubtitle: 'header.subtitle',
+    headerTitle: 'header.title',
+    // Bot Message
+    botMessageBackground: 'message.bot.style.background',
+    botMessageBlobTick: 'message.bot.blobTick',
+    botMessageBlobTickStyle: 'message.bot.blobTickStyle',
+    botMessageBlobWidth: 'message.bot.blobWidth',
+    botMessageBorderColor: 'message.bot.style.borderColor',
+    botMessageImage: 'message.bot.image',
+    botMessageImageStyle: 'message.bot.imageStyle',
+    botMessageStyle: 'message.bot.style',
+    // User Message
+    customMessageTypes: 'message.customTypes',
+    messageStyle: 'message.style',
+    userMessageBackground: 'message.user.style.background',
+    userMessageBlobTick: 'message.user.blobTick',
+    userMessageBlobTickStyle: 'message.user.blobTickStyle',
+    userMessageBorderColor: 'message.user.style.borderColor',
+    userMessageStyle: 'message.user.style',
+    // Timestamps
+    enableMessageTimestamps: 'message.timestamps.enable',
+    messageTimestampsFormat: 'message.timestamps.format',
+    messageTimestampsStyle: 'message.timestamps.style',
+    // Intro
+    customIntro: 'intro.custom',
+    introImage: 'intro.image',
+    introStyle: 'intro.style',
+    // Buttons
+    buttonHoverBackground: 'button.hoverBackground',
+    buttonHoverTextColor: 'button.hoverTextColor',
+    buttonMessageType: 'button.messageType',
+    buttonStyle: 'button.style',
+    buttonDisabledStyle: 'button.disabledstyle',
+    buttonAutoDisable: 'button.autodisable',
+    buttonStyleBackground: 'button.style.background',
+    buttonStyleColor: 'button.style.color',
+    customButton: 'button.custom',
+    // Replies
+    alignReplies: 'replies.align',
+    customReply: 'reply.custom',
+    replyStyle: 'reply.style',
+    wrapReplies: 'replies.wrap',
+    // TriggerButton
+    customTrigger: 'triggerButton.custom',
+    triggerButtonImage: 'triggerButton.image',
+    triggerButtonStyle: 'triggerButton.style',
+    // User Input
+    blockInputs: 'userInput.blockInputs',
+    documentDownload: 'documentDownload',
+    customMenuButton: 'userInput.menuButton.custom',
+    customPersistentMenu: 'userInput.menu.custom',
+    customSendButton: 'userInput.sendButton.custom',
+    darkBackgroundMenu: 'userInput.menu.darkBackground',
+    enableAttachments: 'userInput.attachments.enable',
+    enableEmojiPicker: 'userInput.emojiPicker.enable',
+    enableSendButton: 'userInput.sendButton.enable',
+    enableUserInput: 'userInput.enable',
+    persistentMenu: 'userInput.persistentMenu',
+    textPlaceholder: 'userInput.box.placeholder',
+    userInputBoxStyle: 'userInput.box.style',
+    userInputStyle: 'userInput.style',
+    // Cover Component
+    coverComponent: 'coverComponent.component',
+    coverComponentProps: 'coverComponent.props',
+    // Carousel
+    customCarouselLeftArrow: 'carousel.arrow.left',
+    customCarouselRightArrow: 'carousel.arrow.right',
+    enableCarouselArrows: 'carousel.enableArrows',
+  },
+}
+
+export const MIME_WHITELIST = {
+  audio: ['audio/mpeg', 'audio/mp3'],
+  document: ['application/pdf'],
+  image: ['image/jpeg', 'image/png'],
+  video: ['video/mp4', 'video/quicktime'],
+}
+
+export const MAX_ALLOWED_SIZE_MB = 10
+
+export const ROLES = {
+  ATTACHMENT_ICON: 'attachment-icon',
+  EMOJI_PICKER_ICON: 'emoji-picker-icon',
+  EMOJI_PICKER: 'emoji-picker',
+  HEADER: 'header',
+  MESSAGE_LIST: 'message-list',
+  PERSISTENT_MENU_ICON: 'persistent-menu-icon',
+  PERSISTENT_MENU: 'persistent-menu',
+  SEND_BUTTON_ICON: 'send-button-icon',
+  WEBCHAT: 'webchat',
+  TRIGGER_BUTTON: 'trigger-button',
+  TYPING_INDICATOR: 'typing-indicator',
+  TEXT_BOX: 'textbox',
+  WEBVIEW: 'webview',
+  WEBVIEW_HEADER: 'webview-header',
+  MESSAGE: 'message',
+  IMAGE_MESSAGE: 'image-message',
+  AUDIO_MESSAGE: 'audio-message',
+  VIDEO_MESSAGE: 'video-message',
+  DOCUMENT_MESSAGE: 'document-message',
+  RAW_MESSAGE: 'raw-message',
+}
+
+export const COMPONENT_TYPE = {
+  TEXT: 'Text',
+  BUTTON: 'Button',
+  REPLY: 'Reply',
+  CAROUSEL: 'Carousel',
+}

package/src/experimental/contexts.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+
+import { webchatInitialState } from './webchat/hooks'
+
+export const RequestContext = React.createContext({
+  getString: () => '',
+  setLocale: () => '',
+  session: {},
+  params: {},
+  input: {},
+  defaultDelay: 0,
+  defaultTyping: 0,
+})
+
+export const WebchatContext = React.createContext({
+  sendText: text => {},
+  sendAttachment: attachment => {},
+  sendPayload: payload => {},
+  sendInput: input => {},
+  setReplies: replies => {},
+  openWebview: webviewComponent => {},
+  addMessage: message => {},
+  updateMessage: message => {},
+  updateReplies: replies => {},
+  updateLatestInput: input => {},
+  closeWebview: () => {},
+  toggleWebchat: () => {},
+  getThemeProperty: property => undefined, // used to retrieve a specific property of the theme defined by the developer in his 'webchat/index.js'
+  resolveCase: () => {},
+  theme: {},
+  webchatState: webchatInitialState,
+  updateWebchatDevSettings: settings => {
+    return {}
+  },
+  updateUser: user => {},
+})

package/src/experimental/dev-app.jsx

@@ -2,9 +2,9 @@ import merge from 'lodash.merge'
 import React from 'react'
 import { render } from 'react-dom'
 
-import { SENDERS } from '../constants'
-import { onDOMLoaded } from '../util/dom'
+import { SENDERS } from './constants'
 import { ReactBot } from './react-bot'
+import { onDOMLoaded } from './util/dom'
 import { WebchatDev } from './webchat/webchat-dev'
 import { WebchatApp } from './webchat-app'
 
@@ -51,7 +51,7 @@ export class DevApp extends WebchatApp {
     })
   }
 
-  getComponent(optionsAtRuntime = {}) {
+  getComponent(host, optionsAtRuntime = {}) {
     let {
       theme = {},
       persistentMenu,
@@ -67,6 +67,7 @@ export class DevApp extends WebchatApp {
       onOpen,
       onClose,
       onMessage,
+      hostId,
       ...webchatOptions
     } = optionsAtRuntime
     theme = merge(this.theme, theme)
@@ -83,6 +84,8 @@ export class DevApp extends WebchatApp {
     this.onOpen = onOpen || this.onOpen
     this.onClose = onClose || this.onClose
     this.onMessage = onMessage || this.onMessage
+    this.hostId = hostId || this.hostId
+    this.createRootElement(host)
     return (
       <WebchatDev
         {...webchatOptions}
@@ -99,8 +102,10 @@ export class DevApp extends WebchatApp {
         enableAnimations={enableAnimations}
         storage={storage}
         storageKey={storageKey}
-        getString={(stringId, session) => this.bot.getString(stringId, session)}
-        setLocale={(locale, session) => this.bot.setLocale(locale, session)}
+        getString={(stringId, botState) =>
+          this.bot.getString(stringId, botState)
+        }
+        setLocale={(locale, botState) => this.bot.setLocale(locale, botState)}
         onInit={(...args) => this.onInitWebchat(...args)}
         onOpen={(...args) => this.onOpenWebchat(...args)}
         onClose={(...args) => this.onCloseWebchat(...args)}
@@ -111,8 +116,10 @@ export class DevApp extends WebchatApp {
 
   render(dest, optionsAtRuntime = {}) {
     onDOMLoaded(() => {
-      this.createRootElement(dest)
-      render(this.getComponent(optionsAtRuntime), this.getReactMountNode(dest))
+      render(
+        this.getComponent(dest, optionsAtRuntime),
+        this.getReactMountNode(dest)
+      )
     })
   }
 

package/src/experimental/index.js

@@ -1,3 +1,4 @@
+import axios from 'axios'
 import { decode } from 'he'
 import merge from 'lodash.merge'
 import React from 'react'
@@ -9,56 +10,111 @@ import { WebchatDev } from './webchat/webchat-dev'
 import { WebchatApp } from './webchat-app'
 
 class WebsocketBackendService {
-  constructor({ user, lastMessageId, onEvent }) {
+  constructor({ user, lastMessageId, onEvent, updateJwt, jwt }) {
     this.user = user || {}
     this.lastMessageId = lastMessageId
-    console.log(onEvent)
     this.onEvent = onEvent
+    this.jwt = jwt
+    this.updateJwt = updateJwt
     this.init()
   }
-  init(user, lastMessageId) {
+  async init(user, lastMessageId) {
     if (user) this.user = user
     if (lastMessageId) this.lastMessageId = lastMessageId
     if (this.wsClient || !this.user.id) return
+    if (!this.jwt) await this.doAuthAndUpdateJwt()
+    this.initWebsocket()
+  }
+
+  initWebsocket() {
     // Establish WebSocket Connection
     // eslint-disable-next-line no-undef
     this.wsClient = new ReconnectingWebSocket(WEBSOCKET_URL)
-
     // On Connection Established...
-    this.wsClient.addEventListener('open', event => {})
-
+    this.wsClient.addEventListener('open', () => {
+      // Send JWT token to onAuth and update user with new connection ID
+      this.wsClient.send(JSON.stringify({ token: this.jwt }))
+    })
     // On Event Received...
     this.wsClient.addEventListener('message', event => {
       console.log(event, this.onEvent)
-      const message = JSON.parse(decode(event.data))
+      const eventData = JSON.parse(decode(event.data))
       if (this.onEvent && typeof this.onEvent === 'function')
-        this.onEvent({ message })
+        this.onEvent(eventData)
     })
   }
-  async postMessage(user, message) {
-    if (this.wsClient.readyState > 1) this.wsClient.reconnect()
-    this.wsClient.send(
-      JSON.stringify({
-        sender: user,
-        message,
+  async doAuthAndUpdateJwt() {
+    this.jwt = await this.doAuth({
+      userId: this.user.id,
+      channel: this.user.channel,
+      idFromChannel: this.user.idFromChannel,
+    })
+    this.updateJwt(this.jwt)
+  }
+
+  async doAuth({ userId, channel, idFromChannel }) {
+    try {
+      const {
+        data: { token },
+        // eslint-disable-next-line no-undef
+      } = await axios.post(`${REST_API_URL}auth/`, {
+        userId,
+        channel,
+        idFromChannel,
       })
-    )
+      return token
+    } catch (e) {
+      console.error(e)
+      return null
+    }
+  }
+
+  async postMessage(user, message) {
+    let hasErrors = false
+    try {
+      await axios
+        .post(
+          // eslint-disable-next-line no-undef
+          `${REST_API_URL}events/`,
+          {
+            message,
+            sender: user, // TODO: Really needed or we should pass user information through JWT?
+          },
+          { headers: { Authorization: 'Bearer ' + this.jwt } } // Note: Do not use string template as it will convert the token with commas, which will be invalid
+        )
+        .catch(error => {
+          if (error.response.status === 401) hasErrors = true
+        })
+    } catch (error) {
+      if (error && error.response.status === 401) hasErrors = true
+    }
+    if (hasErrors) {
+      // TODO: Handle rest of errors
+      await this.doAuthAndUpdateJwt()
+      // await this.postMessage(user, message) // Temporary, avoid infinite events loop
+    }
   }
 }
 
 export class FullstackProdApp extends WebchatApp {
-  async onUserInput({ user, input }) {
-    this.onMessage && this.onMessage(this, { from: 'user', message: input })
+  async onUserInput({ user, input, session, botState }) {
+    this.onMessage && this.onMessage(this, { from: input.from, message: input })
     this.backendService.postMessage(user, input)
   }
 
-  onStateChange({ session: { user }, messagesJSON }) {
+  async doAuth(user) {
+    return await this.backendService.doAuth(user)
+  }
+
+  onStateChange({ user, messagesJSON, jwt, updateJwt }) {
     if (!this.backendService && user) {
       const lastMessage = messagesJSON[messagesJSON.length - 1]
       this.backendService = new WebsocketBackendService({
         user,
         lastMessageId: lastMessage && lastMessage.id,
         onEvent: event => this.onServiceEvent(event),
+        jwt,
+        updateJwt: async token => updateJwt(token),
       })
     }
   }
@@ -71,12 +127,12 @@ export class FullstackDevApp extends DevApp {
     console.log('FullstackDevApp ', args.playgroundCode)
   }
 
-  async onUserInput({ user, input }) {
-    this.onMessage && this.onMessage(this, { from: 'user', message: input })
+  async onUserInput({ user, input, session, botState }) {
+    this.onMessage && this.onMessage(this, { from: input.from, message: input })
     this.backendService && this.backendService.postMessage(user, input)
   }
 
-  getComponent(optionsAtRuntime = {}) {
+  getComponent(host, optionsAtRuntime = {}) {
     let {
       theme = {},
       persistentMenu,
@@ -92,6 +148,7 @@ export class FullstackDevApp extends DevApp {
       onOpen,
       onClose,
       onMessage,
+      hostId,
       ...webchatOptions
     } = optionsAtRuntime
     theme = merge(this.theme, theme)
@@ -108,6 +165,8 @@ export class FullstackDevApp extends DevApp {
     this.onOpen = onOpen || this.onOpen
     this.onClose = onClose || this.onClose
     this.onMessage = onMessage || this.onMessage
+    this.hostId = hostId || this.hostId
+    this.createRootElement(host)
     return (
       <WebchatDev
         {...webchatOptions}
@@ -126,23 +185,32 @@ export class FullstackDevApp extends DevApp {
         storageKey={storageKey}
         playgroundCode={this.playgroundCode}
         onStateChange={webchatState => this.onStateChange(webchatState)}
-        getString={(stringId, session) => this.bot.getString(stringId, session)}
-        setLocale={(locale, session) => this.bot.setLocale(locale, session)}
+        getString={(stringId, botState) =>
+          this.bot.getString(stringId, botState)
+        }
+        setLocale={(locale, botState) => this.bot.setLocale(locale, botState)}
         onInit={(...args) => this.onInitWebchat(...args)}
         onOpen={(...args) => this.onOpenWebchat(...args)}
         onClose={(...args) => this.onCloseWebchat(...args)}
         onUserInput={(...args) => this.onUserInput(...args)}
+        doAuth={(...args) => this.doAuth(...args)}
       />
     )
   }
 
-  onStateChange({ session: { user }, messagesJSON }) {
+  async doAuth(user) {
+    return await this.backendService.doAuth(user)
+  }
+
+  onStateChange({ user, messagesJSON, jwt, updateJwt }) {
     if (!this.backendService && user) {
       const lastMessage = messagesJSON[messagesJSON.length - 1]
       this.backendService = new WebsocketBackendService({
         user,
         lastMessageId: lastMessage && lastMessage.id,
         onEvent: event => this.onServiceEvent(event),
+        updateJwt: async token => updateJwt(token),
+        jwt,
       })
     }
   }
@@ -200,6 +268,7 @@ export class BrowserProdApp extends WebchatApp {
       ...botOptions,
     })
   }
+  // TODO: Review how this be done for only browser versions
   async onUserInput({ input, session, lastRoutePath }) {
     this.onMessage && this.onMessage(this, { from: 'user', message: input })
     const resp = await this.bot.input({ input, session, lastRoutePath })
@@ -220,10 +289,10 @@ export { ShareButton } from '../components/share-button'
 export { Subtitle } from '../components/subtitle'
 export { Title } from '../components/title'
 export { WebchatSettings } from '../components/webchat-settings'
-export { RequestContext, WebchatContext } from '../contexts'
 export { staticAsset } from '../util/environment'
 export { getBotonicApp } from '../webchat'
 export { WebviewApp } from '../webview'
+export { RequestContext, WebchatContext } from './contexts'
 // Experimental
 export { Audio } from './components/audio'
 export { Carousel } from './components/carousel'

package/src/experimental/msg-to-botonic.jsx

@@ -1,5 +1,12 @@
 import React from 'react'
 
+import { Button } from '../components/button'
+import { ButtonsDisabler } from '../components/buttons-disabler'
+import { Element } from '../components/element'
+import { Pic } from '../components/pic'
+import { Reply } from '../components/reply'
+import { Subtitle } from '../components/subtitle'
+import { Title } from '../components/title'
 import {
   isAudio,
   isCarousel,
@@ -9,14 +16,7 @@ import {
   isLocation,
   isText,
   isVideo,
-} from '../../src/message-utils'
-import { Button } from '../components/button'
-import { ButtonsDisabler } from '../components/buttons-disabler'
-import { Element } from '../components/element'
-import { Pic } from '../components/pic'
-import { Reply } from '../components/reply'
-import { Subtitle } from '../components/subtitle'
-import { Title } from '../components/title'
+} from '../message-utils'
 // Experimental
 import { Audio } from './components/audio'
 import { Carousel } from './components/carousel'

package/src/experimental/react-bot.jsx

@@ -1,8 +1,8 @@
 import { CoreBot } from '@botonic/core'
 import React from 'react'
 
-import { RequestContext } from '../contexts'
 import { Text } from './components/text'
+import { RequestContext } from './contexts'
 
 export class ReactBot extends CoreBot {
   constructor(options) {

package/src/experimental/util/dom.js

@@ -0,0 +1,55 @@
+import { WEBCHAT } from '../constants'
+
+export const getScrollableArea = webchatElement => {
+  const getArea = area => {
+    const botonicScrollableContent = webchatElement.querySelector(
+      WEBCHAT.SELECTORS.SCROLLABLE_CONTENT
+    )
+    const scrollableArea =
+      botonicScrollableContent && botonicScrollableContent.querySelector(area)
+    return scrollableArea
+  }
+  return {
+    full: getArea(WEBCHAT.SELECTORS.SIMPLEBAR_CONTENT),
+    visible: getArea(WEBCHAT.SELECTORS.SIMPLEBAR_WRAPPER),
+  }
+}
+
+export const scrollToBottom = ({
+  timeout = 200,
+  behavior = 'smooth',
+  host,
+} = {}) => {
+  const webchatElement = getWebchatElement(host)
+  if (!webchatElement) return
+  const frame = getScrollableArea(webchatElement).visible
+  if (frame) {
+    setTimeout(
+      () => frame.scrollTo({ top: frame.scrollHeight, behavior: behavior }),
+      timeout
+    )
+  }
+}
+
+export const getWebchatElement = host =>
+  host && host.querySelector(`#${WEBCHAT.DEFAULTS.ID}`)
+
+// https://stackoverflow.com/questions/9457891/how-to-detect-if-domcontentloaded-was-fired
+export const onDOMLoaded = callback => {
+  if (/complete|interactive|loaded/.test(document.readyState)) {
+    // In case the document has finished parsing, document's readyState will
+    // be one of "complete", "interactive" or (non-standard) "loaded".
+    callback()
+  } else {
+    // The document is not ready yet, so wait for the DOMContentLoaded event
+    document.addEventListener('DOMContentLoaded', callback, false)
+  }
+}
+
+export const isShadowDOMSupported = () => {
+  try {
+    return document.head.createShadowRoot || document.head.attachShadow
+  } catch (e) {
+    return false
+  }
+}

package/src/experimental/util/objects.js

@@ -0,0 +1,39 @@
+/**
+ * given an object and a property, returns the property if exists (recursively), else undefined
+ * ex:
+ * let obj = { a: { b: { c: 5 } } }
+ * getProperty(obj, 'a.b.c'), returns 5
+ * getProperty(obj, 'a.b.z'), returns undefined
+ */
+export const getProperty = (obj, property) => {
+  if (!property) return undefined
+  const properties = property.split('.')
+  for (let i = 0; i < properties.length; i++) {
+    const prop = properties[i]
+    // eslint-disable-next-line no-prototype-builtins
+    if (!obj || !obj.hasOwnProperty(prop)) {
+      return undefined
+    } else {
+      obj = obj[prop]
+    }
+  }
+  return obj
+}
+
+export function strToBool(string) {
+  const regex = /^\s*(true|1|on)\s*$/i
+  string = String(string)
+  return regex.test(string)
+}
+
+export const mapObject = (obj, conversion = ([key, value]) => [key, value]) => {
+  return (
+    obj &&
+    Object.entries(obj)
+      .map(conversion)
+      .reduce(function (prev, curr) {
+        prev[curr[0]] = curr[1]
+        return prev
+      }, {})
+  )
+}