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
Conversation
…ML, and test authors Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What changed and why
The
oobee-genomeREADME had missing sections, incorrect code examples, and no guidance for developers writing tests against injecteddata-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.jsexportsoobeeAngularPlugin, a function that wraps an Angular webpack config. Angular CLI does not expose its webpack config directly — you need@angular-builders/custom-webpackto 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, createwebpack.config.oobee.js, addbuild-oobeeandserve-oobeetargets toangular.json.2. Webpack — factory-call pattern corrected
adapters/webpack.jsexportsoobeeWebpackLoader, a factory you call with options to get back the actual loader function. The old README usedloader: require.resolve(...)+options: {...}, which invokes the factory with the file source string as the argument — the loader is never called correctly. Fixed touse: [oobeeWebpackLoader({ verbose: true })].3. esbuild and Rollup sections added (were completely invisible)
Both adapters exist in the package and are in
package.json'sexportsmap 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-reactor@vitejs/plugin-vue, Vite cannot parse JSX/TSX or.vueSFCs — the dev server crashes immediately. Split into two<details>blocks (React, Vue) each showing the correct config with both plugins present. Added a note thatoobeeVitePluginusesapply: 'serve'internally so it cannot run duringvite buildregardless 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 thatdata-oobee-pathis an absolute machine path — test selectors should use*=(contains) not=(exact) for CI compatibility.6. Options reference table added (was missing)
core/options.jsdefines six options. Onlyverbosewas ever shown in examples. Added a full reference table covering all six:enabled,verbose,attributePrefix,includePatterns,excludePatterns,blacklist. Key callouts for test authors:excludePatternsdefaults exclude.spec.tsxand.test.tsxso test component trees won't get attributes unless those patterns are removed;attributePrefixcan be changed ifdata-oobee-*conflicts with existing attributes.7. Next.js setup replaced destructive
cpwith env-var guardThe old
dev:oobeescript wascp next.config.oobee.js next.config.js, which silently overwrites the production config. Ifnpm run buildruns immediately after, oobee ships to production. The command also fails on Windows. Replaced with an environment variable guard insidenext.config.js—OOBEE=1is only set bynpm run dev:oobee,npm run buildnever 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 changedTest plan
data-oobee-*attributes appear in DevTools@angular-builders/custom-webpackwires up correctly and attributes appearnpm run buildproduces nodata-oobee-*attributes in the outputlocator('[data-oobee-path*="ComponentName"]')against a dev server with oobee enabled — confirm selector resolves