Typings bug from rc20 to rc21

[JFGHT]

Describe the bug

Bug with typings after upgrading from 2.0.0-rc20 to rc21:

Cannot extend an interface 'BvComponent'. Did you mean 'implements'?
    10 | 
    11 | // Component: b-alert
  > 12 | export declare class BAlert extends BvComponent {

This is happening with a lot of components.

[tmorehouse]

@JFGHT, when you say "This is happening with a lot of components", is it all components, or particular ones?

[tmorehouse]

Since the core team doesn't have any experience with TypeScript (specifically creating typescript declaration files), suggestions and assistance are welcomed and needed (we have asked for help numerous times and have received help from only one person so far) .

Maybe in src/index.d.ts / es/index.d.ts we need to alter this:

// Component base definition
export interface BvComponent extends Vue {
  // Simple catch-all to allow any prop/type
  [key: string]: any
}

to this

// Component base definition
export class BvComponent extends Vue {
  // Simple catch-all to allow any prop/type
  [key: string]: any
}

@JFGHT If you could try altering one the es/index.d.ts and/or src/index.d.ts files, and test for us, that would be awesome.

[tmorehouse]

or possibly:

// Component base definition
export class BvComponent implements Vue {
  // Simple catch-all to allow any prop/type
  [key: string]: any
}

But I am just grasping at straws here...

[JFGHT]

Sorry for answering this late. I'll try whenever I can but can't promiss too much.

[tmorehouse]

I looked at another project that is similar, and they did the above changing interface to class for their component base declaration.

// Component base definition
export class BvComponent extends Vue {
  // Simple catch-all to allow any prop/type
  [key: string]: any
}

[demianh]

I have the same problem, and it seems the change from interface to class does the trick.

After the change, there is one error left, a few lines above the BvComponent.

Changing

export interface BvPlugin extends PluginObject {
  install: PluginFunction<BvConfigOptions>
}

to

export interface BvPlugin extends PluginObject<BvConfigOptions> {
  install: PluginFunction<BvConfigOptions>
}

fixes that problem though.

[tmorehouse]

@demianh thanks for helping out! will adjust the PR accordingly.

[rrittwag]

I confirm both fixes, the change to class BvComponent and the added type argument for BvPlugin.

[tmorehouse]

Other than those two issues, does all else appear to work OK re types?

[demianh]

i only tested with the modal component, but so far i have not encountered other issues 👍

[tmorehouse]

Fix will be available in v2.0.0-rc.22 when released.

[nstuyvesant]

Here are all the ones I've imported that were fixed by changing BvComponent to a class and adding <BvConfigOptions> to the end of export interface BvPlugin extends PluginObject:

import Badge from 'bootstrap-vue/es/components/badge';
import Button from 'bootstrap-vue/es/components/button';
import ButtonGroup from 'bootstrap-vue/es/components/button-group';
import Carousel from 'bootstrap-vue/es/components/carousel';
import Collapse from 'bootstrap-vue/es/components/collapse';
import Dropdown from 'bootstrap-vue/es/components/dropdown';
import Form from 'bootstrap-vue/es/components/form';
import FormInput from 'bootstrap-vue/es/components/form-input';
import FormCheckbox from 'bootstrap-vue/es/components/form-checkbox';
import FormGroup from 'bootstrap-vue/es/components/form-group';
import FormRadio from 'bootstrap-vue/es/components/form-radio';
import FormTextarea from 'bootstrap-vue/es/components/form-textarea';
import Image from 'bootstrap-vue/es/components/image';
import InputGroup from 'bootstrap-vue/es/components/input-group';
import Link from 'bootstrap-vue/es/components/link';
import Modal from 'bootstrap-vue/es/components/modal';
import Nav from 'bootstrap-vue/es/components/nav';
import NavBar from 'bootstrap-vue/es/components/navbar';
Vue.use(Badge);
Vue.use(Button);
Vue.use(ButtonGroup);
Vue.use(Carousel);
Vue.use(Collapse);
Vue.use(Dropdown);
Vue.use(Form);
Vue.use(FormCheckbox);
Vue.use(FormInput);
Vue.use(FormGroup);
Vue.use(FormRadio);
Vue.use(FormTextarea);
Vue.use(Image);
Vue.use(InputGroup);
Vue.use(Link);
Vue.use(Modal);
Vue.use(Nav);
Vue.use(NavBar);

This helped me reduce my build size quite a bit.

[cybercussion]

Those imports appear deprecated in the docs. Though it looks like the Plugin version is still allowed vs the default export. https://bootstrap-vue.js.org/docs/components/table/#comp-ref-b-table-events

[tmorehouse]

In release 2.0.0-rc.22 (coming out today hopefully), the above import methods will still work (for now, but have been deprecated in favour of a new simpler approach).

The new method for importing will be just simply:

import {
  // Plugin imports
  ModalPlugin,
  LinkPlugin,
  NavbarPlugin,
  // Directive plugin imports
  VBTooltipPlugin,
  // Individual component imports
  BButton,
  BAlert,
  // Directive imports (if not using the directive's plugin 
  VBScrollspy
} from 'bootstrap-vue'

Vue.use(ModalPlugin)
Vue.use(LinkPlugin)
Vue.use(NavbarPlugin)
Vue.use(VBTooltipPlugin)
Vue.component('b-button', BButton)
Vue.directive('b-scrollspy', VBScrollspy)

Your bundler will either choose the ESM module entryoint ("module": "esm/index.js") which is tree shakeable, or the commonjs entrypoint ("main": "dist/bootstrap-vue.common.js") which is not tree shakeable. The es/ build (which is actually a bunch of smaller commonjs bundles) will still be around, but we plan on deprecating that build as it is a pain to keep typed)

The nice thing about this is that the types will automatically be picked up as everything is now a top-level named export.

[cybercussion]

ok, yeah I just did a test and the Plugin version was coming in at 367KB but the default export version was 180KB on the parts I was using. I'll check my setup. Thanks for the tip.
I believe I see it referenced here -https://bootstrap-vue.js.org/docs/#component-groups-and-directives-as-vue-plugins

[tmorehouse]

The plugin will include a bit more than just the components.

Making sure your imports are all in a single statement (with the new shorter format coming net release) will provide for better bundle sizes.

[tmorehouse]

v2.0.0-rc.22 has been released.