@vizhub/runtime 0.0.6 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +117 -39
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -28,54 +28,132 @@ The `@vizhub-core/runtime` package is designed to be used within the VizHub plat
|
|
|
28
28
|
Here's an example of how to use the runtime to compute the `srcdoc` for a visualization:
|
|
29
29
|
|
|
30
30
|
```javascript
|
|
31
|
-
import {
|
|
32
|
-
import { rollup } from
|
|
33
|
-
import { createVizCache } from
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
const content = {
|
|
43
|
-
id: 'example-viz',
|
|
44
|
-
files: {
|
|
45
|
-
'index.js': {
|
|
46
|
-
name: 'index.js',
|
|
47
|
-
text: 'console.log("Hello World");',
|
|
31
|
+
import { expect, test } from "vitest";
|
|
32
|
+
import { rollup } from "rollup";
|
|
33
|
+
import { computeSrcDoc, createVizCache, VizCache } from "@vizhub/runtime";
|
|
34
|
+
|
|
35
|
+
test("computeSrcDoc", async () => {
|
|
36
|
+
const content = {
|
|
37
|
+
files: {
|
|
38
|
+
"32748932": {
|
|
39
|
+
name: "index.js",
|
|
40
|
+
text: "export const main = (container) => container.innerHTML = 'Hello, world!';",
|
|
41
|
+
},
|
|
48
42
|
},
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
const vizCache: VizCache = createVizCache({
|
|
46
|
+
initialContents: [content],
|
|
47
|
+
handleCacheMiss: async () => {
|
|
48
|
+
return content;
|
|
52
49
|
},
|
|
53
|
-
}
|
|
54
|
-
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
const resolveSlug = async (slug: string) => {
|
|
53
|
+
throw new Error("Not implemented");
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
const getSvelteCompiler = async () => {
|
|
57
|
+
throw new Error("Not implemented");
|
|
58
|
+
};
|
|
55
59
|
|
|
56
|
-
const { initialSrcdoc, initialSrcdocError } =
|
|
57
|
-
await computeSrcDoc({
|
|
60
|
+
const { initialSrcdoc, initialSrcdocError } = await computeSrcDoc({
|
|
58
61
|
rollup,
|
|
59
62
|
content,
|
|
60
63
|
vizCache,
|
|
61
|
-
resolveSlug
|
|
62
|
-
|
|
63
|
-
},
|
|
64
|
-
getSvelteCompiler: async () => {
|
|
65
|
-
// Return the Svelte compiler
|
|
66
|
-
},
|
|
64
|
+
resolveSlug,
|
|
65
|
+
getSvelteCompiler,
|
|
67
66
|
});
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
67
|
+
console.log("initialSrcdoc", initialSrcdoc);
|
|
68
|
+
console.log("initialSrcdocError", initialSrcdocError);
|
|
69
|
+
// TODO fix error where ID changes each time (expected behavior)
|
|
70
|
+
// by adding an option to omit the id on the `viz-container` class.
|
|
71
|
+
expect(initialSrcdoc).toEqual(`<html>
|
|
72
|
+
<head>
|
|
73
|
+
<meta charset="utf-8">
|
|
74
|
+
<style>
|
|
75
|
+
body {
|
|
76
|
+
margin: 0;
|
|
77
|
+
overflow: hidden;
|
|
78
|
+
}
|
|
79
|
+
#viz-container-74148 {
|
|
80
|
+
height: 100vh;
|
|
81
|
+
}
|
|
82
|
+
</style>
|
|
83
|
+
</head>
|
|
84
|
+
<body>
|
|
85
|
+
<div id="viz-container-74148"></div>
|
|
86
|
+
<script id="injected-script">(function(g,f){typeof exports==='object'&&typeof module!=='undefined'?f(exports):typeof define==='function'&&define.amd?define(['exports'],f):(g=typeof globalThis!=='undefined'?globalThis:g||self,f(g.Viz={}));})(this,(function(exports){'use strict';const main = (container) => container.innerHTML = 'Hello, world!';exports.main=main;}));//# sourceMappingURL=index.js.map
|
|
87
|
+
|
|
88
|
+
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VzIjpbInVuZGVmaW5lZC9pbmRleC5qcyJdLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgY29uc3QgbWFpbiA9IChjb250YWluZXIpID0+IGNvbnRhaW5lci5pbm5lckhUTUwgPSAnSGVsbG8sIHdvcmxkISc7Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJ5UEFBWSxNQUFDLElBQUksR0FBRyxDQUFDLFNBQVMsS0FBSyxTQUFTLENBQUMsU0FBUyxHQUFHIn0=</script>
|
|
89
|
+
<script>
|
|
90
|
+
(() => {
|
|
91
|
+
let cleanup;
|
|
92
|
+
const render = () => {
|
|
93
|
+
const container = document.getElementById('viz-container-74148');
|
|
94
|
+
typeof cleanup === 'function' && cleanup();
|
|
95
|
+
cleanup = Viz.main(container, { state: window.state, setState, writeFile });
|
|
96
|
+
};
|
|
97
|
+
const setState = (next) => {
|
|
98
|
+
window.state = next(window.state);
|
|
99
|
+
render();
|
|
100
|
+
};
|
|
101
|
+
const writeFile = (fileName, content) => {
|
|
102
|
+
parent.postMessage({ type: 'writeFile', fileName, content }, "*");
|
|
103
|
+
};
|
|
104
|
+
const run = () => {
|
|
105
|
+
try {
|
|
106
|
+
setState((state) => state || {});
|
|
107
|
+
} catch (error) {
|
|
108
|
+
console.error(error);
|
|
109
|
+
parent.postMessage({ type: 'runError', error }, "*");
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
run();
|
|
113
|
+
const runJS = (src) => {
|
|
114
|
+
document.getElementById('injected-script')?.remove();
|
|
115
|
+
const script = document.createElement('script');
|
|
116
|
+
script.textContent = src;
|
|
117
|
+
script.id = 'injected-script';
|
|
118
|
+
document.body.appendChild(script);
|
|
119
|
+
run();
|
|
120
|
+
};
|
|
121
|
+
const runCSS = (src, id) => {
|
|
122
|
+
const styleElementId = 'injected-style' + id;
|
|
123
|
+
let style = document.getElementById(styleElementId);
|
|
124
|
+
if (!style) {
|
|
125
|
+
style = document.createElement('style');
|
|
126
|
+
style.type = 'text/css';
|
|
127
|
+
style.id = styleElementId;
|
|
128
|
+
document.head.appendChild(style);
|
|
129
|
+
}
|
|
130
|
+
style.textContent = src;
|
|
131
|
+
};
|
|
132
|
+
onmessage = (message) => {
|
|
133
|
+
switch (message.data.type) {
|
|
134
|
+
case 'runJS':
|
|
135
|
+
runJS(message.data.src);
|
|
136
|
+
parent.postMessage({ type: 'runDone' }, "*");
|
|
137
|
+
break;
|
|
138
|
+
case 'runCSS':
|
|
139
|
+
runCSS(message.data.src, message.data.id);
|
|
140
|
+
break;
|
|
141
|
+
case 'ping':
|
|
142
|
+
parent.postMessage({ type: 'pong' }, "*");
|
|
143
|
+
break;
|
|
144
|
+
default:
|
|
145
|
+
break;
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
})();
|
|
149
|
+
</script>
|
|
150
|
+
</body>
|
|
151
|
+
</html>`);
|
|
152
|
+
});
|
|
77
153
|
```
|
|
78
154
|
|
|
155
|
+
You can use the generated HTML and run it as a standalone page or within an iframe to display the visualization.
|
|
156
|
+
|
|
79
157
|
## API Documentation
|
|
80
158
|
|
|
81
159
|
### `computeSrcDoc`
|