Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

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

wants to merge 10 commits into from

Conversation

aantn
Copy link

@aantn aantn commented Sep 18, 2021 •
edited
Loading

A few comments:

  1. 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.
  2. This is a work in progress. I'm opening this PR to get early feedback.
  3. 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.)

@domoritz domoritz requested a review from jsbroks September 18, 2021 15:44
@domoritz
Copy link
Member

@jsbroks please review

jsbroks
jsbroks requested changes Sep 18, 2021
View reviewed changes
Copy link
Collaborator

@jsbroks jsbroks left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice job

src/components/vue-vega.vue
data: props.data,
};

const { render, loading } = useVega(config as any);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably best to remove console the log by default.

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)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

as any?

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)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

as any

src/composition/useVegaEmbed.ts
Comment on lines +23 to +26
console.log("embed called")
if (el.value == null) {
console.log("its null")
return
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

console logs

@domoritz
Copy link
Member

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

@aantn
Copy link
Author

aantn commented Sep 18, 2021

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

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

  1. 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.
  2. 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?

@aantn
fix build
c54c277 
1. fix ESM build
2. switch to standard rollup typescript plugin
3. remove broken non ESM builds
@aantn
change javascript targets to es6
578632f
@aantn
Copy link
Author

aantn commented Sep 18, 2021

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
Copy link
Author

aantn commented Sep 19, 2021

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
Copy link
Author

aantn commented Sep 21, 2021 •
edited
Loading

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jsbroks jsbroks jsbroks requested changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@aantn @domoritz @jsbroks