Frontend base Migration

.github/workflows/ci.yml

@@ -29,6 +29,8 @@ jobs:
       run: npm run test
     - name: Build
       run: npm run build
+    - name: Build (CI)
+      run: npm run build:ci
     - name: i18n_extract
       run: npm run i18n_extract
     - name: Coverage

.gitignore

@@ -1,19 +1,21 @@
-.DS_Store
-.eslintcache
-.idea
 node_modules
 npm-debug.log
 coverage
 module.config.js
 
 dist/
-src/i18n/transifex_input.json
-temp/babel-plugin-react-intl
+packages/
+/.turbo
+/turbo.json
+/*.tgz
 
-### pyenv ###
-.python-version
+### i18n ###
+src/i18n/transifex_input.json
+src/i18n/messages.ts
+src/i18n/messages/
 
-### Emacs ###
+### Editors ###
+.DS_Store
 *~
 /temp
 /.vscode

.npmignore

@@ -1,12 +1,6 @@
-.eslintignore
-.eslintrc.json
-.gitignore
-.travis.yml
-docker-compose.yml
-Dockerfile
-Makefile
-npm-debug.log
-
-coverage
+__mocks__
 node_modules
-public
+*.test.js
+*.test.jsx
+*.test.ts
+*.test.tsx

Makefile

@@ -1,44 +1,74 @@
-intl_imports = ./node_modules/.bin/intl-imports.js
-transifex_utils = ./node_modules/.bin/transifex-utils.js
-i18n = ./src/i18n
-transifex_input = $(i18n)/transifex_input.json
+npm-install-%: ## install specified % npm package
+	npm install $* --save-dev
+	git add package.json
 
-# This directory must match .babelrc .
-transifex_temp = ./temp/babel-plugin-formatjs
+TURBO = TURBO_TELEMETRY_DISABLED=1 turbo --dangerously-disable-package-manager-check
 
-precommit:
-	npm run lint
-	npm audit
+NPM_TESTS=build i18n_extract lint test
 
-requirements:
+.PHONY: test
+test: $(addprefix test.npm.,$(NPM_TESTS))  ## validate ci suite
+
+.PHONY: test.npm.*
+test.npm.%: validate-no-uncommitted-package-lock-changes
+	test -d node_modules || $(MAKE) requirements
+	npm run $(*)
+
+.PHONY: requirements
+requirements:  ## install ci requirements
 	npm ci
 
-i18n.extract:
-	# Pulling display strings from .jsx files into .json files...
-	rm -rf $(transifex_temp)
-	npm run-script i18n_extract
+# turbo.site.json is the standalone turbo config for this package.  It is
+# renamed to avoid conflicts with turbo v2's workspace validation, which
+# rejects root task syntax (//#) and requires "extends" in package-level
+# turbo.json files, such as when running in a site repository. The targets
+# below copy it into place before running turbo and clean up after.
+turbo.json: turbo.site.json
+	cp $< $@
+
+# NPM doesn't bin-link workspace packages during install, so it must be done manually.
+bin-link:
+	[ -f packages/frontend-base/package.json ] && npm rebuild --ignore-scripts @openedx/frontend-base || true
+
+build-packages: turbo.json
+	$(TURBO) run build; rm -f turbo.json
+	$(MAKE) bin-link
 
-i18n.concat:
-	# Gathering JSON messages into one file...
-	$(transifex_utils) $(transifex_temp) $(transifex_input)
+clean-packages: turbo.json
+	$(TURBO) run clean; rm -f turbo.json
 
-extract_translations: | requirements i18n.extract i18n.concat
+dev-packages: turbo.json
+	$(TURBO) run watch:build dev:site; rm -f turbo.json
 
-# Despite the name, we actually need this target to detect changes in the incoming translated message files as well.
-detect_changed_source_translations:
-	# Checking for changed translations...
-	git diff --exit-code $(i18n)
+dev-site: bin-link
+	npm run dev
+
+clean:
+	rm -rf dist
+
+build:
+	tsc --project tsconfig.build.json
+	find src -type f \( -name '*.scss' -o \( \( -name '*.png' -o -name '*.svg' \) -path '*/assets/*' \) \) -exec sh -c '\
+	  for f in "$$@"; do \
+	    d="dist/$${f#src/}"; \
+	    mkdir -p "$$(dirname "$$d")"; \
+	    cp "$$f" "$$d"; \
+	  done' sh {} +
+	tsc-alias -p tsconfig.build.json
+
+build-ci:
+	SITE_CONFIG_PATH=site.config.ci.tsx openedx build
+
+i18n.extract:
+	# Pulling display strings from .jsx files into .json files...
+	npm run-script i18n_extract
 
-# Pulls translations using atlas.
-pull_translations:
-	mkdir src/i18n/messages
-	cd src/i18n/messages \
-	   && atlas pull $(ATLAS_OPTIONS) \
-	            translations/frontend-platform/src/i18n/messages:frontend-platform \
-	            translations/paragon/src/i18n/messages:paragon \
-	            translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
-	            translations/frontend-component-header/src/i18n/messages:frontend-component-header \
-	            translations/frontend-app-admin-console/src/i18n/messages:frontend-app-admin-console
+extract_translations: | requirements i18n.extract
 
-	$(intl_imports) frontend-platform paragon frontend-component-header frontend-component-footer frontend-app-admin-console
+pull_translations: | requirements
+	npm run translations:pull -- --atlas-options="$(ATLAS_OPTIONS)"
 
+# This target is used by CI.
+validate-no-uncommitted-package-lock-changes:
+	# Checking for package-lock.json changes...
+	git diff --exit-code package-lock.json

README.rst

@@ -27,7 +27,7 @@ administrator efficiency.
 Getting Started
 ===============
 
-It is recomended to use it in a Tutor instalation, for adding the MFE follow the intruction in
+It is recommended to use it in a Tutor installation, for adding the frontend app follow the instruction in
 `Tutor MFE plugin <https://github.com/overhangio/tutor-mfe?tab=readme-ov-file#mfe-management>`_.
 
 Configuration
@@ -36,9 +36,9 @@ This repository works with `openedx-authz <https://github.com/openedx/openedx-au
 
 Plugins
 =======
-This MFE can be customized using `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_.
+This frontend app can be customized using `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_.
 
-The parts of this MFE that can be customized in that manner are documented `here </src/plugin-slots>`_.
+The parts of this frontend app that can be customized in that manner are documented `here </src/plugin-slots>`_.
 
 
 Development Roadmap

app.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="@openedx/frontend-base" />
+
+declare module 'site.config' {
+  export default SiteConfig;
+}
+
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}

babel.config.js

@@ -0,0 +1,3 @@
+const { createConfig } = require('@openedx/frontend-base/tools');
+
+module.exports = createConfig('babel');

eslint.config.js

@@ -0,0 +1,22 @@
+// @ts-check
+
+const { createLintConfig } = require('@openedx/frontend-base/tools');
+
+module.exports = createLintConfig(
+  {
+    files: [
+      'src/**/*',
+      'site.config.*',
+    ],
+  },
+  {
+    ignores: [
+      'coverage/*',
+      'dist/*',
+      'docs/*',
+      'node_modules/*',
+      '**/__mocks__/*',
+      '**/__snapshots__/*',
+    ],
+  },
+);

