fix typescript errors when importing package

ottetz commented 3 months ago

Fixes error on importing the package when using typescript

Could not find a declaration file for module 'vue-web-component-wrapper'. '....../node_modules/vue-web-component-wrapper/package/dist/vue-web-component-wrapper.es.js' implicitly has an 'any' type. There are types at '...../node_modules/vue-web-component-wrapper/package/types.d.ts', but this result could not be resolved when respecting package.json "exports". The 'vue-web-component-wrapper' library may need to update its package.json or typings.ts(7016)

EranGrin commented 3 months ago

Thank you for this PR even though the types did work in most cases

MohamedKamalOthman commented 2 months ago

I had the same issue while building as well.

EranGrin commented 2 months ago

@MohamedKamalOthman means... does this issue is still open?

MohamedKamalOthman commented 2 months ago

@EranGrin I didn't try it actually because there is no new release with this fix

EranGrin commented 2 months ago

@MohamedKamalOthman This PR is merged and part of the main src code, would you mind sharing your main.js file?

MohamedKamalOthman commented 1 month ago

@EranGrin Sure, Also Could you create a new release with this fix? One more thing when I apply the fix locally I get this error

src/WebComponent.ts:130:3 - error TS2353: Object literal may only specify known properties, and 'disableStyleRemoval' does not exist in type 'CreateWebComponentOptions'.

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import {
  defineCustomElement as VueDefineCustomElement,
  createApp,
  getCurrentInstance,
  h
} from 'vue'
import App from './App.vue'

import { createWebComponent } from 'vue-web-component-wrapper' // error in build in this line
import style from './assets/global.css?inline'
import {
  useSettingsStore,
} from './stores/settings/settings-store'

const settings: appSettings = {
}

export const pluginsWrapper = {
  install(GivenVue: any) {
    const Vue = GivenVue

    const pinia = createPinia()
    pinia.use(piniaPluginPersistedstate)
    Vue.use(pinia)

    useSettingsStore().settings = settings
  }
}

createWebComponent({
  rootComponent: App,
  elementName: 'app',
  plugins: pluginsWrapper,
  cssFrameworkStyles: style,
  VueDefineCustomElement,
  h,
  createApp,
  getCurrentInstance,
  disableStyleRemoval: false,
  disableShadowDOM: false
})

// create and append the web component
document.body.appendChild(document.createElement('app'))

EranGrin / vue-web-component-wrapper

fix typescript errors when importing package #36