zilk

The exports of zilk provide the 'basics' for websites. The core is isomorphic, allowing for server-side and client-side rendering to use the same code.

99% of credit for this runtime goes to @WebReflection and uhtml.

Directly exported from uhtml/keyed:

html
svg
htmlFor
svgFor
render

Added:

raw: allow templating of raw strings, along with a no-op proxy to give a hint for what language is being generated (raw.md or raw.js or raw.xml)
css: shorthand for raw.css
classify: generate scoped classnames for UI components. It's a recursive proxy with a toString/toPrimitive trap to output the class string.

classify

import { classify } from 'zilk'

let { WRAP, INNER } = classify('MyBox')

console.log(WRAP) // MyBox__WRAP
console.log(INNER) // MyBox__INNER
console.log(INNER.TOP) // MyBox__INNER__TOP

Example UI component

import { classify } from 'zilk'

// scoped classes: MyCard__WRAP, MyCard__TITLE, MyCard__ITEM
let { WRAP, TITLE, ITEM } = classify('MyCard')

// generate html
export default ({
  title='ssr',
  items=['1','2','3','4','5','6']
}) => html`
  <div class=${WRAP}>
    <h1 class=${TITLE}>${title}</h1>
    <ul class=${ITEM.WRAP}>
      ${items.map(item => html`
        <li class=${ITEM}>${item}</li> 
      `)}
    </ul>
  </div>
`

// hydrate elements
export let handlers = {
  [WRAP]: {
    init(){
      this.setup()
    },
    setup(){
      this.$(TITLE).innerText = 'Hydrated'
      this.$$(ITEMS).forEach((item,i) => {
        item.style.cssText = `background:hsl(${i * 20},70%,40%)`
      })
    }
  }
}

// CSS definitions
export let style = () => css`
  .${WRAP}{
    padding: 10px;
    border: 1px solid red;
  }
`

Intro