Skip to main content
SimilarExport ZIP
100%

Fork of Hello Package.json

✓ Published0🌍 Public
Ttim10133222
Last edited Jan 1, 2023
Created on Jan 1, 2023
Forked from Hello Package.json

This example showcases a custom package.json setup in VizHub that enables ES6 imports of React and D3 libraries without manual script tags. The app renders a large "Hello package.json" message using ReactDOM, while the package.json defines dependency versions and maps library names to browser globals via the vizhub.libraries field. It also specifies an ISC license.

AI-generated description

An example of VizHub's 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.

ISC Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello Package.json

This example demonstrates how VizHub’s `package.json` enables dependency management by mapping package names to browser globals, allowing ES6 imports of React, ReactDOM, and d3 without manual script tags. The code defines a React component that renders a "Hello package.json" message, using `ReactDOM.render` to mount it. The `vizhub.libraries` field specifies CDN paths like `/dist/d3.min.js` and `/umd/react.production.min.js`, while the license field sets an ISC license.

Jjjlaber
94% match
Loading thumbnail…

Fork of Hello Package.json

This example demonstrates how VizHub’s `package.json` configuration maps NPM dependencies to browser globals, enabling ES6 imports for React and React DOM. It renders a simple React component displaying the text “Hello package.json” using `ReactDOM.render`. The `vizhub.libraries` field specifies `global` and `path` mappings for `react` and `react-dom`, which VizHub uses to inject the correct CDN `<script>` tags from `unpkg.com`. The example also shows a custom `ISC` license declaration.

Bbyiringirodalio
92% match
Loading thumbnail…

Fork of Hello Package.json

This example demonstrates how to use a `package.json` file in VizHub to declare dependencies and custom library mappings, rendering a React component that displays the text "Hello" alongside a preformatted JSON block. The code imports `React` and `ReactDOM` directly, relying on the `vizhub.libraries` field to resolve these packages to browser globals via CDN paths. It also uses `d3` for selection, and the `license` field specifies an ISC license. The visualization serves as a minimal test of package management and embed features.

BBenoit Estrade
92% match
Loading thumbnail…

Fork of Hello Package.json

This example demonstrates how VizHub’s `package.json` support lets users declare dependencies and custom library mappings, enabling ES6 imports of React and D3. The interactive visualization uses ReactDOM to render a component, then appends an SVG via `d3.select` and generates circles from `range(15)`. The `vizhub.libraries` field maps package names to CDN paths and browser globals, while the license field specifies ISC.

IisZachariah
92% match
Loading thumbnail…

Fork of Hello Package.json

This example demonstrates how to define custom CDN mappings for ES6 imports in VizHub’s `package.json` file. It renders a React component that displays “Hello” above a `<pre>` block containing “package.json,” using `react` and `react-dom` with the ISC license. The `vizhub.libraries` field maps package names to browser globals and unpkg paths, while `d3` is imported but not used. The app mounts via `ReactDOM.render` into a dynamically created DOM node.

JJamesChirambo
91% match
Loading thumbnail…

Fork of Hello Package.json

This example demonstrates VizHub’s package.json support by displaying the text “byiringiro” in a large, centered font. The code uses a minimal React setup, though the actual rendering relies on a simple script that sets the text content of a `<pre>` element. The visualization highlights how to declare dependencies and custom CDN mappings for React and ReactDOM within the package.json file, which VizHub uses to automatically load the required libraries.

Bbyiringirodalio
87% match
Loading thumbnail…

Hello Package.json

This example demonstrates how VizHub’s `package.json` supports custom dependency loading and licensing. It uses `react` and `react-dom` to render a simple message, with the `vizhub.libraries` field manually mapping those packages to browser globals and specific CDN paths. The code also imports `d3` solely to show the same mapping works for D3’s `select`. The `license` field is set to ISC.

CCurran Kelleher
86% match
Loading thumbnail…

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.

HHan Jinseok
83% match