Atomico 2.0 Beta发布：更简洁、更强大的Web组件开发体验

项目简介

Atomico是一个轻量级的Web组件库，它让开发者能够使用类似React的语法来创建高性能的Web Components。在2.0 Beta版本中，Atomico带来了多项重大改进，包括统一的组件语法、增强的表单交互能力以及一系列新的Hooks API，旨在为开发者提供更简洁、更强大的开发体验。

统一的组件语法

在Atomico 2.0中，团队决定简化组件创建方式，只保留一种最直观的语法格式。这种语法结合了JSX的声明式编程风格和Web Components的强大功能：

import { c, css } from "atomico";

const MyComponent = c(({ message }) => <host>{message}</host>, {
    form: true,
    props: { message: String },
    styles: css`
        :host {
            font-size: 2rem;
        }
    `
});

这种语法特点包括：

1. 使用c函数创建组件，接收一个渲染函数和配置对象
2. 通过<host>标签表示组件根元素
3. 新增form配置属性，简化表单集成
4. 保持对props和样式的声明式定义

增强的表单交互能力

Atomico 2.0引入了一系列专门用于处理表单交互的Hooks，使得Web Components能够像原生表单元素一样工作。

useFormProps Hook

这个Hook自动同步组件的name和value属性，使其行为与原生表单输入元素一致：

const MyInput = c(() => {
    const [value, setValue] = useFormProps();
    return (
        <host>
            <input oninput={({ currentTarget }) => setValue(currentTarget)} />
        </host>
    );
}, {
    form: true,
    props: { name: String, value: String }
});

useFormValidity Hook

简化表单验证逻辑，可以自定义验证规则或委托给其他输入元素：

const MyInput = c(() => {
    const [value = "", setValue] = useFormProps();
    const ref = useRef<HTMLInputElement>();
    const [, validity] = useFormValidity(
        () => delegateValidity(ref.current),
        [value]
    );
    return (
        <host>
            <span>{!validity.valid && "🔴"}</span>
            <input ref={ref} required minLength={3} />
        </host>
    );
});

其他表单相关Hooks

• useFormValue: 手动控制表单值，适合复杂场景
• useFormSubmit: 监听表单提交事件
• useFormAssociated: 检测组件是否与表单关联
• useFormDisabled: 处理禁用状态
• useFormReset: 响应表单重置事件

新增核心Hooks

除了表单相关Hooks，Atomico 2.0还引入了几个实用的核心Hooks：

useRender Hook

特别适用于在组件中渲染内容：

useRender(() => <img src={url} />, [url]);

useSlot Hook

获取插槽中的子节点列表：

const children = useSlot(ref);
return <host><slot ref={ref} /></host>;

useListener Hook

简化事件监听逻辑：

useListener(ref, "click", (event) => {
    console.log("Click", event.target);
});

新的事件属性类型

Atomico 2.0引入了一种新的事件属性类型，简化自定义事件的创建：

const MyButton = c(
    ({ clickOnMyButton }) => <host><button onclick={clickOnMyButton}>Click</button></host>,
    {
        props: { clickOnMyButton: event() }
    }
);

重大变更

1. SSR支持移除：服务端渲染功能不再包含在核心库中，未来将作为独立包提供
2. html标签移除：模板字符串语法被移除，专注于JSX语法支持
3. useReducer移除：简化核心API，推荐使用useState和useProp处理状态

总结

Atomico 2.0 Beta通过简化API、增强表单支持和引入新Hooks，为Web Components开发带来了更优雅的解决方案。这些改进使开发者能够更轻松地创建功能丰富、与标准Web平台深度集成的自定义元素。对于现有项目，需要注意一些破坏性变更，但整体上这些变化为框架的未来发展奠定了更坚实的基础。