🔧 👷 convert webpack configuration files to TS, improve overall TS config (#3797)

* Convert webpack to ts

* developer-extension config convert to ts: format

* 🐛 allow importing ts extension

* fix typescript config

* add performances and e2e config

* 🔧 improve tsconfig.default doc

* 🔧 fix unit tests configuration

* 🚨 adjust eslint config + fix lints

* fix dev server

* import json files

---------

Co-authored-by: zcy <[email protected]>
Co-authored-by: Adrian de la Rosa <[email protected]>

Author: 3 people

.gitignore

@@ -10,6 +10,7 @@ specs.log
 browserstack.err
 package.tgz
 docs/
+*.tsbuildinfo
 
 # https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
 .pnp.*

developer-extension/package.json

@@ -3,8 +3,8 @@
   "version": "6.18.1",
   "private": true,
   "scripts": {
-    "build": "rm -rf dist && webpack --mode production",
-    "dev": "rm -rf dist && webpack --mode development && webpack serve --mode development --config-name=panel --hot"
+    "build": "rm -rf dist && webpack --disable-interpret --mode production",
+    "dev": "rm -rf dist && webpack --disable-interpret --mode development && webpack serve --mode development --config-name=panel --hot"
   },
   "devDependencies": {
     "@pmmmwh/react-refresh-webpack-plugin": "^0.6.0",

developer-extension/tsconfig.json renamed to developer-extension/tsconfig.webpack.json

@@ -9,5 +9,7 @@
     "lib": ["ES2022", "DOM"],
     "types": ["chrome", "react", "react-dom", "jasmine"],
     "skipLibCheck": true
-  }
+  },
+
+  "include": ["src"]
 }

developer-extension/webpack.config.js renamed to developer-extension/webpack.config.ts

@@ -1,11 +1,12 @@
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const { default: WebextensionPlugin } = require('@webextension-toolbox/webpack-webextension-plugin')
-const CopyPlugin = require('copy-webpack-plugin')
-const { HotModuleReplacementPlugin } = require('webpack')
-const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
-const { createDefinePlugin } = require('../webpack.base')
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+import { WebextensionPlugin } from '@webextension-toolbox/webpack-webextension-plugin'
+import CopyPlugin from 'copy-webpack-plugin'
+import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'
+import webpack from 'webpack'
+import { createDefinePlugin } from '../webpack.base.ts'
+import packageJson from './package.json' with { type: 'json' }
 
