Permalink
Browse files

Updates copy.

  • Loading branch information...
Paul Cuthbertson
Paul Cuthbertson committed Sep 28, 2016
1 parent bfe32d2 commit 0b7cb3e65637e7e7e4e3d4a728944098b93df4e9
Showing with 22 additions and 9 deletions.
  1. +4 −4 source-map/README.md
  2. +14 −5 source-map/src/index.html
  3. +4 −0 source-map/src/style/main.css
View
@@ -1,14 +1,14 @@
# source-map
-** NOTE: Source mapping is currently in beta only **
+**NOTE: Source mapping is currently in [beta release](https://github.com/paulcuth/starlight-examples/blob/master/source-map/package.json#L33) only**
-An example that uses `grunt-starlight` to precompile a Lua script into a JavaScript file and associated source map.
+An example that uses `grunt-starlight` to precompile a Lua script into a JavaScript file with associated source map.
See this example online at: http://paulcuth.me.uk/starlight/source-map-example
-## Instructions.
+## Running locally
-Navigate to the `source-map` directory in a terminal, install dependencies and build.
+Navigate to the `source-map` directory in a terminal, then install dependencies and build:
```
npm install
View
@@ -3,21 +3,30 @@
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="./style/main.css" />
+ <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+ <meta content="utf-8" http-equiv="encoding">
+ <title>Starlight :: Source map example</title>
</head>
<body>
<section id="canvas"></section>
<article>
<h1>Source mapping with Starlight</h1>
<ol>
<li>Open your browser's console window and go to the Debugger/Sources tab.</li>
- <li>Select the <code>script/app.lua</code> file from the list and you should see the Lua source code that is running.</li>
- <li>Add a breakpoint to line 3.</li>
- <li>Refresh the page.</li>
+ <li>Select the <code>script/app.lua</code> file from the list and you should see the Lua source code of the page.</li>
+ <li>Add a breakpoint.</li>
+ <li>Refresh.</li>
+ <li>Try blackboxing the Starlight runtime code, so that you only see Lua.</li>
</ol>
<p>
- Execution will stop at the breakpoint and you should be able to step through the source from there.
- You can blackbox the Starlight runtime code so that you only see the Lua source being executed.
+ This is the first iteration and it's far from perfect. Each browser has its own odd behaviours that I'll document soon.
+ Any help on on ironing out these quirks would be much appreciated.
+ <p>
+ </p>
+ Unfortunately, due to the way that scoping is represented, it hasn't been possible to display variables in the debugger, which is sad.
+ However, you can step through Lua source across files and see Lua in error stack traces. Woop.
</p>
+ <p>This is an example of using <a href="http://starlight.paulcuth.me.uk/">Starlight</a> Lua to ES6 compiler. View <a href="https://github.com/paulcuth/starlight-examples/tree/master/source-map/src">page source</a>. <a href="https://twitter.com/lua_starlight">@lua_starlight</a> on Twitter.</p>
</article>
<script src="http://paulcuth.me.uk/starlight/browser-lib/starlight.js"></script>
@@ -19,6 +19,10 @@ body {
overflow: hidden;
}
+a {
+ color: #fff;
+}
+
#canvas {
flex-grow: 1;
position: relative;

0 comments on commit 0b7cb3e

Please sign in to comment.