Use ESBuild for frontend build.

Replacing webpack by ESBuild for client code compilation (as in the
official quickstart plugin).

So we can remove deprecated webpack dependencies.

Note: webpack is still used for ConverseJS build.
This may be removed soon.

Related to issue #122.

CHANGELOG.md

@@ -15,6 +15,7 @@ If you haven't upgraded to v6.0.0 yet, please read v6.0.0 changelog first.
 ### Minor changes and fixes
 
 * Update @types/peertube to v4.2.2 (requiring Peertube v4.2.0).
+* Using ESBuild for front-end packing, instead of webpack. Note: for now webpack is still used for ConverseJS.
 
 ## 6.0.0
 

CONTRIBUTING.md

@@ -81,3 +81,11 @@ You can build the plugin with extra debug features simply by using:
 ```bash
 NODE_ENV=dev npm run build
 ```
+
+### ESBuild vs Typescript
+
+This plugin uses ESBuild for frontend code generation, as the official `peertube-plugin-quickstart` plugin.
+ESBuild can handle Typescript, but does not check types
+(see [ESBuild documentation](https://esbuild.github.io/content-types/#typescript)).
+That's why we first comple typescript with the `-noEmit` option, just to check types (`check:client:ts` in package.json file).
+Then, if everything is okay, we run ESBuild to generate the compiled javascript.

build-client.js

@@ -0,0 +1,54 @@
+const path = require('path')
+const esbuild = require('esbuild')
+
+const packagejson = require('./package.json')
+const sourcemap = process.env.NODE_ENV === 'dev' ?  'inline' : false
+
+const clientFiles = [
+  // Client files list, without the file extension:
+  'common-client-plugin',
+  'videowatch-client-plugin',
+  'admin-plugin-client-plugin'
+]
+
+const configs = clientFiles.map(f => ({
+  entryPoints: [ path.resolve(__dirname, 'client', f + '.ts') ],
+  alias: {
+    'shared': path.resolve(__dirname, 'shared/')
+  },
+  define: {
+    PLUGIN_CHAT_PACKAGE_NAME: JSON.stringify(packagejson.name),
+    PLUGIN_CHAT_SHORT_NAME: JSON.stringify(packagejson.name.replace(/^peertube-plugin-/, ''))
+  },
+  bundle: true,
+  minify: true,
+  // FIXME: sourcemap:`true` does not work for now, because peertube does not serve static files.
+  // See https://github.com/Chocobozzz/PeerTube/issues/5185
+  sourcemap,
+  format: 'esm',
+  target: 'safari11',
+  outfile: path.resolve(__dirname, 'dist/client', f + '.js'),
+}))
+
+configs.push({
+  entryPoints: ["./conversejs/builtin.ts"],
+  bundle: true,
+  minify: true,
+  sourcemap,
+  target: 'safari11',
+  outfile: path.resolve(__dirname, 'dist/client/static', 'builtin.js'),
+})
+
+configs.push({
+  entryPoints: ["./client/settings.ts"],
+  bundle: true,
+  minify: true,
+  sourcemap,
+  target: 'safari11',
+  outfile: path.resolve(__dirname, 'dist/client/settings', 'settings.js'),
+})
+
+const promises = configs.map(c => esbuild.build(c))
+
+Promise.all(promises)
+  .catch(() => process.exit(1))

client/settings.ts

@@ -205,3 +205,5 @@ function launchTests (): void {
 }
 
 launchTests()
+
+export {}

client/tsconfig.json

@@ -13,6 +13,9 @@
 		"noImplicitReturns": true,
 		"strictBindCallApply": true, // should already be true because of strict:true
 		"noUnusedLocals": true,
+		"allowSyntheticDefaultImports": true, // Seems necessary for peertube types to work
+		"isolatedModules": true, // Needed by esbuild https://esbuild.github.io/content-types/#isolated-modules
+		"esModuleInterop": true, // Needed by esbuild https://esbuild.github.io/content-types/#es-module-interop
     "outDir": "../dist/client",
 		"paths": {
 			"shared/*": ["../shared/*"]

client/videowatch/button.ts

@@ -50,7 +50,9 @@ function displayButton ({
   buttonContainer.append(button)
 }
 
+export type {
+  displayButtonOptions
+}
 export {
-  displayButtonOptions,
   displayButton
 }

client/videowatch/buttons.ts

@@ -103,6 +103,8 @@ export {
   closeSVG,
   openChatSVG,
   openBlankChatSVG,
-  shareChatUrlSVG,
+  shareChatUrlSVG
+}
+export type {
   SVGButton
 }

client/videowatch/uri.ts

@@ -66,8 +66,10 @@ function getIframeUri (
   return iframeUriStr
 }
 
+export type {
+  UriOptions
+}
 export {
-  UriOptions,
   getBaseRoute,
   getIframeUri
 }

package.json

@@ -41,7 +41,6 @@
   },
   "devDependencies": {
     "@peertube/peertube-types": "^4.2.2",
-    "@purtuga/esm-webpack-plugin": "^1.5.0",
     "@tsconfig/node12": "^1.0.9",
     "@types/async": "^3.2.9",
     "@types/express": "^4.17.13",
@@ -51,6 +50,7 @@
     "@types/winston": "^2.4.4",
     "@typescript-eslint/eslint-plugin": "^4.29.0",
     "@typescript-eslint/parser": "^4.29.0",
+    "esbuild": "^0.16.1",
     "eslint": "^7.32.0",
     "eslint-config-standard": "^16.0.3",
     "eslint-config-standard-with-typescript": "^20.0.0",
@@ -65,13 +65,10 @@
     "stylelint-config-recommended-scss": "^5.0.1",
     "stylelint-config-standard-scss": "^2.0.1",
     "svgo": "^2.8.0",
-    "ts-loader": "^8.3.0",
-    "typescript": "^4.3.5",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.12"
+    "typescript": "^4.3.5"
   },
   "engine": {
-    "peertube": ">=4.3.0"
+    "peertube": ">=4.2.0"
   },
   "engines": {
     "npm": ">=7"
@@ -91,12 +88,13 @@
     "build:prosody": "bash build-prosody.sh",
     "build:images": "mkdir -p dist/client/images && npx svgo -f public/images/ -o dist/client/images/",
     "build:avatars": "mkdir -p dist/server/avatars && ./build-avatars.js",
-    "build:webpack": "webpack --mode=production",
+    "check:client:tsc": "npx tsc --p client/ --noEmit --skipLibCheck",
+    "build:client": "node ./build-client.js --mode=production",
     "build:server": "npx tsc --build server/tsconfig.json",
     "build:serverconverse": "mkdir -p dist/server/conversejs && cp conversejs/index.html dist/server/conversejs/",
     "build:prosodymodules": "mkdir -p dist/server/prosody-modules && cp -r prosody-modules/* dist/server/prosody-modules/",
     "build:styles": "sass assets:dist/assets",
-    "build": "npm-run-all -s clean:light -p build:converse build:prosody build:images build:avatars build:webpack build:server build:serverconverse build:prosodymodules build:styles",
+    "build": "npm-run-all -s clean:light check:client:tsc -p build:converse build:prosody build:images build:avatars build:client build:server build:serverconverse build:prosodymodules build:styles",
     "lint": "npm-run-all -s lint:script lint:styles",
     "lint:script": "npx eslint --ext .js --ext .ts .",
     "lint:styles": "stylelint 'conversejs/**/*.scss' 'assets/**/*.css'",

server/lib/routers/settings.ts

@@ -15,7 +15,11 @@ async function initSettingsRouter (options: RegisterServerOptions): Promise<Rout
       const src = getBaseStaticRoute(options) + 'settings/settings.js'
       res.status(200)
       res.type('html')
-      res.send('<html><body><div>Loading...</div></body><script src="' + src + '"></script></html>')
+      res.send(`<html>
+        <body><div>Loading...</div></body>
+        <script type="module" src="${src}"></script>
+        </html>
+      `)
     }
   ))
 

shared/lib/autocolors.ts

@@ -43,8 +43,10 @@ function areAutoColorsValid (autocolors: AutoColors): true | string[] {
   return true
 }
 
+export type {
+  AutoColors
+}
 export {
-  AutoColors,
   isAutoColorsAvailable,
   areAutoColorsValid
 }

shared/lib/types.ts

@@ -26,7 +26,7 @@ interface ProsodyListRoomsResultSuccess {
 
 type ProsodyListRoomsResult = ProsodyListRoomsResultError | ProsodyListRoomsResultSuccess
 
-export {
+export type {
   ConverseJSTheme,
   ProsodyListRoomsResult,
   ProsodyListRoomsResultRoom

webpack.config.js

@@ -1,83 +0,0 @@
-const path = require('path')
-const webpack = require('webpack')
-
-const EsmWebpackPlugin = require('@purtuga/esm-webpack-plugin')
-
-const packagejson = require('./package.json')
-
-const clientFiles = [
-  'common-client-plugin',
-  'videowatch-client-plugin',
-  'admin-plugin-client-plugin'
-]
-
-let config = clientFiles.map(f => ({
-  entry: "./client/" + f + ".ts",
-  devtool: process.env.NODE_ENV === 'dev' ? 'eval-source-map' : false,
-  module: {
-    rules: [
-      {
-        test: /\.tsx?$/,
-        use: 'ts-loader'
-      }
-    ]
-  },
-  resolve: {
-    alias: {
-      'shared': path.resolve(__dirname, 'shared/')
-    },
-    extensions: [ '.tsx', '.ts', '.js' ],
-  },
-  output: {
-    path: path.resolve(__dirname, "./dist/client"),
-    filename: "./" + f + ".js",
-    library: "script",
-    libraryTarget: "var"
-  },
-  plugins: [
-    new webpack.DefinePlugin({
-      PLUGIN_CHAT_PACKAGE_NAME: JSON.stringify(packagejson.name),
-      PLUGIN_CHAT_SHORT_NAME: JSON.stringify(packagejson.name.replace(/^peertube-plugin-/, ''))
-    }),
-    new EsmWebpackPlugin()
-  ]
-}))
-
-config.push({
-  entry: "./conversejs/builtin.ts",
-  devtool: process.env.NODE_ENV === 'dev' ? 'eval-source-map' : false,
-  module: {
-    rules: [
-      {
-        test: /\.tsx?$/,
-        use: 'ts-loader'
-      }
-    ]
-  },
-  output: {
-    path: path.resolve(__dirname, "./dist/client/static"),
-    filename: "./builtin.js"
-  }
-})
-
-config.push({
-  entry: "./client/settings.ts",
-  devtool: process.env.NODE_ENV === 'dev' ? 'eval-source-map' : false,
-  module: {
-    rules: [
-      {
-        test: /\.tsx?$/,
-        use: 'ts-loader'
-      }
-    ]
-  },
-  resolve: {
-    extensions: [ '.tsx', '.ts', '.js' ],
-  },
-  output: {
-    path: path.resolve(__dirname, "./dist/client/settings"),
-    filename: "./settings.js"
-  }
-})
-
-module.exports = config