Minimal Svelte example

[janosh]

Would be great if the docs had sth similar to #97 for Svelte. Maybe as a vite subsection.

[janosh]

I should clarify that I'm particularly interested in a SvelteKit example (which is probably what most people building with Svelte will be using).

[manzt]

Hi there, thanks for opening the issue! I made a gist with a Svelte example a few months ago.

Maybe for now we can link the Gist in the Vite section as you mentioned – happy to accept a PR!

I should clarify that I'm particularly interested in a SvelteKit example.

Big fan of Svelte/SvelteKit here!

To clarify: Svelte is a component framework, and SvelteKit is an app framework – kind of like Next.js, Nuxt, or Remix. I'm not sure what SvelteKit with Jupyter Widgets would look like because the two don't exactly fit together conceptually.

Many of the problems it solves don't apply to Widget context. From the docs:

Whereas Svelte is a component framework, SvelteKit is an app framework (or 'metaframework', depending on who you ask) that solves the tricky problems of building something production-ready:

• Routing
• Server-side rendering
• Data fetching
• Service workers
• TypeScript integration
• Prerendering
• Single-page apps
• Library packaging
• Optimised production builds
• Deploying to different hosting providers"

SvelteKit owns both the client and server, and with Jupyter Widgets the "server" is Jupyter kernel (not a JavaScript runtime), so really you just want/need the client-side framework (e.g., Svelte, Vue, or React).

[janosh]

SvelteKit with Jupyter Widgets would look like because the two don't exactly fit together conceptually.

Yeah I was just thinking of an example that shows where anywidget fits into the SvelteKit folder structure. As I'm sure you know, SvelteKit has a canonical place for components under src/lib and auto-generated dev server stuff under .svelte-kit/. The thing I wasn't clear about is if any of that output is relevant to anywidget for HMR support. I guess not from your answer.

[manzt]

FYI, I just updated the Gist to be up-to-date with the latest changes in anywidget.

Yeah I was just thinking of an example that shows where anywidget fits into the SvelteKit folder structure.

No worries. I guess I'm not as familiar with using SvelteKit to author packages (al-la svelte-package) and maybe a widget could follow a similar structure? However, many of the things covered in the packaging docs are related to distributing JavaScript modules and don't really fit into the widgets framework.

Generally speaking, the happy path to creating widgets is when the widget front-end code is minimal and focuses on connecting a JS API to the widget model to talk to Python. mosaic is a good example of this. The widget code is very minimal (~100 LOC) and serves an adapter to connect other much larger "packages" in the repo (e.g., @uwdata/vgplot) to Jupyter.

If you have a sufficiently complex idea for a widget, then using SvelteKit to build a separate JS package that you connect in a widget could be a good option. This also means that your SvelteKit package is re-usable outside of the widget context as well.

No hard rules, just an observation.

[janosh]

Thanks for clarifying!

Perhaps I should do the same and explain my goal. I'd like to make all components in https://elementari.janosh.dev Python-accessible in VS Code's Interactive Window and Jupyter.

Ideally, there'd be a Python wrapper for each component under an elementari Python package. E.g.

from elementari import Structure3d

from pymatgen.core import Lattice, Structure

struct = Structure(
    lattice=Lattice.cubic(3),
    species=("Fe", "Fe"),
    coords=((0, 0, 0), (0.5, 0.5, 0.5)),
)

Structure3d(struct)

which should give me this sort of output in a notebook cell:

Same for the PeriodicTable and other elementari components.

Btw, happy to submit a PR with any doc improvements we agree on like the link to your gist.

[manzt]

Ah interesting. I think my recommendation would be to package elemenatri first as valid ESM (rather than svelte). That way any projects that "import X from "elementari"'. Don't need the svelte compiler.

Packaging this way would make it relatively straightforward to then connect your library exports (valid JavaScript) with Python.

[manzt]

Feel free to open a PR to add Svelte example to the docs! Going to close for now.

[manzt]

You might find the @anywidget/svelte adapter interesting/useful for this project.

[janosh]

thanks @manzt. looks like a great tool. just had time to take look at @anywidget/svelte but vite build raises

error during build:
Could not resolve "./WrapperComponent.svelte" from "node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@anywidget/svelte/src/index.js"
file: /Users/janosh/dev/elementari/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@anywidget/svelte/src/index.js

looks like only the index.js file is being packaged both on NPM and in my node_modules

on a related note, is there a SvelteKit example out there somewhere?

the vite example suggests setting

// vite.config.js
import { defineConfig } from "vite";
 import anywidget from "@anywidget/vite";

export default defineConfig({
  build: {
    outDir: "hello_widget/static",
    lib: {
      entry: ["src/index.js"],
      formats: ["es"],
    },
  },
  plugins: [anywidget()],
});

but that gives me a warning

The following Vite config options will be overridden by SvelteKit:
  - build.outDir

maybe doesn't matter if I can later point

  bundled_assets_dir = pathlib.Path(__file__).parent / "static"
  ESM = (bundled_assets_dir / "index.mjs").read_text()
  CSS = (bundled_assets_dir / "styles.css").read_text()

at sveltekit's default built dir but haven't gotten to that step yet and also don't think the SvelteKit build output will be in the format anywidget expects

[janosh]

small update: if i copy those missing files next to index.js and retry vite build with the example from the docs

<!-- Counter.svelte -->
<script>
    import { stores } from "@anywidget/svelte";
    // Access traitlet values as Svelte stores
    let { count } = stores;
</script>

<button on:click={() => $count += 1}>Count is {$count}</button>

the build proceeds further but still fails with

TypeError: Cannot read properties of undefined (reading 'count')
    at Object.get (file:///Users/janosh/dev/elementari/.svelte-kit/output/server/chunks/index3.js:38453:16)

which might be a SvelteKit incompatibility? the build passes if i comment out the let { count } = stores; line. this is my vite.config.ts

import anywidget from '@anywidget/vite'
import { sveltekit } from '@sveltejs/kit/vite'
import mdsvexamples from 'mdsvexamples/vite'
import type { UserConfig } from 'vite'
import type { UserConfig as VitestConfig } from 'vitest'

export default {
  plugins: [sveltekit(), mdsvexamples, anywidget()],

  test: {
    environment: `jsdom`,
    css: true,
    coverage: {
      reporter: [`text`, `json-summary`],
    },
  },

  server: {
    fs: { allow: [`..`] }, // needed to import from $root
    port: 3000,
  },

  ssr: {
    noExternal: [`three`],
  },

  preview: {
    port: 3000,
  },

  build: {
    // outDir: `anywidget-build`,
    lib: {
      entry: [`src/index.js`],
      formats: [`es`],
    },
  },
} satisfies UserConfig & { test: VitestConfig }