fix(csr): consume document binding metadata
This commit is contained in:
@@ -3537,6 +3537,20 @@ export const REACTIVE_RUNTIME = String.raw`
|
||||
function hydrateScopes(root) {
|
||||
var host = root || document;
|
||||
|
||||
// The document shell can contain server-resolved attributes such as
|
||||
// lang={language} and data-theme={theme}. It has no component scope and
|
||||
// therefore no client-side binding to retain; consume its compiler markers
|
||||
// separately from component hydration.
|
||||
if (host === document || host === document.documentElement) {
|
||||
Array.prototype.slice
|
||||
.call(document.documentElement.attributes)
|
||||
.forEach(function (attribute) {
|
||||
if (attribute.name.indexOf("data-wrn-bind-") === 0) {
|
||||
document.documentElement.removeAttribute(attribute.name);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var scopeSelector =
|
||||
"[data-scope], [data-wrn-scope]";
|
||||
|
||||
|
||||
@@ -549,6 +549,25 @@ test("hydration consumes private scope, behavior, and binding metadata", () => {
|
||||
expect(button.getAttribute("aria-expanded")).toBe("true");
|
||||
});
|
||||
|
||||
test("hydration removes server-resolved document binding metadata", () => {
|
||||
const win = mount(`<main>Document content</main>`);
|
||||
const root = win.document.documentElement;
|
||||
root.setAttribute("lang", "en");
|
||||
root.setAttribute("data-theme", "dark");
|
||||
root.setAttribute("data-wrn-bind-0", '["lang","{language}"]');
|
||||
root.setAttribute("data-wrn-bind-1", '["data-theme","{theme}"]');
|
||||
|
||||
const runtime = win as unknown as {
|
||||
__wrnexusHydrateScopes?: (root: unknown) => void;
|
||||
};
|
||||
runtime.__wrnexusHydrateScopes?.(win.document);
|
||||
|
||||
expect(root.getAttribute("lang")).toBe("en");
|
||||
expect(root.getAttribute("data-theme")).toBe("dark");
|
||||
expect(root.hasAttribute("data-wrn-bind-0")).toBe(false);
|
||||
expect(root.hasAttribute("data-wrn-bind-1")).toBe(false);
|
||||
});
|
||||
|
||||
test("compiled client functions are not overwritten by fallback behavior parsing", () => {
|
||||
const behavior = Buffer.from(
|
||||
JSON.stringify({
|
||||
|
||||
Reference in New Issue
Block a user