A close superset of ES7 with JSX and Flow, built with Babel.
Designed to make programmers a little more productive.
Item({ item, isActive, onClick }) => className = if isActive: 'active' else: 'inactive' <li onClick={onClick} className={className}> {item} </li> class List extends React.Component: activateItem(itemId): void => if this.state.activeItem == itemId: this.setState({ activeItem: null }) else: this.setState({ activeItem: itemId }) render() -> { items, activeItem } = this.state <div> {if activeItem: <p>You have selected: {activeItem}</p> else: <p>Click an item to select one!</p> } <ul> {items.map((item, i) => isActive = activeItem == item.id if not item.hidden: <Item key={i} item={item} isActive={isActive} onClick={() => this.activateItem(item.id)} /> )} </ul> </div>
const Item = ({ item, isActive, onClick }) => { const className = isActive ? "active" : "inactive"; return ( <li onClick={onClick} className={className}> {item} </li> ); }; class List extends React.Component { constructor(..._args) { super(..._args); this.activateItem = this.activateItem.bind(this); } activateItem(itemId): void { if (this.state.activeItem === itemId) { this.setState({ activeItem: null }); } else { this.setState({ activeItem: itemId }); } } render() { const { items, activeItem } = this.state; return ( <div> {activeItem ? <p>You have selected: {activeItem}</p> : <p>Click an item to select one!</p>} <ul> {items.map((item, i) => { const isActive = activeItem === item.id; if (!item.hidden) { return ( <Item key={i} item={item} isActive={isActive} onClick={() => this.activateItem(item.id)} /> ); } })} </ul> </div> ); } }
Developers care about syntax for a reason. Not only is concise syntax faster to read and faster to write, all syntax guides how you write code – for better and for worse. If "the right way" is verbose or awkward, developers too often choose the wrong way.
Writing maintainable, correct, performant code should be the default.
LightScript aims to align "the easy way" and "the right way" by giving best practices and functional idioms the approachability of Ruby and Python.
Interoperability with JavaScript is at the core of the language; it is implemented as a fork of Babel's parser, and functions as a superset of ES7 with minimal backwards-incompatibilities. Every LightScript language feature strives for a clear 1:1 mapping to JavaScript code you might have written yourself.
For all ES7 features (including import
) and runtime typechecks, use the preset:
$ npm install babel-preset-lightscript
If you just want the core language, use the plugin:
$ npm install babel-plugin-lightscript
...and add to your .babelrc
.
The LightScript plugin currently only processes files with .lsc
or .lsx
in the filename. You can use .lsc.js
and similar if you like.
$ babel --presets lightscript -x .lsc
Or, if you have added {"presets": ["lightscript"]}
to your .babelrc
:
$ babel -x .lsc
If you're using webpack, loaders work as expected:
test: /.(lsc|jsx?)/,
loader: 'babel-loader',
query: {
presets: ['lightscript']
}
In addition to all all ES7, JSX, and Flow features:
(as of March 2017)
LightScript is ready to be used as alpha software. The language itself is "mostly done", with a few nice-to-have features not yet built but a solid core complete.
Tooling is immature, though there is hacky syntax highlighting for Atom and Sublime. Prorities include: more and better syntax highlighters; prettier-based auto-formatting; js-to-lightscript compilation; a standalone `lightscript` CLI; eslint support; and integration with the Flow typechecker.
Better documentation (particuarly guides and feature explanations) is also a high priority. For now, the source code for this website is the best example of LightScript code in the wild.
I'm currently feeling out whether this project will be popular and impactful enough to be worth heavily investing in (there's a lot to do). There will be no backwards-compatibility guarantees until the project hits v1.0 (at least a year) and it may be shelved entirely.
Please don't rely on LightScript for Serious Production Stuff yet.