npjs
v0.1.5
Published
The simple SPA library
Downloads
5,371
Readme
NPjs - Simple Single App Page
Online Demo
install
npm install npjsscript
https://simple-singal-app-page.herokuapp.com/np.min.js
https://simple-singal-app-page.herokuapp.com/np.jsusage
<html>
<body>
<div id="app"></div>
<script src="https://simple-singal-app-page.herokuapp.com/np.min.js"></script>
<script>
NP.init('app');
</script>
</body>
</html>router
//client
NP.routes = [
{
path : '/your-path',
template : {
title : 'Your title',
html : `Your HTML code`
}
}
];
//server
app.get('/your-path',function(request,response){
response.render('client_file');
});render data
using {{your_data}} in HTML code -> NP.data.your_dataif
<h1 np-if="seen">Seen</h1>
<script>
NP.data.if.seen = true; //false to hide element
</script>for loop
<ol>
<li np-for="human">
<p style="color:red">
<np tag="text-for" data="name"></np>
</p>
<p style="color:yellow">
- <np tag="text-for" data="sex"></np>
</p>
</li>
</ol>
<script>
NP.data.for = {
human : [
{ name : 'bob' , sex : 'male' },
{ name : 'alice' , sex : 'female' }
]
};
</script>init css
<np tag="style">
<!--your style code -->
</np>init JS
<np tag="script">
<!--your JS code -->
</np>Proxy data
NP.dataProxy.??? //change dataProxy -> change data and data rendered in HTMLComponents
you may refer offline demo using webpackclone
git clone https://github.com/zenlykoi/NPjs-Simple-Single-App-Page.gitInstall NPM
npm installstart server
node index
-> demo in http://localhost:3000/component-indexbuild
webpackwatch
webpack --watchadvice
You may use coffeeScript syntax in VScode to code component(multiline string) !