feature(emscripten): switching to WASM

Gruntfile.js

@@ -37,6 +37,7 @@ module.exports = function(grunt) {
     'versions',
     'libsass:build',
     'build:sass',
+    'shell:copyWasm',
     'build:worker',
     'build:sync',
     'build:node',
@@ -48,6 +49,7 @@ module.exports = function(grunt) {
     'libsass:prepare',
     'versions',
     'libsass:debug',
+    'shell:copyWasm',
     'build:sass',
     'build:worker',
     'build:sync',
@@ -58,6 +60,7 @@ module.exports = function(grunt) {
   grunt.registerTask('rebuild', [
     'versions',
     'libsass:build',
+    'shell:copyWasm',
     'build:sass',
     'build:worker',
     'build:sync',
@@ -67,6 +70,7 @@ module.exports = function(grunt) {
   grunt.registerTask('rebuild:debug', [
     'versions',
     'libsass:debug',
+    'shell:copyWasm',
     'build:sass',
     'build:worker',
     'build:sync',

grunt-tasks/file-size.js

@@ -65,10 +65,17 @@ module.exports = function GruntfileVersions(grunt) {
             compressed: compressed
           };
 
-          var _sizes = JSON.stringify(sizes, null, 2);
-          fs.writeFile('dist/file-size.json', _sizes, done);
+          getFileSize('dist/libsass.wasm', function(normal, compressed) {
+            sizes['dist/libsass.wasm'] = {
+              normal: normal,
+              compressed: compressed
+            };
+
+            var _sizes = JSON.stringify(sizes, null, 2);
+            fs.writeFile('dist/file-size.json', _sizes, done);
+          });
         });
       });
     });
   });
-};
+};

grunt-tasks/shell.js

@@ -11,6 +11,9 @@ module.exports = function GruntfileShell(grunt) {
     buildLibsassDebug: {
       command: '(cd libsass && /bin/bash ./build.sh "<%= pkg.libsass %>" debug)',
     },
+    copyWasm: {
+      command: 'cp libsass/libsass/lib/libsass.wasm dist/libsass.wasm',
+    },
   });
 
 };

libsass/Makefile.patch

@@ -1,19 +1,22 @@
 --- Makefile.orig	2015-09-09 14:30:05.000000000 +0300
 +++ Makefile	2015-09-09 14:36:59.000000000 +0300
-@@ -208,6 +208,35 @@
+@@ -208,6 +208,38 @@
  debug-shared: CXXFLAGS := -g -DDEBUG -DDEBUG_LVL="$(DEBUG_LVL)" $(filter-out -O2,$(CXXFLAGS))
  debug-shared: shared
 
 +js: static
 +	emcc lib/libsass.a -o lib/libsass.js \
-+ 		-O3 \
++		-Os \
 +		-s EXPORTED_FUNCTIONS="['_sass_compile_emscripten']" \
 +		-s EXTRA_EXPORTED_RUNTIME_METHODS='["ccall", "Pointer_stringify", "getValue", "lengthBytesUTF8", "stringToUTF8"]' \
 +		-s DISABLE_EXCEPTION_CATCHING=0 \
 +		-s ALLOW_MEMORY_GROWTH=1 \
 +		-s EMTERPRETIFY=1 \
 +		-s EMTERPRETIFY_ASYNC=1 \
 +		-s EMTERPRETIFY_WHITELIST=@../emterpreter_whitelist.json \
++		-s WASM=1 \
++		--pre-js ../../src/sass.configure.path.js \
++		--pre-js ../../src/pre-module.js \
 +		--memory-init-file 0
 +
 +js-debug: static
