rayburgemeestre
/
cheerpweb
Suivre 1
Ajouter aux favoris 0
Bifurcation 0
Code Tickets 0 Demandes d'ajout 0 Versions 0 Wiki Activité
Parcourir la source

Render differently that allows document.write()'s to work! 

Fix examples
master
rayburgemeestre il y a 6 ans
Parent
d81d5a9877
révision
1eac5f4369
7 fichiers modifiés avec 156 ajouts et 96 suppressions
Vue séparée Afficher les stats Diff
  1. +74
    -26
      src/App.vue
  2. +0
    -0
      src/examples/call_cpp_example
  3. +0
    -0
      src/examples/dom_example
  4. +0
    -0
      src/examples/example_template
  5. +82
    -0
      src/examples/perf_example
  6. +0
    -0
      src/examples/pong_example
  7. +0
    -70
      src/perf_example

+ 74
- 26
src/App.vue Voir le fichier

@@ -117,10 +117,10 @@
const _ = require('lodash');
const axios = require('axios');

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'
import { dom_example } from './examples/dom_example'
import { pong_example } from './examples/pong_example'
import { call_cpp_example } from './examples/call_cpp_example'
import { perf_example } from './examples/perf_example'

let cpp_code = dom_example.cpp
let js_code = dom_example.js
@@ -206,28 +206,76 @@
},
methods: {
update_iframe(name) {
const iframe = findIframeByName(name);
iframe.document.body.innerHTML = '';
iframe.document.write(this.html_code);
iframe.document.write("<script>");

// wasm
iframe.document.write("function fetchBuffer(path) {\n");
iframe.document.write(" return new Promise( (resolve, reject) => {\n");
iframe.document.write(" var wasm = '" + this.wasm_code.trim() + "';\n");
iframe.document.write(" wasm = atob(wasm)\n");
iframe.document.write("\n");
iframe.document.write(" var len = wasm.length;\n");
iframe.document.write(" var bytes = new Uint8Array(len);\n");
iframe.document.write(" for (var i = 0; i < len; i++) {\n");
iframe.document.write(" bytes[i] = wasm.charCodeAt(i);\n");
iframe.document.write(" }\n");
iframe.document.write(" resolve(bytes.buffer);\n");
iframe.document.write(" });\n");
iframe.document.write("}\n");

iframe.document.write(this.js_code);
iframe.document.write("<\/script>");
if (false) {
const iframe = findIframeByName(name);
iframe.document.body.innerHTML = ''
var head = this.html_code.indexOf("<head>");
if (head != -1) {
iframe.document.write(this.html_code.substr(0, head + 6 /* len(<head>) */));
}
else {
iframe.document.write(this.html_code);
}

iframe.document.write("<script>");
// wasm
iframe.document.write("function fetchBuffer(path) {\n");
iframe.document.write(" return new Promise( (resolve, reject) => {\n");
iframe.document.write(" var wasm = '" + this.wasm_code.trim() + "';\n");
iframe.document.write(" wasm = atob(wasm)\n");
iframe.document.write("\n");
iframe.document.write(" var len = wasm.length;\n");
iframe.document.write(" var bytes = new Uint8Array(len);\n");
iframe.document.write(" for (var i = 0; i < len; i++) {\n");
iframe.document.write(" bytes[i] = wasm.charCodeAt(i);\n");
iframe.document.write(" }\n");
iframe.document.write(" resolve(bytes.buffer);\n");
iframe.document.write(" });\n");
iframe.document.write("}\n");
iframe.document.write(this.js_code);
iframe.document.write("<\/script>");

if (head != -1) {
iframe.document.write(this.html_code.substr(head + 6 /* len(<head>) */ + 1));
}
} else {
// new experimental rendering
//const iframe = findIframeByName(name);
const iframe = document.getElementsByTagName('iframe')[0];
//iframe.document.body.innerHTML = ''
var head = this.html_code.indexOf("<head>");
var s = "";
if (head != -1) {
s += this.html_code.substr(0, head + 6 /* len(<head>) */);
}
else {
s += this.html_code;
}

s += "<script>";
// wasm
s += "function fetchBuffer(path) {\n";
s += " return new Promise( (resolve, reject) => {\n";
s += " var wasm = '" + this.wasm_code.trim() + "';\n";
s += " wasm = atob(wasm)\n";
s += "\n";
s += " var len = wasm.length;\n";
s += " var bytes = new Uint8Array(len);\n";
s += " for (var i = 0; i < len; i++) {\n";
s += " bytes[i] = wasm.charCodeAt(i);\n";
s += " }\n";
s += " resolve(bytes.buffer);\n";
s += " });\n";
s += "}\n";
s += this.js_code;
s += "<\/script>";

if (head != -1) {
s += this.html_code.substr(head + 6 /* len(<head>) */ + 1);
}

iframe.srcdoc = s;
}
},
onLoadIframe(event) {
// iframe ready, set flag?

src/call_cpp_example → src/examples/call_cpp_example Voir le fichier


src/dom_example → src/examples/dom_example Voir le fichier


src/example_template → src/examples/example_template Voir le fichier


+ 82
- 0
src/examples/perf_example Voir le fichier

@@ -0,0 +1,82 @@
const cpp_code = `
#include <cmath>
#include <cheerp/client.h>
#include <cheerp/clientlib.h>

class [[cheerp::jsexport]] JsBridge
{
public:
JsBridge() = default;
size_t test()
{
volatile size_t counter = 0;
for (int i = 0; i < 50000; ++i) {
for (int j = 0; j < 50000; ++j) {
counter++;
}
}
return sqrt(counter);
}
};
void webMain() {}
`.trim();

const html_code = `
<html>
<head>
<script>
function test() {
var counter = 0
for (var i = 0; i < 50000; ++i) {
for (var j = 0; j < 50000; ++j) {
counter++;
}
}
return Math.sqrt(counter);
}
function benchmark() {
var jsBridge = new JsBridge();
{
document.write("Running native JS..<br>");
var start = new Date().getTime();
var ret = test();
var time = new Date().getTime() - start;
document.write("Result: " + ret + "<br>");
document.write("Execution time: " + (time / 1000.0) + " secs<br>");
}
document.write("<br>");
{
document.write("Running compiled JS..<br>");
var start = new Date().getTime();
var ret = jsBridge.test();
var time = new Date().getTime() - start;
document.write("Result: " + ret + "<br>");
document.write("Execution time: " + (time / 1000.0) + " secs<br>");
}
}
</script>
</head>
<body>
Benchmark started... <br/><br/>
<script>
benchmark();
</script>
<br/>
Benchmark finished... <br/>
</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 }

src/pong_example → src/examples/pong_example Voir le fichier


+ 0
- 70
src/perf_example Voir le fichier

@@ -1,70 +0,0 @@
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 }

Écrire Aperçu
Chargement…
Annuler
Enregistrer