Hacker News Reader

Comment by simonw | Hacker News Reader

This looks really cool, but I'm going to use it as a quick illustration of a pet peeve. The README says this:

    <script>
 import ZoomableCircles from "svelte-zoomable-circles";
    </script>
    <ZoomableCircles tree={treeObject} />

That's not enough information for me to use this thing!

As an infrequent user of JavaScript libraries it's now on me to figure out which of the various bundlers (WebPack? Vite? esbuild? Some other thing?) are in-vogue right now, then work out the incantations needed to get the above syntax converted into code that actually runs in a browser.

I made extensive notes on this the other day when I tried to get quickjs-emscripten to work - I really wish I didn't have to jump through so many hoops every time I want to try something out new in npm land: https://til.simonwillison.net/npm/self-hosted-quickjs

View on HN

First of all: big fan of your work! Thanks for taking the time to check this out.

You’re right, I kind of let the fact that “svelte” is in the name do too much of the work for me - this is specifically a Svelte component. I’ll add that fact to the readme. As for bundler, Vite is preferred but you should be able to use any.

As others have noted, this is a relatively thin wrapper over D3 code. Based on this and other feedback, I might go ahead and make this into a web component so that it’s completely framework-agnostic.

Could add a line in readme for: do this in Vite (our preferred tool).

And big +1 (+2?) for framework agnostic.

If it's any help, here's a lit+svg web component I did as a learning exercise: http://hermit1.scsys.co.uk/~matthewt/clock/t8b.html

Given JS imports are direct references, you can export a 'let' from a module and if it's modified by the module the importing thing will see the change (though it isn't allowed to set the value) ... though of course you want to be able to have more than one set of state, so that's probably not applicable here, paragraph left for the interested.

But. It seems like you could have the template logic in svelte style and lit style and share basically everything else easily enough if you wanted to. Not sure that's the best way to refactor, just mentioning.

Very neat piece of code though, I'm not sure I have any idea when I'd use it but I definitely intend to go back to the code to learn more about doing cool things with d3. Cheers!

> That's not enough information for me to use this thing! As an infrequent user of JavaScript libraries it's now on me to figure out which of the various bundlers (WebPack? Vite? esbuild? Some other thing?) are in-vogue right now, then work out the incantations needed to get the above syntax converted into code that actually runs in a browser.

This might help - I notice two things on the landing page:

a) How to install: npm i svelte-zoomable-circles

b) Dev dependencies (which lists "vite"): https://www.npmjs.com/package/svelte-zoomable-circles?active...

My problem is with the steps in between running "npm i svelte-zoomable-circles" and having code that works in my browser and displays a working UI element.

I mean isn't the step... not actually between those steps... its... have a svelte app... i mean this isn't a standalone js lib, it's a svelte component, if you have svelte up.. those are the only steps :S

OK, that makes sense - I had forgotten that Svelte is a compiler-driven thing so it's reasonable to expect Svelte users to have that figured out already.

Man their tutorials are so good and make me want to use this.

Related peeve (unrelated to this project):

So many tutorials for various jvm libraries will give nice code snippets to demo usage BUT not include any of the import statements.

Don’t just tell me how to use the thing without also telling me where it lives!

Reply on news.ycombinator.com