Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How to add package? #818

Open
nitanagdeote opened this issue May 10, 2024 · 1 comment
Open

How to add package? #818

nitanagdeote opened this issue May 10, 2024 · 1 comment

Comments

@nitanagdeote
Copy link
Collaborator

How to add Topojson in package.json
@curran curran transferred this issue from vizhub-core/vzcode May 15, 2024
@curran
Copy link
Contributor

curran commented May 15, 2024 •
edited
Loading

Here's an example, from https://vizhub.com/curran/visualizing-population-centers?edit=files&file=package.json

image

{
  "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!

@curran curran mentioned this issue May 15, 2024
Open
10 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@curran @nitanagdeote