Uncompiled dependency issues

[PurpleTape]

Hello!

I want to make a set of Vue components and use it in my projects for rapid development under Vite. Let it be called CORE. Its structure is approximately as follows:

• Atom components (buttons, input fields, etc.)
• Complex components consisting of atom components (modal windows, forms, etc.)
• Auxiliary functions and compositions

Next, I want to use the CORE module in another project (let's call it APP). At the same time, when developing the APP module, I want to be able to make quick edits to the CORE module.

But in this case, after each edit in the CORE module, I will need to rebuild it again and install it in the APP module, which significantly slows down development.

To avoid this, I decided to use the following strategy: distribute the CORE module through the GitHub repository in an uncompiled form (that is, in the form of source code) and already build when publishing the APP module.

However, here I ran into the following problems:

1. The CORE module uses the alias @ ='./src' when importing, but since there are completely different files in the APP module along the path ./src, an error occurs. I solved this by redefining the alias @ = './node_modules/CORE/src' in the APP module. But in my opinion, this solution is not very beautiful. Maybe you know the best way to solve it?
2. In accordance with the "Dependency Pre-Bundling" strategy (https://vitejs.dev/guide/dep-pre-bundling.html ) Vite collects many files in the CORE module into a single file node_modules/.vite/deps/CORE.js. But in the directory node_modules/.vite there are a lot of files of the form @_components_input.js, @_components_button.js etc. These files are not used in the APP module, but are used inside the CORE module. Thus, due to the fact that for some reason the components are divided into separate files, the optimization of "Dependency Pre-Bundling" becomes less effective and when loading the page of the APP module in the browser during development, I have to wait ~20 seconds for loading all files of the form @_components_*.js, which slows down development. How I can change this behavior so that the CORE module components are in the same file node_modules/.vite/deps/CORE.js?
3. The CORE module uses the Vue provide() and inject() functions, which communicate with each other using const key = Symbol(). In the CORE module itself, components using provide() and inject() work fine, but when I use these components in the APP module, inject() does not bind to provide(). After some research, I found out that const key = Symbol() is called twice: once in the CORE module, and the second in the APP module. And since key is redefined, provide() and inject() cannot communicate with each other. To solve the problem, I tried using the resolve.dedupe option in the vite.config.ts configuration with the value resolve.dedupe: ['vue'], resolve.dedupe: ['CORE'], resolve.dedupe: ['@vueuse/core'], but all this did not help. How can provide() and inject() be made to work in the APP module?

Also may tell me if I chose the right development strategy (with the distribution of the CORE module through the GitHub repository in an uncompiled form) or maybe there are some more optimal strategies that accelerate development?

I am grateful in advance for studying my problem and answering questions!

[chenxch]

Maybe what you need is a monorepo.

About const key = Symbol() ,If you use a single library, you must use Symbol. Your scenario may use Symbol.for, but there may be other potential problems.

[PurpleTape]

Maybe what you need is a monorepo.

Yes, I think this is a good solution in order to avoid the step of uploading the CORE module on GitHub and installing it in the APP module. I want to try this development strategy, but despite this, problems 1-3 remain relevant, since the CORE module will still be uncompiled code

About const key = Symbol() ,If you use a single library, you must use Symbol. Your scenario may use Symbol.for, but there may be other potential problems.

I use provide() and inject() as a composition of createInjectionState() from @vueuse (source code: https://github.com/vueuse/vueuse/blob/main/packages/shared/createInjectionState/index.ts). That is, Symbol, provide() and inject() are defined in the same composition and will be defined in a new way each time the code is executed, whereas Symbol.for() will always return the same character for a non-random string

[chenxch]

Yes, in the design of the form component, it is generally initialized to generate a formKey, which will be exposed to components such as nested form-item through provide

//token.ts
import type { InjectionKey } from 'vue'

export const formContextKey: InjectionKey<FormContext>
   = Symbol('myform')

// form.vue

import { formContextKey } from './tokens'

const props = defineProps(formProps)

provide(formContextKey, props)

// form-item.vue

import { formContextKey } from './tokens'

const formProps = inject(formContextKey, {})

[PurpleTape]

I mean, these are not problems with the Symbol code, since there are no problems with the bundle within one module. It looks like the CORE module and the APP module use different vue instance. I tried to fix it with resolve.dedupe, but I didn't succeed