mirror of
https://github.com/marko-js/marko.git
synced 2025-12-08 19:26:05 +00:00
df79fcc5f0
* Updates the diffing algorithm to use an HTMLFragment node as an abstraction rather than keeping track of startNode and endNode all throughout the diffing algorithm.
* Uses the HTMLFragment for the <${dynamic}> tag and <include> tags to preserve server-rendered content for which the renderBody is not available in the browser.
* Component ids are based on the resulting parent tree (not the owner tree). This means we cannot rely on the ids in the global lookup, so component key/refs are now also stored on the component instance.
* Static node trees are now only auto assigned a key for the top-level node (instead of all nodes).
* Server comment starting markers now have the component's key serialized so the component can be attached to its owner
* Server comment markers no longer have the id on the closing marker, it is stack based.
* Normalize differences between hydration and client-rendering, so post mount the DOM looks the same regardless of whether a component was server or client rendered.
* fix matching up fragments when hydrating by taking components and normalized text nodes into account
* remove wrapping divs in test, should no longer be needed. address hydration issue with alternate fragment matching approach.
* add fragment to dom if there's a parentNode even if no startNode
* add test for mismatched hydration
* don't detach components before moving
* use fragments to preserve renderBody content
* use ___finishFragment as the incomplete fragment marker
* ensure fragments get destroyed properly and dom node key sequences don't continue from previous renders
* use parent/owner terminology in more places, component ids are now parent scoped, key/ref components are attached to their owner for both client + server render, server comment boundaries include the owner and the key in addition to the fully scoped component id, autokeyed dom nodes are attached to their parent, hydration now uses a stack: ids in ending comment nodes not needed, hydration checks to see if a component has been initialized and will attach keys directly to the owner if so
* add mutation guards for text/comment nodes, add mutation guard for input value
* make component-pages test better represent streaming hydration, fix html/head/body hydration in a better/more generic way
* add test for async rendered keyrefs
* add test for repeated mult-level transclusion
* Autokeyed elements are now stored on the parent rather than the owner. User assigned key/refs are still stored on the owner component. Because of this, user assigned keys are now prefixed (with @) to differentiate them from autokeys. This also has the benefit that assigning numeric keys can no longer conflict with the autokeys.
* add re-rendering the intermediate container to one of the new tests
58 lines
1.8 KiB
JavaScript
58 lines
1.8 KiB
JavaScript
var expect = require("chai").expect;
|
|
|
|
module.exports = function(helpers) {
|
|
var colors = ["blue", "green", "red"];
|
|
var component = helpers.mount(require.resolve("./index"), {
|
|
color: colors[0]
|
|
});
|
|
|
|
if (helpers.isHydrate) {
|
|
// When hydrating, the first color item was rendered on the
|
|
// server so there is no corresponding attach event f
|
|
// we'll push an empty event so the indexes line up
|
|
component.events.push(null);
|
|
} else {
|
|
expect(component.events.length).to.equal(1);
|
|
expect(component.events[0].color).to.equal("blue");
|
|
expect(component.events[0].node).to.equal(
|
|
component.el.querySelectorAll("li")[0]
|
|
);
|
|
}
|
|
|
|
component.input = { color: colors[1] };
|
|
component.update();
|
|
|
|
expect(component.events.length).to.equal(2);
|
|
expect(component.events[1].color).to.equal(colors[1]);
|
|
expect(component.events[1].node).to.equal(
|
|
component.el.querySelectorAll("li")[0]
|
|
);
|
|
|
|
component.input = { color: colors[2] };
|
|
component.update();
|
|
|
|
expect(component.events.length).to.equal(3);
|
|
expect(component.events[2].color).to.equal(colors[2]);
|
|
expect(component.events[2].node).to.equal(
|
|
component.el.querySelectorAll("li")[0]
|
|
);
|
|
|
|
component.input = { color: colors[0] };
|
|
component.update();
|
|
|
|
expect(component.events.length).to.equal(4);
|
|
expect(component.events[3].color).to.equal(colors[0]);
|
|
expect(component.events[3].node).to.equal(
|
|
component.el.querySelectorAll("li")[0]
|
|
);
|
|
|
|
component.input = { color: colors[2] };
|
|
component.update();
|
|
|
|
expect(component.events.length).to.equal(5);
|
|
expect(component.events[4].color).to.equal(colors[2]);
|
|
expect(component.events[4].node).to.equal(
|
|
component.el.querySelectorAll("li")[0]
|
|
);
|
|
};
|