[Question] Does tsdx can publish many components ?

[c0ncentus]

what is the purpose ?

Three days ago I searching to pass to 40 Mo with tsx, .d.ts and js files to uniq UMD file with many js file (the goal is achieve with ~3Mo i think)

in a nutshell

Actual 👎 :

My module have 100~130 components so make one component by repo is making for me no sense . so right now my process is very silly but no regrets ! I give a try with https://www.npmjs.com/package/npm-dts but with critical failure (because of many files and some "export * from "../someFolder")

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const NpmDtsPlugin = require('npm-dts-webpack-plugin')
module.exports = {
    plugins: [
        new NpmDtsPlugin({
            output: path.resolve(__dirname, 'dist')
        }),
        new OptimizeCssAssetsPlugin({
            cssProcessorOptions: {
                safe: true,
                discardComments: {
                    removeAll: true,
                },
            },
        }),
        new MiniCssExtractPlugin({
            filename: 'styles.css',
            chunkFilename: '[id].css',
        }),
    ],
    entry: {
        index: { import: './src/index.ts', dependOn: 'shared', },
        shared: 'lodash',
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /(node_modules|\.css$)/,
                include: path.join(__dirname, "src"),

            },
            { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },
            {
                test: /\.(png|jpg|gif|svg)$/i,
                use: [
                    {
                        loader: 'url-loader',//options: {limit: 8192,},
                    },
                ],
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
        plugins: [new TsconfigPathsPlugin({ configFile: "tsconfig.json" })]
    },
    output: {
        filename: '[name].js',
        chunkFilename: "[name].chunk.js",
        path: path.resolve(__dirname, 'dist'),
    },
    optimization: {
        runtimeChunk: 'single',
        splitChunks: { chunks: 'all', },
        minimize: true,
        minimizer: [new CssMinimizerPlugin(),],
    },
};

I'm not friendly with configurate configaration of config tools ... However I spend 3 days on webpack and no solution yet. Webpack is powerfull but i want something so "basic things" ...

that is what I want 👍 :

troubles with webpack

so i want to acheive with webpack (no comment) . I search into the deep web https://www.npmjs.com/package/npm-dts this. in my opinion it is a "wow awesome" package :D

What I want to achieve ?

As a beeginer of webpack crap configuration (it so hugely powerfull but ... wait ... i don't want spend weeks to configurate things . ) i fail to achieve my TSX componentS available on npm with AWESOME packaging process (due to typings issues).

Really ... I send into npm every build: 800 files ! Hell things I agree but no have choice beetween ultra complex config to achieve and ultra easy silly way.

Do you think this npm package can acheve it ? or Can you please tell me some tips ?

I think this package do that :

Do you have an idea if this awesome coolest library can provide me for this usage ? (if cannot, can you tell me some tips ? at least it can help other people to deal with that )

[c0ncentus]

up ! can you tell me if the package will be maintain ? (yes or not just wondering for lead my technical choice).