wrapped the widget into WebComponent with Shadow DOM

prosopo · Nov 25, 2024 · 64d5add · 64d5add
1 parent 71284b2
commit 64d5add
Showing 1 changed file with 80 additions and 43 deletions.
diff --git a/packages/procaptcha-bundle/src/util/renderLogic.tsx b/packages/procaptcha-bundle/src/util/renderLogic.tsx
@@ -11,56 +11,93 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { ProcaptchaFrictionless } from "@prosopo/procaptcha-frictionless";
-import { ProcaptchaPow } from "@prosopo/procaptcha-pow";
-import { Procaptcha } from "@prosopo/procaptcha-react";
+import {ProcaptchaFrictionless} from "@prosopo/procaptcha-frictionless";
+import {ProcaptchaPow} from "@prosopo/procaptcha-pow";
+import {Procaptcha} from "@prosopo/procaptcha-react";
 import type {
-	ProcaptchaClientConfigOutput,
-	ProcaptchaRenderOptions,
+    ProcaptchaClientConfigOutput,
+    ProcaptchaRenderOptions,
 } from "@prosopo/types";
-import { type Root, createRoot } from "react-dom/client";
-import { getDefaultCallbacks, setUserCallbacks } from "./defaultCallbacks.js";
-import { setLanguage } from "./language.js";
-import { setTheme } from "./theme.js";
-import { setValidChallengeLength } from "./timeout.js";
+import {type Root, createRoot} from "react-dom/client";
+import {getDefaultCallbacks, setUserCallbacks} from "./defaultCallbacks.js";
+import {setLanguage} from "./language.js";
+import {setTheme} from "./theme.js";
+import {setValidChallengeLength} from "./timeout.js";
+import {CacheProvider} from '@emotion/react';
+import createCache from '@emotion/cache';
 
 const identifierPrefix = "procaptcha-";
 
+function makeShadowRoot(element: Element, renderOptions?: ProcaptchaRenderOptions): ShadowRoot {
+    // todo introduce customCSS in renderOptions.
+    let customCss = '';
+
+    let wrapperElement = document.createElement('prosopo-procaptcha');
+
+    let wrapperShadow = wrapperElement.attachShadow({mode: 'open'});
+    wrapperShadow.innerHTML += '<style>:host{all:initial!important;}:host *{font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";}</style>';
+    wrapperShadow.innerHTML += '' !== customCss ?
+        '<style>' + customCss + '</style>' :
+        '';
+
+    element.appendChild(wrapperElement);
+
+    return wrapperShadow;
+}
+
 export const renderLogic = (
-	elements: Element[],
-	config: ProcaptchaClientConfigOutput,
-	renderOptions?: ProcaptchaRenderOptions,
+    elements: Element[],
+    config: ProcaptchaClientConfigOutput,
+    renderOptions?: ProcaptchaRenderOptions,
 ) => {
-	const roots: Root[] = [];
-	for (const element of elements) {
-		const callbacks = getDefaultCallbacks(element);
+    const roots: Root[] = [];
+
+    for (const element of elements) {
+        const callbacks = getDefaultCallbacks(element);
+        let shadowRoot = makeShadowRoot(element, renderOptions);
+
+        setUserCallbacks(renderOptions, callbacks, element);
+        setTheme(renderOptions, element, config);
+        setValidChallengeLength(renderOptions, element, config);
+        setLanguage(renderOptions, element, config);
 
-		setUserCallbacks(renderOptions, callbacks, element);
-		setTheme(renderOptions, element, config);
-		setValidChallengeLength(renderOptions, element, config);
-		setLanguage(renderOptions, element, config);
+        const emotionCache = createCache({
+            key: 'prosopo-procaptcha-' + roots.length,
+            prepend: true,
+            container: shadowRoot,
+        });
 
-		let root: Root | null = null;
-		switch (renderOptions?.captchaType) {
-			case "pow":
-				console.log("rendering pow");
-				root = createRoot(element, { identifierPrefix });
-				root.render(<ProcaptchaPow config={config} callbacks={callbacks} />);
-				break;
-			case "image":
-				console.log("rendering image");
-				root = createRoot(element, { identifierPrefix });
-				root.render(<Procaptcha config={config} callbacks={callbacks} />);
-				break;
-			default:
-				console.log("rendering frictionless");
-				root = createRoot(element, { identifierPrefix });
-				root.render(
-					<ProcaptchaFrictionless config={config} callbacks={callbacks} />,
-				);
-				break;
-		}
-		roots.push(root);
-	}
-	return roots;
+        let root: Root | null = null;
+        switch (renderOptions?.captchaType) {
+            case "pow":
+                console.log("rendering pow");
+                root = createRoot(shadowRoot, {identifierPrefix});
+                root.render(
+                    <CacheProvider value={emotionCache}>
+                        <ProcaptchaPow config={config} callbacks={callbacks}/>
+                    </CacheProvider>
+                );
+                break;
+            case "image":
+                console.log("rendering image");
+                root = createRoot(shadowRoot, {identifierPrefix});
+                root.render(
+                    <CacheProvider value={emotionCache}>
+                        <Procaptcha config={config} callbacks={callbacks}/>
+                    </CacheProvider>
+                );
+                break;
+            default:
+                console.log("rendering frictionless");
+                root = createRoot(shadowRoot, {identifierPrefix});
+                root.render(
+                    <CacheProvider value={emotionCache}>
+                        <ProcaptchaFrictionless config={config} callbacks={callbacks}/>
+                    </CacheProvider>
+                );
+                break;
+        }
+        roots.push(root);
+    }
+    return roots;
 };