Skip to content

vanX reactive don't track undeclared fields #470

@cubxx

Description

@cubxx
const o = vanX.reactive({});
van.derive(() => console.log(o.p)); // only undefined
o.p = "new";

It will cause unexpected issues with components with optional props:

const defineComponent = (setup, defaultProps) => {
  const props = vanX.reactive(defaultProps);
  const dom = setup(props);
  return {
    dom,
    update: (patchProps) => Object.assign(props, defaultProps, patchProps),
  };
};
const Comp = defineComponent(
  (props) => van.tags.p({ textContent: () => props.text }),
  {},
);
van.add(document.body, Comp.dom);
Comp.update({ text: 'new' }); // won't update

So I have to use a Proxy to decorate the reactive object:

new Proxy(vanX.reactive({}), {
  get(target, prop, receiver) {
    Object.prototype.hasOwnProperty.call(target, prop) || (target[prop] = void 0); // add property
    return Reflect.get(target, prop, receiver); // track deps
  },
});

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions