mirror of
https://github.com/marko-js/marko.git
synced 2026-02-01 16:07:13 +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
Marko is a friendly (and fast!) UI library that makes building web apps fun. Learn more on markojs.com, and even Try Marko Online!
Get Involved
- Contributing: Pull requests are welcome!
- Read
CONTRIBUTING.mdand check out our bite-sized and help-wanted issues - Submit github issues for any feature enhancements, bugs or documentation problems
- Read
- Support: Join our gitter chat to ask questions to get support from the maintainers and other Marko developers
- Questions/comments can also be posted as github issues
- Discuss: Tweet using the
#MarkoJShashtag and follow @MarkoDevTeam
Installation
npm install marko --save
Examples
Marko provides an elegant and readable syntax for both single-file components and components broken into separate files. There are plenty of examples to play with on Marko's Try-Online. Additional component documentation can be found on the Marko.js website.
Single file
The following single-file component renders a button and a counter with the number of times the button has been clicked. Try this example now!
click-count.marko
class {
onCreate() {
this.state = { count:0 };
}
increment() {
this.state.count++;
}
}
style {
.count {
color:#09c;
font-size:3em;
}
.example-button {
font-size:1em;
padding:0.5em;
}
}
<div.count>
${state.count}
</div>
<button.example-button on-click('increment')>
Click me!
</button>
Multi-file
The same component as above split into an index.marko template file,
component.js containing your component logic, and style.css containing your
component style:
index.marko
<div.count>
${state.count}
</div>
<button.example-button on-click('increment')>
Click me!
</button>
component.js
module.exports = {
onCreate() {
this.state = { count: 0 };
},
increment() {
this.state.count++;
}
};
style.css
.count {
color: #09c;
font-size: 3em;
}
.example-button {
font-size: 1em;
padding: 0.5em;
}
Concise Syntax
Marko also support a beautiful concise syntax as an alternative to the HTML syntax. Find out more about the concise syntax here.
<!-- Marko HTML syntax -->
<ul>
<li for(color in ['a', 'b', 'c'])>
${color}
</li>
</ul>
// Marko concise syntax
ul
li for(color in ['a', 'b', 'c'])
-- ${color}
Changelog
See CHANGELOG.md
Maintainers
- Patrick Steele-Idem (Twitter: @psteeleidem)
- Michael Rawlings (Twitter: @mlrawlings)
- Phillip Gates-Idem (Twitter: @philidem)
- Austin Kelleher (Twitter: @AustinKelleher)
- Dylan Piercey (Twitter: @dylan_piercey)
- Martin Aberer (Twitter: @metaCoffee)
Code of Conduct
This project adheres to the eBay Code of Conduct. By participating in this project you agree to abide by its terms.
License
MIT