@vizhub/runtime 0.1.2 → 0.1.3
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 +18 -12
- package/dist/computeSrcDoc.test.d.ts +2 -0
- package/dist/computeSrcDoc.test.d.ts.map +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,12 +4,13 @@ The `@vizhub-core/runtime` package is a core component of the VizHub platform, r
|
|
|
4
4
|
|
|
5
5
|
## Features
|
|
6
6
|
|
|
7
|
-
- **
|
|
7
|
+
- **Source code to HTML transformation**: Converts source code to HTML with embedded scripts and styles, ready for rendering in a browser.
|
|
8
|
+
- **File transformations**: Transforms various file types (e.g., JavaScript, CSS, CSV, Svelte) to be used in the runtime environment.
|
|
8
9
|
- **Hot reloading**: Automatically reloads visualizations when files are updated, providing a smooth development experience.
|
|
9
10
|
- **Dependency management**: Handles external dependencies via CDN and supports custom package configurations.
|
|
10
|
-
- **File transformations**: Transforms various file types (e.g., JavaScript, CSS, CSV, Svelte) to be used in the runtime environment.
|
|
11
11
|
- **Virtual file system**: Implements a virtual file system for handling imports and file loading within the runtime.
|
|
12
12
|
- **Web Worker-based build system**: Uses Web Workers to offload the build process, ensuring a responsive UI during development.
|
|
13
|
+
- **Multi-version runtime support**: Supports both V2 and V3 runtime environments, allowing for backward compatibility and future-proofing.
|
|
13
14
|
|
|
14
15
|
## Installation
|
|
15
16
|
|
|
@@ -64,11 +65,16 @@ test("computeSrcDoc", async () => {
|
|
|
64
65
|
resolveSlug,
|
|
65
66
|
getSvelteCompiler,
|
|
66
67
|
});
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
68
|
+
|
|
69
|
+
const randomID = initialSrcdoc.match(/viz-container-(\d+)/)?.[1];
|
|
70
|
+
|
|
71
|
+
const srcdocWithoutMapping = initialSrcdoc.replace(
|
|
72
|
+
/\/\/# sourceMappingURL=.*$/gm,
|
|
73
|
+
""
|
|
74
|
+
);
|
|
75
|
+
|
|
76
|
+
expect(srcdocWithoutMapping).toEqual(`<!DOCTYPE html>
|
|
77
|
+
<html>
|
|
72
78
|
<head>
|
|
73
79
|
<meta charset="utf-8">
|
|
74
80
|
<style>
|
|
@@ -76,21 +82,21 @@ test("computeSrcDoc", async () => {
|
|
|
76
82
|
margin: 0;
|
|
77
83
|
overflow: hidden;
|
|
78
84
|
}
|
|
79
|
-
#viz-container
|
|
85
|
+
#viz-container-${randomID} {
|
|
80
86
|
height: 100vh;
|
|
81
87
|
}
|
|
82
88
|
</style>
|
|
83
89
|
</head>
|
|
84
90
|
<body>
|
|
85
|
-
<div id="viz-container
|
|
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;}))
|
|
91
|
+
<div id="viz-container-${randomID}"></div>
|
|
92
|
+
<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;}));
|
|
93
|
+
|
|
87
94
|
|
|
88
|
-
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VzIjpbInVuZGVmaW5lZC9pbmRleC5qcyJdLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgY29uc3QgbWFpbiA9IChjb250YWluZXIpID0+IGNvbnRhaW5lci5pbm5lckhUTUwgPSAnSGVsbG8sIHdvcmxkISc7Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJ5UEFBWSxNQUFDLElBQUksR0FBRyxDQUFDLFNBQVMsS0FBSyxTQUFTLENBQUMsU0FBUyxHQUFHIn0=</script>
|
|
89
95
|
<script>
|
|
90
96
|
(() => {
|
|
91
97
|
let cleanup;
|
|
92
98
|
const render = () => {
|
|
93
|
-
const container = document.getElementById('viz-container
|
|
99
|
+
const container = document.getElementById('viz-container-${randomID}');
|
|
94
100
|
typeof cleanup === 'function' && cleanup();
|
|
95
101
|
cleanup = Viz.main(container, { state: window.state, setState, writeFile });
|
|
96
102
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"computeSrcDoc.test.d.ts","sourceRoot":"","sources":["../src/computeSrcDoc.test.ts"],"names":[],"mappings":""}
|