From efebea386612ff56a578d0fc0bc60382655fd7cd Mon Sep 17 00:00:00 2001 From: devrnt Date: Sun, 24 May 2020 13:05:53 +0200 Subject: [PATCH 1/4] chore: update tsconfig --- tsconfig.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/tsconfig.json b/tsconfig.json index 1e79b510..8484d04f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -18,6 +18,7 @@ "*": ["src/*", "node_modules/*"] }, "jsx": "react", - "esModuleInterop": true + "esModuleInterop": true, + "allowSyntheticDefaultImports": false, } } From d8e2ad04ebf2f72036b0bed7af2cc8614e50ea37 Mon Sep 17 00:00:00 2001 From: devrnt Date: Sun, 24 May 2020 13:07:29 +0200 Subject: [PATCH 2/4] refactor: use react namespace imports --- src/context.tsx | 4 ++-- src/provider.tsx | 36 ++++++++++++++++++------------------ 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/src/context.tsx b/src/context.tsx index e9375ae0..bcd5413b 100644 --- a/src/context.tsx +++ b/src/context.tsx @@ -1,4 +1,4 @@ -import { createContext } from 'react'; +import * as React from 'react'; import * as logger from './logger'; import { IntercomContextValues } from './contextTypes'; @@ -6,7 +6,7 @@ import { IntercomContextValues } from './contextTypes'; const NO_INTERCOM_PROVIDER_MESSAGE = 'Please wrap your component with `IntercomProvider`.'; -const IntercomContext = createContext({ +const IntercomContext = React.createContext({ boot: () => logger.log('error', NO_INTERCOM_PROVIDER_MESSAGE), shutdown: () => logger.log('error', NO_INTERCOM_PROVIDER_MESSAGE), hardShutdown: () => logger.log('error', NO_INTERCOM_PROVIDER_MESSAGE), diff --git a/src/provider.tsx b/src/provider.tsx index b5885630..3dbdae21 100644 --- a/src/provider.tsx +++ b/src/provider.tsx @@ -1,4 +1,4 @@ -import React, { useContext, useCallback, useMemo, useState } from 'react'; +import * as React from 'react'; import * as logger from './logger'; import initialize from './initialize'; @@ -27,7 +27,7 @@ export const IntercomProvider = ({ ].join(''), ); - const [isBooted, setIsBooted] = useState(autoBoot); + const [isBooted, setIsBooted] = React.useState(autoBoot); if (!window.Intercom) { initialize(appId); @@ -43,7 +43,7 @@ export const IntercomProvider = ({ } } - const ensureIntercomIsBooted = useCallback( + const ensureIntercomIsBooted = React.useCallback( (functionName: string = 'A function', callback: Function) => { if (!isBooted) { logger.log( @@ -61,7 +61,7 @@ export const IntercomProvider = ({ [isBooted], ); - const boot = useCallback( + const boot = React.useCallback( (props?: IntercomProps) => { if (isBooted) return; @@ -77,14 +77,14 @@ export const IntercomProvider = ({ [appId, isBooted], ); - const shutdown = useCallback(() => { + const shutdown = React.useCallback(() => { if (!isBooted) return; IntercomAPI('shutdown'); setIsBooted(false); }, [isBooted]); - const hardShutdown = useCallback(() => { + const hardShutdown = React.useCallback(() => { if (!isBooted) return; IntercomAPI('shutdown'); @@ -93,14 +93,14 @@ export const IntercomProvider = ({ setIsBooted(false); }, [isBooted]); - const refresh = useCallback(() => { + const refresh = React.useCallback(() => { ensureIntercomIsBooted('update', () => { const lastRequestedAt = new Date().getTime(); IntercomAPI('update', { last_requested_at: lastRequestedAt }); }); }, [ensureIntercomIsBooted]); - const update = useCallback( + const update = React.useCallback( (props?: IntercomProps) => { ensureIntercomIsBooted('update', () => { if (!props) { @@ -115,23 +115,23 @@ export const IntercomProvider = ({ [ensureIntercomIsBooted, refresh], ); - const hide = useCallback(() => { + const hide = React.useCallback(() => { ensureIntercomIsBooted('hide', () => { IntercomAPI('hide'); }); }, [ensureIntercomIsBooted]); - const show = useCallback(() => { + const show = React.useCallback(() => { ensureIntercomIsBooted('show', () => IntercomAPI('show')); }, [ensureIntercomIsBooted]); - const showMessages = useCallback(() => { + const showMessages = React.useCallback(() => { ensureIntercomIsBooted('showMessages', () => { IntercomAPI('showMessages'); }); }, [ensureIntercomIsBooted]); - const showNewMessages = useCallback( + const showNewMessages = React.useCallback( (message?: string) => { ensureIntercomIsBooted('showNewMessage', () => { if (!message) { @@ -144,13 +144,13 @@ export const IntercomProvider = ({ [ensureIntercomIsBooted], ); - const getVisitorId = useCallback(() => { + const getVisitorId = React.useCallback(() => { return ensureIntercomIsBooted('getVisitorId', () => { return (IntercomAPI('getVisitorId') as unknown) as string; }); }, [ensureIntercomIsBooted]); - const startTour = useCallback( + const startTour = React.useCallback( (tourId: number) => { ensureIntercomIsBooted('startTour', () => { IntercomAPI('startTour', tourId); @@ -159,7 +159,7 @@ export const IntercomProvider = ({ [ensureIntercomIsBooted], ); - const trackEvent = useCallback( + const trackEvent = React.useCallback( (event: string, metaData?: object) => { ensureIntercomIsBooted('trackEvent', () => { if (metaData) { @@ -172,7 +172,7 @@ export const IntercomProvider = ({ [ensureIntercomIsBooted], ); - const providerValue = useMemo(() => { + const providerValue = React.useMemo(() => { return { boot, shutdown, @@ -200,7 +200,7 @@ export const IntercomProvider = ({ trackEvent, ]); - const content = useMemo(() => children, [children]); + const content = React.useMemo(() => children, [children]); return ( @@ -209,4 +209,4 @@ export const IntercomProvider = ({ ); }; -export const useIntercomContext = () => useContext(IntercomContext); +export const useIntercomContext = () => React.useContext(IntercomContext); From 9ebed3adaf1134404d6f417ea08183e2b72e08b1 Mon Sep 17 00:00:00 2001 From: devrnt Date: Sun, 24 May 2020 13:20:51 +0200 Subject: [PATCH 3/4] refactor: use namespace imports in config --- config/test.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/config/test.ts b/config/test.ts index e7b92966..2ce0e711 100644 --- a/config/test.ts +++ b/config/test.ts @@ -1,5 +1,5 @@ -import dotenv from 'dotenv'; -import path from 'path'; +import * as dotenv from 'dotenv'; +import * as path from 'path'; import { Config } from '.'; if (!process.env.CI) { From bed044b7e20a4ff576a5fabfe8cce89f3978642b Mon Sep 17 00:00:00 2001 From: devrnt Date: Sun, 24 May 2020 14:05:33 +0200 Subject: [PATCH 4/4] chore: avoid provider rerenders --- src/provider.tsx | 48 +++++++++++++++++++++++------------------------- 1 file changed, 23 insertions(+), 25 deletions(-) diff --git a/src/provider.tsx b/src/provider.tsx index 3dbdae21..ab552181 100644 --- a/src/provider.tsx +++ b/src/provider.tsx @@ -27,10 +27,11 @@ export const IntercomProvider = ({ ].join(''), ); - const [isBooted, setIsBooted] = React.useState(autoBoot); + const memoizedAppId = React.useRef(appId); + const isBooted = React.useRef(autoBoot); if (!window.Intercom) { - initialize(appId); + initialize(memoizedAppId.current); // Only add listeners on initialization if (onHide) IntercomAPI('onHide', onHide); if (onShow) IntercomAPI('onShow', onShow); @@ -38,14 +39,14 @@ export const IntercomProvider = ({ IntercomAPI('onUnreadCountChange', onUnreadCountChange); if (autoBoot) { - IntercomAPI('boot', { app_id: appId }); - window.intercomSettings = { app_id: appId }; + IntercomAPI('boot', { app_id: memoizedAppId.current }); + window.intercomSettings = { app_id: memoizedAppId.current }; } } const ensureIntercomIsBooted = React.useCallback( (functionName: string = 'A function', callback: Function) => { - if (!isBooted) { + if (!isBooted.current) { logger.log( 'warn', [ @@ -58,40 +59,37 @@ export const IntercomProvider = ({ } return callback(); }, - [isBooted], + [], ); - const boot = React.useCallback( - (props?: IntercomProps) => { - if (isBooted) return; + const boot = React.useCallback((props?: IntercomProps) => { + if (isBooted.current) return; - const metaData: RawIntercomBootProps = { - app_id: appId, - ...(props && mapIntercomPropsToRawIntercomProps(props)), - }; + const metaData: RawIntercomBootProps = { + app_id: memoizedAppId.current, + ...(props && mapIntercomPropsToRawIntercomProps(props)), + }; - window.intercomSettings = metaData; - IntercomAPI('boot', metaData); - setIsBooted(true); - }, - [appId, isBooted], - ); + window.intercomSettings = metaData; + IntercomAPI('boot', metaData); + isBooted!.current = true; + }, []); const shutdown = React.useCallback(() => { - if (!isBooted) return; + if (!isBooted.current) return; IntercomAPI('shutdown'); - setIsBooted(false); - }, [isBooted]); + isBooted.current = false; + }, []); const hardShutdown = React.useCallback(() => { - if (!isBooted) return; + if (!isBooted.current) return; IntercomAPI('shutdown'); delete window.Intercom; delete window.intercomSettings; - setIsBooted(false); - }, [isBooted]); + isBooted.current = false; + }, []); const refresh = React.useCallback(() => { ensureIntercomIsBooted('update', () => {