preact-island
Version:
🏝 Create your own slice of paradise on any website.
2 lines (1 loc) • 6.4 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("preact"),require("preact/compat")):"function"==typeof define&&define.amd?define(["exports","preact","preact/compat"],t):t((e||self).preactIsland={},e.preact,e.compat)}(this,function(e,t,n){function r(){return r=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},r.apply(this,arguments)}function o(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,c(e,t)}function i(e){return i=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},i(e)}function c(e,t){return c=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},c(e,t)}function a(){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 u(e,t,n){return u=a()?Reflect.construct:function(e,t,n){var r=[null];r.push.apply(r,t);var o=new(Function.bind.apply(e,r));return n&&c(o,n.prototype),o},u.apply(null,arguments)}function l(e){var t="function"==typeof Map?new Map:void 0;return l=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 u(e,arguments,i(this).constructor)}return n.prototype=Object.create(e.prototype,{constructor:{value:n,enumerable:!1,writable:!0,configurable:!0}}),c(n,e)},l(e)}var s=function(e){return e instanceof ShadowRoot},p=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},f=function(e){return["text/props","application/json"].includes(e.getAttribute("type")||"")},d=function(e){return s(e)?[]:Array.from(e.getElementsByTagName("script")).filter(f)},m=function(e){return Array.from(document.querySelectorAll(e)).filter(f)},h=function(e){var t={};return e.forEach(function(e){try{t=r({},t,JSON.parse(e.innerHTML))}catch(e){}}),t},v=function(e,t,n,o){void 0===n&&(n={});var i=p(t),c=e._executedScript?p(e._executedScript):{},a=h(d(t));return r({},n,i,c,o?h(m(o)):{},a)};function y(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 b=function(e){var n=e.widget,r=e.rootFragment,o=e.props;e.island.props=o,t.render(t.h(n,o),r)},g=function(e){var n={_rootsToObservers:new WeakMap,_roots:[],_executedScript:document.currentScript,props:{},render:function(t){var o=t.selector,i=t.clean,c=void 0!==i&&i,a=t.replace,u=void 0!==a&&a,l=t.inline,p=void 0!==l&&l,f=t.initialProps,h=void 0===f?{}:f,g=t.propsSelector,E=t.elementName,w=!1,S=function(){if(!0!==w){var t=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:o,inline:p,elementName:E});if(0!==t.length){var i=function(e){var t=e.island,n=e.widget,o=e.clean,i=e.replace,c=e.initialProps,a=e.propsSelector,u=[];return e.hostElements.forEach(function(e){var l,p=v(t,e,c,a);if(o&&e.replaceChildren(),i)l=y(e.parentElement||document.body,e);else{var f=document.createElement("div");e.appendChild(f),l=y(e,f)}u.push(l),b({island:t,widget:n,rootFragment:l,props:p});var h=function(e){var t=e.island,n=e.hostElement,o=e.initialProps,i=e.onNewProps,c=e.propsSelector,a=new MutationObserver(function(e){e.forEach(function(){i(v(t,n,o,c))})}),u={attributes:!0,childList:!0,characterData:!0};return t._executedScript&&a.observe(t._executedScript,u),d(n).forEach(function(e){a.observe(e,r({},u,{subtree:!0}))}),c&&m(c).forEach(function(e){a.observe(e,r({},u,{subtree:!0}))}),a.observe(s(n)?n.host:n,u),a}({island:t,hostElement:e,initialProps:c,onNewProps:function(e){b({island:t,widget:n,rootFragment:l,props:e})},propsSelector:a});t._rootsToObservers.set(l,h)}),{rootFragments:u}}({island:n,widget:e,clean:c,hostElements:t,replace:u,initialProps:h,propsSelector:g});n._roots=n._roots.concat(i.rootFragments),w=!0}}};S(),document.addEventListener("DOMContentLoaded",S),document.addEventListener("load",S)},rerender:function(t){n._roots.forEach(function(o){b({island:n,widget:e,rootFragment:o,props:r({},n.props,t)})})},destroy:function(){n._roots.forEach(function(e){var r;null==(r=n._rootsToObservers.get(e))||r.disconnect(),t.render(null,e)})}};return n};e.WebComponentPortal=function(e){var t=e.name,r=e.container,i=void 0===r?document.body:r,c=e.children,a=e.style,u=n.useMemo(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(!a)return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t);if(a instanceof HTMLStyleElement)n.prepend(a);else{var r=document.createElement("style");r.innerHTML=a,n.prepend(r)}return t}return o(t,e),t}(/*#__PURE__*/l(HTMLElement));customElements.define(t,e)}var n=document.createElement(t);return i.appendChild(n)},[i,a]);return n.useEffect(function(){return function(){u.remove()}},[u]),n.createPortal(c,u.shadowRoot)},e.createIsland=g,e.createIslandWebComponent=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 o(t,e),t}(/*#__PURE__*/l(HTMLElement));customElements.define(e,n)}var i=g(t);return r({},i,{render:function(t){return i.render(r({elementName:e},t))},injectStyles:function(e){i._roots.forEach(function(t){var n=document.createElement("style");n.innerHTML=e,t.parentNode.prepend(n)})}})}});