jest.config.js

@@ -1,16 +1,19 @@
-const { createConfig } = require('@openedx/frontend-build');
+const { createConfig } = require('@openedx/frontend-base/tools');
 
-module.exports = createConfig('jest', {
-  // setupFilesAfterEnv is used after the jest environment has been loaded.  In general this is what you want.  
-  // If you want to add config BEFORE jest loads, use setupFiles instead.  
+module.exports = createConfig('test', {
+  // setupFilesAfterEnv is used after the jest environment has been loaded.  In general this is what you want.
+  // If you want to add config BEFORE jest loads, use setupFiles instead.
   setupFilesAfterEnv: [
     '<rootDir>/src/setupTest.tsx',
   ],
-  moduleNameMapper: {
-    '^@src/(.*)$': '<rootDir>/src/$1',
-  },
   coveragePathIgnorePatterns: [
     'src/setupTest.tsx',
     'src/i18n',
+    'src/__mocks__',
   ],
+  moduleNameMapper: {
+    '\\.svg$': '<rootDir>/src/__mocks__/svg.js',
+    '\\.png$': '<rootDir>/src/__mocks__/file.js',
+    '^@src/(.*)$': '<rootDir>/src/$1',
+  },
 });

nodemon.json

@@ -0,0 +1,6 @@
+{
+  "watch": [
+    "src"
+  ],
+  "ext": "js,jsx,ts,tsx,scss"
+}