Skip to content

docs(oobee-genome): fix integration guide — correct broken configs, add Angular/HTML/esbuild/Rollup, add test-author guidance#5

Open
younglim wants to merge 1 commit into
masterfrom
improv/genome-lib-integration
Open

docs(oobee-genome): fix integration guide — correct broken configs, add Angular/HTML/esbuild/Rollup, add test-author guidance#5
younglim wants to merge 1 commit into
masterfrom
improv/genome-lib-integration

Conversation

@younglim

@younglim younglim commented May 7, 2026

Copy link
Copy Markdown
Collaborator

What changed and why

The oobee-genome README had missing sections, incorrect code examples, and no guidance for developers writing tests against injected data-oobee-* attributes. This PR fixes all of that based on a direct audit of the adapter source code.


Fixes

1. Angular — dedicated section added (was completely missing)

adapters/angular.js exports oobeeAngularPlugin, a function that wraps an Angular webpack config. Angular CLI does not expose its webpack config directly — you need @angular-builders/custom-webpack to hook into it. The README previously listed Angular under the Vite and Webpack sections, but neither setup works for Angular CLI. A new <details> block covers the full setup: install the custom builder, create webpack.config.oobee.js, add build-oobee and serve-oobee targets to angular.json.

2. Webpack — factory-call pattern corrected

adapters/webpack.js exports oobeeWebpackLoader, a factory you call with options to get back the actual loader function. The old README used loader: require.resolve(...) + options: {...}, which invokes the factory with the file source string as the argument — the loader is never called correctly. Fixed to use: [oobeeWebpackLoader({ verbose: true })].

3. esbuild and Rollup sections added (were completely invisible)

Both adapters exist in the package and are in package.json's exports map but appeared nowhere in the README. The esbuild adapter is the correct path for plain HTML projects. New <details> blocks cover both. Note documented: esbuild only processes .tsx, .jsx, .vue, and .html — not plain .ts/.js — which would otherwise produce silent no-output.

4. Vite configs for React and Vue were broken

The existing Vite example only included oobeeVitePlugin. Without @vitejs/plugin-react or @vitejs/plugin-vue, Vite cannot parse JSX/TSX or .vue SFCs — the dev server crashes immediately. Split into two <details> blocks (React, Vue) each showing the correct config with both plugins present. Added a note that oobeeVitePlugin uses apply: 'serve' internally so it cannot run during vite build regardless of which config file is used.

5. DOM output example and test-author guidance added (was missing entirely)

The README never showed what the injected output looks like. Developers writing Playwright or Cypress tests had no way to know the attribute names without reading the transformer source. A new Section 5 shows the three injected attributes (data-oobee-path, data-oobee-line, data-oobee-column), a concrete rendered HTML example, Playwright and Cypress selector examples, and a callout that data-oobee-path is an absolute machine path — test selectors should use *= (contains) not = (exact) for CI compatibility.

6. Options reference table added (was missing)

core/options.js defines six options. Only verbose was ever shown in examples. Added a full reference table covering all six: enabled, verbose, attributePrefix, includePatterns, excludePatterns, blacklist. Key callouts for test authors: excludePatterns defaults exclude .spec.tsx and .test.tsx so test component trees won't get attributes unless those patterns are removed; attributePrefix can be changed if data-oobee-* conflicts with existing attributes.

7. Next.js setup replaced destructive cp with env-var guard

The old dev:oobee script was cp next.config.oobee.js next.config.js, which silently overwrites the production config. If npm run build runs immediately after, oobee ships to production. The command also fails on Windows. Replaced with an environment variable guard inside next.config.jsOOBEE=1 is only set by npm run dev:oobee, npm run build never sets it, and the file is never modified between modes. Added Windows PowerShell equivalent.

8. Verification steps added

Adapters fail silently by design — they return the original source on error. A developer can complete every setup step and see no errors while oobee produces no output. Added a Verify It's Working section: start the server, open DevTools, confirm data-oobee-* attributes are visible. Added diagnostic steps for both "no transform log lines" (adapter not loading) and "transform lines appear but no DOM attributes" (file excluded by pattern).


Files changed

  • oobee-genome/README.md — only file changed

Test plan

  • Follow the Vite React setup against a fresh Vite React project — confirm data-oobee-* attributes appear in DevTools
  • Follow the Angular setup against an Angular CLI project — confirm @angular-builders/custom-webpack wires up correctly and attributes appear
  • Follow the Next.js env-var guard setup — confirm npm run build produces no data-oobee-* attributes in the output
  • Write a Playwright locator('[data-oobee-path*="ComponentName"]') against a dev server with oobee enabled — confirm selector resolves

…ML, and test authors

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant