Make sure it works with a plain JavaScript Svelte app

To not have to import Vega-embed, we should export the interface for VisualizationSpec, it's currently not included in the index file.

yarn lint in the root directory shows 967 problems 😱

Hi! I'm trying to set up a project using vega-lite. After installing the packages and modifying the rollup.config.js, I got this error of Uncaught TypeError: Cannot destructure property 'ANY' of 'require$$26' as it is undefined. in my browser's console right after I add the line of import { VegaLite } from "svelte-vega";. I also had warnings of Circular dependencies and this has been rewritten to undefined:

(!) this has been rewritten to undefined
https://rollupjs.org/guide/en/#error-this-is-undefined
node_modules/fast-json-patch/module/helpers.mjs
4: * MIT license
5: */
6: var __extends = (this && this.__extends) || (function () {
^
7: var extendStatics = function (d, b) {
8: extendStatics = Object.setPrototypeOf ||
...and 1 other occurrence
node_modules/vega-lite/build/src/compile/compile.js
1: var __rest = (this && this.__rest) || function (s, e) {
^
2: var t = {};
3: for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
...and 1 other occurrence
node_modules/vega-lite/build/src/log/index.js
2: * Vega-Lite's singleton logger utility.
3: */
4: var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
^
5: if (kind === "m") throw new TypeError("Private method is not writable");
6: if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
...and 3 other occurrences

I'm not sure what is happening and would really appeaciate any help or clarifications. Thanks in advance!

If the data that is embedded into spec changes (not any of the keys in data), the view does not update.

Every commit to master or tagged commit should be deployed automatically.

In the storybook example which changes the chart size (packages/storybook/stories/ChangingDimensionDemo.svelte), resizing does not work correctly. While the axes resize correctly, the marks do not resize. This bug likely exists not only in this example.

So that if someone opens the page, they know where to get the code.

This way someone does not need to import Vega-Embed. Will also need to update the docs.

Compiling the package results in getting the fs package included.

> yarn build
...
(!) Missing global variable name
https://rollupjs.org/guide/en/#outputglobals
Use "output.globals" to specify browser global variable names corresponding to external modules:
fs (guessing "require$$4")
created dist/index.mjs, dist/index.umd.js in 3.5s

Because of this, the example app doesn't seem to work anymore.

I get this error in the browser console:

ReferenceError: Can't find variable: require$$4

e.g. in

Should be ReturnType<typeof setTimeout>. Might have to add the DOM lib (https://www.typescriptlang.org/tsconfig#lib)

I'm trying to set up a project to use vega within sveltekit for a blog. I'm getting errors of module is not defined when I try to import from svelte-vega; I'm fairly confident this has something to do with the rollup JSON plugin, since I can't install that in the context of sveltekit. However, I am able to import json files as modules without a problem in my own code, so I'm a little surprised that's an issue.

Why is that rollup plugin necessary? I'd like to help contribute here if I can, getting more involved with vega is something I've been excited about for a while, but I'm not sure I have all the context necessary to jump in.

See which ones we still need or which can be cleaned up.

Hi, I am looking at the example provided on the package site and don't seem to be able to see any data in the Vega-Editor when it is opened. Is this an issue with how data is embedded into the svelte component?

<script lang="ts">
  import type { VisualizationSpec } from "svelte-vega";
  import { VegaLite } from "svelte-vega";

  const data = {
    table: [
      { category: "A", amount: 28 },
      { category: "B", amount: 55 },
      { category: "C", amount: 43 },
      { category: "D", amount: 91 },
      { category: "E", amount: 81 },
      { category: "F", amount: 53 },
      { category: "G", amount: 19 },
      { category: "H", amount: 87 },
    ],
  };

  const spec: VisualizationSpec = {
    $schema: "https://vega.github.io/schema/vega-lite/v5.json",
    description: "A simple bar chart with embedded data.",
    data: {
      name: "table",
    },
    mark: "bar",
    encoding: {
      x: { field: "category", type: "nominal" },
      y: { field: "amount", type: "quantitative" },
    },
  }
</script>

<VegaLite {data} {spec} />

We need to finalize the Embed result, not just the view.

When building the sample and storybook, yarn looks for the NPM version of svelte-vega for the lockfile instead of using the stated version that's not on NPM.

Hi, I am looking at the example provided on the package site and don't seem to be able to see any data in the Vega-Editor when it is opened. Is this an issue with how data is embedded into the svelte component?

<script lang="ts">
  import type { VisualizationSpec } from "svelte-vega";
  import { VegaLite } from "svelte-vega";

  const data = {
    table: [
      { category: "A", amount: 28 },
      { category: "B", amount: 55 },
      { category: "C", amount: 43 },
      { category: "D", amount: 91 },
      { category: "E", amount: 81 },
      { category: "F", amount: 53 },
      { category: "G", amount: 19 },
      { category: "H", amount: 87 },
    ],
  };

  const spec: VisualizationSpec = {
    $schema: "https://vega.github.io/schema/vega-lite/v5.json",
    description: "A simple bar chart with embedded data.",
    data: {
      name: "table",
    },
    mark: "bar",
    encoding: {
      x: { field: "category", type: "nominal" },
      y: { field: "amount", type: "quantitative" },
    },
  }
</script>

<VegaLite {data} {spec} />

Exposing the generated View from Vega-embed would allow for easier debugging and customization, e.g. https://vega.github.io/vega/docs/api/debugging/

Github pages is not working. Need to look into why.

Hi,

I'm running into an issue with svelte-vega in Sveltekit. I read some of the closed issues on Sveltekit issues and it seems related, but the error messages I'm getting are slightly different. I'm using Sveltekit 1.5.0 and svelte-vega 1.2.0.

If I don't install @rollup/plugin-json, it works fine in dev and there are no errors at all. When I try to build, it fails with an error message as follows:

file:///Users/sarah/code/test-app/.svelte-kit/output/server/entries/pages/demos/vega-scatterplot/_page.svelte.js:2
import { vega } from "vega-embed";
         ^^^^
SyntaxError: Named export 'vega' not found. The requested module 'vega-embed' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'vega-embed';
const { vega } = pkg;

I get the same error using Github Actions to deploy.

If I install the json plugin, that particular error goes away, but the app fails in both dev and build with errors around various other json imports (unrelated to vega) failing, so installing the json plugin like suggested in your installation instructions doesn't seem to help. In general it seems possible to install and use rollup plugin in vite, for example I'm using @rollup/plugin-dsv to import csv files and it works fine.

I did find out that the json plugin allows for configuring it to only target certain files, or to exclude certain files. I attempted to configure it to only target vega-related files, and got different error messages, but I don't think I understand vite/sveltekit/regex well enough to know if that's an option worth exploring:

plugins: [
    json({include: '[regex to only target vega and not break the rest of the app here, maybe?]'}),
  ]

Once this issue in Rollup is fixed, we can update rollup:
rollup/rollup#4067

"svelte-vega": "^2.1.0",
"@sveltejs/kit": "^1.22.6",

import { vega } from "vega-embed";
         ^^^^
SyntaxError: Named export 'vega' not found. The requested module 'vega-embed' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'vega-embed';
const { vega } = pkg;

see

See https://github.com/vega/svelte-vega/runs/2512655703

EmbedOptions type is not being exported by svelte-vega.

Can it be added to /packages/svelte-vega/src/lib/types.ts to self contain all basic types required for rendering a Vega visualization?

• Check for duplicate issues. Please file separate requests as separate issues on GitHub.
• Clearly describe the goal of the feature request. Why is it needed?
• Describe an envisioned solution. What do you want the new behavior to be?
• If applicable, share mockup images or links to examples illustrating the desired output.

Goal
Ability to use svelte-vega as a dependency in a project that uses Svelte 4.x.x.

Description
Svelte 4 has been released on 22-06-2023.
In my project, when I update to "svelte": "^4.0.4", I get an error when running npm install stating that the dependencies cannot be resolved because svelte-vega (I'm on 2.0.0) requires a different version of Svelte.

Can you please update?

I think, the problem is here:

• https://github.com/vega/svelte-vega/blob/main/packages/svelte-vega/package.json#L67C14-L67C21
• https://github.com/vega/svelte-vega/blob/main/packages/svelte-vega/package.json#L60

Hello!

I have been redirected from sveltekit, with the instruction:

svelte-vega looks to be improperly packaged. It has a UMD file in main which is invalid. Node.js will try to load whatever is in main and can't load UMD files. Please file a bug against svelte-vega asking the author to put a CJS or ESM (if they also put "type": "module") in the main field. You may also share https://kit.svelte.dev/faq#packages with them as they are currently violating bullet three

details are in this issue,
sveltejs/kit#5325

but in short, build fails with SyntaxError: Named export 'vega' not found. The requested module 'vega-embed' is a CommonJS module after the simplest possible inclusion of svelte-vega

svelte-vega version is 1.1.1

I did read #90 and #210 but I couldn't find progress.

I would be happy to contribute but unfortunately I am very new to svelte and javascript in general, but I do believe that svelte-vega has great potential, and is by far the best way to create an interesting static dashboard I have found. It's such a shame that the build fails like this.