generate dev environment, add <vue-vega> component, and add example #5

aantn · 2021-09-18T14:48:35Z

A few comments:

Run npm run serve to see a working application that uses this library. It demoes the very basic component that I added on top of the existing composition API.
This is a work in progress. I'm opening this PR to get early feedback.
Dev tooling: to be honest, I have very little experience here. I generated some tooling automatically using https://www.npmjs.com/package/vue-sfc-rollup but feel free to throw it all away and replace it with something else. I would rather not deep dive into Javascript tooling right now, if it's avoidable.

TODOs:

I'm temporarily converting various types to any to fix typing errors in the existing code. This needs to be fixed.
Verify that the rollup config works and includes not only components but also the composition API parts. Test importing this library in another app.
Either use or remove VueVegaConfig.data. (Right now data is taken from the VueVegaConfig.spec.)

dev tooling was automatically generated using https://www.npmjs.com/package/vue-sfc-rollup

domoritz · 2021-09-18T15:45:51Z

@jsbroks please review

jsbroks

Nice job

build/rollup.config.js

jsbroks · 2021-09-18T18:01:24Z

src/components/vue-vega.vue

+      data: props.data,
+    };
+
+    const { render, loading } = useVega(config as any);


You should be able to set the correct typing on the props with PropType

jsbroks · 2021-09-18T18:01:55Z

src/composition/useVega.ts

@@ -33,7 +33,7 @@ export function useVega(config: VueVegaConfig) {
  const { el, spec, data, embedOptions, signals, ...options } = configToRefs(
    config
  )
-  const { embed, ...vegaEmbed } = useVegaEmbed(el, spec, embedOptions)
+  const { embed, ...vegaEmbed } = useVegaEmbed(el, spec as any, embedOptions)


Why do we need the as any? We should reframe from using it when possible

jsbroks · 2021-09-18T18:02:45Z

src/composition/useVega.ts

@@ -45,7 +45,8 @@ export function useVega(config: VueVegaConfig) {
      if (output?.view != null) options?.onNewView?.(output.view)
      return output
    } catch (error) {
-      options?.onError?.(error)
+      console.log("error is ", error);


Probably best to remove console the log by default.

jsbroks · 2021-09-18T18:02:51Z

src/composition/useVega.ts

@@ -45,7 +45,8 @@ export function useVega(config: VueVegaConfig) {
      if (output?.view != null) options?.onNewView?.(output.view)
      return output
    } catch (error) {
-      options?.onError?.(error)
+      console.log("error is ", error);
+      options?.onError?.(error as any)


jsbroks · 2021-09-18T18:02:57Z

src/composition/useVega.ts

@@ -55,7 +56,7 @@ export function useVega(config: VueVegaConfig) {
  const { modify } = vegaEmbed
  // Watchers that update vega in the most optimal way by either modifying or
  // re-rendering
-  useVegaUpdater(spec, embedOptions, signals, data, render, modify)
+  useVegaUpdater(spec as any, embedOptions, signals, data, render, modify)


jsbroks · 2021-09-18T18:03:05Z

src/composition/useVegaEmbed.ts

+    console.log("embed called")
+    if (el.value == null) {
+      console.log("its null")
+      return


console logs

domoritz · 2021-09-18T18:21:35Z

Thank you for the review @jsbroks and thank you @aantn for the pull request.

aantn · 2021-09-18T22:14:59Z

Thank you for the comments. Will fix and update the PR.

I have two rollup related questions I'm hoping someone can help with.

Something seems wrong with the rollup output in dist/ after running npm run build. File sizes are over 800kb. I understand that some of the files there are bundling up all dependencies, but shouldn't there be a bundle without dependencies that you can import in normal webpack applications? Again, I'm not familiar with Javascript packaging, so I apologize for my ignorance on how this should be setup.
I've had to workaround errors like The inferred type of this node exceeds the maximum length the compiler will serialize. An explicit type annotation is needed.. Is this a known issue due to the size of the vue-embed VisualizationSpec class? Is there an elegant workaround for this?

1. fix ESM build 2. switch to standard rollup typescript plugin 3. remove broken non ESM builds

aantn · 2021-09-18T23:23:46Z

Alright, I've fixed the former issue with massive build sizes. Looks like the defaults from https://www.npmjs.com/package/vue-sfc-rollup weren't sane after all.

I've removed the non-ESM builds as they were broken.

aantn · 2021-09-19T19:21:15Z

I've gotten this closer to working but it is still somewhat broken. It looks like there is a fundamental issue using vue-demi for component libraries and there needs to be two versions of vue-vega - one for vue2 and one for vue3: vuejs/rollup-plugin-vue#427

aantn · 2021-09-21T13:57:12Z

I wont have time to work on this in the near future, but I did find an example project that is using Vue-Demi for a component library. If I or someone else picks this up, it's probably worth looking at: https://github.com/open-data-plan/g2plot-vue (see package.json and the scripts/postinstall.sh). This doesn't use rollup though.

generate dev environment, add <vue-vega> component, and add example

e71811a

dev tooling was automatically generated using https://www.npmjs.com/package/vue-sfc-rollup

domoritz requested a review from jsbroks September 18, 2021 15:44

jsbroks requested changes Sep 18, 2021

View reviewed changes

aantn added 2 commits September 19, 2021 00:12

update list of packaged files

52f587f

fix build

1566c38

aantn added 2 commits September 19, 2021 02:00

fix build

c54c277

1. fix ESM build 2. switch to standard rollup typescript plugin 3. remove broken non ESM builds

change javascript targets to es6

578632f

aantn added 5 commits September 19, 2021 10:43

simplify rollup config

a3fa790

generate types and update package.json metadata

8937188

more work on fixing build - use rollup-plugin-ts just like vega-embed

c3fd68b

fix path to types

162f28e

simplify entrypoint and fix various issues

46bd976

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

generate dev environment, add <vue-vega> component, and add example #5

generate dev environment, add <vue-vega> component, and add example #5

aantn commented Sep 18, 2021 •

edited

domoritz commented Sep 18, 2021

jsbroks left a comment

jsbroks Sep 18, 2021

jsbroks Sep 18, 2021

jsbroks Sep 18, 2021

jsbroks Sep 18, 2021

jsbroks Sep 18, 2021

jsbroks Sep 18, 2021

domoritz commented Sep 18, 2021

aantn commented Sep 18, 2021

aantn commented Sep 18, 2021

aantn commented Sep 19, 2021

aantn commented Sep 21, 2021 •

edited

generate dev environment, add <vue-vega> component, and add example #5

Are you sure you want to change the base?

generate dev environment, add <vue-vega> component, and add example #5

Conversation

aantn commented Sep 18, 2021 • edited

domoritz commented Sep 18, 2021

jsbroks left a comment

Choose a reason for hiding this comment

jsbroks Sep 18, 2021

Choose a reason for hiding this comment

jsbroks Sep 18, 2021

Choose a reason for hiding this comment

jsbroks Sep 18, 2021

Choose a reason for hiding this comment

jsbroks Sep 18, 2021

Choose a reason for hiding this comment

jsbroks Sep 18, 2021

Choose a reason for hiding this comment

jsbroks Sep 18, 2021

Choose a reason for hiding this comment

domoritz commented Sep 18, 2021

aantn commented Sep 18, 2021

aantn commented Sep 18, 2021

aantn commented Sep 19, 2021

aantn commented Sep 21, 2021 • edited

aantn commented Sep 18, 2021 •

edited

aantn commented Sep 21, 2021 •

edited