-module.exports = (_env, argv) => {
+export default (_env: unknown, argv: { mode?: webpack.Configuration['mode'] }) => {
   const isDevelopment = argv.mode === 'development'
 
   return [
@@ -31,16 +32,12 @@ module.exports = (_env, argv) => {
             {
               from: './manifest.json',
               to: 'manifest.json',
-              transform(content) {
+              transform(content: Buffer) {
                 const manifest = JSON.parse(content.toString())
-                const packageJson = require('./package.json')
-
-                // Add required fields
                 manifest.version = packageJson.version
                 manifest.version_name = packageJson.version
 
                 if (isDevelopment) {
-                  // Inject dev CSP
                   manifest.content_security_policy = {
                     extension_pages: "script-src 'self' http://localhost:3001; object-src 'self'",
                   }
@@ -72,11 +69,10 @@ module.exports = (_env, argv) => {
                 errors: true,
                 warnings: false,
               },
-              // Disable webpack hot client injection to avoid CSP issues
               webSocketTransport: 'ws',
             },
             devMiddleware: {
-              writeToDisk: (filePath) => filePath.endsWith('panel.html'),
+              writeToDisk: (filePath: string) => filePath.endsWith('panel.html'),
             },
           }
         : undefined,
@@ -87,8 +83,8 @@ module.exports = (_env, argv) => {
       plugins: [
         new HtmlWebpackPlugin({
           filename: 'panel.html',
-          inject: false, // Disable auto script injection - we handle it manually
-          templateContent: ({ isDevelopment }) => `
+          inject: false,
+          templateContent: () => `
             <!doctype html>
             <html>
             <head>
@@ -109,7 +105,7 @@ module.exports = (_env, argv) => {
           templateParameters: { isDevelopment },
         }),
         createDefinePlugin(),
-        ...(isDevelopment ? [new HotModuleReplacementPlugin(), new ReactRefreshWebpackPlugin()] : []),
+        ...(isDevelopment ? [new webpack.HotModuleReplacementPlugin(), new ReactRefreshWebpackPlugin()] : []),
       ],
     }),
     baseConfig({
@@ -140,29 +136,40 @@ module.exports = (_env, argv) => {
     }),
   ]
 
-  function baseConfig({ name, entry, output, plugins, devServer }) {
+  function baseConfig({
+    name,
+    entry,
+    output,
+    plugins,
+    devServer,
+  }: {
+    name: string
+    entry: string
+    output?: webpack.Configuration['output']
+    plugins?: webpack.Configuration['plugins']
+    devServer?: any
+  }): webpack.Configuration & { devServer?: any } {
     return {
       name,
       entry,
       output,
-      // Use source-map instead of eval-based devtools for CSP compatibility
       devtool: isDevelopment ? 'source-map' : false,
       devServer,
-
       module: {
         rules: [
           {
             test: /\.tsx?$/,
             loader: 'ts-loader',
             exclude: /node_modules/,
             options: {
+              configFile: 'tsconfig.webpack.json',
               onlyCompileBundledFiles: true,
               ...(isDevelopment && {
                 getCustomTransformers: () => ({
-                  before: [require('react-refresh-typescript').default()],
+                  before: [new ReactRefreshWebpackPlugin()],
                 }),
-                transpileOnly: true,
               }),
+              transpileOnly: true,
             },
           },
           {
@@ -183,18 +190,16 @@ module.exports = (_env, argv) => {
           },
         ],
       },
-
       resolve: {
         extensions: ['.ts', '.tsx', '.js'],
       },
-
       plugins,
     }
   }
 }
 
 function getVersion() {
-  const version = require('./package.json').version
+  const version: string = packageJson.version
 
   return {
     version: version.replace(/-(alpha|beta)/, ''),

eslint.config.mjs

@@ -45,12 +45,13 @@ export default tseslint.config(
     languageOptions: {
       parserOptions: {
         project: [
-          './tsconfig.json',
-          './test/apps/**/tsconfig.json',
+          './tsconfig.default.json',
+          './tsconfig.scripts.json',
+          './developer-extension/tsconfig.webpack.json',
           './test/e2e/tsconfig.json',
-          './scripts/tsconfig.json',
-          './developer-extension/tsconfig.json',
           './performances/tsconfig.json',
+
+          './test/apps/**/tsconfig.json',
         ],
         sourceType: 'module',
 
@@ -404,7 +405,6 @@ export default tseslint.config(
   {
     // Files executed by nodejs
     files: [
-      '**/webpack.*.js',
       'scripts/**',
       'test/**/*.js',
       'eslint-local-rules/**/*.js',
@@ -419,6 +419,14 @@ export default tseslint.config(
     },
   },
 
+  {
+    files: ['**/webpack.*.ts'],
+    rules: {
+      // Webpack configuration files are expected to use a default export.
+      'import/no-default-export': 'off',
+    },
+  },
+
   {
     files: ['test/e2e/**/*.ts'],
     rules: {

package.json

@@ -16,7 +16,7 @@
     "build:docs:html": "typedoc --out ./docs",
     "format": "prettier --check .",
     "lint": "scripts/cli lint .",
-    "typecheck": "scripts/cli typecheck . && scripts/cli typecheck developer-extension && scripts/cli typecheck scripts",
+    "typecheck": "tsc -b --noEmit true",
     "dev": "node scripts/dev-server.ts",
     "release": "scripts/cli release",
     "version": "scripts/cli version",

packages/flagging/package.json

@@ -9,7 +9,7 @@
   "scripts": {
     "pack": "yarn pack",
     "build": "run-p build:cjs build:esm build:bundle",
-    "build:bundle": "rm -rf bundle && SDK_SETUP=cdn webpack --mode=production",
+    "build:bundle": "rm -rf bundle && SDK_SETUP=cdn webpack --disable-interpret --mode=production",
     "build:cjs": "rm -rf cjs && tsc -p tsconfig.cjs.json && yarn replace-build-env cjs",
     "build:esm": "rm -rf esm && tsc -p tsconfig.esm.json && yarn replace-build-env esm",
     "replace-build-env": "node ../../scripts/build/replace-build-env.ts"

packages/flagging/webpack.config.js

@@ -0,0 +1,10 @@
+import path from 'path'
+import type webpack from 'webpack'
+import webpackBase from '../../webpack.base.ts'
+
+export default (_env: unknown, argv: { mode?: webpack.Configuration['mode'] }) =>
+  webpackBase({
+    mode: argv.mode,
+    entry: path.resolve(import.meta.dirname, 'src/entries/main.ts'),
+    filename: 'datadog-flagging.js',
+  })

packages/flagging/webpack.config.ts

@@ -8,7 +8,7 @@
   "scripts": {
     "pack": "yarn pack",
     "build": "run-p build:cjs build:esm build:bundle",
-    "build:bundle": "rm -rf bundle && SDK_SETUP=cdn webpack --mode=production",
+    "build:bundle": "rm -rf bundle && SDK_SETUP=cdn webpack --disable-interpret  --mode=production",
     "build:cjs": "rm -rf cjs && tsc -p tsconfig.cjs.json && yarn replace-build-env cjs",
     "build:esm": "rm -rf esm && tsc -p tsconfig.esm.json && yarn replace-build-env esm",
     "replace-build-env": "node ../../scripts/build/replace-build-env.ts"