(fix): added rollup plugin @zerollup/ts-transform-paths, injected as … #374

ambroseus · 2019-12-15T13:27:07Z

…transformer in rollup-plugin-typescript2 config

closes #336

decided to not fix `tsdx` configs but provide info for solution: #379 (comment)

Edit/Summary From @jaredpalmer:

When using tsdx with larger packages, it is useful to use typescript path aliasing to avoid relative imports. This change allows tsdx (rollup and typescript) to respect such options.

Before

import Button from 'components/Button'
// becomes
const Button = require('components/button') // omitting interop stuff

After

import Button from 'components/Button'
// becomes
const Button = require('./components/button') // omitting interop stuff

ambroseus · 2019-12-15T13:32:01Z

tsdx tests:

my monorepo build with fixed version:
https://github.com/DCKit/dckit/blob/master/packages/%40dckit/ui/tsconfig.json

swyxio · 2019-12-15T15:35:07Z

ok nice work, think this one needs @jaredpalmer to look at it before we merge

ambroseus · 2019-12-15T16:03:32Z

ok nice work, think this one needs @jaredpalmer to look at it before we merge

yep)

meanwhile I've checked official @reduxjs/toolkit build with fixed version

…transformer in rollup-plugin-typescript2 config

agilgur5

Should there be a test to ensure this works? Would require running a compiled module that imports something out of src/ to check that it was actually imported. A bit convoluted.

Beyond that, I wonder if this is handled by the parcel playground and storybook template correctly, or if support needs to be added for those too. Not sure, but those can be added later if needed

agilgur5 · 2019-12-18T20:37:36Z

src/createRollupConfig.ts

@@ -50,6 +51,9 @@ export async function createRollupConfig(opts: TsdxOptions) {
    tsconfigJSON = fs.readJSONSync(resolveApp('tsconfig.json'));
  } catch (e) {}

+  const pathTransformer = (service: any): any =>
+    transformPaths(service.getProgram());


Can these be more specific than any? transformPaths is written in TS, so I think it can be.

Also do you know if the second arg isn't necessary? It has an exclude option, not sure if we should pass tsconfigJSON.exclude into there or if it's read automatically (and the exclude option is just an override maybe?? idk the docs aren't comprehensive)

oh, yea) transformPaths has types LanguageService and CustomTransformer - need to use,
to be fixed

zerkalica/zerollup#22

ambroseus

I've build my lib with patched version with paths config, and then check with simple react app - no problem found

but fully agree - need to check any possible combinations and add tests
to be implemented)

jaredpalmer · 2019-12-19T15:26:48Z

sorry did not mean to close

jaredpalmer · 2019-12-19T15:46:52Z

Questions:

AFAIK TS transforms are not that popular? Should/can we do this with babel? am i talking out of ass? idk.
How/does this impact monorepo's with symlinks and ts paths? For example, you can setup lerna and ts to understand symlinked local packages using tsconfig paths. The result is that that you can have @project/a resolve to packages/a and @project/b resolve to packages/b inside of packages/c. I think that should work fine. However, you can also resolve them to the src of each local package (@project/a resolve to packages/a/src) and then what happens? My guess is that the importing package would need to do the transforms?Thoughts? Maybe that makes sense. idk.

ambroseus · 2019-12-19T17:13:50Z

AFAIK TS transforms are not that popular? Should/can we do this with babel? am i talking out of ass? idk.

mm.. yeah, I'll check possible solution with babel
(as for me, I like babel-plugin-module-resolver)

How/does this impact monorepo's with symlinks and ts paths? For example, you can setup lerna and ts to understand symlinked local packages using tsconfig paths

I already use lerna monorepo + tsdx (my patched version with ts-paths plugin) in each package + test CRA app + lerna bootstrap --hoist
https://github.com/DCKit/dckit/blob/master/packages/%40dckit/ui/tsconfig.json
it works)
DISCLAIMER: I use only esm module format

ambroseus · 2019-12-19T21:38:41Z

@jaredpalmer @agilgur5 we can avoid use of transformers in rpts2 and use babel-plugin-module-resolver with paths from tsconfig.json. just compare (checked with 'basic' tsdx template)

ambroseus · 2019-12-19T22:26:40Z

OMG.. tleunen/babel-plugin-module-resolver#336 (comment)
solution with babel-plugin-module-transformer is not so simple like with ts-transform-paths transformer...

ambroseus · 2019-12-20T12:29:33Z

Useful info: https://mitchellsimoens.com/2019/08/07/why-typescript-paths-failed-me/
@agilgur5 there ^^^ is an answer (see Second Issue) why second param with excludes may need

Also do you know if the second arg isn't necessary? It has an exclude option, not sure if we should pass tsconfigJSON.exclude into there or if it's read automatically

ambroseus · 2019-12-20T15:18:34Z

@agilgur5 @jaredpalmer proof with 'storybook' template & ts-transform-paths :)

