frontend: Move to vite for build, runtime, tests

redpanda-data · malinskibeniamin · Nov 27, 2023 · Nov 27, 2023 · Nov 27, 2023 · Nov 27, 2023
commit 3ef54866f163d742c48bda3b12386a74e0819d76
diff --git a/frontend/.swcrc b/frontend/.swcrc
@@ -0,0 +1,22 @@
+{
+    "jsc": {
+      "target": "es2020",
+      "parser": {
+        "syntax": "typescript",
+        "decorators": true,
+        "dynamicImport": true
+      },
+      "transform": {
+        "decoratorMetadata": true, // required to keep mobx decorator syntax working
+        "legacyDecorator": true
+      },
+      "keepClassNames": true,
+      "externalHelpers": true,
+      "loose": false
+    },
+    "module": {
+      "type": "es6"
+    },
+    "exclude": ["./src/**/.*.spec.ts$", "./**/.*.js$"],
+    "sourceMaps": true
+}
diff --git a/frontend/config/jest/fileMock.js b/frontend/config/jest/fileMock.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright 2023 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+module.exports = 'test-file-stub';
diff --git a/frontend/config/jest/fileTransformer.js b/frontend/config/jest/fileTransformer.js
@@ -0,0 +1,49 @@
+/**
+ * Copyright 2023 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+const path = require('path');
+const camelcase = require('camelcase');
+
+// This is a custom Jest transformer turning file imports into filenames.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process(src, filename) {
+    const assetFilename = JSON.stringify(path.basename(filename));
+
+    if (filename.match(/\.svg$/)) {
+      // Based on how SVGR generates a component name:
+      // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
+      const pascalCaseFilename = camelcase(path.parse(filename).name, {
+        pascalCase: true,
+      });
+      const componentName = `Svg${pascalCaseFilename}`;
+      return `const React = require('react');
+      module.exports = {
+        __esModule: true,
+        default: ${assetFilename},
+        ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
+          return {
+            $$typeof: Symbol.for('react.element'),
+            type: 'svg',
+            ref: ref,
+            key: null,
+            props: Object.assign({}, props, {
+              children: ${assetFilename}
+            })
+          };
+        }),
+      };`;
+    }
+
+    return `module.exports = ${assetFilename};`;
+  },
+};
diff --git a/frontend/config/jest/styleMock.js b/frontend/config/jest/styleMock.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright 2023 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+module.exports = {};
diff --git a/frontend/public/index.html → frontend/index.html b/frontend/public/index.html → frontend/index.html
@@ -42,12 +42,13 @@
     </script>
 
     <!-- <link rel="icon" type="image/x-icon" href="./favicon.ico" /> -->
-    <link rel="icon" type="image/png" sizes="384x384" href="./favicon-32.png" />
+    <link rel="icon" type="image/png" sizes="384x384" href="/favicon-32.png" />
 </head>
 
 <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/bootstrap.tsx"></script>
 </body>
 
-</html>
+</html>
diff --git a/frontend/jest.config.js b/frontend/jest.config.js
@@ -0,0 +1,122 @@
+/**
+ * Copyright 2023 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+const esModules = [
+    'es-cookie',
+    'react-markdown',
+    'vfile-message',
+    'markdown-table',
+    'unist-.*',
+    'unified',
+    'bail',
+    'is-plain-obj',
+    'trough',
+    'remark-.*',
+    'rehype-.*',
+    'html-void-elements',
+    'hast-util-.*',
+    'zwitch',
+    'hast-to-hyperscript',
+    'hastscript',
+    'web-namespaces',
+    'mdast-util-.*',
+    'escape-string-regexp',
+    'micromark.*',
+    'decode-named-character-reference',
+    'character-entities',
+    'property-information',
+    'hast-util-whitespace',
+    'space-separated-tokens',
+    'comma-separated-tokens',
+    'pretty-bytes',
+    'ccount',
+    'mdast-util-gfm',
+    'gemoji',
+    /** react-markdown 8.0.3 */
+    'trim-lines',
+    'jest-runtime',
+    'vfile',
+    /** react-markdown 7.2.1 */
+    'longest-streak',
+    /** misc */
+    'emoticon',
+    'ip-regex',
+    'cidr-tools',
+    'cidr-regex',
+    'ip-bigint',
+  ].join('|');
+
+module.exports = {
+    roots: ['<rootDir>/src'],
+    collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!src/**/*.d.ts'],
+    setupFiles: ['react-app-polyfill/jsdom'],
+    setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
+    testMatch: [
+      '<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}',
+      '<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}',
+    ],
+    testEnvironment: 'jsdom',
+    transform: {
+      '^.+\\.tsx?$': '@swc/jest',
+      '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+        '<rootDir>/config/jest/fileTransformer.js',
+    },
+    transformIgnorePatterns: [
+        `[/\\\\]node_modules[/\\\\](?!${esModules}).+\\.(js|jsx|mjs|cjs|ts|tsx)$`,
+    ],
+    modulePaths: ['src'],
+    moduleNameMapper: {
+      '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+        '<rootDir>/config/jest/fileMock.js',
+      '\\.(css|scss|less)$': '<rootDir>/config/jest/styleMock.js',
+      '@fontsource/inter': '<rootDir>/config/jest/styleMock.js',
+      'remark-emoji': '<rootDir>/config/jest/styleMock.js',
+      'remark-gfm': '<rootDir>/config/jest/styleMock.js',
+      'react-markdown': '<rootDir>/node_modules/react-markdown/react-markdown.min.js',
+      'array-move': '<rootDir>/config/jest/fileMock.js',
+    },
+    moduleFileExtensions: [
+      'web.js',
+      'js',
+      'web.ts',
+      'ts',
+      'web.tsx',
+      'tsx',
+      'json',
+      'web.jsx',
+      'jsx',
+      'node',
+    ],
+    watchPlugins: [
+      'jest-watch-typeahead/filename',
+      'jest-watch-typeahead/testname',
+    ],
+    resetMocks: true,
+    coveragePathIgnorePatterns: [
+      '<rootDir>/proto',
+      '<rootDir>/assets/',
+      '<rootDir>/build/',
+      '<rootDir>/public/',
+      '<rootDir>/i18n/',
+      '<rootDir>/test-utils/',
+      '<rootDir>/mocks/',
+    ],
+    coverageReporters: ['text', 'html'],
+    // TODO: Uncomment once there are actual tests, now there are almost none
+    // coverageThreshold: {
+    //   global: {
+    //     branches: 50,
+    //     functions: 65,
+    //     lines: 65,
+    //     statements: 65,
+    //   },
+    // },
+};