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/build.mjs

@@ -9,7 +9,6 @@ const packagesToBuild = [
   '@theatre/browser-bundles',
   '@theatre/r3f',
 ]
-
 ;(async function () {
   // better quote function from https://github.com/google/zx/pull/167
   $.quote = function quote(arg) {

scripts/clean.mjs

@@ -0,0 +1,37 @@
+/**
+ * cleans the build artifacts of all packages
+ */
+
+const packages = [
+  'theatre',
+  '@theatre/dataverse',
+  '@theatre/react',
+  '@theatre/browser-bundles',
+  '@theatre/r3f',
+]
+
+;(async function () {
+  // better quote function from https://github.com/google/zx/pull/167
+  $.quote = function quote(arg) {
+    if (/^[a-z0-9/_.-]+$/i.test(arg)) {
+      return arg
+    }
+    return (
+      `$'` +
+      arg
+        .replace(/\\/g, '\\\\')
+        .replace(/'/g, "\\'")
+        .replace(/\f/g, '\\f')
+        .replace(/\n/g, '\\n')
+        .replace(/\r/g, '\\r')
+        .replace(/\t/g, '\\t')
+        .replace(/\v/g, '\\v')
+        .replace(/\0/g, '\\0') +
+      `'`
+    )
+  }
+
+  await Promise.all([
+    ...packages.map((workspace) => $`yarn workspace ${workspace} run clean`),
+  ])
+})()

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
+}

scripts/publish-to-yalc.mjs

@@ -0,0 +1,26 @@
+/**
+ * Publish the theatre packages to a local registry with yalc for the ecosystem tests.
+ */
+import path from 'path'
+
+const root = path.resolve(__dirname, '..')
+
+// Make sure the script runs in the root of the monorepo
+cd(root)
+
+process.env.USING_YALC = 'true'
+
+const packagesToPublish = [
+  'theatre/core',
+  'theatre/studio',
+  'packages/dataverse',
+  'packages/r3f',
+  'packages/react',
+]
+
+;(async function () {
+  // Publish the packages to the local `yalc` registry
+  for (const pkg of packagesToPublish) {
+    await $`npx yalc publish ${pkg}`
+  }
+})()

scripts/release.mjs

@@ -187,6 +187,7 @@ const packagesWhoseVersionsShouldBump = [
   )
 })()
 
+/** @param {string} monorepoVersion */
 async function assignVersions(monorepoVersion) {
   for (const packagePathRelativeFromRoot of packagesWhoseVersionsShouldBump) {
     const pathToPackage = path.resolve(

scripts/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "types": [
+      "zx"
+    ]
+  },
+  "include": [
+    "*.mjs",
+    "**/*.mjs",
+  ]
+}