init

packages/sdks/react-sdk/examples/app/Login.tsx

@@ -30,6 +30,9 @@ const Login = () => {
 
   const errorTransformer = useCallback(
     (error: { text: string; type: string }) => {
+      console.log('@@@ errorTransformer', {
+        text, type
+      });
       const translationMap = {
         SAMLStartFailed: 'Failed to start SAML flow',
       };
@@ -57,7 +60,7 @@ const Login = () => {
           onReady={onReady}
           // form={{ email: '[email protected]' }} // found in context key: form.email
           client={{ version: '1.0.2' }} // found in context key: client.version
-          debug={process.env.DESCOPE_DEBUG_MODE === 'true'}
+          debug={true}
           theme={process.env.DESCOPE_THEME as any}
           locale={process.env.DESCOPE_LOCALE as string}
           redirectUrl={process.env.DESCOPE_REDIRECT_URL}

packages/sdks/react-sdk/src/components/Descope.tsx

@@ -37,48 +37,47 @@ const DescopeWC = lazy(async () => {
   };
 
   return {
-    default: ({
-      projectId,
-      flowId,
-      baseUrl,
-      baseStaticUrl,
-      innerRef,
-      tenant,
-      theme,
-      locale,
-      debug,
-      redirectUrl,
-      client,
-      form,
-      styleId,
-      autoFocus,
-      validateOnBlur,
-      restartOnError,
-      storeLastAuthenticatedUser,
-    }) => (
-	<descope-wc
-        project-id={projectId}
-        flow-id={flowId}
-        base-url={baseUrl}
-        base-static-url={baseStaticUrl}
-        ref={innerRef}
-        tenant={tenant}
-        theme={theme}
-        locale={locale}
-        debug={debug}
-        client={client}
-        form={form}
-        style-id={styleId}
-        redirect-url={redirectUrl}
-        auto-focus={autoFocus}
-        validate-on-blur={validateOnBlur}
-        restart-on-error={restartOnError}
-        store-last-authenticated-user={storeLastAuthenticatedUser}
-      />
-    ),
+    default: Wrapper(React.forwardRef((_, ref) => <descope-wc ref={ref} />)),
   };
 });
 
+const kebabCase = (str: string) =>
+  str
+    .replace(/([a-z])([A-Z])/g, '$1-$2')
+    .replace(/[\s_.]+/g, '-')
+    .toLowerCase();
+
+const Wrapper = (Component) => {
+  return React.forwardRef((props, ref) => {
+    const [innerRef, setInnerRef] = useState(null);
+    useImperativeHandle(ref, () => innerRef);
+    useMemo(() => {
+      if (!innerRef) return;
+      Object.entries(props).forEach(([key, value]) => {
+        // we have 2 cases - properties and attributes
+        if (key.endsWith('.prop')) {
+          const readyKey = key.replace(/.prop$/, '');
+          console.log('@@@ setting', {
+            readyKey,
+            value,
+          });
+          innerRef[readyKey] = value;
+        } else {
+          const kebabKey = kebabCase(key);
+          if (value === undefined || value === null) {
+            innerRef?.removeAttribute?.(kebabKey);
+          } else {
+            const readyValue =
+              typeof value === 'string' ? value : JSON.stringify(value);
+            innerRef?.setAttribute?.(kebabKey, readyValue);
+          }
+        }
+      });
+    }, [props, innerRef]);
+    return <Component ref={setInnerRef} />;
+  });
+};
+
 const Descope = React.forwardRef<HTMLElement, DescopeProps>(
   (
     {
@@ -174,12 +173,6 @@ const Descope = React.forwardRef<HTMLElement, DescopeProps>(
       };
     }, [innerRef, onReady]);
 
-    useEffect(() => {
-      if (innerRef) {
-        innerRef.errorTransformer = errorTransformer;
-      }
-    }, [innerRef, errorTransformer]);
-
     useEffect(() => {
       if (innerRef && logger) {
         innerRef.logger = logger;
@@ -201,9 +194,9 @@ const Descope = React.forwardRef<HTMLElement, DescopeProps>(
        * it can be removed once this issue will be solved
        * https://bugs.chromium.org/p/chromium/issues/detail?id=1404106#c2
        */
-	<form>
-		<Suspense fallback={null}>
-			<DescopeWC
+      <form>
+        <Suspense fallback={null}>
+          <DescopeWC
             projectId={projectId}
             flowId={flowId}
             baseUrl={baseUrl}
@@ -225,9 +218,12 @@ const Descope = React.forwardRef<HTMLElement, DescopeProps>(
             keepLastAuthenticatedUserAfterLogout={
               keepLastAuthenticatedUserAfterLogout
             }
+            {...{
+              'errorTransformer.prop': errorTransformer,
+            }}
           />
-		</Suspense>
-	</form>
+        </Suspense>
+      </form>
     );
   },
 );

packages/sdks/react-sdk/tsconfig.json

@@ -17,5 +17,5 @@
     "noErrorTruncation": true,
   },
   "include": ["**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules", "build", "dist", "test", "examples"]
+  "exclude": ["node_modules", "build", "dist", "test"]
 }

packages/sdks/web-component/src/lib/descope-wc/BaseDescopeWc.ts

@@ -170,12 +170,11 @@ class BaseDescopeWc extends BaseClass {
     this.setAttribute('redirect-url', value);
   }
 
-  get debug() {
-    return this.getAttribute('debug') === 'true';
-  }
-
-  set debug(value: any) {
-    this.setAttribute('debug', value);
+  get _debug() {
+    const res = this.hasAttribute('debug');
+    const attr = this.getAttribute('debug');
+    console.log('@@@ debug', res, "attr", attr);
+    return res;
   }
 
   get locale() {
@@ -433,7 +432,7 @@ class BaseDescopeWc extends BaseClass {
   }
 
   #updateDebuggerMessages(title: string, description: string) {
-    if (title && this.debug)
+    if (title && this._debug)
       this.#debuggerEle?.updateData({ title, description });
   }
 
@@ -538,7 +537,7 @@ class BaseDescopeWc extends BaseClass {
 
     await super.init?.();
     this.#debugState.subscribe(this.#handleDebugMode.bind(this));
-    this.#debugState.update({ isDebug: this.debug });
+    this.#debugState.update({ isDebug: this._debug });
 
     this.#validateAttrs();
 
@@ -655,7 +654,7 @@ class BaseDescopeWc extends BaseClass {
         };
       });
 
-      this.#debugState.update({ isDebug: this.debug });
+      this.#debugState.update({ isDebug: this._debug });
     }
   }
 }