LightScript

A Concise Syntax for JavaScript

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>
    );
  }
}

Why LightScript?

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.

Installation & Usage

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.

Example usage:

$ 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'] }

Features

In addition to all all ES7, JSX, and Flow features:

  • (Optional) Significant Indentation
  • Implicit Returns
  • If Expressions
  • Auto const
  • Async/Await shorthand
  • Safe-Await
  • Readable Operators (or, and, ==, etc)
  • Bound Methods
  • Commaless Objects and Arrays
  • Automatic Semicolon Insertion that always works
  • Array & Object for-loops
  • Array & Object Comprehensions
  • several others

Tests for all features can be seen here and here.

Project Status

(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.