web-component-wrapper 0.0.601 → 0.0.604

package/dist/type.d.ts

@@ -1,7 +1,7 @@
-import { Mapping, TemplateFunction, UTILITY_SCOPE, ValueOf } from 'clientnode';
-import PropertyTypes, { ValidationMap } from 'clientnode/property-types';
-import React, { ComponentType as ReactComponentType, HTMLAttributes, ReactElement } from 'react';
-import Web from './Web';
+import type { Mapping, TemplateFunction, UTILITY_SCOPE, ValueOf } from 'clientnode';
+import type { default as PropertyTypes, ValidationMap } from 'clientnode/property-types';
+import type { default as React, ComponentType as ReactComponentType, HTMLAttributes, ReactElement } from 'react';
+import type Web from './Web';
 export interface RenderState {
     promise: Promise<string>;
     pending: boolean;

package/dist/type.js

@@ -1 +1,16 @@
-"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}));
+if(typeof window==='undefined'||window===null)var window=(typeof global==='undefined'||global===null)?{}:global;// -*- coding: utf-8 -*-
+/** @module type *//* !
+    region header
+    [Project page](https://torben.website/storelocator)
+
+    Copyright Torben Sickert (info["~at~"]torben.website) 16.12.2012
+
+    License
+    -------
+
+    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
+*/// region imports
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-component-wrapper",
-  "version": "0.0.601",
+  "version": "0.0.604",
   "description": "Generic web-component base class and framework specific wrapper.",
   "keywords": [
     "component",
@@ -24,11 +24,16 @@
     "url": "https://torben.website"
   },
   "main": "dist/index.js",
+  "type": "module",
   "exports": {
     ".": "./dist/index.js",
+    "./compatible": "./dist/compatible/index.js",
     "./decorator": "./dist/decorator.js",
+    "./compatible/decorator": "./dist/compatible/decorator.js",
     "./ReactWeb": "./dist/ReactWeb.js",
+    "./compatible/ReactWeb": "./dist/compatible/ReactWeb.js",
     "./Web": "./dist/Web.js",
+    "./compatible/Web": "./dist/compatible/Web.js",
     "./type": "./dist/type.js"
   },
   "typesVersions": {
@@ -69,33 +74,33 @@
     "watch": "weboptimizer build --watch"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.29.7",
-    "@babel/runtime": "^7.29.7",
+    "@babel/eslint-parser": "^8.0.1",
+    "@babel/runtime": "^8.0.0",
     "@eslint/js": "^10.0.1",
     "@stylistic/eslint-plugin": "^5.10.0",
     "@types/ejs": "^3.1.5",
     "@types/html-minifier": "^4.0.6",
     "@types/jsdom": "^28.0.3",
-    "@types/node": "^25.9.3",
+    "@types/node": "^26.1.1",
     "@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",
+    "@typescript-eslint/eslint-plugin": "^8.65.0",
+    "@typescript-eslint/parser": "^8.65.0",
     "@webcomponents/webcomponentsjs": "^2.8.0",
-    "clientnode": "^4.0.1423",
-    "eslint": "^10.5.0",
+    "clientnode": "^4.0.1467",
+    "eslint": "^10.7.0",
     "eslint-config-google": "^0.14.0",
-    "eslint-plugin-jsdoc": "^63.0.2",
+    "eslint-plugin-jsdoc": "^63.2.0",
     "jest": "30.4.2",
     "jsdoc": "^4.0.5",
     "prop-types": "^15.8.1",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
-    "typescript-eslint": "^8.61.0",
-    "web-documentation": "^1.0.39",
-    "weboptimizer": "^3.0.24",
-    "webpack-dev-server": "^5.2.5"
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "typescript-eslint": "^8.65.0",
+    "web-documentation": "^1.0.42",
+    "weboptimizer": "^4.0.34",
+    "webpack-dev-server": "^6.0.0"
   },
   "peerDependencies": {
     "@babel/runtime": "*",
@@ -162,9 +167,18 @@
     },
     "module": {
       "optimizer": {
-        "babelMinify": {
-          "#": "To provide a logging output we need to exclude this feature.",
-          "__evaluate__": "self.debug ? {bundle: null, module: null} : {bundle: {transform: {removeConsole: false}}, module: /*NOTE: Wrongly produces a void function around 'getAttributeNames': {removeConsole: false}*/null}"
+        "terser": {
+          "terserOptions": {
+            "compress": {
+              "#": "To provide a logging output we need to exclude this feature.",
+              "drop_console": {
+                "__evaluate__": "false"
+              },
+              "drop_debugger": {
+                "__evaluate__": "false"
+              }
+            }
+          }
         }
       }
     },
@@ -183,7 +197,6 @@
           "normal": true
         }
       },
-      "libraryName": "webComponentWrapper",
       "module": {
         "preprocessor": {
           "javaScript": {

package/readme.md

@@ -127,29 +127,35 @@ 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/Web.js"
-></script>
-<script
-    src="https://unpkg.com/web-component-wrapper@latest/dist/bundle/decorator.js"
+    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 {
-    static doRender: true
-    static evaluateSlots: true
-    static observedAttributes = ['name']
-    static content = '<div>Hello ${name}</div>'
-
-    @property()
-    name = 'string'
-};
+    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')
 
 customElements.define('my-greeting', MyGreeting)
 ```
@@ -157,10 +163,26 @@ customElements.define('my-greeting', MyGreeting)
 <!--showExample-->
 
 ```HTML
-<my-greeting name="World"></my-greeting>
+<my-greeting greeting-name="World"></my-greeting>
+```
+
+<!--|deDE:Einfaches React-Web-Component Beispiel-->
+### Simple React-Web-Component
+
+```JavaScript
+class MyReactGreeting extends webComponentWrapper.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')
+
+customElements.define('my-react-greeting', MyReactGreeting)
 ```
 
-## Data-Flow
+### Data-Flow
 
 Data can flow into a component via
 
@@ -172,7 +194,7 @@ Data can be communicated back via:
 - Properties `log.info(instance.value)`
 - Observable events `instance.addEventListener('click', (event) => console.log(event.detail.value))`
 
-### Configuring Data-Flow
+#### Configuring Data-Flow
 
 A Web-Component-Wrapper component forwards (transformed) given properties into
 a wrapped React component via `props` and reads data via provided callbacks