perf: make ts-minbar test compilation faster and asset preparation simpler

apps/ts-minbar-test-react-components/README.md

@@ -1 +1,3 @@
-This test package was created to ensure that `@fluentui/react-components` remains compatible with Typescript 3.9 and no non TS 3.9 compatible code are introduced.
+# ts-minbar-test-react-components
+
+This test app ensures that `@fluentui/react-components` is compatible back to Typescript 3.9.

apps/ts-minbar-test-react-components/package.json

@@ -1,16 +1,14 @@
 {
   "name": "@fluentui/ts-minbar-test-react-components",
-  "version": "9.0.0-rc.0",
+  "version": "9.0.0",
   "private": true,
   "description": "Testing Fluent UI React Components compatibility with Typescript 3.9",
   "license": "MIT",
   "dependencies": {
     "@fluentui/react-components": "^9.7.1"
   },
   "scripts": {
-    "build": "just-scripts build",
-    "clean": "just-scripts clean",
-    "lint": "just-scripts lint",
-    "test": "node -r @fluentui/scripts/babel/register src/index.ts"
+    "type-check": "tsc -p .",
+    "test": "ts-node --swc ./src/index.ts"
   }
 }

apps/ts-minbar-test-react-components/src/index.ts

@@ -1,11 +1,10 @@
 import config from '@fluentui/scripts/config';
-import * as fs from 'fs-extra';
 import * as path from 'path';
 import {
   addResolutionPathsForProjectPackages,
   packProjectPackages,
 } from '@fluentui/scripts/projects-test/packPackages';
-import { prepareTempDirs, log, shEcho, TempPaths } from '@fluentui/scripts/projects-test/utils';
+import { prepareTempDirs, log, shEcho, TempPaths, generateFiles } from '@fluentui/scripts/projects-test/utils';
 
 const tsVersion = '3.9';
 const testName = 'ts-minbar-react-components';
