Last active
March 25, 2020 13:25
-
-
Save davemo/8245973 to your computer and use it in GitHub Desktop.
Got a .coffee file with JSX? Here's how you can transpile to .js with Reacts JSX parsed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
`/** @jsx React.DOM */` | |
converter = new Showdown.converter | |
Comment = React.createClass | |
render: -> | |
rawMarkup = converter.makeHtml @props.children.toString() | |
`<div className="comment"> | |
<h2 className="comment">{this.props.author}</h2> | |
<span dangerouslySetInnerHTML={{__html: rawMarkup}} /> | |
</div>` | |
CommentBox = React.createClass | |
loadCommentsFromServer: -> | |
$.ajax | |
url: @props.url | |
success: (data) => | |
@setState {data} | |
handleCommentSubmit: (comment) -> | |
comments = @state.data | |
comments.push comment | |
$.ajax | |
url: @props.url | |
type: 'POST' | |
data: comment | |
success: (data) => | |
@setState {data} | |
getInitialState: -> | |
{data: []} | |
componentWillMount: -> | |
@loadCommentsFromServer() | |
setInterval(@loadCommentsFromServer, @props.pollInterval) | |
render: -> | |
`<div className="commentBox"> | |
<h1>Comments</h1> | |
<CommentList data={this.state.data}></CommentList> | |
<CommentForm onCommentSubmit={this.handleCommentSubmit}></CommentForm> | |
</div>` | |
CommentList = React.createClass | |
render: -> | |
commentNodes = @props.data.map (comment) -> | |
`<Comment author={comment.author}>{comment.text}</Comment>` | |
`<div className="commentList">{commentNodes}</div>` | |
CommentForm = React.createClass | |
handleSubmit: -> | |
author = @refs.author.getDOMNode().value.trim() | |
text = @refs.text.getDOMNode().value.trim() | |
@props.onCommentSubmit {author, text} | |
@refs.author.getDOMNode().value = "" | |
@refs.text.getDOMNode().value = "" | |
false | |
render: -> | |
`<form className="commentForm" onSubmit={this.handleSubmit}> | |
<input type="text" placeholder="Your name" ref="author" /> | |
<input type="text" placeholder="Say something..." ref="text" /> | |
<input type="submit" value="Post" /> | |
</form>` | |
module.exports = | |
start: -> | |
React.renderComponent(`<CommentBox url="/comments.json" pollInterval={2000} />`, $("#container")[0]) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** @jsx React.DOM */; | |
var Comment, CommentBox, CommentForm, CommentList, converter; | |
converter = new Showdown.converter; | |
Comment = React.createClass({ | |
render: function() { | |
var rawMarkup; | |
rawMarkup = converter.makeHtml(this.props.children.toString()); | |
return React.DOM.div( {className:"comment"}, | |
React.DOM.h2( {className:"comment"}, this.props.author), | |
React.DOM.span( {dangerouslySetInnerHTML:{__html: rawMarkup}} ) | |
); | |
} | |
}); | |
CommentBox = React.createClass({ | |
loadCommentsFromServer: function() { | |
var _this = this; | |
return $.ajax({ | |
url: this.props.url, | |
success: function(data) { | |
return _this.setState({ | |
data: data | |
}); | |
} | |
}); | |
}, | |
handleCommentSubmit: function(comment) { | |
var comments, | |
_this = this; | |
comments = this.state.data; | |
comments.push(comment); | |
return $.ajax({ | |
url: this.props.url, | |
type: 'POST', | |
data: comment, | |
success: function(data) { | |
return _this.setState({ | |
data: data | |
}); | |
} | |
}); | |
}, | |
getInitialState: function() { | |
return { | |
data: [] | |
}; | |
}, | |
componentWillMount: function() { | |
this.loadCommentsFromServer(); | |
return setInterval(this.loadCommentsFromServer, this.props.pollInterval); | |
}, | |
render: function() { | |
return React.DOM.div( {className:"commentBox"}, | |
React.DOM.h1(null, "Comments"), | |
CommentList( {data:this.state.data}), | |
CommentForm( {onCommentSubmit:this.handleCommentSubmit}) | |
); | |
} | |
}); | |
CommentList = React.createClass({ | |
render: function() { | |
var commentNodes; | |
commentNodes = this.props.data.map(function(comment) { | |
return Comment( {author:comment.author}, comment.text); | |
}); | |
return React.DOM.div( {className:"commentList"}, commentNodes); | |
} | |
}); | |
CommentForm = React.createClass({ | |
handleSubmit: function() { | |
var author, text; | |
author = this.refs.author.getDOMNode().value.trim(); | |
text = this.refs.text.getDOMNode().value.trim(); | |
this.props.onCommentSubmit({ | |
author: author, | |
text: text | |
}); | |
this.refs.author.getDOMNode().value = ""; | |
this.refs.text.getDOMNode().value = ""; | |
return false; | |
}, | |
render: function() { | |
return React.DOM.form( {className:"commentForm", onSubmit:this.handleSubmit}, | |
React.DOM.input( {type:"text", placeholder:"Your name", ref:"author"} ), | |
React.DOM.input( {type:"text", placeholder:"Say something...", ref:"text"} ), | |
React.DOM.input( {type:"submit", value:"Post"} ) | |
); | |
} | |
}); | |
module.exports = { | |
start: function() { | |
return React.renderComponent(CommentBox( {url:"/comments.json", pollInterval:2000} ), $("#container")[0]); | |
} | |
}; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){ | |
/** @jsx React.DOM */; | |
var Comment, CommentBox, CommentForm, CommentList, converter; | |
converter = new Showdown.converter; | |
Comment = React.createClass({ | |
render: function() { | |
var rawMarkup; | |
rawMarkup = converter.makeHtml(this.props.children.toString()); | |
return React.DOM.div( {className:"comment"}, | |
React.DOM.h2( {className:"comment"}, this.props.author), | |
React.DOM.span( {dangerouslySetInnerHTML:{__html: rawMarkup}} ) | |
); | |
} | |
}); | |
CommentBox = React.createClass({ | |
loadCommentsFromServer: function() { | |
var _this = this; | |
return $.ajax({ | |
url: this.props.url, | |
success: function(data) { | |
return _this.setState({ | |
data: data | |
}); | |
} | |
}); | |
}, | |
handleCommentSubmit: function(comment) { | |
var comments, | |
_this = this; | |
comments = this.state.data; | |
comments.push(comment); | |
return $.ajax({ | |
url: this.props.url, | |
type: 'POST', | |
data: comment, | |
success: function(data) { | |
return _this.setState({ | |
data: data | |
}); | |
} | |
}); | |
}, | |
getInitialState: function() { | |
return { | |
data: [] | |
}; | |
}, | |
componentWillMount: function() { | |
this.loadCommentsFromServer(); | |
return setInterval(this.loadCommentsFromServer, this.props.pollInterval); | |
}, | |
render: function() { | |
return React.DOM.div( {className:"commentBox"}, | |
React.DOM.h1(null, "Comments"), | |
CommentList( {data:this.state.data}), | |
CommentForm( {onCommentSubmit:this.handleCommentSubmit}) | |
); | |
} | |
}); | |
CommentList = React.createClass({ | |
render: function() { | |
var commentNodes; | |
commentNodes = this.props.data.map(function(comment) { | |
return Comment( {author:comment.author}, comment.text); | |
}); | |
return React.DOM.div( {className:"commentList"}, commentNodes); | |
} | |
}); | |
CommentForm = React.createClass({ | |
handleSubmit: function() { | |
var author, text; | |
author = this.refs.author.getDOMNode().value.trim(); | |
text = this.refs.text.getDOMNode().value.trim(); | |
this.props.onCommentSubmit({ | |
author: author, | |
text: text | |
}); | |
this.refs.author.getDOMNode().value = ""; | |
this.refs.text.getDOMNode().value = ""; | |
return false; | |
}, | |
render: function() { | |
return React.DOM.form( {className:"commentForm", onSubmit:this.handleSubmit}, | |
React.DOM.input( {type:"text", placeholder:"Your name", ref:"author"} ), | |
React.DOM.input( {type:"text", placeholder:"Say something...", ref:"text"} ), | |
React.DOM.input( {type:"submit", value:"Post"} ) | |
); | |
} | |
}); | |
module.exports = { | |
start: function() { | |
return React.renderComponent(CommentBox( {url:"/comments.json", pollInterval:2000} ), $("#container")[0]); | |
} | |
}; | |
},{}],2:[function(require,module,exports){ | |
app = require("./app.js"); | |
$(function() { | |
return app.start(); | |
}); | |
},{"./app.js":1}]},{},[2]) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
gulp = require('gulp') | |
coffee = require('gulp-coffee') | |
gutil = require('gulp-util') | |
browserify = require('gulp-browserify') | |
react = require('gulp-react') | |
concat = require('gulp-concat') | |
gulp.task 'coffee-reactify', -> | |
gulp.src('./app/js/**/*.coffee') | |
.pipe(coffee({bare:true, header: false}).on('error', gutil.log)) | |
.pipe(react()) | |
.pipe(gulp.dest('./workspace/')) | |
gulp.task 'browserify', ['coffee-reactify'], -> | |
gulp.src('./workspace/startup.js') | |
.pipe(browserify({debug: false}).on('error', gutil.log)) | |
.pipe(concat('browserify-bundle.js')) | |
.pipe(gulp.dest('./workspace/')) | |
gulp.task 'default', -> | |
gulp.run 'coffee-reactify', 'browserify' | |
gulp.watch './app/js/**/*.coffee', -> | |
gulp.run 'coffee-reactify', 'browserify' |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
gulp = require('gulp') | |
coffee = require('gulp-coffee') | |
gutil = require('gulp-util') | |
react = require('gulp-react') | |
gulp.task 'coffee', -> | |
gulp.src('./app/js/**/*.coffee') | |
.pipe(coffee({bare:true, header: false}).on('error', gutil.log)) | |
.pipe(gulp.dest('./workspace/')) | |
gulp.task 'jsxify', ['coffee'] -> | |
gulp.src('./workspace/**/*.js') | |
.pipe(react()) | |
.pipe(gulp.dest('./workspace/')) | |
gulp.task 'default', -> | |
gulp.run 'coffee', 'jsxify' |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment