Unmangled examples

[rrrnld]

I don't know if there's any interest in this, but I've managed to get a vite build (non-dev) of the examples that preserves the file structure as well as variable and file names. This allows me to step through examples using the Firefox debugger, and play around with functions interactively (in the browser REPL). It was an idea that I had when looking at examples and trying to understand, line by line, what different data structures look like and what exactly different functions do to them.

My vite.config.ts looks like this:

export default {
  build: {
    minify: false,
    target: 'modules',
    rollupOptions: {
      preserveEntrySignatures: true,
      output: {
        preserveModules: true,
        entryFileNames: '[name].js',
        chunkFileNames: '[name].js',
      }
    }
  }
}

The downsides are that the bundles are much bigger and slower to load, because the @thi.ng/umbrella modules are quite fine-grained. It preserves tree-shaking though, which is cool!

I don't know if this is any more useful to anyone than running the examples locally using a dev build, but I thought I'd share it just in case. :)

[rrrnld]

Ooooh wait. I just realized that I could have probably had the same effect just by enabling source maps. 😅

I just tried it and enabling source maps keeps the small bundles, but doesn't allow REPL experiments in Firefox. The REPL seems to work OK in V8-based browsers.

[postspectacular]

Thanks @heyarne - I've not played around too much with rollup config magic, but I will add a link to this thread from the wiki, just in case someone else might be interested in this... is there any difference to the normal vite dev-mode experience at all?

Edit: Updated wiki instructions

[rrrnld]

I think the dev mode experience is unchanged, this is really about the production builds. Maybe it makes sense to enable source maps for the examples? It's a quick way to enable step debugging. I can send a patch if you're interested.

[postspectacular]

Yeah, a PR or at least a sample config would be really great (I guess it will have to be applied to each example separately)!

Btw. I turned source maps off a few years ago because they somehow very often went out of sync (or got weirdly cached) and I also only ever needed the debugger during dev only. But I can also understand how someone might want to look at the source of the uploaded examples without having to first clone & build the repo to run the examples locally... so yes, please!

[rrrnld]

Yeah, I think this is a special case. I usually don't use sourcemaps at all, they add a lot of complexity to the build. They are a good fit for the examples though! You can demonstrate that the builds get quite small, but people seeking to understand how things work can still look at the source code. Let's hope they don't break 🤞