Template

Template is a simple JS framework for creating interactive applications.

It focuses on using web-native patterns.

Calling it a framework is a bit of an exaggeration, it's a single class that manages HTML <template>s.

The entire "framework" is here: ./template.js

Usage

Your Hello World example:

<!DOCTYPE >
<html>
  <head>
    <script src="./template.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <template id="HelloWorld">
      <div class="hello-world">
        <h1 class="message"></h1>
      </div>
    </template>
    <script>
      class HelloWorld extends Template {
        constructor() {
          // First argument is the id of the template
          super("HelloWorld");
          // fragment contains the hydrated template
          // We can use it to query for child nodes, in this case: class="message"
          // Anything you want to update during runtime should be stored on "this"
          this.message = this.fragment.querySelector(".message");
        }
        setMessage(msg) {
          // Update the content of <h1 class="message">
          this.message.innerText = msg;
        }
      }
      // Get the div we want to mount into
      const app = document.getElementById("app");
      // Create an instance of our HelloWorld component
      const helloworld = new HelloWorld();
      // Mount our component into the dom
      helloworld.mount(app);
      // Set our message
      helloworld.setMessage("Hello Template!");
    </script>
  </body>
</html>

Build process

You'll find that your index.html file grows pretty quick when using Template.

The fix is easy. First, create a directory called app.

Then create the files that make up our index.html "template":

For example:

./app/pre-css.html:

<!DOCTYPE html>
<html>
  <head>
    <script src="./template.js"></script>
    <style>

./app/pre-template.html:

    </style>
  </head>
  <body>
    <div id="app"></div>

./app/pre-js.html:

    <script>

./app/post-js.html:

    </script>
  </body>
</html>

If you look at the files above, we've just split a standard index.html file up into chunks.

Now we use this little shell script to "build" our app by injecting our files:

cat ./app/pre-css.html > index.html
# Inject all of our CSS into the page
cat ./app/**/*.css > index.html
cat ./app/pre-template.html >> index.html
# Inject all of our HTML into the pa ge
cat ./app/**/*.html > index.html
cat ./app/pre-js.html >> index.html
# Inject all of our JS into the page
cat ./app/**/*.js >> index.html
cat ./app/post-js.html >> index.html

Now index.html contains your single page app!

You can now create folders for each component (and nested components) under the app directory.

For example, here is a file system with an Auth component that has two subcomponents Login and Signup:

./app
├── Auth
│   ├── index.html
│   ├── index.js
│   ├── Login
│   │   ├── index.html
│   │   └── index.js
│   └── Signup
│       ├── index.html
│       └── index.js
├── post-js.html
├── pre-css.html
├── pre-js.html
└── pre-template.html

For some example components, checkout the ./examples directory.

Note: For CSS to work with the ShadowDOM Template uses, you'll need to include <style> tags inside the <template> tag of your component's index.html file. The page's CSS will not apply to nodes in the ShadowDOM tree. You can still style some global properties in a global CSS file if you choose, but this "quirk" of web components is why there are no index.css files in the file tree above.

bhenry/template

Template

Usage

Build process