npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

aleet

v4.8.3

Published

Express Js Component View Engine

Downloads

69

Readme

Introduction To Aleet

Aleet is a server-side templating engine that supports a custom web-component system designed to support encapsulated code with the bare minumum of client-side overhead.

Installing

npm install aleet -save

Setup

Aleet was origionally built with Express JS in mind. The setup for express is short and simple.

const aleet = require('aleet');

const options = {
   debug:true, //set to false before deployment
   viewPath: path.join(__dirname, 'views'), //path to views folder
  }

aleet.config(options);
express.engine('html,aleet); //recommend using html files for built in syntax highlighting

//optional routes (required for component support)
express.get('/components/components/:name',aleet.components);
express.get('/components/css/:name',aleet.css);
express.get('/components/js/:name',aleet.js);

Templating

The templating engine supports template inheritance and inclusion.

Subs get replaced by the immidiate child template

layout.html

...
<div  id="main-content">
  <sub  name="main">
    <div class="gets_replaced"></div>
  </sub>
</div>
...

child.html

<inherits name="/layout"></inherits>

<sub  name="main">
  <div  class="col">
    test
  </div>
</sub>

output

...
<div  id="main-content">
  <div  class="col">
    test
  </div>
</div>
...

Stacks get appended to by all child templates.

layout.html

...
<stack name="head_css">
  <link href="/app.css">
</stack>
...

child.html

<inherits name="/layout"></inherits>

<stack name="head_css">
  <link href="/child.css">
</stack>

output

...
<link href="/app.css">
<link href="/child.css">
...

Data passed to the render function can be interpolated into the resulting html test.html

...
<ul>
  <li>
    sanatized data insertion <% unsafe %>
  </li>
  <li>
    unsanitized data insertion <%! unsafe %>
  </li>
  @if(1 > 2)
    <li>
      This will show not up
    </li>
  @elseif(1 < 2)
    <li>
      this will show up
    </li>
  @endif
  @each( item in arr)
    <li>
      <% item %>
    </li>
  @endeach
  @each( prop in obj)
    <li>
      <% obj[prop] %>
    </li>
  @endeach
</ul>
...

data

{
    unsafe:"<bold> Unsafe </bold>",
    arr:[1,2,3],
    obj:{a:'a',b:'b',c:'c'}
}

output

...
<ul>
  <li>
    sanatized data insertion &lt;bold&gt; Unsafe &lt;/bold&gt;
  </li>
  <li>
    unsanitized data insertion <bold> Unsafe </bold>
  </li>
  <li>
    this will show up
  </li>
  <li>
    1
  </li>
  <li>
    2
  </li>
  <li>
    3
  </li>
  <li>
    a
  </li>
  <li>
    b
  </li>
  <li>
    c
  </li>
</ul>
...

Components

Aleet has some unique features that enabled and empower components within your design. Lets start with an example.

example.html

<require name="test-comp" path="path/from/view/folder/test-comp" version="latest">
<html>
  <head>
    <title>TITLE</title>
    <link rel="stylesheet" type="text/css" href="/components/css/_base">
    <stack  name="components_css">
    </stack>
  </head>
  <body>
    <test-comp name="<% customer.name %>" age="<% customer.age %>"></comp>
    <script type="text/javascript" src="/components/js/_base"></script>
    <stack  name="components_js"></stack>
  </body>
</html>

test-comp.html

<style>
  .test-comp{
    background-color:green;
  }
</style>

<template>
  <div  class="test-comp aleet-comp"  name="<%name%>"  age="<%!age%>">
    My Name is 
    <span class="nameSpan"><% name %></span> 
    and I am 
    <span class="ageSpan"><% age %></span>
  </div>
</template>

<script>
  aleet.register_component('test-comp',{
    ready:function(){
      this[0].innerHTML+=" Edited By Javascript!";
    },
    attributes:{
      name:'String',
      age:'Number'
    },
    on_name_change:function(){
      this.$$('.nameSpan').elem().innerHTML = this.attr('name');
    },
    on_age_change:function(){
      this.$$('.ageSpan').elem().innerHTML = this.attr('age');
    }
  });
</script>

data

{
  customer:{
    name:"John Doe",
    age:35
  }
}

output

<html>
  <head>
    <title>TITLE</title>
    <link rel="stylesheet" type="text/css" href="/components/css/_base">
    <link rel="stylesheet" type="text/css" href="/components/css/test-comp--latest">
  </head>
  <body>
    <div  class="test_comp aleet_comp"  name="John Doe"  age="35">
      My Name is 
      <span class="nameSpan">John Doe</span> 
      and I am 
      <span class="ageSpan">35</span>
    </div>
    <script type="text/javascript" src="/components/js/_base"></script>
    <script type="text/javascript" src="/components/js/test_comp--latest"></script>
  </body>
</html>

you'll notice that there are two stylesheets and two javascript files imported from our component routes we set up at the beginning. The _base stylesheet and script file contain the entirity of our client side runtime, all 12.6 kb (uncompressed) of it. The other two imports point to the style and script inside of our component file.

Every component needs to have the class aleet-comp and an additional class that matches the tag name (custom tag names must have a - in order to be considered correct html) that is unique from any other component. You register the compnent with aleet.register_component(component_name, component_object), the component object can specify a ready function, a supply function, on change handlers, and custom functions

Aleet comes with a small client side runtime that supports components and their use.

The basic usage of the client side runtime begins with the $$( selector ) function. This function serves as a shorthand for element selection. $$ always returns an array of matched elements. each element has the following properties.

$$( selector ) This is the same function as before, but bound to this element. attr( name, value optional ) This function allows for the reading and updating of attributes on the element. data( name, value optional ) This function allows for the reading and updating of arbitrary data on a component, the bahavior with non-component elements is undefined. on( event_name, handler ) This function sets a handler to be called when this element experiences an event with specified name. trigger( event_name ) This function triggers an event on this element. slot( slot_name ) this function returns the $$ wraped slot inside this component that has the specified name classes alias for the dom element's classList porperty styles alias for the dom element's style property elem() the naked DOM element is returned.

Lets look at an example of how this can be used with the previous example code.

var comp = $$('.test_comp');
//returns [{elem},first:func...]
comp = comp.first();
comp.attr('name','Jane Doe');
//sets name to 'Jane Doe' and calls on_name_change

For more information, I suggest looking into our wiki