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/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/SeamProvider.tsx b/src/lib/SeamProvider.tsx index 52e4dd4bb..79f88fab7 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,19 @@ interface SeamProviderPropsWithClientSessionToken { clientSessionToken: string } +interface SeamProviderBaseProps { + disableCssInjection?: boolean | undefined + disableFontInjection?: boolean | undefined + useUnminifiedCss?: boolean | undefined +} + type AllowedSeamClientOptions = Pick export function SeamProvider({ children, + disableCssInjection = false, + disableFontInjection = false, + useUnminifiedCss = false, ...props }: PropsWithChildren): JSX.Element { const { Provider } = seamContext @@ -76,8 +83,8 @@ export function SeamProvider({ ) } - useSeamStyles({ enabled: !(props.disableCssInjection ?? false) }) - useSeamFont({ enabled: !(props.disableFontInjection ?? false) }) + useSeamStyles({ disabled: disableCssInjection, unminified: useUnminifiedCss }) + useSeamFont({ disabled: disableFontInjection }) return (
diff --git a/src/lib/seam/use-seam-font.ts b/src/lib/seam/use-seam-font.ts index 9280f7c45..6a7d169eb 100644 --- a/src/lib/seam/use-seam-font.ts +++ b/src/lib/seam/use-seam-font.ts @@ -3,19 +3,18 @@ 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) { - 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) - } - }, [enabled]) + 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 bd5a45460..7e13a43fa 100644 --- a/src/lib/seam/use-seam-styles.ts +++ b/src/lib/seam/use-seam-styles.ts @@ -1,21 +1,31 @@ import { useEffect } from 'react' -// TODO figure out the version automatically -const cssUrl = 'https://www.unpkg.com/@seamapi/react@1.1.0/index.min.css' +import version from 'lib/version.js' + +const origin = 'https://react.seam.co' + +export const useSeamStyles = ({ + disabled = false, + unminified = false, +}: { + unminified?: boolean + disabled?: boolean +}) => { + const ext = `${unminified ? '' : 'min.'}css` + const cssUrl = `${origin}/v/${version ?? ''}/index.${ext}` -export const useSeamStyles = ({ enabled }: { enabled: boolean }) => { useEffect(() => { + if (version === null) return + if (disabled) return if (globalThis.document == null) return - if (!enabled) 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) - } - }, [enabled]) + const link = globalThis.document.createElement('link') + link.rel = 'stylesheet' + link.type = 'text/css' + link.href = cssUrl + globalThis.document.head.appendChild(link) + }, [disabled, cssUrl]) } 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