Releases: motss/lit-ntml
v2.6.0
Notable changes
- Dropped IIFE bundle in favor of UMD bundle
-
💥 This is a breaking change for users who use IIFE bundle but not for everyone since there is no major changes in terms of APIs. Only minor version bumped as such. Please switch over to use UMD bundle for browsers.
<!doctype html> <html> <head> <script src="https://unpkg.com/lit-ntml@latest/dist/lit-ntml.umd.min.js"></script> <script> var { html } = window.LitNtml; // --snip </script> </head> </html>
-
- Shipped minified version for each supported platforms, e.g.
lit-ntml.min.js
Improved file structure for Node.js
Notable changes
To support both different module systems in Node.js, there are 2 different types of modules are built:-
index.mjs- ES Modules in Node.js favors.mjsextension.index.js- CommonJS in Node.js favors.jsextension.
In package.json, by specifiying main: dist/index. The correct file will be picked up by the module system used by the users.
This allows more straightforward and intuitive approach when using the module without the need to worry much about which file is used correctly:
ES Modules
import { html } from 'lit-ntml'; /** This reads content from `index.mjs` */CommonJS
const { html } = require('lit-ntml'); /** This reads content from `index.js` */🎉 Voila! Happy templating!
No more minification and prettification
Notable changes
- Removal of
htmlMinifierandprettyas those can be optional. Users are free to choose whatever modules they like to achieve the same thing. - Revamped entire module to provider simple methods for easier templating which is what the goal of this module:
html- parse HTML template literals as HTML document.htmlFragment- parse HTML template literals as HTML document fragment.
Simple usage
html()
import { html } from 'lit-ntml';
/** Assuming top-level await is enabled... */
await html`<h1>Hello, World!</h1>`; /** <!DOCTYPE html><html><head></head><body><h1>Hello, World!</h1></body></html>htmlFragment()
import { htmlFragment as html } from 'lit-ntml';
/** Assuming top-level await is enabled... */
await html`<h1>Hello, World!</h1>`; /** <h1>Hello, World!</h1> */Now parses PromiseList and List
✨ In previous releases, lit-ntml resolves everything for you under the hood including asynchronous tasks like Promises, async functions, etc. But it never actually resolves a PromiseList or List and that requires users to do explicit joining, like so:
const rendered = await html`<ul>${
[1,2,3].map(n => `<li>${n}</li>`).join('') // Explicit joining an array of items!
}</ul>`;Now, lit-ntml does everything for you:
const rendered = await html`<ul>${
[1,2,3].map(async n => html`<li>$[n}</li>`) // Now resolves `PromiseList` and `List`
}</ul>`;Cheers 🍺 and have fun with HTML-templating! 🎉
Announcing v1.0.0 stable
🎉 Excited to announce the first ever stable release.
Have been a great journey in creating a modern, lightweight templating library uses nothing but just pure ECMAScript. Thanks to template literals and tagged template literals being shipped in Node.js to make this happen.
Several features added:
- More optional flags:
options[minify],options[pretty]andoptions[parse]. 🎄 - Default minification configuration is exported by default which makes overriding default setting much easier and more flexible! 👍
- No more caching mechanism which makes the package much cleaner and straightforward to use. This allows users to have more controls over how they can deal with rendered contents. 💥
All in all, thank you for making this possible. Feel free to share and star this project if you haven't already to keep this project alive! 🙏 💯
Leveraging parse5
lit-ntml now parses content (or HTML string) as HTML fragment string.
Unless parseHtml flag is set to true, the final content is parsed as HTML string instead.
/* To parse as HTML string */
import { ntml } from 'lit-ntml';
const html = ntml({ parseHtml: true });
await html`<div>
<h1>Hello, World!</h1>
</div>`;
// <!doctype html><html>...<body>...<div><h1>Hello, World!</h1></div>...</body>...</html>/* Everything is parsed as HTML fragment string by default */
import { ntml } from 'lit-ntml';
const html = ntml(); // or ntml({ parseHtml: false });
await html`<div>
<h1>Hello, World!</h1>
</div>`;
// <div><h1>Hello, World!</h1></div>