Add tests for Theatre.js + popular setups in the ecosystem (#165)

This implements some basic infra for testing Theatre.js with popular setups such as npm/yarn/pnpm, webpack/vite/parcel, js/ts, etc.

So far, the only existing setup has been with create-react-app. Will add more in the future.

Co-authored-by: Fülöp <fulopkovacs@users.noreply.github.com>
Co-authored-by: Aria Minaei <aria.minaei@gmail.com>

scripts/ecosystem-tests/build-setups.mjs

@@ -0,0 +1,34 @@
+/**
+ * Build the test setups
+ */
+
+import path from 'path'
+import {colorize, getEcosystemTestSetups} from './utils.mjs'
+
+const root = path.resolve(__dirname, '../..')
+const absPathOfEcosystemTestSetups = getEcosystemTestSetups(root)
+
+const setupsWithErros = []
+
+// Try building the setups
+;(async function () {
+  for (const setupDir of absPathOfEcosystemTestSetups) {
+    try {
+      cd(setupDir)
+      await $`yarn build`
+    } catch (err) {
+      console.error(err)
+      setupsWithErros.push(setupDir)
+    }
+  }
+
+  // Stop if there were any errors during the build process,
+  // and print all of them to the console.
+  if (setupsWithErros.length !== 0) {
+    throw new Error(
+      `The following setups had problems when their dependencies were being installed:\n${colorize.red(
+        setupsWithErros.join('\n'),
+      )}`,
+    )
+  }
+})()

scripts/ecosystem-tests/ci.mjs

@@ -0,0 +1,6 @@
+;(async function () {
+  await $`zx scripts/publish-to-yalc.mjs`
+  await $`zx scripts/ecosystem-tests/install-dependencies.mjs`
+  await $`zx scripts/ecosystem-tests/link-theatre-packages.mjs`
+  await $`zx scripts/ecosystem-tests/build-setups.mjs`
+})()

scripts/ecosystem-tests/install-dependencies.mjs

@@ -0,0 +1,35 @@
+/**
+ * Install the dependencies of the ecosystem test setups
+ */
+
+import path from 'path'
+import {colorize, getEcosystemTestSetups} from './utils.mjs'
+
+const root = path.resolve(__dirname, '../..')
+
+const absPathOfTestSetups = getEcosystemTestSetups(root)
+
+const setupsWithErrors = []
+
+// Try installing the dependencies of the test setups
+;(async function () {
+  for (const dirOfSetup of absPathOfTestSetups) {
+    try {
+      cd(dirOfSetup)
+      await $`yarn`
+    } catch (err) {
+      console.error(err)
+      setupsWithErrors.push(dirOfSetup)
+    }
+  }
+
+  // Stop if there were any errors during the linking process,
+  // and print all of them to the console.
+  if (setupsWithErrors.length !== 0) {
+    throw new Error(
+      `The following setups had problems when their dependencies were being installed:\n${colorize.red(
+        setupsWithErrors.join('\n'),
+      )}`,
+    )
+  }
+})()

scripts/ecosystem-tests/link-theatre-packages.mjs

@@ -0,0 +1,46 @@
+/**
+ * Add the theatre packages to the ecosystem test setups with `yalc link`
+ */
+
+import path from 'path'
+import {colorize, getEcosystemTestSetups} from './utils.mjs'
+
+const root = path.resolve(__dirname, '../..')
+const absPathsOfSetups = getEcosystemTestSetups(root)
+
+// The packages that should be linked with `yalc`
+const packagesToLink = [
+  '@theatre/core',
+  '@theatre/studio',
+  '@theatre/dataverse',
+  '@theatre/react',
+  '@theatre/r3f',
+]
+
+const setupsWithErrors = []
+
+;(async function () {
+  for (const setupDir of absPathsOfSetups) {
+    try {
+      cd(setupDir)
+      for (let pkg of packagesToLink) {
+        // Add the specified package to the setup's dependencies
+        // with `yalc link`.
+        await $`npx yalc link ${pkg}`
+      }
+    } catch (err) {
+      console.error(err)
+      setupsWithErrors.push(setupDir)
+    }
+  }
+
+  // Stop if there were any errors during the linking process,
+  // and print all of them to the console.
+  if (setupsWithErrors.length !== 0) {
+    throw new Error(
+      `The following setups had problems when their dependencies were being linked:\n${colorize.red(
+        setupsWithErrors.join('\n'),
+      )}`,
+    )
+  }
+})()

scripts/ecosystem-tests/utils.mjs

@@ -0,0 +1,49 @@
+/**
+ * Utility functions for the ecosystem tests
+ */
+
+import fs from 'fs'
+import path from 'path'
+
+/**
+ * Colorize a message
+ */
+export const colorize = {
+  /** @param {string} message */
+  red: (message) => '\x1b[31m' + message + '\x1b[0m',
+  /** @param {string} message */
+  green: (message) => '\x1b[32m' + message + '\x1b[0m',
+  /** @param {string} message */
+  yellow: (message) => '\x1b[33m' + message + '\x1b[0m',
+}
+
+/**
+ * Get all the setups from `./ecosystem-tests/`
+ *
+ * @param {string} root - Absolute path to the theatre monorepo
+ * @returns An array containing the absolute paths to the ecosystem test setups
+ */
+export function getEcosystemTestSetups(root) {
+  const buildTestsDir = path.join(root, 'ecosystem-tests')
+  let buildTestsDirEntries
+
+  try {
+    buildTestsDirEntries = fs.readdirSync(buildTestsDir)
+  } catch {
+    throw new Error(
+      `Could not list directory: "${buildTestsDir}" Is it an existing directory?`,
+    )
+  }
+  const setupsAbsPaths = []
+
+  // NOTE: We assume that every directory in `ecosystem-tests` is
+  // an ecosystem test setup!
+  for (const entry of buildTestsDirEntries) {
+    const entryAbsPath = path.join(buildTestsDir, entry)
+    if (fs.lstatSync(entryAbsPath).isDirectory()) {
+      setupsAbsPaths.push(entryAbsPath)
+    }
+  }
+
+  return setupsAbsPaths
+}