Paperapp NPM | npm.io

deadsimple json-based SPA app-generator for gitlab (static pages)

Usage

$ npm install paperapp $ paperapp

paperapp init <-- inits a directory with a paper app paperapp dev <-- runs development server

How to create a project

$ npm init
$ npm install paperapp --save
$ paperapp init
$ paperapp dev
   _   _   _   _   _   _   _   _  
  / \ / \ / \ / \ / \ / \ / \ / \ 
 ( P | A | P | E | R | A | P | P )
  \_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/ 

  https://npmjs.org/package/paperapp

Starting up http-server, serving .server
Available on:
  http://127.0.0.1:8080
  http://100.115.92.1:8080
  http://192.168.0.157:8080
Hit CTRL-C to stop the server

Now edit app.json, app.css and app.js in your current dir

$ git add .gitlab-ci.yml app.*
$ git commit -m "1st commit"
$ git push origin master

Voila you have a beautiful offline SPA up and running

Features

Reference

Feature	Example	Result	Comment
JSON Reactive store	`{ "store": { "name":"John" } }`		define default store variables
	`{ "name": "${store.name}" } }`		use store-variable as value
JSON js function	`{ "format":"div", "value":"${window.Date()}" }`		use function output as div-content
JSON Webrequest	`{ "format":"div", "value":"${res/products.html}" }`		use url as div-content
	`{ "$ref":"https://f.com/2.json" }`		uses fetched json-result as value
JS Reactive	`$.on('store.name', console.log )`		reacts to value-change
	`$.set('store.name', "myname")`		updates value
	`$.set('store.name', $.store.name)`		retrigger last value
Application Events	`$.on('/init', console.log )`		respond to event
	`$.on('/init/done', $.curry(console.log,"done!"))`		respond to event (curried)
	`$.on('/init/done', [alert,console.log])`		respond to event (auto map)
	`$.on('/menu/change', console.log )`		respond to event
	`$.trigger('/menu/change', {target:$('#menu select')})`		trigger event
	`$.off('/menu/change',console.log`		unregister eventhandler
*JS Forms"	`$.createForm( myjsonschema )`		renders a jsonschema form
JS DOM	`$.Element({format:"li",value:"hi",attr:{"id":"foo"},style:{"color":"#FFF"}}),class:"foo"})`	hi
	`$('div>li#a')`	HTMLElement	like jquery
	`$.all('div>li').map(console.dir)`	HTMLElement[]	like jquery
	`$.addClass( $('#foo'),'red')`
	`$.removeClass( $('#foo'),'red')`
JS Utility	`$.extend({a:1},{b:2})`	{a:1,b:1}	like lodash
	`$.get($,'store.foo.bar','empty')`	value or 'empty'	shorthand function like lodash
	`$.set($,'store.foo.bar',123)`		shorthand function like lodash
	`$.equals(property, a, b)`		example: myarr.find( equals('title', 'foo') )
	`foo = $.curry(console.log,"foo")`	foo() // prints 'foo'	lazy curry
	`$.renderString("hello ${world}",{world:"man"})`	"hello man"	es6 template evaluation to string
	`$.renderVar("${store})`	{...}	es6 template evaluation to object
	`$.mapasync([1,2,3],function(v,i,next){ next() }, alert)`		async iterator
*JS webrequest	`$.require("https://foo.com/1.js","js", alert )`		require js or css file
	`$.request('PUT','http://f.com/1.json', console.dir)`	string with json	will return cached version if offline
url hash variables	http://foo.com#{"nomenu":true}		hides menu icon
	http://foo.com#{"nofooter":true}		hides footer
	http://foo.com#{"noheader":true}		hides header
	http://foo.com#{"nofullscreen":true}		hides fullscreen icon
	http://foo.com#{"card":"Foo"}		sets 'Foo' as homepage