Fix SSR backpatch serialization for async style and class attributes

[Copilot]

useAsync$ values used in element style were being backpatched with raw object values during SSR, producing [object Object] instead of the serialized attribute string. The same gap affected other special-cased attributes such as class when their resolved value was object-shaped.

• Backpatch serialization

  • Route async attribute backpatch values through the same serializeAttribute() path used by normal SSR attribute emission.
  • This aligns backpatch behavior with regular attribute generation, including stringification of style objects and normalization of class objects.

• Regression coverage

  • Add SSR backpatch tests for:
    • useAsync$ resolving into a style object-backed prop
    • useAsync$ resolving into a class object-backed prop
  • Assert that the patched DOM contains serialized attribute strings rather than [object Object].

• Behavioral impact

  • Async SSR updates now produce the same attribute output shape as initial SSR render for special-cased attributes.

const color = useAsync$(() => Promise.resolve('red'));

return <div style={{ color: color.value }}>I should be red</div>;
// before: style="[object Object]"
// after:  style="color:red"

[changeset-bot]

⚠️ No Changeset found

Latest commit: 85ce4ca

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[pkg-pr-new]

Open in StackBlitz

@qwik.dev/core

npm i https://pkg.pr.new/QwikDev/qwik/@qwik.dev/core@8646

@qwik.dev/router

npm i https://pkg.pr.new/QwikDev/qwik/@qwik.dev/router@8646

eslint-plugin-qwik

npm i https://pkg.pr.new/QwikDev/qwik/eslint-plugin-qwik@8646

create-qwik

npm i https://pkg.pr.new/QwikDev/qwik/create-qwik@8646

@qwik.dev/optimizer

npm i https://pkg.pr.new/QwikDev/qwik/@qwik.dev/optimizer@8646

commit: 85ce4ca

[Copilot]

Pull request overview

This PR aligns SSR backpatching behavior with normal SSR attribute emission by routing promise-resolved attribute values through serializeAttribute(), addressing cases where async-resolved style/class values could otherwise be applied as raw objects (leading to "[object Object]").

Changes:

• Serialize promise-resolved SSR attribute values via serializeAttribute(key, resolvedValue, styleScopedId) before creating backpatch entries.
• Add regression tests intended to cover async backpatching for style and class object-shaped attributes.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
packages/qwik/src/server/ssr-container.ts	Ensures backpatch entries store serialized attribute values (consistent with normal SSR output).
packages/qwik/src/core/tests/backpatch.spec.tsx	Adds tests aimed at preventing regressions for async backpatch serialization of style/class.

Comments suppressed due to low confidence (1)

packages/qwik/src/core/tests/backpatch.spec.tsx:309

• Same issue as the async style test: using isActive.value in render likely triggers component-level Promise retry rather than attribute-level backpatching, so this may not cover the new serializeAttribute() call used when backpatching promise attributes. Consider adjusting the test so the class attribute value is the async value (e.g. AsyncSignal/Promise resolving to a class object), ensuring SSR emits backpatch data and the patched DOM reflects normalized class serialization.

  it('should serialize async class objects before backpatching', async () => {
    const Child = component$<{ isActive: boolean }>(({ isActive }) => {
      return (
        <div
          id="class-target"
          class={{
            active: isActive,
            inactive: !isActive,
          }}
        >
          Styled
        </div>
      );
    });

    const Parent = component$(() => {
      const isActive = useAsync$(() => Promise.resolve(true));
      return <Child isActive={isActive.value} />;
    });

    const { document } = await ssrRenderToDom(<Parent />, { debug });
    const target = document.querySelector('#class-target');

    expect(document.body.innerHTML).toContain(ELEMENT_BACKPATCH_DATA);
    expect(target?.getAttribute('class')).toBe('active');
    expect(target?.outerHTML).not.toContain('[object Object]');
  });

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.