Using Starlight with Grunt

It is recommended that you precompile your Lua code to JavaScript and serve only the JavaScript. This negates the need to include the ~800k Babel browser lib in your page.

Install

To do this, you'll need to install the Starlight Grunt plugin. You'll also need Babel and to support Chrome you'll also need Babel's destructuring transform.

npm install grunt-starlight grunt-babel babel-plugin-transform-es2015-destructuring --save-dev

Configure

Then, in your Gruntfile:

grunt.loadNpmTasks('grunt-starlight');
grunt.loadNpmTasks('grunt-babel');
 
grunt.initConfig({
  starlight: {
    counter: {
      src: 'src/counter-app.lua',
      dest: 'dist/counter-app.es6.js',
    }
  },
 
  babel: {
    options: {
      plugins: ['transform-es2015-destructuring']
    },
    counter: {
      src: 'dist/counter-app.es6.js',
      dest: 'dist/counter-app.js',
    }
  }
});
 
grunt.registerTask('default', ['starlight:counter', 'babel:counter']);

Serve

All you need to include in the page is the Starlight runtime and your built script, plus any markup required by your app.

Note that you do not need to include Babel in the page when building in advance.

<!DOCTYPE html>
<html>
  <body>
    <h1>Counter app</h1>
    <p class="result">0</p>
    <p><button>+1</button></p>
 
    <script src="http://paulcuth.me.uk/starlight/browser-lib/starlight.js"></script>
    <script src="http://paulcuth.me.uk/starlight/compiled/counter-app.js"></script>
  </body>
</html>
Run in JS Bin

See also: Grunt counter app example

Package

You can also build many Lua files into a single JavaScript file, like the following example for building Starlight's own tests. Remember to set which file will execute first using options.main.

grunt.loadNpmTasks('grunt-starlight');
grunt.initConfig({
  starlight: {
    test: {
      src: 'test/lua/*/.lua',
      dest: 'dist/test/test.lua.js',
      options: {
        main: 'test-runner.lua',
        basePath: 'test/lua'
      }
    }
    // ...
  }
});

See also: Grunt with modules example