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

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