Commit 468e8a4d authored by Tomáš Hübelbauer's avatar Tomáš Hübelbauer

Develop a Petit example

parents
node_modules
# Parcel
.cache
dist
# Petit
Trying out Petit with TypeScript and Parcel.
Inspired by [this benchmark](https://github.com/krausest/js-framework-benchmark).
Thanks to using TypeScript and Parcel, we get JSX/TSX without hassle.
## Running
`parcel index.html`
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8" />
<title>Petit</title>
<script src="index.tsx"></script>
</head>
<body>
</body>
</html>
import { h, mount, patch } from 'petit-dom';
window.addEventListener('load', _ => {
let appNode = <div/>;
document.body.appendChild(mount(appNode));
let firstName = 'Tomas';
let lastName = 'Hubelbauer';
let isActive = true;
function onFirstNameInputInput(event: Event) {
firstName = (event.currentTarget as HTMLInputElement).value;
render();
}
function onLastNameInputInput(event: Event) {
lastName = (event.currentTarget as HTMLInputElement).value;
render();
}
function onIsActiveInputChange(event: Event) {
isActive = (event.currentTarget as HTMLInputElement).checked;
render();
}
function render() {
const node = <div>
<div>
<input value={firstName} oninput={onFirstNameInputInput} />
<input value={lastName} oninput={onLastNameInputInput} />
<input type="checkbox" checked={isActive} onchange={onIsActiveInputChange} />
</div>
<div>{firstName} {lastName} {isActive ? '' : '(inactive)'}</div>
</div>;
patch(node, appNode);
appNode = node;
}
render();
});
{
"name": "petit",
"version": "1.0.0",
"main": "index.ts",
"repository": "https://gitlab.com/TomasHubelbauer/bloggo-petit.git",
"author": "Tomáš Hübelbauer <tomas@hubelbauer.net>",
"license": "MIT",
"dependencies": {
"petit-dom": "^0.1.0"
}
}
{
"compilerOptions": {
"jsx": "react",
"jsxFactory": "h"
}
}
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1
petit-dom@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/petit-dom/-/petit-dom-0.1.0.tgz#62e199201111bf951522342502a1c67815ac8b52"
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment