Last active
October 3, 2025 08:17
-
-
Save PavelPolyakov/c307fbe4e78826778948de509ef793ab to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from "react"; | |
| import { createRoot } from "react-dom/client"; | |
| import App from "./App"; // your main React app | |
| import '@aws-amplify/ui-react/styles.css'; | |
| import { Amplify } from 'aws-amplify'; | |
| // if TS file exists, prefer it; fall back to JSON | |
| import outputs from '../../amplify_outputs.face-liveness-ui.json'; | |
| Amplify.configure(outputs); | |
| class MyReactAppElement extends HTMLElement { | |
| constructor() { | |
| super(); | |
| this._props = {}; | |
| } | |
| connectedCallback() { | |
| if (this.root) return; | |
| const mount = document.createElement("div"); | |
| this.appendChild(mount); | |
| this.root = createRoot(mount); | |
| // one-time read of the attribute | |
| this._props.sessionId = this.getAttribute("session-id") || ""; | |
| this._render(); | |
| } | |
| _render() { | |
| if (!this.root) return; | |
| this.root.render(<App {...this._props} host={this} />); | |
| } | |
| disconnectedCallback() { | |
| this.root?.unmount(); | |
| } | |
| } | |
| // Register custom element | |
| customElements.define("face-liveness-ui", MyReactAppElement); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { defineConfig } from 'vite' | |
| import react from '@vitejs/plugin-react' | |
| import { resolve } from 'path'; | |
| import fs from 'fs'; | |
| // https://vite.dev/config/ | |
| export default defineConfig({ | |
| plugins: [react(), | |
| { | |
| name: "generate-test-html", | |
| closeBundle() { | |
| const html = `<!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>face-liveness-ui test</title> | |
| <link rel="stylesheet" href="./ui.css" /> | |
| </head> | |
| <body> | |
| <h1>Testing <code><face-liveness-ui></code></h1> | |
| <!-- Your React web component --> | |
| <face-liveness-ui id="face-liveness-ui" session-id="%SESSION_ID%"></face-liveness-ui> | |
| <!-- Load the bundled component --> | |
| <script type="module" src="./face-liveness-ui.js"></script> | |
| <script> | |
| const el = document.getElementById("face-liveness-ui"); | |
| el.addEventListener("face-liveness-ui:complete", () => { | |
| console.log("Got COMPLETE event from face-liveness-ui"); | |
| }); | |
| el.addEventListener("face-liveness-ui:error", () => { | |
| console.log("Got ERROR event from face-liveness-ui"); | |
| }); | |
| </script> | |
| </body> | |
| </html>`; | |
| const outDir = resolve(__dirname, "dist/"); | |
| fs.mkdirSync(outDir, { recursive: true }); | |
| fs.writeFileSync(resolve(outDir, "index.html"), html); | |
| // Prepend `/* eslint-disable */` to the generated `face-liveness-ui.js` file | |
| const componentPath = resolve(outDir, "face-liveness-ui.js"); | |
| const componentContent = fs.readFileSync(componentPath, "utf-8"); | |
| fs.writeFileSync(componentPath, `/* eslint-disable */\n${componentContent}`); | |
| }, | |
| }, | |
| ], | |
| define: { | |
| // strip NODE_ENV checks and provide a minimal env object | |
| "process.env.NODE_ENV": JSON.stringify("production"), | |
| "process.env": "{}", | |
| }, | |
| build: { | |
| outDir: 'dist', | |
| emptyOutDir: true, | |
| lib: { | |
| entry: "src/FaceLivenessUI.tsx", | |
| name: "FaceLivenessUI", | |
| formats: ["es"], | |
| fileName: () => "face-liveness-ui.js", | |
| }, | |
| rollupOptions: { | |
| // 🚫 do NOT externalize react or react-dom | |
| external: [], | |
| }, | |
| }, | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment