sync_dom_to_vdom()

When you're working with third-party JavaScript libraries, it's not uncommon for those libraries to modify the DOM.

To keep these libraries compatible, Joystick introduces a special method on your component instance: instance.sync_dom_to_vdom(). Like the name implies, this method takes a snapshot of the current physical DOM and syncs it back to Joystick's internal virtual DOM.

Example Usage

To utilize the sync_dom_to_vdom() method, call it after your third-party JavaScript code.

import joystick from '@joystick.js/ui';
import { code } from '../../../lib/mod-plus.esm.min.js';

const CodeSample = joystick.component({
  lifecycle: {
    on_render: (instance = {}) => {
      code();
      instance.sync_dom_to_vdom();
    }
  },
  render: ({ props }) => {
    return `<div class="code-sample">
      <pre>${props.code}</pre>
    </div>`;
  },
});

export default CodeSample;

Above, we import the code() function from Mod Plus that we expect to modify the DOM when it runs. To ensure that the code rendered at mount time is preserved between re-renders, immediately after calling code(), we call to instance.sync_dom_to_vdom().

When code() modifies the DOM, instance.sync_dom_to_vdom() will be run immediately after to sync the changes back to Joystick's virtual DOM.

API

Definition

sync_dom_to_vdom: () => void;