I’m still confuzzled about how to access packages and import them. Specifically, I wanted to be able to add to a markdown page the version of Observable Framework that is being used to build the site. Below are some other examples, see the screenshot for results.
External: A forum question talked about importing Highlights, which works well. I can import it and see the version
Plot: I can work with Plot because I think it is being imported already, but I can’t check the version (this works in a Notebook in a js cell)
Is there a way to get at the Plot version being used?
Framework: I gave this a try, but I’m not sure whether you can import framework in this way. I notice in the Framework docs that you use an internal process to check the github release and add it to the header. I wanted to do something like this, but for displaying what version of Framework was used to power the site.
Is there a way to get at the Framework version used?
More generally, maybe I’m swimming in the territory of seeing the versions for packages in package.json? Not sure, would appreciate any schooling.
also, my cache does not have an _npm/ folder. Is this something I have to specify in the config file?
I think in general I would like to get a the version of Plot, but especially Framework not just in the backend, but display the version used to the page, eventually in the footer or elsewhere.
You are absolutely right, I was mixing up states I had on different machines. But this is exactly what I want to be able to confirm in my build, with the end user, adding it to the page. I was envisioning showing the Framework version used, similar to the header in the Framework docs, although that tag is in terms of GH releases rather than the package that built the site.
Is there a way I can get at the version of Framework within a markdown page and display it?
I think I’m also not understanding how to update a dependency. I thought I changed the dependencies section of the package.json and then the npm commands would use those versions, but this is instead based on the version I have installed on my machine?
import {version as FRAMEWORK_VERSION} from "@observablehq/framework/package.json";
and then define the footer like so:
const FOOTER_OBSERVABLE = `<p>Built with <a href="https://observablehq.com/" target="_blank">Observable</a> v${FRAMEWORK_VERSION} on <a title="${new Date().toISOString()}">${new Date()
.toISOString()
.slice(0, 10)}</a>.</p>`;
The client dependencies (those that come from the pages, i.e.import * from "npm:xxx") are not controlled by package.json, but by what is the _npm cache. This still needs to be documented properly, I think.
We’re planning on supporting importing from node_modules in the future. Please upvote this issue if you’re interested:
The idea with npm: imports (and built-in libraries such as d3 and Plot) is that it’s more convenient because you don’t have to install anything explicitly — you can just start using the library and Framework will install it automatically behind the scenes.
By default with npm: you’ll get the latest version of the library. You can specify a semver range to be more specific about what you want. And this semver range is resolved against what you have cached locally so you will get a consistent version while cached, and you can clear your cache and restart the preview server to re-fetch the latest versions.
