vine-jsx v1.0.9
Vine-JSX: A JSX Library
Looking for a lightweight JSX library for your next project? Introducing Vine JSX. It comes with React-like hooks to make development easier and fun. Web components and SSR support are also on the way.
Getting Started
To install Vine JSX, sumply run:
npm install vine-jsx -D
After that, create a file, import Vine JSX and create your index.jsx
file.
import { Vine } from 'vine-jsx'
import { content } from './content.js' // Let's assume it's just a string
const App = (props) => (
<>
<h1>{ props.title }</h1>
<main>
<article>{ props.content }</article>
</main>
</>
)
Vine.render(
<App title='Hello World' content={ content } />,
document.getElementById('root')
)
This is pretty basic stuff. You can also use hooks to make your site more interactive.
const { useState, useEffect, useMemo } = Vine
const Component = () => {
const [count, setCount] = useState(0)
return (
<button onClick={ () => setCount(count + 1) }>{ count }</button>
)
}
Vine JSX currently has useState
, useEffect
and useMemo
hooks. More hooks will be included soon. Class components are also available. However, since functional components are considered to be much cleaner and are used more frequently, class components would very likely not be improved any further. To create a class component:
class MyComponent extends Vine.Component {
render(props) {
return (
<>
<h1>{ props.title }</h1>
<main>
<article>{ props.content }</article>
</main>
</>
)
}
}
Vine JSX does not have a Virtual DOM but using web components can improve performance. Use the built-in define
function to create web components in an instant
Vine.define('some-text', <p>{ content }</p>, {
shadow: true // attaches shadow to the component
})
Vine.render(<some-text />, document.getElementById('root'))
To compile it, you can use a build tool like webpack. If you are not familiar with such build tools, don't worry. Read our Webpack Setup section to setup webpack to compile your files.
Webpack Setup
The first step is to install webpack
and a couple other things:
npm install webpack webpack-cli babel-loader @babel/core @babel/plugin-transform-react-jsx -D
Now you can configure webpack by writing a webpack.config.js
file. Copy this code and paste it in your webpack.config.js
file.
const path = require('path')
module.exports = {
target: 'web',
mode: 'development',
entry: './index.jsx',
output: {
clean: true,
filename: 'index.min.js',
path: path.resolve('./dist')
},
module: {
rules: [
{
test: /\.(jsx|js)$/gm,
exclude: /node_modules/gm,
use: {
loader: 'babel-loader',
options: {
plugins: [
[
'@babel/plugin-transform-react-jsx',
{
pragma: 'Vine.createNode',
pragmaFrag: "'fragment'"
}
]
]
}
}
}
]
}
}
Now to compile your index.jsx
run the following command:
npx webpack --config ./webpack.config.js
The filename of the generated file will be index.min.js
. This file can be added to your index.html
. There are many other things that you can do with webpack. Be sure to check out all the different loaders that you can use.