iframe-proxy | Sunbelt Computer Software

92 lines (81 loc) · 2.44 KB

import { html, LitElement } from "lit";
import * as ReactDOM from "react-dom";
import * as React from "react";
import * as retargetEvents from "react-shadow-dom-retarget-events";
import { StylesProvider, jssPreset } from "@material-ui/styles";
import { create } from "jss";
export class LitReactWrapper extends LitElement {
  static get properties() {
    return {
      mountPoint: Object,
      props: Object,
      element: Object,
      styles: Array,
      _styleElement: Object,
      _reactRef: Object,
      _reactElement: Object,
  constructor() {
    super();
    this.props = {};
    this.styles = [];
    this._styleElement = null;
    this._reactRef = React.createRef();
  render() {
    return html` <div id="mountPoint"></div> `;
  createElement() {
    const props = this.props || {};
    if (!props.mountContainer) props.mountContainer = this.mountPoint;
    if (!props.mountDocument) props.mountDocument = this.shadowRoot || document;
    this._reactElement = React.createElement(this.element, { ...props, ref: this._reactRef }, React.createElement("slot"));
    return this._reactElement;
  getRef() {
    return this._reactRef;
  injectStyles() {
    if (this._styleElement && this.shadowRoot.contains(this._styleElement)) {
      this.shadowRoot.removeChild(this._styleElement);
    let styleContent = "";
    if (Array.isArray(this.styles)) {
      styleContent = this.styles.join("\n");
    } else if (typeof this.styles === "string") {
      styleContent = this.styles;
    if (styleContent) {
      this._styleElement = document.createElement("style");
      this._styleElement.textContent = styleContent;
      this.shadowRoot.insertBefore(this._styleElement, this.mountPoint);
  renderElement() {
    const jss = create({
      ...jssPreset(),
      insertionPoint: this.mountPoint,
    ReactDOM.render(
      <StylesProvider jss={jss} sheetsManager={new Map()}>
        {this.createElement()}
      </StylesProvider>,
      this.mountPoint
  firstUpdated() {
    this.mountPoint = this.shadowRoot.getElementById("mountPoint");
    this.renderElement();
    retargetEvents(this.shadowRoot);
  updated(changedProperties) {
    if (changedProperties.has("styles")) {
      this.injectStyles();
    if (changedProperties.has("props") || changedProperties.has("element")) {
      this.renderElement();
window.customElements.define("lit-react-wrapper", LitReactWrapper);

Sunbelt Computer Software

PL/B Language Development and Support

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Sunbelt Computer Software

PL/B Language Development and Support

Uh oh!

FilesExpand file tree

lit-react-wrapper.js

Latest commit

History

lit-react-wrapper.js

File metadata and controls