Merge pull request #51 from andriivitiv/76303-upgrade-react-pdf-and-migrate-to-ESM

Upgrade `react-pdf` and migrate to ESM

Author: roryabraham

.eslintrc.json

@@ -64,6 +64,12 @@
             "parserOptions": {
                 "project": "./tsconfig.json"
             }
+        },
+        {
+            "files": ["*"],
+            "rules": {
+                "import/extensions": ["error", "ignorePackages"]
+            }
         }
     ],
     "settings": {

.prettierrc.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
     tabWidth: 4,
     singleQuote: true,
     trailingComma: 'all',

example/.eslintrc.js example/.eslintrc.mjsexample/.eslintrc.js renamed to example/.eslintrc.mjs

@@ -1,4 +1,10 @@
-module.exports = {
+import path from 'path';
+import {fileURLToPath} from 'url';
+
+const filename = fileURLToPath(import.meta.url);
+const dirname = path.dirname(filename);
+
+export default {
     root: true,
     env: {
         browser: true,
@@ -9,7 +15,7 @@ module.exports = {
     parserOptions: {
         ecmaVersion: 'latest',
         sourceType: 'module',
-        tsconfigRootDir: __dirname,
+        tsconfigRootDir: dirname,
     },
     extends: ['eslint:recommended', 'airbnb', 'plugin:@typescript-eslint/recommended', 'plugin:react/jsx-runtime', 'plugin:jsx-a11y/recommended', 'plugin:react/recommended', 'prettier'],
     plugins: ['@typescript-eslint', 'react', 'jsx-a11y'],
@@ -65,6 +71,12 @@ module.exports = {
                 project: './tsconfig.json',
             },
         },
+        {
+            files: ['*'],
+            rules: {
+                'import/extensions': ['error', 'ignorePackages'],
+            },
+        },
     ],
     settings: {
         react: {

example/package-lock.json

@@ -3,6 +3,7 @@
     "version": "1.0.0",
     "description": "react-fast-pdf",
     "main": "./src/index.js",
+    "type": "module",
     "files": [
         "dist",
         "src"
@@ -61,7 +62,7 @@
         "style-loader": "^3.3.3",
         "ts-loader": "^9.4.4",
         "typescript": "^5.1.6",
-        "webpack": "^5.88.2",
+        "webpack": "^5.104.1",
         "webpack-cli": "^5.1.4",
         "webpack-dev-server": "^4.15.1"
     }

example/package.json

@@ -5,9 +5,12 @@ import './index.css';
 function App() {
     const [file, setFile] = useState<string | null>(null);
 
+    // `.default` is required when referencing the legacy CJS package.
+    const packageName = ('default' in ReactFastPDF ? (ReactFastPDF.default as {PackageName: string}) : ReactFastPDF).PackageName;
+
     return (
         <main className="container">
-            <h1 className="title">Hello, I am {ReactFastPDF.PackageName}!</h1>
+            <h1 className="title">Hello, I am {packageName}!</h1>
 
             {file ? (
                 <>

example/src/App.tsx

@@ -0,0 +1 @@
+declare module 'pdfjs-dist/build/pdf.worker.min.mjs';

example/src/pdf.worker.d.ts

@@ -3,7 +3,7 @@
     "compilerOptions": {
         "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
         "jsx": "react" /* Specify what JSX code is generated. */,
-        "module": "commonjs" /* Specify what module code is generated. */,
+        "module": "nodenext" /* Specify what module code is generated. */,
         "rootDir": "./src" /* Specify the root folder within your source files. */,
         "declaration": true /* Generate .d.ts files from TypeScript and JavaScript files in your project. */,
         "declarationMap": true /* Create sourcemaps for d.ts files. */,

example/tsconfig.json

@@ -1,20 +1,26 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
+import path from 'path';
+import {fileURLToPath} from 'url';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import CopyWebpackPlugin from 'copy-webpack-plugin';
 
-const cMapsDir = path.join(path.dirname(require.resolve('pdfjs-dist/package.json')), 'cmaps');
+const filename = fileURLToPath(import.meta.url);
+const dirname = path.dirname(filename);
 
-module.exports = {
-    entry: path.join(__dirname, 'src', 'index.js'),
+const pdfjsPkgUrl = import.meta.resolve('pdfjs-dist/package.json');
+const pdfjsPkgPath = fileURLToPath(pdfjsPkgUrl);
+
+const cMapsDir = path.join(path.dirname(pdfjsPkgPath), 'cmaps');
+
+export default {
+    entry: path.join(dirname, 'src', 'index.js'),
     output: {
-        path: path.resolve(__dirname, 'dist'),
+        path: path.resolve(dirname, 'dist'),
         filename: 'bundle.js',
     },
     resolve: {
-        modules: [path.join(__dirname, 'src'), 'node_modules'],
+        modules: [path.join(dirname, 'src'), 'node_modules'],
         alias: {
-            react: path.join(__dirname, 'node_modules', 'react'),
+            react: path.join(dirname, 'node_modules', 'react'),
         },
         extensions: ['.tsx', '.ts', '.js'],
     },
@@ -53,7 +59,7 @@ module.exports = {
     },
     plugins: [
         new HtmlWebpackPlugin({
-            template: path.join(__dirname, 'public', 'index.html'),
+            template: path.join(dirname, 'public', 'index.html'),
         }),
         new CopyWebpackPlugin({
             patterns: [