Don't forgot to store the HTML output.

Added some examples

docker_api/api.py

 def compile():
     if request.method == 'POST':
         note = str(request.data.get('source', ''))
+        html = str(request.data.get('html', ''))
         flags = str(request.data.get('flags', ''))
         uuid_ = str(request.data.get('uuid', ''))
 
         with open("/data/{}/{}/source".format(uuid_, counter), "w") as f:
             f.write(note)
             f.close()
+        with open("/data/{}/{}/html".format(uuid_, counter), "w") as f:
+            f.write(html)
+            f.close()
         with open("/data/{}/{}/flags".format(uuid_, counter), "w") as f:
             f.write(flags)
             f.close()
         uuid_ = str(request.data.get('uuid', ''))
         version = str(request.data.get('version', ''))
         source = ''
+        html = ''
         flags = ''
 
         if not os.path.exists("/data/{}/{}".format(uuid_, version)):
         with open("/data/{}/{}/source".format(uuid_, version), "r") as f:
             source = f.read()
             f.close()
+        with open("/data/{}/{}/html".format(uuid_, version), "r") as f:
+            html = f.read()
+            f.close()
         with open("/data/{}/{}/flags".format(uuid_, version), "r") as f:
             flags = f.read()
             f.close()
 
         return {
                    'source': source,
+                   'html': html,
                    'flags': flags,
                }, status.HTTP_201_CREATED
 

src/App.vue

 
     import { dom_example } from './dom_example'
     import { pong_example } from './pong_example'
+    import { call_cpp_example } from './call_cpp_example'
+    import { perf_example } from './perf_example'
 
     let cpp_code = dom_example.cpp
     let js_code = dom_example.js
                     return [
                         { title: 'DOM example', cpp_code: dom_example.cpp, 'js_code': dom_example.js, 'wasm_code': dom_example.wasm, 'html_code': dom_example.html, flags: dom_example.flags },
                         { title: 'Pong WASM example', cpp_code: pong_example.cpp, 'js_code': pong_example.js, 'wasm_code': pong_example.wasm, 'html_code': pong_example.html, flags: pong_example.flags },
+                        { title: 'Call C++ example', cpp_code: call_cpp_example.cpp, 'js_code': call_cpp_example.js, 'wasm_code': call_cpp_example.wasm, 'html_code': call_cpp_example.html, flags: call_cpp_example.flags },
+                        { title: 'JS vs Compiled JS perf', cpp_code: perf_example.cpp, 'js_code': perf_example.js, 'wasm_code': perf_example.wasm, 'html_code': perf_example.html, flags: perf_example.flags },
                     ]
                 }
             },
                 axios.post(url, {
                     flags: this.compiler_flags,
                     source: this.cpp_code,
+                    html: this.html_code,
                     uuid: this.uuid,
                 })
                     .then(function (response) {
                 this.wasm_code = ex.wasm_code
                 this.html_code = ex.html_code
                 this.compiler_flags = ex.flags
+
+                this.uuid = ''
+                this.version = ''
+                this.share_link = ''
+                window.location.hash = ''
                 return true;
             },
             select_link(event) {
                             this.compiler_output = str;
 
                             var code = response.data.source;
+                            var html = response.data.html;
                             var flags = response.data.flags;
 
                             this.cpp_code = code;
+                            this.html_code = html;
                             this.compiler_flags = flags;
 
                             this.uuid = load_hash

src/call_cpp_example

+const cpp_code = `
+#include <cheerp/client.h>
+#include <cheerp/clientlib.h>
+
+using namespace client;
+
+// The class can of course have any name
+// The [[cheerp::jsexport]] attribute tells Cheerp to make
+// the class available to JavaScript code
+class [[cheerp::jsexport]] JsBridge
+{
+private:
+    // The class is allowed to have member variables
+    // but they should all be trivially destructible
+    int callCount;
+public:
+    JsBridge():callCount(0)
+    {
+    }
+    int addAndReturn(int a)
+    {
+        console.log("Called C++ code");
+        callCount+=a;
+        return callCount;
+    }
+};
+
+// An entry point, even if empty, is still required
+void webMain()
+{
+}`.trim();
+
+const html_code = `
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Cheerp test</title>
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+    <script>
+        var jsBridge=null;
+        function callCPPCode()
+        {
+            if(!jsBridge)
+                jsBridge=new JsBridge();
+            var ret=jsBridge.addAndReturn(3);
+            $("#clickText").text("C++ code returned "+ret);
+            return false;
+        }
+    </script>
+  </head>
+  <body>
+  <a id="clickText" href="#" onclick="callCPPCode()">Click to call C++ code</a>
+  </body>
+</html>`.trim();
+
+const js_code = ``.trim();
+
+const flags = `
+-cheerp-pretty-code
+-cheerp-no-type-optimizer
+-cheerp-no-native-math
+-cheerp-no-math-imul
+-cheerp-no-math-fround
+-O3
+-target cheerp`.trim()
+
+const wasm_code = '';
+
+export const call_cpp_example = { cpp: cpp_code, js: js_code, wasm: wasm_code, html: html_code, flags: flags }

src/example_template

+const cpp_code = ``.trim();
+
+const html_code = ``.trim();
+
+const js_code = ``.trim();
+
+const flags = `
+-cheerp-pretty-code
+-cheerp-no-type-optimizer
+-cheerp-no-native-math
+-cheerp-no-math-imul
+-cheerp-no-math-fround
+-O3
+-target cheerp`.trim()
+
+const wasm_code = '';
+
+export const dom_example = { cpp: cpp_code, js: js_code, wasm: wasm_code, html: html_code, flags: flags }

src/perf_example

+const cpp_code = `
+#include <cheerp/client.h>
+#include <cheerp/clientlib.h>
+
+class [[cheerp::jsexport]] JsBridge
+{
+public:
+    JsBridge() = default;
+    void test()
+    {
+        volatile size_t counter = 0;
+        for (int i = 0; i < 100000; ++i) {
+            for (int j = 0; j < 10000; ++j) {
+                counter++;
+          }
+        }
+    }
+};
+void webMain() {}
+`.trim();
+
+const html_code = `
+<html>
+  <head>
+    <script>
+      function test() {
+		counter = 0
+        for (i = 0; i < 100000; ++i) {
+          for (j = 0; j < 10000; ++j) {
+			counter++;
+          }
+        }
+      }
+      setTimeout(function() {
+          var jsBridge = new JsBridge();
+          {
+           var start = new Date().getTime();
+           test();
+           var time = new Date().getTime() - start;
+           document.getElementById('output').innerHTML +=  "Javascript execution time:" + time + "<br>";
+          }
+
+          {
+           var start = new Date().getTime();
+           jsBridge.test();
+           var time = new Date().getTime() - start;
+           document.getElementById('output').innerHTML +=  "Compiled JS execution time:" + time + "<br>";
+          }
+          return false;
+      }, 500);
+    </script>
+  </head>
+  <body id="output">
+  </body>
+</html>`.trim();
+
+const js_code = ``.trim();
+
+const flags = `
+-cheerp-pretty-code
+-cheerp-no-type-optimizer
+-cheerp-no-native-math
+-cheerp-no-math-imul
+-cheerp-no-math-fround
+-O3
+-target cheerp`.trim()
+
+const wasm_code = '';
+
+export const perf_example = { cpp: cpp_code, js: js_code, wasm: wasm_code, html: html_code, flags: flags }