From 2573a54d82187a14dc6a2b3db44ec6ec655e3bc9 Mon Sep 17 00:00:00 2001 From: Evan Sosenko Date: Fri, 26 May 2023 17:55:03 -0700 Subject: [PATCH 1/5] refactor: Prefer disabled over enabled --- src/lib/SeamProvider.tsx | 25 +++++++++++++++---------- src/lib/seam/use-seam-font.ts | 6 +++--- src/lib/seam/use-seam-styles.ts | 6 +++--- 3 files changed, 21 insertions(+), 16 deletions(-) diff --git a/src/lib/SeamProvider.tsx b/src/lib/SeamProvider.tsx index 52e4dd4bb..90877e89f 100644 --- a/src/lib/SeamProvider.tsx +++ b/src/lib/SeamProvider.tsx @@ -25,14 +25,12 @@ export interface SeamContext { clientSessionToken?: string | undefined } -type SeamProviderProps = { - disableCssInjection?: boolean | undefined - disableFontInjection?: boolean | undefined -} & ( - | SeamProviderPropsWithClient - | (SeamProviderPropsWithPublishableKey & AllowedSeamClientOptions) - | (SeamProviderPropsWithClientSessionToken & AllowedSeamClientOptions) -) +type SeamProviderProps = SeamProviderBaseProps & + ( + | SeamProviderPropsWithClient + | (SeamProviderPropsWithPublishableKey & AllowedSeamClientOptions) + | (SeamProviderPropsWithClientSessionToken & AllowedSeamClientOptions) + ) interface SeamProviderPropsWithClient { client: Seam @@ -47,10 +45,17 @@ interface SeamProviderPropsWithClientSessionToken { clientSessionToken: string } +interface SeamProviderBaseProps { + disableCssInjection?: boolean | undefined + disableFontInjection?: boolean | undefined +} + type AllowedSeamClientOptions = Pick export function SeamProvider({ children, + disableCssInjection = false, + disableFontInjection = false, ...props }: PropsWithChildren): JSX.Element { const { Provider } = seamContext @@ -76,8 +81,8 @@ export function SeamProvider({ ) } - useSeamStyles({ enabled: !(props.disableCssInjection ?? false) }) - useSeamFont({ enabled: !(props.disableFontInjection ?? false) }) + useSeamStyles({ disabled: disableCssInjection }) + useSeamFont({ disabled: disableFontInjection }) return (
diff --git a/src/lib/seam/use-seam-font.ts b/src/lib/seam/use-seam-font.ts index 9280f7c45..3c82356ed 100644 --- a/src/lib/seam/use-seam-font.ts +++ b/src/lib/seam/use-seam-font.ts @@ -3,10 +3,10 @@ import { useEffect } from 'react' const fontUrl = 'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap' -export const useSeamFont = ({ enabled }: { enabled: boolean }) => { +export const useSeamFont = ({ disabled = false }: { disabled?: boolean }) => { useEffect(() => { + if (disabled) return if (globalThis.document == null) return - if (!enabled) return const linkEl = globalThis.document.querySelector(`link[href="${fontUrl}"]`) if (linkEl === null) { @@ -17,5 +17,5 @@ export const useSeamFont = ({ enabled }: { enabled: boolean }) => { globalThis.document.head.appendChild(link) } - }, [enabled]) + }, [disabled]) } diff --git a/src/lib/seam/use-seam-styles.ts b/src/lib/seam/use-seam-styles.ts index bd5a45460..e942818d6 100644 --- a/src/lib/seam/use-seam-styles.ts +++ b/src/lib/seam/use-seam-styles.ts @@ -3,10 +3,10 @@ import { useEffect } from 'react' // TODO figure out the version automatically const cssUrl = 'https://www.unpkg.com/@seamapi/react@1.1.0/index.min.css' -export const useSeamStyles = ({ enabled }: { enabled: boolean }) => { +export const useSeamStyles = ({ disabled = false }: { disabled?: boolean }) => { useEffect(() => { + if (disabled) return if (globalThis.document == null) return - if (!enabled) return const linkEl = globalThis.document.querySelector(`link[href="${cssUrl}"]`) if (linkEl === null) { @@ -17,5 +17,5 @@ export const useSeamStyles = ({ enabled }: { enabled: boolean }) => { globalThis.document.head.appendChild(link) } - }, [enabled]) + }, [disabled]) } From 9ec58130297bb97e38f81246d3ec58d2c7adab01 Mon Sep 17 00:00:00 2001 From: Evan Sosenko Date: Fri, 26 May 2023 17:58:29 -0700 Subject: [PATCH 2/5] refactor: Return early from effect --- src/lib/seam/use-seam-font.ts | 15 +++++++-------- src/lib/seam/use-seam-styles.ts | 31 +++++++++++++++++++------------ 2 files changed, 26 insertions(+), 20 deletions(-) diff --git a/src/lib/seam/use-seam-font.ts b/src/lib/seam/use-seam-font.ts index 3c82356ed..6a7d169eb 100644 --- a/src/lib/seam/use-seam-font.ts +++ b/src/lib/seam/use-seam-font.ts @@ -7,15 +7,14 @@ export const useSeamFont = ({ disabled = false }: { disabled?: boolean }) => { useEffect(() => { if (disabled) return if (globalThis.document == null) return - const linkEl = globalThis.document.querySelector(`link[href="${fontUrl}"]`) - if (linkEl === null) { - const link = globalThis.document.createElement('link') - link.rel = 'stylesheet' - link.type = 'text/css' - link.href = fontUrl + const linkEl = globalThis.document.querySelector(`link[href="${fontUrl}"]`) + if (linkEl != null) return - globalThis.document.head.appendChild(link) - } + const link = globalThis.document.createElement('link') + link.rel = 'stylesheet' + link.type = 'text/css' + link.href = fontUrl + globalThis.document.head.appendChild(link) }, [disabled]) } diff --git a/src/lib/seam/use-seam-styles.ts b/src/lib/seam/use-seam-styles.ts index e942818d6..373ce3dbf 100644 --- a/src/lib/seam/use-seam-styles.ts +++ b/src/lib/seam/use-seam-styles.ts @@ -1,21 +1,28 @@ import { useEffect } from 'react' -// TODO figure out the version automatically -const cssUrl = 'https://www.unpkg.com/@seamapi/react@1.1.0/index.min.css' +const origin = 'https://react.seam.co' + +const version = '1.1.0' + +export const useSeamStyles = ({ + disabled = false, +}: { + disabled?: boolean +}) => { + const cssUrl = `${origin}/v/${version}/index.css` -export const useSeamStyles = ({ disabled = false }: { disabled?: boolean }) => { useEffect(() => { + if (version === null) return if (disabled) return if (globalThis.document == null) return - const linkEl = globalThis.document.querySelector(`link[href="${cssUrl}"]`) - if (linkEl === null) { - const link = globalThis.document.createElement('link') - link.rel = 'stylesheet' - link.type = 'text/css' - link.href = cssUrl + const linkEl = globalThis.document.querySelector(`link[href="${cssUrl}"]`) + if (linkEl != null) return - globalThis.document.head.appendChild(link) - } - }, [disabled]) + const link = globalThis.document.createElement('link') + link.rel = 'stylesheet' + link.type = 'text/css' + link.href = cssUrl + globalThis.document.head.appendChild(link) + }, [disabled, cssUrl]) } From 12ddff08bd39626d1c7461a11303924f32e29bce Mon Sep 17 00:00:00 2001 From: Evan Sosenko Date: Fri, 26 May 2023 18:04:32 -0700 Subject: [PATCH 3/5] docs: Import CSS in example --- examples/basic/src/App.tsx | 1 + examples/basic/src/main.tsx | 2 ++ src/lib/version.ts | 1 + 3 files changed, 4 insertions(+) create mode 100644 src/lib/version.ts diff --git a/examples/basic/src/App.tsx b/examples/basic/src/App.tsx index 7e4120613..f1eb08f3d 100644 --- a/examples/basic/src/App.tsx +++ b/examples/basic/src/App.tsx @@ -6,6 +6,7 @@ export const App = (): JSX.Element => { endpoint={import.meta.env.SEAM_ENDPOINT} publishableKey={import.meta.env.SEAM_PUBLISHABLE_KEY} userIdentifierKey={import.meta.env.SEAM_USER_IDENTIFIER_KEY} + disableCssInjection >

Seam Components

diff --git a/examples/basic/src/main.tsx b/examples/basic/src/main.tsx index 88775a0ba..d54185fd7 100644 --- a/examples/basic/src/main.tsx +++ b/examples/basic/src/main.tsx @@ -1,3 +1,5 @@ +import '@seamapi/react/index.css' + import React from 'react' import { createRoot } from 'react-dom/client' diff --git a/src/lib/version.ts b/src/lib/version.ts new file mode 100644 index 000000000..7b8595488 --- /dev/null +++ b/src/lib/version.ts @@ -0,0 +1 @@ +export default null From c7c88e8a968a5b0da5a34176681cf71edc01bf11 Mon Sep 17 00:00:00 2001 From: Evan Sosenko Date: Fri, 26 May 2023 18:05:37 -0700 Subject: [PATCH 4/5] feat: Add useUnminifiedCss prop --- src/lib/SeamProvider.tsx | 4 +++- src/lib/seam/use-seam-styles.ts | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/lib/SeamProvider.tsx b/src/lib/SeamProvider.tsx index 90877e89f..79f88fab7 100644 --- a/src/lib/SeamProvider.tsx +++ b/src/lib/SeamProvider.tsx @@ -48,6 +48,7 @@ interface SeamProviderPropsWithClientSessionToken { interface SeamProviderBaseProps { disableCssInjection?: boolean | undefined disableFontInjection?: boolean | undefined + useUnminifiedCss?: boolean | undefined } type AllowedSeamClientOptions = Pick @@ -56,6 +57,7 @@ export function SeamProvider({ children, disableCssInjection = false, disableFontInjection = false, + useUnminifiedCss = false, ...props }: PropsWithChildren): JSX.Element { const { Provider } = seamContext @@ -81,7 +83,7 @@ export function SeamProvider({ ) } - useSeamStyles({ disabled: disableCssInjection }) + useSeamStyles({ disabled: disableCssInjection, unminified: useUnminifiedCss }) useSeamFont({ disabled: disableFontInjection }) return ( diff --git a/src/lib/seam/use-seam-styles.ts b/src/lib/seam/use-seam-styles.ts index 373ce3dbf..628058558 100644 --- a/src/lib/seam/use-seam-styles.ts +++ b/src/lib/seam/use-seam-styles.ts @@ -6,10 +6,12 @@ const version = '1.1.0' export const useSeamStyles = ({ disabled = false, + unminified = false, }: { + unminified?: boolean disabled?: boolean }) => { - const cssUrl = `${origin}/v/${version}/index.css` + const cssUrl = `${origin}/v/${version}/index${unminified ? '' : '.min'}.css` useEffect(() => { if (version === null) return From 12172b35111bc9de295ff5b5d775798d0524c20a Mon Sep 17 00:00:00 2001 From: Evan Sosenko Date: Fri, 26 May 2023 18:08:03 -0700 Subject: [PATCH 5/5] fix: Use correct version for stylesheet --- package.json | 1 + src/lib/seam/use-seam-styles.ts | 7 ++++--- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 4223e9d6e..0a89ccc70 100644 --- a/package.json +++ b/package.json @@ -65,6 +65,7 @@ "lint": "eslint --ignore-path .gitignore --ext .js,.cjs,.mjs,.ts,.tsx .", "prelint": "prettier --check --ignore-path .gitignore .", "postlint": "stylelint '**/*.scss'", + "prepack": "echo \"export default '$(jq -r .version < package.json)'\" > lib/version.js", "postversion": "git push --follow-tags", "storybook": "storybook dev --port 6006", "storybook:docs": "storybook dev --docs --port 6007", diff --git a/src/lib/seam/use-seam-styles.ts b/src/lib/seam/use-seam-styles.ts index 628058558..7e13a43fa 100644 --- a/src/lib/seam/use-seam-styles.ts +++ b/src/lib/seam/use-seam-styles.ts @@ -1,8 +1,8 @@ import { useEffect } from 'react' -const origin = 'https://react.seam.co' +import version from 'lib/version.js' -const version = '1.1.0' +const origin = 'https://react.seam.co' export const useSeamStyles = ({ disabled = false, @@ -11,7 +11,8 @@ export const useSeamStyles = ({ unminified?: boolean disabled?: boolean }) => { - const cssUrl = `${origin}/v/${version}/index${unminified ? '' : '.min'}.css` + const ext = `${unminified ? '' : 'min.'}css` + const cssUrl = `${origin}/v/${version ?? ''}/index.${ext}` useEffect(() => { if (version === null) return