vanilla-jsx's Introduction

vanilla-jsx

Vanilla jsx without runtime.

HTML Tag return DOM in js, No virtual DOM.

const content = <div>This is content.</div>;
document.body.append(content);

Run

install and config

npm i @vanilla-jsx/jsx-runtime

and edit babel.config.js or .babelrc or other babel config:

...
    presets: [
        ...
        [
            '@babel/preset-react', {
                runtime: 'automatic',
                importSource: '@vanilla-jsx'
            }
        ]
    ]
...

then, coding js with jsx.

simple source

Documentation

and more: https://vanilla-jsx.github.io/vanilla-jsx/

vanilla-jsx's People

Contributors

Stargazers

Watchers

vanilla-jsx's Issues

SVG syntax isn't correctly parsed / transformed

Basically when trying to create a function that returns svg structure, once rendered all the paths are 0x0.

Fragments do not parse recursively

Hello,

I noticed a bug in your package today while testing it out: The Fragment() function only parses arrays one level deep. This means that components that use a return statement like the following will render a bunch of text nodes that read "[object HTMLElement]" to the document.

return (
    <>
      <SingleComponent prop={value} />
      {anArrayOfComponents}
    </>
  )

The following worked for me to correct this:

exports.Fragment = ({ children } = {}) => {
  const fragment = document.createDocumentFragment();

  if (!!children) {
    const flat = flattenChildren(children)
    flat.forEach(child => {
      fragment.appendChild(child)
    })
  }

  return fragment;
}

function flattenChildren (children) {
  let flat = []
  if (Array.isArray(children)) {
    children.forEach((child) => {
      flat = flat.concat(flattenChildren(child))
    });
  } else {
    flat.push(children);
  }
  return flat
}

Recommend Projects