search

cevek / ttypescript

Over TypeScript tool to use custom transformers in the tsconfig.json
1.53k stars 56 forks source link

Example of transformer: ts-transform-asset #76

Closed sveyret closed 4 years ago

sveyret commented 4 years ago

Hi,

You are giving examples of transformers in your readme. Just for information, I wrote a transformer which you could add to the list, if you want: https://www.npmjs.com/package/ts-transform-asset

Thank you

cevek commented 4 years ago

Hi @sveyret! We discussed earlier about the same plugin with @zerkalica for native SSR without using webpack compilation. But we found a problem with this type of transformation. The problem is that webpack loader moves your assets into the dist directory and then if you are using another production loader - it renames your assets by adding hash of file content. So destination html layout with webpack loader would be like const img = './dist/foo-12ea435da.png' and after your ts transformation plugin const img = './assets/foo.png' So, to solve this problem you should act like webpack loader. Maybe this typescript plugin should accept some params like webpack config file or something else. What do you think?

sveyret commented 4 years ago

I am not personally using hashes to prevent this kind of situation. I did not investigate and thought that the hash was somehow a random number, and therefore impossible to reproduce.

But sure, if it is actually calculated based on the file content, or in any way that I can also use to find the same result, I could add an option for that in the transformer…

sveyret commented 4 years ago

Hi @cevek!

For your information, I finally found time to look at how Webpack is working and mimic it (in a simpler way, the transformer is not able to do everything the file-loader is doing).

So, it is now possible (with version 3) to specify hash to the file name…

Do not hesitate and tell me what you think: https://www.npmjs.com/package/ts-transform-asset

Regards.

sveyret commented 4 years ago

Hi @cevek, I created a new transformer and also some tools to help transformer creation. I made a PR #79 PR #80 for you can add the references in the README file.

Thank you!