chore: more testing

Author: John Jenkins

src/client/client-host-ref.ts

@@ -49,6 +49,7 @@ export const registerHost = (hostElement: d.HostElement, cmpMeta: d.ComponentRun
     $hostElement$: hostElement,
     $cmpMeta$: cmpMeta,
     $instanceValues$: new Map(),
+    $serializerValues$: new Map(),
   };
   if (BUILD.isDev) {
     hostRef.$renderCount$ = 0;

src/compiler/transformers/decorators-to-static/convert-decorators.ts

@@ -125,13 +125,15 @@ const visitClassDeclaration = (
       filteredMethodsAndFields,
       importAliasMap.get('PropSerialize'),
       'PropSerialize',
+      importAliasMap.get('Prop'),
     );
-    serializeDecoratorsToStatic(
+    const deserializers = serializeDecoratorsToStatic(
       typeChecker,
       decoratedMembers,
       filteredMethodsAndFields,
       importAliasMap.get('AttrDeserialize'),
       'AttrDeserialize',
+      importAliasMap.get('Prop'),
     );
     propDecoratorsToStatic(
       diagnostics,
@@ -141,6 +143,7 @@ const visitClassDeclaration = (
       filteredMethodsAndFields,
       importAliasMap.get('Prop'),
       serializers,
+      deserializers,
     );
     stateDecoratorsToStatic(decoratedMembers, filteredMethodsAndFields, typeChecker, importAliasMap.get('State'));
     eventDecoratorsToStatic(

src/compiler/transformers/decorators-to-static/prop-decorator.ts

@@ -42,7 +42,18 @@ export const propDecoratorsToStatic = (
 ): void => {
   const properties = decoratedProps
     .filter((prop) => ts.isPropertyDeclaration(prop) || ts.isGetAccessor(prop))
-    .map((prop) => parsePropDecorator(diagnostics, typeChecker, program, prop, decoratorName, newMembers, serializers, deserializers))
+    .map((prop) =>
+      parsePropDecorator(
+        diagnostics,
+        typeChecker,
+        program,
+        prop,
+        decoratorName,
+        newMembers,
+        serializers,
+        deserializers,
+      ),
+    )
     .filter((prop): prop is ts.PropertyAssignment => prop != null);
 
   if (properties.length > 0) {

src/compiler/transformers/decorators-to-static/serialize-decorators.ts

@@ -1,8 +1,6 @@
-import { flatOne } from '@utils';
 import ts from 'typescript';
 
-import type * as d from '../../../declarations';
-import { convertValueToLiteral, createStaticGetter, retrieveTsDecorators } from '../transform-utils';
+import { convertValueToLiteral, createStaticGetter, retrieveTsDecorators, tsPropDeclName } from '../transform-utils';
 import { getDecoratorParameters, isDecoratorNamed } from './decorator-utils';
 
 export const serializeDecoratorsToStatic = (
@@ -11,37 +9,56 @@ export const serializeDecoratorsToStatic = (
   newMembers: ts.ClassElement[],
   decoratorName: string,
   translateType: 'PropSerialize' | 'AttrDeserialize',
+  propDecoratorName: string,
 ) => {
+  // we only care about `@Prop` decorated properties
+  const props: string[] = decoratedProps
+    .filter((prop) => ts.isPropertyDeclaration(prop) || ts.isGetAccessor(prop))
+    .flatMap((prop) => {
+      if (retrieveTsDecorators(prop)?.find(isDecoratorNamed(propDecoratorName))) {
+        const { staticName } = tsPropDeclName(prop, typeChecker);
+        return [staticName];
+      }
+      return [];
+    });
+
   const serializers = decoratedProps
     .filter(ts.isMethodDeclaration)
-    .map((method) => parseSerializeDecorator(typeChecker, method, decoratorName));
-
-  const flatSerializers = flatOne(serializers);
+    .flatMap((method) => parseSerializeDecorator(typeChecker, method, decoratorName, props));
 
-  if (flatSerializers.length > 0) {
+  if (serializers.length > 0) {
     if (translateType === 'PropSerialize') {
-      newMembers.push(createStaticGetter('serializers', convertValueToLiteral(flatSerializers)));
+      newMembers.push(createStaticGetter('serializers', convertValueToLiteral(serializers)));
     } else {
-      newMembers.push(createStaticGetter('deserializers', convertValueToLiteral(flatSerializers)));
+      newMembers.push(createStaticGetter('deserializers', convertValueToLiteral(serializers)));
     }
   }
 
-  return flatSerializers;
+  return serializers;
 };
 
 const parseSerializeDecorator = (
   typeChecker: ts.TypeChecker,
   method: ts.MethodDeclaration,
   decoratorName: string,
-): d.ComponentCompilerChangeHandler[] => {
+  props: string[],
+) => {
   const methodName = method.name.getText();
   const decorators = retrieveTsDecorators(method) ?? [];
-  return decorators.filter(isDecoratorNamed(decoratorName)).map((decorator) => {
+
+  return decorators.filter(isDecoratorNamed(decoratorName)).flatMap((decorator) => {
     const [propName] = getDecoratorParameters<string>(decorator, typeChecker);
 
-    return {
-      propName,
-      methodName,
-    };
+    if (!props.includes(propName)) {
+      // ignore if there's no corresponding @Prop decorated property
+      return [];
+    }
+
+    return [
+      {
+        propName,
+        methodName,
+      },
+    ];
   });
 };

src/declarations/stencil-private.ts

@@ -1757,6 +1757,7 @@ export interface HostRef {
   $cmpMeta$: ComponentRuntimeMeta;
   $hostElement$: HostElement;
   $instanceValues$?: Map<string, any>;
+  $serializerValues$?: Map<string, string>;
   $lazyInstance$?: ComponentInterface;
   /**
    * A promise that gets resolved if `BUILD.asyncLoading` is enabled and after the `componentDidLoad`

src/hydrate/platform/index.ts

@@ -151,6 +151,7 @@ export const registerHost = (elm: d.HostElement, cmpMeta: d.ComponentRuntimeMeta
     $cmpMeta$: cmpMeta,
     $hostElement$: elm,
     $instanceValues$: new Map(),
+    $serializerValues$: new Map(),
     $renderCount$: 0,
   };
   hostRef.$onInstancePromise$ = new Promise((r) => (hostRef.$onInstanceResolve$ = r));

src/runtime/profile.ts

@@ -58,6 +58,7 @@ const inspect = (ref: any) => {
       needsRerender: !!(flags & HOST_FLAGS.needsRerender),
     },
     instanceValues: hostRef.$instanceValues$,
+    serializerValues: hostRef.$serializerValues$,
     ancestorComponent: hostRef.$ancestorComponent$,
     hostElement,
     lazyInstance: hostRef.$lazyInstance$,

src/runtime/proxy-component.ts

@@ -275,6 +275,14 @@ export const proxyComponent = (
         plt.jmp(() => {
           const propName = attrNameToPropName.get(attrName);
           const hostRef = getHostRef(this);
+
+          if (hostRef.$serializerValues$.has(propName) && hostRef.$serializerValues$.get(propName) === newValue) {
+            // The newValue is the same as a saved serialized value from a prop update.
+            // The prop can be intentionally different from the attribute;
+            //  updating the underlying prop here can cause an infinite loop.
+            return;
+          }
+
           //  In a web component lifecycle the attributeChangedCallback runs prior to connectedCallback
           //  in the case where an attribute was set inline.
           //  ```html

src/runtime/set-value.ts

@@ -53,6 +53,21 @@ export const setValue = (ref: d.RuntimeRef, propName: string, newVal: any, cmpMe
     // set our new value!
     hostRef.$instanceValues$.set(propName, newVal);
 
+    if (BUILD.reflect && cmpMeta.$attrsToReflect$) {
+      if (instance && cmpMeta.$serializers$ && cmpMeta.$serializers$[propName]) {
+        // this property has a serializer method
+
+        let attrVal = newVal;
+        for (const methodName of cmpMeta.$serializers$[propName]) {
+          // call the serializer methods
+          attrVal = (instance as any)[methodName](attrVal, propName);
+        }
+        // keep the serialized value - it's used in `renderVdom()` (vdom-render.ts)
+        // to set the attribute on the vnode
+        hostRef.$serializerValues$.set(propName, attrVal);
+      }
+    }
+
     if (BUILD.isDev) {
       if (hostRef.$flags$ & HOST_FLAGS.devOnRender) {
         consoleDevWarn(
@@ -104,6 +119,7 @@ export const setValue = (ref: d.RuntimeRef, propName: string, newVal: any, cmpMe
             return;
           }
         }
+
         // looks like this value actually changed, so we've got work to do!
         // but only if we've already rendered, otherwise just chill out
         // queue that we need to do an update, but don't worry about queuing

src/runtime/test/attr-deserialize.spec.tsx

@@ -1,4 +1,4 @@
-import { Component, Method, Prop, State, AttrDeserialize, Element } from '@stencil/core';
+import { AttrDeserialize, Component, Element, Prop, State } from '@stencil/core';
 import { newSpecPage } from '@stencil/core/testing';
 
 import { withSilentWarn } from '../../testing/testing-utils';
@@ -48,6 +48,7 @@ describe('attribute deserialization', () => {
     // prop changes should not call deserializers
     root.prop1 = 100;
     await waitForChanges();
+
     expect(rootInstance.method1Called).toBe(1);
     expect(rootInstance.method2Called).toBe(1);
 
@@ -62,11 +63,13 @@ describe('attribute deserialization', () => {
 
     // deserializer should not be called on state change
     rootInstance.someState = 'bye';
+    await waitForChanges();
+
     expect(rootInstance.method1Called).toBe(2);
     expect(rootInstance.method2Called).toBe(2);
   });
 
-  it('should watch correctly', async () => {
+  it('should watch for changes correctly', async () => {
     @Component({ tag: 'cmp-a' })
     class CmpA {
       watchCalled = 0;
@@ -139,7 +142,7 @@ describe('attribute deserialization', () => {
       }
     }
 
-    const { root, rootInstance } = await newSpecPage({
+    const { root, rootInstance, waitForChanges } = await newSpecPage({
       components: [CmpA],
       html: `<cmp-a></cmp-a>`,
     });
@@ -154,15 +157,23 @@ describe('attribute deserialization', () => {
 
     // set different values
     root.setAttribute('prop-1', '100');
+    await waitForChanges();
+
     expect(rootInstance.method1).toHaveBeenCalledTimes(1);
     expect(root.prop1).toBe(100);
 
     // special handling by deserializer
     root.setAttribute('prop-1', 'something');
-    expect(rootInstance.method1).toHaveBeenCalledTimes(2);
+    await waitForChanges();
+
+    // because the special handling returns a different value (1000) and the prop is reflected
+    // the deserializer is called again to reflect the new value
+    expect(rootInstance.method1).toHaveBeenCalledTimes(3);
     expect(root.prop1).toBe(1000);
 
     root.setAttribute('json-prop', '{"a":99,"b":"bye"}');
+    await waitForChanges();
+
     expect(rootInstance.method2).toHaveBeenCalledTimes(1);
     expect(root.jsonProp).toEqual({ a: 99, b: 'bye' });
   });