web-component-wrapper 0.0.596 → 0.0.598

package/dist/compatible/type.js

@@ -0,0 +1 @@
+"use strict";if("undefined"!=typeof module&&null!==module&&"undefined"!==eval("typeof require")&&null!==eval("require")&&"main"in eval("require")&&"undefined"!==eval("typeof require.main")&&null!==eval("require.main")){var ORIGINAL_MAIN_MODULE=module;module!==eval("require.main")&&"paths"in module&&"paths"in eval("require.main")&&"undefined"!=typeof __dirname&&null!==__dirname&&(module.paths=eval("require.main.paths").concat(module.paths.filter((function(path){return eval("require.main.paths").includes(path)}))))}if(null==window)var window="undefined"==typeof global||null===global?{}:global;!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define("webComponentWrapper",[],n):"object"==typeof exports?exports.webComponentWrapper=n():e.webComponentWrapper=n()}(this,(function(){return{r:function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}}.r(e={}),e;var e}));

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";if("undefined"!=typeof module&&null!==module&&"undefined"!==eval("typeof require")&&null!==eval("require")&&"main"in eval("require")&&"undefined"!==eval("typeof require.main")&&null!==eval("require.main")){var ORIGINAL_MAIN_MODULE=module;module!==eval("require.main")&&"paths"in module&&"paths"in eval("require.main")&&"undefined"!=typeof __dirname&&null!==__dirname&&(module.paths=eval("require.main.paths").concat(module.paths.filter((function(path){return eval("require.main.paths").includes(path)}))))}if(null==window)var window="undefined"==typeof global||null===global?{}:global;!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("clientnode"),require("clientnode/property-types"),require("react"),require("react-dom"),require("react-dom/client"),require("@babel/runtime/helpers/initializerDefineProperty"),require("@babel/runtime/helpers/applyDecoratedDescriptor"),require("@babel/runtime/helpers/initializerWarningHelper"));else if("function"==typeof define&&define.amd)define(["clientnode","clientnode/property-types","react","react-dom","react-dom/client","@babel/runtime/helpers/initializerDefineProperty","@babel/runtime/helpers/applyDecoratedDescriptor","@babel/runtime/helpers/initializerWarningHelper"],t);else{var r="object"==typeof exports?t(require("clientnode"),require("clientnode/property-types"),require("react"),require("react-dom"),require("react-dom/client"),require("@babel/runtime/helpers/initializerDefineProperty"),require("@babel/runtime/helpers/applyDecoratedDescriptor"),require("@babel/runtime/helpers/initializerWarningHelper")):t(e.clientnode,e["clientnode/property-types"],e.react,e["react-dom"],e["react-dom/client"],e["@babel/runtime/helpers/initializerDefineProperty"],e["@babel/runtime/helpers/applyDecoratedDescriptor"],e["@babel/runtime/helpers/initializerWarningHelper"]);for(var s in r)("object"==typeof exports?exports:e)[s]=r[s]}}(this,((e,t,r,s,n,i,o,a)=>(()=>{var p=[t=>{t.exports=e},e=>{e.exports=t},(e,t,r)=>{r.d(t,{default:()=>i});var s=r(0),n=r(1);const i=function(e={}){return e={readAttribute:!0,type:n.string,...e},function(t,r){if("string"!=typeof r)return;const n=t.self||t.constructor;if(e.readAttribute){Object.prototype.hasOwnProperty.call(n,"observedAttributes")||(n.observedAttributes=n.observedAttributes?[...n.observedAttributes]:[]);const e=(0,s.camelCaseToDelimited)(r);n.observedAttributes&&!n.observedAttributes.includes(e)&&n.observedAttributes.push(e)}if(e.type&&(Object.prototype.hasOwnProperty.call(n,"propertyTypes")||(n.propertyTypes=n.propertyTypes?{...n.propertyTypes}:{}),!n.propertyTypes||!e.update&&Object.prototype.hasOwnProperty.call(n,r)||(n.propertyTypes[r]=e.type)),e.writeAttribute&&(Object.prototype.hasOwnProperty.call(n,"propertiesToReflectAsAttributes")||(n.propertiesToReflectAsAttributes=n.propertiesToReflectAsAttributes?(0,s.copy)(n.propertiesToReflectAsAttributes):[]),e.update||n.propertiesToReflectAsAttributes instanceof Map&&!n.propertiesToReflectAsAttributes.has(r)||Array.isArray(n.propertiesToReflectAsAttributes)&&!n.propertiesToReflectAsAttributes.includes(r)||"object"==typeof n.propertiesToReflectAsAttributes&&!Object.prototype.hasOwnProperty.call(n.propertiesToReflectAsAttributes,r))){let t;"boolean"==typeof e.writeAttribute?e.writeAttribute&&n.propertyTypes&&Object.prototype.hasOwnProperty.call(n.propertyTypes,r)&&(t=n.propertyTypes[r]):t=e.writeAttribute,void 0!==t&&(Array.isArray(n.propertiesToReflectAsAttributes)&&(!0===e.writeAttribute?n.propertiesToReflectAsAttributes.push(r):n.normalizePropertyTypeList&&(n.propertiesToReflectAsAttributes=n.normalizePropertyTypeList(n.propertiesToReflectAsAttributes))),n.propertiesToReflectAsAttributes instanceof Map&&n.propertiesToReflectAsAttributes.set(r,t),"object"==typeof n.propertiesToReflectAsAttributes&&(n.propertiesToReflectAsAttributes[r]=t))}e.alias&&(Object.prototype.hasOwnProperty.call(n,"propertyAliases")||(n.propertyAliases=n.propertyAliases?{...n.propertyAliases}:{}),!n.propertyAliases||!e.update&&Object.prototype.hasOwnProperty.call(n,r)||(n.propertyAliases[r]=e.alias))}}},(e,t,r)=>{r.d(t,{api:()=>b,default:()=>g});var s,n,i,o,a=r(4),p=r.n(a),l=r(5),c=r.n(l),h=(r(6),r(0)),d=r(1),u=r(2);const f=new h.Logger({name:"web-component-wrapper-web"}),m="undefined"==typeof HTMLElement?class{}:HTMLElement;let y=(s=(0,u.default)({type:d.boolean,writeAttribute:!0}),o=class e extends m{constructor(){super(),this.renderState={promise:Promise.resolve(""),pending:!1,resolve:h.NOOP},this.childComponentInstances=[],this.batchAttributeUpdates=!0,this.batchPropertyUpdates=!0,this.batchUpdates=!0,this.batchedAttributeUpdateRunning=!0,this.batchedPropertyUpdateRunning=!0,this.batchedUpdateRunning=!0,this.connectionRegistered=!1,this.pendingAttributeUpdates=[],this.parentInstance=null,this.rootInstance=void 0,this.hostDomNode=void 0,this.scope={...h.UTILITY_SCOPE},this.domNodeEventBindings=new Map,this.domNodeTemplateCache=new Map,this.externalProperties={},this.ignoreAttributeUpdateObservations=!1,this.internalProperties={},this.outputEventNames=new Set,this.instance=null,p()(this,"isRoot",i,this),this.runDomConnectionAndRenderingInSameEventQueue=!1,this.self=e,this.slots={},this.prepareNewRenderingPromise(),this.self=this.constructor,this.self._propertiesToReflectAsAttributes||(this.self._propertiesToReflectAsAttributes=this.self.normalizePropertyTypeList(this.self.propertiesToReflectAsAttributes)),this.generateAliasIndex(),this.hostDomNode=this,this.rootInstance=this,this.defineGetterAndSetterInterface()}attributeChangedCallback(e,t,r){this.ignoreAttributeUpdateObservations||t===r||this.onUpdateAttribute(e,r)}onUpdateAttribute(e,t){const r=new Promise((r=>this.pendingAttributeUpdates.push((()=>{this.evaluateStringOrNullAndSetAsProperty(e,t),this.batchAttributeUpdates?this.batchedAttributeUpdateRunning||this.batchedUpdateRunning||(this.batchedAttributeUpdateRunning=!0,this.batchedUpdateRunning=!0,(0,h.timeout)((()=>{this.batchedAttributeUpdateRunning=!1,this.batchedUpdateRunning=!1,this.render("attributeChanged")}))):this.render("attributeChanged"),r()}))));if(this.connectionRegistered)for(;this.pendingAttributeUpdates.length;)this.pendingAttributeUpdates.shift()();return r}connectedCallback(){try{this.isConnected=!0}catch{}for(this.connectionRegistered=!0,this.parentInstance=this,this.rootInstance=this,this.attachEventHandler(),this.self.determineRootBinding&&(this.determineRootBinding(),this.parentInstance!==this&&this.parentInstance.childComponentInstances&&this.parentInstance.childComponentInstances.push(this)),this.self.applyRootBinding&&this.isRoot&&(this.determineRenderScope(),this.applyBinding(this,this.scope));this.pendingAttributeUpdates.length;)this.pendingAttributeUpdates.shift()();this.batchedAttributeUpdateRunning=!1,this.batchedPropertyUpdateRunning=!1,this.batchedUpdateRunning=!1,this.grabGivenSlots(),this.reflectExternalProperties(this.externalProperties),this.runDomConnectionAndRenderingInSameEventQueue?this.render("connected"):(0,h.timeout)((()=>{this.render("connected")}))}disconnectedCallback(){this.unRender("disconnected"),this.unregisterConnectionState()}defineGetterAndSetterInterface(){const e=(0,h.unique)(Object.keys(this.self.propertyTypes).concat(this.self._propertyAliasIndex?Object.keys(this.self._propertyAliasIndex):[]));for(const t of e)Object.prototype.hasOwnProperty.call(this,t)&&this.setPropertyValue(t,this[t]),Object.defineProperty(this,t,{configurable:!0,get:()=>this.getPropertyValue(t),set:e=>{this.setPropertyValue(t,e),this.triggerPropertySpecificRendering(t,e)}})}getPropertyAlias(e){return this.self._propertyAliasIndex&&Object.prototype.hasOwnProperty.call(this.self._propertyAliasIndex,e)?this.self._propertyAliasIndex[e]:null}getPropertyValue(t){var r;const s=this.instance?.current?.properties&&(Object.prototype.hasOwnProperty.call(!e.propertyTypes,t)||Object.prototype.hasOwnProperty.call(this.instance.current.properties,t))?this.instance.current.properties[t]:null!==(r=this.internalProperties[t])&&void 0!==r?r:this.externalProperties[t];return this.instance?.current?.state&&Object.prototype.hasOwnProperty.call(this.instance.current.state,t)?this.instance.current.state[t]:s}setExternalPropertyValue(e,t){this.externalProperties[e]=t;const r=this.getPropertyAlias(e);r&&(this.externalProperties[r]=t)}setInternalPropertyValue(e,t){this.internalProperties[e]=t;const r=this.getPropertyAlias(e);r&&(this.internalProperties[r]=t)}setPropertyValue(e,t){this.reflectProperties({[e]:t}),this.setInternalPropertyValue(e,t)}triggerPropertySpecificRendering(e,t){if(this.batchPropertyUpdates)this.batchedPropertyUpdateRunning||this.batchedUpdateRunning||(this.batchedPropertyUpdateRunning=!0,this.batchedUpdateRunning=!0,(0,h.timeout)((()=>{void 0!==t&&this.isStateProperty(e)?(this.render("preStatePropertyChanged"),(0,h.timeout)((()=>{this.setInternalPropertyValue(e,void 0),this.batchedPropertyUpdateRunning=!1,this.batchedUpdateRunning=!1,this.render("postStatePropertyChanged"),this.triggerOutputEvents()}))):(this.batchedPropertyUpdateRunning=!1,this.batchedUpdateRunning=!1,this.render("propertyChanged"),this.triggerOutputEvents())})));else{const r=this.isStateProperty(e);this.render(r?"preStatePropertyChanged":"propertyChanged"),void 0!==t&&r&&(this.setInternalPropertyValue(e,void 0),this.render("postStatePropertyChanged")),this.triggerOutputEvents()}}unregisterConnectionState(){try{this.isConnected=!1}catch{}this.connectionRegistered=!1,this.slots={}}unregisterDomNodeEventBindings(){for(const e of this.domNodeEventBindings.values())for(const t of e.values())t()}applyBinding(e,t){if(e.getAttributeNames)for(const r of e.getAttributeNames()){let s;if(r.startsWith("data-bind-")?s=r.substring(10):r.startsWith("bind-")&&(s=r.substring(5)),s){const n=e.getAttribute(r);if(null===n)continue;if(s.startsWith("attribute-")||s.startsWith("property-")){const i=(0,h.evaluate)(n,t,!1,!0,e);if(i.error){f.warn("Error occurred during processing given",`attribute binding "${r}" on node:`,e,i.error);continue}s.startsWith("attribute-")?e.setAttribute(s.substring(10),i.result):e[(0,h.delimitedToCamelCase)(s.substring(9))]=i.result}else if(s.startsWith("on-")){s=(0,h.delimitedToCamelCase)(s.substring(3)),t={log:f,event:void 0,parameters:void 0,...t};const i=(0,h.compile)(n,t,!0,!0,e);i.error?f.warn("Error occurred during compiling given event",`binding "${r}" on node:`,e,i.error):this.addSecureEventListener(e,s,((...s)=>{t.event=s[0],t.parameters=s;try{i.templateFunction(...i.originalScopeNames.map((e=>t[e])))}catch(t){f.warn("Error occurred during processing","given event binding",`"${r}" on node:`,e,`Given expression "${n}" could`,"not be evaluated with given scope",'names "'+i.scopeNames.join('", "')+`": ${(0,h.represent)(t)}`)}}))}}}}applyBindings(e,t,r=!0){for(;e;)!e.attributes?.length||!r&&e.getAttribute("slot")||this.applyBinding(e,t),e.nodeName.toLowerCase().includes("-")||this.applyBindings(e.firstChild,t),e=e.nextSibling}compileDomNodeTemplate(e,t=[],r={}){r={ignoreComponents:!0,ignoreNestedComponents:!0,unsafe:this.self.renderUnsafe,...r};const s=e.nodeName.toLowerCase();if(r.ignoreComponents&&s.includes("-"))return null;if(r.unsafe){let r=e.innerHTML;if(!r&&e.template&&(r=e.template),this.self.hasCode(r)){const s=(0,h.compile)(`\`${r}\``,t);return{domNode:e,children:[],error:s.error,scopeNames:s.scopeNames,template:r,templateFunction:s.templateFunction}}return null}let n=null;if("#text"===s){const t=e.textContent;t&&this.self.hasCode(t)&&(n=t.replace(/&nbsp;/g," ").trim())}const i=[],o={children:i,domNode:e};if(n){const e=(0,h.compile)(`\`${n}\``,t);o.error=e.error,o.scopeNames=e.scopeNames,o.template=n,o.templateFunction=e.templateFunction}let a=e.firstChild;for(;a;){if(!r.filter||r.filter(a)){const e=this.compileDomNodeTemplate(a,t,{...r,ignoreComponents:r.ignoreNestedComponents});e&&i.push(e)}a=a.nextSibling}return o}evaluateCompiledDomNodeTemplate(e,t){const{domNode:r,error:s,templateFunction:n,scopeNames:i}=e;if(!n||!i)return null;if(s)return f.warn("Error occurred during compiling node content:",s),null;let o=null;try{o=n(...i.map((e=>t[e])))}catch(s){f.warn(`Error occurred when "${this.self._name}" is  running`,`"${String(n)}": with bound`,`names "${i.join('", "')}":`,`"${s}". Rendering node:`,r)}return o}evaluateDomNodeTemplate(e,t={},r={}){const s=(r={domNodeTemplateCache:this.domNodeTemplateCache,ignoreComponents:!0,ignoreNestedComponents:!0,unsafe:this.self.renderUnsafe,...r}).domNodeTemplateCache;if(!s.has(e)){const n={filter:r.filter,ignoreComponents:r.ignoreComponents,ignoreNestedComponents:r.ignoreNestedComponents,unsafe:r.unsafe},i=this.compileDomNodeTemplate(e,t,n);i&&s.set(e,i)}if(s.has(e)){const n=s.get(e),i=this.evaluateCompiledDomNodeTemplate(n,t);if(null!==i&&(r.unsafe&&e.innerHTML?e.innerHTML=i:e.textContent=i),n.children.length){const e=r=>{for(const s of r){const r=this.evaluateCompiledDomNodeTemplate(s,t);null!==r&&(s.domNode.textContent=r),s.children.length&&e(s.children)}};e(n.children)}}r.applyBindings&&this.applyBindings(e,t)}addSecureEventListener(e,t,r,s,n){this.domNodeEventBindings.has(e)||this.domNodeEventBindings.set(e,new Map);const i=this.domNodeEventBindings.get(e),o=i.get(t);o&&o!==r&&o();const a=()=>{e.removeEventListener(t,r,n),i.delete(t),0===i.size&&this.domNodeEventBindings.delete(e)};return i.set(t,a),e.addEventListener(t,r,s),a}determineRootBinding(){let t=this.parentNode;for(;t;){const r=t instanceof e||t.nodeName.includes("-")&&"#document-fragment"!==t.nodeName,s=null===t.parentNode&&"[object ShadowRoot]"===t.toString();r?(this.rootInstance===this&&(this.parentInstance=t,this.setPropertyValue("isRoot",!1)),this.rootInstance=t):s&&this.setPropertyValue("isRoot",!1),t=t.parentNode}}static hasCode(e){return"string"==typeof e&&e.includes("${")&&e.includes("}")&&/\${[\s\S]+}/.test(e)}static normalizePropertyTypeList(t){if("string"==typeof t&&(t=[t]),Array.isArray(t)){const r=t,s=new Map;for(const t of r)Object.prototype.hasOwnProperty.call(e.propertyTypes,t)&&s.set(t,e.propertyTypes[t]);return s}return(0,h.convertPlainObjectToMap)(t)}attachEventHandler(){if(null===this.self.eventToPropertyMapping)return;const e=this.attachExplicitDefinedOutputEventHandler();this.attachImplicitDefinedOutputEventHandler(!e)}attachExplicitDefinedOutputEventHandler(){if(!this.self.eventToPropertyMapping)return!1;let e=!1;for(const t of Object.keys(this.self.eventToPropertyMapping))Object.prototype.hasOwnProperty.call(this.internalProperties,t)||(e=!0,this.outputEventNames.add(t),this.setInternalPropertyValue(t,(async(...e)=>{const r=await this.reflectEventToProperties(t,e);r&&(e[0]=r),this.forwardEvent(t,e)})));return e}attachImplicitDefinedOutputEventHandler(e=!0){for(const[t,r]of Object.entries(this.self.propertyTypes))Object.prototype.hasOwnProperty.call(this.internalProperties,t)||![d.func,"function"].includes(r)||this.self.renderProperties.includes(t)||(this.outputEventNames.add(t),this.setInternalPropertyValue(t,((...r)=>{e&&this.reflectEventToProperties(t,r),this.forwardEvent(t,r)})))}triggerOutputEvents(){for(const e of this.outputEventNames)this.forwardEvent(e,[this.externalProperties])}forwardEvent(e,t){return e.length>3&&e.startsWith("on")&&(e=(0,h.lowerCase)(e.substring(2))),this.dispatchEvent(new CustomEvent(e,{detail:{parameters:t}}))}applySlots(t,r){for(const s of Array.from(t.querySelectorAll("slot"))){const t=s.getAttribute("name");if(null===t||"default"===t)if(this.slots.default){if(this.self.renderSlots){if(this.self.evaluateSlots)for(const e of this.slots.default)this.evaluateDomNodeTemplate(e,r);(0,h.replace)(s,this.slots.default,e.trimSlots)}}else this.slots.default=(0,h.unwrap)(s).map((e=>this.grabSlotContent(e)));else this.slots[t]?this.self.renderSlots&&(this.self.evaluateSlots&&this.evaluateDomNodeTemplate(this.slots[t],r),(0,h.replace)(s,this.slots[t],e.trimSlots)):this.slots[t]=this.grabSlotContent((0,h.unwrap)(s).filter((e=>"#text"!==e.nodeName.toLowerCase()))[0])}}grabSlotContent(e){const t=d.node.firstElementChild?e:null;if(t&&"textarea"===t.firstElementChild?.nodeName.toLowerCase()&&(!t.firstElementChild.hasAttribute("data-no-template")||"false"===t.firstElementChild.getAttribute("data-no-template"))){const e=t.firstElementChild.value;t.classList.remove("web-component-template");const r=t.cloneNode();return t.classList.add("web-component-template"),r.innerHTML="",r.template=e,r}return this.self.cloneSlots?e.cloneNode(!0):e}grabGivenSlots(){this.slots={};for(const e of Array.from(this.querySelectorAll("[slot]"))){let t=e.parentNode,r=!0;for(;t;){if(t.nodeName.includes("-")){t===this&&(r=!1);break}t=t.parentNode}if(r)continue;const s=e.getAttribute("slot")?.trim();this.slots[null!=s?s:e.nodeName.toLowerCase()]=this.grabSlotContent(e)}this.slots.default?this.slots.default=[].concat(this.slots.default):this.childNodes.length>0?this.slots.default=Array.from(this.childNodes).map((e=>this.grabSlotContent(e))):this.slots.default=[]}isStateProperty(e){return Boolean(this.instance?.current?.state&&(Object.prototype.hasOwnProperty.call(this.instance.current.state,e)||this.instance.current.state.modelState&&Object.prototype.hasOwnProperty.call(this.instance.current.state.modelState,e)))}generateAliasIndex(){if(!this.self._propertyAliasIndex){this.self._propertyAliasIndex={...this.self.propertyAliases};for(const[e,t]of Object.entries(this.self._propertyAliasIndex))Object.prototype.hasOwnProperty.call(this.self._propertyAliasIndex,t)||(this.self._propertyAliasIndex[t]=e)}}reflectExternalProperties(e){this.ignoreAttributeUpdateObservations=!0;for(const[t,r]of Object.entries(e)){if(this.setExternalPropertyValue(t,r),!this.isConnected)continue;const e=(0,h.camelCaseToDelimited)(t);if(this.self._propertiesToReflectAsAttributes?.has(t))switch(this.self._propertiesToReflectAsAttributes.get(t)){case d.boolean:case"boolean":r?""!==this.getAttribute(e)&&this.setAttribute(e,""):this.hasAttribute(e)&&this.removeAttribute(e);break;case d.func:case"function":break;case"json":if(r){const t=JSON.stringify(r);if(t&&this.getAttribute(e)!==t){this.setAttribute(e,t);break}}this.hasAttribute(e)&&this.removeAttribute(e);break;case d.number:case"number":if("number"!=typeof r||isNaN(r))this.hasAttribute(e)&&this.removeAttribute(e);else{const t=String(r);this.getAttribute(e)!==t&&this.setAttribute(e,t)}break;case d.string:case"string":r?this.getAttribute(e)!==r&&this.setAttribute(e,r):this.hasAttribute(e)&&this.removeAttribute(e);break;case d.any:case d.array:case d.arrayOf:case d.element:case d.elementType:case d.instanceOf:case d.node:case d.object:case"object":case d.objectOf:case d.shape:case d.exact:case d.symbol:default:if(r){const t=(0,h.represent)(r);if(t&&this.getAttribute(e)!==t){this.setAttribute(e,t);break}}this.hasAttribute(e)&&this.removeAttribute(e)}}this.ignoreAttributeUpdateObservations=!1}reflectProperties(e){if(this.reflectExternalProperties(e),this.instance?.current?.state&&"object"==typeof this.instance.current.state)for(const e of Object.keys(this.instance.current.state).concat(this.instance.current.state.modelState?Object.keys(this.instance.current.state.modelState):[]))Object.prototype.hasOwnProperty.call(this.internalProperties,e)&&this.setInternalPropertyValue(e,void 0);this.internalProperties.model?.state&&(delete this.internalProperties.model.state,this.setInternalPropertyValue("model",this.internalProperties.model));for(const t of this.self.controllableProperties)Object.prototype.hasOwnProperty.call(e,t)&&this.setInternalPropertyValue(t,e[t])}async reflectEventToProperties(e,t){const r=this.batchUpdates;this.batchUpdates=!1;let s=null,n=!1;if(this.self.eventToPropertyMapping&&Object.prototype.hasOwnProperty.call(this.self.eventToPropertyMapping,e)&&(0,h.isFunction)(this.self.eventToPropertyMapping[e])){const r=this.self.eventToPropertyMapping[e](...t,this),i=r&&"then"in r&&(0,h.isFunction)(r.then)?await r:r;n=!0,Array.isArray(i)?(s=i[0],this.reflectProperties(s),(0,h.extend)(!0,this.internalProperties,i[1])):null===i?n=!1:"object"==typeof i&&(s=i,this.reflectProperties(i))}if(!n&&t.length>0&&(0,h.isObject)(t[0])){let e=t[0];if("persist"in t[0]&&(0,h.isFunction)(t[0].persist)){e={};for(const r of Object.keys(this.self.propertyTypes))for(const s of[r].concat(null!==(i=this.getPropertyAlias(r))&&void 0!==i?i:[])){var i;const r=t[0].currentTarget&&Object.prototype.hasOwnProperty.call(t[0].currentTarget,s)?t[0].currentTarget[s]:this.getPropertyValue(s);r!==this.externalProperties[s]&&(e[s]=r)}}else[null,void 0].includes(e.detail?.value)||(e={...e.detail});s=e,this.reflectProperties(e)}return this.triggerRender("propertyReflected"),this.batchUpdates=r,s}evaluateStringOrNullAndSetAsProperty(e,t){const r=e.startsWith("-"),s=r?e.substring(1):e;let n=(0,h.delimitedToCamelCase)(s);const i=this.getPropertyAlias(n);if(i&&Object.prototype.hasOwnProperty.call(this.self.propertyTypes,i)&&(n=i),Object.prototype.hasOwnProperty.call(this.self.propertyTypes,n)){const s=this.self.propertyTypes[n];if(r){if(t){const r=(0,h.evaluate)(t,{...h.UTILITY_SCOPE},!1,!0,this);r.error?(f.warn("Failed to process pre-evaluation attribute",`"${e}": ${r.error}. Will be`,'set to "undefined".'),this.setInternalPropertyValue(n,void 0)):(this.setInternalPropertyValue(n,r.result),this.setExternalPropertyValue(n,r.result))}}else switch(s){case d.boolean:case"boolean":{const e=![null,"false"].includes(t);this.setInternalPropertyValue(n,e),this.setExternalPropertyValue(n,e);break}case d.func:case"function":{let r,s=null;const i=["data","event","firstArgument","firstParameter","options"];if(t){const n=(0,h.compile)(t,i.concat("parameters","scope",h.UTILITY_SCOPE_NAMES),!0,!0,this);s=n.error,r=n.templateFunction,s&&f.warn("Failed to compile given handler",`"${e}": ${s}.`)}this.setInternalPropertyValue(n,((...o)=>{let a;if(this.outputEventNames.has(n)&&this.reflectEventToProperties(n,o),!s){const s={parameters:o,...h.UTILITY_SCOPE};for(const e of i)s[e]=o[0];try{a=r?.(...i.map((e=>s[e])),o,s,...h.UTILITY_SCOPE_NAMES.map((e=>h.UTILITY_SCOPE[e])))}catch(r){f.warn("Failed to evaluate function",`"${e}" with expression`,`"${t}" and scope`,"variables",`"${i.join('", "')}" set to`,`"${(0,h.represent)(o)}":`,`${r}. Set property`,'to "undefined".')}}return this.self.renderProperties.includes(n)||this.forwardEvent(n,o),a})),s||this.setExternalPropertyValue(n,r);break}case"json":if(t){let r;try{r=JSON.parse(t)}catch(t){f.warn("Error occurred during parsing given json",`attribute "${e}":`,(0,h.represent)(t));break}this.setInternalPropertyValue(n,r),this.setExternalPropertyValue(n,(0,h.copy)(r,!1,1))}else this.setInternalPropertyValue(n,null),this.setExternalPropertyValue(n,null);break;case d.number:case"number":{if(null===t){this.setInternalPropertyValue(n,t),this.setExternalPropertyValue(n,t);break}let e=parseFloat(t);isNaN(e)&&(e=void 0),this.setInternalPropertyValue(n,e),this.setExternalPropertyValue(n,e);break}case d.string:case"string":this.setInternalPropertyValue(n,t),this.setExternalPropertyValue(n,t);break;case d.any:case d.array:case d.arrayOf:case d.element:case d.elementType:case d.instanceOf:case d.node:case d.object:case"object":case d.objectOf:case d.oneOf:case d.oneOfType:case d.shape:case d.exact:case d.symbol:default:if(t){const r=(0,h.evaluate)(t,{},!1,!0,this);if(r.error){f.warn("Error occurred during processing given",`attribute configuration "${e}":`,r.error);break}this.setInternalPropertyValue(n,r.result),this.setExternalPropertyValue(n,(0,h.copy)(r.result,!1,1))}else this.hasAttribute(e)?(this.setInternalPropertyValue(n,!0),this.setExternalPropertyValue(n,!0)):(this.setInternalPropertyValue(n,null),this.setExternalPropertyValue(n,null))}}}async waitForNestedComponentRendering(){this.childComponentInstances&&await Promise.all(this.childComponentInstances.map((e=>e.renderState.pending?e.renderState.promise:Promise.resolve())))}async resolveRenderingPromiseIfSet(e,t){t&&(await this.waitForNestedComponentRendering(),this.renderState.pending=!1,this.renderState.resolve(e),this.prepareNewRenderingPromise())}prepareNewRenderingPromise(){this.renderState.pending||(this.renderState.promise=new Promise((e=>{this.renderState.resolve=t=>{this.renderState.pending=!1,e(t)}})))}triggerRender(e){this.batchUpdates?this.batchedUpdateRunning||(this.batchedUpdateRunning=!0,(0,h.timeout)((()=>{this.batchedUpdateRunning=!1,this.render(e)}))):this.render(e)}applyShadowRootIfNotExisting(){this.self.shadowDOM&&this.hostDomNode===this&&(this.hostDomNode=(!("attachShadow"in this)&&"ShadyDOM"in window?window.ShadyDOM.wrap(this):this).attachShadow((0,h.isObject)(this.self.shadowDOM)?this.self.shadowDOM:{mode:"open"}))}determineRenderScope(e={}){this.scope={...this.parentInstance?.scope||{},...this.scope,...this.internalProperties,parentInstance:this.parentInstance,rootInstance:this.rootInstance,self:this,[(0,h.lowerCase)(this.self._name)||"instance"]:this,...e},this.scope.scope=this.scope}async render(e="unknown",t=!0){if(this.unRender("reRender",e),this.childComponentInstances=[],this.renderState.pending=!0,this.isRoot&&(await this.resolveRenderingPromiseIfSet(e,t),t&&(await Promise.all(this.self.pendingRenderPromises),this.self.pendingRenderPromises=[])),this.self.pendingRenderPromises.push(this.renderState.promise),this.determineRenderScope(),!this.self.doRender||!this.dispatchEvent(new CustomEvent("render",{detail:{reason:e,scope:this.scope}})))return void await this.resolveRenderingPromiseIfSet(e,t);const r=(0,h.evaluate)(`\`${this.self.content}\``,this.scope);if(r.error)return f.warn(`Failed to process template: ${r.error}`),this.renderState.resolve(e),void await Promise.all(this.self.pendingRenderPromises);this.applyShadowRootIfNotExisting();const s=document.createElement("div");s.innerHTML=r.result,this.applySlots(s,{...this.scope,parentInstance:this}),this.hostDomNode.innerHTML=s.innerHTML,await(0,h.timeout)(),this.waitForNestedComponentRendering().then((()=>{this.applyBindings(this.hostDomNode.firstChild,this.scope,this.self.renderSlots)})),await this.resolveRenderingPromiseIfSet(e,t)}unRender(e="unknown",t){this.unregisterDomNodeEventBindings()}},o.applyRootBinding=!0,o.pendingRenderPromises=[],o.content="<slot>Please provide a template to transclude.</slot>",o.determineRootBinding=!0,o.shadowDOM=null,o.observedAttributes=[],o.controllableProperties=[],o.eventToPropertyMapping={},o.propertyAliases={},o.propertyTypes={onClick:d.func},o.propertiesToReflectAsAttributes=[],o.renderProperties=["children"],o.doRender=!1,o.cloneSlots=!1,o.evaluateSlots=!1,o.renderSlots=!0,o.trimSlots=!0,o.renderUnsafe=!1,o._name="BaseWeb",o._propertyAliasIndex=void 0,o._propertiesToReflectAsAttributes=void 0,n=o,i=c()(n.prototype,"isRoot",[s],{configurable:!0,enumerable:!0,writable:!0,initializer:function(){return!0}}),n);const b={component:y,register:(e=(0,h.camelCaseToDelimited)(y._name))=>{customElements.define(e,y)}},g=y},e=>{e.exports=i},e=>{e.exports=o},e=>{e.exports=a},e=>{e.exports=r},(e,t,r)=>{r.d(t,{api:()=>d,default:()=>u});var s=r(0),n=r(1),i=r(7),o=r.n(i),a=r(9),p=r(10),l=r(3);const c=new s.Logger({name:"web-component-wrapper-web"});class h extends l.default{constructor(...e){super(...e),this.unmountOnDisconnect=!0,this.compiledSlots={},this.preparedSlots={},this.reactRoot=null,this.rootReactInstance=null,this.self=h,this.wrapMemorizingWrapper=null,this.isWrapped=!1,this.reflectInstanceProperties=()=>{this.instance?.current&&this.instance.current.properties&&this.reflectProperties(this.instance.current.properties)}}connectedCallback(){this.applyComponentWrapper(),this.rootReactInstance=this,super.connectedCallback()}disconnectedCallback(){this.unRender("disconnected"),this.unmountOnDisconnect&&this.reactRoot?.unmount(),this.unregisterConnectionState()}reflectExternalProperties(e){this.isRoot&&super.reflectExternalProperties(e)}async render(e="unknown",t=!0){if(super.unRender("reRender",e),this.childComponentInstances=[],this.renderState.pending=!0,this.isRoot&&(this.self.pendingRenderPromises=[]),this.self.pendingRenderPromises.push(this.renderState.promise),this.rootReactInstance!==this||!this.dispatchEvent(new CustomEvent("render",{detail:{reason:e,scope:this.scope}})))return this.resolveRenderingPromiseIfSet(e,t);if(this.determineRenderScope(),0===Object.keys(this.compiledSlots).length&&this.preCompileSlots(),this.evaluateSlots({...this.scope,parentInstance:this}),this.prepareProperties(this.internalProperties),this.applyShadowRootIfNotExisting(),this.rootInstance!==this&&!this.reactRoot){let e=this.firstChild;for(;e;){const t=e.nextSibling;this.removeChild(e),e=t}}if(!this.reactRoot){const e=this.id||this.internalProperties.id||this.externalProperties.id||this.name||this.internalProperties.name||this.externalProperties.name;let t="";"string"==typeof e&&(t=e),this.reactRoot=(0,p.createRoot)(this.hostDomNode,{identifierPrefix:t})}(0,a.flushSync)((()=>{this.reactRoot?.render((0,i.createElement)(this.self.content,this.internalProperties)),this.resolveRenderingPromiseIfSet(e,t)})),t&&await this.renderState.promise}setPropertyValue(e,t){this.reflectProperties({[e]:(0,s.copy)(t,!1,1)}),this.setInternalPropertyValue(e,(0,s.copy)(t,!1,1))}setInternalPropertyValue(e,t){null===t?t=n.NullSymbol:void 0===t&&(t=n.UndefinedSymbol),super.setInternalPropertyValue(e,t)}preCompileDomNodes(e,t={},r=!1){if(1===(e=e.filter((e=>e.nodeType!==Node.TEXT_NODE||"string"==typeof e.nodeValue&&""!==e.nodeValue.trim()))).length)return this.preCompileDomNode(e[0],t,r);let s=1;const n=[];for(const i of e){const e=this.preCompileDomNode(i,t,r,s.toString());n.push(e),s+=1}return r?e=>(...t)=>{const r=[];for(const s of n){const n=s(e);"function"==typeof n&&r.push(n(...t))}return(0,i.createElement)(i.Fragment,{children:r})}:n}preCompileDomNode(e,t={},r=!1,n){if(r){const r=this.preCompileDomNode(e,{...t,data:void 0,firstArgument:void 0,firstParameter:void 0,options:void 0,scope:void 0,parameters:void 0},!1,n);return e=>(...t)=>{const s=t.length>0?t[0]:null;return r({...e,data:s,firstArgument:s,firstParameter:s,options:s,scope:s,parameters:t})}}if(e.nodeType===Node.TEXT_NODE){const t="string"==typeof e.nodeValue?e.nodeValue.trim():"",r=n&&t?(0,i.createElement)(i.Fragment,{children:t,key:n}):t||null;return()=>r}if(!e.getAttributeNames)return()=>null;const o={};let a;const p=this.self.isReactComponent(e);p?(e.determineRenderScope(),0===Object.keys(this.compiledSlots).length&&e.preCompileSlots(),n&&!Object.prototype.hasOwnProperty.call(o,"key")&&(o.key=n),a=e.constructor.content):(o.key=n,a=e.tagName.toLowerCase());let l=Object.keys(t);const h={};for(const r of e.getAttributeNames()){let n=e.getAttribute(r);if(null===n)continue;let i=!1,a="";if(r.startsWith("data-bind-")?a=r.substring(10):r.startsWith("bind-")&&(a=r.substring(5)),a.startsWith("attribute-")||"attributes"===a||a.startsWith("property-")||"properties"===a){const{error:t,originalScopeNames:o,templateFunction:p}=(0,s.compile)(n,l);if(t){c.warn("Error occurred during compiling given attribute",`binding "${r}" on node:`,e,t);continue}"attributes"===a||"properties"===a?i=!0:a=a.startsWith("attribute-")?a.substring(10):a.substring(9),n={originalScopeNames:o,templateFunction:p.bind(this)}}else if(a.startsWith("on-")){a=(0,s.delimitedToCamelCase)(a),Object.prototype.hasOwnProperty.call(t,"event")||(l=[...l,"event"]),Object.prototype.hasOwnProperty.call(t,"parameters")||(l=[...l,"parameters"]);const{error:i,originalScopeNames:o,scopeNames:p,templateFunction:h}=(0,s.compile)(n,l,!0);if(i){c.warn("Error occurred during compiling given event",`binding "${r}" on node:`,e,i);continue}const d=h.bind(this);n=(...i)=>{t.event=i[0],t.parameters=i;try{d(...o.map((e=>t[e])))}catch(t){c.warn("Error occurred during processing given",`event binding "${r}" on node: `,e,`Given expression "${n}" could`,"not be evaluated with given scope names",`"${p.join('", "')}":`,(0,s.represent)(t))}}}else a=r;const d={class:"className",for:"htmlFor"};Object.prototype.hasOwnProperty.call(d,a)&&(a=d[a]),a=(0,s.delimitedToCamelCase)(a),n?.originalScopeNames?h[i?"":a]=n:p||(o[a]=n)}if(!p){const r=Array.from(e.childNodes);r.length&&(o.children=this.preCompileDomNodes(r,t))}return r=>{(r={...t,...r}).scope=r;let s={...o};for(const[e,{originalScopeNames:t,templateFunction:n}]of Object.entries(h)){const i=n(...t.map((e=>r[e])));""===e?s={...s,...i}:s[e]=i}return Object.prototype.hasOwnProperty.call(s,"innerHTML")&&(s.dangerouslySetInnerHTML={__html:s.innerHTML},delete s.children,delete s.innerHTML),Object.prototype.hasOwnProperty.call(s,"textContent")?(s.children=s.textContent,delete s.textContent):p?(s={...e.internalProperties,...s},r={...s,...r,parentInstance:e},e.evaluateSlots(r),e.prepareProperties(s)):s.children&&(s.children=this.evaluatePreCompiledDomNodes(s.children,r)),(0,i.createElement)(a,s)}}evaluatePreCompiledDomNodes(e,t={}){if(!Array.isArray(e))return e(t);if(1===e.length)return e[0](t);const r=[];for(const s of e){const e=s(t);e&&r.push(e)}return r}preCompileSlots(){for(const e in this.slots)this.slots[e]&&"default"!==e&&(this.compiledSlots[e]=this.preCompileDomNode(this.slots[e],{...this.scope,parentInstance:this},[n.func,"function"].includes(this.self.propertyTypes[e])));this.slots.default&&this.slots.default.length>0&&(this.compiledSlots.children=this.preCompileDomNodes(this.slots.default,{...this.scope,parentInstance:this},[n.func,"function"].includes(this.self.propertyTypes.children)))}evaluateSlots(e){this.preparedSlots={};for(const t in this.compiledSlots)Object.prototype.hasOwnProperty.call(this.compiledSlots,t)&&("children"===t?this.preparedSlots.children=this.evaluatePreCompiledDomNodes(this.compiledSlots[t],e):this.preparedSlots[t]=this.compiledSlots[t](e))}static isReactComponent(e){const t=e.constructor;return"object"==typeof t.content&&(!t.attachWebComponentAdapterIfNotExists||"react"===t.content.webComponentAdapterWrapped)}determineRootBinding(){super.determineRootBinding();let e=this.parentNode;for(;e;){if(this.self.isReactComponent(e)){this.rootReactInstance=e;break}e=e.parentNode}}applyComponentWrapper(){if("string"==typeof this.self.content||this.isWrapped)return;this.isWrapped=!0;const e=this.self.content.wrapped||this.self.content;this.self.content.webComponentAdapterWrapped?this.wrapMemorizingWrapper&&(this.self.content=(0,i.memo)(this.self.content),this.self.content.wrapped=e):this.self.attachWebComponentAdapterIfNotExists?(this.self.content.displayName||(this.self.content.displayName=this.self._name),this.self.content=(0,i.forwardRef)(((t,r)=>((0,i.useImperativeHandle)(r,(()=>({properties:t})),[t]),(0,i.createElement)(e,t)))),(this.wrapMemorizingWrapper||null===this.wrapMemorizingWrapper)&&(this.self.content=(0,i.memo)(this.self.content)),this.self.content.wrapped=e,this.self.content.webComponentAdapterWrapped="react"):this.wrapMemorizingWrapper&&(this.self.content=(0,i.memo)(this.self.content),this.self.content.wrapped=e)}prepareProperties(e){(0,s.extend)(e,this.preparedSlots),this.self.removeKnownUnwantedPropertyKeys(this.self,e),e.ref||(this.instance=(0,i.createRef)(),e.ref=e=>{this.instance?this.instance.current=e:this.instance={current:e},this.reflectInstanceProperties()})}static removeKnownUnwantedPropertyKeys(e,t){if("string"!=typeof e.content)for(const r of["isRoot","isTrusted","__composed"])Object.prototype.hasOwnProperty.call(t,r)&&(Object.prototype.hasOwnProperty.call(e.content,"propTypes")&&!Object.prototype.hasOwnProperty.call(e.content.propTypes,r)||Object.prototype.hasOwnProperty.call(e.content,"wrapped")&&Object.prototype.hasOwnProperty.call(e.content.wrapped,"propTypes")&&!Object.prototype.hasOwnProperty.call(e.content.wrapped.propTypes,r))&&delete t[r]}}h.attachWebComponentAdapterIfNotExists=!0,h.content="div",h.react=o(),h._name="ReactWebComponent";const d={component:h,register:(e=(0,s.camelCaseToDelimited)(h._name))=>{customElements.define(e,h)}},u=h},e=>{e.exports=s},e=>{e.exports=n}],l={};function c(e){var t=l[e];if(void 0!==t)return t.exports;var r=l[e]={exports:{}};return p[e](r,r.exports,c),r.exports}c.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return c.d(t,{a:t}),t},c.d=(e,t)=>{for(var r in t)c.o(t,r)&&!c.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},c.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),c.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var h={};c.r(h),c.d(h,{ReactWeb:()=>b,Web:()=>v,default:()=>w,property:()=>y,reactWebAPI:()=>g,webAPI:()=>P,wrapAsWebComponent:()=>A});var d=c(0),u=c(2),f=c(8),m=c(3);const y=u.default,b=f.default,g=f.api,P=m.api,v=m.default,A=(e,t="NoName",r={})=>{var s,n;const i=e._name||e.___types?.name?.name||t.replace(/^(.*\/+)?([^/]+)\.tsx$/,"$2");r.propTypes&&(e.propTypes=r.propTypes);const o=e.propTypes||{},a=r.propertyAliases||e.propertyAliases||{},p=(0,d.unique)(Object.keys(o).concat(Object.keys(a)).concat(Object.values(a)));let l=r.propertiesToReflectAsAttributes||e.propertiesToReflectAsAttributes||[];if(b.propertiesToReflectAsAttributes)if(Array.isArray(l))l=[...b.propertiesToReflectAsAttributes,...l];else if(l instanceof Map)for(const e of b.propertiesToReflectAsAttributes)l.set(e,b.propertyTypes[e]);else if("object"==typeof l)for(const e of b.propertiesToReflectAsAttributes)l[e]=b.propertyTypes[e];const c=p.map((e=>(0,d.camelCaseToDelimited)(e)));class h extends b{constructor(...t){var s;super(...t),this.self=h,this.internalProperties=r.internalProperties?{...r.internalProperties}:e.internalProperties?{...e.internalProperties}:{},this.unmountOnDisconnect=null===(s=r.unmountOnDisconnect)||void 0===s||s}}h.attachWebComponentAdapterIfNotExists="boolean"!=typeof r.attachWebComponentAdapterIfNotExists||r.attachWebComponentAdapterIfNotExists,h.content=e,h.observedAttributes=b.observedAttributes.concat(c).concat(c.map((e=>`-${e}`))),h.controllableProperties=e.controllableProperties||r.controllableProperties||[],h.eventToPropertyMapping=null===r.eventToPropertyMapping?r.eventToPropertyMapping:r.eventToPropertyMapping?{...r.eventToPropertyMapping}:null===e.eventToPropertyMapping?e.eventToPropertyMapping:e.eventToPropertyMapping?{...e.eventToPropertyMapping}:{},h.propertyAliases={...b.propertyAliases,...a},h.propertiesToReflectAsAttributes=l,h.propertyTypes={...b.propertyTypes,...o},h.renderProperties=null!==(s=null!==(n=r.renderProperties)&&void 0!==n?n:e.renderProperties)&&void 0!==s?s:b.renderProperties,h._name=i;return{component:h,register:(e=(0,d.camelCaseToDelimited)(i))=>{customElements.define(e,h)}}},w=A;return h})()));

