meta: add support for TypeScript plugins

.eslintignore

@@ -6,3 +6,4 @@ test/lib/**
 test/endtoend/*/build
 examples/svelte-example/public/build/
 bundle-legacy.js
+packages/@uppy/*/src/*.d.ts

.eslintrc.js

@@ -361,6 +361,7 @@ module.exports = {
         'postcss.config.js',
         '.eslintrc.js',
         'private/**/*.js',
+        'private/**/*.mjs',
       ],
       rules: {
         'no-console': 'off',

.github/workflows/ci.yml

@@ -96,3 +96,5 @@ jobs:
           corepack yarn run build:locale-pack
       - name: Run type tests
         run: corepack yarn run test:type
+      - name: Attempt building TS packages
+        run: corepack yarn run build:ts

.gitignore

@@ -17,13 +17,15 @@ yarn-error.log
 
 dist/
 lib/
+tsOut/
 coverage/
 examples/dev/bundle.js
 examples/aws-php/vendor/*
 test/endtoend/create-react-app/build/
 test/endtoend/create-react-app/coverage/
 uppy-*.tgz
 generatedLocale.d.ts
+packages/@uppy/*/src/*.d.ts
 
 **/output/*
 !output/.keep

.yarn/patches/p-queue-npm-7.3.4-c746a7f1ae.patch

@@ -0,0 +1,12 @@
+diff --git a/package.json b/package.json
+index 9724d458b80411c2fd145b2e9d6db718523ccff9..2902526f4c9170369263e60d3555d11cd9f7f32d 100644
+--- a/package.json
++++ b/package.json
+@@ -6,6 +6,7 @@
+ 	"repository": "sindresorhus/p-queue",
+ 	"funding": "https://github.com/sponsors/sindresorhus",
+ 	"type": "module",
++	"main": "./dist/index.js",
+ 	"exports": "./dist/index.js",
+ 	"engines": {
+ 		"node": ">=12"

bin/build-lib.js

@@ -8,9 +8,9 @@ const path = require('node:path')
 const { mkdir, stat, writeFile } = fs.promises
 
 const PACKAGE_JSON_IMPORT = /^\..*\/package.json$/
-const SOURCE = 'packages/{*,@uppy/*}/src/**/*.js?(x)'
+const SOURCE = 'packages/{*,@uppy/*}/src/**/*.{js,ts}?(x)'
 // Files not to build (such as tests)
-const IGNORE = /\.test\.js$|__mocks__|svelte|angular|companion\//
+const IGNORE = /\.test\.[jt]s$|__mocks__|svelte|angular|companion\//
 // Files that should trigger a rebuild of everything on change
 const META_FILES = [
   'babel.config.js',
@@ -32,32 +32,28 @@ function lastModified (file, createParentDir = false) {
   })
 }
 
-const moduleTypeCache = new Map()
 const versionCache = new Map()
