Skip to content

Rerender issue #107

Closed
Closed
@MirrorBytes

Description

@MirrorBytes

image

image

Had to change the render function in pure.js to this in order to fix the error:

const render = (Component, _ref = {}, {
  container,
  queries
} = {}) => {
  let {
    target
  } = _ref,
      options = _objectWithoutProperties(_ref, ["target"]);

  container = container || document.body;
  target = target || container.appendChild(document.createElement('div'));
  const ComponentConstructor = Component.default || Component;

  function checkProps(options) {
    const isProps = !Object.keys(options).some(option => svleteComponentOptions.includes(option)); // Check if any props and Svelte options were accidentally mixed.

    if (!isProps) {
      const unrecognizedOptions = Object.keys(options).filter(option => !svleteComponentOptions.includes(option));

      if (unrecognizedOptions.length > 0) {
        throw Error(`
          Unknown options were found [${unrecognizedOptions}]. This might happen if you've mixed 
          passing in props with Svelte options into the render function. Valid Svelte options 
          are [${svleteComponentOptions}]. You can either change the prop names, or pass in your 
          props for that component via the \`props\` option.\n\n
          Eg: const { /** Results **/ } = render(MyComponent, { props: { /** props here **/ } })\n\n
        `);
      }

      return options;
    }

    return { props: options };
  }

  const component = new ComponentConstructor(_objectSpread({
    target
  }, checkProps(options)));
  containerCache.set(container, {
    target,
    component
  });
  componentCache.add(component);
  component.$$.on_destroy.push(() => {
    componentCache.delete(component);
  });
  return _objectSpread({
    container,
    component,
    debug: (el = container) => console.log((0, _dom.prettyDOM)(el)),
    rerender: options => {
      if (componentCache.has(component)) component.$destroy(); // eslint-disable-next-line no-new

      const newComponent = new ComponentConstructor(_objectSpread({
        target
      }, checkProps(options)));
      containerCache.set(container, {
        target,
        newComponent
      });
      componentCache.add(newComponent);
      newComponent.$$.on_destroy.push(() => {
        componentCache.delete(newComponent);
      });
    },
    unmount: () => {
      if (componentCache.has(component)) component.$destroy();
    }
  }, (0, _dom.getQueriesForElement)(container, queries));
};

The _objectSpread calls should be identical.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workinghelp wantedExtra attention is neededreleased

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions