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 ✔ |
####install jspm install npm:ferrugemjs
####how to start: clone skeleton-typescript
####initialization
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(ex: "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.
ex: "app.ts" file.
export class MyBasicApp{
private title:string;
constructor(){
this.title = "ferrugemjs";
}
}
Yes, its a simple class using only "typescript" or "javascript 2015", without any interference from the library.
"app.html" file.
<template>
<h1>My First APP with ${this.title}</h1>
</template>
###module lifecycle
*attached: By implementing the method your module will be prompted for it once the html is in "DOM".
*detached: By implementing the method your module will be prompted for it once your object is detached from "DOM".
*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
###one-way data binding
When you set the "value.bind" in a input component it will change the "name" attribute in controller when the user change its value.
<template>
<h2>Hello World, ${this.name}</h2>
<input value.bind="this.name"/>
</template>
###manual reactivity
export class HelloWorld{
private name:string;
constructor(){
this.name = "";
}
anyMethod(event):void{
//a reactive update after 'anyMethod' is calling
this.name = event.target.value;
this.refresh();
}
}
<template>
<h2>Hello World, ${this.name}</h2>
<input value="${this.name}" change.trigger="this.anyMethod"/>
</template>
###template stuffs
if,elseif,else
<template>
<if condition="this.name==='test'">
<span>name is test</span>
</if>
<if condition="this.name==='test'">
<span>name is test</span>
<else>
<span>I dont know you!</span>
</if>
<if condition="this.name==='test'">
<span>name is test</span>
<elseif condition="this.name==='test2'">
<span>ok, you are test2</span>
</if>
<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>
</template>
for each
<template>
<ul>
<for each="item in this.itens">
<li>${item.name}</li>
</for>
<for each="item,$index in this.itens">
<li>${$index} - ${item.name}</li>
</for>
</ul>
</template>
import other module
<template>
<require from="./example/hello-world"></require>
<h1>My First APP with ${this.title}</h1>
<hello-world name="C-3PO"></hello-world>
</template>
give an alias in module import statement.
<template>
<require from="./example/hello-world as sea-bienvenido"></require>
<h1>My First APP with ${this.title}</h1>
<sea-bienvenido name="C-3PO"></sea-bienvenido>
</template>
import a css file.
<template>
<require from="./hello-world.css!"></require>
<require from="./example/hello-world as sea-bienvenido"></require>
<h1>My First APP with ${this.title}</h1>
<sea-bienvenido name="C-3PO"></sea-bienvenido>
</template>
embed a style tag.
<template>
<style>
.especial-tag{
background-color:red;
}
</style>
<require from="./example/hello-world as sea-bienvenido"></require>
<h1 class="especial-tag">My First APP with ${this.title}</h1>
<sea-bienvenido name="C-3PO"></sea-bienvenido>
</template>
change the the css className
<template class="my-custom-classname">
<style>
.my-custom-classname{
background-color:red;
}
</style>
<h3>My element with a custom className</h3>
</template>
associete a controller method to DOM event.
<template>
<button click.trigger="this.showName">show my name!</button>
</template>
associete a controller method to DOM event with extra paramaters.
<template>
<button click.trigger="this.showName('test')">show my name!</button>
</template>
associete a controller method to a custom element event.
<template>
<require from="./test-comp"></require>
<test-comp on-change-name.subscribe="this.showName"></test-comp>
</template>
composition.
<template>
<compose view="path_to_dinamic_module/module_to_loader"></compose>
</template>
to access a camelCase method or attribute from template (use slashes '-').
<template>
<require from="./test-comp"></require>
<test-comp full-name="test"></test-comp>
</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
Newly introduced telemetry in devenv 1.4 sparked a backlash over privacy concerns, leading to the removal of its AI-powered feature after strong community pushback.
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.