lit-ntml
await
all tasks including Functions, Promises, and whatnot.
Compatible for ES Modules (import { html } from 'lit-ntml'
) and CommonJS (const { html } = require('lit-ntml');
).
Parses PromiseList
or List
by default, without explicit joining.
Support HTML syntax highlighting + autocompletion with vscode-lit-html in JavaScript's template string.
Support native ES Module via .mjs
.
Install vscode-lit-html extension.
If the extension does not provide that syntax highlighting and autocompletion, try writing your templates in .jsx
file (or .tsx
file if you're TypeScript user) . That should work.
# Install via NPM$ npm install lit-ntml
import { html } from 'lit-ntml';const peopleList = ['Cash Black', 'Vict Fisherman'];const syncTask = () => `<h1>Hello, World!</h1>`;const asyncLiteral = Promise.resolve('<h2>John Doe</h2>');const asyncListTask = async () => `<ul>${peopleList.map(n => `<li>${n}</li>`)}</ul>`;/** Assuming top-level await is enabled... */await html`${syncTask}${asyncLiteral}${asyncListTask}`; /** <!DOCTYPE html><html><head></head><body><h1>Hello, World!</h1><h2>John Doe</h2><ul><li>Cash Black</li><li>Vict Fisherman</li></ul></body></html> */
import { htmlFragment as html } from 'lit-ntml';const syncTask = () => `<h1>Hello, World!</h1>`;const externalStyleLiteral = `<style>body { margin: 0; padding: 0; box-sizing: border-box; }</style>`;/** Assuming top-level await is enabled... */await html`${externalStyleLiteral}${syncTask}`; /** <style>body { margin: 0; padding: 0; box-sizing: border-box; }</style><h1>Hello, World!</h1> */
const { html } = require('lit-ntml');const peopleList = ['Cash Black', 'Vict Fisherman'];const syncTask = () => `<h1>Hello, World!</h1>`;const asyncLiteral = Promise.resolve('<h2>John Doe</h2>');const asyncListTask = async () => `<ul>${peopleList.map(n => `<li>${n}</li>`)}</ul>`;/** Assuming top-level await is enabled... */await html`${syncTask}${asyncLiteral}${asyncListTask}`; /** <!DOCTYPE html><html><head></head><body><h1>Hello, World!</h1><h2>John Doe</h2><ul><li>Cash Black</li><li>Vict Fisherman</li></ul></body></html> */
const { htmlFragment } = require('lit-ntml');const html = htmlFragment;const syncTask = () => `<h1>Hello, World!</h1>`;const externalStyleLiteral = `<style>body { margin: 0; padding: 0; box-sizing: border-box; }</style>`;/** Assuming top-level await is enabled... */await html`${externalStyleLiteral}${syncTask}`; /** <style>body { margin: 0; padding: 0; box-sizing: border-box; }</style><h1>Hello, World!</h1> */
<!doctype html> <html> <head> <script type="module"> import { html } from 'https://unpkg.com/lit-ntml@latest/dist/lit-ntml.min.js'; // --snip </script> </head> </html>
<!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>
上一篇:NTMS-web
下一篇:gestao-ntm
还没有评论,说两句吧!
热门资源
seetafaceJNI
项目介绍 基于中科院seetaface2进行封装的JAVA...
spark-corenlp
This package wraps Stanford CoreNLP annotators ...
Keras-ResNeXt
Keras ResNeXt Implementation of ResNeXt models...
capsnet-with-caps...
CapsNet with capsule-wise convolution Project ...
shih-styletransfer
shih-styletransfer Code from Style Transfer ...
智能在线
400-630-6780
聆听.建议反馈
E-mail: support@tusaishared.com