├── .editorconfig
├── .gitignore
├── Gruntfile.js
├── README.md
├── assets
├── index.html
└── scripts
│ └── Main.ls
├── bower.json
├── build
├── index.html
└── scripts
│ ├── Main.js
│ └── vendor
│ └── react.js
├── grunt
├── aliases.yaml
├── connect.ls
├── copy.ls
├── livescript.ls
└── react.ls
├── package.json
├── server
└── tmp
└── scripts
└── Main.jsx
/.editorconfig:
--------------------------------------------------------------------------------
1 | # http://editorconfig.org
2 |
3 | root = true
4 |
5 | [*]
6 | indent_style = space
7 | indent_size = 2
8 | end_of_line = lf
9 | charset = utf-8
10 | trim_trailing_whitespace = true
11 | insert_final_newline = true
12 |
13 | [*.md]
14 | trim_trailing_whitespace = false
15 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .svn
2 | .c9
3 |
4 | # ignore npm debug logs etc.
5 | *.log
6 |
7 | # ignore node local modules
8 | node_modules*
9 |
10 | # ignore bower components
11 | /components*
12 | /bower_components*
13 |
--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
1 | require("LiveScript")
2 | module.exports = function (grunt) {
3 | require('load-grunt-config')(grunt)
4 | require('time-grunt')(grunt)
5 | }
6 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | react-livescript-jsx
2 | ====================
3 |
4 | (LS -> JSX -> JS) little demo
5 | ---------------------------
6 |
7 | Use JSX syntax in your ls files right now =)
8 |
9 | Usage example:
10 |
11 | LiveScript Source
12 |
13 | ```ls
14 | R = window.React
15 |
16 | Main = R.create-class do
17 | render: ->
18 | ``Hello {this.props.name}
``
19 | R.render do
20 | ````
21 | document.body
22 | ```
23 |
24 | is translated to JSX
25 |
26 | ```jsx
27 | (function(){
28 | var R, Main;
29 | R = window.React;
30 | Main = R.createClass({
31 | render: function(){
32 | return Hello {this.props.name}
;
33 | }
34 | });
35 | R.render(, document.body);
36 | }).call(this);
37 | ```
38 |
39 | and then compiled to JS
40 |
41 | ```js
42 | (function(){
43 | var R, Main;
44 | R = window.React;
45 | Main = R.createClass({
46 | render: function(){
47 | return React.createElement("div", null, "Hello ", this.props.name);
48 | }
49 | });
50 | R.render(React.createElement(Main, {name: "Joe"}), document.body);
51 | }).call(this);
52 | ```
53 |
--------------------------------------------------------------------------------
/assets/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | React LS JSX Test
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/assets/scripts/Main.ls:
--------------------------------------------------------------------------------
1 | R = window.React
2 |
3 | Main = R.create-class do
4 | render: ->
5 | ``Hello {this.props.name}
``
6 | R.render do
7 | ````
8 | document.body
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-livescript-jsx",
3 | "version": "0.0.0",
4 | "private": true,
5 | "authors": [
6 | "Daniel K "
7 | ],
8 | "license": "MIT",
9 | "ignore": [
10 | "**/.*",
11 | "node_modules",
12 | "bower_components",
13 | "test",
14 | "tests"
15 | ],
16 | "dependencies": {
17 | "react": "~0.12.1"
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/build/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | React LS JSX Test
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/build/scripts/Main.js:
--------------------------------------------------------------------------------
1 | (function(){
2 | var R, Main;
3 | R = window.React;
4 | Main = R.createClass({
5 | render: function(){
6 | return React.createElement("div", null, "Hello ", this.props.name);
7 | }
8 | });
9 | R.render(React.createElement(Main, {name: "Joe"}), document.body);
10 | }).call(this);
11 |
--------------------------------------------------------------------------------
/grunt/aliases.yaml:
--------------------------------------------------------------------------------
1 | default:
2 | - 'livescript'
3 | - 'react'
4 | - 'copy'
5 |
--------------------------------------------------------------------------------
/grunt/connect.ls:
--------------------------------------------------------------------------------
1 | module.exports = (grunt, options) ->
2 | server:
3 | options:
4 | port: grunt.option('port') or 8000
5 | keepalive: true
6 | middleware: (connect, options, middlewares) ->
7 | [
8 | connect.compress(
9 | filter: (req, res) ->
10 | /css|text|javascript/.test res.getHeader 'Content-Type'
11 | )
12 | connect.static 'build', redirect: true
13 | ]
14 |
--------------------------------------------------------------------------------
/grunt/copy.ls:
--------------------------------------------------------------------------------
1 | module.exports =
2 | html:
3 | files:
4 | 'build/index.html': 'assets/index.html'
5 | lib:
6 | files:
7 | 'build/scripts/vendor/react.js': 'bower_components/react/react.js'
8 |
--------------------------------------------------------------------------------
/grunt/livescript.ls:
--------------------------------------------------------------------------------
1 | module.exports =
2 | app:
3 | options:
4 | bare: false
5 | expand: true
6 | cwd: './assets/'
7 | src: ['**/*.ls']
8 | dest: 'tmp/'
9 | rename: (dest, src) ->
10 | folder = src.substring 0, src.lastIndexOf('/')
11 | filename = src.substring src.lastIndexOf('/'), src.length
12 | filename = filename.substring 0, filename.lastIndexOf('.')
13 |
14 | if dest.slice(-1) isnt '/'
15 | dest += '/'
16 |
17 | dest + folder + filename + '.jsx'
18 |
--------------------------------------------------------------------------------
/grunt/react.ls:
--------------------------------------------------------------------------------
1 | module.exports =
2 | app:
3 | files: [
4 | expand: true
5 | cwd: './tmp'
6 | src: ['**/*.jsx']
7 | dest: 'build'
8 | ext: '.js'
9 | ]
10 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-livescript-lsx",
3 | "version": "0.0.0",
4 | "description": "React-LSX",
5 | "private": true,
6 | "devDependencies": {
7 | "connect": "^3.3.3",
8 | "grunt": "^0.4.5",
9 | "grunt-contrib-connect": "^0.9.0",
10 | "grunt-contrib-copy": "^0.7.0",
11 | "grunt-livescript": "^0.5.1",
12 | "grunt-react": "^0.10.0",
13 | "load-grunt-config": "^0.16.0",
14 | "time-grunt": "^1.0.0"
15 | },
16 | "dependencies": {
17 | "grunt-react": "^0.10.0"
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/server:
--------------------------------------------------------------------------------
1 | grunt connect
2 |
3 |
--------------------------------------------------------------------------------
/tmp/scripts/Main.jsx:
--------------------------------------------------------------------------------
1 | (function(){
2 | var R, Main;
3 | R = window.React;
4 | Main = R.createClass({
5 | render: function(){
6 | return Hello {this.props.name}
;
7 | }
8 | });
9 | R.render(, document.body);
10 | }).call(this);
11 |
--------------------------------------------------------------------------------