Solis.js

i want to learn front-end so im making what javascript has saturated so much... a framework.

QuickStart

Solis is primarly follows the functional paradigm, i.e, almost everything is a function.
Here is a simple way to define a page for the root "/" and for a 404 error:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Solis.js overview</title>
</head>
<body>
  <div id="entry_point"></div>
  <script src="solis.js"></script>
  <script>
  // placeholder for the pages
  const entry_point = document.getElementById("entry_point");

  // current active page
  // at document.location.hash
  const page_map = Solis.router({
    "/": Solis.div(
      Solis.html_tag("h1", "Hello, Solis!"),
      Solis.html_tag("a", "this goes to foo page").attr("href", "#/foo")
    ),
    "/foo": Solis.div(
      Solis.html_tag("h1", "Foo page"),
      Solis.html_tag("p", "goto 404 page ", Solis.html_tag("a", "click me!>").attr("href", "#/404"))
    ),
    "/404": Solis.div(
      Solis.html_tag("h1", "404: page not found."), // the href is the root page.
      Solis.html_tag("p", "go to sweet ", Solis.html_tag("a", "home").attr("href", "#/"))
    )
  });

  entry_point.appendChild(page_map);
  </script>
</body>
</html>

Explanation

the div called entry_point will serve as a buffer for the page content while the page_map will store the current page content. the object passed through route function are the pages and its contents.

Functions

html_tag(tag_name, children)

this function returns a HTML object with a function called attr that can set the attribute of the object.

router(routes)

this function replaces the current document body based on the document.location.hash string. If the route name doesn't exist in the routes object, the body will be on the /404 page (page for 404 error code)

Good practices

As this framework has focus on functional programming, i really support the use of functions to create components.