[do not merge] experimental alpha -> master

.github/workflows/commitlint.yml

@@ -7,4 +7,14 @@ on:
 
 jobs:
   commitlint:
-    uses: openedx/.github/.github/workflows/commitlint.yml@master
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: remove tsconfig.json # see issue https://github.com/conventional-changelog/commitlint/issues/3256
+        run: |
+          rm tsconfig.json
+      - name: Check commits
+        uses: wagoid/commitlint-github-action@v5

README.rst

@@ -26,7 +26,7 @@ documentation to learn what options are available. Example package.json::
   {
      "scripts": {
         "build": "fedx-scripts webpack",
-        "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
+        "i18n_extract": "fedx-scripts formatjs extract",
         "lint": "fedx-scripts eslint --ext .jsx,.js .",
         "precommit": "npm run lint",
         "snapshot": "fedx-scripts jest --updateSnapshot",
@@ -146,7 +146,7 @@ Notes
 
 .. _this devstack ADR on local packages: https://github.com/openedx/devstack/tree/master/docs/decisions/0005-frontend-package-mounts.rst
 
-Override default .env.development environment variables with .env.private
+Override default ``.env.development`` environment variables with .env.private
 -------------------------------------------------------------------------
 
 In some situations, you may want to override development environment variables defined in .env.development
@@ -168,6 +168,36 @@ In some scenarios, you may want to run a production Webpack build locally. To se
 #. Add an NPM script ``serve`` to your application's ``package.json`` (i.e., ``"serve": "fedx-scripts serve"``).
 #. Run ``npm run serve`` to serve your production build assets. It will attempt to run the build on the same port specified in the ``env.config.js`` file.
 
+Serving a production Webpack build locally
+------------------------------------------
+
+In some scenarios, you may want to run a production Webpack build locally. To serve a production build locally:
+
+#. Create an ``env.config.js`` file containing the configuration for local development, with the exception of ``NODE_ENV='production'``.
+#. Run ``npm run build`` to build the production assets. The output assets will rely on the local development configuration specified in the prior step.
+#. Add an NPM script ``serve`` to your application's ``package.json`` (i.e., ``"serve": "fedx-scripts serve"``).
+#. Run ``npm run serve`` to serve your production build assets. It will attempt to run the build on the same port specified in the ``env.config.js`` file.
+
+Local module configuration for TypeScript
+-----------------------------------------
+
+#. Create file in repository `tsconfig.json`, with a clause `"extends": "@edx/frontend-build"`
+#. Set "rootDir" to the root of the source code folders
+#. Set "include" to wildcard patterns specifying the subdirectories/files under rootDir where source code can be found
+#. Include any wildcards under rootDir that should be excluded using "exclude"
+
+```Sample json
+{
+  "extends": "@edx/frontend-build",
+  "compilerOptions": {
+    "rootDir": ".",
+    "outDir": "dist"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["dist", "node_modules"]
+}
+```
+
 Development
 -----------
 

bin/fedx-scripts.js

@@ -68,6 +68,18 @@ switch (commandName) {
     ensureConfigOption(presets.webpackDevServer);
     require('webpack-dev-server/bin/webpack-dev-server');
     break;
+  case 'formatjs': {
+    const commonArgs = [
+      '--format', 'node_modules/@edx/frontend-build/lib/formatter.js',
+      '--ignore', 'src/**/*.json',
+      '--out-file', './temp/babel-plugin-formatjs/Default.messages.json',
+      '--', 'src/**/*.js*',
+    ];
+    process.argv = process.argv.concat(commonArgs);
+    ensureConfigOption(presets.formatjs);
+    require('@formatjs/cli/bin/formatjs');
+    break;
+  }
   case 'serve':
     require('../lib/scripts/serve');
     break;

config/.eslintrc.js

@@ -2,7 +2,8 @@ const { babel } = require('../lib/presets');
 
 module.exports = {
   extends: '@edx/eslint-config',
-  parser: '@babel/eslint-parser',
+  plugins: ['@typescript-eslint'],
+  parser: '@typescript-eslint/parser',
   parserOptions: {
     requireConfigFile: true,
     babelOptions: {

config/babel-preserve-modules.config.js

@@ -17,11 +17,7 @@ module.exports = {
     i18n: {
       plugins: [
         [
-          'react-intl',
-          {
-            messagesDir: './temp/babel-plugin-react-intl',
-            moduleSourceName: '@edx/frontend-platform/i18n',
-          },
+          'formatjs',
         ],
       ],
     },

config/babel.config.js

@@ -33,11 +33,7 @@ module.exports = {
     i18n: {
       plugins: [
         [
-          'react-intl',
-          {
-            messagesDir: './temp/babel-plugin-react-intl',
-            moduleSourceName: '@edx/frontend-platform/i18n',
-          },
+          'formatjs',
         ],
       ],
     },

config/jest.config.js

@@ -1,5 +1,6 @@
 const path = require('path');
 const fs = require('fs');
+const { jsWithTs: tsjPreset } = require('ts-jest/presets');
 
 const presets = require('../lib/presets');
 
@@ -33,11 +34,12 @@ module.exports = {
     '/node_modules/(?!@edx)',
   ],
   transform: {
-    '^.+\\.[t|j]sx?$': [
+    '^.+\\.jsx?$': [
       'babel-jest',
       {
         configFile: presets.babel.resolvedFilepath,
       },
     ],
+    ...tsjPreset.transform,
   },
 };

config/webpack.common.config.js

@@ -17,7 +17,7 @@ module.exports = {
       // the application being built.
       'env.config': false,
     },
-    extensions: ['.js', '.jsx'],
+    extensions: ['.js', '.jsx', '.ts', '.tsx'],
   },
   ignoreWarnings: [
     // Ignore warnings raised by source-map-loader.

config/webpack.prod.config.js

@@ -70,12 +70,12 @@ module.exports = merge(commonConfig, {
       // The babel-loader transforms newer ES2015+ syntax to older ES5 for older browsers.
       // Babel is configured with the .babelrc file at the root of the project.
       {
-        test: /\.(js|jsx)$/,
+        test: /\.(js|jsx|ts|tsx)$/,
         exclude: /node_modules\/(?!@edx)/,
         use: {
           loader: 'babel-loader',
           options: {
-            configFile: presets.babel.resolvedFilepath,
+            configFile: presets['babel-typescript'].resolvedFilepath,
           },
         },
       },

example/src/App.jsx

@@ -1,4 +1,5 @@
 import config from 'env.config';
+import Image from './Image';
 import appleUrl, { ReactComponent as Apple } from './apple.svg';
 import appleImg from './apple.jpg';
 
@@ -19,6 +20,8 @@ export default function App() {
       </ul>
       <h2>JSX parsing tests</h2>
       <Apple style={{ width: '10rem' }} />
+      <h2>TSX parsing tests</h2>
+      <Image src={appleUrl} alt="appleFromTsx" style={{ width: '10rem' }} />
       <h2>Asset import tests</h2>
       <img src={appleUrl} alt="apple" style={{ width: '10rem' }} />
       <img src={appleUrl} alt="apple" style={{ width: '10rem' }} />

example/src/Image.tsx

@@ -0,0 +1,16 @@
+import React, { CSSProperties } from 'react';
+
+type ImageProps = {
+  src: string;
+  alt?: string;
+  style?: CSSProperties;
+};
+
+const Image = ({ alt, ...rest }:ImageProps) => <img alt={alt} {...rest} />;
+
+const defaultProps = {
+  alt: undefined,
+  style: undefined,
+};
+Image.defaultProps = defaultProps;
+export default Image;

example/src/__snapshots__/App.test.jsx.snap

@@ -39,6 +39,18 @@ exports[`Basic test should render 1`] = `
       }
     }
   />
+  <h2>
+    TSX parsing tests
+  </h2>
+  <img
+    alt="appleFromTsx"
+    src="icon/mock/path"
+    style={
+      Object {
+        "width": "10rem",
+      }
+    }
+  />
   <h2>
     Asset import tests
   </h2>

example/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "outDir": "dist"
+  },
+  "include": [
+    ".eslintrc.js",
+    "env.config.js",
+    "src"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+  ]
+}

lib/formatter.js

@@ -0,0 +1,10 @@
+exports.format = (messages) => {
+  const results = Object.entries(messages).map(([id, message]) => (
+    {
+      id,
+      defaultMessage: message.defaultMessage,
+      description: message.description,
+    }
+  ));
+  return results;
+};

lib/presets.js

@@ -8,6 +8,12 @@ const babel = new ConfigPreset({
   searchFilepaths,
 });
 
+const formatjs = new ConfigPreset({
+  defaultFilename: 'babel.config.js',
+  searchFilenames: ['.babelrc', '.babelrc.js', 'babel.config.js'],
+  searchFilepaths,
+});
+
 const babelPreserveModules = new ConfigPreset({
   defaultFilename: 'babel-preserve-modules.config.js',
   searchFilenames: ['.babelrc', '.babelrc.js', 'babel.config.js'],
@@ -52,6 +58,7 @@ const webpack = new ConfigPreset({
 
 module.exports = {
   babel,
+  formatjs,
   babelPreserveModules,
   'babel-preserve-modules': babelPreserveModules,
   'babel-typescript': babelTypescript,