Skip to content

Instantly share code, notes, and snippets.

@balupton

balupton/html-async.ts

Last active Aug 20, 2019
Embed
What would you like to do?
HTML Tagged Template Literal
import { StrictUnion } from 'simplytyped'
export default async function html(
components: TemplateStringsArray,
...inputs: Array<any>
) {
const results = await Promise.all(
components.map(async function(left, i) {
return left + (await inputs[i])
})
)
return results.join('').trim()
}
export function style(obj: { [key: string]: string | undefined }) {
return Object.keys(obj)
.map(key => {
const value = obj[key]
if (value) return key + ': ' + value
return ''
})
.join('; ')
}
export function attr(key: string, value: string | undefined) {
if (value) return `${key}="${value}"`
return ''
}
export function styleAttr(obj: { [key: string]: string | undefined }) {
return attr('style', style(obj))
}
function html(arr, ...args) {
const str = arr.map((v, i) => (v || '') + (args[i] || '')).join('')
return str
.trim()
.replace(/^\s+/gm, '')
.replace(/\n/g, '')
}
import html, { styleAttr } from '../lib/html'
export default function(content: any) {
return html`
<span ${styleAttr({ display: 'none' })}>${content}</span>
`
}
@bcomnes

This comment has been minimized.

Copy link

@bcomnes bcomnes commented Aug 19, 2019

Is there a good way to turn the result into a real DOM node?

@balupton

This comment has been minimized.

Copy link
Owner Author

@balupton balupton commented Aug 20, 2019

@bcomnes designed this for use on server side. For client side, createElement and innerHTML would do the trick but lit-html would probably be better

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.