GitHub - PuffinJS/puffin: 🐧 A components library, and a bit more!

This repository was archived by the owner on Dec 24, 2021. It is now read-only.

Latest commit

History

Folders and files

Name		Name	Last commit message	Last commit date
samples		samples
src		src
.editorconfig		.editorconfig
.gitignore		.gitignore
.npmignore		.npmignore
LICENSE.md		LICENSE.md
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json
webpack.config.js		webpack.config.js

Repository files navigation

🐧 PuffinJS

🤔 About

PuffinJS is a JavaScript library for creating reusable components for web.

🔬 Status

Pretty stable but, be careful when using on production. (WIP)

What does it have?

Reusable components
- Async rendering
- Events binding
Components styling
State manager
Events emitter
Router
Addons middlewares
Language addon

⚽ Usage

Installing:

npm install @mkenzo_8/puffin

Importing:

import { element, style, state, render, routerBox, routerLink, lang } from "@mkenzo_8/puffin"

Example projects are located under /samples.

Example:

import { element, style, render } from '@mkenzo_8/puffin'
const myStyles = style`
	& {
		color: rgb(100,100,100);
	}
`
const App = () => {
	return element`
		<div class="${myStyles}">
			<h1>Hello World</h1>
			<button :click="${clickMe}">Click me</button>
		</div>
	`
}
function clickMe(){
	alert("Hello World!")
}
render(App(),document.body)