Skip to content

Release 1.0.0

Latest
Compare
Choose a tag to compare
@ECorreia45 ECorreia45 released this 30 Nov 23:31
· 16 commits to main since this release

🎉🎊🍾
Markup finally V1 with a lot of simplification and improvements.

const [count, setCount] = state(0);

const incCount = () => setCount(prev => prev + 1);
const decCount = () => setCount(prev => prev - 1);

const temp = html`
   <p>Count:${count}</p>
   <button type="button" onclick="${incCount}">+</button>
   <button type="button" onclick="${decCount}">-</button>
`;

temp.render(document.body);

New Stuff

  • Now you create side effects for your state, and it supports a return value of any type for tracking and caching
  • Support for object attribute <button ${attrs} >...</button> which allows for dynamic attribute setting
  • introduces onMove lifecycle for when the template is moved
  • introduces parentNode property
  • introduces the insertAfter method as a way to render the template
  • create docs website from .md files
  • introduces the @beforesemicolon/router

Improvements

  • auto detect state usage and automatically handle template
  • state only broadcasts when values change
  • state updates are batched
  • optimize render and DOM elements creation where needed
  • calling lifecycles multiple times will no longer keep all callback functions. only the last one will be used
  • improves performance and internal logic with cached templates, easy cleanups, badged state updates, and more
  • extend repeat to accept Set, Map, and object literals
  • update builder to use @bfs/builder
  • improve@bfs/WebComponent packages with new Markup
  • improves suspense to run with template rendering instead of on definition

Deprecated

  • deprecates helper and Helper. Now you can just create functions that use state inside and they will be reactive by default.
  • deprecates attr prefix and dotted attributes, e.g: class.active="...", style.primary="..." as now these can dynamically be set with injected function values
  • deprecates onDestroy. it can be provided as the return value of onMount method
  • changes event listeners options syntax from <div onclick="${fn}, ${opt}" /> to <div onclick="${[fn, opt]}" />
  • renamed nodes property to childNodes

What's Changed

Full Changelog: 0.15.0...1.0.0