web-component-wrapper 0.0.599 → 0.0.601

package/dist/type.d.ts

@@ -0,0 +1,100 @@
+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';
+export interface RenderState {
+    promise: Promise<string>;
+    pending: boolean;
+    resolve: (reason: string) => void;
+}
+export interface CompilerOptions {
+    filter?: (domNode: Node) => boolean;
+    ignoreComponents?: boolean;
+    ignoreNestedComponents?: boolean;
+    unsafe?: boolean;
+}
+export interface CompiledDomNodeTemplateItem {
+    domNode: Node;
+    children: Array<CompiledDomNodeTemplateItem>;
+    error?: null | string;
+    scopeNames?: Array<string>;
+    template?: string;
+    templateFunction?: TemplateFunction;
+}
+export type DomNodeToCompiledTemplateMap<NodeType = Node> = Map<NodeType, CompiledDomNodeTemplateItem>;
+export type EventCallbackMapping = Map<string, () => void>;
+export type EventMapping<ExternalProperties extends Mapping<unknown> = Mapping<unknown>, InternalProperties extends Mapping<unknown> = Mapping<unknown>> = (null | [
+    Partial<ExternalProperties>,
+    Partial<InternalProperties>
+] | Partial<ExternalProperties>);
+export type EventMapper<E extends Mapping<unknown> = Mapping<unknown>, I extends Mapping<unknown> = Mapping<unknown>, P extends Array<unknown> = Array<unknown>> = (...parameters: P) => EventMapping<E, I> | Promise<EventMapping<E, I>>;
+export type EventToPropertyMapping<E extends Mapping<unknown> = Mapping<unknown>, I extends Mapping<unknown> = Mapping<unknown>, P extends Array<unknown> = Array<unknown>> = Mapping<true | EventMapper<E, I, P>>;
+export type PropertyType = string | ValueOf<typeof PropertyTypes>;
+export type PropertyConfiguration = PropertyType;
+export type ValidationMapping = ValidationMap<ValueOf<typeof PropertyTypes>>;
+export type PropertiesValidationMap = Mapping<ValueOf<typeof PropertyTypes>>;
+export type PropertiesConfiguration = Mapping | PropertiesValidationMap;
+export type NormalizedAttributesReflectionConfiguration = Map<string, PropertyConfiguration>;
+export type AttributesReflectionConfiguration = (string | Array<string> | PropertiesConfiguration | NormalizedAttributesReflectionConfiguration);
+export type ReadonlyScope = typeof UTILITY_SCOPE;
+export type Scope = {
+    -readonly [key in keyof ReadonlyScope]: ReadonlyScope[key];
+};
+export type CallbackScope<Type = unknown> = Scope & {
+    data: Type;
+    event: Type;
+    firstArgument: Type;
+    firstParameter: Type;
+    options: Type;
+    parameters: Type;
+    scope: CallbackScope<Type>;
+};
+export type ScopeDeclaration = Array<string> | Mapping<unknown>;
+export interface PreCompiledItem {
+    originalScopeNames: Array<string>;
+    templateFunction: TemplateFunction;
+}
+export type ReactComponentBaseProperties<TElement = HTMLElement> = Mapping<unknown> & {
+    children?: Array<React.ReactNode> | React.ReactNode;
+    dangerouslySetInnerHTML?: HTMLAttributes<TElement>['dangerouslySetInnerHTML'];
+    key?: string;
+    ref?: (null | {
+        current?: ComponentAdapter;
+    } | ((reference: ComponentAdapter) => void));
+};
+export type ReactRenderBaseItemFactory = (scope: Mapping<unknown>) => ReactRenderBaseItem;
+export type ReactRenderItemFactory = (scope: Mapping<unknown>) => ReactRenderItem;
+export type ReactRenderItemsFactory = Array<ReactRenderItemFactory> | ReactRenderItemFactory;
+export type ReactRenderBaseItem = ReactElement | string | null;
+export type ReactRenderItem = ((...parameters: Array<unknown>) => ReactRenderBaseItem) | ReactRenderBaseItem;
+export type ReactRenderItems = Array<ReactRenderItem> | ReactRenderItem;
+export interface WebComponentConfiguration<ExternalProperties extends Mapping<unknown> = Mapping<unknown>, InternalProperties extends Mapping<unknown> = Mapping<unknown>, EventParameters extends Array<unknown> = Array<unknown>> {
+    attachWebComponentAdapterIfNotExists?: boolean;
+    controllableProperties?: Array<string>;
+    eventToPropertyMapping?: (EventToPropertyMapping<ExternalProperties, InternalProperties, EventParameters> | null);
+    internalProperties?: InternalProperties;
+    propertiesToReflectAsAttributes?: AttributesReflectionConfiguration;
+    propertyAliases?: Mapping;
+    propTypes?: PropertiesConfiguration;
+    renderProperties?: Array<string>;
+    unmountOnDisconnect?: boolean;
+}
+export interface StaticWebComponent<ComponentType = unknown, ExternalProperties extends Mapping<unknown> = Mapping<unknown>, InternalProperties extends Mapping<unknown> = Mapping<unknown>, EventParameters extends Array<unknown> = Array<unknown>> extends WebComponentConfiguration<ExternalProperties, InternalProperties, EventParameters> {
+    webComponentAdapterWrapped?: string;
+    wrapped?: ComponentType;
+    _name?: string;
+    ___types?: {
+        name?: {
+            name?: string;
+        };
+    };
+}
+export type ComponentType<PropertyTypes = Mapping<unknown>> = Omit<ReactComponentType<PropertyTypes>, 'propTypes'> & StaticWebComponent;
+export interface ComponentAdapter<Properties = Mapping<unknown>, State = Mapping<unknown>> {
+    properties?: Properties;
+    state?: State;
+}
+export interface WebComponentAPI<TElement = HTMLElement, ExternalProperties extends Mapping<unknown> = Mapping<unknown>, InternalProperties extends Mapping<unknown> = Mapping<unknown>, Type extends typeof Web<TElement, ExternalProperties, InternalProperties> = typeof Web<TElement, ExternalProperties, InternalProperties>> {
+    component: Type;
+    register: (tagName?: string) => void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-component-wrapper",
-  "version": "0.0.599",
+  "version": "0.0.601",
   "description": "Generic web-component base class and framework specific wrapper.",
   "keywords": [
     "component",
@@ -24,8 +24,23 @@
     "url": "https://torben.website"
   },
   "main": "dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./decorator": "./dist/decorator.js",
+    "./ReactWeb": "./dist/ReactWeb.js",
+    "./Web": "./dist/Web.js",
+    "./type": "./dist/type.js"
+  },
+  "typesVersions": {
+    "*": {
+      "type": [
+        "./dist/type.d.ts"
+      ]
+    }
+  },
   "files": [
-    "dist"
+    "dist",
+    "polyfill.html.ejs"
   ],
   "repository": {
     "type": "git",
@@ -68,7 +83,7 @@
     "@typescript-eslint/eslint-plugin": "^8.61.0",
     "@typescript-eslint/parser": "^8.61.0",
     "@webcomponents/webcomponentsjs": "^2.8.0",
-    "clientnode": "^4.0.1422",
+    "clientnode": "^4.0.1423",
     "eslint": "^10.5.0",
     "eslint-config-google": "^0.14.0",
     "eslint-plugin-jsdoc": "^63.0.2",
@@ -78,7 +93,7 @@
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "typescript-eslint": "^8.61.0",
-    "web-documentation": "^1.0.37",
+    "web-documentation": "^1.0.39",
     "weboptimizer": "^3.0.24",
     "webpack-dev-server": "^5.2.5"
   },

