next-transpile-modules - npm Package Compare versions

Comparing version 2.3.1 to 3.0.0

package.json

 {
   "name": "next-transpile-modules",
-  "version": "2.3.1",
-  "main": "index.js",
+  "version": "3.0.0",
+  "main": "src/next-transpile-modules.js",
   "license": "MIT",
@@ -10,3 +10,4 @@ "author": "Pierre de la Martinière <[e-mail]>",
     "test": "jest",
-    "lint": "eslint ."
+    "test:lint": "eslint .",
+    "test:formatting": "prettier --check \"**/*.js\""
   },
@@ -30,19 +31,28 @@ "files": [
     "modules",
-    "babel"
+    "babel",
+    "webpack"
   ],
-  "dependencies": {},
+  "dependencies": {
+    "micromatch": "^4.0.2",
+    "slash": "^3.0.0"
+  },
   "devDependencies": {
+    "@types/jest-environment-puppeteer": "^4.3.1",
     "anymatch": "2.0.0",
-    "eslint": "5.12.1",
-    "eslint-config-semistandard": "13.0.0",
-    "eslint-config-standard": "12.0.0",
-    "eslint-plugin-import": "2.15.0",
-    "eslint-plugin-jest": "22.3.0",
-    "eslint-plugin-node": "8.0.1",
-    "eslint-plugin-promise": "4.0.1",
-    "eslint-plugin-standard": "4.0.0",
-    "jest": "24.1.0",
-    "npm": "6.8.0",
+    "eslint": "6.8.0",
+    "eslint-config-prettier": "6.9.0",
+    "eslint-config-semistandard": "15.0.0",
+    "eslint-plugin-import": "2.20.0",
+    "eslint-plugin-jest": "23.6.0",
+    "eslint-plugin-node": "11.0.0",
+    "eslint-plugin-promise": "4.2.1",
+    "eslint-plugin-standard": "4.0.1",
+    "jest": "24.9.0",
+    "jest-environment-puppeteer": "^4.4.0",
+    "jest-puppeteer": "^4.4.0",
+    "prettier": "1.19.1",
+    "prettier-eslint": "9.0.1",
+    "puppeteer": "^2.0.0",
     "rewire": "4.0.1"
   }
 }

README.md

 # Next.js + Transpile `node_modules`
 
