test: auto index for manual testing

Author: nobkd

packages/nuejs/test/compile.js

@@ -1,10 +1,27 @@
 import { existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync } from 'node:fs'
-import { join } from 'node:path'
+import { join, dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
 
 import { parse } from '../src/compile.js'
-import { getDirname } from './test-utils.js'
 
-const srcdir = getDirname(import.meta.url)
+const genIndex = (name) => `
+<meta charset="utf-8"> 
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link rel="stylesheet" href="../../client/test.css">
+
+<h1>${name}</h1>
+
+<div id="container"></div>
+
+<script type="module">
+import createApp from '../../../src/browser/nue.js';
+import { lib } from './index.js';
+const [App, ...deps] = lib
+createApp(App, {}, deps).mount(container)
+</script>
+`
+
+const srcdir = dirname(fileURLToPath(import.meta.url))
 
 // Ensure the dist directory exists
 const distDir = join(srcdir, 'dist')
@@ -35,5 +52,7 @@ for (const { testPath, name } of testComponentDirs) {
   const output = `export const lib = [${components.join(',')}]`
   writeFileSync(outputPath, output)
 
+  writeFileSync(join(outputDir, 'index.html'), genIndex(name))
+
   console.log(`Compiled ${name}: ${outputPath}`)
 }

packages/nuejs/test/test-clicks/index.html

@@ -7,15 +7,6 @@ import { createWindow } from 'domino'
 import { parse } from '../src/compile.js'
 
 
-/**
- * Get directory from url
- * @param {Url} url - Pass `import.meta.url`
- * @returns {string} Directory path containing the current file
- */
-export function getDirname(url) {
-  return dirname(fileURLToPath(url))
-}
-
 /**
  * Get directory path from url and return function for usage with {@linkcode mountTestComponent}
  * @param {Url} url - `import.meta.url` to get the test directory
@@ -25,7 +16,7 @@ export function mkConfigBase(url) {
    * @param {string} componentName
    * @param {Object?} data
    */
-  return (componentName, data) => ({ testPath: getDirname(url), componentName, data })
+  return (componentName, data) => ({ testPath: dirname(fileURLToPath(url)), componentName, data })
 }