- Compile LiveScript + Pug + SASS + React into JavaScript and CSS bundles
- Describe the styles, logic and layout of your app in one file (component style)
- Use benefits of indented languages
- Build React DOM in functional style
- Use fast compiler
We can pay for improvements when we accept your pull requests
We are hiring - please contract a.stegno@gmail.com
Join to collaborate https://ide.c9.io/askucher/lsxc
npm i lsxc -g
#next modules we use for demo:
npm i react react-dom mobx mobx-react --save require! {
\mobx-react : { observer }
\mobx : { observable }
\react-dom : { render }
\react
}
.btn
color: redpadding-left: 5px
&:hovercolor: orangebtn = ({click, text})->
a.pug.btn(target='blank'on-click=click) #{text} input = ({store})->
handle-enter-click = (event) -> returnifevent.key-codeisnt13store.todos.push text: event.target.value
event.target.value = ''input.pug(on-key-down=handle-enter-click) Main = observer ({store})->
remove = (todo, _)-->
index = store.todos.index-oftodoreturnifindex < 0store.todos.splice 1, index
.pug
h3.pug Tasksfortodoinstore.todos
.pug span.pug #{todo.text}span.pug
btn {text: 'Remove', click: removetodo}
input {store}
hr.pug window.onload = ->
store = observabledotodos:
* text: 'Do dishes'
...
renderdoMain.pug(store=store)
document.document-elementlsxc -skhbc file.lsTo see all available options for lsxc run next command:
lsxc --helpletlsxc=require('lsxc');letopts={file: "filename",target: "resultname",bundle: "bundle",html: "index"};lsxc(opts);<!DOCTYPE html><htmllang="en-us"><head><metacharset="utf-8"><title>The Perfect App</title><dynamicCSS/></head><body><dynamicHTML/></body></html>lscx -h -t ./template.html