-Transpile untranspiled modules from `node_modules`.
+[![Build Status](https://img.shields.io/circleci/project/github/martpie/next-transpile-modules.svg)](https://circleci.com/gh/martpie/next-transpile-modules)
+![Dependencies](https://img.shields.io/david/martpie/next-transpile-modules)
+
+Transpile untranspiled modules from `node_modules` using the Next.js Babel configuration.
 Makes it easy to have local libraries and keep a slick, manageable dev experience.
 
+## What problem does it solve?
+
+This plugin aims to solve the following challenges:
+
+- code transpilation from local packages (think: a monorepo with a `styleguide` package)
+- code transpilation from NPM modules using ES6 imports (e.g `lodash-es`)
+
+What this plugin **does not aim** to solve:
+
+- any-package IE11-compatible maker
+
 ## Compatibility table
 
 | Next.js version | Plugin version |
-|-----------------|----------------|
-| Next.js 8       | 2.x            |
+| --------------- | -------------- |
+| Next.js 9.2     | 3.x            |
+| Next.js 8 / 9   | 2.x            |
 | Next.js 6 / 7   | 1.x            |
@@ -27,11 +42,9 @@
 
-Classic:
+### Classic:
 
 ```js
 // next.config.js
-const withTM = require('next-transpile-modules');
+const withTM = require('next-transpile-modules')(['somemodule', 'and-another']); // pass the modules you would like to see transpiled
 
-module.exports = withTM({
-  transpileModules: ['somemodule', 'and-another']
-});
+module.exports = withTM();
 ```
@@ -41,29 +54,25 @@
 
-Example with `next-typescript`:
+### Scoped packages
 
+You can include scoped packages or nested ones:
+
 ```js
-const withTypescript = require('@zeit/next-typescript');
-const withTM = require('next-transpile-modules');
+const withTM = require('next-transpile-modules')(['@shared/ui', '@shared/utils']);
 
-module.exports = withTypescript(
-  withTM({
-    transpileModules: ['somemodule', 'and-another']
-  })
-);
+// ...
 ```
 
-With `next-compose-plugins`:
+```js
+const withTM = require('next-transpile-modules')(['styleguide/components']);
 
+// ...
+```
+
+### With `next-compose-plugins`:
+
 ```js
 const withPlugins = require('next-compose-plugins');
+const withTM = require('next-transpile-modules')(['some-module', 'and-another']);
 
-const withTypescript = require('@zeit/next-typescript');
-const withTM = require('next-transpile-modules');
-
-module.exports = withPlugins([
-  [withTM, {
-    transpileModules: ['some-module', 'and-another'],
-  }],
-  withTypescript,
-], {
+module.exports = withPlugins([withTM], {
   // ...
@@ -73,2 +82,68 @@ });
 
+### CSS support
+
+Since `next-transpile-modules@3.0` and `next@>9.2`, this plugin will also transpile CSS included in your transpiled packages:
+
+In your transpiled package:
+
+```js
+// shared-ui/components/Button.js
+import styles from './Button.module.css';
+
+function Button(props) {
+  return (
+    <button type='button' className={styles.error}>
+      {props.children}
+    </button>
+  );
+}
+
+export default Button;
+```
+
+```css
+/* shared-ui/components/Button.module.js */
+.error {
+  color: white;
+  background-color: red;
+}
+```
+
+In your app:
+
+```js
+// next.config.js
+const withTM = require('next-transpile-modules')(['shared-ui']);
+
+// ...
+```
+
+```jsx
+// pages/home.jsx
+import React from 'react';
+import Button from 'shared-ui/components/Button';
+
+const HomePage = () => {
+  return (
+    <main>
+      {/* will output <button class="Button_error__xxxxx"> */}
+      <Button>Styled button</Button>
+    </main>
+  );
+};
+
+export default HomePage;
+```
+
+It also supports global CSS import packages located in `node_modules`:
+
+```jsx
+// pages/_app.js
+import 'shared-ui/styles/global.css'; // will be imported globally
+
+export default function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />;
+}
+```
+
 ## FAQ
@@ -80,2 +155,3 @@
 - it supports TypeScript
+- it supports CSS modules (since Next.js 9.2)
 
@@ -92,2 +168,4 @@ ### I have trouble making it work with Next.js 7
 
+**Since Next.js 9, you probably don't need that file anymore**, as TypeScript is supported natively.
+
 ### I have trouble with transpilation and Yarn workspaces
@@ -116,6 +194,5 @@
 ```js
-const withTM = require('next-transpile-modules');
+const withTM = require('next-transpile-modules')(['@your-project/shared', '@your-project/styleguide']);
 
 module.exports = withTM({
-  transpileModules: ['@your-project/shared', '@your-project/styleguide'],
   webpack: (config, options) => {
@@ -126,8 +203,8 @@ config.resolve.alias = {
       '@your-project/shared': require.resolve('@your-project/shared'),
-      '@your-project/styleguide': require.resolve('@your-project/styleguide'),
+      '@your-project/styleguide': require.resolve('@your-project/styleguide')
       // ...
     };
     return config;
-  },
+  }
 });
 ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

13516

increased by38.03%

Lines of code

116

increased by41.46%

Number of lines in readme file

204

increased by60.63%

Worsened metrics

Dependency count

2

increased byInfinity%

Dev dependency count

17

increased by41.67%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedmicromatch@^4.0.2

• + Addedslash@^3.0.0

• + Addedbraces@3.0.3(transitive)

• + Addedfill-range@7.1.1(transitive)

• + Addedis-number@7.0.0(transitive)

• + Addedmicromatch@4.0.8(transitive)

• + Addedpicomatch@2.3.1(transitive)

• + Addedslash@3.0.0(transitive)

• + Addedto-regex-range@5.0.1(transitive)