TS/JS 开发入口

TS/JS 是完整的组件开发入口：可以定义 Artifact 工厂、创建多个隔离实例、编写脚本、导入精确组件、定义父子结构与公开 surface，再生成新的 Artifact Export、ESM 和 Web Component。

浏览器只执行 JavaScript。TypeScript 提供类型和作者体验，必须在开发或发布阶段编译，不能把 .ts 文件当成浏览器原生模块直接运行。

挂载一个 Artifact

import {
  createFlamoRuntime,
  defineFlamoArtifact,
} from '@flamo/runtime';

const artifact = defineFlamoArtifact(artifactInput);
const runtime = createFlamoRuntime();
const instance = await runtime.mount('#app', artifact);

instance.set({ label: '开始' });

// 宿主卸载时由持有它的 Runtime 释放实例资源。
await runtime.destroy(instance);

defineFlamoArtifact() 规范化输入，createFlamoRuntime() 创建资源与实例边界，runtime.mount() 在创建 Instance 时绑定目标并返回 FlamoInstance。FlamoInstance 本身没有 mount()；也可以使用等价写法 runtime.create({ target: '#app', artifact })。一个 Runtime 可以管理多个实例；实例通过 scoped identity、owner ledger 和生命周期保持隔离。

定义与组合组件

需要把多个组件封装为新组件时，在定义层使用 exact Component Ref 与 Composition IR：

import {
  defineFlamoComponent,
  compileResolvedFlamoComposition,
} from '@flamo/tools';

const definition = defineFlamoComponent({
  id: 'SearchPanel',
  children,
  surface,
  routes,
});

const compiled = await compileResolvedFlamoComposition(definition, resolver);

编译结果包含 canonical Artifact、dependency lock 和 compiler receipt。只有经过 verify、package 与 promote，组合结果才成为具有稳定 Component Ref 的新发布；仅在 JavaScript 中 export 一个对象不等于发布 Flamo 组件。

选哪个 API

• 只运行现有 Artifact：使用 @flamo/runtime。
• 为当前实例临时增加或替换 child：使用 mountChild()、reconcileChildren()、swapChild()。
• 要保存、复用和发布组合：使用 @flamo/tools 的定义层 API 与 exact resolver。
• 要了解参数与返回值：查看 API Reference。

继续阅读纯 TS/JS 开发可了解组合、动态结构与宿主服务边界。