B 22727

.eslintrc

@@ -20,7 +20,10 @@
       "version": "detect"
     },
     "import/resolver": {
-      "webpack": "webpack.config.js"
+      "webpack": "webpack.config.js",
+      "node": {
+        "extensions": [".js", ".jsx"]
+      }
     }
   },
   "extends": [

.github/workflows/webpack.yml

@@ -0,0 +1,31 @@
+name: NodeJS with Webpack
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+
+    - name: Build
+      run: |
+        if [ "${{ matrix.node-version }}" == "20.x" ]; then
+          export NODE_OPTIONS=--openssl-legacy-provider
+        fi
+        npm install
+        npx webpack

.node-version

@@ -1 +1 @@
-16.15.0
+18.20.2

.tool-versions

@@ -0,0 +1 @@
+nodejs 20.17.0

README.md

@@ -1,3 +1,18 @@
+# Table of contents
+- [Table of contents](#table-of-contents)
+- [react-file-viewer](#react-file-viewer)
+  - [Supported file formats:](#supported-file-formats)
+  - [Usage](#usage)
+  - [Development](#development)
+    - [To start demo app](#to-start-demo-app)
+    - [Testing](#testing)
+    - [To run the linter](#to-run-the-linter)
+    - [Extending the file viewer](#extending-the-file-viewer)
+    - [Viewing local changes in a secondary repo](#viewing-local-changes-in-a-secondary-repo)
+    - [Testing locally against the mymove application](#testing-locally-against-the-mymove-application)
+  - [Roadmap](#roadmap)
+
+
 # react-file-viewer
 
 Extendable file viewer for web
@@ -72,11 +87,11 @@ purposes. It is by default served via webpack-dev-server.
 
 ### To start demo app
 
-`yarn start` will start the demo app served by webpack-dev-server
+`yarn serve:dev` will start the webpack analyzer and serve `app.js` for debugging and playwright.
 
 ### Testing
 
-Tests use Jest and Enzyme.
+Tests use Jest, Enzyme, and Playwright.
 
 Run tests with:
 
@@ -95,6 +110,13 @@ To do this run:
 yarn jest --updateSnapshot
 ```
 
+```
+yarn test:e2e
+```
+
+This runs the playwright tests for the drivers. As certain drivers now rely on modern web API, playwright must be used to
+simulate a real browser environment as this is still experimental within Jest's JSDOM.
+
 ### To run the linter
 
 `yarn lint`
@@ -131,6 +153,22 @@ If you are working on a feature branch and need to see changes introduced in tha
 
 `"@trussworks/react-file-viewer": "git+https://github.com/trussworks react-file-viewer"`
 
+### Testing locally against the mymove application
+Testing locally against the mymove application can be done via yarn link, but for the purpose of being thorough it is recommended to manually test against the `/dist/` output. This verifies the webpack is successfully compiling/transpiling and that the mymove application is successfully serving chunks.
+
+TODO: ENHANCE ME (This is supposed to work, but it doesn't. Fallback is still `rm -rf node_modules && yarn install && ./scripts/copy-react-file-viewer && make client_run`)
+1. [OPTIONAL] Within this repository, navigate to `webpack.config.js`. This is the production webpack.
+   1. Find where `  plugins: [new BundleAnalyzerPlugin({ analyzerMode: 'disabled' })]` is located and remove/enable the analyzerMode attribute
+   2. This makes it so you can preview the chunks
+2. Within this repository, run `yarn build`, it should output new files to `/dist/`
+3. Within the [MyMove repository](https://github.com/transcom/mymove) update `package.json` and set `"@transcom/react-file-viewer"` to point to the local location of this repository: Such as `"file:../react-file-viewer"`
+4. Within MyMove, run `yarn upgrade @transcom/react-file-viewer`
+5. Within MyMove, run `./scripts/copy-react-file-viewer`
+
+You should now successfully be testing the webpack build of react-file-viewer against MyMove. Each time you adjust react-file-viewer, repeat steps 2, 4, and 5 to reflect within MyMove.
+
+The benefit of working this way over yarn link is that we can properly simulate MyMove serving the chunks from its `./scripts/copy-react-file-viewer`.
+
 ## Roadmap
 
 - [ ] Remove ignored linting rules and fix them

babel.config.js

@@ -4,7 +4,12 @@ module.exports = {
     '@babel/preset-react',
   ],
   plugins: [
+    '@babel/plugin-transform-runtime',
+    '@babel/plugin-proposal-class-properties',
+    '@babel/plugin-proposal-private-methods',
     '@babel/plugin-proposal-export-default-from',
+    '@babel/plugin-syntax-import-meta',
+    '@babel/plugin-transform-class-static-block',
     '@babel/plugin-transform-modules-commonjs',
   ],
 }

dist/840.index.js.LICENSE.txt

@@ -0,0 +1,21 @@
+/**
+ * @licstart The following is the entire license notice for the
+ * JavaScript code in this page
+ *
+ * Copyright 2024 Mozilla Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * @licend The above is the entire license notice for the
+ * JavaScript code in this page
+ */

dist/index.html

@@ -0,0 +1,18 @@
+Html Webpack Plugin:
+<pre>
+  Error: The loader "/Users/cameron.jewell_cn/Projects/react-file-viewer/node_modules/html-webpack-plugin/lib/loader.js!/Users/cameron.jewell_cn/Projects/react-file-viewer/node_modules/html-webpack-plugin/default_index.ejs" didn't return html.
+
+  - index.js:323 HtmlWebpackPlugin.evaluateCompilationResult
+    [react-file-viewer]/[html-webpack-plugin]/index.js:323:24
+
+  - index.js:230 
+    [react-file-viewer]/[html-webpack-plugin]/index.js:230:22
+
+  - task_queues:95 process.processTicksAndRejections
+    node:internal/process/task_queues:95:5
+
+  - async Promise.all
+
+  - async Promise.all
+
+</pre>

dist/index.js.LICENSE.txt

@@ -1,5 +1,5 @@
 /**
  * @license
- * Copyright 2010-2022 Three.js Authors
+ * Copyright 2010-2024 Three.js Authors
  * SPDX-License-Identifier: MIT
  */

dist/pdfjs-dist-webpack.chunk.js.LICENSE.txt

@@ -0,0 +1,21 @@
+/**
+ * @licstart The following is the entire license notice for the
+ * JavaScript code in this page
+ *
+ * Copyright 2024 Mozilla Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * @licend The above is the entire license notice for the
+ * JavaScript code in this page
+ */

index.html

@@ -7,6 +7,11 @@
   <meta charset="utf-8">
 </head>
 <body style="height: 100%">
+  <!-- 
+    I do not understand why this script fixes things, but it does and so here we are
+    Don't delete this script tag or things will break - see https://stackoverflow.com/a/46887516
+   -->
+  <script>var exports = {};</script>
   <div id="app" style="height: 100%"></div>
 </body>
 </html>