build: use TSGo (TS 7.0 dev) to speed up building types

Also simplify and put timers into the bootstrap
script

Author: matyasf

package.json

@@ -14,7 +14,6 @@
     "packages/*"
   ],
   "scripts": {
-    "build:themes": "ui-scripts build-themes",
     "prestart": "pnpm run bootstrap",
     "start": "pnpm --filter docs-app start",
     "start:watch": "pnpm --filter docs-app start:watch",
@@ -30,6 +29,7 @@
     "build": "pnpm -r --stream build",
     "build:watch": "pnpm -r --stream build:watch",
     "build:docs": "pnpm --filter docs-app bundle",
+    "build:themes": "ui-scripts build-themes",
     "build:tokens": "ui-scripts generate-all-tokens",
     "build:types": "tsc -b tsconfig.references.json",
     "build:ts": "pnpm --filter @instructure/ui-icons prepare-build && pnpm run build:types",

packages/__docs__/globals.ts

@@ -36,9 +36,7 @@ import { LoremIpsum } from 'lorem-ipsum'
 import moment from 'moment'
 // @ts-expect-error no type declarations for moment locales side-effect import
 import 'moment/min/locales'
-
 import { mirrorHorizontalPlacement } from '@instructure/ui-position'
-
 import { getComponentsForVersion } from './versioned-components'
 import { dark, light } from '@instructure/ui-themes'
 import { debounce } from '@instructure/debounce'

packages/ui-table/src/Table/__tests__/Table.test.tsx

@@ -209,7 +209,7 @@ describe('<Table />', async () => {
         <Table.Body>
           test
           <span>test</span>
-          {/* @ts-ignore error is normal here */}
+          {/* @ts-expect-error error is normal here */}
           <Table.Row>
             test
             <span>test</span>

pnpm-lock.yaml

@@ -23,71 +23,75 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-const { execSync, fork } = require('child_process')
+const { execSync } = require('child_process')
 const path = require('path')
 
 const opts = { stdio: 'inherit' }
-function buildProject() {
-  console.info('Fetching design tokens...')
-  try {
-    execSync(
-      'pnpm --filter @instructure/ui-scripts update @instructure/instructure-design-tokens',
-      opts
-    )
-  } catch (error) {
-    console.error(
-      "'pnpm --filter @instructure/ui-scripts update @instructure/instructure-design-tokens' failed",
-      error
-    )
-    process.exit(1)
-  }
 
-  console.info('Building themes...')
-  try {
-    execSync('pnpm run build:themes', opts)
-  } catch (error) {
-    console.error("'pnpm run build:themes' failed", error)
-    process.exit(1)
-  }
+function format(ms) {
+  return `${(ms / 1000).toFixed(1)}s`
+}
 
-  execSync('pnpm --filter @instructure/ui-icons prepare-build', opts)
-
-  // Executes a ui-codemods script to generate a versioned components list
-  // from the ui metapackage's latest re-export file. This is required for
-  // the updateInstUIImportVersions codemod's diagnose mode.
-  execSync(
-    'pnpm --filter @instructure/ui-codemods generate:versioned-exports',
-    opts
-  )
-
-  console.info('Building packages with Babel...')
-  try {
-    execSync('pnpm run build', opts)
-  } catch (error) {
-    console.error("'pnpm run build' failed", error)
-    process.exit(1)
+function mark(name) {
+  console.log(`\n================================================`)
+  console.log(`${name}...`)
+  if (steps.length) {
+    steps[steps.length - 1].duration =
+      Date.now() - steps[steps.length - 1].start
   }
+  steps.push({ name, start: Date.now(), duration: 0 })
+}
 
-  console.info('Generating tokens...')
-  try {
-    execSync('pnpm run build:tokens', opts)
-  } catch (error) {
-    console.error("'pnpm run build:tokens' failed", error)
-    process.exit(1)
-  }
+const steps = []
+const bootstrapStart = Date.now()
 
-  console.info('Building TypeScript declarations...')
-  try {
-    execSync('pnpm run build:types', opts)
-  } catch (error) {
-    console.error("'pnpm run build:types' failed", error)
-    process.exit(1)
-  }
-}
+mark('Deleting build artifacts')
+execSync(path.resolve('scripts/clean.js'), opts)
 
-function bootstrap() {
-  execSync(path.resolve('scripts/clean.js'), opts)
-  buildProject()
-}
+mark('Fetching design tokens')
+execSync(
+  'pnpm --filter @instructure/ui-scripts update @instructure/instructure-design-tokens',
+  opts
+)
+
+mark('Building themes')
+execSync('pnpm run build:themes', opts)
 
-bootstrap()
+mark('Preparing icons')
+execSync('pnpm --filter @instructure/ui-icons prepare-build', opts)
+
+mark('Generating package list for codemods')
+execSync(
+  'pnpm --filter @instructure/ui-codemods generate:versioned-exports',
+  opts
+)
+
+mark('Building packages with Babel')
+execSync('pnpm run build', opts)
+
+mark('Generating design tokens')
+execSync('pnpm run build:tokens', opts)
+
+mark('Building TypeScript declarations')
+execSync('pnpm run build:types', opts)
+
+// Log build time summary. Assumes that the build is not parallel
+steps[steps.length - 1].duration = Date.now() - steps[steps.length - 1].start
+
+const total = Date.now() - bootstrapStart
+const nameW = Math.max(...steps.map((s) => s.name.length))
+const durW = Math.max(
+  ...steps.map((s) => format(s.duration).length),
+  format(total).length
+)
+const tableWidth = nameW + durW + 7
+
+console.log('\n' + '='.repeat(tableWidth))
+console.log(' Bootstrap Summary')
+console.log('='.repeat(tableWidth))
+for (const s of steps) {
+  console.log(` ${s.name.padEnd(nameW)}  ${format(s.duration).padStart(durW)}`)
+}
+console.log('-'.repeat(tableWidth))
+console.log(` ${'Total'.padEnd(nameW)}  ${format(total).padStart(durW)}`)
+console.log('='.repeat(tableWidth))

regression-test/package-lock.json

@@ -28,12 +28,10 @@ const path = require('path')
 const { execSync } = require('child_process')
 
 const NODE_PACKAGES = [
-  'ui-icons-build',
   'ui-babel-preset',
   'ui-codemods',
   'ui-scripts',
   'command-utils',
-  'instui-cli',
   'babel-plugin-transform-imports',
   'pkg-utils'
 ]
@@ -61,7 +59,7 @@ async function deleteDirs(dirs = []) {
   )
 }
 
-// deletes built files from tooling packages (NODE_PACKAGES const)
+// deletes build artifacts from all packages
 async function clean() {
   const packagesPath = path.resolve('./packages')
   const packageDirs = await fs.readdir(packagesPath, { withFileTypes: true })
@@ -88,7 +86,7 @@ async function clean() {
 function removeNodeModules() {
   try {
     // Use native find command - 10-100x faster than Node.js recursive scan
-    console.error('Finding node_modules directories...')
+    console.info('Finding node_modules directories...')
     execSync(
       'find . -name "node_modules" -type d -prune -exec rm -rf {} + 2>/dev/null || true',
       { stdio: 'inherit' }
@@ -100,17 +98,17 @@ function removeNodeModules() {
 }
 
 async function main() {
-  console.error('Deleting built files from tooling packages...')
+  console.info('Deleting build artifacts...')
   await clean()
 
   const args = process.argv.slice(2)
   if (args.length > 0 && args[0] === '--nuke_node') {
-    console.error('Deleting node_modules recursively...')
+    console.info('Deleting node_modules recursively...')
     removeNodeModules()
   }
 }
 
 main().catch((error) => {
-  console.error('Clean script failed:', error)
+  console.info('clean.js failed:', error)
   process.exit(1)
 })