{"version":3,"file":"CreateWebComponent.mjs","sources":["../../../src/bindings/CreateWebComponent.tsx"],"sourcesContent":["import { StytchProjectConfigurationInput } from '@stytch/core/public';\nimport { injectCssIntoNode, injectGlobalStyle } from '@stytch/internal-style-injector';\nimport { SDKConfig } from '@stytch/web';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nexport interface IReactWebComponent<P> extends HTMLElement {\n  render(props: P): void;\n}\n\ntype IReactWebComponentConstructor<P> = new (params: P) => IReactWebComponent<P>;\n\n/**\n * NOTE: These are currently only used for admin portal components. Other Stytch UI components use\n * utils from WebComponents.tsx instead.\n *\n * An opinionated React Component to Web Component binder.\n * High-level points:\n * - All React props are passed as props on the div, no attributes involved\n * - No support for incremental updates of props\n */\nexport function CreateWebComponent<P extends React.JSX.IntrinsicAttributes & object>(\n  ReactComponent: React.ComponentType<P>,\n  webComponentName: string,\n): IReactWebComponentConstructor<P> {\n  const existingRegistry = customElements.get(webComponentName);\n  if (existingRegistry) {\n    return existingRegistry as IReactWebComponentConstructor<P>;\n  }\n\n  class ReactWebComponent extends HTMLElement implements IReactWebComponent<P> {\n    props: P;\n    rootRef: HTMLElement;\n    mountPoint: HTMLElement | undefined;\n    styleSlot: HTMLElement | undefined;\n\n    constructor(props: P) {\n      super();\n      this.props = props;\n      this.rootRef = document.createElement('div');\n      this.append(this.rootRef);\n    }\n\n    connectedCallback() {\n      injectGlobalStyle();\n\n      this.styleSlot = document.createElement('section');\n      this.rootRef.appendChild(this.styleSlot);\n\n      this.mountPoint = document.createElement('span');\n      this.styleSlot.appendChild(this.mountPoint);\n\n      this.render(this.props);\n    }\n\n    disconnectedCallback() {\n      if (!this.mountPoint) {\n        return;\n      }\n      ReactDOM.unmountComponentAtNode(this.mountPoint);\n    }\n\n    render(props: P) {\n      if (!this.mountPoint) {\n        throw Error('Cannot render - no mount point defined');\n      }\n      if (!this.styleSlot) {\n        throw Error('Cannot render - no style slot defined');\n      }\n\n      ReactDOM.render(<ReactComponent {...props} />, this.mountPoint);\n    }\n  }\n\n  customElements.define(webComponentName, ReactWebComponent);\n\n  return ReactWebComponent;\n}\n\nexport function CreateShadowWebComponent<P extends React.JSX.IntrinsicAttributes & object>(\n  ReactComponent: React.ComponentType<P>,\n  webComponentName: string,\n): IReactWebComponentConstructor<P> {\n  const existingRegistry = customElements.get(webComponentName);\n  if (existingRegistry) {\n    return existingRegistry as IReactWebComponentConstructor<P>;\n  }\n\n  class ReactWebComponent extends HTMLElement implements IReactWebComponent<P> {\n    props: P;\n    rootRef: ShadowRoot;\n    mountPoint: HTMLElement | undefined;\n    styleSlot: HTMLElement | undefined;\n\n    constructor(props: P) {\n      super();\n      this.props = props;\n      this.rootRef = this.attachShadow({ mode: 'open' });\n    }\n\n    connectedCallback() {\n      const style = injectCssIntoNode();\n      this.rootRef.appendChild(style);\n\n      this.styleSlot = document.createElement('section');\n      this.rootRef.appendChild(this.styleSlot);\n\n      this.mountPoint = document.createElement('span');\n      this.styleSlot.appendChild(this.mountPoint);\n\n      this.render(this.props);\n    }\n\n    disconnectedCallback() {\n      if (!this.mountPoint) {\n        return;\n      }\n      ReactDOM.unmountComponentAtNode(this.mountPoint);\n    }\n\n    render(props: P) {\n      if (!this.mountPoint) {\n        throw Error('Cannot render - no mount point defined');\n      }\n      if (!this.styleSlot) {\n        throw Error('Cannot render - no style slot defined');\n      }\n\n      ReactDOM.render(<ReactComponent {...props} />, this.mountPoint);\n    }\n  }\n\n  customElements.define(webComponentName, ReactWebComponent);\n\n  return ReactWebComponent;\n}\n\n/**\n * Web Components aren't really isomorphic at all\n * but it's important to delay the construction & definition of the WC class until we are on the clientside\n * because the HTMLElement we extend from, and the customElement registry we modify, don't exist on the server\n */\nexport function CreateSSRSafeWebComponent<P extends React.JSX.IntrinsicAttributes & object>(\n  ReactComponent: React.ComponentType<P>,\n  webComponentName: string,\n) {\n  if (typeof window === 'undefined') {\n    return () => null as unknown as IReactWebComponent<P>;\n  }\n\n  return <TProjectConfiguration extends StytchProjectConfigurationInput>(props: P): IReactWebComponent<P> => {\n    const shadowDomEnabled = !!(props as unknown as SDKConfig<TProjectConfiguration>).config?.enableShadowDOM;\n    if (shadowDomEnabled) {\n      const Component = CreateShadowWebComponent(ReactComponent, webComponentName);\n      return new Component(props);\n    } else {\n      const Component = CreateWebComponent(ReactComponent, webComponentName);\n      return new Component(props);\n    }\n  };\n}\n"],"names":["CreateWebComponent","ReactComponent","webComponentName","existingRegistry","customElements","get","ReactWebComponent","HTMLElement","props","rootRef","mountPoint","styleSlot","document","createElement","append","connectedCallback","injectGlobalStyle","appendChild","render","disconnectedCallback","ReactDOM","unmountComponentAtNode","Error","React","define","CreateShadowWebComponent","attachShadow","mode","style","injectCssIntoNode","CreateSSRSafeWebComponent","window","shadowDomEnabled","config","enableShadowDOM","Component"],"mappings":";;;AAYA;;;;;;;;AAQC,IACM,SAASA,kBAAAA,CACdC,cAAsC,EACtCC,gBAAwB,EAAA;IAExB,MAAMC,gBAAAA,GAAmBC,cAAAA,CAAeC,GAAG,CAACH,gBAAAA,CAAAA;AAC5C,IAAA,IAAIC,gBAAAA,EAAkB;QACpB,OAAOA,gBAAAA;AACT,IAAA;AAEA,IAAA,MAAMG,iBAAAA,SAA0BC,WAAAA,CAAAA;QAC9BC,KAAAA;QACAC,OAAAA;QACAC,UAAAA;QACAC,SAAAA;AAEA,QAAA,WAAA,CAAYH,KAAQ,CAAE;YACpB,KAAK,EAAA;YACL,IAAI,CAACA,KAAK,GAAGA,KAAAA;AACb,YAAA,IAAI,CAACC,OAAO,GAAGG,QAAAA,CAASC,aAAa,CAAC,KAAA,CAAA;AACtC,YAAA,IAAI,CAACC,MAAM,CAAC,IAAI,CAACL,OAAO,CAAA;AAC1B,QAAA;QAEAM,iBAAAA,GAAoB;AAClBC,YAAAA,iBAAAA,EAAAA;AAEA,YAAA,IAAI,CAACL,SAAS,GAAGC,QAAAA,CAASC,aAAa,CAAC,SAAA,CAAA;AACxC,YAAA,IAAI,CAACJ,OAAO,CAACQ,WAAW,CAAC,IAAI,CAACN,SAAS,CAAA;AAEvC,YAAA,IAAI,CAACD,UAAU,GAAGE,QAAAA,CAASC,aAAa,CAAC,MAAA,CAAA;AACzC,YAAA,IAAI,CAACF,SAAS,CAACM,WAAW,CAAC,IAAI,CAACP,UAAU,CAAA;AAE1C,YAAA,IAAI,CAACQ,MAAM,CAAC,IAAI,CAACV,KAAK,CAAA;AACxB,QAAA;QAEAW,oBAAAA,GAAuB;AACrB,YAAA,IAAI,CAAC,IAAI,CAACT,UAAU,EAAE;AACpB,gBAAA;AACF,YAAA;AACAU,YAAAA,EAAAA,CAASC,sBAAsB,CAAC,IAAI,CAACX,UAAU,CAAA;AACjD,QAAA;AAEAQ,QAAAA,MAAAA,CAAOV,KAAQ,EAAE;AACf,YAAA,IAAI,CAAC,IAAI,CAACE,UAAU,EAAE;AACpB,gBAAA,MAAMY,KAAAA,CAAM,wCAAA,CAAA;AACd,YAAA;AACA,YAAA,IAAI,CAAC,IAAI,CAACX,SAAS,EAAE;AACnB,gBAAA,MAAMW,KAAAA,CAAM,uCAAA,CAAA;AACd,YAAA;AAEAF,YAAAA,EAAAA,CAASF,MAAM,eAACK,EAAA,CAAA,aAAA,CAACtB,gBAAmBO,KAAAA,CAAAA,EAAW,IAAI,CAACE,UAAU,CAAA;AAChE,QAAA;AACF;IAEAN,cAAAA,CAAeoB,MAAM,CAACtB,gBAAAA,EAAkBI,iBAAAA,CAAAA;IAExC,OAAOA,iBAAAA;AACT;AAEO,SAASmB,wBAAAA,CACdxB,cAAsC,EACtCC,gBAAwB,EAAA;IAExB,MAAMC,gBAAAA,GAAmBC,cAAAA,CAAeC,GAAG,CAACH,gBAAAA,CAAAA;AAC5C,IAAA,IAAIC,gBAAAA,EAAkB;QACpB,OAAOA,gBAAAA;AACT,IAAA;AAEA,IAAA,MAAMG,iBAAAA,SAA0BC,WAAAA,CAAAA;QAC9BC,KAAAA;QACAC,OAAAA;QACAC,UAAAA;QACAC,SAAAA;AAEA,QAAA,WAAA,CAAYH,KAAQ,CAAE;YACpB,KAAK,EAAA;YACL,IAAI,CAACA,KAAK,GAAGA,KAAAA;AACb,YAAA,IAAI,CAACC,OAAO,GAAG,IAAI,CAACiB,YAAY,CAAC;gBAAEC,IAAAA,EAAM;AAAO,aAAA,CAAA;AAClD,QAAA;QAEAZ,iBAAAA,GAAoB;AAClB,YAAA,MAAMa,KAAAA,GAAQC,iBAAAA,EAAAA;AACd,YAAA,IAAI,CAACpB,OAAO,CAACQ,WAAW,CAACW,KAAAA,CAAAA;AAEzB,YAAA,IAAI,CAACjB,SAAS,GAAGC,QAAAA,CAASC,aAAa,CAAC,SAAA,CAAA;AACxC,YAAA,IAAI,CAACJ,OAAO,CAACQ,WAAW,CAAC,IAAI,CAACN,SAAS,CAAA;AAEvC,YAAA,IAAI,CAACD,UAAU,GAAGE,QAAAA,CAASC,aAAa,CAAC,MAAA,CAAA;AACzC,YAAA,IAAI,CAACF,SAAS,CAACM,WAAW,CAAC,IAAI,CAACP,UAAU,CAAA;AAE1C,YAAA,IAAI,CAACQ,MAAM,CAAC,IAAI,CAACV,KAAK,CAAA;AACxB,QAAA;QAEAW,oBAAAA,GAAuB;AACrB,YAAA,IAAI,CAAC,IAAI,CAACT,UAAU,EAAE;AACpB,gBAAA;AACF,YAAA;AACAU,YAAAA,EAAAA,CAASC,sBAAsB,CAAC,IAAI,CAACX,UAAU,CAAA;AACjD,QAAA;AAEAQ,QAAAA,MAAAA,CAAOV,KAAQ,EAAE;AACf,YAAA,IAAI,CAAC,IAAI,CAACE,UAAU,EAAE;AACpB,gBAAA,MAAMY,KAAAA,CAAM,wCAAA,CAAA;AACd,YAAA;AACA,YAAA,IAAI,CAAC,IAAI,CAACX,SAAS,EAAE;AACnB,gBAAA,MAAMW,KAAAA,CAAM,uCAAA,CAAA;AACd,YAAA;AAEAF,YAAAA,EAAAA,CAASF,MAAM,eAACK,EAAA,CAAA,aAAA,CAACtB,gBAAmBO,KAAAA,CAAAA,EAAW,IAAI,CAACE,UAAU,CAAA;AAChE,QAAA;AACF;IAEAN,cAAAA,CAAeoB,MAAM,CAACtB,gBAAAA,EAAkBI,iBAAAA,CAAAA;IAExC,OAAOA,iBAAAA;AACT;AAEA;;;;AAIC,IACM,SAASwB,yBAAAA,CACd7B,cAAsC,EACtCC,gBAAwB,EAAA;IAExB,IAAI,OAAO6B,WAAW,WAAA,EAAa;AACjC,QAAA,OAAO,IAAM,IAAA;AACf,IAAA;AAEA,IAAA,OAAO,CAAgEvB,KAAAA,GAAAA;AACrE,QAAA,MAAMwB,mBAAmB,CAAC,CAAC,KAACxB,CAAsDyB,MAAM,EAAEC,eAAAA;AAC1F,QAAA,IAAIF,gBAAAA,EAAkB;YACpB,MAAMG,SAAAA,GAAYV,yBAAyBxB,cAAAA,EAAgBC,gBAAAA,CAAAA;AAC3D,YAAA,OAAO,IAAIiC,SAAAA,CAAU3B,KAAAA,CAAAA;QACvB,CAAA,MAAO;YACL,MAAM2B,SAAAA,GAAYnC,mBAAmBC,cAAAA,EAAgBC,gBAAAA,CAAAA;AACrD,YAAA,OAAO,IAAIiC,SAAAA,CAAU3B,KAAAA,CAAAA;AACvB,QAAA;AACF,IAAA,CAAA;AACF;;;;"}