search

jackocnr / intl-tel-input

A JavaScript plugin for entering and validating international telephone numbers. React and Vue components also included.
https://intl-tel-input.com
MIT License
7.69k stars 1.95k forks source link

Refactor JavaScript Structure for Vue Components #1801

Closed Ibrahimmushtaq98 closed 2 months ago

Ibrahimmushtaq98 commented 2 months ago

Currently the structure of the Vue components feels a bit awkward to work on when trying to implement a typescript vue definition. So instead, I refactored the structure of the JavaScript related file for better organization and maintainability

Key Changes:

  1. Moved Vue JavaScript components: The IntlTelInput.vue file and associated Vue components have been moved from vue/src/intl-tel-input/ to vue/src/js/ to make the structure more intuitive for JS-specific components.
  2. Updated Vite configurations: The viteConfig.js and viteConfigWithUtils.js files have been relocated to vue/src/js/ to align with the new folder structure. Updated the Vite configuration to reflect the new component paths
  3. Adjusted Grunt build tasks to reference the newer paths

Hopefully with these changes, it would also allows others or myself to start making Typescript vue components

Please ask question if there are any doubts!

jackocnr commented 2 months ago

Hi there, thanks for your thoughts on this. I'm not familiar with Vue myself, so I'm very open to ideas/feedback on the setup BUT the existing directory structure was chosen because it replicates the React directory structure, and the reason for that particular organisation was precisely to get the correct module names in the (react) typescript definition file. You can see how the react TS definition file is generated using this tsconfig file - specifically setting the root to the react/src directory, which means the module names are relative to that dir e.g. "intl-tel-input/react", "intl-tel-input/data" etc, which then matches how people import these modules (e.g. import IntlTelInput from "intl-tel-input/react"), so the types get automatically loaded and applied correctly.

Ibrahimmushtaq98 commented 2 months ago

Hi there, so i am completely opposite which is I do not know much about react so I am also open to feedback. But i did try to refer to the react structure. I will say, i think i was blind cause I did not see the tsconfig file in there to fully refer to. I will also say that im no expert in Vue so I also could be wrong with the structure change.

The reason why i did so was to separate both typescript and javascript module that get imported BUT i think i can do away with this

Thanks for the feedback