Skip to content
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

feat(vue): add typescript support #1920

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Conversation

reslear
Copy link

@reslear reslear commented Jan 7, 2025

CleanShot 2025-01-07 at 02 37 32@2x

CleanShot 2025-01-07 at 03 01 10@2x

resolve: #1794

hi @jackocnr pls review :)

Changes:

  • Typed input-props and options

  • both components types support:

    import IntlTelInputWithUtils from 'intl-tel-input/vueWithUtils'
    import IntlTelInput from 'intl-tel-input/vue'
  • exportable SomeOptions not necessarily, but maybe in the future:

    import { type SomeOptions } from 'intl-tel-input/vue'
  • use modelValue instead value for v-model

  • used vite multiple entries instead double run vite with custom configs.

TODO on future:

  • use pnpm with worksapces, and move build data to shared package instead symlinks.
  • use better build system instead grunt e.g zx
  • need repo convert to monorepo (for clean installations for different frameworks, better ts support).
  • think about improved logic for importing “utils”
  • rename /vueWithUtils -> kebab-case e.g /vue-with-utils

@reslear
Copy link
Author

reslear commented Jan 9, 2025

hi @jackocnr friendly ping :)

@jackocnr
Copy link
Owner

jackocnr commented Jan 9, 2025

This looks amazing, thank you so much!

A few questions/comments:

  • I think we need to include the vue/build/ directory in git, so people can consume this component - this is how the main plugin and the react component work. Do you agree, or am I missing something?
  • Why the move from vue/src/intl-tel-input/IntlTelInput.vue to vue/src/IntlTelInput.vue? My concern is that this will mess with the module names in vue/build/exports/IntlTelInput.d.ts but I can't yet see that file to check this. (e.g. we found that with the React component, we needed to have the intl-tel-input/ directory so that the react component's TS module name was "intl-tel-input/react" - see here, which matches how the react component gets imported when people use this library and hence the types get applied correctly)
  • Why the move from vue/build/IntlTelInput.mjs to vue/build/exports/IntlTelInput.mjs? It seems like an unnecessary step to me and makes it less consistent. But if there's a good reason e.g. if this is an unavoidable Vue thing, then I can accept it.

Again, thank you so much for this great work 💐

@reslear
Copy link
Author

reslear commented Jan 9, 2025

  1. And in reality do we need data that is compiled I think not, if you analyze popular packages, For vue we don't to have the compiled version if we need it, we have npm code or just go to node_modules/.
    I don't look at compiled code unless I need to patch it.

  2. to generate types we need an input file .ts/.js where .vue components should be imported. Folder exports i'ts a normal practise e.g..

The problem is that the file and category names are the same, which may cause conflicts.
but I can check again.
Let me take another look at it. If we can keep it without moving it, I might do that.

what about TODO on future:?

@jackocnr
Copy link
Owner

jackocnr commented Jan 9, 2025

Re: providing build files, I suppose we don't need to provide build files in the standard case e.g. if your project uses a build tool that supports TypeScript you can just import the Vue src file. The problem is for someone who is not using TS, and doesn't support it in their current build setup - how will they import the component? Or am I overthinking this? Do all Vue bundlers/build tools support TS by default?

Re: the exports section in package.json, now I'm wondering: what's the point in adding the build paths here, when we don't provide those build files when the package is consumed? Again, I fear I'm missing something here - my understanding of these things might be flawed or out of date - if that's the case, forgive me!

Re: future TODOs - I'm open to all of these ideas, but can you help me understand the benefits of each one? Perhaps it's better to discuss these ideas separately.

Thanks again.

@reslear
Copy link
Author

reslear commented Jan 9, 2025

Re: providing build files, I suppose we don't need to provide build files in the standard case e.g. if your project uses a build tool that supports TypeScript you can just import the Vue src file. The problem is for someone who is not using TS, and doesn't support it in their current build setup - how will they import the component? Or am I overthinking this? Do all Vue bundlers/build tools support TS by default?

but we build this before publishing and end up with pure js with no typscript only .d.ts types but next to the js files

CleanShot 2025-01-09 at 17 46 46@2x

Re: the exports section in package.json, now I'm wondering: what's the point in adding the build paths here, when we don't provide those build files when the package is consumed? Again, I fear I'm missing something here - my understanding of these things might be flawed or out of date - if that's the case, forgive me!

exports it is just a wrapper for vue or more specifically for the d.ts plugin which needs an input file, it is just a feature of building with this solution.
However, I will reconsider

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.

Is it possible to implement typescript implementation for VueJs
2 participants