Skip to content

add wrap() for Vue3 #109

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.

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

Closed
wants to merge 5 commits into from
Closed

add wrap() for Vue3 #109

wants to merge 5 commits into from

Conversation

TatsuyaYamamoto
Copy link

@TatsuyaYamamoto TatsuyaYamamoto commented Jun 7, 2021

@LinusBorg
I'm sorry to mention you suddenly.
I want use vue-web-component-wrapper for Vue3 so I opened this draft PR.

I'm aware that @LinusBorg started working on this porting (#93#issuecomment-751347772) and this task is a bit lower priority (93#issuecomment-778991647) .

I understand it takes time to develop some great features, but I want you to provided wrap() for v3 providing the same functions as the current one first. So, I opened this.

This PR is draft so wrap() for v3 is not implemented yet. After @LinusBorg accept this PR's policy, I'll resume to work on remaining tasks.

Summary of fixes

  • implements 2 wrap functions for v2 and v3.
    • wrapV2
      • The implementation is the same as src/index.js. The filename is different only.
    • wrapV3
      • The implementation is for Vue3.
  • keep spec and switch between v2 and v3 internally. (src/index.ts)
    • I'm aware that vue-cli depends on vue-web-component-wrapper so it will take time before it can be used with vue-cli if I change api spec.
    • wrap() in new entry function (src/index.ts) has the same parameters as the current entry function.
    • switch between wrapV2() and wrapV3() according to Vue.version.

Files

  • src/index.ts
    • new entry file
  • src/wrapV2.js, src/wrapV3.ts
    • actual function for V2 and V3.
  • rollup.config.js, tsconfig.json, dist/index.d.ts, (deleted) types/index.d.ts
    • src/index.ts and src/wrapV3.ts is written by TypeScript and rollup plugin transpiles them.
    • when transpiling, tsc emit declaration file (dist/index.d.ts)
  • test/fixtures/*.html
    • test/fixtures/*.html load transpilede code.

@TatsuyaYamamoto TatsuyaYamamoto changed the title Feat/v3 support add wrap() for Vue3 Jun 7, 2021
@TatsuyaYamamoto
Copy link
Author

Vue 3.2 has built-in support for web component wrappers so I close this PR.
https://v3.vuejs.org/guide/web-components.html

@sherlock1982
Copy link

Unfortunately it is seriously different from this component wrapper.

<style module> is not supported for root web component. <style module> in child component is being added to the instead of shadowRoot.

@LinusBorg
Copy link
Member

There's ongoing work in that general direction here:

vuejs/core#4309

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants