element-vir 17.0.2 → 17.0.3

package/dist/declarative-element/define-element-no-inputs.js

@@ -4,7 +4,6 @@ var __setFunctionName = (this && this.__setFunctionName) || function (f, name, p
 };
 import { ensureError, getObjectTypedKeys, kebabCaseToCamelCase, } from '@augment-vir/common';
 import { defineCssVars } from 'lit-css-vars';
-import { property } from 'lit/decorators.js';
 import { css } from '../template-transforms/vir-css/vir-css';
 import { DeclarativeElement, } from './declarative-element';
 import { IgnoreInputsNotBeenSetBeforeWarningSymbol, defaultDeclarativeElementDefinitionOptions, } from './definition-options';
@@ -12,7 +11,7 @@ import { hasDeclarativeElementParent } from './has-declarative-element-parent';
 import { assignInputs } from './properties/assign-inputs';
 import { assertValidCssProperties } from './properties/css-properties';
 import { createEventDescriptorMap } from './properties/element-events';
-import { createElementUpdaterProxy } from './properties/element-updater-proxy';
+import { bindReactiveProperty, createElementUpdaterProxy } from './properties/element-updater-proxy';
 import { createHostClassNamesMap } from './properties/host-classes';
 import { applyHostClasses, hostClassNamesToStylesInput } from './properties/styles';
 import { createRenderParams } from './render-callback';