package/dist/test.js

@@ -0,0 +1 @@
+"use strict";if("undefined"!=typeof module&&null!==module&&"undefined"!==eval("typeof require")&&null!==eval("require")&&"main"in eval("require")&&"undefined"!==eval("typeof require.main")&&null!==eval("require.main")){var ORIGINAL_MAIN_MODULE=module;module!==eval("require.main")&&"paths"in module&&"paths"in eval("require.main")&&"undefined"!=typeof __dirname&&null!==__dirname&&(module.paths=eval("require.main.paths").concat(module.paths.filter((function(path){return eval("require.main.paths").includes(path)}))))}if(null==window)var window="undefined"==typeof global||null===global?{}:global;!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("clientnode"),require("clientnode/property-types"),require("react"),require("@jest/globals"),require("react-dom"),require("react-dom/client"),require("@babel/runtime/helpers/initializerDefineProperty"),require("@babel/runtime/helpers/applyDecoratedDescriptor"),require("@babel/runtime/helpers/initializerWarningHelper"));else if("function"==typeof define&&define.amd)define(["clientnode","clientnode/property-types","react","@jest/globals","react-dom","react-dom/client","@babel/runtime/helpers/initializerDefineProperty","@babel/runtime/helpers/applyDecoratedDescriptor","@babel/runtime/helpers/initializerWarningHelper"],t);else{var r="object"==typeof exports?t(require("clientnode"),require("clientnode/property-types"),require("react"),require("@jest/globals"),require("react-dom"),require("react-dom/client"),require("@babel/runtime/helpers/initializerDefineProperty"),require("@babel/runtime/helpers/applyDecoratedDescriptor"),require("@babel/runtime/helpers/initializerWarningHelper")):t(e.clientnode,e["clientnode/property-types"],e.react,e["@jest/globals"],e["react-dom"],e["react-dom/client"],e["@babel/runtime/helpers/initializerDefineProperty"],e["@babel/runtime/helpers/applyDecoratedDescriptor"],e["@babel/runtime/helpers/initializerWarningHelper"]);for(var s in r)("object"==typeof exports?exports:e)[s]=r[s]}}(this,((e,t,r,s,n,o,i,a,p)=>(()=>{var l=[t=>{t.exports=e},e=>{e.exports=t},(e,t,r)=>{r.d(t,{default:()=>o});var s=r(0),n=r(1);const o=function(e={}){return e={readAttribute:!0,type:n.string,...e},function(t,r){if("string"!=typeof r)return;const n=t.self||t.constructor;if(e.readAttribute){Object.prototype.hasOwnProperty.call(n,"observedAttributes")||(n.observedAttributes=n.observedAttributes?[...n.observedAttributes]:[]);const e=(0,s.camelCaseToDelimited)(r);n.observedAttributes&&!n.observedAttributes.includes(e)&&n.observedAttributes.push(e)}if(e.type&&(Object.prototype.hasOwnProperty.call(n,"propertyTypes")||(n.propertyTypes=n.propertyTypes?{...n.propertyTypes}:{}),!n.propertyTypes||!e.update&&Object.prototype.hasOwnProperty.call(n,r)||(n.propertyTypes[r]=e.type)),e.writeAttribute&&(Object.prototype.hasOwnProperty.call(n,"propertiesToReflectAsAttributes")||(n.propertiesToReflectAsAttributes=n.propertiesToReflectAsAttributes?(0,s.copy)(n.propertiesToReflectAsAttributes):[]),e.update||n.propertiesToReflectAsAttributes instanceof Map&&!n.propertiesToReflectAsAttributes.has(r)||Array.isArray(n.propertiesToReflectAsAttributes)&&!n.propertiesToReflectAsAttributes.includes(r)||"object"==typeof n.propertiesToReflectAsAttributes&&!Object.prototype.hasOwnProperty.call(n.propertiesToReflectAsAttributes,r))){let t;"boolean"==typeof e.writeAttribute?e.writeAttribute&&n.propertyTypes&&Object.prototype.hasOwnProperty.call(n.propertyTypes,r)&&(t=n.propertyTypes[r]):t=e.writeAttribute,void 0!==t&&(Array.isArray(n.propertiesToReflectAsAttributes)&&(!0===e.writeAttribute?n.propertiesToReflectAsAttributes.push(r):n.normalizePropertyTypeList&&(n.propertiesToReflectAsAttributes=n.normalizePropertyTypeList(n.propertiesToReflectAsAttributes))),n.propertiesToReflectAsAttributes instanceof Map&&n.propertiesToReflectAsAttributes.set(r,t),"object"==typeof n.propertiesToReflectAsAttributes&&(n.propertiesToReflectAsAttributes[r]=t))}e.alias&&(Object.prototype.hasOwnProperty.call(n,"propertyAliases")||(n.propertyAliases=n.propertyAliases?{...n.propertyAliases}:{}),!n.propertyAliases||!e.update&&Object.prototype.hasOwnProperty.call(n,r)||(n.propertyAliases[r]=e.alias))}}},(e,t,r)=>{r.d(t,{default:()=>b});var s,n,o,i,a=r(4),p=r.n(a),l=r(5),c=r.n(l),d=(r(6),r(0)),h=r(1),u=r(2);const f=new d.Logger({name:"web-component-wrapper-web"}),m="undefined"==typeof HTMLElement?class{}:HTMLElement;let y=(s=(0,u.default)({type:h.boolean,writeAttribute:!0}),i=class e extends m{constructor(){super(),this.renderState={promise:Promise.resolve(""),pending:!1,resolve:d.NOOP},this.childComponentInstances=[],this.batchAttributeUpdates=!0,this.batchPropertyUpdates=!0,this.batchUpdates=!0,this.batchedAttributeUpdateRunning=!0,this.batchedPropertyUpdateRunning=!0,this.batchedUpdateRunning=!0,this.connectionRegistered=!1,this.pendingAttributeUpdates=[],this.parentInstance=null,this.rootInstance=void 0,this.hostDomNode=void 0,this.scope={...d.UTILITY_SCOPE},this.domNodeEventBindings=new Map,this.domNodeTemplateCache=new Map,this.externalProperties={},this.ignoreAttributeUpdateObservations=!1,this.internalProperties={},this.outputEventNames=new Set,this.instance=null,p()(this,"isRoot",o,this),this.runDomConnectionAndRenderingInSameEventQueue=!1,this.self=e,this.slots={},this.prepareNewRenderingPromise(),this.self=this.constructor,this.self._propertiesToReflectAsAttributes||(this.self._propertiesToReflectAsAttributes=this.self.normalizePropertyTypeList(this.self.propertiesToReflectAsAttributes)),this.generateAliasIndex(),this.hostDomNode=this,this.rootInstance=this,this.defineGetterAndSetterInterface()}attributeChangedCallback(e,t,r){this.ignoreAttributeUpdateObservations||t===r||this.onUpdateAttribute(e,r)}onUpdateAttribute(e,t){const r=new Promise((r=>this.pendingAttributeUpdates.push((()=>{this.evaluateStringOrNullAndSetAsProperty(e,t),this.batchAttributeUpdates?this.batchedAttributeUpdateRunning||this.batchedUpdateRunning||(this.batchedAttributeUpdateRunning=!0,this.batchedUpdateRunning=!0,(0,d.timeout)((()=>{this.batchedAttributeUpdateRunning=!1,this.batchedUpdateRunning=!1,this.render("attributeChanged")}))):this.render("attributeChanged"),r()}))));if(this.connectionRegistered)for(;this.pendingAttributeUpdates.length;)this.pendingAttributeUpdates.shift()();return r}connectedCallback(){try{this.isConnected=!0}catch{}for(this.connectionRegistered=!0,this.parentInstance=this,this.rootInstance=this,this.attachEventHandler(),this.self.determineRootBinding&&(this.determineRootBinding(),this.parentInstance!==this&&this.parentInstance.childComponentInstances&&this.parentInstance.childComponentInstances.push(this)),this.self.applyRootBinding&&this.isRoot&&(this.determineRenderScope(),this.applyBinding(this,this.scope));this.pendingAttributeUpdates.length;)this.pendingAttributeUpdates.shift()();this.batchedAttributeUpdateRunning=!1,this.batchedPropertyUpdateRunning=!1,this.batchedUpdateRunning=!1,this.grabGivenSlots(),this.reflectExternalProperties(this.externalProperties),this.runDomConnectionAndRenderingInSameEventQueue?this.render("connected"):(0,d.timeout)((()=>{this.render("connected")}))}disconnectedCallback(){this.unRender("disconnected"),this.unregisterConnectionState()}defineGetterAndSetterInterface(){const e=(0,d.unique)(Object.keys(this.self.propertyTypes).concat(this.self._propertyAliasIndex?Object.keys(this.self._propertyAliasIndex):[]));for(const t of e)Object.prototype.hasOwnProperty.call(this,t)&&this.setPropertyValue(t,this[t]),Object.defineProperty(this,t,{configurable:!0,get:()=>this.getPropertyValue(t),set:e=>{this.setPropertyValue(t,e),this.triggerPropertySpecificRendering(t,e)}})}getPropertyAlias(e){return this.self._propertyAliasIndex&&Object.prototype.hasOwnProperty.call(this.self._propertyAliasIndex,e)?this.self._propertyAliasIndex[e]:null}getPropertyValue(t){var r;const s=this.instance?.current?.properties&&(Object.prototype.hasOwnProperty.call(!e.propertyTypes,t)||Object.prototype.hasOwnProperty.call(this.instance.current.properties,t))?this.instance.current.properties[t]:null!==(r=this.internalProperties[t])&&void 0!==r?r:this.externalProperties[t];return this.instance?.current?.state&&Object.prototype.hasOwnProperty.call(this.instance.current.state,t)?this.instance.current.state[t]:s}setExternalPropertyValue(e,t){this.externalProperties[e]=t;const r=this.getPropertyAlias(e);r&&(this.externalProperties[r]=t)}setInternalPropertyValue(e,t){this.internalProperties[e]=t;const r=this.getPropertyAlias(e);r&&(this.internalProperties[r]=t)}setPropertyValue(e,t){this.reflectProperties({[e]:t}),this.setInternalPropertyValue(e,t)}triggerPropertySpecificRendering(e,t){if(this.batchPropertyUpdates)this.batchedPropertyUpdateRunning||this.batchedUpdateRunning||(this.batchedPropertyUpdateRunning=!0,this.batchedUpdateRunning=!0,(0,d.timeout)((()=>{void 0!==t&&this.isStateProperty(e)?(this.render("preStatePropertyChanged"),(0,d.timeout)((()=>{this.setInternalPropertyValue(e,void 0),this.batchedPropertyUpdateRunning=!1,this.batchedUpdateRunning=!1,this.render("postStatePropertyChanged"),this.triggerOutputEvents()}))):(this.batchedPropertyUpdateRunning=!1,this.batchedUpdateRunning=!1,this.render("propertyChanged"),this.triggerOutputEvents())})));else{const r=this.isStateProperty(e);this.render(r?"preStatePropertyChanged":"propertyChanged"),void 0!==t&&r&&(this.setInternalPropertyValue(e,void 0),this.render("postStatePropertyChanged")),this.triggerOutputEvents()}}unregisterConnectionState(){try{this.isConnected=!1}catch{}this.connectionRegistered=!1,this.slots={}}unregisterDomNodeEventBindings(){for(const e of this.domNodeEventBindings.values())for(const t of e.values())t()}applyBinding(e,t){if(e.getAttributeNames)for(const r of e.getAttributeNames()){let s;if(r.startsWith("data-bind-")?s=r.substring(10):r.startsWith("bind-")&&(s=r.substring(5)),s){const n=e.getAttribute(r);if(null===n)continue;if(s.startsWith("attribute-")||s.startsWith("property-")){const o=(0,d.evaluate)(n,t,!1,!0,e);if(o.error){f.warn("Error occurred during processing given",`attribute binding "${r}" on node:`,e,o.error);continue}s.startsWith("attribute-")?e.setAttribute(s.substring(10),o.result):e[(0,d.delimitedToCamelCase)(s.substring(9))]=o.result}else if(s.startsWith("on-")){s=(0,d.delimitedToCamelCase)(s.substring(3)),t={log:f,event:void 0,parameters:void 0,...t};const o=(0,d.compile)(n,t,!0,!0,e);o.error?f.warn("Error occurred during compiling given event",`binding "${r}" on node:`,e,o.error):this.addSecureEventListener(e,s,((...s)=>{t.event=s[0],t.parameters=s;try{o.templateFunction(...o.originalScopeNames.map((e=>t[e])))}catch(t){f.warn("Error occurred during processing","given event binding",`"${r}" on node:`,e,`Given expression "${n}" could`,"not be evaluated with given scope",'names "'+o.scopeNames.join('", "')+`": ${(0,d.represent)(t)}`)}}))}}}}applyBindings(e,t,r=!0){for(;e;)!e.attributes?.length||!r&&e.getAttribute("slot")||this.applyBinding(e,t),e.nodeName.toLowerCase().includes("-")||this.applyBindings(e.firstChild,t),e=e.nextSibling}compileDomNodeTemplate(e,t=[],r={}){r={ignoreComponents:!0,ignoreNestedComponents:!0,unsafe:this.self.renderUnsafe,...r};const s=e.nodeName.toLowerCase();if(r.ignoreComponents&&s.includes("-"))return null;if(r.unsafe){let r=e.innerHTML;if(!r&&e.template&&(r=e.template),this.self.hasCode(r)){const s=(0,d.compile)(`\`${r}\``,t);return{domNode:e,children:[],error:s.error,scopeNames:s.scopeNames,template:r,templateFunction:s.templateFunction}}return null}let n=null;if("#text"===s){const t=e.textContent;t&&this.self.hasCode(t)&&(n=t.replace(/&nbsp;/g," ").trim())}const o=[],i={children:o,domNode:e};if(n){const e=(0,d.compile)(`\`${n}\``,t);i.error=e.error,i.scopeNames=e.scopeNames,i.template=n,i.templateFunction=e.templateFunction}let a=e.firstChild;for(;a;){if(!r.filter||r.filter(a)){const e=this.compileDomNodeTemplate(a,t,{...r,ignoreComponents:r.ignoreNestedComponents});e&&o.push(e)}a=a.nextSibling}return i}evaluateCompiledDomNodeTemplate(e,t){const{domNode:r,error:s,templateFunction:n,scopeNames:o}=e;if(!n||!o)return null;if(s)return f.warn("Error occurred during compiling node content:",s),null;let i=null;try{i=n(...o.map((e=>t[e])))}catch(s){f.warn(`Error occurred when "${this.self._name}" is  running`,`"${String(n)}": with bound`,`names "${o.join('", "')}":`,`"${s}". Rendering node:`,r)}return i}evaluateDomNodeTemplate(e,t={},r={}){const s=(r={domNodeTemplateCache:this.domNodeTemplateCache,ignoreComponents:!0,ignoreNestedComponents:!0,unsafe:this.self.renderUnsafe,...r}).domNodeTemplateCache;if(!s.has(e)){const n={filter:r.filter,ignoreComponents:r.ignoreComponents,ignoreNestedComponents:r.ignoreNestedComponents,unsafe:r.unsafe},o=this.compileDomNodeTemplate(e,t,n);o&&s.set(e,o)}if(s.has(e)){const n=s.get(e),o=this.evaluateCompiledDomNodeTemplate(n,t);if(null!==o&&(r.unsafe&&e.innerHTML?e.innerHTML=o:e.textContent=o),n.children.length){const e=r=>{for(const s of r){const r=this.evaluateCompiledDomNodeTemplate(s,t);null!==r&&(s.domNode.textContent=r),s.children.length&&e(s.children)}};e(n.children)}}r.applyBindings&&this.applyBindings(e,t)}addSecureEventListener(e,t,r,s,n){this.domNodeEventBindings.has(e)||this.domNodeEventBindings.set(e,new Map);const o=this.domNodeEventBindings.get(e),i=o.get(t);i&&i!==r&&i();const a=()=>{e.removeEventListener(t,r,n),o.delete(t),0===o.size&&this.domNodeEventBindings.delete(e)};return o.set(t,a),e.addEventListener(t,r,s),a}determineRootBinding(){let t=this.parentNode;for(;t;){const r=t instanceof e||t.nodeName.includes("-")&&"#document-fragment"!==t.nodeName,s=null===t.parentNode&&"[object ShadowRoot]"===t.toString();r?(this.rootInstance===this&&(this.parentInstance=t,this.setPropertyValue("isRoot",!1)),this.rootInstance=t):s&&this.setPropertyValue("isRoot",!1),t=t.parentNode}}static hasCode(e){return"string"==typeof e&&e.includes("${")&&e.includes("}")&&/\${[\s\S]+}/.test(e)}static normalizePropertyTypeList(t){if("string"==typeof t&&(t=[t]),Array.isArray(t)){const r=t,s=new Map;for(const t of r)Object.prototype.hasOwnProperty.call(e.propertyTypes,t)&&s.set(t,e.propertyTypes[t]);return s}return(0,d.convertPlainObjectToMap)(t)}attachEventHandler(){if(null===this.self.eventToPropertyMapping)return;const e=this.attachExplicitDefinedOutputEventHandler();this.attachImplicitDefinedOutputEventHandler(!e)}attachExplicitDefinedOutputEventHandler(){if(!this.self.eventToPropertyMapping)return!1;let e=!1;for(const t of Object.keys(this.self.eventToPropertyMapping))Object.prototype.hasOwnProperty.call(this.internalProperties,t)||(e=!0,this.outputEventNames.add(t),this.setInternalPropertyValue(t,(async(...e)=>{const r=await this.reflectEventToProperties(t,e);r&&(e[0]=r),this.forwardEvent(t,e)})));return e}attachImplicitDefinedOutputEventHandler(e=!0){for(const[t,r]of Object.entries(this.self.propertyTypes))Object.prototype.hasOwnProperty.call(this.internalProperties,t)||![h.func,"function"].includes(r)||this.self.renderProperties.includes(t)||(this.outputEventNames.add(t),this.setInternalPropertyValue(t,((...r)=>{e&&this.reflectEventToProperties(t,r),this.forwardEvent(t,r)})))}triggerOutputEvents(){for(const e of this.outputEventNames)this.forwardEvent(e,[this.externalProperties])}forwardEvent(e,t){return e.length>3&&e.startsWith("on")&&(e=(0,d.lowerCase)(e.substring(2))),this.dispatchEvent(new CustomEvent(e,{detail:{parameters:t}}))}applySlots(t,r){for(const s of Array.from(t.querySelectorAll("slot"))){const t=s.getAttribute("name");if(null===t||"default"===t)if(this.slots.default){if(this.self.renderSlots){if(this.self.evaluateSlots)for(const e of this.slots.default)this.evaluateDomNodeTemplate(e,r);(0,d.replace)(s,this.slots.default,e.trimSlots)}}else this.slots.default=(0,d.unwrap)(s).map((e=>this.grabSlotContent(e)));else this.slots[t]?this.self.renderSlots&&(this.self.evaluateSlots&&this.evaluateDomNodeTemplate(this.slots[t],r),(0,d.replace)(s,this.slots[t],e.trimSlots)):this.slots[t]=this.grabSlotContent((0,d.unwrap)(s).filter((e=>"#text"!==e.nodeName.toLowerCase()))[0])}}grabSlotContent(e){const t=h.node.firstElementChild?e:null;if(t&&"textarea"===t.firstElementChild?.nodeName.toLowerCase()&&(!t.firstElementChild.hasAttribute("data-no-template")||"false"===t.firstElementChild.getAttribute("data-no-template"))){const e=t.firstElementChild.value;t.classList.remove("web-component-template");const r=t.cloneNode();return t.classList.add("web-component-template"),r.innerHTML="",r.template=e,r}return this.self.cloneSlots?e.cloneNode(!0):e}grabGivenSlots(){this.slots={};for(const e of Array.from(this.querySelectorAll("[slot]"))){let t=e.parentNode,r=!0;for(;t;){if(t.nodeName.includes("-")){t===this&&(r=!1);break}t=t.parentNode}if(r)continue;const s=e.getAttribute("slot")?.trim();this.slots[null!=s?s:e.nodeName.toLowerCase()]=this.grabSlotContent(e)}this.slots.default?this.slots.default=[].concat(this.slots.default):this.childNodes.length>0?this.slots.default=Array.from(this.childNodes).map((e=>this.grabSlotContent(e))):this.slots.default=[]}isStateProperty(e){return Boolean(this.instance?.current?.state&&(Object.prototype.hasOwnProperty.call(this.instance.current.state,e)||this.instance.current.state.modelState&&Object.prototype.hasOwnProperty.call(this.instance.current.state.modelState,e)))}generateAliasIndex(){if(!this.self._propertyAliasIndex){this.self._propertyAliasIndex={...this.self.propertyAliases};for(const[e,t]of Object.entries(this.self._propertyAliasIndex))Object.prototype.hasOwnProperty.call(this.self._propertyAliasIndex,t)||(this.self._propertyAliasIndex[t]=e)}}reflectExternalProperties(e){this.ignoreAttributeUpdateObservations=!0;for(const[t,r]of Object.entries(e)){if(this.setExternalPropertyValue(t,r),!this.isConnected)continue;const e=(0,d.camelCaseToDelimited)(t);if(this.self._propertiesToReflectAsAttributes?.has(t))switch(this.self._propertiesToReflectAsAttributes.get(t)){case h.boolean:case"boolean":r?""!==this.getAttribute(e)&&this.setAttribute(e,""):this.hasAttribute(e)&&this.removeAttribute(e);break;case h.func:case"function":break;case"json":if(r){const t=JSON.stringify(r);if(t&&this.getAttribute(e)!==t){this.setAttribute(e,t);break}}this.hasAttribute(e)&&this.removeAttribute(e);break;case h.number:case"number":if("number"!=typeof r||isNaN(r))this.hasAttribute(e)&&this.removeAttribute(e);else{const t=String(r);this.getAttribute(e)!==t&&this.setAttribute(e,t)}break;case h.string:case"string":r?this.getAttribute(e)!==r&&this.setAttribute(e,r):this.hasAttribute(e)&&this.removeAttribute(e);break;case h.any:case h.array:case h.arrayOf:case h.element:case h.elementType:case h.instanceOf:case h.node:case h.object:case"object":case h.objectOf:case h.shape:case h.exact:case h.symbol:default:if(r){const t=(0,d.represent)(r);if(t&&this.getAttribute(e)!==t){this.setAttribute(e,t);break}}this.hasAttribute(e)&&this.removeAttribute(e)}}this.ignoreAttributeUpdateObservations=!1}reflectProperties(e){if(this.reflectExternalProperties(e),this.instance?.current?.state&&"object"==typeof this.instance.current.state)for(const e of Object.keys(this.instance.current.state).concat(this.instance.current.state.modelState?Object.keys(this.instance.current.state.modelState):[]))Object.prototype.hasOwnProperty.call(this.internalProperties,e)&&this.setInternalPropertyValue(e,void 0);this.internalProperties.model?.state&&(delete this.internalProperties.model.state,this.setInternalPropertyValue("model",this.internalProperties.model));for(const t of this.self.controllableProperties)Object.prototype.hasOwnProperty.call(e,t)&&this.setInternalPropertyValue(t,e[t])}async reflectEventToProperties(e,t){const r=this.batchUpdates;this.batchUpdates=!1;let s=null,n=!1;if(this.self.eventToPropertyMapping&&Object.prototype.hasOwnProperty.call(this.self.eventToPropertyMapping,e)&&(0,d.isFunction)(this.self.eventToPropertyMapping[e])){const r=this.self.eventToPropertyMapping[e](...t,this),o=r&&"then"in r&&(0,d.isFunction)(r.then)?await r:r;n=!0,Array.isArray(o)?(s=o[0],this.reflectProperties(s),(0,d.extend)(!0,this.internalProperties,o[1])):null===o?n=!1:"object"==typeof o&&(s=o,this.reflectProperties(o))}if(!n&&t.length>0&&(0,d.isObject)(t[0])){let e=t[0];if("persist"in t[0]&&(0,d.isFunction)(t[0].persist)){e={};for(const r of Object.keys(this.self.propertyTypes))for(const s of[r].concat(null!==(o=this.getPropertyAlias(r))&&void 0!==o?o:[])){var o;const r=t[0].currentTarget&&Object.prototype.hasOwnProperty.call(t[0].currentTarget,s)?t[0].currentTarget[s]:this.getPropertyValue(s);r!==this.externalProperties[s]&&(e[s]=r)}}else[null,void 0].includes(e.detail?.value)||(e={...e.detail});s=e,this.reflectProperties(e)}return this.triggerRender("propertyReflected"),this.batchUpdates=r,s}evaluateStringOrNullAndSetAsProperty(e,t){const r=e.startsWith("-"),s=r?e.substring(1):e;let n=(0,d.delimitedToCamelCase)(s);const o=this.getPropertyAlias(n);if(o&&Object.prototype.hasOwnProperty.call(this.self.propertyTypes,o)&&(n=o),Object.prototype.hasOwnProperty.call(this.self.propertyTypes,n)){const s=this.self.propertyTypes[n];if(r){if(t){const r=(0,d.evaluate)(t,{...d.UTILITY_SCOPE},!1,!0,this);r.error?(f.warn("Failed to process pre-evaluation attribute",`"${e}": ${r.error}. Will be`,'set to "undefined".'),this.setInternalPropertyValue(n,void 0)):(this.setInternalPropertyValue(n,r.result),this.setExternalPropertyValue(n,r.result))}}else switch(s){case h.boolean:case"boolean":{const e=![null,"false"].includes(t);this.setInternalPropertyValue(n,e),this.setExternalPropertyValue(n,e);break}case h.func:case"function":{let r,s=null;const o=["data","event","firstArgument","firstParameter","options"];if(t){const n=(0,d.compile)(t,o.concat("parameters","scope",d.UTILITY_SCOPE_NAMES),!0,!0,this);s=n.error,r=n.templateFunction,s&&f.warn("Failed to compile given handler",`"${e}": ${s}.`)}this.setInternalPropertyValue(n,((...i)=>{let a;if(this.outputEventNames.has(n)&&this.reflectEventToProperties(n,i),!s){const s={parameters:i,...d.UTILITY_SCOPE};for(const e of o)s[e]=i[0];try{a=r?.(...o.map((e=>s[e])),i,s,...d.UTILITY_SCOPE_NAMES.map((e=>d.UTILITY_SCOPE[e])))}catch(r){f.warn("Failed to evaluate function",`"${e}" with expression`,`"${t}" and scope`,"variables",`"${o.join('", "')}" set to`,`"${(0,d.represent)(i)}":`,`${r}. Set property`,'to "undefined".')}}return this.self.renderProperties.includes(n)||this.forwardEvent(n,i),a})),s||this.setExternalPropertyValue(n,r);break}case"json":if(t){let r;try{r=JSON.parse(t)}catch(t){f.warn("Error occurred during parsing given json",`attribute "${e}":`,(0,d.represent)(t));break}this.setInternalPropertyValue(n,r),this.setExternalPropertyValue(n,(0,d.copy)(r,!1,1))}else this.setInternalPropertyValue(n,null),this.setExternalPropertyValue(n,null);break;case h.number:case"number":{if(null===t){this.setInternalPropertyValue(n,t),this.setExternalPropertyValue(n,t);break}let e=parseFloat(t);isNaN(e)&&(e=void 0),this.setInternalPropertyValue(n,e),this.setExternalPropertyValue(n,e);break}case h.string:case"string":this.setInternalPropertyValue(n,t),this.setExternalPropertyValue(n,t);break;case h.any:case h.array:case h.arrayOf:case h.element:case h.elementType:case h.instanceOf:case h.node:case h.object:case"object":case h.objectOf:case h.oneOf:case h.oneOfType:case h.shape:case h.exact:case h.symbol:default:if(t){const r=(0,d.evaluate)(t,{},!1,!0,this);if(r.error){f.warn("Error occurred during processing given",`attribute configuration "${e}":`,r.error);break}this.setInternalPropertyValue(n,r.result),this.setExternalPropertyValue(n,(0,d.copy)(r.result,!1,1))}else this.hasAttribute(e)?(this.setInternalPropertyValue(n,!0),this.setExternalPropertyValue(n,!0)):(this.setInternalPropertyValue(n,null),this.setExternalPropertyValue(n,null))}}}async waitForNestedComponentRendering(){this.childComponentInstances&&await Promise.all(this.childComponentInstances.map((e=>e.renderState.pending?e.renderState.promise:Promise.resolve())))}async resolveRenderingPromiseIfSet(e,t){t&&(await this.waitForNestedComponentRendering(),this.renderState.pending=!1,this.renderState.resolve(e),this.prepareNewRenderingPromise())}prepareNewRenderingPromise(){this.renderState.pending||(this.renderState.promise=new Promise((e=>{this.renderState.resolve=t=>{this.renderState.pending=!1,e(t)}})))}triggerRender(e){this.batchUpdates?this.batchedUpdateRunning||(this.batchedUpdateRunning=!0,(0,d.timeout)((()=>{this.batchedUpdateRunning=!1,this.render(e)}))):this.render(e)}applyShadowRootIfNotExisting(){this.self.shadowDOM&&this.hostDomNode===this&&(this.hostDomNode=(!("attachShadow"in this)&&"ShadyDOM"in window?window.ShadyDOM.wrap(this):this).attachShadow((0,d.isObject)(this.self.shadowDOM)?this.self.shadowDOM:{mode:"open"}))}determineRenderScope(e={}){this.scope={...this.parentInstance?.scope||{},...this.scope,...this.internalProperties,parentInstance:this.parentInstance,rootInstance:this.rootInstance,self:this,[(0,d.lowerCase)(this.self._name)||"instance"]:this,...e},this.scope.scope=this.scope}async render(e="unknown",t=!0){if(this.unRender("reRender",e),this.childComponentInstances=[],this.renderState.pending=!0,this.isRoot&&(await this.resolveRenderingPromiseIfSet(e,t),t&&(await Promise.all(this.self.pendingRenderPromises),this.self.pendingRenderPromises=[])),this.self.pendingRenderPromises.push(this.renderState.promise),this.determineRenderScope(),!this.self.doRender||!this.dispatchEvent(new CustomEvent("render",{detail:{reason:e,scope:this.scope}})))return void await this.resolveRenderingPromiseIfSet(e,t);const r=(0,d.evaluate)(`\`${this.self.content}\``,this.scope);if(r.error)return f.warn(`Failed to process template: ${r.error}`),this.renderState.resolve(e),void await Promise.all(this.self.pendingRenderPromises);this.applyShadowRootIfNotExisting();const s=document.createElement("div");s.innerHTML=r.result,this.applySlots(s,{...this.scope,parentInstance:this}),this.hostDomNode.innerHTML=s.innerHTML,await(0,d.timeout)(),this.waitForNestedComponentRendering().then((()=>{this.applyBindings(this.hostDomNode.firstChild,this.scope,this.self.renderSlots)})),await this.resolveRenderingPromiseIfSet(e,t)}unRender(e="unknown",t){this.unregisterDomNodeEventBindings()}},i.applyRootBinding=!0,i.pendingRenderPromises=[],i.content="<slot>Please provide a template to transclude.</slot>",i.determineRootBinding=!0,i.shadowDOM=null,i.observedAttributes=[],i.controllableProperties=[],i.eventToPropertyMapping={},i.propertyAliases={},i.propertyTypes={onClick:h.func},i.propertiesToReflectAsAttributes=[],i.renderProperties=["children"],i.doRender=!1,i.cloneSlots=!1,i.evaluateSlots=!1,i.renderSlots=!0,i.trimSlots=!0,i.renderUnsafe=!1,i._name="BaseWeb",i._propertyAliasIndex=void 0,i._propertiesToReflectAsAttributes=void 0,n=i,o=c()(n.prototype,"isRoot",[s],{configurable:!0,enumerable:!0,writable:!0,initializer:function(){return!0}}),n);const b=y},e=>{e.exports=i},e=>{e.exports=a},e=>{e.exports=p},e=>{e.exports=r},(e,t,r)=>{r.d(t,{default:()=>h});var s=r(0),n=r(1),o=r(7),i=r.n(o),a=r(9),p=r(10),l=r(3);const c=new s.Logger({name:"web-component-wrapper-web"});class d extends l.default{constructor(...e){super(...e),this.unmountOnDisconnect=!0,this.compiledSlots={},this.preparedSlots={},this.reactRoot=null,this.rootReactInstance=null,this.self=d,this.wrapMemorizingWrapper=null,this.isWrapped=!1,this.reflectInstanceProperties=()=>{this.instance?.current&&this.instance.current.properties&&this.reflectProperties(this.instance.current.properties)}}connectedCallback(){this.applyComponentWrapper(),this.rootReactInstance=this,super.connectedCallback()}disconnectedCallback(){this.unRender("disconnected"),this.unmountOnDisconnect&&this.reactRoot?.unmount(),this.unregisterConnectionState()}reflectExternalProperties(e){this.isRoot&&super.reflectExternalProperties(e)}async render(e="unknown",t=!0){if(super.unRender("reRender",e),this.childComponentInstances=[],this.renderState.pending=!0,this.isRoot&&(this.self.pendingRenderPromises=[]),this.self.pendingRenderPromises.push(this.renderState.promise),this.rootReactInstance!==this||!this.dispatchEvent(new CustomEvent("render",{detail:{reason:e,scope:this.scope}})))return this.resolveRenderingPromiseIfSet(e,t);if(this.determineRenderScope(),0===Object.keys(this.compiledSlots).length&&this.preCompileSlots(),this.evaluateSlots({...this.scope,parentInstance:this}),this.prepareProperties(this.internalProperties),this.applyShadowRootIfNotExisting(),this.rootInstance!==this&&!this.reactRoot){let e=this.firstChild;for(;e;){const t=e.nextSibling;this.removeChild(e),e=t}}if(!this.reactRoot){const e=this.id||this.internalProperties.id||this.externalProperties.id||this.name||this.internalProperties.name||this.externalProperties.name;let t="";"string"==typeof e&&(t=e),this.reactRoot=(0,p.createRoot)(this.hostDomNode,{identifierPrefix:t})}(0,a.flushSync)((()=>{this.reactRoot?.render((0,o.createElement)(this.self.content,this.internalProperties)),this.resolveRenderingPromiseIfSet(e,t)})),t&&await this.renderState.promise}setPropertyValue(e,t){this.reflectProperties({[e]:(0,s.copy)(t,!1,1)}),this.setInternalPropertyValue(e,(0,s.copy)(t,!1,1))}setInternalPropertyValue(e,t){null===t?t=n.NullSymbol:void 0===t&&(t=n.UndefinedSymbol),super.setInternalPropertyValue(e,t)}preCompileDomNodes(e,t={},r=!1){if(1===(e=e.filter((e=>e.nodeType!==Node.TEXT_NODE||"string"==typeof e.nodeValue&&""!==e.nodeValue.trim()))).length)return this.preCompileDomNode(e[0],t,r);let s=1;const n=[];for(const o of e){const e=this.preCompileDomNode(o,t,r,s.toString());n.push(e),s+=1}return r?e=>(...t)=>{const r=[];for(const s of n){const n=s(e);"function"==typeof n&&r.push(n(...t))}return(0,o.createElement)(o.Fragment,{children:r})}:n}preCompileDomNode(e,t={},r=!1,n){if(r){const r=this.preCompileDomNode(e,{...t,data:void 0,firstArgument:void 0,firstParameter:void 0,options:void 0,scope:void 0,parameters:void 0},!1,n);return e=>(...t)=>{const s=t.length>0?t[0]:null;return r({...e,data:s,firstArgument:s,firstParameter:s,options:s,scope:s,parameters:t})}}if(e.nodeType===Node.TEXT_NODE){const t="string"==typeof e.nodeValue?e.nodeValue.trim():"",r=n&&t?(0,o.createElement)(o.Fragment,{children:t,key:n}):t||null;return()=>r}if(!e.getAttributeNames)return()=>null;const i={};let a;const p=this.self.isReactComponent(e);p?(e.determineRenderScope(),0===Object.keys(this.compiledSlots).length&&e.preCompileSlots(),n&&!Object.prototype.hasOwnProperty.call(i,"key")&&(i.key=n),a=e.constructor.content):(i.key=n,a=e.tagName.toLowerCase());let l=Object.keys(t);const d={};for(const r of e.getAttributeNames()){let n=e.getAttribute(r);if(null===n)continue;let o=!1,a="";if(r.startsWith("data-bind-")?a=r.substring(10):r.startsWith("bind-")&&(a=r.substring(5)),a.startsWith("attribute-")||"attributes"===a||a.startsWith("property-")||"properties"===a){const{error:t,originalScopeNames:i,templateFunction:p}=(0,s.compile)(n,l);if(t){c.warn("Error occurred during compiling given attribute",`binding "${r}" on node:`,e,t);continue}"attributes"===a||"properties"===a?o=!0:a=a.startsWith("attribute-")?a.substring(10):a.substring(9),n={originalScopeNames:i,templateFunction:p.bind(this)}}else if(a.startsWith("on-")){a=(0,s.delimitedToCamelCase)(a),Object.prototype.hasOwnProperty.call(t,"event")||(l=[...l,"event"]),Object.prototype.hasOwnProperty.call(t,"parameters")||(l=[...l,"parameters"]);const{error:o,originalScopeNames:i,scopeNames:p,templateFunction:d}=(0,s.compile)(n,l,!0);if(o){c.warn("Error occurred during compiling given event",`binding "${r}" on node:`,e,o);continue}const h=d.bind(this);n=(...o)=>{t.event=o[0],t.parameters=o;try{h(...i.map((e=>t[e])))}catch(t){c.warn("Error occurred during processing given",`event binding "${r}" on node: `,e,`Given expression "${n}" could`,"not be evaluated with given scope names",`"${p.join('", "')}":`,(0,s.represent)(t))}}}else a=r;const h={class:"className",for:"htmlFor"};Object.prototype.hasOwnProperty.call(h,a)&&(a=h[a]),a=(0,s.delimitedToCamelCase)(a),n?.originalScopeNames?d[o?"":a]=n:p||(i[a]=n)}if(!p){const r=Array.from(e.childNodes);r.length&&(i.children=this.preCompileDomNodes(r,t))}return r=>{(r={...t,...r}).scope=r;let s={...i};for(const[e,{originalScopeNames:t,templateFunction:n}]of Object.entries(d)){const o=n(...t.map((e=>r[e])));""===e?s={...s,...o}:s[e]=o}return Object.prototype.hasOwnProperty.call(s,"innerHTML")&&(s.dangerouslySetInnerHTML={__html:s.innerHTML},delete s.children,delete s.innerHTML),Object.prototype.hasOwnProperty.call(s,"textContent")?(s.children=s.textContent,delete s.textContent):p?(s={...e.internalProperties,...s},r={...s,...r,parentInstance:e},e.evaluateSlots(r),e.prepareProperties(s)):s.children&&(s.children=this.evaluatePreCompiledDomNodes(s.children,r)),(0,o.createElement)(a,s)}}evaluatePreCompiledDomNodes(e,t={}){if(!Array.isArray(e))return e(t);if(1===e.length)return e[0](t);const r=[];for(const s of e){const e=s(t);e&&r.push(e)}return r}preCompileSlots(){for(const e in this.slots)this.slots[e]&&"default"!==e&&(this.compiledSlots[e]=this.preCompileDomNode(this.slots[e],{...this.scope,parentInstance:this},[n.func,"function"].includes(this.self.propertyTypes[e])));this.slots.default&&this.slots.default.length>0&&(this.compiledSlots.children=this.preCompileDomNodes(this.slots.default,{...this.scope,parentInstance:this},[n.func,"function"].includes(this.self.propertyTypes.children)))}evaluateSlots(e){this.preparedSlots={};for(const t in this.compiledSlots)Object.prototype.hasOwnProperty.call(this.compiledSlots,t)&&("children"===t?this.preparedSlots.children=this.evaluatePreCompiledDomNodes(this.compiledSlots[t],e):this.preparedSlots[t]=this.compiledSlots[t](e))}static isReactComponent(e){const t=e.constructor;return"object"==typeof t.content&&(!t.attachWebComponentAdapterIfNotExists||"react"===t.content.webComponentAdapterWrapped)}determineRootBinding(){super.determineRootBinding();let e=this.parentNode;for(;e;){if(this.self.isReactComponent(e)){this.rootReactInstance=e;break}e=e.parentNode}}applyComponentWrapper(){if("string"==typeof this.self.content||this.isWrapped)return;this.isWrapped=!0;const e=this.self.content.wrapped||this.self.content;this.self.content.webComponentAdapterWrapped?this.wrapMemorizingWrapper&&(this.self.content=(0,o.memo)(this.self.content),this.self.content.wrapped=e):this.self.attachWebComponentAdapterIfNotExists?(this.self.content.displayName||(this.self.content.displayName=this.self._name),this.self.content=(0,o.forwardRef)(((t,r)=>((0,o.useImperativeHandle)(r,(()=>({properties:t})),[t]),(0,o.createElement)(e,t)))),(this.wrapMemorizingWrapper||null===this.wrapMemorizingWrapper)&&(this.self.content=(0,o.memo)(this.self.content)),this.self.content.wrapped=e,this.self.content.webComponentAdapterWrapped="react"):this.wrapMemorizingWrapper&&(this.self.content=(0,o.memo)(this.self.content),this.self.content.wrapped=e)}prepareProperties(e){(0,s.extend)(e,this.preparedSlots),this.self.removeKnownUnwantedPropertyKeys(this.self,e),e.ref||(this.instance=(0,o.createRef)(),e.ref=e=>{this.instance?this.instance.current=e:this.instance={current:e},this.reflectInstanceProperties()})}static removeKnownUnwantedPropertyKeys(e,t){if("string"!=typeof e.content)for(const r of["isRoot","isTrusted","__composed"])Object.prototype.hasOwnProperty.call(t,r)&&(Object.prototype.hasOwnProperty.call(e.content,"propTypes")&&!Object.prototype.hasOwnProperty.call(e.content.propTypes,r)||Object.prototype.hasOwnProperty.call(e.content,"wrapped")&&Object.prototype.hasOwnProperty.call(e.content.wrapped,"propTypes")&&!Object.prototype.hasOwnProperty.call(e.content.wrapped.propTypes,r))&&delete t[r]}}d.attachWebComponentAdapterIfNotExists=!0,d.content="div",d.react=i(),d._name="ReactWebComponent";const h=d},e=>{e.exports=n},e=>{e.exports=o},(e,t,r)=>{r.d(t,{default:()=>o});var s=r(0);const n=r(8).default,o=(e,t="NoName",r={})=>{var o,i;const a=e._name||e.___types?.name?.name||t.replace(/^(.*\/+)?([^/]+)\.tsx$/,"$2");r.propTypes&&(e.propTypes=r.propTypes);const p=e.propTypes||{},l=r.propertyAliases||e.propertyAliases||{},c=(0,s.unique)(Object.keys(p).concat(Object.keys(l)).concat(Object.values(l)));let d=r.propertiesToReflectAsAttributes||e.propertiesToReflectAsAttributes||[];if(n.propertiesToReflectAsAttributes)if(Array.isArray(d))d=[...n.propertiesToReflectAsAttributes,...d];else if(d instanceof Map)for(const e of n.propertiesToReflectAsAttributes)d.set(e,n.propertyTypes[e]);else if("object"==typeof d)for(const e of n.propertiesToReflectAsAttributes)d[e]=n.propertyTypes[e];const h=c.map((e=>(0,s.camelCaseToDelimited)(e)));class u extends n{constructor(...t){var s;super(...t),this.self=u,this.internalProperties=r.internalProperties?{...r.internalProperties}:e.internalProperties?{...e.internalProperties}:{},this.unmountOnDisconnect=null===(s=r.unmountOnDisconnect)||void 0===s||s}}u.attachWebComponentAdapterIfNotExists="boolean"!=typeof r.attachWebComponentAdapterIfNotExists||r.attachWebComponentAdapterIfNotExists,u.content=e,u.observedAttributes=n.observedAttributes.concat(h).concat(h.map((e=>`-${e}`))),u.controllableProperties=e.controllableProperties||r.controllableProperties||[],u.eventToPropertyMapping=null===r.eventToPropertyMapping?r.eventToPropertyMapping:r.eventToPropertyMapping?{...r.eventToPropertyMapping}:null===e.eventToPropertyMapping?e.eventToPropertyMapping:e.eventToPropertyMapping?{...e.eventToPropertyMapping}:{},u.propertyAliases={...n.propertyAliases,...l},u.propertiesToReflectAsAttributes=d,u.propertyTypes={...n.propertyTypes,...p},u.renderProperties=null!==(o=null!==(i=r.renderProperties)&&void 0!==i?i:e.renderProperties)&&void 0!==o?o:n.renderProperties,u._name=a;return{component:u,register:(e=(0,s.camelCaseToDelimited)(a))=>{customElements.define(e,u)}}}},,e=>{e.exports=s}],c={};function d(e){var t=c[e];if(void 0!==t)return t.exports;var r=c[e]={exports:{}};return l[e](r,r.exports,d),r.exports}d.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return d.d(t,{a:t}),t},d.d=(e,t)=>{for(var r in t)d.o(t,r)&&!d.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},d.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),d.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var h={};d.r(h);var u=d(0),f=d(1),m=d(7),y=d(13),b=d(11),g=d(8),v=d(3);return(0,y.describe)("Web",(()=>{(0,y.test)("constructor",(()=>{class e extends v.default{constructor(...e){super(...e),this.onClick=void 0}}e.observedAttributes=["is-root","on-click","on-event"],(0,y.expect)(e).toHaveProperty("content"),(0,y.expect)(e).toHaveProperty("observedAttributes"),customElements.define("test-web",e);const t=document.createElement("test-web");(0,y.expect)(t).not.toHaveProperty("clicked"),t.setAttribute("on-click","this.clicked = true"),(0,y.expect)(t).not.toHaveProperty("clicked"),document.body.appendChild(t),(0,y.expect)(t).toHaveProperty("rootInstance",t),(0,y.expect)(t).not.toHaveProperty("clicked"),t.onClick(),(0,y.expect)(t).toHaveProperty("clicked",!0);const r=y.jest.fn();t.addEventListener("click",r),(0,y.expect)(r).not.toHaveBeenCalled(),t.onClick(),(0,y.expect)(r).toHaveBeenCalled()}))})),(0,y.describe)("ReactWeb",(()=>{(0,y.test)("constructor",(async()=>{let e,t="initial";class r extends g.default{constructor(...e){super(...e),this.self=r,this.onClick=void 0,this.onEvent=void 0}}r._name="Test",r.content=({onEvent:r,property:s=t})=>(e=r,t=s,(0,m.createElement)("div",{className:s})),r.observedAttributes=["is-root","on-click","on-event"],r.propertyTypes={...v.default.propertyTypes,onEvent:f.func,property:f.string},(0,y.expect)(r).toHaveProperty("content"),(0,y.expect)(r).toHaveProperty("observedAttributes"),customElements.define("test-react",r);const s=document.createElement("test-react");(0,y.expect)(s).not.toHaveProperty("clicked"),s.setAttribute("on-click","this.clicked = true"),(0,y.expect)(s).toHaveProperty("onClick"),(0,y.expect)(s).not.toHaveProperty("clicked"),s.setAttribute("on-event","this.eventHappened = true"),(0,y.expect)(s).toHaveProperty("onEvent"),(0,y.expect)(e).not.toBeDefined(),document.body.appendChild(s),(0,y.expect)(s).toHaveProperty("rootInstance",s),(0,y.expect)(s).toHaveProperty("reactRoot"),(0,y.expect)(e).not.toBeDefined(),await(0,u.timeout)(),(0,y.expect)(e).toBeDefined(),(0,y.expect)(s).not.toHaveProperty("eventHappened"),e&&e(),(0,y.expect)(s).toHaveProperty("eventHappened",!0);const n=y.jest.fn();s.addEventListener("event",n),(0,y.expect)(n).not.toHaveBeenCalled(),e&&e(),(0,y.expect)(n).toHaveBeenCalled(),(0,y.expect)(s).not.toHaveProperty("clicked"),s.onClick(),(0,y.expect)(s).toHaveProperty("clicked",!0);const o=y.jest.fn();s.addEventListener("click",o),(0,y.expect)(o).not.toHaveBeenCalled(),s.onClick(),(0,y.expect)(o).toHaveBeenCalled(),(0,y.expect)(t).toStrictEqual("initial"),(0,y.expect)(document.querySelector("div")?.className).toStrictEqual("initial"),s.property="test",await(0,u.timeout)(),(0,y.expect)(s).toHaveProperty("property","test"),(0,y.expect)(document.querySelector("div")?.className).toStrictEqual("test")}))})),(0,y.describe)("index",(()=>{(0,y.test)("wrapAsWebComponent",(()=>{const e=(0,b.default)((()=>(0,m.createElement)("div")),"TestComponent",{eventToPropertyMapping:{},propertyAliases:{alternateName:"name"},propertiesToReflectAsAttributes:[],propTypes:{name:"string"}});(0,y.expect)(e).toHaveProperty("component"),(0,y.expect)(e).toHaveProperty("register"),(0,y.expect)(e.component).toHaveProperty("_name","TestComponent"),(0,y.expect)(e.component).toHaveProperty("propertyTypes.name","string"),(0,y.expect)(e.component).toHaveProperty("propertiesToReflectAsAttributes",["isRoot"]),(0,y.expect)(e.component).toHaveProperty("eventToPropertyMapping",{})}))})),h})()));

