mirror of
https://github.com/nexu-io/open-design.git
synced 2026-06-01 03:14:35 +07:00
* feat(web): point .jsx module previews at their HTML entry Multi-file React prototypes load .jsx modules from an HTML entry via <script type="text/babel" src>. A module previewed on its own has no standalone component, so it dead-ended on the React runtime error "No React component export found". Modules are now detected (a .jsx/.tsx referenced by a sibling HTML entry's babel script src) and handled: - The Preview shows a pointer to the HTML entry(ies) that render the module; clicking one opens that page and closes the module tab. - The Code tab still renders the raw source. - Such modules no longer auto-open as preview tabs after a write. * fix(web): bound module-detection cache, ignore commented-out scripts Review follow-up on the .jsx module preview pointer: - ProjectView: key the HTML content cache by file name with mtime stored alongside, so a rewrite replaces the file's single entry instead of leaking a new name@mtime key per revision. - extractBabelScriptSrcs: strip HTML comments before scanning so a commented-out babel script is not collected as a live reference. - i18n: normalize the three new jsxModule values to single quotes across all 19 locales to match each file's existing style.
139 lines
6 KiB
TypeScript
139 lines
6 KiB
TypeScript
import { describe, expect, it } from 'vitest';
|
|
|
|
import { decideAutoOpenAfterWrite } from '../../src/components/auto-open-file';
|
|
|
|
describe('decideAutoOpenAfterWrite', () => {
|
|
it('returns shouldOpen=false when filePath is empty', () => {
|
|
const result = decideAutoOpenAfterWrite('', [{ name: 'index.html' }]);
|
|
expect(result).toEqual({ shouldOpen: false, fileName: null });
|
|
});
|
|
|
|
it('returns shouldOpen=true when filePath equals a project file path', () => {
|
|
const result = decideAutoOpenAfterWrite('index.html', [
|
|
{ name: 'index.html', path: 'index.html' },
|
|
{ name: 'styles.css', path: 'styles.css' },
|
|
]);
|
|
expect(result).toEqual({ shouldOpen: true, fileName: 'index.html' });
|
|
});
|
|
|
|
it('returns shouldOpen=false when filePath has slashes but matches no project path', () => {
|
|
// Regression: this is the "rogue empty tab" case — the agent edited a
|
|
// file outside the project (e.g. an upstream repo's source file) and
|
|
// we must NOT open a placeholder tab for it. filePath has a slash, so
|
|
// the basename fallback is intentionally skipped.
|
|
const result = decideAutoOpenAfterWrite(
|
|
'/home/bryan/projects/open-design/apps/daemon/src/project-watchers.ts',
|
|
[
|
|
{ name: 'index.html', path: 'index.html' },
|
|
{ name: 'App.jsx', path: 'App.jsx' },
|
|
],
|
|
);
|
|
expect(result).toEqual({ shouldOpen: false, fileName: null });
|
|
});
|
|
|
|
it('falls back to basename match when filePath is just a basename', () => {
|
|
const result = decideAutoOpenAfterWrite('App.jsx', [
|
|
{ name: 'index.html', path: 'index.html' },
|
|
{ name: 'App.jsx', path: 'App.jsx' },
|
|
{ name: 'styles.css', path: 'styles.css' },
|
|
{ name: 'README.md', path: 'README.md' },
|
|
]);
|
|
expect(result).toEqual({ shouldOpen: true, fileName: 'App.jsx' });
|
|
});
|
|
|
|
it('matches an absolute filePath via path-suffix against a nested project file', () => {
|
|
// Real-world case: the agent passes an absolute file_path; the project
|
|
// file lives at "prototype/App.jsx". The decision must still resolve
|
|
// unambiguously, returning the project-relative file name.
|
|
const result = decideAutoOpenAfterWrite(
|
|
'/home/bryan/projects/open-design/.od/projects/abc/prototype/App.jsx',
|
|
[
|
|
{ name: 'index.html', path: 'index.html' },
|
|
{ name: 'prototype/App.jsx', path: 'prototype/App.jsx' },
|
|
],
|
|
);
|
|
expect(result).toEqual({ shouldOpen: true, fileName: 'prototype/App.jsx' });
|
|
});
|
|
|
|
it('declines when an absolute filePath could match multiple nested project files (ambiguous)', () => {
|
|
// Two project files share the basename "App.jsx" but live in different
|
|
// subdirs. The agent's filePath ends with "/App.jsx" only, with no
|
|
// disambiguating subdirectory match — refuse rather than open the wrong file.
|
|
const result = decideAutoOpenAfterWrite(
|
|
'/some/external/path/App.jsx',
|
|
[
|
|
{ name: 'src/App.jsx', path: 'src/App.jsx' },
|
|
{ name: 'lib/App.jsx', path: 'lib/App.jsx' },
|
|
],
|
|
);
|
|
expect(result).toEqual({ shouldOpen: false, fileName: null });
|
|
});
|
|
|
|
it('declines when filePath has a slash and no project path is a suffix match', () => {
|
|
// Agent edited /upstream/repo/App.jsx; project also has prototype/App.jsx.
|
|
// The previous (basename-only) implementation would have opened the
|
|
// wrong file; the path-suffix check leaves zero matches and the
|
|
// basename fallback is intentionally skipped because filePath has a slash.
|
|
const result = decideAutoOpenAfterWrite('/upstream/repo/App.jsx', [
|
|
{ name: 'prototype/App.jsx', path: 'prototype/App.jsx' },
|
|
]);
|
|
expect(result).toEqual({ shouldOpen: false, fileName: null });
|
|
});
|
|
|
|
it('still works when ProjectFile entries omit the optional path field', () => {
|
|
// Defensive: ProjectFile.path is optional in the API contract. Fall
|
|
// back to using `name` (which the daemon populates with the full
|
|
// project-relative path) when path is missing.
|
|
const result = decideAutoOpenAfterWrite('index.html', [
|
|
{ name: 'index.html' },
|
|
{ name: 'styles.css' },
|
|
]);
|
|
expect(result).toEqual({ shouldOpen: true, fileName: 'index.html' });
|
|
});
|
|
|
|
it('declines a basename fallback when multiple project files share the basename', () => {
|
|
const result = decideAutoOpenAfterWrite('App.jsx', [
|
|
{ name: 'src/App.jsx', path: 'src/App.jsx' },
|
|
{ name: 'lib/App.jsx', path: 'lib/App.jsx' },
|
|
]);
|
|
expect(result).toEqual({ shouldOpen: false, fileName: null });
|
|
});
|
|
|
|
it('declines to auto-open a .jsx module loaded by a sibling HTML entry', () => {
|
|
// icons.jsx is a module of a multi-file React prototype (loaded by
|
|
// "Backups Panel.html" via <script type="text/babel" src>). It has no
|
|
// standalone preview, so auto-opening it strands the user on a dead-end
|
|
// tab. Issue #2744.
|
|
const result = decideAutoOpenAfterWrite(
|
|
'icons.jsx',
|
|
[
|
|
{ name: 'icons.jsx', path: 'icons.jsx' },
|
|
{ name: 'Backups Panel.html', path: 'Backups Panel.html' },
|
|
],
|
|
{ moduleFileNames: new Set(['icons.jsx']) },
|
|
);
|
|
expect(result).toEqual({ shouldOpen: false, fileName: null });
|
|
});
|
|
|
|
it('still auto-opens the same file when no module set is supplied (back-compat)', () => {
|
|
// Proves the suppression is driven solely by moduleFileNames: the legacy
|
|
// two-arg call path is unchanged, so this test goes red if the guard ever
|
|
// suppresses unconditionally.
|
|
const result = decideAutoOpenAfterWrite('icons.jsx', [
|
|
{ name: 'icons.jsx', path: 'icons.jsx' },
|
|
]);
|
|
expect(result).toEqual({ shouldOpen: true, fileName: 'icons.jsx' });
|
|
});
|
|
|
|
it('still auto-opens a standalone artifact even when other modules exist', () => {
|
|
const result = decideAutoOpenAfterWrite(
|
|
'landing.html',
|
|
[
|
|
{ name: 'landing.html', path: 'landing.html' },
|
|
{ name: 'icons.jsx', path: 'icons.jsx' },
|
|
],
|
|
{ moduleFileNames: new Set(['icons.jsx']) },
|
|
);
|
|
expect(result).toEqual({ shouldOpen: true, fileName: 'landing.html' });
|
|
});
|
|
});
|