jaredpalmer · 2019-12-21T16:33:04Z

So my question is if this should be part of the tsdx out of the box. Is this really that common of a thing? Seems like it is niche? Someone could easily just publish a “plugin” that adds this and we could link to it

ambroseus · 2019-12-21T17:48:05Z

So my question is if this should be part of the tsdx out of the box. Is this really that common of a thing? Seems like it is niche? Someone could easily just publish a “plugin” that adds this and we could link to it

@jaredpalmer I know many developers who use aliases plugins to deal with "../../../" hell.. But also agree that adding yet another plugin for plugin for plugin in the core is not excellent idea..

so.. I reject my PR and add comment to HOWTOs how to setup aliasing (@sw-yx it would be good to pin HOWTOs issue.. :)

agilgur5 · 2019-12-28T00:31:36Z

So just to summarize:

OMG.. tleunen/babel-plugin-module-resolver#336 (comment)
solution with babel-plugin-module-transformer is not so simple like with ts-transform-paths transformer...

babel-plugin-module-resolver is a lot more complex than ts-transform-paths

Useful info: https://mitchellsimoens.com/2019/08/07/why-typescript-paths-failed-me/

1. TS paths are not meant to be used like this per Module path maps are not resolved in emitted code microsoft/TypeScript#10866 (comment) .
2. Adding a transformer like ts-transform-paths can cause even more issues listed in that blog post, summarized at the end as: "I’m not saying paths are bad just if you’re gonna use them in a way they are not intended to be used, expect a bumpy road".
3. tscpaths and ts-transform-import-path-rewrite are some alternatives (there are more), but seem more immature than ts-transform-paths, at least afaict from quick glance.

So babel-plugin-module-resolver actually seems to be a more appropriate use than a TS transform, but neither should really change the usage of paths as they shouldn't be used like that.

In either case, it seems like trying to resolve paths is more of a hassle than worthwhile, and potentially a very fragile feature, so I think I'd agree that it should be left to user-land as a result. That being said, as it is a common use case, I do think there should be an easier way to configure it.

As objectHashIgnoreUnknownHack of #294 et al is also a common use case, it probably makes sense more generally to expose the rpts2 config somehow so it can be modified without having to straight copy the source code (which is brittle as that will change). Wrapping rpts2 in a plugin like I mentioned in #389 (comment) might make overriding it a bit easier, but maybe there's another method that makes sense for this as well.

0vidiu · 2020-01-07T16:38:38Z

Copy/pasta snippet incoming for people in need:

// babel.config.js
module.exports = {
  // ...
  plugins: [
    // ... other plugins
    [
      'babel-plugin-module-resolver',
      {
        root: './',
        alias: require('./tsconfig.json').compilerOptions.paths,
      },
    ],
  ],
};

This works wonderfully in combination with TsconfigPathsPlugin (Webpack plugin). I declare my aliases in tsconfig.json and they work in Webpack, Storybook, Babel (for tests), while it also keeps VSCode happy. Hope this helps someone.

ambroseus · 2020-01-07T18:21:14Z

thanks @0vidiu, added to HOWTOs #379 (comment)

slorber · 2020-03-31T18:02:00Z

thanks @0vidiu @ambroseus

This workaround works fine for the JS output, but the typedefs are emitted in different files, and they still have the absolute links, making the typedef files unable to resolve each others. Any idea how to solve it?

jensbodal · 2020-07-18T07:13:38Z

The https://github.com/zerkalica/zerollup/tree/master/packages/ts-transform-paths transformer should handle type files properly from what their docs say

sujingclg · 2022-02-16T03:36:37Z

Copy/pasta snippet incoming for people in need:
// babel.config.js
module.exports = {
  // ...
  plugins: [
    // ... other plugins
    [
      'babel-plugin-module-resolver',
      {
        root: './',
        alias: require('./tsconfig.json').compilerOptions.paths,
      },
    ],
  ],
};
This works wonderfully in combination with TsconfigPathsPlugin (Webpack plugin). I declare my aliases in tsconfig.json and they work in Webpack, Storybook, Babel (for tests), while it also keeps VSCode happy. Hope this helps someone.

It seems not working at "babel-plugin-module-resolver": "^4.1.0", and can be fixed by changing babel.config.js as follow.

module.exports = {
  plugins: [
    [
      'module-resolver',
      {
        alias: {
          "@": "./src"
        }
      },
    ],
  ],
}

the key of resolving this problem is changing alias value from array to string.

ambroseus mentioned this pull request Dec 15, 2019

Using TS Paths as aliases #336

Closed

Eugene Samonenko added 2 commits December 18, 2019 18:53

(fix): added rollup plugin @zerollup/ts-transform-paths, injected as …

df6e0a2

…transformer in rollup-plugin-typescript2 config

remove forked package name

1750c10

