feat: add vue.customElements config to skip component resolution

[cossssmin]

Problem

Hand-written non-HTML tags — VML (v:*) and Office (o:*) markup inside MSO conditional comments — get compiled as Vue components, so the SSR renderer emits a Failed to resolve component: v:group warning for each one. There was no way to opt them out: the compiler's isCustomElement was hardcoded to amp-* and not exposed through config.

Change

Add a vue.customElements option so users can mark extra tags as native custom elements. Matching tags skip component resolution — they render verbatim (no warning) while their Tailwind classes are still scanned.

// maizzle.config.ts
export default defineConfig({
  vue: {
    customElements: [/^v:/, /^o:/],
  },
})

Accepts an exact tag name, a RegExp, an array of either, or a predicate (tag) => boolean. It composes with the built-in amp-* matcher, which stays always-native regardless.

Details

• VueConfig.customElements type + JSDoc; re-exported VueConfig.
• toCustomElementPredicate() normalizer in createRenderer, folded into isCustomElement as tag.startsWith('amp-') || isUserCustomElement(tag).
• Threaded config.vue?.customElements through every renderer entry point: build, serve (initial + restart), buildWorker, render, prepare.

Tests

6 new cases in src/tests/render/vue.test.ts: RegExp / exact-string / predicate matching, verbatim render with attributes preserved, a component-collision proof that a marked tag bypasses resolution (vs. resolving by default), and amp-* staying native alongside a custom-element matcher. Full suite green (1766 passed), lint clean.

Docs PR to follow in maizzle/maizzle.com.

Summary by CodeRabbit

• New Features

  • Added Vue custom-element configuration support across rendering, builds, and development serving.
  • Custom elements can be identified by exact names, regular expressions, lists, or matching functions.
  • Matching elements bypass Vue component resolution while preserving their attributes and classes.
  • Existing native handling for amp-* elements remains supported.

• Documentation

  • Exposed the Vue configuration type for public use.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 6b2d1e40-4afa-4c6a-bc3a-1b4bf48c111c

📥 Commits

Reviewing files that changed from the base of the PR and between e890b17 and b8630c9.

📒 Files selected for processing (2)

• src/render/createRenderer.ts
• src/tests/render/vue.test.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• src/tests/render/vue.test.ts

---

📝 Walkthrough

Walkthrough

The renderer now accepts Vue customElements configuration. It supports exact names, regular expressions, arrays, and predicate functions. Renderer creation paths pass this configuration, and tests verify native rendering and component-resolution behavior.

Changes

Vue custom-elements support

Layer / File(s)	Summary
Custom-elements configuration contract src/types/config.ts, src/types/index.ts	VueConfig.customElements supports strings, regular expressions, arrays, and predicate functions. VueConfig is publicly re-exported.
Custom-element matching src/render/createRenderer.ts	createRenderer converts the configuration into a predicate. Matching tags and amp-* tags bypass Vue component resolution. Global and sticky regular expressions are cloned before matching.
Renderer configuration propagation src/build.ts, src/prepare.ts, src/render/index.ts, src/render/parallel/buildWorker.ts, src/serve.ts	Renderer creation paths pass config.vue?.customElements, including renderer recreation after configuration changes.
Custom-element rendering coverage src/tests/render/vue.test.ts	Tests cover matcher types, native rendering, attribute and class preservation, component-resolution bypass, regular-expression state handling, and amp-* handling.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant VueConfig
  participant createRenderer
  participant VueResolver
  participant NativeElement
  VueConfig->>createRenderer: Pass customElements
  createRenderer->>VueResolver: Apply custom-element predicate
  VueResolver->>NativeElement: Render matching tags natively

Loading

Possibly related PRs

• maizzle/framework#1741: Both PRs modify renderer creation and parallel build worker configuration.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the addition of the vue.customElements configuration that skips Vue component resolution.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/vue-custom-elements

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/render/createRenderer.ts`:
- Around line 87-92: Update the tag-matching callback returned by the pattern
setup to prevent shared global or sticky RegExp state from persisting between
calls: in the flow around regexes and the returned matcher, clone configured
RegExp instances or reset each regex’s lastIndex before every re.test(tag).
Preserve exact-match behavior and add regression coverage for global and sticky
vue.customElements patterns matching successive tags.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 04134625-df7a-40f5-9420-766afec630f0

📥 Commits

Reviewing files that changed from the base of the PR and between 8237e78 and e890b17.

📒 Files selected for processing (9)

• src/build.ts
• src/prepare.ts
• src/render/createRenderer.ts
• src/render/index.ts
• src/render/parallel/buildWorker.ts
• src/serve.ts
• src/tests/render/vue.test.ts
• src/types/config.ts
• src/types/index.ts