nicescript
v0.4.2
Published
Reactive JavaScript library designed to reduce amount of boilerplate code on client and server.
Downloads
36
Maintainers
Readme
NiceScript
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.
Rationale
Create web applications with
- less code overall
- much less imperative code
- only JS syntax (less build code)
NiceScript encourage use of component approach, functional programming, and unit tests. But doesn't force you to do so.
Example application: To Do list
Here you can search, add, and remove tasks. Notice how little imperative code does it have.
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();
Install
Node.js:
npm install nicescript
use:
const nice = require('nicescript')();
Browser:
<script src="https://unpkg.com/nicescript/nice.js"></script>
or
<script src="https://cdn.jsdelivr.net/npm/nicescript/nice.js"></script>
Npm package is shipped with 3 versions:
- index.js - Node module
- nice.mjs - ECMAScript module
- nice.js - to use with html
<script>
tag