Develop Reference

How can use built version of web component generated by Stencil js in Vue 3 +Vite?

I want to build a custom web component by Stenciljs and use it in Vue3. The following repo contains the source code of web-component. github-source-code.
For this purpose, I run the command 'npm run build'. It generates dist and www folders. Which of them must be used in a Vue3 app?. And what is the best practice for this apporach?

A plugin System for react components using webpack

I'm developing a micro frontend architecture using module federation in Webpack in order to develop and deploy all parts of my web application separately. Everything sounds great but the problem is all remote modules should be specified explicitly in the Webpack configuration file. I need something like /plugins in the root directory of my built project And I want to import All .js files in that directory and render all of them in my react project.
Is there a way to implement a plugin system for react components using Webpack? Is there any way at all to achieve this goal?

Vue & Vite gives me the minimal Vue folder structure

I just created my first Vue app with the Vite bundler. I'm used to creating Vue projects with the Webpack bundler & Vue CLI where you can generate the VueX and Vue Router folders and files out of the box. When I create the Vue app with Vite I only get the minimal folder structure.
Is there a way to generate the VueX and the Vue Router Files automatically with Vite?

Vue CLI is a project generation framework which configures build tools and makes it easy to install libraries.
Vite is just a build tool.
You need to set everything up from scratch, or use a template eg: https://github.com/antfu/vitesse

How to publish typescript ReactJS component on npm?

I would like to make a new ReactJS component with Typescript and publish it on npm.
My idea is to have only a project folder with:
/dist build for final distribution on npm
node_modules
/public where I will have my index.js to locally run my app for development purposes and one folder components where all files for my distributed component will be stored (only component folder will be published)
and other files like .gitignore, .npmignore, package.json and so on..
Something like this:
I have seen many guides (and spent many hours) figuring out how to publish a ReactJS component like:
Create an NPM Package from a React Component
Create a React Component Library using TypeScript
How To Make a React Component Library - Making A React Library
Publish A React Component On NPM
create-react-library
But most of them have such a complicated structure (like script files, babel files, webpacks ..) and generated files that I don't understand.
My idea was to use react-script to run and develop the app locally and then run tsc to compile my component to build. I thought that I don't need create-react-app/library, babel or webpack to publish a react component - if they are necessary, why do we need them? I just thought it should be possible to do it simply and lightly - like just to take tsx files compile them into js..
To me, it seems that the process of publishing a ReactJS component library with TS to npm is not that well documented. Can you please provide steps or some well and easy-to-understand guide on how to publish react component? Also with all the configurations (configuration files), since I think I messed it somewhere there.
Thanks in advance!

How to import webpack generated output file into an App that has already installed modules that are already in the output file?

I have 2 apps that have Highcharts already installed
and I developed a separate react component that uses the Highcharts lib.
So I used webpack to generate that component with its dependencies to be imported into the 2 apps.
I did that to make the code DRY so I don't have to write the component code into 2 Apps.
How to import the generated output file from webpack into these apps without giving me the error of reinitializing Highcharts?
In other words how to import the file without any conflicts with the already installed libs in the Apps?
Update
I want the lib to be in the bundled file when in case of importing it into an application that doesn't have the lib.
Update II
I want the lib to be in the bundled file when the client application doesn't have the lib, and when the application has the lib the bundled library is the one that is used by the component.

If you know that environment of your code already have some library you can exclude this library from bundle using externals: https://webpack.js.org/configuration/externals/
Lets say we make a react components library and we need to install react, but we know that we will use our components in our react application where react is already installed.
So, we can mark react as externals in our webpack config like:
module.exports = {
// ...
externals: {
react: 'React'
}
// ...
};
Also we can use DllPlugin for exclude any library or any code from our bundle. https://webpack.js.org/plugins/dll-plugin/
You should add external library to peerDependencies for your own library and add external library to dependencies for your application, then you should exclude external library from bundle of your own library using externals or DllPlugin and you will achieve your goal.
UPD:
If you want to include or exclude external library from your bundle depending on your application you should compile your library two times: with external library and without external library and import needed variant in your application.
Also you can use dynamic imports in your library: check exists the external library in current environment and if doesn't - import it.
But these two cases are not ok, we don't do so.
Webpack can't resolve dynamic imports and the external library anyway will still be bundled.
NPM team created peerDependencies specifically for occasions like yours. This is the industry standard.
Read these, please:
https://docs.npmjs.com/files/package.json#peerdependencies
https://webpack.js.org/guides/author-libraries/#externalize-lodash
https://nodejs.org/es/blog/npm/peer-dependencies/
I don't know how to convince you...