How to use this package with vite library mode?

[Paper-Folding]

Dear developers, I am using Vite library mode for my vanilla-ts front-end lib, and my typescript class contains too much private fields that causing minified umd js file too large. So I'm trying to use your package. Vite basically uses rollup for building typescript files, so I follow your rollup guide and here is my vite.config.js file:

import { resolve } from 'path';
import { defineConfig } from "vite";
import typescript from 'rollup-plugin-typescript2';
import minifyPrivatesTransformer from 'ts-transformer-minify-privates';

export default defineConfig({
    server: {
        port: 3000
    },
    build: {
        lib: {
            entry: resolve(__dirname, 'src/lib/my-lib.ts'),
            name: 'MyLib',
            fileName: 'my-lib',
            formats: ['umd'],
        },
        rollupOptions: {
            output: {
                assetFileNames: (chunkInfo) => {
                    if (chunkInfo.name === 'style.css')
                        return 'my-lib.min.css';
                },
                entryFileNames: 'my-lib.min.js',
            },
            plugins: [
                typescript({
                    transformers: [service => ({
                        before: [minifyPrivatesTransformer(service.getProgram())],
                        after: []
                    })]
                })
            ]
        }
    }
})

But this basically not gonna work, build will failed with this configuration. So could you plz tell me what should I do make it work? Or do you have any plan to support Vite library mode? Thank you!

[timocov]

But this basically not gonna work, build will failed with this configuration.

Do you have a repro repo for this issue? I haven't worked with it, but if you can provide one I can try to take a look

[Paper-Folding]

But this basically not gonna work, build will failed with this configuration.

Do you have a repro repo for this issue? I haven't worked with it, but if you can provide one I can try to take a look

Okay, I've created this minimum sample repository.

The repository's target is to build and minify src/lib/sample-lib.ts so that other repositories can import and use this built lib (located at dist/sample-lib.min.js).

The goal of this issue is to rename private typescript members (methods too if possible) after built and minified.

(This sample repository only creates a simple counter button, every time user clicks it, its count value will plus 1. So it only contains boilerplate code from vite when creating a vite project, I just modified it a little to make it vite library mode.)

[timocov]

Hey @Paper-Folding, sorry for really late reply.

First of all, thanks for the repro repo, it helps.

From my observation:

• for some reason vite transpiles default import differently (as expected?) thus you need to use minifyPrivatesTransformer.default.default, I have no idea why but it helps ¯_(ツ)_/¯

• after this the build process runs but it fails with some interesting issues e.g.

  src/lib/sample-lib.ts:4:15 - error TS7006: Parameter 'targetDomSelector' implicitly has an 'any' type.
  
  4   constructor(targetDomSelector) {

  which doesn't exist in this way in the code (there is a type specifier : string in the code). After quick googling it seems that vite internally runs typescript to transpile the code into JS https://vitejs.dev/guide/features.html#typescript:

  Vite only performs transpilation on .ts files and does NOT perform type checking

That said, it is not possible to make it work together with vite out of the box as this tool relies on the compiler type information which is available only at the compile time.

But if you really want to make it happen, you can change your pipeline to the following:

• before running vite compile TS code by using ttsc (it is not typo, see https://github.com/cevek/ttypescript) with applied transformer into JS code
• run vite against JS code (not TS) so it will not touch TS code and only work with JS one which is compiled TS with applied transformations

Not exactly the same, but you can see how this approach works in https://github.com/tradingview/lightweight-charts repo (see https://github.com/tradingview/lightweight-charts/blob/master/package.json#L104, https://github.com/tradingview/lightweight-charts/blob/e263d724aa135da699f744b152422b94f094aa28/package.json#L94, https://github.com/tradingview/lightweight-charts/blob/e263d724aa135da699f744b152422b94f094aa28/tsconfig.prod.json#L7 and https://github.com/tradingview/lightweight-charts/blob/e263d724aa135da699f744b152422b94f094aa28/rollup.config.js#L55 as a starting points).

If you have any questions and would need any help with that, let me know.