动态组件（Component）

1. 直接切换原生标签和组件定义

这里显式导入并使用 <Component>，is 可以在字符串标签名和函数组件之间来回切换。

children 已透传

当前 is： article

验证点：native element、直接组件定义、children 透传。

说明：切到 SalesCard 时，tone 也会跟着透传给目标组件。

2. 编译期有限组件注册表

下面这个小区域为 <Component> 显式提供有限 registry，编译器可以提前确定所有可能的组件工厂。

运行时注册

CardView

metric 键在有限 registry 中解析到 RegisteredMetric

children 一样会透传

registry 直接写在 <Component> 上，不依赖全局字符串注册或运行时工厂查找。

编译器会把 registry 降为有限分支，再决定最终渲染哪个组件。

这也顺带验证了字符串名路径下的 children 透传。

注意：如果 is 最终解析成原生 input、select、textarea 之类的节点，写在 <Component> 上的 v-model / r-model 不能像静态原生标签那样在编译期展开，应该在最终原生节点处处理。

import {
  Component,
  type FC,
  ref,
} from '@rue-js/rue';

const SalesCard: FC<{ title: string; value: string; detail: string }> = (props) => (
  <article className="rounded-box border border-primary/25 bg-primary/10 p-4">
    <div className="text-xs uppercase tracking-[0.22em] opacity-60">{props.title}</div>
    <div className="mt-2 text-3xl font-semibold">{props.value}</div>
    <div className="mt-1 text-sm opacity-75">{props.detail}</div>
    <div className="mt-4">{props.children}</div>
  </article>
);

const StatusStrip: FC<{ title: string; detail: string }> = (props) => (
  <section className="rounded-box border border-info/25 bg-info/10 p-4">
    <div className="font-semibold">{props.title}</div>
    <div className="text-sm opacity-75">{props.detail}</div>
    <div className="mt-4">{props.children}</div>
  </section>
);

const RegisteredMetric: FC<{ title: string; value?: string; detail: string }> = (props) => (
  <article className="rounded-box border border-secondary/25 bg-secondary/10 p-4">
    <div className="text-xs uppercase tracking-[0.22em] opacity-60">{props.title}</div>
    <div className="mt-2 text-2xl font-semibold">{props.value ?? 'Registered'}</div>
    <div className="mt-1 text-sm opacity-75">{props.detail}</div>
    <div className="mt-4">{props.children}</div>
  </article>
);

const RegisteredNotice: FC<{ title: string; detail: string }> = (props) => (
  <section className="rounded-box border border-warning/35 bg-warning/15 p-4">
    <div className="font-semibold">{props.title}</div>
    <div className="mt-1 text-sm opacity-75">{props.detail}</div>
    <div className="mt-4">{props.children}</div>
  </section>
);

const Demo: FC = () => {
  const shell = ref<'native' | 'card' | 'notice'>('native');
  const registryMode = ref<'metric' | 'notice'>('metric');

  const resolveProps = () =>
    shell.value === 'native'
      ? {
          className: 'rounded-box border border-base-300 bg-base-100 p-4 shadow-sm',
        }
      : shell.value === 'card'
        ? {
            title: '今日成交额',
            value: '¥ 128,400',
            detail: '比昨日 +8.2%',
          }
        : {
            title: '状态切换',
            detail: '当前目标由 is 决定',
          };

  return (
    <div className="grid gap-6">
      <Component
        is={shell.value}
        registry={{ native: NativeArticle, card: SalesCard, notice: StatusStrip }}
        {...resolveProps()}
      >
        <span className="badge badge-outline badge-sm">children 已透传</span>
      </Component>

      <Component
        is={registryMode.value}
        registry={{ metric: RegisteredMetric, notice: RegisteredNotice }}
        title="运行时注册"
        value="CardView"
        detail="通过字符串名解析到已注册组件"
      >
        <span className="badge badge-outline badge-sm">children 一样会透传</span>
      </Component>
    </div>
  );
};

export default Demo;