Merge pull request #695 from adithyaakrishna/feat/update-webpack

Updated Webpack Config Files & Add Citation File

.github/workflows/CI.yml

@@ -17,14 +17,9 @@ jobs:
         with:
           node-version: 20
 
-      - name: Install Dependencies
+      # As our package has a postInstall script, which in turn calls `npm run build`, hence we do not need a explicit job for that
+      - name: Install Dependencies & Build 3dmol.js
         run: npm install 
-
-      - name: Build 3Dmol.js
-        run: |
-          npm run build:dev
-          npm run build:prod
-          npm run generate:tests
 
       - name: Test    
         run: npm test

.github/workflows/CodeQL-Analysis.yml

@@ -39,9 +39,11 @@ jobs:
         path: node_modules
         key: ${{ runner.os }}-node-${{ hashFiles('package-lock.json') }}
 
+    # For CodeQL, we don't need to generate tests or doc, hence running only install
     - name: Install Dependencies
-      run: npm install
-
+      run: npm install --ignore-scripts
+
+    # Build for dev and prod
     - name: Build 3dmol.js
       run: |
         npm run build:dev

CITATION.cff

@@ -0,0 +1,29 @@
+cff-version: 1.2.0
+title: '3Dmol.js: molecular visualization with WebGL'
+message: If you use 3Dmol.js, please cite our Bioinformatics paper
+type: software
+authors:
+  - given-names: David
+    family-names: Koes
+    email: [email protected]
+    affiliation: University of Pittsburgh
+    orcid: 'https://orcid.org/0000-0002-6892-6614'
+  - given-names: Nicholas
+    family-names: Rego
+    affiliation: University of Pittsburgh
+    orcid: 'https://orcid.org/0000-0002-3164-6803'
+identifiers:
+  - type: doi
+    value: 10.1093/bioinformatics/btu829
+repository-code: 'https://github.com/3dmol/3Dmol.js'
+url: 'https://3dmol.org/'
+abstract: >-
+  3Dmol.js is a modern, object-oriented JavaScript library
+  that uses the latest web technologies to provide
+  interactive, hardware-accelerated three-dimensional
+  representations of molecular data without the need to
+  install browser plugins or Java. 3Dmol.js provides a full
+  featured API for developers as well as a straightforward
+  declarative interface that lets users easily share and
+  embed molecular data in websites.
+license: BSD-3-Clause

webpack.common.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-undef*/
 const path = require("path");
 const webpack = require("webpack");
 const pkg = require("./package.json");
@@ -8,41 +7,48 @@ const banner = `${pkg.name} v${pkg.version}
 ${pkg.description}
 Author: ${pkg.author}`;
 
-module.exports =  {
+module.exports = {
   target: "web",
-  entry: {'3Dmol':["./src/index.ts", 
-        "./src/SurfaceWorker.js",        
-        "./src/exporter.js"
-        ],
-      '3Dmol.ui': [ "./src/ui/ui.js",
+  entry: {
+    '3Dmol': [
+      "./src/index.ts",
+      "./src/SurfaceWorker.js",
+      "./src/exporter.js"
+    ],
+    '3Dmol.ui': [
+      "./src/ui/ui.js",
       "./src/ui/state.js",
       "./src/ui/icon.js",
-      "./src/ui/form.js",        
-      "./src/ui/defaultValues.js"]},
+      "./src/ui/form.js",
+      "./src/ui/defaultValues.js"
+    ]
+  },
   output: {
     path: path.resolve(__dirname, "build"),
-    globalObject: "this",
+    filename: "[name].js",
     library: '[name]',
     libraryTarget: "umd",
+    globalObject: "this"
   },
-
   resolve: {
     extensions: [".ts", ".tsx", ".js", ".json"],
   },
-
   module: {
     rules: [
-      { test: /\.tsx?$/, loader: "ts-loader"},
-      { test: /\.frag/, loader: "raw-loader" },
-      { test: /\.vert/, loader: "raw-loader" }
+      { test: /\.tsx?$/, loader: "ts-loader" },
+      { test: /\.frag$/, loader: "raw-loader" },
+      { test: /\.vert$/, loader: "raw-loader" }
     ],
   },
-
   plugins: [
     new webpack.ProvidePlugin({
-        MMTF: path.resolve(__dirname, "./src/vendor/mmtf.js"),
-        $: "jquery"
+      MMTF: path.resolve(__dirname, "./src/vendor/mmtf.js"),
+      $: "jquery"
     }),
-    new webpack.BannerPlugin({ banner }), 
-    new ESLintPlugin()],
+    new webpack.BannerPlugin({ banner }),
+    new ESLintPlugin()
+  ],
+  stats: {
+    errorDetails: true,
+  }
 };

webpack.dev.js

@@ -1,12 +1,10 @@
-/* eslint-disable no-undef*/
-
 const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');
 
 module.exports = merge(common, {
-mode: 'development',
-devtool: 'inline-source-map',
+  mode: 'development',
+  devtool: 'inline-source-map',
   output: {
-    filename: `[name].js`,
-  }  
+    filename: '[name].js',
+  },
 });

webpack.prod.js

@@ -1,28 +1,25 @@
-/* eslint-disable no-undef*/
-
 const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');
 const TerserPlugin = require('terser-webpack-plugin');
 
 module.exports = merge(common, {
-  mode: 'production',
+  mode: "production",
   optimization: {
-    usedExports: false, //essential for pulling in $3Dmol namespace
+    usedExports: false,
     minimizer: [
       new TerserPlugin({
         parallel: true,
         terserOptions: {
           keep_classnames: true,
           compress: true,
-          mangle:
-          {
+          mangle: {
             reserved: ["MarchingCube"],
-          }
+          },
         },
       }),
     ],
   },
   output: {
     filename: `[name]-min.js`,
-  }
+  },
 });