How to use penpal - 10 common examples

/**
 * Child Frame (flexible)
 */
const flexibleChildConnection = Penpal.connectToParent({
  // Methods child is exposing to parent
  methods: childMethods
});

flexibleChildConnection.promise.then(parent => {
  parent.add(3, 1); // $ExpectType any
});
/**
 * Child Frame (strict)
 */
const strictChildConnection = Penpal.connectToParent({
  // Methods child is exposing to parent
  methods: childMethods
});

strictChildConnection.promise.then(parent => {
  parent.add(3, 1).then(total => {
    total; // $ExpectType number
  });
});

});

strictParentConnection.promise.then(child => {
  child.multiply(2, 6).then(total => {
    total; // $ExpectType number
  });
  child.divide(12, 4).then(total => {
    total; // $ExpectType number
  });
  child.foo(12, 4); // $ExpectError
});

/**
 * Child Frame (flexible)
 */
const flexibleChildConnection = Penpal.connectToParent({
  // Methods child is exposing to parent
  methods: childMethods
});

flexibleChildConnection.promise.then(parent => {
  parent.add(3, 1); // $ExpectType any
});
/**
 * Child Frame (strict)
 */
const strictChildConnection = Penpal.connectToParent({
  // Methods child is exposing to parent
  methods: childMethods
});

strictChildConnection.promise.then(parent => {

// URL of page to load into iframe.
  url: 'http://example.com/iframe.html',
  // Container to which the iframe should be appended.
  appendTo: parentContainer,
  // iframe to use
  iframe: iframeToUse,
  // Methods parent is exposing to child
  methods: parentMethods
});

permissiveParentConnection.promise.then(child => {
  child.multiply(2, 6); // $ExpectType any
  child.foo(12, 4); // $ExpectType any
});

const strictParentConnection = Penpal.connectToChild({
  // URL of page to load into iframe.
  url: 'http://example.com/iframe.html',
  // Container to which the iframe should be appended.
  appendTo: parentContainer,
  // iframe to use
  iframe: iframeToUse,
  // Methods parent is exposing to child
  methods: parentMethods
});

strictParentConnection.promise.then(child => {
  child.multiply(2, 6).then(total => {
    total; // $ExpectType number
  });
  child.divide(12, 4).then(total => {
    total; // $ExpectType number

}, 1000);
    });
  }
};

/**
 * Parent Window
 */

const parentContainer = document.getElementById('iframeContainer');
if (!parentContainer) throw new Error('Parent container not found');

const iframeToUse = document.createElement('iframe');
if (!iframeToUse) throw new Error('Parent iframe element has not been created');

const permissiveParentConnection = Penpal.connectToChild({
  // URL of page to load into iframe.
  url: 'http://example.com/iframe.html',
  // Container to which the iframe should be appended.
  appendTo: parentContainer,
  // iframe to use
  iframe: iframeToUse,
  // Methods parent is exposing to child
  methods: parentMethods
});

permissiveParentConnection.promise.then(child => {
  child.multiply(2, 6); // $ExpectType any
  child.foo(12, 4); // $ExpectType any
});

const strictParentConnection = Penpal.connectToChild({

function connectToParentWithPenpal() {
  const connection = Penpal.connectToParent({
    parentOrigin: allowedOrigin,
    // Methods child is exposing to parent
    methods: {
      getValue() {
        return getValueOfCodemirror();
      },
      setValue(newValue) {
        setValueToCodemirror(newValue);
      },
      setValueOnInit(newValue) {
        setValueToCodemirrorOnInit(newValue);
      }
    }
  });
  connection.promise.then(parent => {
    window.growi = parent;

function connectToParentWithPenpal() {
  const connection = Penpal.connectToParent({
    parentOrigin: allowedOrigin,
    // Methods child is exposing to parent
    methods: {
      getValue() {
        return getValueOfCodemirror();
      },
      setValue(newValue) {
        setValueToCodemirror(newValue);
      },
      setValueOnInit(newValue) {
        setValueToCodemirrorOnInit(newValue);
      },
    },
  });
  connection.promise.then((parent) => {
    window.growi = parent;

initHackmdWithPenpal() {
    const _this = this; // for in methods scope

    const iframe = document.createElement('iframe');
    iframe.src = `${this.props.hackmdUri}/${this.props.pageIdOnHackmd}?both`;
    this.iframeContainer.appendChild(iframe);

    const connection = connectToChild({
      iframe,
      methods: { // expose methods to HackMD
        notifyBodyChanges(document) {
          _this.notifyBodyChangesHandler(document);
        },
        saveWithShortcut(document) {
          _this.saveWithShortcutHandler(document);
        },
      },
      debug: DEBUG_PENPAL,
    });
    connection.promise.then((child) => {
      this.hackmd = child;
      if (this.props.initializationMarkdown != null) {
        child.setValueOnInit(this.props.initializationMarkdown);
      }

const style = document.createElement('style');
    style.innerHTML = styles;

    const container = document.createElement('div');
    container.className = 'por_portis-container';

    const widgetFrame = document.createElement('div');
    widgetFrame.id = `portis-container-${Date.now()}`;
    widgetFrame.className = 'por_portis-widget-frame';

    container.appendChild(widgetFrame);
    document.body.appendChild(container);
    document.head.appendChild(style);

    const connection = Penpal.connectToChild({
      url: this._widgetUrl,
      appendTo: document.getElementById(widgetFrame.id)!,
      methods: {
        setHeight: this._setHeight.bind(this),
        getWindowSize: this._getWindowSize.bind(this),
        onLogin: this._onLogin.bind(this),
        onLogout: this._onLogout.bind(this),
        onActiveWalletChanged: this._onActiveWalletChanged.bind(this),
        onError: this._onError.bind(this),
      },
    });

    connection.iframe.style.position = 'absolute';
    connection.iframe.style.height = '100%';
    connection.iframe.style.width = '100%';
    connection.iframe.style.border = '0 transparent';

const onload = async () => {
        const style = document.createElement('style');
        style.innerHTML = styles;

        const container = document.createElement('div');
        container.className = 'por_portis-container';

        const widgetFrame = document.createElement('div');
        widgetFrame.id = `portis-container-${Date.now()}`;
        widgetFrame.className = 'por_portis-widget-frame';

        container.appendChild(widgetFrame);
        document.body.appendChild(container);
        document.head.appendChild(style);

        const connection = Penpal.connectToChild({
          url: this._widgetUrl,
          appendTo: document.getElementById(widgetFrame.id)!,
          methods: {
            setHeight: this._setHeight.bind(this),
            getWindowSize: this._getWindowSize.bind(this),
            onLogin: this._onLogin.bind(this),
          },
        });

        connection.iframe.style.position = 'absolute';
        connection.iframe.style.height = '100%';
        connection.iframe.style.width = '100%';
        connection.iframe.style.border = '0 transparent';

        const communication = await connection.promise;
        resolve({ communication, iframe: connection.iframe, widgetFrame });