JAY
Jay is a JavaScript framework for creating a single page apps. The project is in `State` version, feel free to contribute in any way.
Documentation: https://linktodocs.com
Install
npm install jay-jsUsage
Jay provides you a dynamic Router, UI components with reactive properties, State controller, Observer function that trigger a callback everytime that state changes.
#Router
import { Router } from "jay-js/router";
const renderTarget = document.getElementById("root");
// Home
const Home = () => {
return "Hello World";
}
// Contact
const Contact = () => {
return "Contact-me";
}
Router([
{path: "/", element: Home, target: renderTarget}
{path: "/contact", element: Contact, target: renderTarget}
])
// You can also change the render target.
// It means that is possible to keep some elements
// contents without "re-render" it throught navigation#UI
import { Button, Section } from "jay-js/ui";
const HelloWorld = () => {
const NavHeader = Section({
className: "my-header-class"
})
const MyButton = Button({
// className: "my-button", // optional, Jay has built-in styles
content: "Click Me!",
click: () => {
alert("Hello from Button");
}
})
NavHeader.append(
"Hello World!",
MyButton
)
return NavHeader;
}
const root = document.getElementById("root");
root.append(HelloWorld())Or -----
import { Button, Section } from "jay-js/ui";
const HelloWorld = () => {
const MyButton = Button({
// className: "my-button", // optional, Jay has built-in styles
content: "Click Me!",
click: () => {
alert("Hello from Button");
}
})
const NavHeader = Section({
className: "my-header-class",
content: [
"Hello World!",
MyButton
]
})
return NavHeader;
}
const root = document.getElementById("root");
root.append(HelloWorld())#States
States are used to store any type of data on it's first parameter that can be changed with a setter method. States can be tracked by Observer method.
import { State } from "jay-js/hooks"
const App = () => {
const myState = State("Initial value")
console.log(myState.get()) // Returns "Initial value"
myState.set("Second value") // Change state value
console.log(myState.get()) // Returns "Second value"
}
App()#Observer
The observer can be used to render a contente or trigger a function/callback everytime that the State changes.
import { Section } from "jay-js/ui"
import { State, Observer } from "jay-js/hooks"
const App = () => {
const myState = State(0);
const counter = Section({
tag: "h1",
content: `Count: ${myState.get()}`
})
Observer(myState, () => {
counter.set(`Count: ${myState.get()}`)
}, true)
return counter
}
const root = document.getElementById("root");
root.append(App())OR ------
import { Section } from "jay-js/ui"
import { State, Observer } from "jay-js/hooks"
const App = () => {
const myState = State(0);
const counter = Section({
tag: "h1",
content: Observer(myState, () => `Count: ${myState.get()}`)
})
return counter
}
const root = document.getElementById("root");
root.append(App())