WIP: Vue package does not have an index.js

[theiliad]

We are currently publishing this tree to NPM for our vue package:

It is missing a fallback index.js. Therefore in cases where you do this:

You would encounter this error:

We should create an index.js that'll export out modules from a specific bundle, so you won't have to do this:

@moores2, @ZrianinaMariia

[cal-smith]

I'm curious what the "official" vue solution is ... since the package was created with the vue-cli in library mode my assumption is that this is how vue libraries expect to receive libraries.

How does @carbon/vue package itself?

[theiliad]

@cal-smith @moores2 The issue might actually be bigger than I initially thought.

The files seem to not export anything (according to codesandbox, try a few console logs here https://codesandbox.io/s/040w2rqrxp)

Maybe I'm missing something, in which case would you please make that codesandbox work? thanks

[cal-smith]

It seems like the files (charts-vue.umd and charts-vue.common) export a single default entry point that is used in Vue.use ... I'm not super familiar with how vue consumes libraries, but I don't see another way to import components.

[cal-smith]

So just the charts-vue.umd.* and charts-vue.common.* should be sufficient for distribution

[theiliad]

Yeah I realized that too after looking at Simon's codesandbox. Crazy! 😄

[moores2]

We would like to have 2 options for consuming the Vue wrappers:

Firstly, to just load all of the chart components globally into Vue, like this:

import Vue from 'vue';
import chartsVue from '@carbon/charts-vue';
...
Vue.use(chartsVue);
...
export default {
...
  template:
    '<ccv-bar-chart :data="barData" :options="barOptions"></ccv-bar-chart>'

to make this work my understanding is that the main entry in package.json needs to point to charts-vue.umd.min.js, wherever it is placed. As @cal-smith noted, there is a default entry point in there that just registers all the components globally with Vue.

The second option is to allow consumers to selectively import just the wrappers/components that they want, like this:

<template>
  ...
  <ccv-bar-chart :data="barData" :options="barOptions"></ccv-bar-chart>
  ...
</template>

<script>
import CcvBarChart from "@carbon/charts-vue/src/ccv-bar-chart";

export default {
  ...
  components: { CcvBarChart },
  ...
};
</script>

As for packaging, carbon-components-vue and carbon-components both put a \dist and \src directory into the NPM package, so that's where I was heading. However, I see that carbon-charts-react puts the built JS file into a \bundle directory and the source files in the root. So, if we wish to ship source and built files in the NPM package what it the preferred directory organisation?

[cal-smith]

It would be ideal is we could support both (global registration and selective imports) - does it do this now @moores2? Or would that be something we'd have to configure?

As for packaging - if you pull master you'll see we switched around how we're building things. Everything is built into and deployed from /dist now, and for most of our packages we don't really need to ship the /src - it's better to let our consumers deal with compiled JS.

That said, bundles should be built into /dist as libraryname.bundletype.js (with .min.js as needed) - charts-vue does this already so we're good there.