0.2.1 • Published 6 months ago
@vidog/noreact v0.2.1
Lightweight react-like framework
- Typescript supported
- JSX supported
- States
- Hooks
- Re-render only updated components
Supported hooks
useStateuseEffectuseContextuseReference
Installation & Usage
Install requirements for demo
npm install --save-dev typescript ts-loader webpack webpack-cli
npm install @vidog/noreactHere we use webpack, you can use whatever you want
Create some files
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "ES5",
"rootDir": "src",
"outDir": "dist",
"jsx": "react",
"reactNamespace": "JSX"
}
}webpack.config.js
const path = require('path')
module.exports = {
mode: "development",
devtool: "inline-source-map",
entry: {
main: "./src/index.tsx",
},
output: {
path: path.resolve(__dirname, './build'),
filename: "app.js"
},
resolve: {
extensions: [".ts", ".tsx", ".js", ".jsx"],
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader",
options: { allowTsInNodeModules: true }
}
]
}
}src/index.tsx
import * as NoReact from "@vidog/noreact"
import JSX, {attach, onDomReady, useEffect, useState} from "@vidog/noreact"
interface ButtonProps {
onclick: (x: any) => void
children?: NoReact.Component[]
}
function Button(props: ButtonProps): NoReact.Component {
return (
<button onclick={props.onclick}>{props.children}</button>
)
}
function Counter(): NoReact.Component {
const [counter, setCounter] = useState(0)
useEffect(() => {
console.log('[COUNTER]', 'changed to', counter)
}, [counter])
const onButtonClick = () => {
console.log('[CLICK]')
setCounter(counter + 1)
}
return (
<>
<p><b>Count:</b> <span style={style}>{counter}</span></p>
<div>
<Button onclick={(_) => onButtonClick()}>Click <b>Me</b>!</Button>
</div>
</>
)
}
function App(): NoReact.Component {
return (
<div>
<h1>Hello, world!</h1>
<Counter />
</div>
)
}
onDomReady(() => {
const root = document.getElementById('root')
attach(root, <App />)
})index.html
<html>
<head>
<title>NoReact Demo</title>
<script src="./build/app.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>Run
npx webpack
open index.htmlBuilding and publishing library
# generate bundle and types
npx tsup lib/lib.ts --dts
# publish library
npm publish --access public