@a2604882741z/turbine

Turbine Javascript Framework

Stats

StarsIssuesVersionUpdatedCreatedSize
@a2604882741z/turbine
1.3.42 years ago4 years agoMinified + gzip package size for @a2604882741z/turbine in KB

Readme

Turbine Javascript Framework

npm node



This is a SPA project, It's created with corn concept of Vue, It coded by ES6 Syntax and based on MVVM pattern.

Features

  • Mixed Javascript Syntax with HTML code, you can be able to describe the relationship between operational code and UI component.
  • HTML View will automatically update after described data has been changed, so you don't have to care how to let update tags, because this process is in good hand with Turbine.
  • Powerful directive support, all directives as like a hook marked a HTML tag with prefix 't-', multiple default directives such as 't-for' for loop a dom from data, 't-if' for logic estimate, 't-bind' for binding attributes of HTML Tag, 't-on' for binding Events etc, these are effective to build complex logic and make things easier.
  • The compatibility covered IE 8+, Firfox, Chrome, Edge etc.
  • It has only 33KB (after compress).

Getting Started

Installing

You can install Turbine via npm installation

npm install @a2604882741z/turbine --save-dev

Tourist Guide

Import it at the beginning of your porject's entry

import Turbine from "@a2604882741z/turbine";

A basic example

how to initialize a Turbine object:

code:
<turbine id="myFirstTurbineApp"></turbine>
<script>
    Turbine({
        el: "#myFirstTurbineApp"
    });
</script>

result:
<div id="myFirstTurbineApp"></div>

el is a key to tell Turbine which node shall be used as root target, it supports string or html object.

Render from data:

then we gonna put some data and render it into the HTML:

code:
<turbine id="myFirstTurbineApp">{{message}}</turbine>
<script>
    Turbine({
        el: "#myFirstTurbineApp",
        data: {
            message: "hello world"
        }
    });
</script>

result:
<div id="myfirstTurbineApp">hello world</div>

data is an Object to gather the values which are used to create reactive response, The response cause the View update automatically.

Using directive statement:

  • Loop statement example: ```bash code:
    {{i + ' ' + index}}

Turbine({ el: "#myFirstTurbineApp", data: { array: [1,2,3] } });

result:

1 0
2 1
3 2
``` - Conditional statement [example](https://codesandbox.io/s/turbineconditionstatement-t8ju0?fontsize=14): ```bash code:
this element won't output into the HTML Tree

Turbine({ el: "#myFirstTurbineApp", data: { showText: false } });

result:

``` - Attribute binding statement [example](https://codesandbox.io/s/turbineinitialization-903iy?fontsize=14): ```bash code:
this tag will have a className as "pink"

Turbine({ el: "#myFirstTurbineApp", data: { className: "pink" } });

result:

this tag will have a className as "pink"
``` - EventListener [example](https://codesandbox.io/s/turbineeventbinding-2zqly?fontsize=14): ```bash code:
this tag is clickable

Turbine({ el: "#myFirstTurbineApp", methods: { clickEvent: () => { alert("The tag has been clicked"); } } });

- Model statement [example](https://codesandbox.io/s/turbineinitialization-tfv6f?fontsize=14):
```bash
code:
<turbine id="myFirstTurbineApp">
    <input type="text" t-model="textValue">
</turbine>

Turbine({
    el: "#myFirstTurbineApp",
    data: {
        textValue: "this value will be automatically changed when user changes the input value"
    }
});
  • Display statement: ```bash code:
    This element will output with a style statement "display: none;"

Turbine({ el: "#myFirstTurbineApp", data: { display: false } });

result:

This element will output with a style statement "display: none;"
``` - Reference statement [example](https://codesandbox.io/s/turbinereferencestatement-00fm6?fontsize=14): ```bash // You might want to access some node directly, here is a way to satisfy your wish by using `ref` as an attribute on tag.
you can assess this node by coding this.$refs.aNode

let app = Turbine({ el: "#myFirstTurbineApp" }); console.log(app.$refs.aNode); // print the dom node out

```

Troubleshooting

If you get into a trouble and want to get help or share how you solved the issue please visit this page.

Contact me

Github: link
Email: mr.jiangxue@hotmail.com

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.