package/dist/type.js

@@ -0,0 +1 @@
+"use strict";if("undefined"!=typeof module&&null!==module&&"undefined"!==eval("typeof require")&&null!==eval("require")&&"main"in eval("require")&&"undefined"!==eval("typeof require.main")&&null!==eval("require.main")){var ORIGINAL_MAIN_MODULE=module;module!==eval("require.main")&&"paths"in module&&"paths"in eval("require.main")&&"undefined"!=typeof __dirname&&null!==__dirname&&(module.paths=eval("require.main.paths").concat(module.paths.filter((function(path){return eval("require.main.paths").includes(path)}))))}if(null==window)var window="undefined"==typeof global||null===global?{}:global;!function(e,n){if("object"==typeof exports&&"object"==typeof module)module.exports=n();else if("function"==typeof define&&define.amd)define([],n);else{var i=n();for(var l in i)("object"==typeof exports?exports:e)[l]=i[l]}}(this,(()=>{return{r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}}.r(e={}),e;var e}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-component-wrapper",
-  "version": "0.0.596",
+  "version": "0.0.598",
   "description": "Generic web-component base class and framework specific wrapper.",
   "keywords": [
     "component",
@@ -23,32 +23,21 @@
     "email": "info@torben.website",
     "url": "https://torben.website"
   },
+  "main": "dist/index.js",
   "files": [
-    "decorator.d.ts",
-    "decorator.js",
-    "decoratorNext.js",
-    "index.d.ts",
-    "index.js",
-    "indexNext.js",
-    "polyfill.html.ejs",
-    "ReactWeb.d.ts",
-    "ReactWeb.js",
-    "ReactWebNext.js",
-    "Web.d.ts",
-    "Web.js",
-    "WebNext.js",
-    "type.d.ts"
+    "dist"
   ],
   "repository": {
     "type": "git",
     "url": "https://github.com/thaibault/web-component-wrapper"
   },
   "scripts": {
-    "build": "yarn build:types; yarn build:plain; yarn build:next",
-    "build:bundle": "yarn build:types; yarn build:bundle:plain; yarn build:next",
+    "build": "yarn build:types; yarn build:plain; yarn build:compatible; yarn build:bundle",
+    "build:bundle": "yarn build:types; yarn build:bundle:plain; yarn build:bundle:compatible",
     "build:bundle:plain": "weboptimizer build '{__reference__: \"target:bundle\"}'",
+    "build:bundle:compatible": "weboptimizer build '{__reference__: [\"target:bundle\", \"target:compatible\"]}'",
     "build:plain": "weboptimizer build",
-    "build:next": "weboptimizer build '{__reference__: \"target:next\"}'",
+    "build:compatible": "weboptimizer build '{__reference__: \"target:compatible\"}'",
     "build:types": "weboptimizer build:types",
     "check": "yarn check:types; yarn lint",
     "check:types": "weboptimizer check:types",
@@ -73,15 +62,15 @@
     "@types/ejs": "^3.1.5",
     "@types/html-minifier": "^4.0.6",
     "@types/jsdom": "^28.0.3",
-    "@types/node": "^25.9.2",
+    "@types/node": "^25.9.3",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@types/webpack-env": "^1.18.8",
     "@typescript-eslint/eslint-plugin": "^8.61.0",
     "@typescript-eslint/parser": "^8.61.0",
     "@webcomponents/webcomponentsjs": "^2.8.0",
-    "clientnode": "^4.0.1421",
-    "eslint": "^10.4.1",
+    "clientnode": "^4.0.1422",
+    "eslint": "^10.5.0",
     "eslint-config-google": "^0.14.0",
     "eslint-plugin-jsdoc": "^63.0.2",
     "jest": "30.4.2",
@@ -90,9 +79,9 @@
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "typescript-eslint": "^8.61.0",
-    "web-documentation": "^1.0.31",
+    "web-documentation": "^1.0.37",
     "weboptimizer": "^3.0.24",
-    "webpack-dev-server": "^5.2.4"
+    "webpack-dev-server": "^5.2.5"
   },
   "peerDependencies": {
     "@babel/runtime": "*",
@@ -131,7 +120,11 @@
     "globals@npm:^14.0.0": "patch:globals@npm%3A11.12.0#~/.yarn/patches/globals-npm-11.12.0-1fa7f41a6c.patch"
   },
   "sideEffects": false,
-  "documentationWebsite": {
+  "webDocumentation": {
+    "languages": [
+      "deDE",
+      "enUS"
+    ],
     "tagline": "Encapsulate your components as web-components.",
     "trackingCode": "TODO"
   },
@@ -145,9 +138,7 @@
     },
     "generic": {
       "supportedBrowsers": [
-        "IE >= 11",
-        "last 2 versions",
-        "> 5%"
+        "browserslist config and supports es6-class"
       ]
     },
     "injection": {
@@ -163,6 +154,14 @@
         }
       }
     },
