From 08d91825d3dc8677fb2efc0e4ad55d2812df6429 Mon Sep 17 00:00:00 2001 From: Evan Sosenko Date: Fri, 26 May 2023 15:35:34 -0700 Subject: [PATCH 01/23] feat: Add first web component --- examples/vite-env.d.ts | 2 ++ examples/vite.config.ts | 3 +++ examples/web-components/index.html | 18 ++++++++++++++++++ examples/web-components/src/env.d.ts | 11 +++++++++++ examples/web-components/src/main.ts | 2 ++ package-lock.json | 20 ++++++++++++++++++-- package.json | 13 ++++++++++--- src/elements.ts | 10 ++++++++++ tsconfig.json | 3 ++- vite.config.ts | 20 ++++++++++++++++++++ 10 files changed, 96 insertions(+), 6 deletions(-) create mode 100644 examples/web-components/index.html create mode 100644 examples/web-components/src/env.d.ts create mode 100644 examples/web-components/src/main.ts create mode 100644 src/elements.ts create mode 100644 vite.config.ts diff --git a/examples/vite-env.d.ts b/examples/vite-env.d.ts index 691f7a317..7b56feb0d 100644 --- a/examples/vite-env.d.ts +++ b/examples/vite-env.d.ts @@ -5,3 +5,5 @@ interface ImportMeta { SEAM_USER_IDENTIFIER_KEY: string } } + +declare module '@seamapi/react/elements.js' {} diff --git a/examples/vite.config.ts b/examples/vite.config.ts index 0a371200d..72bbf5a15 100644 --- a/examples/vite.config.ts +++ b/examples/vite.config.ts @@ -26,6 +26,9 @@ export default defineConfig(async ({ command, mode }) => { ], resolve: { alias: { + '@seamapi/react/elements.js': fileURLToPath( + new URL('../src/elements.js', import.meta.url) + ), '@seamapi/react/index.css': fileURLToPath( new URL('../src/index.scss', import.meta.url) ), diff --git a/examples/web-components/index.html b/examples/web-components/index.html new file mode 100644 index 000000000..7323fdd36 --- /dev/null +++ b/examples/web-components/index.html @@ -0,0 +1,18 @@ + + + + + + Basic example - Seam React Components + + + +
+ +
+ + + diff --git a/examples/web-components/src/env.d.ts b/examples/web-components/src/env.d.ts new file mode 100644 index 000000000..6d8d45880 --- /dev/null +++ b/examples/web-components/src/env.d.ts @@ -0,0 +1,11 @@ +import 'vite/client' + +interface ImportMetaEnv { + readonly SEAM_ENDPOINT: string + readonly SEAM_PUBLISHABLE_KEY: string + readonly SEAM_USER_IDENTIFIER_KEY: string +} + +interface ImportMeta { + readonly env: ImportMetaEnv +} diff --git a/examples/web-components/src/main.ts b/examples/web-components/src/main.ts new file mode 100644 index 000000000..90166b6fc --- /dev/null +++ b/examples/web-components/src/main.ts @@ -0,0 +1,2 @@ +import '@seamapi/react/index.css' +import '@seamapi/react/elements.js' diff --git a/package-lock.json b/package-lock.json index 0e2c67284..6a7628d35 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "1.6.0", "license": "MIT", "dependencies": { + "@r2wc/react-to-web-component": "^2.0.2", "@tanstack/react-query": "^4.28.0", "classnames": "^2.3.2", "luxon": "^3.3.0", @@ -4323,6 +4324,23 @@ "url": "https://opencollective.com/popperjs" } }, + "node_modules/@r2wc/core": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@r2wc/core/-/core-1.0.0.tgz", + "integrity": "sha512-P/P1YXpCXESnJKxFGXDZFrldov3T5wqeJSgQNWMgTkuV4CA9C+gVwv2guadkB7h5PuFyJxaLLbK6vl2VAUltpA==" + }, + "node_modules/@r2wc/react-to-web-component": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@r2wc/react-to-web-component/-/react-to-web-component-2.0.2.tgz", + "integrity": "sha512-HxgWXh6aipgvZ7l31m+AN0mM8KI5jkiCEBnSMBl/UKibVrhFgtsumL8fmLd5/q+OHBJKK0w4e5sAmzY1yu8dpA==", + "dependencies": { + "@r2wc/core": "^1.0.0" + }, + "peerDependencies": { + "react": "^18.0.0", + "react-dom": "^18.0.0" + } + }, "node_modules/@seamapi/fake-seam-connect": { "version": "0.7.2", "resolved": "https://registry.npmjs.org/@seamapi/fake-seam-connect/-/fake-seam-connect-0.7.2.tgz", @@ -19651,7 +19669,6 @@ "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", - "devOptional": true, "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.0" @@ -20380,7 +20397,6 @@ "version": "0.23.0", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", - "devOptional": true, "dependencies": { "loose-envify": "^1.1.0" } diff --git a/package.json b/package.json index a6c2bc54a..b56c2b508 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,9 @@ "./hooks.js": { "import": "./hooks.js" }, + "./elements.js": { + "import": "./dist/elements.js" + }, "./index.css": { "import": "./index.css" } @@ -42,6 +45,7 @@ "index.min.css.map", "lib", "src", + "dist", "!test", "!**/*.test.ts", "!**/*.test.tsx", @@ -52,11 +56,13 @@ "scripts": { "start": "concurrently --raw --kill-others npm:examples:storybook npm:storybook", "dev": "npm run start", - "build": "npm run build:js", + "build": "npm run build:entrypoints", "prebuild": "del 'index.*' 'hooks.*' lib", - "postbuild": "concurrently 'node ./index.js' 'node ./hooks.js'", + "postbuild": "concurrently --raw --group 'node ./index.js' 'node ./hooks.js'", + "build:entrypoints": "npm run build:js", + "prebuild:entrypoints": "npm run build:css", + "postbuild:entrypoints": "vite build", "build:js": "tsc --project tsconfig.build.json", - "prebuild:js": "npm run build:css", "postbuild:js": "tsc-alias --project tsconfig.build.json", "build:css": "sass --load-path=node_modules src/index.scss:index.css", "postbuild:css": "sass --style=compressed --load-path=node_modules src/index.scss:index.min.css", @@ -98,6 +104,7 @@ "react-dom": ">=18.0.0" }, "dependencies": { + "@r2wc/react-to-web-component": "^2.0.2", "@tanstack/react-query": "^4.28.0", "classnames": "^2.3.2", "luxon": "^3.3.0", diff --git a/src/elements.ts b/src/elements.ts new file mode 100644 index 000000000..4121bbfe8 --- /dev/null +++ b/src/elements.ts @@ -0,0 +1,10 @@ +import r2wc from '@r2wc/react-to-web-component' + +import { SupportedDeviceTable } from './index.js' + +const SupportedDeviceTableElement = r2wc(SupportedDeviceTable) + +customElements.define( + 'seam-supported-device-table', + SupportedDeviceTableElement +) diff --git a/tsconfig.json b/tsconfig.json index 8608913b1..18c823da5 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -35,7 +35,8 @@ "src/**/*", "test/**/*", "examples/**/*", + "api/**/*", ".storybook/**/*", - "api/**/*" + "vite.config.ts" ] } diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 000000000..3c739cc17 --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,20 @@ +import { fileURLToPath } from 'node:url' + +import { defineConfig } from 'vite' +import tsconfigPaths from 'vite-tsconfig-paths' + +export default defineConfig({ + plugins: [tsconfigPaths()], + define: { + 'process.env.NODE_ENV': "'production'", + }, + build: { + outDir: fileURLToPath(new URL('./dist', import.meta.url)), + sourcemap: true, + lib: { + entry: fileURLToPath(new URL('./src/elements.ts', import.meta.url)), + fileName: 'elements', + formats: ['es'], + }, + }, +}) From e5d37699b29cd46443c366bbe23b4b5c7ddf6727 Mon Sep 17 00:00:00 2001 From: Evan Sosenko Date: Tue, 30 May 2023 22:48:55 -0700 Subject: [PATCH 02/23] Abstract element creation --- src/elements.ts | 29 ++++++++++++++----- src/lib/element.ts | 21 ++++++++++++++ .../SupportedDeviceTable.element.ts | 9 ++++++ src/lib/seam/components/elements.ts | 1 + 4 files changed, 53 insertions(+), 7 deletions(-) create mode 100644 src/lib/element.ts create mode 100644 src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTable.element.ts create mode 100644 src/lib/seam/components/elements.ts diff --git a/src/elements.ts b/src/elements.ts index 4121bbfe8..be78098c2 100644 --- a/src/elements.ts +++ b/src/elements.ts @@ -1,10 +1,25 @@ -import r2wc from '@r2wc/react-to-web-component' +import { defineCustomElement, type ElementDefinition } from 'lib/element.js' +import * as components from 'lib/seam/components/elements.js' -import { SupportedDeviceTable } from './index.js' +const elementDefinitions = components as unknown as Record< + string, + Partial +> -const SupportedDeviceTableElement = r2wc(SupportedDeviceTable) +for (const key of Object.keys(elementDefinitions)) { + const elementDefinition = elementDefinitions[key] + if (elementDefinition == null) { + throw new Error(`Missing element element definition for ${key}`) + } + const { name, Component, props } = elementDefinition -customElements.define( - 'seam-supported-device-table', - SupportedDeviceTableElement -) + if (name == null) { + throw new Error(`Missing element name for ${key}`) + } + + if (Component == null) { + throw new Error(`Missing element Component for ${key}`) + } + + defineCustomElement({ name, Component, props }) +} diff --git a/src/lib/element.ts b/src/lib/element.ts new file mode 100644 index 000000000..193d39b47 --- /dev/null +++ b/src/lib/element.ts @@ -0,0 +1,21 @@ +import r2wc from '@r2wc/react-to-web-component' + +export interface ElementDefinition { + name: string + Component: Parameters[0] + props?: ElementProps +} + +export type ElementProps = Record< + string, + 'string' | 'number' | 'boolean' | 'function' | 'json' +> + +export const defineCustomElement = ({ + name, + Component, + props = {}, +}: ElementDefinition): void => { + const element = r2wc(Component, { props }) + globalThis?.customElements?.define(name, element) +} diff --git a/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTable.element.ts b/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTable.element.ts new file mode 100644 index 000000000..4409093ce --- /dev/null +++ b/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTable.element.ts @@ -0,0 +1,9 @@ +import type { ElementProps } from 'lib/element.js' + +export const name = 'seam-supported-device-table' + +export const props: ElementProps = { + cannotFilter: 'boolean', +} + +export { SupportedDeviceTable as Component } from './SupportedDeviceTable.js' diff --git a/src/lib/seam/components/elements.ts b/src/lib/seam/components/elements.ts new file mode 100644 index 000000000..6b920fede --- /dev/null +++ b/src/lib/seam/components/elements.ts @@ -0,0 +1 @@ +export * as SupportedDeviceTable from './SupportedDeviceTable/SupportedDeviceTable.element.js' From 8c289238ed402f116ad2e9986323afdb9e0b3f61 Mon Sep 17 00:00:00 2001 From: Evan Sosenko Date: Tue, 30 May 2023 22:50:10 -0700 Subject: [PATCH 03/23] Make react-to-web-component dev dep --- package-lock.json | 8 ++++++-- package.json | 2 +- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6a7628d35..91b7170d5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,6 @@ "version": "1.6.0", "license": "MIT", "dependencies": { - "@r2wc/react-to-web-component": "^2.0.2", "@tanstack/react-query": "^4.28.0", "classnames": "^2.3.2", "luxon": "^3.3.0", @@ -23,6 +22,7 @@ "@emotion/styled": "^11.10.6", "@mui/icons-material": "^5.11.16", "@mui/material": "^5.12.2", + "@r2wc/react-to-web-component": "^2.0.2", "@seamapi/fake-seam-connect": "^0.7.2", "@storybook/addon-essentials": "^7.0.2", "@storybook/addon-interactions": "^7.0.2", @@ -4327,12 +4327,14 @@ "node_modules/@r2wc/core": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@r2wc/core/-/core-1.0.0.tgz", - "integrity": "sha512-P/P1YXpCXESnJKxFGXDZFrldov3T5wqeJSgQNWMgTkuV4CA9C+gVwv2guadkB7h5PuFyJxaLLbK6vl2VAUltpA==" + "integrity": "sha512-P/P1YXpCXESnJKxFGXDZFrldov3T5wqeJSgQNWMgTkuV4CA9C+gVwv2guadkB7h5PuFyJxaLLbK6vl2VAUltpA==", + "dev": true }, "node_modules/@r2wc/react-to-web-component": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/@r2wc/react-to-web-component/-/react-to-web-component-2.0.2.tgz", "integrity": "sha512-HxgWXh6aipgvZ7l31m+AN0mM8KI5jkiCEBnSMBl/UKibVrhFgtsumL8fmLd5/q+OHBJKK0w4e5sAmzY1yu8dpA==", + "dev": true, "dependencies": { "@r2wc/core": "^1.0.0" }, @@ -19669,6 +19671,7 @@ "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", + "devOptional": true, "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.0" @@ -20397,6 +20400,7 @@ "version": "0.23.0", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", + "devOptional": true, "dependencies": { "loose-envify": "^1.1.0" } diff --git a/package.json b/package.json index b56c2b508..4d8f8c9ee 100644 --- a/package.json +++ b/package.json @@ -104,7 +104,6 @@ "react-dom": ">=18.0.0" }, "dependencies": { - "@r2wc/react-to-web-component": "^2.0.2", "@tanstack/react-query": "^4.28.0", "classnames": "^2.3.2", "luxon": "^3.3.0", @@ -119,6 +118,7 @@ "@mui/icons-material": "^5.11.16", "@mui/material": "^5.12.2", "@seamapi/fake-seam-connect": "^0.7.2", + "@r2wc/react-to-web-component": "^2.0.2", "@storybook/addon-essentials": "^7.0.2", "@storybook/addon-interactions": "^7.0.2", "@storybook/addon-links": "^7.0.2", From 536dbd0a34e3ea5bb4568e7dedc9afea304d3950 Mon Sep 17 00:00:00 2001 From: Evan Sosenko Date: Tue, 30 May 2023 23:10:35 -0700 Subject: [PATCH 04/23] Do not build element source files --- tsconfig.build.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/tsconfig.build.json b/tsconfig.build.json index e90237b25..6b434a4fa 100644 --- a/tsconfig.build.json +++ b/tsconfig.build.json @@ -11,6 +11,10 @@ "files": ["src/index.ts", "src/hooks.ts"], "include": ["src/**/*"], "exclude": [ + "src/elements.ts", + "src/lib/element.ts", + "src/lib/seam/components/elements.ts", + "**/*.element.ts", "**/*.test.ts", "**/*.test.tsx", "**/*.stories.ts", From 4dc12390ea94f765e6c517cae2c4f4ee170aaef5 Mon Sep 17 00:00:00 2001 From: Evan Sosenko Date: Tue, 30 May 2023 23:14:20 -0700 Subject: [PATCH 05/23] Add vite react plugin to vite build --- vite.config.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/vite.config.ts b/vite.config.ts index 3c739cc17..c3b88d0b5 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,10 +1,15 @@ import { fileURLToPath } from 'node:url' +import react from '@vitejs/plugin-react' import { defineConfig } from 'vite' import tsconfigPaths from 'vite-tsconfig-paths' export default defineConfig({ - plugins: [tsconfigPaths()], + plugins: [ + tsconfigPaths(), + // @ts-expect-error https://github.com/vitejs/vite-plugin-react/issues/104 + react(), + ], define: { 'process.env.NODE_ENV': "'production'", }, From d7ad14b29de273436f2c0acb56064c5e9cbfa760 Mon Sep 17 00:00:00 2001 From: Evan Sosenko Date: Thu, 1 Jun 2023 13:30:14 -0700 Subject: [PATCH 06/23] Remove font link in webcomponent example --- examples/web-components/index.html | 4 ---- 1 file changed, 4 deletions(-) diff --git a/examples/web-components/index.html b/examples/web-components/index.html index 7323fdd36..a7759121c 100644 --- a/examples/web-components/index.html +++ b/examples/web-components/index.html @@ -4,10 +4,6 @@ Basic example - Seam React Components -
From 8fc3a1be3c426c6413de150b3b8f24b411d123bc Mon Sep 17 00:00:00 2001 From: Evan Sosenko Date: Thu, 1 Jun 2023 13:32:18 -0700 Subject: [PATCH 07/23] Link to web-components example --- examples/index.html | 1 + src/stories/Introduction.mdx | 1 + 2 files changed, 2 insertions(+) diff --git a/examples/index.html b/examples/index.html index e064db158..be1baaa86 100644 --- a/examples/index.html +++ b/examples/index.html @@ -12,6 +12,7 @@

Example Apps with Seam React Components

diff --git a/src/stories/Introduction.mdx b/src/stories/Introduction.mdx index bfc50240c..6c29f1f14 100644 --- a/src/stories/Introduction.mdx +++ b/src/stories/Introduction.mdx @@ -20,3 +20,4 @@ import seamWordmarkS from './assets/seam-wordmark-s.webp' Seam React component library interactive documentation. - Basic Example App ([source](https://github.com/seamapi/react/tree/main/examples/basic/)) +- Web Components Example App ([source](https://github.com/seamapi/react/tree/main/examples/web-components/)) From 7cb4e783d98d48c96da0e876cb6fede2a00804bb Mon Sep 17 00:00:00 2001 From: Evan Sosenko Date: Thu, 1 Jun 2023 15:15:53 -0700 Subject: [PATCH 08/23] Rename element to use tsx --- src/lib/{element.ts => element.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/lib/{element.ts => element.tsx} (100%) diff --git a/src/lib/element.ts b/src/lib/element.tsx similarity index 100% rename from src/lib/element.ts rename to src/lib/element.tsx From 2857d5c9c90eb46275907efbd42a388f949c6f74 Mon Sep 17 00:00:00 2001 From: Evan Sosenko Date: Thu, 1 Jun 2023 15:11:32 -0700 Subject: [PATCH 09/23] Wrap custom element in provider --- examples/web-components/index.html | 5 +- src/lib/element.tsx | 68 +++++++++++++++++-- .../SupportedDeviceTable.element.ts | 4 +- 3 files changed, 70 insertions(+), 7 deletions(-) diff --git a/examples/web-components/index.html b/examples/web-components/index.html index a7759121c..98e5e69c6 100644 --- a/examples/web-components/index.html +++ b/examples/web-components/index.html @@ -7,7 +7,10 @@
- +
diff --git a/src/lib/element.tsx b/src/lib/element.tsx index 193d39b47..2c8841466 100644 --- a/src/lib/element.tsx +++ b/src/lib/element.tsx @@ -1,21 +1,79 @@ import r2wc from '@r2wc/react-to-web-component' +import { type QueryClient } from '@tanstack/react-query' +import { type ComponentType } from 'react' +import type { Container } from 'react-dom' + +import { + SeamProvider, + type SeamProviderPropsWithClientSessionToken, + type SeamProviderPropsWithPublishableKey, +} from 'lib/seam/SeamProvider.js' + +declare global { + // eslint-disable-next-line no-var + var seamQueryClient: QueryClient | undefined +} export interface ElementDefinition { name: string Component: Parameters[0] - props?: ElementProps + props?: ElementProps> } -export type ElementProps = Record< - string, - 'string' | 'number' | 'boolean' | 'function' | 'json' +export type ElementProps = Partial< + Record > +type ProviderProps = SeamProviderPropsWithPublishableKey & + SeamProviderPropsWithClientSessionToken + +const providerProps: ElementProps = { + publishableKey: 'string', + userIdentifierKey: 'string', + clientSessionToken: 'string', + disableCssInjection: 'boolean', + disableFontInjection: 'boolean', + unminifiyCss: 'boolean', +} + export const defineCustomElement = ({ name, Component, props = {}, }: ElementDefinition): void => { - const element = r2wc(Component, { props }) + const element = r2wc(withProvider(Component), { + props: { + ...props, + ...providerProps, + }, + }) globalThis?.customElements?.define(name, element) } + +function withProvider

( + Component: ComponentType

+) { + return ({ + publishableKey, + userIdentifierKey, + clientSessionToken, + disableCssInjection, + disableFontInjection, + unminifiyCss, + container: _container, + ...props + }: ProviderProps & { container: Container } & P): JSX.Element | null => { + return ( + + + + ) + } +} diff --git a/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTable.element.ts b/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTable.element.ts index 4409093ce..9347a952e 100644 --- a/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTable.element.ts +++ b/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTable.element.ts @@ -1,8 +1,10 @@ import type { ElementProps } from 'lib/element.js' +import type { SupportedDeviceTableProps } from './SupportedDeviceTable.js' + export const name = 'seam-supported-device-table' -export const props: ElementProps = { +export const props: ElementProps = { cannotFilter: 'boolean', } From 16d50c8ade3babc1c868ed775060903c15e24eb4 Mon Sep 17 00:00:00 2001 From: Evan Sosenko Date: Thu, 1 Jun 2023 16:17:59 -0700 Subject: [PATCH 10/23] Update element.tsx path in tsconfig.build.json --- tsconfig.build.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tsconfig.build.json b/tsconfig.build.json index 6b434a4fa..c99151e3f 100644 --- a/tsconfig.build.json +++ b/tsconfig.build.json @@ -12,7 +12,7 @@ "include": ["src/**/*"], "exclude": [ "src/elements.ts", - "src/lib/element.ts", + "src/lib/element.tsx", "src/lib/seam/components/elements.ts", "**/*.element.ts", "**/*.test.ts", From 0e1b9e58fe983f199590f4dbddfc5e79f33a34a0 Mon Sep 17 00:00:00 2001 From: Evan Sosenko Date: Thu, 1 Jun 2023 16:28:04 -0700 Subject: [PATCH 11/23] Add DeviceTable as element --- examples/web-components/index.html | 4 ++++ .../seam/components/DeviceTable/DeviceTable.element.ts | 9 +++++++++ src/lib/seam/components/elements.ts | 1 + 3 files changed, 14 insertions(+) create mode 100644 src/lib/seam/components/DeviceTable/DeviceTable.element.ts diff --git a/examples/web-components/index.html b/examples/web-components/index.html index 98e5e69c6..bb2ce285f 100644 --- a/examples/web-components/index.html +++ b/examples/web-components/index.html @@ -7,6 +7,10 @@

+ = {} + +export { DeviceTable as Component } from './DeviceTable.js' diff --git a/src/lib/seam/components/elements.ts b/src/lib/seam/components/elements.ts index 6b920fede..72b308d8d 100644 --- a/src/lib/seam/components/elements.ts +++ b/src/lib/seam/components/elements.ts @@ -1 +1,2 @@ +export * as DeviceTable from './DeviceTable/DeviceTable.element.js' export * as SupportedDeviceTable from './SupportedDeviceTable/SupportedDeviceTable.element.js' From 60c6f9dedbce042be1dd97625039e2b32012684b Mon Sep 17 00:00:00 2001 From: Evan Sosenko Date: Thu, 1 Jun 2023 19:29:58 -0700 Subject: [PATCH 12/23] Update title for web component example --- examples/web-components/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/web-components/index.html b/examples/web-components/index.html index bb2ce285f..edbc052f3 100644 --- a/examples/web-components/index.html +++ b/examples/web-components/index.html @@ -3,7 +3,7 @@ - Basic example - Seam React Components + Web components example - Seam React Components
From 82098ae212b7300dc7d6141de9bb72a675adc58b Mon Sep 17 00:00:00 2001 From: Evan Sosenko Date: Thu, 1 Jun 2023 19:30:20 -0700 Subject: [PATCH 13/23] Remove unused global declare --- src/lib/element.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/lib/element.tsx b/src/lib/element.tsx index 2c8841466..bb11ea446 100644 --- a/src/lib/element.tsx +++ b/src/lib/element.tsx @@ -9,11 +9,6 @@ import { type SeamProviderPropsWithPublishableKey, } from 'lib/seam/SeamProvider.js' -declare global { - // eslint-disable-next-line no-var - var seamQueryClient: QueryClient | undefined -} - export interface ElementDefinition { name: string Component: Parameters[0] From 4d549b12fa04ae2a777e8d348f7b730b30827464 Mon Sep 17 00:00:00 2001 From: Evan Sosenko Date: Thu, 1 Jun 2023 19:30:42 -0700 Subject: [PATCH 14/23] Move type imports outside braces --- src/lib/element.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/element.tsx b/src/lib/element.tsx index bb11ea446..a5879e12a 100644 --- a/src/lib/element.tsx +++ b/src/lib/element.tsx @@ -1,6 +1,6 @@ import r2wc from '@r2wc/react-to-web-component' -import { type QueryClient } from '@tanstack/react-query' -import { type ComponentType } from 'react' +import type { QueryClient } from '@tanstack/react-query' +import type { ComponentType } from 'react' import type { Container } from 'react-dom' import { From 3a2590929509abc5607a1cc999aacd96e3ca4608 Mon Sep 17 00:00:00 2001 From: Seam Bot Date: Fri, 2 Jun 2023 02:31:45 +0000 Subject: [PATCH 15/23] Run format --- src/lib/element.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/lib/element.tsx b/src/lib/element.tsx index a5879e12a..a2c1ab7c6 100644 --- a/src/lib/element.tsx +++ b/src/lib/element.tsx @@ -1,5 +1,4 @@ import r2wc from '@r2wc/react-to-web-component' -import type { QueryClient } from '@tanstack/react-query' import type { ComponentType } from 'react' import type { Container } from 'react-dom' From b3c703af4db58043cab10bd0b97a008da121d15b Mon Sep 17 00:00:00 2001 From: Evan Sosenko Date: Thu, 1 Jun 2023 19:31:40 -0700 Subject: [PATCH 16/23] Add missing return type --- .../SupportedDeviceTable/SupportedDeviceContent.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceContent.tsx b/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceContent.tsx index 52ac8a157..456ffbbf5 100644 --- a/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceContent.tsx +++ b/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceContent.tsx @@ -81,7 +81,10 @@ export function SupportedDeviceContent({ function EmptyResult({ filterValue, resetFilterValue, -}: Pick) { +}: Pick< + SupportedDeviceContentProps, + 'filterValue' | 'resetFilterValue' +>): JSX.Element { const noMatchingRows = ( <>

{t.noMatch}

From f3fc7eafd0b95a6c9922b78a0cbe6758054faf3f Mon Sep 17 00:00:00 2001 From: Evan Sosenko Date: Thu, 1 Jun 2023 19:38:23 -0700 Subject: [PATCH 17/23] Set disable-css-injection --- examples/web-components/index.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/examples/web-components/index.html b/examples/web-components/index.html index edbc052f3..a4d7c4cde 100644 --- a/examples/web-components/index.html +++ b/examples/web-components/index.html @@ -10,10 +10,12 @@
From 5d84c8dd8d66793d735c7f33fdea7adf59035284 Mon Sep 17 00:00:00 2001 From: Evan Sosenko Date: Thu, 1 Jun 2023 19:42:38 -0700 Subject: [PATCH 18/23] Add global injection overrides for elements --- src/lib/element.tsx | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/src/lib/element.tsx b/src/lib/element.tsx index a2c1ab7c6..842db5c0c 100644 --- a/src/lib/element.tsx +++ b/src/lib/element.tsx @@ -8,6 +8,15 @@ import { type SeamProviderPropsWithPublishableKey, } from 'lib/seam/SeamProvider.js' +declare global { + // eslint-disable-next-line no-var + var disableSeamCssInjection: boolean | undefined + // eslint-disable-next-line no-var + var disableSeamFontInjection: boolean | undefined + // eslint-disable-next-line no-var + var unminifiySeamCss: boolean | undefined +} + export interface ElementDefinition { name: string Component: Parameters[0] @@ -62,9 +71,13 @@ function withProvider

( publishableKey={publishableKey} userIdentifierKey={userIdentifierKey} clientSessionToken={clientSessionToken} - disableCssInjection={disableCssInjection} - disableFontInjection={disableFontInjection} - unminifiyCss={unminifiyCss} + disableCssInjection={ + disableCssInjection ?? globalThis.disableSeamCssInjection + } + disableFontInjection={ + disableFontInjection ?? globalThis.disableSeamFontInjection + } + unminifiyCss={unminifiyCss ?? globalThis?.unminifiySeamCss} > From 911be5c73cb343b769abc914acecf2f13c0c1c9e Mon Sep 17 00:00:00 2001 From: Evan Sosenko Date: Thu, 1 Jun 2023 20:22:03 -0700 Subject: [PATCH 19/23] Handle version injection for elements bundle --- package.json | 2 +- src/lib/version.ts | 4 +++- vite.config.ts | 47 +++++++++++++++++++++++++++++----------------- 3 files changed, 34 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index 4d8f8c9ee..68837748b 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,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", + "prepack": "echo \"const seamapiReactVersion = '$(jq -r .version < package.json)'\n\nexport default seamapiReactVersion\" > src/lib/version.ts && cp src/lib/version.ts 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/version.ts b/src/lib/version.ts index 7b8595488..61782bde3 100644 --- a/src/lib/version.ts +++ b/src/lib/version.ts @@ -1 +1,3 @@ -export default null +const seamapiReactVersion = null + +export default seamapiReactVersion diff --git a/vite.config.ts b/vite.config.ts index c3b88d0b5..30d015ce1 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,25 +1,38 @@ +import { readFile } from 'node:fs/promises' import { fileURLToPath } from 'node:url' import react from '@vitejs/plugin-react' import { defineConfig } from 'vite' import tsconfigPaths from 'vite-tsconfig-paths' -export default defineConfig({ - plugins: [ - tsconfigPaths(), - // @ts-expect-error https://github.com/vitejs/vite-plugin-react/issues/104 - react(), - ], - define: { - 'process.env.NODE_ENV': "'production'", - }, - build: { - outDir: fileURLToPath(new URL('./dist', import.meta.url)), - sourcemap: true, - lib: { - entry: fileURLToPath(new URL('./src/elements.ts', import.meta.url)), - fileName: 'elements', - formats: ['es'], +export default defineConfig(async () => { + const pkg = await readPackageJson() + const version: string = pkg.version + return { + plugins: [ + tsconfigPaths(), + // @ts-expect-error https://github.com/vitejs/vite-plugin-react/issues/104 + react(), + ], + define: { + 'process.env.NODE_ENV': "'production'", + 'const seamapiReactVersion = null': `const seamapiReactVersion = '${version}'`, }, - }, + build: { + outDir: fileURLToPath(new URL('./dist', import.meta.url)), + sourcemap: true, + lib: { + entry: fileURLToPath(new URL('./src/elements.ts', import.meta.url)), + fileName: 'elements', + formats: ['es'], + }, + }, + } }) + +const readPackageJson = async () => { + const pkgBuff = await readFile( + fileURLToPath(new URL('package.json', import.meta.url)) + ) + return JSON.parse(pkgBuff.toString()) +} From 35655ce41d8a5c6f13ebfbc7e4720f138578a445 Mon Sep 17 00:00:00 2001 From: Evan Sosenko Date: Thu, 1 Jun 2023 20:23:34 -0700 Subject: [PATCH 20/23] Add onBack prop --- src/lib/seam/components/DeviceTable/DeviceTable.element.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/lib/seam/components/DeviceTable/DeviceTable.element.ts b/src/lib/seam/components/DeviceTable/DeviceTable.element.ts index 4532f755e..88e01a731 100644 --- a/src/lib/seam/components/DeviceTable/DeviceTable.element.ts +++ b/src/lib/seam/components/DeviceTable/DeviceTable.element.ts @@ -4,6 +4,8 @@ import type { DeviceTableProps } from './DeviceTable.js' export const name = 'seam-device-table' -export const props: ElementProps = {} +export const props: ElementProps = { + onBack: 'function', +} export { DeviceTable as Component } from './DeviceTable.js' From 83902857aee6fff08d289c861daf5fe51b3585a5 Mon Sep 17 00:00:00 2001 From: Evan Sosenko Date: Thu, 1 Jun 2023 20:29:52 -0700 Subject: [PATCH 21/23] Add other components custom elements --- .../AccessCodeDetails/AccessCodeDetails.element.ts | 12 ++++++++++++ .../AccessCodeTable/AccessCodeTable.element.ts | 12 ++++++++++++ .../DeviceDetails/DeviceDetails.element.ts | 12 ++++++++++++ src/lib/seam/components/elements.ts | 3 +++ 4 files changed, 39 insertions(+) create mode 100644 src/lib/seam/components/AccessCodeDetails/AccessCodeDetails.element.ts create mode 100644 src/lib/seam/components/AccessCodeTable/AccessCodeTable.element.ts create mode 100644 src/lib/seam/components/DeviceDetails/DeviceDetails.element.ts diff --git a/src/lib/seam/components/AccessCodeDetails/AccessCodeDetails.element.ts b/src/lib/seam/components/AccessCodeDetails/AccessCodeDetails.element.ts new file mode 100644 index 000000000..77e8a1d7d --- /dev/null +++ b/src/lib/seam/components/AccessCodeDetails/AccessCodeDetails.element.ts @@ -0,0 +1,12 @@ +import type { ElementProps } from 'lib/element.js' + +import type { AccessCodeDetailsProps } from './AccessCodeDetails.js' + +export const name = 'seam-access-code-details' + +export const props: ElementProps = { + accessCodeId: 'string', + onBack: 'function', +} + +export { AccessCodeDetails as Component } from './AccessCodeDetails.js' diff --git a/src/lib/seam/components/AccessCodeTable/AccessCodeTable.element.ts b/src/lib/seam/components/AccessCodeTable/AccessCodeTable.element.ts new file mode 100644 index 000000000..190c371be --- /dev/null +++ b/src/lib/seam/components/AccessCodeTable/AccessCodeTable.element.ts @@ -0,0 +1,12 @@ +import type { ElementProps } from 'lib/element.js' + +import type { AccessCodeTableProps } from './AccessCodeTable.js' + +export const name = 'seam-access-code-table' + +export const props: ElementProps = { + deviceId: 'string', + onBack: 'function', +} + +export { AccessCodeTable as Component } from './AccessCodeTable.js' diff --git a/src/lib/seam/components/DeviceDetails/DeviceDetails.element.ts b/src/lib/seam/components/DeviceDetails/DeviceDetails.element.ts new file mode 100644 index 000000000..16a75c974 --- /dev/null +++ b/src/lib/seam/components/DeviceDetails/DeviceDetails.element.ts @@ -0,0 +1,12 @@ +import type { ElementProps } from 'lib/element.js' + +import type { DeviceDetailsProps } from './DeviceDetails.js' + +export const name = 'seam-device-details' + +export const props: ElementProps = { + deviceId: 'string', + onBack: 'function', +} + +export { DeviceDetails as Component } from './DeviceDetails.js' diff --git a/src/lib/seam/components/elements.ts b/src/lib/seam/components/elements.ts index 72b308d8d..5f7542a2c 100644 --- a/src/lib/seam/components/elements.ts +++ b/src/lib/seam/components/elements.ts @@ -1,2 +1,5 @@ +export * as AccessCodeDetails from './AccessCodeDetails/AccessCodeDetails.element.js' +export * as AccessCodeTable from './AccessCodeTable/AccessCodeTable.element.js' +export * as DeviceDetails from './DeviceDetails/DeviceDetails.element.js' export * as DeviceTable from './DeviceTable/DeviceTable.element.js' export * as SupportedDeviceTable from './SupportedDeviceTable/SupportedDeviceTable.element.js' From 31d93caad795508d7cc244cdfe2907ab9130dc09 Mon Sep 17 00:00:00 2001 From: Evan Sosenko Date: Fri, 2 Jun 2023 06:32:25 +0000 Subject: [PATCH 22/23] Fix prepack script to handle other files --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 68837748b..9c063840f 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,7 @@ "lint": "eslint --ignore-path .gitignore --ext .js,.cjs,.mjs,.ts,.tsx .", "prelint": "prettier --check --ignore-path .gitignore .", "postlint": "stylelint '**/*.scss'", - "prepack": "echo \"const seamapiReactVersion = '$(jq -r .version < package.json)'\n\nexport default seamapiReactVersion\" > src/lib/version.ts && cp src/lib/version.ts lib/version.js", + "prepack": "echo \"const seamapiReactVersion = '$(jq -r .version < package.json)'\n\nexport default seamapiReactVersion\" > src/lib/version.ts && echo \"declare const seamapiReactVersion = \\\"$(jq -r .version < package.json)\\\";\nexport default seamapiReactVersion;\" > lib/version.d.ts && echo -n \"const seamapiReactVersion = '$(jq -r .version < package.json)';\nexport default seamapiReactVersion;\n//# sourceMappingURL=version.js.map\" > lib/version.js", "postversion": "git push --follow-tags", "storybook": "storybook dev --port 6006", "storybook:docs": "storybook dev --docs --port 6007", From 5f159bf99c09d6cc7f1f22d09088170c5f0ff7e0 Mon Sep 17 00:00:00 2001 From: Evan Sosenko Date: Thu, 1 Jun 2023 23:35:51 -0700 Subject: [PATCH 23/23] Update elements.ts --- src/elements.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/elements.ts b/src/elements.ts index be78098c2..cd05af4c7 100644 --- a/src/elements.ts +++ b/src/elements.ts @@ -8,9 +8,11 @@ const elementDefinitions = components as unknown as Record< for (const key of Object.keys(elementDefinitions)) { const elementDefinition = elementDefinitions[key] + if (elementDefinition == null) { throw new Error(`Missing element element definition for ${key}`) } + const { name, Component, props } = elementDefinition if (name == null) {