skybluejsx

VanillaJSX - pure javascript with JSX syntax

Usage no npm install needed!

<script type="module">
  import skybluejsx from 'https://cdn.skypack.dev/skybluejsx';
</script>

README

VanillaJSX

Just a pure Javascript with JSX syntax.

Running Demo

⚠️Caution⚠️

  • This is still in Draft phase!
  • specification may change without notice

Features

  • Component Based Development!
  • JSX syntax!
  • NO complex framework!
  • NO virtual DOMs! Just use your familiar HTML DOMs!
  • No Re-rendering by its framework, easier for developers to understand the behavior
  • Less Learning Difficulty than React
  • Just use your JS skills!
  • If you want to change DOM attributes or texts, JUST SET THEM BY YOURSELF!
  • TS support

How the Coding Works

When you code this:

const elem1 = <div id='elem1'>hi!</div>

This will work as:

const elem1 = document.createElement('div')
elem1.id = 'elem1'
elem1.append('hi!')

Installation

npm i @vanillajsx/vjsx

for vitejs

in your vite.config.js:

export default {
  esbuild: {
    jsxFactory: 'VJSX.r',
    jsxFragment: 'VJSX.Fragment',
    jsxInject: `import VJSX from '@vanillajsx/vjsx'`
  },
  //... other settings
}

in your tsconfig.json/jsconfig.json

{
  /*
  ... your settings ...
  You would need to state "jsx" option of your choice
  */
  "jsxFactory": "VJSX.r",
  "jsxFragmentFactory": "VJSX.Fragment"
}

Then your JSX code would be interpreted as VanillaJSX! Have fun!

Usage

see documentation

Roadmap

  • VanillaJSX processor
    • it dynamically appends components
  • Vite.js HMR Plugin
  • SSG builder
    • it generates
      • pre-rendered HTML
      • JS files which initializes the components
    • ViteJS SSG loader