fix(mv3-part-8): Determine json validator on build (#6090)

#### Details

Discovered a bug in mv3 canary/ insider builds in which assessments
could not be loaded because the fixes from
https://github.com/microsoft/accessibility-insights-web/pull/5975 were
not included in those build steps.

##### Motivation

Fix mv3 bugs.

##### Context

The approach implemented in
https://github.com/microsoft/accessibility-insights-web/pull/5975
involved checking an empty json validator file into the repo and
replacing its content during the build for any builds that could not use
the dynamically generated json validator (see
https://github.com/microsoft/accessibility-insights-web/pull/5975 for
details). This works for building items one by one (ex calling `yarn
build:dev:mv3` then `yarn build:prod:mv3` sequentially), but does not
work for `yarn build:all` because in this case we run all builds
concurrently and therefore can't keep replacing the content of the
validator file.

The solution this PR implements is to: 
- Continue to check in empty json validator file into repo and import it
in source code (this PR changed that file name from
`validate-assessment-json` to `empty-validate-assessment-json`).
- When generating the json validator at build time, place it in a
separate file named `generated-validate-assessment-json`.
- When building extensions that need to use the build generated
validator, update the import statement to import
`generated-validate-assessment-json` instead of
`empty-validate-assessment-json` and for extensions that can dynamically
generate a validator, do nothing and keep the
`empty-validate-assessment-json` import as is.
- This results in both the empty and build generated validators being
included in the built extensions, but each extension uses the correct
one based on its import statement.

I considered several alternative approaches, including importing the
build generated validator file conditionally. As far as I could see,
there was no practical way to implement this, especially considering our
bundling process, so I discarded this idea.

#### Pull request checklist
<!-- If a checklist item is not applicable to this change, write "n/a"
in the checkbox -->
- [n/a] Addresses an existing issue: #0000
- [x] Ran `yarn null:autoadd`
- [x] Ran `yarn fastpass`
- [x] Added/updated relevant unit test(s) (and ran `yarn test`)
- [x] Verified code coverage for the changes made. Check coverage report
at: `<rootDir>/test-results/unit/coverage`
- [x] PR title *AND* final merge commit title both start with a semantic
tag (`fix:`, `chore:`, `feat(feature-name):`, `refactor:`). See
`CONTRIBUTING.md`.
- [n/a] (UI changes only) Added screenshots/GIFs to description above
- [n/a] (UI changes only) Verified usability with NVDA/JAWS

.eslintrc.js

@@ -12,6 +12,7 @@ module.exports = {
         'extension/',
         'packages/',
         'test-results/',
-        'src/DetailsView/components/validate-assessment-json.js',
+        'src/DetailsView/components/generated-validate-assessment-json.js',
+        'replace-plugin.js',
     ],
 };

.gitignore

@@ -20,7 +20,7 @@ test-results/
 analysis/
 *.scss.d.ts
 original-manifest-copy.json
-validate-assessment-json.js
+generated-validate-assessment-json.js
 
 # Dependency directories
 node_modules/

.prettierignore

@@ -46,6 +46,7 @@ LICENSE
 new-appx.ps1
 test-results/
 yarn.lock
-src/DetailsView/components/validate-assessment-json.js
+src/DetailsView/components/generated-validate-assessment-json.js
+replace-plugin.js
 
 .ignoredRevs

Gruntfile.js

@@ -917,6 +917,8 @@ module.exports = function (grunt) {
     grunt.registerTask('build-prod-mv3', [
         'clean:intermediates',
         'exec:generate-scss-typings',
+        'build-package-validator',
+        'exec:generate-validator',
         'exec:esbuild-prod-mv3',
         'build-assets',
         'drop:production-mv3',
@@ -958,6 +960,8 @@ module.exports = function (grunt) {
         'clean:intermediates',
         'exec:generate-scss-typings',
         'build-mock-adb',
+        'build-package-validator',
+        'exec:generate-validator',
         'concurrent:compile-all',
         'build-assets',
         'drop:dev',

copyright-header.config.json

@@ -42,7 +42,7 @@
         "Dockerfile",
         ".eslintignore",
         "**/*.plist",
-        "./src/DetailsView/components/validate-assessment-json.js"
+        "./src/DetailsView/components/generated-validate-assessment-json.js"
     ],
     "licenseFormats": {
         "yaml|npmrc|yml|ps1|gitignore|dockerignore|prettierignore|yarnrc|nsh": {

esbuild.js

@@ -6,6 +6,7 @@ const { argv } = require('process');
 const NodeResolve = require('@esbuild-plugins/node-resolve');
 const esbuild = require('esbuild');
 const yargs = require('yargs');
+const { CreateReplaceJsonValidatorPlugin } = require('./replace-plugin');
 const { CreateStylePlugin } = require('./style-plugin');
 
 const src = './src';
@@ -108,6 +109,7 @@ switch (argsObj.env) {
         define = {
             global: 'globalThis',
         };
+        plugins = plugins.concat(CreateReplaceJsonValidatorPlugin());
         break;
 
     case 'dev-mv3':
@@ -116,6 +118,7 @@ switch (argsObj.env) {
             global: 'globalThis',
         };
         checkToAddReactDevTools(entryFiles);
+        plugins = plugins.concat(CreateReplaceJsonValidatorPlugin());
 
         break;
 

replace-plugin.js

@@ -0,0 +1,31 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+const fs = require('fs');
+
+const CreateReplaceJsonValidatorPlugin = () => {
+    return {
+        name: 'replace-json-validator-plugin',
+
+        setup(build) {
+            build.onLoad(
+                {
+                    filter: /.*load-assessment-data-validator.ts/,
+                },
+                async args => {
+                    const origContent = fs.readFileSync(args.path, 'utf-8');
+                    const newContent = origContent.replace(
+                        'empty-validate-assessment-json',
+                        'generated-validate-assessment-json',
+                    );
+                    return {
+                        contents: newContent,
+                        loader: 'ts',
+                    };
+                },
+            );
+        },
+    };
+};
+
+module.exports = { CreateReplaceJsonValidatorPlugin };

src/DetailsView/components/load-assessment-data-validator.ts

@@ -8,7 +8,7 @@ import { FeatureFlagStoreData } from 'common/types/store-data/feature-flag-store
 import { VersionedAssessmentData } from 'common/types/versioned-assessment-data';
 import { LoadAssessmentDataSchemaProvider } from 'DetailsView/components/load-assessment-data-schema-provider';
 import { isFunction } from 'lodash';
-import validateAssessmentJson from './validate-assessment-json';
+import validateAssessmentJson from './empty-validate-assessment-json';
 
 export type AjvValidationReturnData = {
     dataIsValid: boolean;

src/packages/assessment-validator/index.ts

@@ -10,7 +10,7 @@ import standaloneCode from 'ajv/dist/standalone';
 
 const validatorFilePath = path.join(
     __dirname,
-    '../../../src/DetailsView/components/validate-assessment-json.js',
+    '../../../src/DetailsView/components/generated-validate-assessment-json.js',
 );
 
 const generateValidator = () => {