The amazing LightScript core language, with a bunch of extra fixes, features, tools, and docs.
Designed to make programmers considerably 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>
{ ...for idx i, elem item in items:
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>
{(() => {
const _arr = [];
for (
let i = 0, _len = items.length;
i < _len;
i++
) {
const item = items[i];
const isActive = activeItem === item.id;
if (!item.hidden) {
_arr.push(
<Item
key={i}
item={item}
isActive={isActive}
onClick={() =>
this.activateItem(item.id)}
/>
);
}
}
return _arr;
})()}
</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.
Install the Babel preset:
$ npm install @oigroup/babel-preset-lightscriptAdd to .babelrc:
{
"presets": [
[
"@oigroup/babel-preset-lightscript",
{
"env": { "targets": { "ie": 10 } }
}
]
]
}When the preset is enabled, LightScript will automatically process files with.lsc or .lsx in the filename. Once .babelrc is set up, just run:
$ babel -x .lsc
If you're using webpack, add the preset to your babel-loader:
test: /.(lsc|jsx?)/,
loader: 'babel-loader',
query: {
presets: ['@oigroup/babel-preset-lightscript']
}
In addition to all all ES7, JSX, and Flow features:
(Oct 2017, @wcjohnson)
@oigroup/lightscript should be considered beta-quality software. I personally use LightScript in every new project where I have a say, including several applications deployed in production; however, I have certainly run into and fixed the occasional bug along the way.
See the Tooling section of the docs for more information on the tooling ecosystem. As of right now, @oigroup/lightscript has working (though immature) linting, code coverage, and syntax highlighting.
There are several good examples of LightScript in the wild: