Using importmaps with custom Kinos

[fhunleth]

Caveat: I very rarely use JavaScript, so I could be going completely in the wrong direction.

What I'm trying to do is import a few Javascript libraries in the main.js in a custom Kino. It's not that many libraries, and there's a "script" version and a "module" version. The script version has been marked as deprecated and it looks like most people are using the module version so that's where I'm going.

The example code uses a <script type="importmap"> to map import names to URLs. I tried to skip using importmaps by manually copy/pasting URLs into the import statements. This only works one level deep. Sadly, the Javascript libraries depend on each other so there will be an import Xyz from "xyz" that I can't change in one of the files that I import.

I'm back to looking at using importmaps again. I see how I can inject HTML via the init(ctx) function in Javascript, but this is too late since the imports are at the top of the file.

To give a concrete example, in regular HTML (not in Livebook), here's what I have in the main HTML file:

  <script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

  <script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@0.153.0/build/three.module.js",
      "three/examples/": "https://unpkg.com/three@0.153.0/examples/",
      "urdf-loader": "https://unpkg.com/urdf-loader@0.10.5/src/urdf-manipulator-element.js"
    }
  }
  </script>

Then in the main JavaScript file, I have this:

import * as THREE from 'three';
import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js';
import URDFManipulator from 'urdf-loader';

Could I get a hint for how to import these in a custom Kino?

Thanks!

[jonatanklosko]

Hey @fhunleth, for integrating more packages like this you can use bundler like esbuild and it should save you the pain. We do that for the kino data_table here, note that the assets directory is outside of lib and building writes the bundled files into lib/assets where you would normally write them by hand. Let me know if that works for your case :)

[fhunleth]

That was much easier and worked. Thanks!