ziko-wrapper/wrappers/dom/solid/dom-wrapper.jsx

integrate zikojs elements within other ui framework like vue react solidjs svelte astro ...

import { createEffect } from 'solid-js';

export function DomWrapper(props) {
  createEffect(() => {
    if (props.children) {
      const { element } = props.children();
      if (element) {
        const wrapperDiv = document.createElement('div');
        wrapperDiv.appendChild(element);
        return wrapperDiv;
      }
    }
  });

  return (
    <div
      data-wrapper="ziko-wrapper"
      style={{display : "contents"}}
      ref={(el) =>
        globalThis.addEventListener("DOMContentLoaded",()=>{
          el && props.children && el.appendChild(props.children())
        })
      }
    ></div>
  );
}