-async function isTypeModule (file) {
-  const packageFolder = file.slice(0, file.indexOf('/src/'))
 
-  const cachedValue = moduleTypeCache.get(packageFolder)
-  if (cachedValue != null) return cachedValue
+async function preparePackage (file) {
+  const packageFolder = file.slice(0, file.indexOf('/src/'))
+  if (versionCache.has(packageFolder)) return
 
   // eslint-disable-next-line import/no-dynamic-require, global-require
-  const { type, version } = require(path.join(__dirname, '..', packageFolder, 'package.json'))
-  const typeModule = type === 'module'
+  const { version } = require(path.join(__dirname, '..', packageFolder, 'package.json'))
   if (process.env.FRESH) {
     // in case it hasn't been done before.
     await mkdir(path.join(packageFolder, 'lib'), { recursive: true })
   }
-  moduleTypeCache.set(packageFolder, typeModule)
   versionCache.set(packageFolder, version)
-  return typeModule
 }
 
+const nonJSImport = /^\.\.?\/.+\.([jt]sx|ts)$/
 // eslint-disable-next-line no-shadow
-function transformJSXImportsToJS (path) {
-  const { value } = path.node.source
-  if (value.endsWith('.jsx') && (value.startsWith('./') || value.startsWith('../'))) {
-    // Rewrite .jsx imports to .js:
-    path.node.source.value = value.slice(0, -1) // eslint-disable-line no-param-reassign
+function rewriteNonJSImportsToJS (path) {
+  const match = nonJSImport.exec(path.node.source.value)
+  if (match) {
+    // eslint-disable-next-line no-param-reassign
+    path.node.source.value = `${match[0].slice(0, -match[1].length)}js`
   }
 }
 
@@ -71,7 +67,8 @@ async function buildLib () {
     if (IGNORE.test(file)) {
       continue
     }
-    const libFile = file.replace('/src/', '/lib/').replace(/\.jsx$/, '.js')
+    await preparePackage(file)
+    const libFile = file.replace('/src/', '/lib/').replace(/\.[jt]sx?$/, '.js')
 
     // on a fresh build, rebuild everything.
     if (!process.env.FRESH) {
@@ -85,16 +82,17 @@ async function buildLib () {
       }
     }
 
-    const plugins = await isTypeModule(file) ? [{
+    const plugins = [{
       visitor: {
         // eslint-disable-next-line no-shadow
         ImportDeclaration (path) {
-          transformJSXImportsToJS(path)
+          rewriteNonJSImportsToJS(path)
           if (PACKAGE_JSON_IMPORT.test(path.node.source.value)
               && path.node.specifiers.length === 1
               && path.node.specifiers[0].type === 'ImportDefaultSpecifier') {
             // Vendor-in version number from package.json files:
             const version = versionCache.get(file.slice(0, file.indexOf('/src/')))
+            console.log({ version })
             if (version != null) {
               const [{ local }] = path.node.specifiers
               path.replaceWith(
@@ -107,15 +105,18 @@ async function buildLib () {
           }
         },
 
-        ExportAllDeclaration: transformJSXImportsToJS,
+        ExportAllDeclaration: rewriteNonJSImportsToJS,
         // eslint-disable-next-line no-shadow
         ExportNamedDeclaration (path) {
           if (path.node.source != null) {
-            transformJSXImportsToJS(path)
+            rewriteNonJSImportsToJS(path)
           }
         },
       },
-    }] : undefined
+    }]
+    const isTSX = file.endsWith('.tsx')
+    if (isTSX || file.endsWith('.ts')) { plugins.push(['@babel/plugin-transform-typescript', { disallowAmbiguousJSXLike: true, isTSX, jsxPragma: 'h' }]) }
+
     const { code, map } = await babel.transformFileAsync(file, { sourceMaps: true, plugins })
     const [{ default: chalk }] = await Promise.all([
       import('chalk'),

bin/build-ts.mjs

@@ -0,0 +1,30 @@
+#!/usr/bin/env node
+
+import { spawn } from 'node:child_process'
+import { once } from 'node:events'
+import { existsSync } from 'node:fs'
+import path from 'node:path'
+import { stdin, env } from 'node:process'
+import { createInterface as readLines } from 'node:readline'
+import { fileURLToPath } from 'node:url'
+
+const fromYarn = 'npm_execpath' in env
+const exe = fromYarn ? env.npm_execpath : 'corepack'
+const argv0 = fromYarn ? [] : ['yarn']
+
+const cwd = fileURLToPath(new URL('../', import.meta.url))
+
+for await (const line of readLines(stdin)) {
+  const { location, name } = JSON.parse(line)
+  if (existsSync(path.join(cwd, location, 'tsconfig.json'))) {
+    const cp = spawn(exe, [...argv0, 'tsc', '-p', location], {
+      stdio: 'inherit',
+      cwd,
+    })
+    await Promise.race([
+      once(cp, 'error').then(err => Promise.reject(err)),
+      await once(cp, 'exit')
+        .then(([code]) => (code && Promise.reject(new Error(`Non-zero exit code when building "${name}": ${code}`)))),
+    ])
+  }
+}

e2e/cypress/integration/dashboard-transloadit.spec.ts

@@ -34,11 +34,15 @@ describe('Dashboard with Transloadit', () => {
       cy.get('.uppy-StatusBar-actionBtn--upload').click()
 
       cy.wait(['@createAssemblies']).then(() => {
+        // eslint-disable-next-line
+        // @ts-ignore fix me
         expect(Object.values(uppy.getPlugin('Transloadit').activeAssemblies).every((a: any) => a.pollInterval)).to.equal(true)
 
         uppy.cancelAll()
 
         cy.wait(['@delete']).then(() => {
+          // eslint-disable-next-line
+          // @ts-ignore fix me
           expect(Object.values(uppy.getPlugin('Transloadit').activeAssemblies).some((a: any) => a.pollInterval)).to.equal(false)
         })
       })
@@ -53,6 +57,8 @@ describe('Dashboard with Transloadit', () => {
     const spy = cy.spy()
 
     cy.window().then(({ uppy }) => {
+      // eslint-disable-next-line
+      // @ts-ignore fix me
       uppy.on('transloadit:assembly-cancelled', spy)
 
       cy.get('@file-input').selectFile(['cypress/fixtures/images/cat.jpg', 'cypress/fixtures/images/traffic.jpg'], { force:true })
@@ -89,6 +95,8 @@ describe('Dashboard with Transloadit', () => {
     const spy = cy.spy()
 
     cy.window().then(({ uppy }) => {
+      // eslint-disable-next-line
+      // @ts-ignore fix me
       uppy.on('transloadit:assembly-cancelled', spy)
 
       cy.get('@file-input').selectFile(['cypress/fixtures/images/cat.jpg', 'cypress/fixtures/images/traffic.jpg'], { force:true })
@@ -111,12 +119,18 @@ describe('Dashboard with Transloadit', () => {
 
       cy.get('.uppy-StatusBar-actionBtn--upload').click()
       cy.wait('@assemblyPolling')
+      // eslint-disable-next-line
+      // @ts-ignore fix me
       expect(Object.values(uppy.getPlugin('Transloadit').activeAssemblies).every((a: any) => a.pollInterval)).to.equal(true)
 
       const { files } = uppy.getState()
+      // eslint-disable-next-line
+      // @ts-ignore fix me
       uppy.removeFiles(Object.keys(files))
 
       cy.wait('@assemblyDeletion').then(() => {
+        // eslint-disable-next-line
+        // @ts-ignore fix me
         expect(Object.values(uppy.getPlugin('Transloadit').activeAssemblies).some((a: any) => a.pollInterval)).to.equal(false)
         expect(spy).to.be.calledOnce
       })
@@ -128,12 +142,18 @@ describe('Dashboard with Transloadit', () => {
     cy.get('.uppy-StatusBar-actionBtn--upload').click()
 
     cy.window().then(({ uppy }) => {
+      // eslint-disable-next-line
+      // @ts-ignore fix me
       expect(Object.values(uppy.getPlugin('Transloadit').activeAssemblies).length).to.equal(0)
 
       const { files } = uppy.getState()
+      // eslint-disable-next-line
+      // @ts-ignore fix me
       uppy.removeFiles(Object.keys(files))
 
       cy.wait('@createAssemblies').then(() => {
+        // eslint-disable-next-line
+        // @ts-ignore fix me
         expect(Object.values(uppy.getPlugin('Transloadit').activeAssemblies).some((a: any) => a.pollInterval)).to.equal(false)
       })
     })
@@ -145,6 +165,8 @@ describe('Dashboard with Transloadit', () => {
     cy.get('.uppy-StatusBar-actionBtn--upload').click()
 
     cy.window().then(({ uppy }) => {
+      // eslint-disable-next-line
+      // @ts-ignore fix me
       expect(Object.values(uppy.getPlugin('Transloadit').activeAssemblies).length).to.equal(0)
 
       const { files } = uppy.getState()

e2e/cypress/integration/react.spec.ts

@@ -24,6 +24,8 @@ describe('@uppy/react', () => {
   it('should render Drag & Drop in React and create a thumbail with @uppy/thumbnail-generator', () => {
     const spy = cy.spy()
 
+    // eslint-disable-next-line
+    // @ts-ignore fix me
     cy.window().then(({ uppy }) => uppy.on('thumbnail:generated', spy))
     cy.get('@dragdrop-input').selectFile(['cypress/fixtures/images/cat.jpg', 'cypress/fixtures/images/traffic.jpg'], { force:true })
     // not sure how I can accurately wait for the thumbnail

e2e/package.json

@@ -45,15 +45,15 @@
     "@uppy/zoom": "workspace:^"
   },
   "devDependencies": {
-    "cypress": "^12.9.0",
-    "cypress-terminal-report": "^4.1.2",
+    "@parcel/transformer-vue": "2.9.3",
+    "cypress": "^13.0.0",
+    "cypress-terminal-report": "^5.0.0",
     "deep-freeze": "^0.0.1",
-    "execa": "^6.1.0",
-    "parcel": "2.0.0-nightly.1278",
+    "parcel": "^2.0.0",
     "prompts": "^2.4.2",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
-    "typescript": "~4.8",
+    "typescript": "~5.1",
     "vue": "^3.2.33"
   }
 }

e2e/start-companion-with-load-balancer.mjs

@@ -1,8 +1,9 @@
 #!/usr/bin/env node
 
-import { execa } from 'execa'
+import { spawn } from 'node:child_process'
 import http from 'node:http'
 import httpProxy from 'http-proxy'
+import process from 'node:process'
 
 const numInstances = 3
 const lbPort = 3020
@@ -45,20 +46,38 @@ function createLoadBalancer (baseUrls) {
   return server
 }
 
-const startCompanion = ({ name, port }) => execa('nodemon', [
-  '--watch', 'packages/@uppy/companion/src', '--exec', 'node', '-r', 'dotenv/config', './packages/@uppy/companion/src/standalone/start-server.js',
-], {
-  cwd: new URL('../', import.meta.url),
-  stdio: 'inherit',
-  env: {
-    // Note: these env variables will override anything set in .env
-    COMPANION_PORT: port,
-    COMPANION_SECRET: 'development', // multi instance will not work without secret set
-    COMPANION_PREAUTH_SECRET: 'development', // multi instance will not work without secret set
-    COMPANION_ALLOW_LOCAL_URLS: 'true',
-    COMPANION_LOGGER_PROCESS_NAME: name,
-  },
-})
+const isWindows = process.platform === 'win32'
+const isOSX = process.platform === 'darwin'
+
+const startCompanion = ({ name, port }) => {
+  const cp = spawn(process.execPath, [
+    '-r', 'dotenv/config', ...(isWindows || isOSX ? ['--watch-path', 'packages/@uppy/companion/src', '--watch'] : []), './packages/@uppy/companion/src/standalone/start-server.js',
+  ], {
+    cwd: new URL('../', import.meta.url),
+    stdio: 'inherit',
+    env: {
+      // Note: these env variables will override anything set in .env
+      ...process.env,
+      COMPANION_PORT: port,
+      COMPANION_SECRET: 'development', // multi instance will not work without secret set
+      COMPANION_PREAUTH_SECRET: 'development', // multi instance will not work without secret set
+      COMPANION_ALLOW_LOCAL_URLS: 'true',
+      COMPANION_LOGGER_PROCESS_NAME: name,
+    },
+  })
+  return Object.defineProperty(cp, 'then', {
+    __proto__: null,
+    writable: true,
+    configurable: true,
+    value: Promise.prototype.then.bind(new Promise((resolve, reject) => {
+      cp.on('exit', (code) => {
+        if (code === 0) resolve(cp)
+        else reject(new Error(`Non-zero exit code: ${code}`))
+      })
+      cp.on('error', reject)
+    })),
+  })
+}
 
 const hosts = Array.from({ length: numInstances }, (_, index) => {
   const port = companionStartPort + index

e2e/tsconfig.json

@@ -1,5 +1,7 @@
 {
   "compilerOptions": {
+    "moduleResolution": "NodeNext",
+    "noEmit": true,
     "target": "es2020",
     "lib": ["es2020", "dom"],
     "types": ["cypress"]

examples/svelte-example/package.json

@@ -26,9 +26,9 @@
     "rollup-plugin-terser": "^7.0.0",
     "svelte": ">=3.24.0",
     "svelte-check": "^1.6.0",
-    "svelte-preprocess": "^4.6.1",
+    "svelte-preprocess": "^5.0.0",
     "tslib": "^2.0.0",
-    "typescript": "~4.8"
+    "typescript": "~5.1"
   },
   "dependencies": {
     "@uppy/core": "workspace:*",