Reliable component detection

[thejackshelton]

What is it about?

A way for tools to know whether something belongs to Qwik.

What's the motivation for this proposal?

RFC: Reliable Component Detection in Qwik

Problem Statement

In microfrontend and multi-framework environments, distinguishing Qwik inline components from other framework's JSX components is challenging and currently relies on brittle implementation details.

Current Issues:

1. Visual Similarity: Inline Qwik components look identical to React/Solid/Preact components:

// Could be Qwik, React, Solid, or Preact
function InlineComp() {
  return <div>Hey!</div>
}

2. Brittle Detection: Current detection in Qwik Astro relies on checking internal JSX transform functions:

• Looks for _jsxS, _jsxC, _jsxQ
• These internals may change (e.g., in v2)
• Could break existing applications

Proposed Solution / Feature

Proposed Solution

Add a reliable component detection API through optimizer annotations.

API Design

import { isComponent } from '@qwik.dev/core'

// Option 1: Boolean return
const isQwikComponent = isComponent(MyInlineComp) // returns boolean for both inline and component$

isComponent(InlineComp) // true

isComponent(QwikComp) // true

isComponent(ReactComp) // false

// Option 2: Enum return
const componentType = isComponent(MyInlineComp) // returns enum to differentiate inline and component$

Benefits

1. Reliable Detection: Not dependent on internal implementation details
2. Framework Agnostic: Works in any environment
3. Future Proof: Changes to internal API's will not randomly break this functionality (unless core itself is broken)

Use Cases

• Microfrontends mixing multiple frameworks
• Meta-frameworks like Astro
• Third-party tools and libraries
• Development tools and debugging

Implementation Details

1. Optimizer adds annotations to components during build
2. isComponent helper reads these annotations
3. Works with both inline and component$ components

Migration Strategy

Existing applications using the JSX transform detection can gradually migrate to the new API when upgrading to the version that includes this feature.

Open Questions

1. Performance implications of annotations?
2. Bundle size impact?

Next Steps

1. Implement optimizer annotations
2. Add isComponent helper
3. Update documentation
4. Migrate Qwik Astro and other libraries that check for Qwik components to use new API

Links / References

No response

[mhevery]

This is a reasonable request. I think a better API may be something like this:

getComponentType(fn: Function): 'QwikComponent'|'QwikInlineComponent'|'Unknown'

It is unclear to me how one could tell react vs qwik inline component, since qwik is just a function (just like React)

function QwikInlineComponent() {
  return "some string";
}

// OR
function QwikInlineComponent() {
  return callSomeHelperFunctionWhichReturnsJSX();
}

In the above case, there would be no easy way for us to detect that is the case.