Skip to content

Runtime compiler does not correctly generate the scope bag, and is thus non-reactive (incorrectly reactive?) #20913

Open
@NullVoxPopuli

Description

@NullVoxPopuli

🐞 Describe the Bug

Been playing around in here: #20907
(because you can't catch a compiler error due to the usage of the microtask queue)

And it seems that the underlying glimmer-format for components just needs to change.
For example,
What is generated:

source: '({"id":null,"block":"[[[1,[32,0]]],[],[]]","moduleName":"(unknown template module)","scope":()=>[greeting],"isStrictMode":true})'

but this means that greeting is already consumed. Which we know from the template-compiler code, here:

    let scope = untrack(() => options.scope?.());

    if (!scope) {
      return evaluator;
    }

    return (source: string) => {
      const argNames = Object.keys(scope ?? {});
      const argValues = Object.values(scope ?? {});

      return new Function(...argNames, `return (${source})`)(...argValues);
    };

here, I added untrack because we should not be touching scope or any reactive values before a render occurs (else, we just re-run things over and over again).

The problem is obviously:

"scope":()=>[greeting]

when the input is:

return template(`{{greeting}}`, {
  scope: () => {
    return { greeting: this.str };
  },
});

so... what should happen is obviously just... not mutating the shape of the scope bag

instead of:

"scope":()=>[greeting]

we need to take the scope that was passed to template, and use that directly.

like this:

// in the template compiler
export function template(source, { scope }) {
  // .... 

  // using old terminology here, cause I don't remember what the new stuff is
  return setComponentTemplate(
    {
      block: '[...]',
      scope,
      isStrictMode: true, 
    },
    templateOnly(),
  );
}
  • Node.js/npm: -
  • OS: -
  • Browser: -

➕ Additional Context

Add any other context about the problem here.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions