Skip to content

homeassistant-hacs-m/grecha.js

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Grecha.js

KashaHard

Simple Front-End JavaScript Framework. Originally designed for emoteJAM. The name basically means buckwheat in russian.

Quick Start

https://tsoding.github.io/grecha.js/example.html

<!DOCTYPE html>
<html>
  <head><title>Grecha.js</title></head>
  <body>
    <div id="entry"></div>
    <script src="./grecha.js"></script>
    <script>
      const kasha = img("Kasha.png");
      const kashaHard = img("KashaHard.gif");

      const [count, setCount] = createSignal(0);
      const squared = () => count() * count();
      const [hard, setHard] = createSignal(false);

      const route = routeSignal();

      const r = div(() => ({
          "/": () => div(
            h1("Grecha.js"),
            div(a("Foo (new content here!)").att$("href", "#/foo")),
            div(a("Bar").att$("href", "#/bar")),
            div("Counter: ", count),
            div(() => hard() ? kashaHard : kasha).onclick$(() => {
              setCount(count() + !hard());
              setHard(!hard());
            }),
          ),
          "/foo": () => div(
            h1("Foo"),
            () => {
              // Wow, scoping!
              const [count, setCount] = createSignal(-7);
              return div("This one resets when you leave the page, automagically: ", b(count)).onclick$(() => setCount(count() + 1));
            },
            p(LOREM),
            div(a("Home").att$("href", "#")),
          ),
          "/bar": () => div(
            h1("Bar"),
            p(LOREM),
            div(a("Home").att$("href", "#"))
          )
        } [route()]
      ));
    </script>
  </body>
</html>

About

Simple Front-End JavaScript Framework

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 61.1%
  • HTML 38.9%