+    "path": {
+      "source": {
+        "base": "src/"
+      },
+      "target": {
+        "base": "dist/"
+      }
+    },
     "target:bundle": {
       "inPlace": {
         "externalLibrary": {
@@ -170,6 +169,7 @@
           "normal": true
         }
       },
+      "libraryName": "webComponentWrapper",
       "module": {
         "preprocessor": {
           "javaScript": {
@@ -180,17 +180,24 @@
             }
           }
         }
+      },
+      "path": {
+        "target": {
+          "base": "dist/bundle/"
+        }
       }
     },
-    "target:next": {
+    "target:compatible": {
       "generic": {
         "supportedBrowsers": [
-          "browserslist config and supports es6-class"
+          "IE >= 11",
+          "last 2 versions",
+          "> 5%"
         ]
       },
-      "injection": {
-        "entry": {
-          "__evaluate__": "{decoratorNext: './decorator.ts', indexNext: './index.ts', ReactWebNext: './ReactWeb.ts', WebNext: './Web.ts'}"
+      "path": {
+        "target": {
+          "base": "dist/compatible/"
         }
       }
     }

package/readme.md

@@ -33,6 +33,107 @@ Use case
 
 Encapsulate your components as web-components.
 
+<div class="wd-table-of-contents">
+    <h2 id="content">Content<!--deDE:Inhalt--></h2>
+    <!--wd-table-of-contents-->
+</div>
+
+<!--|deDE:Installation-->
+Installation
+------------
+
+You can install via package manager, simply download the compiled version as
+zip file here and inject or request via cdn in HTML:
+<!--deDE:
+    Sie können das Paket über den Paketmanager installieren oder einfach die
+    kompilierte Version als ZIP-Datei hier herunterladen und in HTML einbinden
+    oder über ein CDN abrufen:
+-->
+
+```bash
+npm install web-component-wrapper
+```
+
+```TypeScript
+import {func, object} from 'clientnode/property-types'
+import {property} from 'web-component-wrapper/decorator'
+import {Web} from 'web-component-wrapper/Web'
+
+export class MyWebComponent<
+    TElement = HTMLElement,
+    ExternalProperties extends Mapping<unknown> = Mapping<unknown>,
+    InternalProperties extends Mapping<unknown> = Mapping<unknown>
+> extends Web<TElement, ExternalProperties, InternalProperties> {
+    static content = `
+        <div class="wrapper" on-click="this.rootInstance.onClick(event)">
+            <slot>Please provide a template to transclude.</slot>
+        </div>
+    `
+    
+    @property({type: object})
+    options = {} as Options
+
+    @property({type: func})
+    onClick: (event: MouseEvent) => Promise<void> = NOOP
+    /**
+     * Defines dynamic getter and setter interface and resolves a configuration
+     * object. Initializes the map implementation.
+     */
+    constructor() {
+        super()
+        /*
+            Babel property declaration transformation overwrites defined
+            properties at the end of an implicit constructor. So we have to
+            redefine them as long as we want to declare expected component
+            interface properties to enable static type checks.
+        */
+        this.defineGetterAndSetterInterface()
+    }
+    /**
+     * Triggered when ever a given attribute has changed and triggers to update
+     * configured dom content.
+     * @param name - Attribute name which was updates.
+     * @param newValue - New updated value.
+     * @returns Returns when attribute has been updated.
+     */
+    async onUpdateAttribute(name: string, newValue: string): Promise<void> {
+        await super.onUpdateAttribute(name, newValue)
+
+        // ...
+    }
+    /**
+     * Updates controlled dom elements.
+     * @param reason - Why an update has been triggered.
+     * @param resolveRendering - Indicates whether rendering should be resolved
+     * finally. Should be set to "false" via super calls in inherited render
+     * methods which do further dom manipulations afterward and resolve the
+     * rendering process by their own.
+     * @returns A promise resolving when rendering has finished. A promise may
+     * be needed for classes inheriting from this class.
+     */
+    async render(reason = 'unknown', resolveRendering = true): Promise<void> {
+        await super.render(reason, false)
+
+        await this.waitForNestedComponentRendering()
+
+        // ...
+
+        await this.resolveRenderingPromiseIfSet(reason, resolveRendering)
+    }
+    
+    // ...
+}
+
+customElements.define('my-web-component', MyWebComponent)
+```
+
+<!--showExample-->
+
+```HTML
+<script src="https://unpkg.com/web-component-wrapper@latest/bundle/Web.js">
+</script>
+```
+
 ## Data-Flow
 
 Data can flow into a component via