write out html and side js when html output is requested, to improve page load times

5 files changed, 19 insertions, 18 deletions

diff --git a/emcc b/emcc
index 5b79b411..3406ff83 100755
--- a/emcc
+++ b/emcc
@@ -397,7 +397,8 @@ Options that are modified or new in %s include:
   --shell-file <path>      The path name to a skeleton HTML file used
                            when generating HTML output. The shell file
                            used needs to have this token inside it:
-                           {{{ SCRIPT_CODE }}}
+                           {{{ SCRIPT }}}
+                           (see src/shell.html for an example)
                            Note that this argument is ignored if a
                            target other than HTML is specified using
                            the -o option.
@@ -501,7 +502,8 @@ The target file, if specified (-o <target>), defines what will
 be generated:
 
   <name>.js                JavaScript
-  <name>.html              HTML with embedded JavaScript
+  <name>.html              HTML + side JavaScript file (<name>.js)
+                             (JS on the side improves page load time)
   <name>.bc                LLVM bitcode (default)
   <name>.o                 LLVM bitcode (same as .bc)
 
@@ -1818,22 +1820,21 @@ try:
   if final_suffix == 'html':
     logging.debug('generating HTML')
     shell = open(shell_path).read()
+    assert '{{{ SCRIPT }}}' in shell, 'HTML shell must contain  {{{ SCRIPT }}}  , see src/shell.html for an example'
     html = open(target, 'w')
+    js_target = unsuffixed(target) + '.js'
+    base_js_target = os.path.basename(js_target)
     if proxy_to_worker:
-      html.write(shell.replace('{{{ SCRIPT_CODE }}}', open(shared.path_from_root('src', 'proxyClient.js')).read().replace('{{{ filename }}}', target_basename)))
-      js_target = unsuffixed(target) + '.js'
-      shutil.copyfile(final, js_target)
+      html.write(shell.replace('{{{ SCRIPT }}}', '<script>' + open(shared.path_from_root('src', 'proxyClient.js')).read().replace('{{{ filename }}}', target_basename) + '</script>'))
+      shutil.move(final, js_target)
     elif not Compression.on:
       if debug_level >= 4:
-        match = re.match('.*?<script[^>]*>{{{ SCRIPT_CODE }}}</script>', shell,
-            re.DOTALL)
-        if match is None:
-          raise RuntimeError('''Could not find script insertion point - make sure you have   <script type='text/javascript'>{{{ SCRIPT_CODE }}}</script>   in your HTML file (with no newlines)''')
-        generate_source_map(target, match.group().count('\n'))
-      html.write(shell.replace('{{{ SCRIPT_CODE }}}', open(final).read()))
+        generate_source_map(target)
+      shutil.move(final, js_target)
+      script_tag = '''<script async type="text/javascript" src="%s"></script>''' % base_js_target
+      html.write(shell.replace('{{{ SCRIPT }}}', script_tag))
     else:
       # Compress the main code
-      js_target = unsuffixed(target) + '.js'
       shutil.move(final, js_target)
       Compression.compress(js_target)
 
@@ -1881,8 +1882,8 @@ try:
           });
         };
         compiledCodeXHR.send(null);
-''' % Compression.compressed_name(js_target)
-      html.write(shell.replace('{{{ SCRIPT_CODE }}}', decoding))
+''' % Compression.compressed_name(base_js_target)
+      html.write(shell.replace('{{{ SCRIPT }}}', '<script>' + decoding + '</script>'))
 
       # Add decompressor with web worker glue code
       decompressor = open('decompress.js', 'w')
diff --git a/src/shell.html b/src/shell.html
index ff5f6e35..a33735d9 100644
--- a/src/shell.html
+++ b/src/shell.html
@@ -87,6 +87,6 @@
       };
       Module.setStatus('Downloading...');
     </script>
-    <script async type='text/javascript'>{{{ SCRIPT_CODE }}}</script>
+    {{{ SCRIPT }}}
   </body>
 </html>
diff --git a/tests/embind/shell.html b/tests/embind/shell.html
index c3655e03..f0ee10f8 100644
--- a/tests/embind/shell.html
+++ b/tests/embind/shell.html
@@ -85,6 +85,6 @@
       };
       Module.setStatus('Downloading...');
     </script>      
-    <script type='text/javascript'>{{{ SCRIPT_CODE }}}</script>
+    {{{ SCRIPT }}}
   </body>
 </html>
diff --git a/tests/hello_world_gles_shell.html b/tests/hello_world_gles_shell.html
index 2459d755..22ecee7b 100644
--- a/tests/hello_world_gles_shell.html
+++ b/tests/hello_world_gles_shell.html
@@ -49,7 +49,7 @@
       Module.postRun = doTest;
 
     </script>
-    <script>{{{ SCRIPT_CODE }}}</script>
+    {{{ SCRIPT }}}
   </body>
 </html>
 
diff --git a/tests/sdl_canvas_size.html b/tests/sdl_canvas_size.html
index 5c70210b..50495049 100644
--- a/tests/sdl_canvas_size.html
+++ b/tests/sdl_canvas_size.html
@@ -88,6 +88,6 @@
       };
       Module.setStatus('Downloading...');
     </script>
-    <script async type='text/javascript'>{{{ SCRIPT_CODE }}}</script>
+    {{{ SCRIPT }}}
   </body>
 </html>