element-vir 4.1.4 → 5.0.0

package/README.md

@@ -150,6 +150,33 @@ export const MySimpleWithPropsElement = defineFunctionalElement({
 });
 ```
 
+## Updating properties
+
+Grab `setProps` from `renderCallback`'s parameters to update the values in `props`. This causes a re-render. (Note that this example also uses the `listen` directive to respond to click events.)
+
+<!-- example-link: src/readme-examples/my-simple-with-set-props.element.ts -->
+
+```TypeScript
+import {defineFunctionalElement, html, listen} from 'element-vir';
+
+export const MySimpleWithPropsElement = defineFunctionalElement({
+    tagName: 'my-simple-element-with-props',
+    props: {
+        currentUsername: 'dev',
+        currentEmail: undefined as string | undefined,
+    },
+    renderCallback: ({props, setProps}) => html`
+        <span
+            ${listen('click', () => {
+                setProps({currentUsername: 'new name!'});
+            })}
+        >
+            Hello there ${props.currentUsername}!
+        </span>
+    `,
+});
+```
+
 ## Assigning to properties (inputs)
 
 Use the `assign` directive to assign properties to child custom elements:
@@ -216,14 +243,14 @@ export const MyAppWithEventsElement = defineFunctionalElement({
     props: {
         myNumber: -1,
     },
-    renderCallback: ({props}) => html`
+    renderCallback: ({props, setProps}) => html`
         <h1>My App</h1>
         <${MySimpleWithEventsElement}
             ${listen(MySimpleWithEventsElement.events.logoutClick, () => {
                 console.info('logout triggered');
             })}
             ${listen(MySimpleWithEventsElement.events.randomNumber, (event) => {
-                props.myNumber = event.detail;
+                setProps({myNumber: event.detail});
             })}
         >
         </${MySimpleWithEventsElement}>

package/dist/functional-element/render-callback.d.ts

@@ -5,8 +5,10 @@ import { PropertyInitMapBase } from './element-properties';
 import { FunctionalElementInstance } from './functional-element';
 export declare type RenderCallback<PropertyInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap> = (params: RenderParams<PropertyInitGeneric, EventsInitGeneric>) => TemplateResult;
 export declare type InitCallback<PropertyInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap> = (params: RenderParams<PropertyInitGeneric, EventsInitGeneric>) => void;
+export declare type SetPropCallback<PropertyInitGeneric extends PropertyInitMapBase> = (props: Partial<PropertyInitGeneric>) => void;
 export declare type RenderParams<PropertyInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap> = {
-    props: PropertyInitGeneric;
+    props: Readonly<PropertyInitGeneric>;
+    setProps: SetPropCallback<PropertyInitGeneric>;
     events: EventDescriptorMap<EventsInitGeneric>;
     host: FunctionalElementInstance<PropertyInitGeneric>;
     dispatch: <EventTypeNameGeneric extends keyof EventsInitGeneric>(event: TypedEvent<EventTypeNameGeneric extends string ? EventTypeNameGeneric : never, EventInitMapEventDetailExtractor<EventTypeNameGeneric, EventsInitGeneric>>) => boolean;

package/dist/functional-element/render-callback.js

@@ -1,3 +1,4 @@
+import { getObjectTypedKeys } from 'augment-vir';
 export function createRenderParams(element, eventsMap) {
     const renderParams = {
         /**
@@ -6,8 +7,13 @@ export function createRenderParams(element, eventsMap) {
          */
         dispatch: (event) => element.dispatchEvent(event),
         genericDispatch: (event) => element.dispatchEvent(event),
+        setProps: (partialProps) => {
+            getObjectTypedKeys(partialProps).forEach((propKey) => {
+                element.instanceProps[propKey] = partialProps[propKey];
+            });
+        },
         host: element,
-        props: element.instanceProps,
+        props: { ...element.instanceProps },
         events: eventsMap,
     };
     return renderParams;

package/dist/template-transforms/vir-html/html-transform.js

@@ -1,4 +1,4 @@
-import { collapseSpaces, safeMatch } from 'augment-vir';
+import { collapseWhiteSpace, safeMatch } from 'augment-vir';
 import { functionalElementRequired } from '../../require-functional-element';
 import { hasStaticTagName } from '../has-static-tag-name';
 import { makeCheckTransform, transformTemplate, } from '../transform-template';
@@ -23,7 +23,7 @@ const htmlChecksAndTransforms = [
 function extractCustomElementTags(input) {
     const tagNameMatches = safeMatch(input, /<\/[\s\n]*[^\s\n><]+[\s\n]*>/g);
     return tagNameMatches.reduce((accum, match) => {
-        const tagName = collapseSpaces(match.replace(/\n/g, ' ')).replace(/<\/|>/g, '');
+        const tagName = collapseWhiteSpace(match.replace(/\n/g, ' ')).replace(/<\/|>/g, '');
         // custom elements always have a dash in them
         if (tagName.includes('-')) {
             return accum.concat(tagName);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-vir",
-    "version": "4.1.4",
+    "version": "5.0.0",
     "keywords": [
         "custom",
         "web",
@@ -31,22 +31,18 @@
         "prepublishOnly": "npm run compile && npm run test:full",
         "spellcheck": "virmator spellcheck",
         "start": "npm install && vite --force --config ./src/vite/vite.config.ts",
-        "test": "npm run type-check && npm run jest",
+        "test": "npm run type-check && virmator test --no-write-config",
         "test:full": "npm test && npm run spellcheck && virmator format check && npm run update-docs -- --check",
         "type-check": "tsc --noEmit",
         "update-docs": "virmator code-in-markdown README.md --index src/index.ts"
     },
     "dependencies": {
-        "augment-vir": "^1.5.1",
-        "lit": "^2.2.0"
+        "augment-vir": "2.1.0",
+        "lit": "2.2.3"
     },
     "devDependencies": {
-        "@types/jest": "^27.4.1",
-        "jest": "^27.5.1",
-        "ts-jest": "^27.1.3",
-        "ts-node": "^10.6.0",
-        "typescript": "^4.6.2",
-        "virmator": "^1.4.4",
-        "vite": "^2.8.6"
+        "jest-environment-jsdom": "28.0.2",
+        "virmator": "2.0.7",
+        "vite": "2.9.8"
     }
 }