GithubHelp home page GithubHelp logo

bellodexchange / lsxc Goto Github PK

View Code? Open in Web Editor NEW

This project forked from askucher/lsxc

0.0 0.0 0.0 61 KB

Compile Livescript + Pug + React + SASS as a single component

LiveScript 79.61% JavaScript 20.39%

lsxc's Introduction

LSX Compiler

logo

  • 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

Highlighting Rules ACE, Cloud9 - https://gist.github.com/askucher/4ffe22d43cba7ef727ae8208c525228b

Demo

Demo

News

We can pay for improvements when we accept your pull requests

We are hiring - please contract [email protected]

Join to collaborate https://ide.c9.io/askucher/lsxc

Install

npm i lsxc -g

#next modules we use for demo:
npm i react react-dom mobx mobx-react --save

Example

Code (file.ls)

Example

Compile

lsxc -skhbc file.ls

Help

To see all available options for lsxc run next command:

lsxc --help

Run programmatically

JavaScript

let lsxc = require('lsxc');

let opts = {
    file: "filename",
    target: "resultname",
    bundle: "bundle",
    html: "index"
};

lsxc(opts);

Use a custom HTML template

1. Create a file template.html

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <title>The Perfect App</title>
    <dynamicCSS/>
  </head>
  <body>
    <dynamicHTML/>
  </body>
</html>

2. Then compile an app:

lscx -h -t ./template.html

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.