ferrugemjs
Advanced tools
FerrugemJS
A simple library, reactive, conventional and non-intrusive! FerrugemJS is inspired by Aurelia and React using Incremental DOM with a html template engine.
No jquery required, only 2kB!
Browser Support
 |  |  |  |  |  |
|---|---|---|---|---|---|
| Latest ✔ | Latest ✔ | 9+ ✔ | Latest ✔ | 6.1+ ✔ | Latest ✔ |
examples https://ferrugemjs.github.io/examples/index.html
how to start: clone skeleton-typescript (recomended way)
individual install
npm i ferrugemjs --save
with webpack
npm i ferrugemjs-loader --save-dev
add 'ferrugemjs-loader' to your rules
rules: [
{
test: /\.html$/
,use:['ferrugemjs-loader']
}
]
with requirejs
npm i ferrugemjs --save
with jspm
jspm install npm:ferrugemjs
npm install --save-dev gulp-ferrugemjs
initialization
eg. index.html file
<body>
<div app></div>
<script>
System.import("ferrugemjs");
</script>
</body>
FerrugemJS will look for the first page element with the attribute "app" to start the application and if not found it, will use the tag "body". Just create app.ts files and app.html in the same directory of the index.html page. If you want to modify the path of the init file just add this information to the app attribute as below:
<div app="other_path/init_app_file"></div>
modules & custom tags
To create a module witch will be a custom tag do you need two files with same name(eg. "module-a.ts" and "module-a.html"). By convention FerrugemJS know that "module-a.ts" is a controller file and "module-a.html" is the view of it and you can easily import it into your main app html file or into other module and use as a component with a custom tag.
eg. "module-a.ts" file.
export class ModuleA{
private title:string;
constructor(){
this.title = "test!";
}
}
eg. "module-a.html" file.
<template>
<h1>My First APP with ${this.title}</h1>
</template>
now, we can importe into other template
<template>
<require from="./module-a"/>
<div>
<module-a title="new title!"/>
</div>
</template>
module lifecycle
attached:
By implementing the method your module will be prompted for it once your component is in "DOM".
eg.
attached(){
console.log('im in DOM');
}
detached:
By implementing the method your module will be prompted for it once your component is detached from "DOM".
eg.
detached(){
console.log('im out');
}
set+attribute name:
By implementing the method with the module attribute in CamelCase format your module will be notified when there is any change to the way template attribute.
eg.
setName(name:string){
this.name = name;
}
component refresh from modelview
Controller refresh.
eg.
export class ModuleA{
private title:string;
private refresh:Function;//necessary if you want avoid typescript warnings
doAnyThing(){
this.title = "new Title";
refresh();
}
}
component refresh with state
Controller refresh with new modelview values equivalent to 'setState' of react.
eg.
export class ModuleA{
private title:string;
private refresh:Function;//necessary if you want avoid typescript warnings
doAnyThing(){
refresh({title:"new Title"});//equivalent to "setState of react"
}
}
component shouldUpdate
By implementing the method "shouldUpdate" you can decide if a component should refresh or not by returning true or false.
eg.
export class ModuleA{
private title:string;
private refresh:Function;//necessary if you want avoid typescript warnings
doAnyThing(){
refresh({title:"new Title"});//equivalent to "setState of react"
}
private shouldUpdate(new_props:ISubComp = {}):boolean{
return this.title != new_props.title;
}
}
one-way data binding
When you set the 'value=${name}' in a input component it will set "value" attribute in element after a controller refresh.
eg.
<template>
<div>
<h2>Hello World, ${this.name}</h2>
<input value="${this.name}"/>
</div>
</template>
event binding
When you set the "keyup.bind" in a input component it will change the "name" attribute in controller after a keyup event.
eg.
<template>
<div>
<h2>Hello World, ${this.name}</h2>
<input keyup.bind="this.name"/>
</div>
</template>
manual event reactivity
eg.
<template>
<div>
<h2>Hello World, ${this.name}</h2>
<input change.trigger="this.manualChangeMethod"/>
</div>
</template>
export class HelloWorld{
private name:string;
private refresh:Function;//necessary if you want avoid typescript warnings
constructor(){
this.name = "";
}
manualChangeMethod(event):void{
//a reactive update after 'anyMethod' is calling
this.name = event.target.value;
this.refresh();
}
}
router
There are a basic implamentation at ferrugemjs-router.
template stuffs
if
Conditional render with if.
eg.
<template>
<div>
<span if="this.name==='test'">name is test</span>
</div>
</template>
tag if
conditional flow with tag if condition.
eg.
<template>
<if condition="this.name==='test'">
<span>name is test</span>
</if>
</template>
Tags if,else
eg.
<template>
<div>
<if condition="this.name==='test'">
<span>name is test</span>
<else>
<span>I dont know you!</span>
</if>
</div>
</template>
Tags if,elseif
eg.
<template>
<div>
<if condition="this.name==='test'">
<span>name is test</span>
<elseif condition="this.name==='test2'">
<span>ok, you are test2</span>
</if>
</div>
</template>
Tags if,elseif,else
eg.
<template>
<div>
<if condition="this.name==='test'">
<span>name is test</span>
<elseif condition="this.name==='test2'">
<span>ok, you are test2</span>
<else>
<span>I dont know you!</span>
</if>
</div>
</template>
Loop render with each
eg.
<template>
<ul>
<li each="item in this.itens">${item.name}</li>
</ul>
</template>
Loop render with a custom index
eg.
<template>
<ul>
<li each="item,$index in this.itens">${$index} - ${item.name}</li>
</ul>
</template>
Tag for each
eg.
<template>
<ul>
<for each="item in this.itens">
<li>${item.name}</li>
</for>
</ul>
</template>
Tag for each with index
eg.
<template>
<ul>
<for each="item,$index in this.itens">
<li>${$index} - ${item.name}</li>
</for>
</ul>
</template>
skip
Conditional children render with skip.
eg.
<template>
<div skip="this.name==='test'">
<span>name is test</span>
</div>
</template>
This is util when working with libs that dinamicaly insert itens into that node as select2, selectize and others.
import other module
eg.
<template>
<require from="./example/hello-world"/>
<div>
<h1>My First APP with ${this.title}</h1>
<hello-world name="C-3PO"/>
</div>
</template>
give an alias in module import statement
eg.
<template>
<require from="./example/hello-world as sea-bienvenido"/>
<div>
<h1>My First APP with ${this.title}</h1>
<sea-bienvenido name="C-3PO"/>
</div>
</template>
import a css file
You need "plugin-css" for jspm or equivalent if you are using requirejs.
eg.
<template>
<!--if using 'plugin-css' systemjs-->
<require from="./hello-world.css!"/>
<!--if using commons css plugins to requirejs-->
<require from="style!./hello-world"/>
<!--to others commons css plugins-->
<require from="css!./hello-world.css"/>
<h1>My First APP with ${this.title}</h1>
</template>
embed a style tag
eg.
<template>
<style>
.especial-tag{
background-color:red;
}
</style>
<h1 class="especial-tag">My First APP with ${this.title}</h1>
</template>
change the css className
eg.
<template>
<style>
.my-custom-classname{
background-color:red;
}
</style>
<h3 class="my-custom-classname">My element with a custom className</h3>
</template>
change the css className with expression
eg.
<template>
<style>
.style1{
background-color:red;
}
.style2{
background-color:blue;
}
.style3{
background-color:green;
}
</style>
<h3 class="${'my-custom-classname '+this.customStyle}">My element with a custom className by expression</h3>
</template>
set where the content of element must be placed
eg.
<!--hello-world.html-->
<template>
<h1>
<content/>
</h1>
</template>
Bellow is as "hello-world.html" will be used.
eg.
<template>
<require from="./example/hello-world"/>
<div>
<hello-world>
Good night!
</hello-world>
</div>
</template>
import other library/script
eg.
<template>
<require from="moment" type="script"/>
<span>${moment().format('DD/MM/YYYY')}</span>
</template>
import other ui library as a namespace
It is a basic example, but there are a example more elaborate at ferrugemjs-router.
eg.
<template>
<require from="ui-vendor as ui" type="namespace"/>
<div>
<span>using a ui library</span>
<ui:progress-bar/>
</div>
</template>
preserve a element instance
eg.
<template>
<require from="./test-comp"/>
<div>
<for each="item in this.itens">
<test-comp key:id="${item.id}"/>
</for>
</div>
</template>
You shouldnt use this every moment, but it is recomended to use in a interation with tag "for" ou instruction "each".
associete a controller method to DOM event
eg.
<template>
<button click.trigger="this.showName">show my name!</button>
</template>
***associete a controller method to DOM event with extra paramaters.
eg.
<template>
<button click.trigger="this.showName('test')">show my name!</button>
</template>
to access a camelCase method or attribute from template (use slashes '-')
eg.
<template>
<require from="./test-comp"/>
<div>
<test-comp full-name="test"/>
</div>
</template>
associete a controller method to a custom element event
eg.
<template>
<require from="./test-comp"/>
<div>
<test-comp on-change-name.subscribe="this.showName"/>
</div>
</template>
composition
with composition you need use the same id an key:id to load the view.
eg.
<template>
<div>
<compose id="_unique_id_" key:id="_unique_id" view:from="path_to_dinamic_module/module_to_loader"/>
</div>
</template>
custom view-model
eg.
<!--view-one.html-->
<template view-model="./universal-view-model">
<div>
<h1>VIEW ONE</h1>
<span>bla,bla,bla....</span>
</div>
</template>
<!--view-two.html-->
<template view-model="./universal-view-model">
<div>
<h3>VIEW TWO</h3>
<p>lol lol lol</p>
<img src="logo.png"/>
</div>
</template>
template viewmodel-less
eg.
<template no-view-model="true">
<h1>NO viewmodel</h1>
</template>
function representation
If you have a function with a "export default" you can represent it in your template with a tag.
eg.
export default function(log:{}){
console.log(log);
}
<template>
<require from="./myfunctionlog as fn-log" type="script"/>
<div>
<fn-log msg="it is alive"/>
</div>
</template>
other example
//make your own router interface
import page = require("page");
export default (config:{path:string,setHandler:Function})=>{
if(config.path && config.setHandler){
page(config.path,context=>{
config.setHandler(context.params);
});
}else{
page.start();
}
}
using
<template>
<require from="../commons/router as add-router" type="script"/>
<div>
<add-router path="/user/:id" set-handler="this.edit"/>
</div>
</template>
power ups!
When you need more power then...
tag script
useful when working with some jquery plugins.
eg.
<template>
<require from="jquery as jq" type="script"/>
<div>
<span class="test"></span>
<script>
jq(".test").hide();
</script>
</div>
</template>
conditional script
eg.
<template>
<require from="jquery as jq" type="script"/>
<div>
<span class="test"></span>
<script if="this.visible">
jq(".test").hide();
</script>
</div>
</template>
get "this" scope into script
eg.
<template>
<require from="jquery as jq" type="script"/>
<div>
<span class="test"></span>
<script if="this.visible">
jq(".test").hide();
this.visible = false;
</script>
</div>
</template>
FAQs
A reactive library.
The npm package ferrugemjs receives a total of 0 weekly downloads. As such, ferrugemjs popularity was classified as not popular.
We found that ferrugemjs demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
TC39 met in Seattle and advanced 9 JavaScript proposals, including three to Stage 4, introducing new features and enhancements for a future ECMAScript release.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.