Support ts file and Make Its usage similar as official next-plugins

[lonyele]

Hi, I found that in a multi plugin composing case, Its usage is not same as official next-plugin thus I made these changes. If you want it as it is, still documentation is needed for its usage because It is not same as other official next-plugins)

Before

const options = {
  useCheckerPlugin: true,
  loaderOptions: {
    transpileOnly: false,
  },
};

module.exports = withAwesomeTypescript(options, withCSS({
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
  }
}));

After

const awesomeTypescriptOptions = {
  useCheckerPlugin: true,
  loaderOptions: {
    transpileOnly: false,
  },
};

module.exports = withAwesomeTypescript(withCSS({
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
  },
 awesomeTypescriptOptions
}));

[saitonakamura]

That's really great! I was thinking about it myself, but you know how this usually works :) There's few issues to fix, but do you mind if I'll do it myself?

[saitonakamura]

This will fail if awesomeTypescriptOptions is null or undefined, I guess we can write it as const { useCheckerPlugin, loaderOptions } = nextConfig.awesomeTypescriptOptions || {};

[lonyele]

I think you are right. If a user doesn't pass any arguments then my code will fail.

[saitonakamura]

What's the point of this change, to be more aligned with next-plugins codebase? I mean I don't mind, just want to clarify.

[lonyele]

because I had an error with myFile.ts file. I usually use .ts file If It's not a react component. I may be wrong, if there is another way to use .ts file then let me know.

[saitonakamura]

uhm, that's strange, because tsx? means ts or tsx which is exactly (ts|tsx). I'll check it

[lonyele]

Thanks! It didn't work with my code, but maybe I was doing wrong. webpack is still complicated to me...

[saitonakamura]

Ok, I've checked it, and tsx? is working fine on my side for .ts files. Feel free to raise an issue if the error persists

[lonyele]

I tested again by making ts file and import from another file... and It worked! hm... I thought to make stateless functional component with .ts file should work and It didn't... It should have been .tsx because It looks like just an arrow function, but It has html and other tsx syntax. sorry for this stupid mistake. But If It worked from by not making stupid mistake, I wouldn't even start looking it more about this next-plugins hahaha

[saitonakamura]

It should be module.exports = withAwesomeTypescript({ awesomeTypescriptOptions });

[saitonakamura]

Maybe we'll merge last two cases into one?

[lonyele]

yes, If you want!

[lonyele]

This is one of my very first PR, so If there is any problem, please let me know. Think me as a junior programmer :D Also I made a PR to next-plugins about the document. just in case. (vercel/next-plugins#156)

[saitonakamura]

@lonyele that's a pretty good PR, even for the first one! I fixed the issues (I hope you don't mind) and merged the branch. And, for the future, it's better to create a feature branch for each PR, it's easier to work with.

[saitonakamura]

Ok, I've released v0.3.0, really thanks for the PR! 👍

[lonyele]

Wow! Thanks for your feedback and merging work. I would definitely make feature branch and PR next time. still, I don't know how this open source workflow works. on top of that, I use git only for myself... It is my first time sharing my code with others. anyway, thanks a lot~