ambroseus force-pushed the fix-tsconfig-paths branch from 033ed38 to 1750c10 Compare December 18, 2019 16:53

agilgur5 reviewed Dec 18, 2019

View reviewed changes

ambroseus commented Dec 18, 2019

View reviewed changes

jaredpalmer closed this Dec 19, 2019

jaredpalmer reopened this Dec 19, 2019

This was referenced Dec 21, 2019

fix transformPaths plugin type to be compatible with interface CustomTransformers zerkalica/zerollup#22

Closed

How to setup TSDX with an example application for React Native #388

Closed

ambroseus closed this Dec 21, 2019

ambroseus deleted the fix-tsconfig-paths branch December 21, 2019 17:48

ambroseus mentioned this pull request Dec 21, 2019

HOWTOs #379

Open

agilgur5 mentioned this pull request Jan 31, 2020

docs: add agilgur5 as a contributor #446

Merged

agilgur5 mentioned this pull request Mar 4, 2020

Absolute imports / TS Paths aliases get treated as externals #528

Closed

agilgur5 added the topic: TS Paths Aliases Related to using aliases with TypeScript paths label Mar 10, 2020

agilgur5 mentioned this pull request Mar 12, 2020

Modules resolved absolutely against src are treated as external: support TS Paths aliases #91

Open

agilgur5 mentioned this pull request Apr 8, 2020

docs: add ambroseus as a contributor #670

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

(fix): added rollup plugin @zerollup/ts-transform-paths, injected as … #374

(fix): added rollup plugin @zerollup/ts-transform-paths, injected as … #374

ambroseus commented Dec 15, 2019 •

edited

Loading

ambroseus commented Dec 15, 2019

swyxio commented Dec 15, 2019

ambroseus commented Dec 15, 2019

agilgur5 left a comment

agilgur5 Dec 18, 2019

ambroseus Dec 18, 2019

ambroseus Dec 21, 2019

ambroseus left a comment •

edited

Loading

jaredpalmer commented Dec 19, 2019

jaredpalmer commented Dec 19, 2019 •

edited

Loading

ambroseus commented Dec 19, 2019 •

edited

Loading

ambroseus commented Dec 19, 2019

ambroseus commented Dec 19, 2019 •

edited

Loading

ambroseus commented Dec 20, 2019 •

edited

Loading

ambroseus commented Dec 20, 2019

jaredpalmer commented Dec 21, 2019

ambroseus commented Dec 21, 2019

agilgur5 commented Dec 28, 2019 •

edited

Loading

0vidiu commented Jan 7, 2020

ambroseus commented Jan 7, 2020

slorber commented Mar 31, 2020

jensbodal commented Jul 18, 2020

sujingclg commented Feb 16, 2022 •

edited

Loading

(fix): added rollup plugin @zerollup/ts-transform-paths, injected as … #374

(fix): added rollup plugin @zerollup/ts-transform-paths, injected as … #374

Conversation

ambroseus commented Dec 15, 2019 • edited Loading

decided to not fix tsdx configs but provide info for solution: #379 (comment)

ambroseus commented Dec 15, 2019

swyxio commented Dec 15, 2019

ambroseus commented Dec 15, 2019

agilgur5 left a comment

Choose a reason for hiding this comment

agilgur5 Dec 18, 2019

Choose a reason for hiding this comment

ambroseus Dec 18, 2019

Choose a reason for hiding this comment

ambroseus Dec 21, 2019

Choose a reason for hiding this comment

ambroseus left a comment • edited Loading

Choose a reason for hiding this comment

jaredpalmer commented Dec 19, 2019

jaredpalmer commented Dec 19, 2019 • edited Loading

ambroseus commented Dec 19, 2019 • edited Loading

ambroseus commented Dec 19, 2019

ambroseus commented Dec 19, 2019 • edited Loading

ambroseus commented Dec 20, 2019 • edited Loading

ambroseus commented Dec 20, 2019

jaredpalmer commented Dec 21, 2019

ambroseus commented Dec 21, 2019

agilgur5 commented Dec 28, 2019 • edited Loading

0vidiu commented Jan 7, 2020

ambroseus commented Jan 7, 2020

slorber commented Mar 31, 2020

jensbodal commented Jul 18, 2020

sujingclg commented Feb 16, 2022 • edited Loading

ambroseus commented Dec 15, 2019 •

edited

Loading

decided to not fix `tsdx` configs but provide info for solution: #379 (comment)

ambroseus left a comment •

edited

Loading

jaredpalmer commented Dec 19, 2019 •

edited

Loading

ambroseus commented Dec 19, 2019 •

edited

Loading

ambroseus commented Dec 19, 2019 •

edited

Loading

ambroseus commented Dec 20, 2019 •

edited

Loading

agilgur5 commented Dec 28, 2019 •

edited

Loading

sujingclg commented Feb 16, 2022 •

edited

Loading