@@ -15,7 +14,7 @@ async function performTest() {
   const logger = log(`test:${testName}`);
 
   try {
-    const scaffoldPath = config.paths.withRootAt(path.resolve(__dirname, '../assets/'));
+    const scaffoldPath = config.paths.withRootAt(path.resolve(__dirname, '../files'));
 
     tempPaths = prepareTempDirs(`${testName}-`);
     logger(`✔️ Temporary directories created under ${tempPaths.root}`);
@@ -38,9 +37,7 @@ async function performTest() {
     await shEcho(`yarn add ${packedPackages['@fluentui/react-components']}`, tempPaths.testApp);
     logger(`✔️ Fluent UI packages were added to dependencies`);
 
-    fs.mkdirSync(path.join(tempPaths.testApp, 'src'));
-    fs.copyFileSync(scaffoldPath('index.tsx'), path.join(tempPaths.testApp, 'src/index.tsx'));
-    fs.copyFileSync(scaffoldPath('tsconfig.json'), path.join(tempPaths.testApp, 'tsconfig.json'));
+    generateFiles(scaffoldPath(), tempPaths.testApp);
     logger(`✔️ Source and configs were copied`);
 
     await shEcho(`npx npm-which yarn`);

apps/ts-minbar-test-react-components/tsconfig.json

@@ -1,10 +1,10 @@
 {
   "compilerOptions": {
     "noEmit": true,
-    "lib": ["es2018"],
-    "target": "es2018",
-    "module": "commonjs",
-    "moduleResolution": "node",
+    "lib": ["ES2019"],
+    "target": "ES2019",
+    "module": "CommonJS",
+    "moduleResolution": "Node",
     "strict": true,
     "esModuleInterop": true,
     "skipLibCheck": true,

apps/ts-minbar-test-react/README.md

@@ -1 +1,3 @@
-This test package was created to ensure that `@fluentui/react` remains compatible with Typescript 3.9 and no non TS 3.9 compatible code are introduced.
+# ts-minbar-test-react
+
+This test app ensures that `@fluentui/react` is compatible back to Typescript 3.9.

apps/ts-minbar-test-react/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@fluentui/ts-minbar-test-react",
-  "version": "1.0.0",
+  "version": "8.0.0",
   "private": true,
   "description": "Testing Fluent UI React compatibility with Typescript 3.9",
   "license": "MIT",
   "dependencies": {
     "@fluentui/react": "^8.103.0"
   },
   "scripts": {
-    "build": "just-scripts build",
-    "test": "node -r @fluentui/scripts/babel/register src/index.ts"
+    "type-check": "tsc -p .",
+    "test": "ts-node --swc ./src/index.ts"
   }
 }

apps/ts-minbar-test-react/src/index.ts

@@ -1,11 +1,10 @@
 import config from '@fluentui/scripts/config';
-import * as fs from 'fs-extra';
 import * as path from 'path';
 import {
   addResolutionPathsForProjectPackages,
   packProjectPackages,
 } from '@fluentui/scripts/projects-test/packPackages';
-import { prepareTempDirs, log, shEcho, TempPaths } from '@fluentui/scripts/projects-test/utils';
+import { prepareTempDirs, log, shEcho, TempPaths, generateFiles } from '@fluentui/scripts/projects-test/utils';
 
 const tsVersion = '3.9';
 const testName = 'ts-minbar-react';
@@ -15,7 +14,7 @@ async function performTest() {
   const logger = log(`test:${testName}`);
 
   try {
-    const scaffoldPath = config.paths.withRootAt(path.resolve(__dirname, '../assets/'));
+    const scaffoldPath = config.paths.withRootAt(path.resolve(__dirname, '../files'));
 
     tempPaths = prepareTempDirs(`${testName}-`);
     logger(`✔️ Temporary directories created under ${tempPaths.root}`);
@@ -39,9 +38,7 @@ async function performTest() {
     await shEcho(`yarn add ${packedPackages['@fluentui/react']}`, tempPaths.testApp);
     logger(`✔️ Fluent UI packages were added to dependencies`);
 
-    fs.mkdirSync(path.join(tempPaths.testApp, 'src'));
-    fs.copyFileSync(scaffoldPath('index.tsx'), path.join(tempPaths.testApp, 'src/index.tsx'));
-    fs.copyFileSync(scaffoldPath('tsconfig.json'), path.join(tempPaths.testApp, 'tsconfig.json'));
+    generateFiles(scaffoldPath(), tempPaths.testApp);
     logger(`✔️ Source and configs were copied`);
 
     await shEcho(`npx npm-which yarn`);

apps/ts-minbar-test-react/tsconfig.json

@@ -1,10 +1,10 @@
 {
   "compilerOptions": {
     "noEmit": true,
-    "lib": ["es2018"],
-    "target": "es2018",
-    "module": "commonjs",
-    "moduleResolution": "node",
+    "lib": ["ES2019"],
+    "target": "ES2019",
+    "module": "CommonJS",
+    "moduleResolution": "Node",
     "strict": true,
     "esModuleInterop": true,
     "skipLibCheck": true,

packages/fluentui/projects-test/src/typings.ts

@@ -8,6 +8,7 @@ import {
   prepareTempDirs,
   log,
   shEcho,
+  generateFiles,
 } from '@fluentui/scripts/projects-test';
 
 export async function typings() {
@@ -37,9 +38,7 @@ export async function typings() {
   await shEcho(`yarn add ${packedPackages['@fluentui/react-northstar']}`, tempPaths.testApp);
   logger(`✔️ Fluent UI packages were added to dependencies`);
 
-  fs.mkdirSync(path.resolve(tempPaths.testApp, 'src'));
-  fs.copyFileSync(scaffoldPath('index.tsx'), path.resolve(tempPaths.testApp, 'src/index.tsx'));
-  fs.copyFileSync(scaffoldPath('tsconfig.json'), path.resolve(tempPaths.testApp, 'tsconfig.json'));
+  generateFiles(scaffoldPath(), tempPaths.testApp);
   logger(`✔️ Source and configs were copied`);
 
   await shEcho(`which yarn`);

scripts/projects-test/utils.ts

@@ -1,4 +1,5 @@
 import fs from 'fs';
+import fsExtra from 'fs-extra';
 import path from 'path';
 import tmp from 'tmp';
 // note: there's nothing gulp-specific about this utility, it just runs commands
@@ -56,3 +57,18 @@ export async function shEcho(cmd: string, cwd?: string) {
   console.log(`+ cd ${cwd ?? '.'} &&\n    ${cmd}`);
   await sh(cmd, cwd);
 }
+
+/**
+ * Generates a folder of files based on provided templates.
+ * This is similar to nx `@nrwl/devkit#generateFiles` without templating and ability to run on virtual FS
+ *
+ * @example
+ * ```typescript
+ * generateFiles(path.join(__dirname , 'files'), path.join(tempFolderRoot,'./tools/scripts'))
+ *
+ * @param srcFolder - the source folder of files (absolute path)
+ * @param target - the target folder (absolute path)
+ */
+export function generateFiles(srcFolder: string, target: string) {
+  fsExtra.copySync(srcFolder, target, { recursive: true });
+}