@@ -41,7 +44,7 @@
 
  clean-objects: lib
 -	-$(RM) lib/*.a lib/*.so lib/*.dll lib/*.la
-+	-$(RM) lib/*.a lib/*.so lib/*.dll lib/*.la lib/*.js
++	-$(RM) lib/*.a lib/*.so lib/*.dll lib/*.la lib/*.js lib/*.wasm
  	-$(RMDIR) lib
  clean: clean-objects
  	$(RM) $(CLEANUPS)

sass.source.html

@@ -23,6 +23,9 @@ <h2>Try the following example:</h2>
   console.log("compiled", result.text);
 });</pre>
 
+  <script>
+    window.SASSJS_RELATIVE_PATH = 'libsass/libsass/lib';
+  </script>
   <script src="libsass/libsass/lib/libsass.js"></script>
   <script src="src/sass.util.js"></script>
   <script src="src/sass.options.js"></script>

src/pre-module.js

@@ -0,0 +1,12 @@
+/*global Sass, SASSJS_RELATIVE_PATH*/
+/*jshint strict:false*/
+
+var Module = {
+  locateFile: function(path) {
+    // we expect the libsass.wasm to live next to sass.worker.js and sass.sync.js in the dist directory
+    return SASSJS_RELATIVE_PATH + '/' + path;
+  },
+  onRuntimeInitialized: function() {
+    setTimeout(Sass._ready);
+  },
+}

src/sass.api.js

@@ -307,6 +307,7 @@ var Sass = {
       throw new Error('Sass.compile() requires second argument to be an object (options) or a function (callback)');
     }
 
+    var _previousOptions = null;
     var done = function done(result) {
       var _cleanup = function() {
         // we're done, the next invocation may come
@@ -340,7 +341,6 @@ var Sass = {
 
     try {
       // temporarily - for the duration of this .compile() - overwrite options
-      var _previousOptions = null;
       if (_options) {
         _previousOptions = Sass._cloneOptions();
         Sass.options(_options);
@@ -415,10 +415,3 @@ options.forEach(function(option) {
   Sass._options[option.key] = Sass._defaultOptions[option.key] = option.initial;
   Sass._optionTypes[option.key] = option.coerce;
 });
-
-// until 0.9.6 we used a weird hacky way to get informed by Module.onRuntimeInitialized
-// when emscripten was fully loaded. But since 0.9.5 we're not using a separate .mem file
-// anymore and emscripten doesn't preload any files for us, so this became irrelevant.
-
-// initialize after emscripten is loaded and the event loop cleared
-setTimeout(Sass._ready);

src/sass.configure.path.js

@@ -1,19 +1,30 @@
-/*global document*/
+/*global document, location, SASSJS_RELATIVE_PATH*/
 // identify the path sass.js is located at in case we're loaded by a simple
 // <script src="path/to/sass.js"></script>
 // this path can be used to identify the location of
 // * sass.worker.js from sass.js
 // * libsass.js.mem from sass.sync.js
 // see https://github.com/medialize/sass.js/pull/32#issuecomment-103142214
 // see https://github.com/medialize/sass.js/issues/33
-var SASSJS_RELATIVE_PATH = (function() {
+var _SASSJS_RELATIVE_PATH = typeof SASSJS_RELATIVE_PATH !== 'undefined' && SASSJS_RELATIVE_PATH
+var SASSJS_RELATIVE_PATH = _SASSJS_RELATIVE_PATH || (function() {
   'use strict';
 
+  var path = null;
+
   // in Node things are rather simple
   if (typeof __dirname !== 'undefined') {
     return __dirname;
   }
 
+  // in a WebWorker we're always relative to the the worker itself
+  if (typeof WorkerLocation !== 'undefined') {
+    path = location.href;
+    if (path.slice(-15) === '/sass.worker.js') {
+      return path.slice(0, -15);
+    }
+  }
+
   // we can only run this test in the browser,
   // so make sure we actually have a DOM to work with.
   if (typeof document === 'undefined' || !document.getElementsByTagName) {
@@ -26,7 +37,7 @@ var SASSJS_RELATIVE_PATH = (function() {
     return scripts[scripts.length - 1];
   })();
 
-  var path = currentScript && currentScript.src;
+  path = currentScript && currentScript.src;
   if (!path) {
     return null;
   }