Optimize adjacent static parts+fields #90

developit · 2019-05-30T21:24:31Z

I've been toying around with optimizing Tagged Templates by merging literal field values (strings, numbers and booleans) into their adjacent static part and collapsing the adjacent static parts into a single part:

// input:
<div class={"foo"}>hello</div>
<button id={1} />

// current output:
html`<div class=${"foo"}>hello</div>`
html `<button id=${1} />`

// optimized output:
html`<div class="foo">`
html`<button id=1 />`

It'd be really neat to get this behavior into babel-plugin-transform-jsx-to-htm, since additional assumptions could be made about nested Arrays:

const color = 'red';

// input:
<style jsx>{`
  .foo { color: ${color}; }
`}</style>

// current output:
html`
  <style jsx>${`
    .foo { color: ${color}; }
  `}</style>
`

// optimized output:
html`
  <style jsx>
    .foo { color: ${color}; }
  </style>
`

Thoughts?

developit added enhancement proposal labels Oct 16, 2019

developit / htm

Optimize adjacent static parts+fields #90

Optimize adjacent static parts+fields #90

developit commented May 30, 2019

developit / htm

Join GitHub today

GitHub is where the world builds software

Optimize adjacent static parts+fields #90

Optimize adjacent static parts+fields #90

Comments

developit commented May 30, 2019

Essential cookies

Always active

Analytics cookies