Nicescript NPM

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();

JS Bin | Detailed explanation