vizhub-issue-tracker
vizhub-issue-tracker copied to clipboard
vizhub-core
How to add package?
Here's an example, from https://vizhub.com/curran/visualizing-population-centers?edit=files&file=package.json
{
"dependencies": {
"d3": "7.8.2",
"topojson-client": "3.1.0"
},
"license": "MIT",
"vizhub": {
"libraries": {
"d3": {
"global": "d3",
"path": "/dist/d3.min.js"
},
"topojson-client": {
"global": "topojson",
"path": "/dist/topojson-client.min.js"
}
}
}
}
To add a new package as a dependency in VizHub using package.json, you need to know:
- The NPM package name
- The version (only fixed versions are supported)
- The browser global that the library exposes
- The path in the CDN of the browser build
The package name and version go under dependencies, just like a "real" package.json. The browser global and CDN path are configured under vizhub.libraries, since those are needed by VizHub to pull in the package. The way VizHub pulls in packages is different from the typical npm install, because it works on the Web and needs to support hot reloading. The way it works is that the VizHub runtime uses the information in package.json to add <script> tags to the page that load the libraries in the traditional way, where they expose global variables (browser globals).
Here's an example of the generated script tags, also from https://vizhub.com/curran/visualizing-population-centers
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/topojson-client.min.js"></script>
</head>
Then, when the code is built in the VizHub runtime using Rollup, the information of the global variable and package name is used to tell Rollup to resolve imports from those packages to the browser globals. This is why the VizHub builds are so fast, because they do not include all the code of the dependencies, but rather just refer to the globals.
I hope this helps!
