preact-island
Version:
🏝 Create your own slice of paradise on any website.
2 lines (1 loc) • 6.21 kB
JavaScript
import{render as e,h as t}from"preact";import{useMemo as n,useEffect as r,createPortal as o}from"preact/compat";function i(){return i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},i.apply(this,arguments)}function c(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,u(e,t)}function a(e){return a=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},a(e)}function u(e,t){return u=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},u(e,t)}function l(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(e){return!1}}function s(e,t,n){return s=l()?Reflect.construct:function(e,t,n){var r=[null];r.push.apply(r,t);var o=new(Function.bind.apply(e,r));return n&&u(o,n.prototype),o},s.apply(null,arguments)}function p(e){var t="function"==typeof Map?new Map:void 0;return p=function(e){if(null===e||-1===Function.toString.call(e).indexOf("[native code]"))return e;if("function"!=typeof e)throw new TypeError("Super expression must either be null or a function");if(void 0!==t){if(t.has(e))return t.get(e);t.set(e,n)}function n(){return s(e,arguments,a(this).constructor)}return n.prototype=Object.create(e.prototype,{constructor:{value:n,enumerable:!1,writable:!0,configurable:!0}}),u(n,e)},p(e)}var f=function(e){return e instanceof ShadowRoot},d=function(e){var t,n=(e.getRootNode()instanceof ShadowRoot?e.getRootNode().host:e).dataset,r={};for(var o in n){if(!1===n.hasOwnProperty(o))return;var i=""+(t=o.split(/(props?)/).pop()||"").charAt(0).toLowerCase()+t.slice(1);i&&(r[i]=n[o])}return r},m=function(e){return["text/props","application/json"].includes(e.getAttribute("type")||"")},v=function(e){return f(e)?[]:Array.from(e.getElementsByTagName("script")).filter(m)},h=function(e){return Array.from(document.querySelectorAll(e)).filter(m)},y=function(e){var t={};return e.forEach(function(e){try{t=i({},t,JSON.parse(e.innerHTML))}catch(e){}}),t},b=function(e,t,n,r){void 0===n&&(n={});var o=d(t),c=e._executedScript?d(e._executedScript):{},a=y(v(t));return i({},n,o,c,r?y(h(r)):{},a)};function g(e,t){var n=(t=[].concat(t))[t.length-1].nextSibling;function r(t,r){e.insertBefore(t,r||n)}return e.__k={nodeType:1,parentNode:e,firstChild:t[0],childNodes:t,insertBefore:r,appendChild:r,removeChild:function(t){e.removeChild(t)}}}var E=function(n){var r=n.widget,o=n.rootFragment,i=n.props;n.island.props=i,e(t(r,i),o)},w=function(t){var n={_rootsToObservers:new WeakMap,_roots:[],_executedScript:document.currentScript,props:{},render:function(e){var r=e.selector,o=e.clean,c=void 0!==o&&o,a=e.replace,u=void 0!==a&&a,l=e.inline,s=void 0!==l&&l,p=e.initialProps,d=void 0===p?{}:p,m=e.propsSelector,y=e.elementName,w=!1,S=function(){if(!0!==w){var e=function(e){var t=e.selector,n=e.elementName,r=document.currentScript;if(e.inline&&null!=r&&r.parentNode)return[r.parentNode];var o=null==r?void 0:r.dataset.mountIn;return o?Array.from(document.querySelectorAll(o)).map(function(e){if(null!=n){var t=document.createElement(n),r=e.appendChild(t);return null!=r.shadowRoot?r.shadowRoot:r}return e}):t?Array.from(document.querySelectorAll(t)).map(function(e){return null!=e.shadowRoot?e.shadowRoot:e}):[]}({selector:r,inline:s,elementName:y});if(0!==e.length){var o=function(e){var t=e.island,n=e.widget,r=e.clean,o=e.replace,c=e.initialProps,a=e.propsSelector,u=[];return e.hostElements.forEach(function(e){var l,s=b(t,e,c,a);if(r&&e.replaceChildren(),o)l=g(e.parentElement||document.body,e);else{var p=document.createElement("div");e.appendChild(p),l=g(e,p)}u.push(l),E({island:t,widget:n,rootFragment:l,props:s});var d=function(e){var t=e.island,n=e.hostElement,r=e.initialProps,o=e.onNewProps,c=e.propsSelector,a=new MutationObserver(function(e){e.forEach(function(){o(b(t,n,r,c))})}),u={attributes:!0,childList:!0,characterData:!0};return t._executedScript&&a.observe(t._executedScript,u),v(n).forEach(function(e){a.observe(e,i({},u,{subtree:!0}))}),c&&h(c).forEach(function(e){a.observe(e,i({},u,{subtree:!0}))}),a.observe(f(n)?n.host:n,u),a}({island:t,hostElement:e,initialProps:c,onNewProps:function(e){E({island:t,widget:n,rootFragment:l,props:e})},propsSelector:a});t._rootsToObservers.set(l,d)}),{rootFragments:u}}({island:n,widget:t,clean:c,hostElements:e,replace:u,initialProps:d,propsSelector:m});n._roots=n._roots.concat(o.rootFragments),w=!0}}};S(),document.addEventListener("DOMContentLoaded",S),document.addEventListener("load",S)},rerender:function(e){n._roots.forEach(function(r){E({island:n,widget:t,rootFragment:r,props:i({},n.props,e)})})},destroy:function(){n._roots.forEach(function(t){var r;null==(r=n._rootsToObservers.get(t))||r.disconnect(),e(null,t)})}};return n},S=function(e,t){if(null==customElements.get(e)){var n=/*#__PURE__*/function(e){function t(){var t;return(t=e.call(this)||this).attachShadow({mode:"open"}),t}return c(t,e),t}(/*#__PURE__*/p(HTMLElement));customElements.define(e,n)}var r=w(t);return i({},r,{render:function(t){return r.render(i({elementName:e},t))},injectStyles:function(e){r._roots.forEach(function(t){var n=document.createElement("style");n.innerHTML=e,t.parentNode.prepend(n)})}})},_=function(e){var t=e.name,i=e.container,a=void 0===i?document.body:i,u=e.children,l=e.style,s=n(function(){if(null==customElements.get(t)){var e=/*#__PURE__*/function(e){function t(){var t,n=(t=e.call(this)||this).attachShadow({mode:"open"});if(!l)return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t);if(l instanceof HTMLStyleElement)n.prepend(l);else{var r=document.createElement("style");r.innerHTML=l,n.prepend(r)}return t}return c(t,e),t}(/*#__PURE__*/p(HTMLElement));customElements.define(t,e)}var n=document.createElement(t);return a.appendChild(n)},[a,l]);return r(function(){return function(){s.remove()}},[s]),o(u,s.shadowRoot)};export{_ as WebComponentPortal,w as createIsland,S as createIslandWebComponent};