# JAY

<p align="center">
  <img src="./assets/images/logo-jay.png" width="250">
</p>

<p>
Jay is a JavaScript framework for creating a single page apps.
The project is in <i>`State`</i> version, feel free to contribute in any way.
</p>

Documentation: [https://linktodocs.com](https://linktodocs.com)  📝

# Install

```cmd
npm install jay-js
```

# Usage

Jay provides you a dynamic <i>`Router`</i>, <i>`UI`</i> components with reactive properties, <i>`State`</i> controller, <i>`Observer`</i> function that trigger a callback everytime that state changes.

#Router

```ts
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

```ts
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 -----

```ts   
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 <i>`Observer`</i> method.

```ts
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 <i>`State`</i> changes.

```ts
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 ------

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

```