cobrowse-sdk-react-native - npm Package Compare versions

Comparing version 2.6.0 to 2.8.0

CHANGELOG.md

@@ -5,2 +5,10 @@ # Changelog
 
+## [2.8.0](https://github.com/cobrowseio/cobrowse-sdk-react-native/compare/v2.6.0...v2.8.0) (2021-11-17)
+
+### Features
+
+* Added APIs to control full device and remote control state, e.g. `session.setFullDevice(true)`
+* Added TypeScript definitions
+
+
 ## [2.6.0](https://github.com/cobrowseio/cobrowse-sdk-react-native/compare/v2.5.2...v2.6.0) (2021-06-14)
@@ -19,8 +27,13 @@
 ## [2.1.0] - 2019-04-26
+
+### Features
+
 - Added `handleSessionRequest` API to `CobrowseIO`
 
+
 ## [2.0.0] - 2019-04-24
-### Changed
+
+### Features
 - Switched to promises for all methods that previously took callback (e.g. `createSession`, `endSession`, `currentSession`)
 - Updated example project to RN 0.59
 - Renamed `loadSession` to `getSession` to match other SDKs

js/CobrowseIO.js

@@ -1,93 +0,93 @@
-'use strict';
+import { Alert } from 'react-native'
+import Session from './Session'
+import CobrowseAccessibilityService from './CobrowseAccessibilityService'
+const CobrowseIONative = require('react-native').NativeModules.CobrowseIO
+const NativeEventEmitter = require('react-native').NativeEventEmitter
 
-import { Alert } from 'react-native';
-const CobrowseIONative = require('react-native').NativeModules.CobrowseIO;
-const NativeEventEmitter = require('react-native').NativeEventEmitter;
+const emitter = new NativeEventEmitter(CobrowseIONative)
 
-const emitter = new NativeEventEmitter(CobrowseIONative);
-
 export default class CobrowseIO {
+  /** @deprecated */
+  static get SESSION_UPDATED () {
+    return 'session.updated'
+  }
 
-    static get SESSION_UPDATED() {
-        return CobrowseIONative.SESSION_UPDATED;
-    }
+  /** @deprecated */
+  static get SESSION_ENDED () {
+    return 'session.ended'
+  }
 
-    static get SESSION_ENDED() {
-        return CobrowseIONative.SESSION_ENDED;
-    }
+  static get accessibilityService () {
+    return CobrowseAccessibilityService
+  }
 
-    static get SESSION_REQUESTED() {
-        return CobrowseIONative.SESSION_REQUESTED;
-    }
+  static handleSessionRequest (session) {
+    Alert.alert(
+      'Support Request',
+      'A support agent would like to use this app with you. Do you accept?',
+      [{
+        text: 'Reject',
+        onPress: () => session.end(),
+        style: 'cancel'
+      }, {
+        text: 'Accept',
+        onPress: () => session.activate()
+      }], { cancelable: true })
+  }
 
-    static handleSessionRequest(session) {
-        Alert.alert(
-            'Support Request',
-            'A support agent would like to use this app with you. Do you accept?',
-            [
-                {
-                    text: 'Reject',
-                    onPress: () => this.endSession(),
-                    style: 'cancel',
-                },
-                {
-                    text: 'Accept',
-                    onPress: () => this.activateSession()
-                },
-            ],
-            {cancelable: true},
-        );
-    }
+  static addListener (event, cb) {
+    return emitter.addListener(event, (session) => cb(new Session(session)))
+  }
 
-    static addListener(event, cb) {
-        return emitter.addListener(event, cb);
-    }
+  static start () {
+    return CobrowseIONative.start()
+  }
 
-    static start() {
-        return CobrowseIONative.start();
-    }
+  static stop () {
+    return CobrowseIONative.stop()
+  }
 
-    static stop() {
-        return CobrowseIONative.stop();
-    }
+  static set api (api) {
+    CobrowseIONative.api(api)
+  }
 
-    static set api(api) {
-        CobrowseIONative.api(api);
-    }
+  static set license (license) {
+    CobrowseIONative.license(license)
+  }
 
-    static set license(license) {
-        CobrowseIONative.license(license);
-    }
+  static set customData (customData) {
+    CobrowseIONative.customData(customData)
+  }
 
-    static set customData(customData) {
-        CobrowseIONative.customData(customData);
-    }
+  static set deviceToken (token) {
+    CobrowseIONative.deviceToken(token)
+  }
 
-    static set deviceToken(token) {
-        CobrowseIONative.deviceToken(token);
-    }
+  static currentSession () {
+    return CobrowseIONative.currentSession().then((session) => session ? new Session(session) : null)
+  }
 
-    static currentSession() {
-        return CobrowseIONative.currentSession();
-    }
+  static createSession () {
+    return CobrowseIONative.createSession().then((session) => session ? new Session(session) : null)
+  }
 
-    static createSession() {
-        return CobrowseIONative.createSession();
-    }
+  static getSession (codeOrId) {
+    return CobrowseIONative.getSession(codeOrId).then((session) => session ? new Session(session) : null)
+  }
 
-    static activateSession() {
-        return CobrowseIONative.activateSession();
-    }
+  /** @deprecated */
+  static activateSession () {
+    return CobrowseIONative.activateSession().then((session) => session ? new Session(session) : null)
+  }
 
-    static getSession(codeOrId) {
-        return CobrowseIONative.getSession(codeOrId);
-    }
-
-    static endSession() {
-        return CobrowseIONative.endSession();
-    }
+  /** @deprecated */
+  static endSession () {
+    return CobrowseIONative.endSession()
+  }
 }
 