package/polyfill.html.ejs

@@ -0,0 +1,74 @@
+<!--
+    Promise: React uses for rendering.
+
+    NOTE: "Array.from", "Object.assign" and "Promise" will be polyfilled by the
+    webcomponent polyfill.
+-->
+<%_
+    const features = new Set([
+        // Most polyfills are determined via "create-polyfill-service-url".
+        'Array.from',
+        'Array.isArray',
+        'Array.prototype.entries',
+        'Array.prototype.filter',
+        // Is used by "Object.entries" polyfill.
+        'Array.prototype.flat',
+        // clientnode - Usage.
+        'Array.prototype.includes',
+        'Array.prototype.keys',
+        'Array.prototype.map',
+        'Array.prototype.values',
+        // Usual array interaction.
+        'Array.prototype.@@iterator',
+        'ArrayBuffer',
+        'console',
+        'CustomEvent',
+        'DataView',
+        'document',
+        // Usual dom interactions.
+        'DOMTokenList.prototype.@@iterator',
+        'Function.prototype.bind',
+        'JSON',
+        'Map',
+        // Usual dom interactions.
+        'NodeList.prototype.@@iterator',
+        'Object.defineProperty',
+        // Iterating over mapping objects everywhere.
+        'Object.entries',
+        // Applying a scope object during template function call.
+        'Object.keys',
+        'Object.values',
+        'Promise',
+        'Set',
+        // Many usages e.g. in clientnode.
+        'String.prototype.endsWith',
+        'String.prototype.includes',
+        'String.prototype.startsWith',
+        'String.prototype.trim',
+        // Used by react to identify its own entities.
+        'Symbol',
+        'Symbol.for',
+        'Symbol.iterator',
+        'Symbol.toStringTag',
+        'WeakMap',
+        'WeakSet'
+    ].concat(
+        typeof _.additionalFeatures === 'undefined' ? [] : _.additionalFeatures
+    ))
+_%>
+<script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?version=4.8.0&features=<%- encodeURIComponent(Array.from(features).sort().join(',')) %>"></script>
+
+<%_ if (typeof _.webComponents === 'undefined' || _.webComponents) { _%>
+    <script>
+        /*
+            Only provide the shadow dom polyfill and avoid to patch a lot of
+            dom apis.
+        */
+        window.ShadyDOM = {noPatch: true}
+    </script>
+    <script src="/@webcomponents/webcomponentsjs/webcomponents-bundle.js">
+    </script>
+    <script
+        src="/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
+    ></script>
+<%_ } _%>

package/readme.md

@@ -127,11 +127,37 @@ export class MyWebComponent<
 customElements.define('my-web-component', MyWebComponent)
 ```
 
+<!--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"
+></script>
+```
+
+<!--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'
+};
+
+customElements.define('my-greeting', MyGreeting)
+```
+
 <!--showExample-->
 
 ```HTML
-<script src="https://unpkg.com/web-component-wrapper@latest/bundle/Web.js">
-</script>
+<my-greeting name="World"></my-greeting>
 ```
 
 ## Data-Flow