@@ -146,7 +145,7 @@ export function defineElementNoInputs(initInput) {
                 this.instanceState = createElementUpdaterProxy(this, !initInput.options?.allowPolymorphicState);
                 const stateInitStatic = initInput.stateInitStatic || {};
                 getObjectTypedKeys(stateInitStatic).forEach((stateKey) => {
-                    property()(this, stateKey);
+                    bindReactiveProperty(this, stateKey);
                     this.instanceState[stateKey] = stateInitStatic[stateKey];
                 });
                 this.definition = anonymousClass;

package/dist/declarative-element/directives/test-id.directive.d.ts

@@ -1,5 +1,5 @@
-export declare const testId: (attributeValue: string) => import("element-vir").DirectiveResult<{
-    new (partInfo: import("element-vir").PartInfo): {
+export declare const testId: (attributeValue: string) => import("lit-html/directive").DirectiveResult<{
+    new (partInfo: import("lit-html/directive").PartInfo): {
         readonly element: Element;
         render(testId: string): symbol;
         readonly _$isConnected: boolean;

package/dist/declarative-element/properties/element-updater-proxy.d.ts

@@ -1,3 +1,5 @@
 import { DeclarativeElement } from '../declarative-element';
 import { PropertyInitMapBase } from './element-properties';
+/** Binds the given property key as a reactive property on the given element. */
+export declare function bindReactiveProperty(element: HTMLElement, propertyKey: PropertyKey): void;
 export declare function createElementUpdaterProxy<PropertyInitGeneric extends PropertyInitMapBase>(element: DeclarativeElement, verifyExists: boolean): PropertyInitGeneric;

package/dist/declarative-element/properties/element-updater-proxy.js

@@ -1,6 +1,12 @@
 import { property } from 'lit/decorators.js';
 import { isElementVirStateSetup } from './element-vir-state-setup';
 import { isObservableProperty, } from './observable-property/observable-property';
+/** Binds the given property key as a reactive property on the given element. */
+export function bindReactiveProperty(element, propertyKey) {
+    if (!(propertyKey in element)) {
+        property()(element, propertyKey);
+    }
+}
 function assertValidPropertyName(propKey, element, elementTagName) {
     if (typeof propKey !== 'string' && typeof propKey !== 'number' && typeof propKey !== 'symbol') {
         throw new Error(`Property name must be a string, got type '${typeof propKey}' from: '${String(propKey)}' for '${elementTagName.toLowerCase()}'`);
@@ -21,11 +27,7 @@ export function createElementUpdaterProxy(element, verifyExists) {
             assertValidPropertyName(propertyKey, element, element.tagName);
         }
         else {
-            /**
-             * No need to check if it's already a property or not, as the property function already
-             * makes that check.
-             */
-            property()(element, propertyKey);
+            bindReactiveProperty(element, propertyKey);
         }
     }
     function valueGetter(target, propertyKey) {
@@ -34,7 +36,7 @@ export function createElementUpdaterProxy(element, verifyExists) {
     }
     const propsProxy = new Proxy({}, {
         get: valueGetter,
-        set: (target, propertyKey, rawNewValue) => {
+        set(target, propertyKey, rawNewValue) {
             const newValue = isElementVirStateSetup(rawNewValue)
                 ? rawNewValue._elementVirStateSetup()
                 : rawNewValue;
@@ -76,7 +78,7 @@ export function createElementUpdaterProxy(element, verifyExists) {
             setValueOnElement(newValue);
             return true;
         },
-        ownKeys: (target) => {
+        ownKeys(target) {
             return Reflect.ownKeys(target);
         },
         getOwnPropertyDescriptor(target, propertyName) {
@@ -91,7 +93,7 @@ export function createElementUpdaterProxy(element, verifyExists) {
             }
             return undefined;
         },
-        has: (target, propertyName) => {
+        has(target, propertyName) {
             return Reflect.has(target, propertyName);
         },
     });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-vir",
-    "version": "17.0.2",
+    "version": "17.0.3",
     "keywords": [
         "custom",
         "web",
@@ -29,7 +29,7 @@
         "docs": "virmator docs",
         "format": "virmator format",
         "publish": "virmator publish \"npm run compile && npm run test:all\"",
-        "start": "npm install && virmator frontend",
+        "start": "npm run compile && npm install && virmator frontend",
         "test": "virmator test-web",
         "test:all": "concurrently -c auto --kill-others-on-fail --colors --names types,tests,spelling,format,docs \"npm run test:types\" \"npm run test:coverage\" \"npm run test:spelling\" \"npm run test:format\" \"npm run test:docs\"",
         "test:coverage": "virmator test-web coverage",
@@ -41,8 +41,9 @@
     },
     "dependencies": {
         "@augment-vir/common": "^22.0.0",
-        "lit": "^2.8.0",
-        "lit-css-vars": "^3.0.3",
+        "lit": "^3.1.0",
+        "lit-css-vars": "^3.0.6",
+        "lit-html": "^3.1.0",
         "object-shape-tester": "^1.0.2",
         "run-time-assertions": "^0.2.1"
     },
@@ -51,8 +52,8 @@
         "@augment-vir/node-js": "^22.0.0",
         "@istanbuljs/nyc-config-typescript": "^1.0.2",
         "@open-wc/testing": "^4.0.0",
-        "@types/chai": "^4.3.10",
-        "@types/mocha": "^10.0.4",
+        "@types/chai": "^4.3.11",
+        "@types/mocha": "^10.0.6",
         "@web/dev-server-esbuild": "^1.0.1",
         "@web/test-runner": "^0.18.0",
         "@web/test-runner-commands": "^0.9.0",
@@ -62,8 +63,9 @@
         "concurrently": "^8.2.2",
         "cspell": "^8.0.0",
         "dependency-cruiser": "^15.3.0",
-        "element-book": "^10.1.6",
-        "esbuild": "^0.19.6",
+        "element-book": "^10.1.9",
+        "element-vir": "file:./",
+        "esbuild": "^0.19.7",
         "istanbul-smart-text-reporter": "^1.1.3",
         "markdown-code-example-inserter": "^0.3.3",
         "mocha-spec-reporter-with-file-names": "^0.0.3",
@@ -78,16 +80,16 @@
         "prettier-plugin-sort-json": "^3.1.0",
         "prettier-plugin-toml": "^1.0.0",
         "ts-node": "^10.9.1",
-        "type-fest": "^4.8.1",
+        "type-fest": "^4.8.2",
         "typedoc": "^0.25.3",
         "typescript": "~5.2.2",
+        "vira": "^2.5.4",
         "virmator": "^11.1.3",
         "vite": "^4.5.0",
         "vite-tsconfig-paths": "^4.2.1"
     },
     "overrides": {
-        "lit": "^2.8.0",
-        "@open-wc/scoped-elements": "2.2.3",
-        "@open-wc/testing-helpers": "2.3.0"
+        "lit": "^3.1.0",
+        "element-vir": "*"
     }
 }