-CobrowseIO.addListener(CobrowseIO.SESSION_REQUESTED, (session) => {
-    CobrowseIO.handleSessionRequest(session);
-});
+// the session.requested event is considered internal, it should
+// not be used outside these bindings
+CobrowseIO.addListener('session.requested', (session) => {
+  CobrowseIO.handleSessionRequest(session)
+})

js/CobrowseView.js

@@ -1,129 +0,128 @@
-import React, { Component } from 'react';
+import React, { Component } from 'react'
 import {
-    View,
-    Text,
-    ActivityIndicator,
-    TouchableOpacity,
-    StyleSheet,
-    Linking
-} from 'react-native';
-import CobrowseIO from './CobrowseIO';
+  View,
+  Text,
+  ActivityIndicator,
+  TouchableOpacity,
+  StyleSheet
+} from 'react-native'
+import CobrowseIO from './CobrowseIO'
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        justifyContent: 'flex-end'
-    },
-    text: {
-        textAlign: 'center',
-        margin: 15,
-        fontSize: 15,
-        lineHeight: 20
-    },
-    code: {
-        fontSize: 29,
-        padding: 20,
-        fontWeight: 'bold',
-        textAlign: 'center'
-    },
-    button: {
-        color: 'rgb(0, 122, 255)',
-        fontSize: 18,
-        margin: 10
-    }
-});
+  container: {
+    flex: 1,
+    justifyContent: 'flex-end'
+  },
+  text: {
+    textAlign: 'center',
+    margin: 15,
+    fontSize: 15,
+    lineHeight: 20
+  },
+  code: {
+    fontSize: 29,
+    padding: 20,
+    fontWeight: 'bold',
+    textAlign: 'center'
+  },
+  button: {
+    color: 'rgb(0, 122, 255)',
+    fontSize: 18,
+    margin: 10
+  }
+})
 
 export default class CobrowseView extends Component {
+  constructor () {
+    super()
+    this.state = { error: null, session: null }
+  }
 
-    constructor() {
-        super();
-        this.state = { error: null, session: null };
+  async componentDidMount () {
+    if (this.props.license) {
+      console.warn('Passing license to view is deprecated. Use CobrowseIO.license = "..." instead')
+      CobrowseIO.license = this.props.license
     }
 
-    async componentDidMount() {
-        if (this.props.license) {
-            console.warn('Passing license to view is deprecated. Use CobrowseIO.license = "..." instead');
-            CobrowseIO.license = this.props.license;
-        }
+    try {
+      const current = await CobrowseIO.currentSession()
+      if (current) this.setState({ session: current })
+      else {
+        const session = await CobrowseIO.createSession()
+        this.setState({ session })
+      }
+    } catch (error) {
+      this.setState({ error })
+    }
 
-        try {
-            const current = await CobrowseIO.currentSession();
-            if (current) this.setState({ session:current });
-            else {
-                const session = await CobrowseIO.createSession();
-                this.setState({ session });
-            }
-        } catch (error) {
-            this.setState({ error })
-        }
+    this.updateListener = CobrowseIO.addListener('session.updated', (session) => {
+      this.setState({ session })
+    })
+    this.endListener = CobrowseIO.addListener('session.ended', (session) => {
+      if (this.props.onEnded) this.props.onEnded()
+    })
+  }
 
-        this.updateListener = CobrowseIO.addListener(CobrowseIO.SESSION_UPDATED, (session) => {
-           this.setState({ session });
-        });
-        this.endListener = CobrowseIO.addListener(CobrowseIO.SESSION_ENDED, (session) => {
-            if (this.props.onEnded) this.props.onEnded();
-        });
-    }
+  componentWillUnmount () {
+    if (this.updateListener) this.updateListener.remove()
+    if (this.endListener) this.endListener.remove()
+  }
 
-    componentWillUnmount() {
-        if (this.updateListener) this.updateListener.remove();
-        if (this.endListener) this.endListener.remove();
+  async endSession () {
+    try {
+      const { session } = this.state
+      await session.end()
+      this.setState({ session: null })
+    } catch (error) {
+      this.setState({ error })
     }
+  }
 
-    async endSession() {
-        try {
-            await CobrowseIO.endSession();
-            this.setState({session: null});
-        } catch(error) {
-            this.setState({error});
-        }
-    }
+  renderError () {
+    return (
+      <Text style={[styles.text]}>{this.state.error.message}</Text>
+    )
+  }
 
-    renderError() {
-        return (
-            <Text style={[styles.text]}>{this.state.error.message}</Text>
-        );
-    }
+  renderCode () {
+    let code = this.state.session && this.state.session.code
+    if (code) code = code.substr(0, 3) + '-' + code.substr(3)
+    return (
+      <View>
+        <Text style={[styles.code, { opacity: code ? 1 : 0.2 }]}>{code || '000-000'}</Text>
+        <Text style={[styles.text]}>Provide this code to your support agent to begin screen sharing.</Text>
+        <ActivityIndicator />
+      </View>
+    )
+  }
 
-    renderCode() {
-        let code = this.state.session && this.state.session.code;
-        if (code) code = code.substr(0, 3) + '-' + code.substr(3);
-        return (
-            <View>
-                <Text style={[styles.code, {opacity:code?1:0.2}]}>{code || '000-000'}</Text>
-                <Text style={[styles.text]}>Provide this code to your support agent to begin screen sharing.</Text>
-                <ActivityIndicator/>
-            </View>
-        );
-    }
+  renderManageSession () {
+    return (
+      <View>
+        <Text style={[styles.text]}>You{"'"}re sharing screens from this app with a support agent.</Text>
+        <TouchableOpacity onPress={() => this.endSession()}>
+          <Text style={[styles.text, styles.button]}>End Session</Text>
+        </TouchableOpacity>
+      </View>
+    )
+  }
 
-    renderManageSession() {
-        return (
-            <View>
-                <Text style={[styles.text]}>You{"'"}re sharing screens from this app with a support agent.</Text>
-                <TouchableOpacity onPress={()=>this.endSession()}>
-                    <Text style={[styles.text, styles.button]}>End Session</Text>
-                </TouchableOpacity>
-            </View>
-        );
+  renderContent () {
+    const { error, session } = this.state
+    if (error) {
+      return this.renderError()
+    } else if ((!session) || (session.state === 'pending' || session.state === 'authorizing')) {
+      return this.renderCode()
+    } else {
+      return this.renderManageSession()
     }
+  }
 
-    renderContent() {
-        const { error, session } = this.state;
-        if (error) {
-            return this.renderError();
-        } else if ((!session) || (session.state === 'pending' || session.state === 'authorizing')) {
-            return this.renderCode();
-        } else {
-            return this.renderManageSession();
-        }
-    }
-
-    render() {
-        return (
-            <View style={styles.container}>
-                {this.renderContent()}
-            </View>
-        );
-    }
+  render () {
+    return (
+      <View style={styles.container}>
+        {this.renderContent()}
+      </View>
+    )
+  }
 }

js/index.js

@@ -1,6 +0,4 @@
-'use strict';
-
-export { default as default } from './CobrowseIO'
+export { default } from './CobrowseIO'
 export { default as CobrowseView } from './CobrowseView'
 export { default as Redacted } from './Redacted'
 export { default as SessionControl } from './SessionControl'

js/Redacted.js

@@ -1,17 +0,19 @@
-import React, { useContext } from 'react';
-import { View, requireNativeComponent } from 'react-native';
-const CBIOCobrowseRedacted = requireNativeComponent('CBIOCobrowseRedacted');
+import React, { useContext } from 'react'
+import { View, requireNativeComponent } from 'react-native'
+const CBIOCobrowseRedacted = requireNativeComponent('CBIOCobrowseRedacted')
 
-const RedactionContext = React.createContext(false);
+const RedactionContext = React.createContext(false)
 
-module.exports = function(props) {
-    const alreadyRedacted = useContext(RedactionContext);
-    if (!alreadyRedacted) return (
-        <RedactionContext.Provider value={true}>
-            <CBIOCobrowseRedacted style={props.style}>
-                <View>{props.children}</View>
-            </CBIOCobrowseRedacted>
-        </RedactionContext.Provider>
-    );
-    return props.children;
+export default function (props) {
+  const alreadyRedacted = useContext(RedactionContext)
+  if (!alreadyRedacted) {
+    return (
+      <RedactionContext.Provider value>
+        <CBIOCobrowseRedacted style={props.style}>
+          <View>{props.children}</View>
+        </CBIOCobrowseRedacted>
+      </RedactionContext.Provider>
+    )
+  }
+  return props.children
 }

js/SessionControl.js

@@ -1,25 +0,26 @@
-import React, { Component } from 'react';
-import CobrowseIO from './CobrowseIO';
+import React from 'react'
+import CobrowseIO from './CobrowseIO'
 
-export default class SessionControl extends Component {
+export default class SessionControl extends React.Component {
+  constructor () {
+    super()
+    this.state = { session: null }
+  }
 
-    constructor() {
-        super();
-        this.state = { session: null };
-    }
+  async componentDidMount () {
+    this.setState({ session: await CobrowseIO.currentSession() })
+    this.updateListener = CobrowseIO.addListener(CobrowseIO.SESSION_UPDATED, (session) => {
+      this.setState({ session })
+    })
+  }
 
-    componentDidMount() {
-        this.updateListener = CobrowseIO.addListener(CobrowseIO.SESSION_UPDATED, (session) => {
-           this.setState({ session });
-        });
-    }
+  componentWillUnmount () {
+    if (this.updateListener) this.updateListener.remove()
+  }
 
-    componentWillUnmount() {
-        if (this.updateListener) this.updateListener.remove();
-    }
-
-    render() {
-        if (this.state.session && this.state.session.state === 'active') return this.props.children;
-        else return null;
-    }
+  render () {
+    const { session } = this.state
+    if (session && session.isActive()) return this.props.children
+    else return null
+  }
 }

package.json

 {
   "name": "cobrowse-sdk-react-native",
-  "version": "2.6.0",
+  "version": "2.8.0",
   "description": "Cobrowse SDK for React Native",
-  "main": "./js/index.js",
+  "main": "js/index.js",
+  "types": "ts/index.d.ts",
+  "scripts": {
+    "lint-fix": "ts-standard ts/*.d.ts --fix",
+    "watch": "node scripts/watch.mjs",
+    "start:dev": "nodemon --exec ./scripts/copy.sh"
+  },
   "author": {
@@ -24,3 +30,16 @@ "name": "Andy Pritchard"
   "license": "Apache-2.0",
-  "dependencies": {}
+  "optionalDependencies": {
+    "@types/react": "^17.0.5",
+    "@types/react-native": "^0.64.5"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@types/react": "^17.0.5",
+    "@types/react-native": "^0.64.5",
+    "managed-service-daemon": "^1.2.0",
+    "nodemon": "^2.0.15",
+    "ts-standard": "^10.0.0",
+    "typescript": "^4.2.4",
+    "watchr": "^6.11.0"
+  }
 }

README.md

@@ -24,3 +24,3 @@ # Cobrowse.io - React Native SDK
 
-CobrowseIO.license = "<your license key here>";
+CobrowseIO.license = "put your license key here";
 CobrowseIO.start();
@@ -27,0 +27,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

79751

increased by14.87%

Number of package files

43

increased by34.38%

Lines of code

412

increased by79.91%

Worsened metrics

Dependency count

2

increased byInfinity%

Dev dependency count

7

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes