web-component-wrapper 0.0.614 → 0.0.616

package/dist/index.js

@@ -37,9 +37,9 @@ module.exports = x({ ["NullSymbol"]: () => (__WEBPACK_EXTERNAL_MODULE_clientnode
 // -*- coding: utf-8 -*-
 /** @module decorator *//* !
     region header
-    [Project page](https://torben.website/web-component-wrapper)
+    [Project page](https://tsickert.com/web-component-wrapper)
 
-    Copyright Torben Sickert (info["~at~"]torben.website) 16.12.2012
+    Copyright Torben Sickert (info["~at~"]tsickert.com) 16.12.2012
 
     License
     -------
@@ -84,14 +84,14 @@ module.exports = x({ ["NullSymbol"]: () => (__WEBPACK_EXTERNAL_MODULE_clientnode
 /* unused harmony exports log, GenericHTMLElement, Web */
 /* harmony import */ var clientnode__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
 /* harmony import */ var clientnode_property_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
-/* harmony import */ var _decorator_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
+/* harmony import */ var _decorator_js__WEBPACK_IMPORTED_MODULE_2__ = /*#__PURE__*/__webpack_require__(2);
 // #!/usr/bin/env babel-node
 // -*- coding: utf-8 -*-
 /** @module web *//* !
     region header
-    [Project page](https://torben.website/web-component-wrapper)
+    [Project page](https://tsickert.com/web-component-wrapper)
 
-    Copyright Torben Sickert (info["~at~"]torben.website) 16.12.2012
+    Copyright Torben Sickert (info["~at~"]tsickert.com) 16.12.2012
 
     License
     -------
@@ -101,7 +101,7 @@ module.exports = x({ ["NullSymbol"]: () => (__WEBPACK_EXTERNAL_MODULE_clientnode
     See https://creativecommons.org/licenses/by/3.0/deed.de
     endregion
 */// region imports
-var _dec,_class,_descriptor,_Web;function _initializerDefineProperty(e,i,r,l){r&&Object.defineProperty(e,i,{enumerable:r.enumerable,configurable:r.configurable,writable:r.writable,value:r.initializer?r.initializer.call(l):void 0})}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==typeof i?i:i+""}function _toPrimitive(t,r){if("object"!=typeof t||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}function _applyDecoratedDescriptor(i,e,r,n,l){var a={};return Object.keys(n).forEach(function(i){a[i]=n[i]}),a.enumerable=!!a.enumerable,a.configurable=!!a.configurable,("value"in a||a.initializer)&&(a.writable=!0),a=r.slice().reverse().reduce(function(r,n){return n(i,e,r)||r},a),l&&void 0!==a.initializer&&(a.value=a.initializer?a.initializer.call(l):void 0,a.initializer=void 0),void 0===a.initializer?(Object.defineProperty(i,e,a),null):a}function _initializerWarningHelper(r,e){throw Error("Decorating class property failed. Please ensure that transform-class-properties is enabled and runs after the decorators transform.")};// endregion
+var _dec,_class,_descriptor,_Web;function _initializerDefineProperty(e,i,r,l){r&&Object.defineProperty(e,i,{enumerable:r.enumerable,configurable:r.configurable,writable:r.writable,value:r.initializer?r.initializer.call(l):void 0})}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==typeof i?i:i+""}function _toPrimitive(t,e){if("object"!=typeof t||!t)return t;var r;if("undefined"!=typeof Symbol&&void 0!==(r=t[Symbol.toPrimitive])){var i=r.call(t,e||"default");if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}function _applyDecoratedDescriptor(i,e,r,n,l){var a={};return Object.keys(n).forEach(function(i){a[i]=n[i]}),a.enumerable=!!a.enumerable,a.configurable=!!a.configurable,("value"in a||a.initializer)&&(a.writable=!0),a=r.slice().reverse().reduce(function(r,n){return n(i,e,r)||r},a),l&&void 0!==a.initializer&&(a.value=a.initializer?a.initializer.call(l):void 0,a.initializer=void 0),void 0===a.initializer?(Object.defineProperty(i,e,a),null):a}function _initializerWarningHelper(r,e){throw Error("Decorating class property failed. Please ensure that transform-class-properties is enabled and runs after the decorators transform.")};// endregion
 const log=new clientnode__WEBPACK_IMPORTED_MODULE_0__.Logger({name:"web-component-wrapper.web"});/*
     NOTE: We mock HTMLElement to be able to load this class and derived one
     into node environments.
@@ -279,13 +279,13 @@ try{this.isConnected=false}catch{// Ignore error.
      * Binds properties and event handler to the given dom node.
      * @param domNode - Node to start traversing from.
      * @param scope - Scope to render property value again.
-     */applyBinding(domNode,scope){if(!domNode.getAttributeNames)return;for(const attributeName of domNode.getAttributeNames()){let name;if(attributeName.startsWith("data-bind-"))name=attributeName.substring("data-bind-".length);else if(attributeName.startsWith("bind-"))name=attributeName.substring("bind-".length);if(name){const value=domNode.getAttribute(attributeName);if(value===null)continue;if(name.startsWith("attribute-")||name.startsWith("property-")){const evaluated=(0,clientnode__WEBPACK_IMPORTED_MODULE_0__.evaluate)(value,{scope,binding:domNode});if(evaluated.error){log.warn("Error occurred during processing given",`attribute binding "${attributeName}" on node:`,domNode,evaluated.error);continue}if(name.startsWith("attribute-"))domNode.setAttribute(name.substring("attribute-".length),evaluated.result);else/*
+     */applyBinding(domNode,scope){if(!domNode.getAttributeNames)return;for(const attributeName of domNode.getAttributeNames()){let name;if(attributeName.startsWith("data-bind-"))name=attributeName.substring("data-bind-".length);else if(attributeName.startsWith("bind-"))name=attributeName.substring("bind-".length);if(name){const value=domNode.getAttribute(attributeName);if(value===null)continue;if(name.startsWith("attribute-")||name.startsWith("property-")){const evaluated=(0,clientnode__WEBPACK_IMPORTED_MODULE_0__.evaluate)(value,{scope,binding:domNode});if(evaluated.error){void log.warn("Error occurred during processing given",`attribute binding "${attributeName}" on node:`,domNode,evaluated.error);continue}if(name.startsWith("attribute-"))domNode.setAttribute(name.substring("attribute-".length),evaluated.result);else/*
                             NOTE: Cast to "textContent" to have a writable
                             property here.
                         */domNode[(0,clientnode__WEBPACK_IMPORTED_MODULE_0__.delimitedToCamelCase)(name.substring("property-".length))]=evaluated.result}else if(name.startsWith("on-")){name=(0,clientnode__WEBPACK_IMPORTED_MODULE_0__.delimitedToCamelCase)(name.substring("on-".length));scope={log,event:undefined,parameters:undefined,...scope};/*
                         NOTE: We pre-compile event listener since they should
                         usually be called more often than binded.
-                    */const compilation=(0,clientnode__WEBPACK_IMPORTED_MODULE_0__.compile)(value,{scope,execute:true,binding:domNode});if(compilation.error)log.warn("Error occurred during compiling given event",`binding "${attributeName}" on node:`,domNode,compilation.error);else this.addSecureEventListener(domNode,name,(...parameters)=>{scope.event=parameters[0];scope.parameters=parameters;try{compilation.templateFunction(/*
+                    */const compilation=(0,clientnode__WEBPACK_IMPORTED_MODULE_0__.compile)(value,{scope,execute:true,binding:domNode});if(compilation.error)void log.warn("Error occurred during compiling given event",`binding "${attributeName}" on node:`,domNode,compilation.error);else this.addSecureEventListener(domNode,name,(...parameters)=>{scope.event=parameters[0];scope.parameters=parameters;try{compilation.templateFunction(/*
                                             NOTE: We want to be sure to have
                                             the same ordering as we have for
                                             the scope names and to call
@@ -293,7 +293,7 @@ try{this.isConnected=false}catch{// Ignore error.
                                             retrieving values. So simple using
                                             "...Object.values(scope)" is not
                                             appreciate here.
-                                        */...compilation.originalScopeNames.map(name=>scope[name]))}catch(error){log.warn("Error occurred during processing","given event binding",`"${attributeName}" on node:`,domNode,`Given expression "${value}" could`,"not be evaluated with given scope","names \""+compilation.scopeNames.join("\", \"")+`": ${(0,clientnode__WEBPACK_IMPORTED_MODULE_0__.represent)(error)}`)}})}}}}/**
+                                        */...compilation.originalScopeNames.map(name=>scope[name]))}catch(error){void log.warn("Error occurred during processing","given event binding",`"${attributeName}" on node:`,domNode,`Given expression "${value}" could`,"not be evaluated with given scope","names \""+compilation.scopeNames.join("\", \"")+`": ${(0,clientnode__WEBPACK_IMPORTED_MODULE_0__.represent)(error)}`)}})}}}}/**
      * Binds properties and event handler to given, sibling, and nested nodes.
      * @param domNode - Node to start traversing from.
      * @param scope - Scope to render property value again.
@@ -326,7 +326,7 @@ let currentDomNode=domNode.firstChild;while(currentDomNode){if(!options.filter||
      * @param options - Evaluation options.
      * @param scope - Scope to evaluate against.
      * @returns Evaluated string result or null.
-     */evaluateCompiledDomNodeTemplate(options,scope){const{domNode,error,templateFunction,scopeNames}=options;if(!(templateFunction&&scopeNames))return null;if(error){log.warn("Error occurred during compiling node content:",error);return null}let output=null;try{output=templateFunction(...scopeNames.map(name=>scope[name]))}catch(error){log.warn(`Error occurred when "${this.self._name}" is  running`,`"${String(templateFunction)}": with bound`,`names "${scopeNames.join("\", \"")}":`,`"${error}". Rendering node:`,domNode)}return output}/**
+     */evaluateCompiledDomNodeTemplate(options,scope){const{domNode,error,templateFunction,scopeNames}=options;if(!(templateFunction&&scopeNames))return null;if(error){void log.warn("Error occurred during compiling node content:",error);return null}let output=null;try{output=templateFunction(...scopeNames.map(name=>scope[name]))}catch(error){void log.warn(`Error occurred when "${this.self._name}" is  running`,`"${String(templateFunction)}": with bound`,`names "${scopeNames.join("\", \"")}":`,`"${error}". Rendering node:`,domNode)}return output}/**
      * Compiles and evaluates given node content and their children. Replaces
      * each node content with their evaluated representation.
      * @param domNode - Node to evaluate.
@@ -492,12 +492,12 @@ if(!handled&&parameters.length>0&&(0,clientnode__WEBPACK_IMPORTED_MODULE_0__.isO
      * and registers in a property mapping object.
      * @param attributeName - Name of given value.
      * @param value - Value to evaluate.
-     */evaluateStringOrNullAndSetAsProperty(attributeName,value){const preEvaluate=attributeName.startsWith("-");const effectiveAttributeName=preEvaluate?attributeName.substring(1):attributeName;let name=(0,clientnode__WEBPACK_IMPORTED_MODULE_0__.delimitedToCamelCase)(effectiveAttributeName);const alias=this.getPropertyAlias(name);if(alias&&Object.prototype.hasOwnProperty.call(this.self.propertyTypes,alias))name=alias;if(Object.prototype.hasOwnProperty.call(this.self.propertyTypes,name)){const type=this.self.propertyTypes[name];if(preEvaluate){if(value){const result=(0,clientnode__WEBPACK_IMPORTED_MODULE_0__.evaluate)(value,{scope:{...clientnode__WEBPACK_IMPORTED_MODULE_0__.UTILITY_SCOPE},binding:this});if(result.error){log.warn(`Failed to process pre-evaluation attribute`,`"${attributeName}": ${result.error}. Will be`,"set to \"undefined\".");this.setInternalPropertyValue(name,undefined)}else{this.setInternalPropertyValue(name,result.result);this.setExternalPropertyValue(name,result.result)}}}else switch(type){case clientnode_property_types__WEBPACK_IMPORTED_MODULE_1__.boolean:case"boolean":{const booleanValue=![null,"false"].includes(value);this.setInternalPropertyValue(name,booleanValue);this.setExternalPropertyValue(name,booleanValue);break}case clientnode_property_types__WEBPACK_IMPORTED_MODULE_1__.func:case"function":{let error=null;let templateFunction;const scopeNames=["data","event","firstArgument","firstParameter","options"];if(value){const result=(0,clientnode__WEBPACK_IMPORTED_MODULE_0__.compile)(value,{scope:scopeNames.concat("parameters","scope",clientnode__WEBPACK_IMPORTED_MODULE_0__.UTILITY_SCOPE_NAMES),execute:true,binding:this});error=result.error;templateFunction=result.templateFunction;if(error)log.warn("Failed to compile given handler",`"${attributeName}": ${error}.`)}this.setInternalPropertyValue(name,(...parameters)=>{if(this.outputEventNames.has(name))void this.reflectEventToProperties(name,parameters);let result=undefined;if(!error){const scope={parameters,...clientnode__WEBPACK_IMPORTED_MODULE_0__.UTILITY_SCOPE};for(const name of scopeNames)scope[name]=parameters[0];try{result=templateFunction?.(...scopeNames.map(name=>scope[name]),parameters,scope,...clientnode__WEBPACK_IMPORTED_MODULE_0__.UTILITY_SCOPE_NAMES.map(name=>clientnode__WEBPACK_IMPORTED_MODULE_0__.UTILITY_SCOPE[name]))}catch(error){log.warn("Failed to evaluate function",`"${attributeName}" with expression`,`"${value}" and scope`,"variables",`"${scopeNames.join("\", \"")}" set to`,`"${(0,clientnode__WEBPACK_IMPORTED_MODULE_0__.represent)(parameters)}":`,`${error}. Set property`,`to "undefined".`)}}if(!this.self.renderProperties.includes(name))this.forwardEvent(name,parameters);return result});if(!error)this.setExternalPropertyValue(name,templateFunction);break}case"json":{if(value){let evaluated;try{evaluated=JSON.parse(value)}catch(error){log.warn("Error occurred during parsing given json",`attribute "${attributeName}":`,(0,clientnode__WEBPACK_IMPORTED_MODULE_0__.represent)(error));break}// NOTE: That both values do have to be avoided.
+     */evaluateStringOrNullAndSetAsProperty(attributeName,value){const preEvaluate=attributeName.startsWith("-");const effectiveAttributeName=preEvaluate?attributeName.substring(1):attributeName;let name=(0,clientnode__WEBPACK_IMPORTED_MODULE_0__.delimitedToCamelCase)(effectiveAttributeName);const alias=this.getPropertyAlias(name);if(alias&&Object.prototype.hasOwnProperty.call(this.self.propertyTypes,alias))name=alias;if(Object.prototype.hasOwnProperty.call(this.self.propertyTypes,name)){const type=this.self.propertyTypes[name];if(preEvaluate){if(value){const result=(0,clientnode__WEBPACK_IMPORTED_MODULE_0__.evaluate)(value,{scope:{...clientnode__WEBPACK_IMPORTED_MODULE_0__.UTILITY_SCOPE},binding:this});if(result.error){void log.warn(`Failed to process pre-evaluation attribute`,`"${attributeName}": ${result.error}. Will be`,"set to \"undefined\".");this.setInternalPropertyValue(name,undefined)}else{this.setInternalPropertyValue(name,result.result);this.setExternalPropertyValue(name,result.result)}}}else switch(type){case clientnode_property_types__WEBPACK_IMPORTED_MODULE_1__.boolean:case"boolean":{const booleanValue=![null,"false"].includes(value);this.setInternalPropertyValue(name,booleanValue);this.setExternalPropertyValue(name,booleanValue);break}case clientnode_property_types__WEBPACK_IMPORTED_MODULE_1__.func:case"function":{let error=null;let templateFunction;const scopeNames=["data","event","firstArgument","firstParameter","options"];if(value){const result=(0,clientnode__WEBPACK_IMPORTED_MODULE_0__.compile)(value,{scope:scopeNames.concat("parameters","scope",clientnode__WEBPACK_IMPORTED_MODULE_0__.UTILITY_SCOPE_NAMES),execute:true,binding:this});error=result.error;templateFunction=result.templateFunction;if(error)void log.warn("Failed to compile given handler",`"${attributeName}": ${error}.`)}this.setInternalPropertyValue(name,(...parameters)=>{if(this.outputEventNames.has(name))void this.reflectEventToProperties(name,parameters);let result=undefined;if(!error){const scope={parameters,...clientnode__WEBPACK_IMPORTED_MODULE_0__.UTILITY_SCOPE};for(const name of scopeNames)scope[name]=parameters[0];try{result=templateFunction?.(...scopeNames.map(name=>scope[name]),parameters,scope,...clientnode__WEBPACK_IMPORTED_MODULE_0__.UTILITY_SCOPE_NAMES.map(name=>clientnode__WEBPACK_IMPORTED_MODULE_0__.UTILITY_SCOPE[name]))}catch(error){void log.warn("Failed to evaluate function",`"${attributeName}" with expression`,`"${value}" and scope`,"variables",`"${scopeNames.join("\", \"")}" set to`,`"${(0,clientnode__WEBPACK_IMPORTED_MODULE_0__.represent)(parameters)}":`,`${error}. Set property`,`to "undefined".`)}}if(!this.self.renderProperties.includes(name))this.forwardEvent(name,parameters);return result});if(!error)this.setExternalPropertyValue(name,templateFunction);break}case"json":{if(value){let evaluated;try{evaluated=JSON.parse(value)}catch(error){void log.warn("Error occurred during parsing given json",`attribute "${attributeName}":`,(0,clientnode__WEBPACK_IMPORTED_MODULE_0__.represent)(error));break}// NOTE: That both values do have to be avoided.
 this.setInternalPropertyValue(name,evaluated);this.setExternalPropertyValue(name,(0,clientnode__WEBPACK_IMPORTED_MODULE_0__.copy)(evaluated,false,1))}else{this.setInternalPropertyValue(name,null);this.setExternalPropertyValue(name,null)}break}case clientnode_property_types__WEBPACK_IMPORTED_MODULE_1__.number:case"number":{if(value===null){this.setInternalPropertyValue(name,value);this.setExternalPropertyValue(name,value);break}/*
                         NOTE: You should not name this variable "number" since
                         babel gets confused caused by existing module wide
                         property type variable "number".
-                    */let numberValue=parseFloat(value);if(isNaN(numberValue))numberValue=undefined;this.setInternalPropertyValue(name,numberValue);this.setExternalPropertyValue(name,numberValue);break}case clientnode_property_types__WEBPACK_IMPORTED_MODULE_1__.string:case"string":{this.setInternalPropertyValue(name,value);this.setExternalPropertyValue(name,value);break}case clientnode_property_types__WEBPACK_IMPORTED_MODULE_1__.any:case clientnode_property_types__WEBPACK_IMPORTED_MODULE_1__.array:case clientnode_property_types__WEBPACK_IMPORTED_MODULE_1__.arrayOf:case clientnode_property_types__WEBPACK_IMPORTED_MODULE_1__.element:case clientnode_property_types__WEBPACK_IMPORTED_MODULE_1__.elementType:case clientnode_property_types__WEBPACK_IMPORTED_MODULE_1__.instanceOf:case clientnode_property_types__WEBPACK_IMPORTED_MODULE_1__.node:case clientnode_property_types__WEBPACK_IMPORTED_MODULE_1__.object:case"object":case clientnode_property_types__WEBPACK_IMPORTED_MODULE_1__.objectOf:case clientnode_property_types__WEBPACK_IMPORTED_MODULE_1__.oneOf:case clientnode_property_types__WEBPACK_IMPORTED_MODULE_1__.oneOfType:case clientnode_property_types__WEBPACK_IMPORTED_MODULE_1__.shape:case clientnode_property_types__WEBPACK_IMPORTED_MODULE_1__.exact:case clientnode_property_types__WEBPACK_IMPORTED_MODULE_1__.symbol:default:{if(value){const evaluated=(0,clientnode__WEBPACK_IMPORTED_MODULE_0__.evaluate)(value,{binding:this});if(evaluated.error){log.warn("Error occurred during processing given",`attribute configuration "${attributeName}":`,evaluated.error);break}// NOTE: That both values do have to be avoided.
+                    */let numberValue=parseFloat(value);if(isNaN(numberValue))numberValue=undefined;this.setInternalPropertyValue(name,numberValue);this.setExternalPropertyValue(name,numberValue);break}case clientnode_property_types__WEBPACK_IMPORTED_MODULE_1__.string:case"string":{this.setInternalPropertyValue(name,value);this.setExternalPropertyValue(name,value);break}case clientnode_property_types__WEBPACK_IMPORTED_MODULE_1__.any:case clientnode_property_types__WEBPACK_IMPORTED_MODULE_1__.array:case clientnode_property_types__WEBPACK_IMPORTED_MODULE_1__.arrayOf:case clientnode_property_types__WEBPACK_IMPORTED_MODULE_1__.element:case clientnode_property_types__WEBPACK_IMPORTED_MODULE_1__.elementType:case clientnode_property_types__WEBPACK_IMPORTED_MODULE_1__.instanceOf:case clientnode_property_types__WEBPACK_IMPORTED_MODULE_1__.node:case clientnode_property_types__WEBPACK_IMPORTED_MODULE_1__.object:case"object":case clientnode_property_types__WEBPACK_IMPORTED_MODULE_1__.objectOf:case clientnode_property_types__WEBPACK_IMPORTED_MODULE_1__.oneOf:case clientnode_property_types__WEBPACK_IMPORTED_MODULE_1__.oneOfType:case clientnode_property_types__WEBPACK_IMPORTED_MODULE_1__.shape:case clientnode_property_types__WEBPACK_IMPORTED_MODULE_1__.exact:case clientnode_property_types__WEBPACK_IMPORTED_MODULE_1__.symbol:default:{if(value){const evaluated=(0,clientnode__WEBPACK_IMPORTED_MODULE_0__.evaluate)(value,{binding:this});if(evaluated.error){void log.warn("Error occurred during processing given",`attribute configuration "${attributeName}":`,evaluated.error);break}// NOTE: That both values do have to be avoided.
 this.setInternalPropertyValue(name,evaluated.result);this.setExternalPropertyValue(name,(0,clientnode__WEBPACK_IMPORTED_MODULE_0__.copy)(evaluated.result,false,1))}else if(this.hasAttribute(attributeName)){this.setInternalPropertyValue(name,true);this.setExternalPropertyValue(name,true)}else{this.setInternalPropertyValue(name,null);this.setExternalPropertyValue(name,null)}break}}}}/// endregion
 /// region render
 /**
@@ -535,7 +535,7 @@ this.setInternalPropertyValue(name,evaluated.result);this.setExternalPropertyVal
      * rendering process by their own.
      * @returns A promise resolving when rendering has been finished. A promise
      * may be needed for classes inheriting from this class.
-     */async render(reason="unknown",resolveRendering=true){this.unRender("reRender",reason);this.childComponentInstances=[];this.renderState.pending=true;if(this.isRoot){await this.resolveRenderingPromiseIfSet(reason,resolveRendering);if(resolveRendering){await Promise.all(this.self.pendingRenderPromises);this.self.pendingRenderPromises=[]}}this.self.pendingRenderPromises.push(this.renderState.promise);this.determineRenderScope();if(!(this.self.doRender&&this.dispatchEvent(new CustomEvent("render",{detail:{reason,scope:this.scope}})))){await this.resolveRenderingPromiseIfSet(reason,resolveRendering);return}const evaluated=(0,clientnode__WEBPACK_IMPORTED_MODULE_0__.evaluate)(`\`${this.self.content}\``,{scope:this.scope});if(evaluated.error){log.warn(`Failed to process template: ${evaluated.error}`);this.renderState.resolve(reason);await Promise.all(this.self.pendingRenderPromises);return}this.applyShadowRootIfNotExisting();/*
+     */async render(reason="unknown",resolveRendering=true){this.unRender("reRender",reason);this.childComponentInstances=[];this.renderState.pending=true;if(this.isRoot){await this.resolveRenderingPromiseIfSet(reason,resolveRendering);if(resolveRendering){await Promise.all(this.self.pendingRenderPromises);this.self.pendingRenderPromises=[]}}this.self.pendingRenderPromises.push(this.renderState.promise);this.determineRenderScope();if(!(this.self.doRender&&this.dispatchEvent(new CustomEvent("render",{detail:{reason,scope:this.scope}})))){await this.resolveRenderingPromiseIfSet(reason,resolveRendering);return}const evaluated=(0,clientnode__WEBPACK_IMPORTED_MODULE_0__.evaluate)(`\`${this.self.content}\``,{scope:this.scope});if(evaluated.error){void log.warn(`Failed to process template: ${evaluated.error}`);this.renderState.resolve(reason);await Promise.all(this.self.pendingRenderPromises);return}this.applyShadowRootIfNotExisting();/*
             NOTE: We first render into an intermediate render target and apply
             slot content until we finally publish everything to the document.
             This avoids painting twice and internetexplorer bugs with an empty
@@ -575,15 +575,15 @@ var property_types_ = __webpack_require__(1);
 ;// external "react-dom/client"
 
 // EXTERNAL MODULE: ./src/Web.ts
-var Web = __webpack_require__(3);
+var Web = /*#__PURE__*/__webpack_require__(3);
 ;// ./src/ReactWeb.ts
 // #!/usr/bin/env babel-node
 // -*- coding: utf-8 -*-
 /** @module react *//* !
     region header
-    [Project page](https://torben.website/web-component-wrapper)
+    [Project page](https://tsickert.com/web-component-wrapper)
 
-    Copyright Torben Sickert (info["~at~"]torben.website) 16.12.2012
+    Copyright Torben Sickert (info["~at~"]tsickert.com) 16.12.2012
 
     License
     -------
@@ -593,7 +593,7 @@ var Web = __webpack_require__(3);
     See https://creativecommons.org/licenses/by/3.0/deed.de
     endregion
 */// region imports
-function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==typeof i?i:i+""}function _toPrimitive(t,r){if("object"!=typeof t||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)};// endregion
+function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==typeof i?i:i+""}function _toPrimitive(t,e){if("object"!=typeof t||!t)return t;var r;if("undefined"!=typeof Symbol&&void 0!==(r=t[Symbol.toPrimitive])){var i=r.call(t,e||"default");if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)};// endregion
 const log=new external_clientnode_.Logger({name:"web-component-wrapper.react-web"});/*
     Live cycle:
 
@@ -718,17 +718,17 @@ domNode.determineRenderScope();if(Object.keys(this.compiledSlots).length===0)dom
                 actually rendering the nested component.
             */if(key&&!Object.prototype.hasOwnProperty.call(staticProperties,"key"))staticProperties.key=key;target=domNode.constructor.content}else{staticProperties.key=key;target=domNode.tagName.toLowerCase()}/// endregion
 /// region pre-compile dynamic properties
-let knownScopeNames=Object.keys(scope);const compiledProperties={};for(const attributeName of domNode.getAttributeNames()){let value=domNode.getAttribute(attributeName);if(value===null)continue;let extend=false;let name="";if(attributeName.startsWith("data-bind-"))name=attributeName.substring("data-bind-".length);else if(attributeName.startsWith("bind-"))name=attributeName.substring("bind-".length);if(name.startsWith("attribute-")||name==="attributes"||name.startsWith("property-")||name==="properties"){const{error,originalScopeNames,templateFunction}=(0,external_clientnode_.compile)(value,{scope:knownScopeNames});if(error){log.warn("Error occurred during compiling given attribute",`binding "${attributeName}" on node:`,domNode,error);continue}if(name==="attributes"||name==="properties")extend=true;else name=name.startsWith("attribute-")?name.substring("attribute-".length):name.substring("property-".length);value={originalScopeNames,templateFunction:templateFunction.bind(this)}}else if(name.startsWith("on-")){name=(0,external_clientnode_.delimitedToCamelCase)(name);if(!Object.prototype.hasOwnProperty.call(scope,"event"))knownScopeNames=[...knownScopeNames,"event"];if(!Object.prototype.hasOwnProperty.call(scope,"parameters"))knownScopeNames=[...knownScopeNames,"parameters"];/*
+let knownScopeNames=Object.keys(scope);const compiledProperties={};for(const attributeName of domNode.getAttributeNames()){let value=domNode.getAttribute(attributeName);if(value===null)continue;let extend=false;let name="";if(attributeName.startsWith("data-bind-"))name=attributeName.substring("data-bind-".length);else if(attributeName.startsWith("bind-"))name=attributeName.substring("bind-".length);if(name.startsWith("attribute-")||name==="attributes"||name.startsWith("property-")||name==="properties"){const{error,originalScopeNames,templateFunction}=(0,external_clientnode_.compile)(value,{scope:knownScopeNames});if(error){void log.warn("Error occurred during compiling given attribute",`binding "${attributeName}" on node:`,domNode,error);continue}if(name==="attributes"||name==="properties")extend=true;else name=name.startsWith("attribute-")?name.substring("attribute-".length):name.substring("property-".length);value={originalScopeNames,templateFunction:templateFunction.bind(this)}}else if(name.startsWith("on-")){name=(0,external_clientnode_.delimitedToCamelCase)(name);if(!Object.prototype.hasOwnProperty.call(scope,"event"))knownScopeNames=[...knownScopeNames,"event"];if(!Object.prototype.hasOwnProperty.call(scope,"parameters"))knownScopeNames=[...knownScopeNames,"parameters"];/*
                     NOTE: We pre-compile event listener since they should
                     usually be called more than it would be re-rendered.
-                */const{error,originalScopeNames,scopeNames,templateFunction}=(0,external_clientnode_.compile)(value,{scope:knownScopeNames,execute:true});if(error){log.warn("Error occurred during compiling given event",`binding "${attributeName}" on node:`,domNode,error);continue}const eventHandler=templateFunction.bind(this);value=(...parameters)=>{scope.event=parameters[0];scope.parameters=parameters;try{eventHandler(/*
+                */const{error,originalScopeNames,scopeNames,templateFunction}=(0,external_clientnode_.compile)(value,{scope:knownScopeNames,execute:true});if(error){void log.warn("Error occurred during compiling given event",`binding "${attributeName}" on node:`,domNode,error);continue}const eventHandler=templateFunction.bind(this);value=(...parameters)=>{scope.event=parameters[0];scope.parameters=parameters;try{eventHandler(/*
                                 NOTE: We want to be ensured to have the same
                                 ordering as we have for the scope names and to
                                 call internal registered getter by retrieving
                                 values. So simple using
                                 "...Object.values(scope)" is not appreciate
                                 here.
-                            */...originalScopeNames.map(name=>scope[name]))}catch(error){log.warn("Error occurred during processing given",`event binding "${attributeName}" on node: `,domNode,`Given expression "${value}" could`,"not be evaluated with given scope names",`"${scopeNames.join("\", \"")}":`,(0,external_clientnode_.represent)(error))}}}else name=attributeName;const mapping={class:"className",for:"htmlFor"};if(Object.prototype.hasOwnProperty.call(mapping,name))name=mapping[name];name=(0,external_clientnode_.delimitedToCamelCase)(name);if(value?.originalScopeNames)// NOTE: "''" marks a property set like in JSX "{...props}".
+                            */...originalScopeNames.map(name=>scope[name]))}catch(error){void log.warn("Error occurred during processing given",`event binding "${attributeName}" on node: `,domNode,`Given expression "${value}" could`,"not be evaluated with given scope names",`"${scopeNames.join("\", \"")}":`,(0,external_clientnode_.represent)(error))}}}else name=attributeName;const mapping={class:"className",for:"htmlFor"};if(Object.prototype.hasOwnProperty.call(mapping,name))name=mapping[name];name=(0,external_clientnode_.delimitedToCamelCase)(name);if(value?.originalScopeNames)// NOTE: "''" marks a property set like in JSX "{...props}".
 compiledProperties[extend?"":name]=value;else if(!isComponent)/*
                     NOTE: Properties of components are evaluated already by
                     them self and set as "internalProperties". Those
@@ -846,18 +846,17 @@ for(const name of["isRoot","isTrusted","__composed"])if(Object.prototype.hasOwnP
 /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop));
 /******/ 
 /************************************************************************/
-let __webpack_exports__ = {};
 /* harmony import */ var clientnode__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
-/* harmony import */ var _decorator_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
-/* harmony import */ var _ReactWeb_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4);
-/* harmony import */ var _Web_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(3);
+/* harmony import */ var _decorator_js__WEBPACK_IMPORTED_MODULE_1__ = /*#__PURE__*/__webpack_require__(2);
+/* harmony import */ var _ReactWeb_js__WEBPACK_IMPORTED_MODULE_2__ = /*#__PURE__*/__webpack_require__(4);
+/* harmony import */ var _Web_js__WEBPACK_IMPORTED_MODULE_3__ = /*#__PURE__*/__webpack_require__(3);
 // #!/usr/bin/env babel-node
 // -*- coding: utf-8 -*-
 /** @module index *//* !
     region header
-    [Project page](https://torben.website/web-component-wrapper)
+    [Project page](https://tsickert.com/web-component-wrapper)
 
-    Copyright Torben Sickert (info["~at~"]torben.website) 16.12.2012
+    Copyright Torben Sickert (info["~at~"]tsickert.com) 16.12.2012
 
     License
     -------
@@ -867,7 +866,7 @@ let __webpack_exports__ = {};
     See https://creativecommons.org/licenses/by/3.0/deed.de
     endregion
 */// region imports
-function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==typeof i?i:i+""}function _toPrimitive(t,r){if("object"!=typeof t||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)};// endregion
+function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==typeof i?i:i+""}function _toPrimitive(t,e){if("object"!=typeof t||!t)return t;var r;if("undefined"!=typeof Symbol&&void 0!==(r=t[Symbol.toPrimitive])){var i=r.call(t,e||"default");if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)};// endregion
 const property=_decorator_js__WEBPACK_IMPORTED_MODULE_1__/* ["default"] */ .A;const ReactWeb=_ReactWeb_js__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .Ay;const reactWebAPI=_ReactWeb_js__WEBPACK_IMPORTED_MODULE_2__/* .api */ .FH;const webAPI=_Web_js__WEBPACK_IMPORTED_MODULE_3__/* .api */ .FH;const Web=_Web_js__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Ay;/**
  * Wraps given react component as web component.
  * @param component - React component to wrap.
@@ -885,15 +884,4 @@ let propertiesToReflectAsAttributes=configuration.propertiesToReflectAsAttribute
      * Runtime generated web component.
      */class ConcreteComponent extends ReactWeb{constructor(...args){super(...args);_defineProperty(this,"self",ConcreteComponent);_defineProperty(this,"internalProperties",configuration.internalProperties?{...configuration.internalProperties}:component.internalProperties?{...component.internalProperties}:{});_defineProperty(this,"unmountOnDisconnect",configuration.unmountOnDisconnect??true)}}_defineProperty(ConcreteComponent,"attachWebComponentAdapterIfNotExists",typeof configuration.attachWebComponentAdapterIfNotExists==="boolean"?configuration.attachWebComponentAdapterIfNotExists:true);_defineProperty(ConcreteComponent,"content",component);_defineProperty(ConcreteComponent,"observedAttributes",ReactWeb.observedAttributes.concat(attributeNames)// NOTE: Respect pre-evaluation indicator attributes.
 .concat(attributeNames.map(name=>`-${name}`)));_defineProperty(ConcreteComponent,"controllableProperties",component.controllableProperties||configuration.controllableProperties||[]);_defineProperty(ConcreteComponent,"eventToPropertyMapping",configuration.eventToPropertyMapping===null?configuration.eventToPropertyMapping:configuration.eventToPropertyMapping?{...configuration.eventToPropertyMapping}:component.eventToPropertyMapping===null?component.eventToPropertyMapping:component.eventToPropertyMapping?{...component.eventToPropertyMapping}:{});_defineProperty(ConcreteComponent,"propertyAliases",{...ReactWeb.propertyAliases,...propertyAliases});_defineProperty(ConcreteComponent,"propertiesToReflectAsAttributes",propertiesToReflectAsAttributes);_defineProperty(ConcreteComponent,"propertyTypes",{...ReactWeb.propertyTypes,...propertyTypes});_defineProperty(ConcreteComponent,"renderProperties",configuration.renderProperties??component.renderProperties??ReactWeb.renderProperties);_defineProperty(ConcreteComponent,"_name",name);const webComponentAPI={component:ConcreteComponent,register:(tagName=(0,clientnode__WEBPACK_IMPORTED_MODULE_0__.camelCaseToDelimited)(name))=>{customElements.define(tagName,ConcreteComponent)}};return webComponentAPI};/* harmony default export */ const src = (wrapAsWebComponent);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, [
-/* harmony export */   "Ay", 0, /* export default binding */ src,
-/* harmony export */   "MZ", 0, /* binding */ property,
-/* harmony export */   "Nc", 0, /* binding */ Web,
-/* harmony export */   "YF", 0, /* binding */ wrapAsWebComponent,
-/* harmony export */   "Z1", 0, /* binding */ webAPI,
-/* harmony export */   "g0", 0, /* binding */ ReactWeb,
-/* harmony export */   "mT", 0, /* binding */ reactWebAPI
-/* harmony export */ ]);
-
-const __webpack_exports__default = __webpack_exports__.Ay;
-export { ReactWeb, Web, __webpack_exports__default as default, property, reactWebAPI, webAPI, wrapAsWebComponent };
+export { ReactWeb, Web, src as default, property, reactWebAPI, webAPI, wrapAsWebComponent };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-component-wrapper",
-  "version": "0.0.614",
+  "version": "0.0.616",
   "description": "Generic web-component base class and framework specific wrapper.",
   "keywords": [
     "component",
@@ -12,16 +12,16 @@
     "webcomponent",
     "web-component"
   ],
-  "homepage": "https://torben.website/web-component-wrapper",
+  "homepage": "https://tsickert.com/web-component-wrapper",
   "bugs": {
-    "email": "info@torben.website",
+    "email": "info@tsickert.com",
     "url": "https://github.com/thaibault/web-component-wrapper/issues"
   },
   "license": "CC-BY-3.0",
   "author": {
-    "email": "info@torben.website",
+    "email": "info@tsickert.com",
     "name": "Torben Sickert",
-    "url": "https://torben.website"
+    "url": "https://tsickert.com"
   },
   "repository": {
     "type": "git",
@@ -53,13 +53,13 @@
   ],
   "sideEffects": false,
   "scripts": {
-    "build": "yarn build:types; yarn build:plain; yarn build:compatible; yarn build:bundle; yarn build:bundle:compatible",
+    "build": "yarn build:types && yarn build:plain && yarn build:compatible && yarn build:bundle && yarn build:bundle:compatible",
     "build:bundle": "weboptimizer build '{__reference__: \"target:bundle\"}'",
     "build:bundle:compatible": "weboptimizer build '{__reference__: [\"target:bundle\", \"target:compatible\", \"target:bundle:compatible\"]}'",
     "build:compatible": "weboptimizer build '{__reference__: \"target:compatible\"}'",
     "build:plain": "weboptimizer build",
     "build:types": "weboptimizer build:types",
-    "check": "yarn check:types; yarn lint",
+    "check": "yarn check:types && yarn lint",
     "check:types": "weboptimizer check:types",
     "clear": "weboptimizer clear",
     "document": "weboptimizer document",
@@ -67,39 +67,39 @@
     "prepare": "yarn build",
     "serve": "weboptimizer serve",
     "start": "yarn serve",
-    "test": "yarn clear; weboptimizer test",
-    "test:browser": "yarn clear; weboptimizer test:browser",
-    "test:coverage": "yarn clear; weboptimizer test:coverage",
-    "test:coverage:report": "yarn clear; weboptimizer test:coverage:report",
+    "test": "yarn clear && weboptimizer test",
+    "test:browser": "yarn clear && weboptimizer test:browser",
+    "test:coverage": "yarn clear && weboptimizer test:coverage",
+    "test:coverage:report": "yarn clear && weboptimizer test:coverage:report",
     "update:documentation": "web-documentation",
     "watch": "weboptimizer build --watch"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^8.0.5",
+    "@babel/eslint-parser": "^8.0.7",
     "@eslint/js": "^10.0.1",
     "@stylistic/eslint-plugin": "^5.10.0",
     "@types/ejs": "^3.1.5",
     "@types/html-minifier": "^4.0.6",
     "@types/jsdom": "^30.0.0",
-    "@types/node": "^26.5.1",
+    "@types/node": "^26.6.5",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@types/webpack-env": "^1.18.8",
-    "@typescript-eslint/eslint-plugin": "^8.70.0",
-    "@typescript-eslint/parser": "^8.70.0",
+    "@typescript-eslint/eslint-plugin": "^8.71.2",
+    "@typescript-eslint/parser": "^8.71.2",
     "@webcomponents/webcomponentsjs": "^2.8.0",
-    "clientnode": "^4.0.1517",
-    "eslint": "^10.10.0",
+    "clientnode": "^4.0.1522",
+    "eslint": "^10.12.0",
     "eslint-config-google": "^0.14.0",
-    "eslint-plugin-jsdoc": "^64.4.0",
-    "jest": "30.5.1",
+    "eslint-plugin-jsdoc": "^65.3.6",
+    "jest": "30.5.2",
     "jsdoc": "^4.0.5",
     "prop-types": "^15.8.1",
-    "react": "^19.3.0",
-    "react-dom": "^19.3.0",
-    "typescript-eslint": "^8.70.0",
-    "web-documentation": "^1.0.55",
-    "weboptimizer": "^4.0.83",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "typescript-eslint": "^8.71.2",
+    "web-documentation": "^1.0.61",
+    "weboptimizer": "^4.0.87",
     "webpack-dev-server": "^6.0.0"
   },
   "peerDependencies": {

package/readme.md

@@ -1,7 +1,7 @@
 <!-- !/usr/bin/env markdown
 -*- coding: utf-8 -*-
 region header
-Copyright Torben Sickert (info["~at~"]torben.website) 16.12.2012
+Copyright Torben Sickert (info["~at~"]tsickert.com) 16.12.2012
 
 License
 -------
@@ -10,7 +10,8 @@ This library written by Torben Sickert stands under a creative commons naming
 3.0 unported license. See https://creativecommons.org/licenses/by/3.0/deed.de
 endregion -->
 
-Project status
+<!--|deDE:Projektstatus-->
+Project Status
 --------------
 
 [![npm](https://img.shields.io/npm/v/web-component-wrapper?color=%23d55e5d&label=npm%20package%20version&logoColor=%23d55e5d&style=for-the-badge)](https://www.npmjs.com/package/web-component-wrapper)
@@ -26,9 +27,9 @@ Project status
 [![code coverage](https://img.shields.io/coverallsCoverage/github/thaibault/web-component-wrapper?label=code%20coverage&style=for-the-badge)](https://coveralls.io/github/thaibault/web-component-wrapper)
 
 [![deploy web documentation](https://img.shields.io/github/actions/workflow/status/thaibault/web-component-wrapper/deploy-web-documentation.yaml?label=deploy%20web%20documentation&style=for-the-badge)](https://github.com/thaibault/web-component-wrapper/actions/workflows/deploy-web-documentation.yaml)
-[![web documentation](https://img.shields.io/website-up-down-green-red/https/torben.website/web-component-wrapper.svg?label=web-documentation&style=for-the-badge)](https://torben.website/web-component-wrapper)
+[![web documentation](https://img.shields.io/website-up-down-green-red/https/tsickert.com/web-component-wrapper.svg?label=web-documentation&style=for-the-badge)](https://tsickert.com/web-component-wrapper)
 
-<!--|deDE:Einsatz-->
+<!--|deDE:Verwendung-->
 Use case
 --------
 
@@ -39,7 +40,6 @@ Encapsulate your components as web-components.
     <!--wd-table-of-contents-->
 </div>
 
-<!--|deDE:Installation-->
 Installation
 ------------
 
@@ -55,10 +55,14 @@ zip file here and inject or request via cdn in HTML:
 npm install web-component-wrapper
 ```
 
+<!--|deDE:Beispiele-->
+<!--|frFR:Exemples-->
+Examples
+--------
+
 ```TypeScript
 import {func, object} from 'clientnode/property-types'
-import {property} from 'web-component-wrapper/decorator'
-import {Web} from 'web-component-wrapper/Web'
+import {property, Web} from 'web-component-wrapper'
 
 export class MyWebComponent<
     TElement = HTMLElement,
@@ -128,35 +132,24 @@ export class MyWebComponent<
 customElements.define('my-web-component', MyWebComponent)
 ```
 
-<!--|deDE:Beispiele-->
-Examples
---------
-
-<!--|deDE:Lade via CDN-->
-### Load via CDN
-
-<!--showExample:hidden-->
-
-```HTML
-<script
-    src="https://unpkg.com/web-component-wrapper@latest/dist/bundle/index.js"
-></script>
-```
-
 <!--|deDE:Einfaches Web-Component Beispiel-->
 ### Simple Web-Component
 
 <!--showExample:JavaScript-->
 
 ```JavaScript
-class MyGreeting extends webComponentWrapper.Web {
+import {
+    property, Web 
+} from 'https://unpkg.com/web-component-wrapper@latest/dist/bundle/index.js'
+
+class MyGreeting extends Web {
     static doRender = true
     static evaluateSlots = true
     static determineRootBinding = false
     static content = '<div>Hello ${rootInstance.greetingName}</div>'
 }
 // Alternative to the decorator syntax:
-webComponentWrapper.property()({self: MyGreeting}, 'greetingName')
+property()({self: MyGreeting}, 'greetingName')
 
 customElements.define('my-greeting', MyGreeting)
 ```
@@ -171,14 +164,18 @@ customElements.define('my-greeting', MyGreeting)
 ### Simple React-Web-Component
 
 ```JavaScript
-class MyReactGreeting extends webComponentWrapper.ReactWeb {
+import {
+    property, ReactWeb
+} from 'https://unpkg.com/web-component-wrapper@latest/dist/bundle/index.js'
+
+class MyReactGreeting extends ReactWeb {
     static doRender = true
     static evaluateSlots = true
     // Content has a react component to wrap.
     static content = ({name}) => <div>Hello {name}</div>
 }
 // Alternative to the decorator syntax:
-webComponentWrapper.property()({self: MyReactGreeting}, 'name')
+property()({self: MyReactGreeting}, 'name')
 
 customElements.define('my-react-greeting', MyReactGreeting)
 ```