Bundle json files separately [npm package]

[grod220]

Follow up from: #29 (comment) from @turbocrime

As of #29, we are bundling the registry along with the package. Our current bundle looks like this:

@penumbra-labs/registry
├── CHANGELOG.md
├── dist
│   ├── index.d.ts
│   ├── index.js
│   └── index.mjs
└── package.json

This means the JSON files are being embedded into the javascript in the bundle. It would be nice if these could be standalone so that in theory someone could inspect the dist and see the registry json files separately.

@penumbra-labs/registry
├── CHANGELOG.md
├── dist
│   ├── index.cjs
│   ├── index.d.ts
│   ├── index.js
│   └── registry
│       ├── penumbra-testnet-deimos-6.json
│       └── penumbra-testnet-deimos-7.json
└── package.json

This is a bit tricky though. First we have to copy over the registry files in our vite config:

import { defineConfig } from 'vite';
import { commitInfoPlugin } from './src/utils/commit-info-vite-plugin';
import dts from 'vite-plugin-dts';
import { viteStaticCopy } from 'vite-plugin-static-copy';

export default defineConfig({
  build: {
    lib: {
      entry: ['./src/index.ts'],
      formats: ['es', 'cjs'],
    },
  },
  plugins: [
    commitInfoPlugin(),
    dts({ rollupTypes: true }),
    viteStaticCopy({
      targets: [{ src: '../registry/*.json', dest: './registry' }],
    }),
  ],
});

But then we need some way for our code to retrieve this. Two methods I explored both required converting to an async api. Not the end of the world though.

// Fetch the local file
export const getRegistry = async (name: string): Promise<JsonRegistry> => {
  const fileUrl = new URL(`./registry/${name}.json`, import.meta.url).href;
  const response = await fetch(fileUrl);
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

Unfortunately, this did not work in node environments (assuming fs is more standard here). Later tried:

// Dynamic imports
export const getRegistry = async (name: string): Promise<JsonRegistry> => {
  const filePath = `./registry/${name}.json`;
  try {
    const registry = await import(filePath);
    return registry.default;
  } catch (e) {
    console.log('ERROR', e);
    throw e;
  }
};

This seems to work in node+browser environments, but throws a document not found error in our service worker 😢 . Ended the exploration here.