Share esbuild config with UI tests

src/elements/play-icon/play-icon.test.ts

@@ -0,0 +1,7 @@
+import {assert} from '@esm-bundle/chai'
+import {PlayIcon} from './play-icon.js'
+
+test('tag is defined', () => {
+  const el = document.createElement('play-icon')
+  assert.instanceOf(el, PlayIcon)
+})

src/utils/throttle.test.ts

@@ -2,7 +2,7 @@ import {expect, test} from 'vitest'
 import {throttle} from './throttle.js'
 
 test('a throttled function is invoked with the latest arguments', async () => {
-  let out = {val: 0}
+  const out = {val: 0}
   const fn = throttle((val: number) => (out.val = val), 5)
   fn(1)
   expect(out.val).toBe(0)

tools/build

@@ -12,6 +12,7 @@ import {JSDOM} from 'jsdom'
 import fs from 'node:fs/promises'
 import path from 'node:path'
 import pkg from '../package.json' assert {type: 'json'}
+import {esbuildConfig} from './esbuild-config.js'
 import {readTSDs} from './tsd.js'
 
 const watch = process.argv.includes('--watch')
@@ -86,24 +87,11 @@ await fs.writeFile(
 
 /** @type {esbuild.BuildOptions} */
 const opts = {
+  ...esbuildConfig(pkg.version, pkg.devDependencies['@devvit/public-api']),
   bundle: true,
   conditions: watch ? ['development'] : [], // Lit
-  define: {
-    'globalThis.playVersion': `'${pkg.version}'`,
-    'globalThis.devvitVersion': `'${pkg.devDependencies['@devvit/public-api']}'`
-  }, // See defines.d.ts.
   external: ['path'], // @typescript/vfs requires path.
   format: 'esm',
-  loader: {
-    '.css': 'text',
-    // Bundle templates for loading in pens and bundle pen worker as text so it
-    // can be loaded in a worker.
-    // Bundle templates for loading in pens and bundle pen worker as text so it
-    // can be loaded in a worker.
-    '.example.tsx': 'text', // should be dataurl + loaders.d.ts
-    '.svg': 'text', // should this be data url?
-    '.worker.min.js': 'text'
-  },
   logLevel: `info`, // Print the port and build demarcations.
   sourcemap: 'linked',
   target: 'es2022' // https://esbuild.github.io/content-types/#tsconfig-json

tools/esbuild-config.js

@@ -0,0 +1,24 @@
+/**
+ * Just the configs that can be shared with test:ui. See
+ * https://modern-web.dev/docs/dev-server/plugins/esbuild. Note that esbuild
+ * uses `loader` whereas @web/dev-server-esbuild uses `loaders`.
+ * @arg {string} playVersion
+ * @arg {string} devvitVersion
+ * @ret {import('esbuild').BuildOptions}
+ */
+export function esbuildConfig(playVersion, devvitVersion) {
+  return {
+    define: {
+      'globalThis.playVersion': `'${playVersion}'`,
+      'globalThis.devvitVersion': `'${devvitVersion}'`
+    }, // See defines.d.ts.
+    loader: {
+      '.css': 'text',
+      // Bundle templates for loading in pens and bundle pen worker as text so it
+      // can be loaded in a worker.
+      '.example.tsx': 'text',
+      '.svg': 'text',
+      '.worker.min.js': 'text'
+    }
+  }
+}

web-test-runner.config.js

@@ -1,10 +1,19 @@
 import {esbuildPlugin} from '@web/dev-server-esbuild'
+import {esbuildConfig} from './tools/esbuild-config.js'
+
+const base = esbuildConfig('0.0.0', '0.0.1-next-2000-01-01-abcdef123.4')
 
 export default {
   files: ['src/elements/**/*.test.ts'],
   nodeResolve: true,
   plugins: [
-    esbuildPlugin({ts: true, tsconfig: 'src/elements/test/tsconfig.json'})
+    esbuildPlugin({
+      ...base,
+      loaders: base.loader,
+      target: 'auto',
+      ts: true,
+      tsconfig: 'src/elements/test/tsconfig.json'
+    })
   ],
   testFramework: {
     // https://mochajs.org/api/mocha