Reactive JavaScript library designed to reduce amount of boilerplate code on client and server.
npm install nicescriptNiceScript
=========
Set of JavaScript functions that provide following features without compilation
or configuration:
* Reactive state management
* Type System
* HTML and CSS
* Unit tests
* Utility functions and control structues
You can use any of them independently or as a whole in any JS project.
NiceScript encourage use of component approach, functional programming, and unit tests.
But doesn't force you to do so.
Here you can search, add, and remove tasks.
Notice how little imperative code does it have.
``javascript
const { Box, RBox, Div, Input, wrapMatches } = nice;
const tasks = Box(['Feed the fish', 'Buy milk', 'Walk the dog']);
const taskView = t => Div()
.A(() => tasks.removeValue(t), 'x').float('right').textDecoration('none').up
.add(wrapMatches(t, input.boxValue()))
.margin('1em 0').padding('.5em').borderRadius('.3em').backgroundColor('#DEF');
const input = Input().padding('.5em').width('100%').boxSizing('border-box')
.on('keyup', e => e.key === 'Enter'
&& (tasks.push(e.target.value), e.target.value = ''));
const list = RBox(tasks, input.boxValue, (tt, s) =>
Div(tt.filter(t => t.toLowerCase().includes(s.toLowerCase())), taskView));
Div(input, list).font('1.2rem Arial').show();
`
JS Bin |
Detailed explanation
npm install nicescript
use:
const nice = require('nicescript')();
Browser:
or
Npm package is shipped with 3 versions:
* index.js - Node module
* nice.mjs - ECMAScript module
* nice.js - to use with html