JAY

Documentation: https://linktodocs.com 📝

Install

npm install jay-js

Usage

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())