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,8 +29,9 @@
     "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:types": "tsgo -b tsconfig.references.json",
     "build:ts": "pnpm --filter @instructure/ui-icons prepare-build && pnpm run build:types",
     "clean": "node scripts/clean.js",
     "clean-node": "node scripts/clean.js --nuke_node",
@@ -76,6 +76,7 @@
     "@types/node": "^22",
     "@types/react": "18.3.26",
     "@types/react-dom": "18.3.1",
+    "@typescript/native-preview": "7.0.0-dev.20260526.1",
     "@vitejs/plugin-react": "^4.5.1",
     "@vitest/eslint-plugin": "^1.6.14",
     "babel-plugin-add-import-extension": "^1.6.0",

packages/__docs__/globals.ts

@@ -34,11 +34,8 @@ import ReactDOM from 'react-dom'
 
 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,10 +209,11 @@ 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>
+            {/* @ts-expect-error error is normal here */}
             <Table.Cell>Foo</Table.Cell>
             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))