reactement
Version:
Sometimes it's useful to let the DOM render our components when needed. Custom Elements are great at this. They provide various methods that can inform you when an element is "connected" or "disconnected" from the DOM.
1 lines • 8.39 kB
JavaScript
!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var r=e();for(var n in r)("object"==typeof exports?exports:t)[n]=r[n]}}(this,(function(){return function(){"use strict";var t={470:function(t,e,r){var n;r.r(e),r.d(e,{ErrorTypes:function(){return n},getAsyncComponent:function(){return f},getAttributeObject:function(){return a},getAttributeProps:function(){return u},getDocument:function(){return c},getElementAttributes:function(){return y},getElementTag:function(){return h},getPropKey:function(){return l},isPromise:function(){return o},parseJson:function(){return s},selfClosingTags:function(){return i}}),function(t){t.Promise="Error: Promises cannot be used for SSR",t.Missing="Error: Cannot find component in provided function",t.Json="Error: Invalid JSON string passed to component"}(n||(n={}));var o=function(t){return t&&"function"==typeof t.then},i=["area","base","br","col","hr","img","input","link","meta","source","embed","param","track","wbr"];function s(t){var e=this.tagName,r=this.__options.formatProps,o={};try{o=JSON.parse(t)}catch(t){console.error(n.Json,": <".concat(e.toLowerCase(),">"))}return r&&(o=r(o)),o}function c(t){var e,r="<!DOCTYPE html>\n<html><body>".concat(t,"</body></html>");try{e=(new DOMParser).parseFromString(r,"text/html")}catch(t){}if(e)return e.body}function a(t){var e={};if(null==t||!t.length)return e;for(var r=t.length-1;r>=0;r--){var n=t[r];e[n.name]=n.value}return e}function u(t,e){for(var r=a(t),n={},o=0,i=Object.keys(r);o<i.length;o++){var s=i[o];-1!==(null==e?void 0:e.indexOf(s))&&(n[l(s)]=r[s])}return n}function l(t){var e=t.trim().replace(/[\s_]/g,"-");return e.charAt(0).toLowerCase()+e.slice(1).replace(/-([a-z])/g,(function(t){return t[1].toUpperCase()}))}function p(t){return p="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},p(t)}function f(t,e){return t.then((function(t){return function(t,e){var r,n=void 0;return"function"==typeof t?t:("object"===p(t)&&(n=t[(r=e,(r=r.toLowerCase()).replace(/(^\w|-\w)/g,(function(t){return t.replace(/-/,"").toUpperCase()})))]||void 0),n)}(t,e)}))}function h(t){var e=t.toLowerCase();return e.indexOf("-")<0&&(e="component-"+e),e}function y(){var t=this.__options.attributes,e=void 0===t?[]:t;return this.hasAttributes()?u(this.attributes,e):{}}},435:function(t,e,r){var n,o=this&&this.__extends||(n=function(t,e){return n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r])},n(t,e)},function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function r(){this.constructor=t}n(t,e),t.prototype=null===e?Object.create(e):(r.prototype=e.prototype,new r)}),i=this&&this.__assign||function(){return i=Object.assign||function(t){for(var e,r=1,n=arguments.length;r<n;r++)for(var o in e=arguments[r])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t},i.apply(this,arguments)},s=this&&this.__spreadArray||function(t,e,r){if(r||2===arguments.length)for(var n,o=0,i=e.length;o<i;o++)!n&&o in e||(n||(n=Array.prototype.slice.call(e,0,o)),n[o]=e[o]);return t.concat(n||Array.prototype.slice.call(e))};Object.defineProperty(e,"__esModule",{value:!0}),e.define=void 0;var c=r(689),a=r(405),u=r(470),l=r(710);function p(){var t=this,e=u.getElementAttributes.call(this),r=this.getAttribute("props"),n=this.querySelector('[type="application/json"]'),o=u.parseJson.call(this,r||(null==n?void 0:n.innerHTML)||"{}");null==n||n.remove();var s=this.__children;this.__mounted||this.hasAttribute("server")||(s=(0,c.createElement)(l.parseHtml.call(this),{})),this.__properties=i(i(i({},this.__slots),o),e),this.__children=s||[],this.removeAttribute("server"),this.innerHTML="";var a=this.__component(),p=function(e){return y.call(t,e)};(0,u.isPromise)(a)?(0,u.getAsyncComponent)(a,this.tagName).then(p):p(a)}function f(t,e,r){if(this.__mounted){r=null==r?void 0:r;var n=this.__properties;"props"===t?n=i(i({},n),u.parseJson.call(this,r)):n[(0,u.getPropKey)(t)]=r,this.__properties=n,(0,a.render)((0,c.createElement)(this.__instance,i(i({},n),{parent:this,children:this.__children})),this)}}function h(){(0,a.render)(null,this)}function y(t){var e=this.tagName,r=this.__options.wrapComponent;if(t){r&&(t=r(t)),this.__instance=t,this.__mounted=!0;var n=i(i({},this.__properties),{parent:this,children:this.__children});(0,a.render)((0,c.createElement)(t,n),this)}else console.error(u.ErrorTypes.Missing,": <".concat(e.toLowerCase(),">"))}e.define=function(t,e,r){void 0===r&&(r={});var n=r.wrapComponent,i="undefined"==typeof window,a=(0,u.getElementTag)(t);if(i){var l=e();if((0,u.isPromise)(l))throw new Error("".concat(u.ErrorTypes.Promise," : <").concat(t,">"));var y=l;return n&&(y=n(l)),function(t){return(0,c.createElement)(a,{server:!0},[(0,c.createElement)("script",{type:"application/json",dangerouslySetInnerHTML:{__html:JSON.stringify(t)}}),(0,c.createElement)(y,t)])}}customElements.define(a,function(t,e){var r;void 0===e&&(e={});var n=e.attributes,i=void 0===n?[]:n;if("undefined"!=typeof Reflect&&Reflect.construct){var c=function(){var r=Reflect.construct(HTMLElement,[],c);return r.__mounted=!1,r.__component=t,r.__properties={},r.__slots={},r.__children=void 0,r.__options=e,r};return c.observedAttributes=s(["props"],i,!0),c.prototype=Object.create(HTMLElement.prototype),c.prototype.constructor=c,c.prototype.connectedCallback=p,c.prototype.attributeChangedCallback=f,c.prototype.disconnectedCallback=h,c}return r=function(r){function n(){var n=null!==r&&r.apply(this,arguments)||this;return n.__mounted=!1,n.__component=t,n.__properties={},n.__slots={},n.__children=void 0,n.__options=e,n}return o(n,r),n.prototype.connectedCallback=function(){p.call(this)},n.prototype.attributeChangedCallback=function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];f.call.apply(f,s([this],t,!1))},n.prototype.disconnectedCallback=function(){h.call(this)},n}(HTMLElement),r.observedAttributes=s(["props"],i,!0),r}(e,r))}},710:function(t,e,r){var n=this&&this.__assign||function(){return n=Object.assign||function(t){for(var e,r=1,n=arguments.length;r<n;r++)for(var o in e=arguments[r])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t},n.apply(this,arguments)},o=this&&this.__rest||function(t,e){var r={};for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&e.indexOf(n)<0&&(r[n]=t[n]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(t);o<n.length;o++)e.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(t,n[o])&&(r[n[o]]=t[n[o]])}return r};Object.defineProperty(e,"__esModule",{value:!0}),e.parseHtml=void 0;var i=r(689),s=r(470);function c(t){var e,r=this;if(3===t.nodeType)return(null===(e=t.textContent)||void 0===e?void 0:e.trim())||"";if(1!==t.nodeType)return null;var a=String(t.nodeName).toLowerCase(),u=Array.from(t.childNodes),l=function(){return u.map((function(t){return c.call(r,t)}))},p=(0,s.getAttributeObject)(t.attributes),f=p.slot,h=o(p,["slot"]),y=n(n({},h),{key:Math.random()});return"script"===a?null:"body"===a?(0,i.createElement)(i.Fragment,{key:"body"},l()):s.selfClosingTags.includes(a)?(0,i.createElement)(a,y):f?(this.__slots[(0,s.getPropKey)(f)]=function(t){return t.every((function(t){return"string"==typeof t}))?t.join(" "):(0,i.createElement)(i.Fragment,{},t)}(l()),null):(0,i.createElement)(a,y,l())}e.parseHtml=function(){var t=(0,s.getDocument)(this.innerHTML);if(t){var e=c.call(this,t);return function(){return e}}}},689:function(t){t.exports=require("react")},405:function(t){t.exports=require("react-dom")}},e={};function r(n){var o=e[n];if(void 0!==o)return o.exports;var i=e[n]={exports:{}};return t[n].call(i.exports,i,i.exports,r),i.exports}return r.d=function(t,e){for(var n in e)r.o(e,n)&&!r.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r(435)}()}));