moy-msx

this is a good library for parsing HTML string or write moy-dom app without ugly nesting Element.

usage

you can just using this like using tagged template, and moy-msx know what you given for building and return what you want.

Element

when you giving a HTML string to msx, you will got an Element(moy-dom Element).

here is an example:

  import msx from 'moy-msx'

  const className = 'textContainer',
        author = 'murakami'

  msx`
    <p class=${className}>
      <span>${author}</span>
    </p>
  ` // Element.of('p', {class: 'textContainer'}, Element.of('span', 'murakami'))

and you can use the result returned from msx do anything you want, see more at moy-dom.

Array

when you giving not a HTML string to msx, you will get an Array that contains this strings compiled.

here is an example:

  import msx from 'moy-msx'

  const author = 'murakami'

  msx`
    hello ${author}
  ` // ['hello ', 'murakami']

msx can recognise the array, and treat it as their parent children. see example below:

  import msx from 'moy-msx'

  const author = 'murakami'

  const welcome = ({name}) => msx`
    hello ${name}
  `

  msx`
    <p class="text-container">
      <${welcome} name={author} />
    </p>
  ` // Element.of('p', {class: 'text-container'}, 'hello ', 'murakami')

Note: although moy-msx can recognise array component but moy-dom can't render array nodes(fortunately, our app's root Element always is an actual Element), so your app's root node must be an actual Element or null.

null

when you giving null to msx, msx will return null,

here is an example:

  import msx from 'moy-msx'

  const author = null

  msx`
    ${author}
  ` // null

in fact, not only null ,there is a string that just a blank string(only with /^[\s\n]*$/ testing) that moy-msx optimized and return null.

Note: moy-dom can render null.

License

MIT

Copyright (jp) 2018-present murakami