Untitled
This example demonstrates how VizHub’s `package.json` support enables explicit dependency management and custom library mappings. The code configures React and ReactDOM to load from unpkg via specified global names and CDN paths, using the `vizhub.libraries` field. Unlike a typical visualization, the JavaScript file reads stdin with `fs` and prints an ascending sequence, while the page itself renders styled static text. The example highlights the setup process for importing packages with ES6 syntax rather than showcasing interactive data rendering.
AI-generated descriptionAn first example of VizHub's new package.json features.
Wait, what!?
That's right! You can now use package.json in VizHub. It's a way to declare your dependencies. If you use this, there's no longer any need to add any <script> tags yourself to index.html. VizHub will automatically append these when the page runs, based on the dependencies defined in package.json. To be clear, the dependencies are not included in the bundle. They are still pulled in from a CDN.
Because dependencies are pulled in from a CDN via <script> tags, and those tags introduce browser globals that define the packages, VizHub somehow needs to know how to resolve package names (like the 'react' part of import React from 'react') to browser globals (such as window.React). To date, this mapping has been defined in vizhub-libraries, which is a big list of mappings. This approach is not ideal, because if a library is not on that list, you can't use it with ES6 import syntax. But all that is about to change.
To support usage of any package with ES6 import syntax, we've added a special vizhub.libraries field in package.json. This field lets you define the mappings from package names to browser globals yourself. Also, since the CDN path to the browser build is sometimes not at the package root, and can be different for each package (and there's no way of knowing programmatically what it is), you can also specify what path to use.
You can also specify a custom license in the license field of package.json. This field is expected to be a valid SPDX license identifier, as described in the NPM Package.json documentation. If a license field is not present, the default MIT License is used.
Here's an example:
<iframe height="450" width="100%" src="https://vizhub.com/curran/161a5fcfe2e148f583cc75efb8ab3255?mode=snippet&file=package.json#" title="Hello Package.json" frameborder="0" ></iframe>In the above example, the vizhub.libraries field specifies the global and path for react and react-dom. For React, the global tells VizHub to resolve the 'react' package to window.React, and the path field tells VizHub to append /umd/react-dom.production.min.js to the CDN path used in the <script> tag that pulls in the library. The CDN paths used are of the form https://unpkg.com/${name}@${version}${path}.
By the way, the above snippet is embedded using VizHub's snippet embed feature.