Add loading indication

Author: hmdne

app/ruby_engine.rb

@@ -1,12 +1,31 @@
+# await: true
+
 # require 'ruby_engine/opal'
 require 'ruby_engine/opal_webworker'
 require 'ruby_engine/cruby_wasi'
 
 class RubyEngine
-  def run(source, instance)
+  def run(source)
     raise NotImplementedError
   end
 
+  def run_with_writer(source, writer, &block)
+    @writer = writer
+    @dots = 0
+    run(source, &block)
+  end
+
+  # Display a message while a block is being executed
+  def loading(part = nil)
+    # Debug option:
+    # @writer.output = "*** Loading... #{"(#{part})" if part}"
+    @dots += 1
+    @writer.output = "*** Loading#{"." * @dots}"
+    result = yield.__await__
+    @writer.output = ""
+    result
+  end
+
   # When you update the engines, ensure that they are tested correctly.
   # Update the engine list also in spec/playground_spec.
   ENGINES = [

app/ruby_engine/cruby_wasi.rb

@@ -1,4 +1,4 @@
-# await: *await*
+# await: *await*, loading
 
 require 'await'
 
@@ -58,40 +58,55 @@ def wasm_module
       end
     end
 
-    def run(source, writer)
-      CRubyWASI.inject_scripts.await
-
-      %x{
-        const $WASI = window["WASI"].WASI;
-        const $WasmFs = window["WasmFs"].WasmFs;
-        const $RubyVM = window["ruby-wasm-wasi"].RubyVM;
-
-        const wasmFs = new $WasmFs();
-        const originalWriteSync = wasmFs.fs.writeSync.bind(wasmFs.fs);
-        const textDecoder = new TextDecoder("utf-8");
-        wasmFs.fs.writeSync = (fd, buffer, offset, length, position) => {
-          const text = textDecoder.decode(buffer);
-          if (fd == 1 || fd == 2) {
-            #{writer.print_to_output(`text`, "")};
-          }
-          return originalWriteSync(fd, buffer, offset, length, position);
-        };
-
-        const vm = new $RubyVM();
-        const wasi = new $WASI({
+    def run(source)
+      `var $WASI, $WasmFs, $RubyVM`
+      wasmInstance, wasmModule, vm, wasi, imports = nil
+
+      loading("downloading scripts") { CRubyWASI.inject_scripts.await }
+
+      loading("early load") do
+        `$WASI = window["WASI"].WASI`
+        `$WasmFs = window["WasmFs"].WasmFs`
+        `$RubyVM = window["ruby-wasm-wasi"].RubyVM`
+
+        wasmFs = `new $WasmFs()`
+        originalWriteSync = `wasmFs.fs.writeSync.bind(wasmFs.fs)`
+        textDecoder = `new TextDecoder("utf-8")`
+        %x{
+          wasmFs.fs.writeSync = (fd, buffer, offset, length, position) => {
+            const text = textDecoder.decode(buffer);
+            if (fd == 1 || fd == 2) {
+              #{@writer.print_to_output(`text`, "")};
+            }
+            return originalWriteSync(fd, buffer, offset, length, position);
+          };
+        }
+
+        vm = `new $RubyVM()`
+        wasi = `new $WASI({
           bindings: { ...$WASI.defaultBindings, fs: wasmFs.fs },
-        });
-        const imports = { wasi_snapshot_preview1: wasi.wasiImport };
-        vm.addToImports(imports);
-        const wasmInstance = await WebAssembly.instantiate(#{wasm_module.await}, imports);
-        await vm.setInstance(wasmInstance);
-        wasi.setMemory(wasmInstance.exports.memory);
-        vm.initialize();
-      }
+        })`
+        imports = `{ wasi_snapshot_preview1: wasi.wasiImport }`
+        `vm.addToImports(imports)`
+      end
+
+      loading("downloading ruby") do
+        wasmModule = wasm_module.await
+      end
+
+      loading("instantiating") do
+        wasmInstance = `WebAssembly.instantiate(wasmModule, imports)`.await
+      end
+
+      loading("initializing") do await
+        `vm.setInstance(wasmInstance)`.await
+        `wasi.setMemory(wasmInstance.exports.memory)`
+        `vm.initialize()`
+      end
 
       yield `vm.eval(source).toString()`
     rescue JS::Error => err
-      writer.log_error(err)
+      @writer.log_error(err)
     end
   end
 end

app/ruby_engine/opal.rb

@@ -11,7 +11,7 @@ def engine_id
       "opal"
     end
 
-    def run(source, writer)
+    def run(source)
       # Compile
       js_code = ::Opal.compile(source)
 

app/ruby_engine/opal_webworker.rb

@@ -1,4 +1,4 @@
-# await: *await*
+# await: *await*, loading
 
 require 'base64'
 require 'json'
@@ -81,10 +81,10 @@ def initialize(version)
         super()
       end
 
-      def upload_opal_await
-        upload_script_await("opal")
-        upload_script_await("opal/full")
-        upload_script_await("opal-parser")
+      def upload_opal_await(engine)
+        engine.loading("downloading ruby") { upload_script_await("opal") }
+        engine.loading("downloading ruby extras") { upload_script_await("opal/full") }
+        engine.loading("downloading ruby compiler") { upload_script_await("opal-parser") }
       end
 
       def upload_script_await(name)
@@ -96,8 +96,7 @@ def eval_ruby_await(ruby)
         send_await(:eval, "var out = eval(Opal.compile(#{ruby.to_json})); out === Opal.nil ? '' : out.$to_s();")
       end
 
-      def prepare_stdio_await(writer)
-        @writer = writer
+      def prepare_stdio_await
         eval_ruby_await <<~RUBY
           $stdout.write_proc = $stderr.write_proc = ->(str) do
             `postMessage(["stdout", str])`
@@ -143,11 +142,15 @@ def engine_id
       "opal-ww-#{@version}"
     end
 
-    def run(source, writer)
+    def run(source)
       worker = OpalWorker.new(@version)
-      worker.upload_opal_await
-      worker.prepare_error_handler_await
-      worker.prepare_stdio_await(writer)
+
+      worker.upload_opal_await(self)
+
+      loading("preparing ruby") do
+        worker.prepare_error_handler_await
+        worker.prepare_stdio_await
+      end
 
       yield(worker.eval_ruby_await(source))
 

app/try_ruby.rb

@@ -369,7 +369,7 @@ def update_screen(item)
   # Code has already been compiled into js
   def eval_code(source)
     begin
-      @engine.run(source, self) do |retval|
+      @engine.run_with_writer(source, self) do |retval|
         show_result(retval)
       end.__await__
       # Here, __await__ is a special Opal instruction
@@ -449,6 +449,10 @@ def print_to_output(str, term = "\n")
     @output_buffer << str.to_s + term
     @output.value = @output_buffer.join
   end
+
+  def output=(text)
+    @output.value = text
+  end
 end
 
 $window.on("dom:load") { TryRuby.start }