@baihuiru/trans-components
Advanced tools
Transform React and Vue components to Web Components for cross-framework sharing
一个强大的组件转换库，支持将 React 和 Vue 组件转换为 Web Components，实现真正的跨框架组件共享。
npm install @trans/components
# 如果使用 React 组件转换
npm install react react-dom
# 如果使用 Vue 组件转换
npm install vue
import React from 'react';
import { transformAndRegisterReactComponent } from '@trans/components';
// 你的 React 组件
const MyButton = ({ text, onClick }) => (
<button onClick={onClick}>{text}</button>
);
// 转换配置
const config = {
tagName: 'my-button',
props: {
text: 'Click me'
},
events: ['click']
};
// 转换并注册为 Web Component
transformAndRegisterReactComponent(MyButton, config);
import { defineComponent } from 'vue';
import { transformAndRegisterVueComponent } from '@trans/components';
// 你的 Vue 组件
const MyCounter = defineComponent({
props: ['initialValue'],
data() {
return { count: this.initialValue || 0 };
},
template: '<div>{{ count }}</div>'
});
// 转换配置
const config = {
tagName: 'my-counter',
props: {
initialValue: 0
},
events: ['change']
};
// 转换并注册为 Web Component
transformAndRegisterVueComponent(MyCounter, config);
<!DOCTYPE html>
<html>
<head>
<script type="module" src="your-components.js"></script>
</head>
<body>
<!-- 使用转换后的 Web Components -->
<my-button text="Hello World"></my-button>
<my-counter initial-value="10"></my-counter>
<script>
// 监听事件
document.querySelector('my-button').addEventListener('click', () => {
console.log('Button clicked!');
});
document.querySelector('my-counter').addEventListener('change', (e) => {
console.log('Counter changed:', e.detail);
});
</script>
</body>
</html>
transformComponent(component, config, framework)转换组件为 Web Component 类。
import { transformComponent } from '@trans/components';
const WebComponent = transformComponent(MyComponent, config, 'react');
customElements.define('my-component', WebComponent);
transformAndRegister(component, config, framework)转换组件并自动注册为 Web Component。
import { transformAndRegister } from '@trans/components';
transformAndRegister(MyComponent, config, 'react');
autoRegister(components)批量转换和注册多个组件。
import { autoRegister } from '@trans/components';
autoRegister([
{ component: ReactButton, config: buttonConfig, framework: 'react' },
{ component: VueCounter, config: counterConfig, framework: 'vue' }
]);
import {
transformReactComponent,
transformAndRegisterReactComponent
} from '@trans/components';
// 仅转换
const WebComponent = transformReactComponent(MyComponent, config);
// 转换并注册
transformAndRegisterReactComponent(MyComponent, config);
import {
transformVueComponent,
transformAndRegisterVueComponent
} from '@trans/components';
// 仅转换
const WebComponent = transformVueComponent(MyComponent, config);
// 转换并注册
transformAndRegisterVueComponent(MyComponent, config);
interface ComponentConfig {
tagName: string; // Web Component 标签名 (必须包含连字符)
props?: Record<string, any>; // 默认属性值
events?: string[]; // 支持的事件列表
styles?: string; // CSS 样式
shadow?: boolean; // 是否使用 Shadow DOM (默认: true)
attributes?: Record<string, string>; // HTML 属性映射
}
const config = {
tagName: 'my-component',
props: {
title: 'Default Title',
count: 0,
disabled: false
},
events: ['click', 'change', 'custom-event'],
styles: `
:host {
display: block;
padding: 16px;
}
.container {
border: 1px solid #ccc;
border-radius: 4px;
}
`,
shadow: true,
attributes: {
'aria-label': 'My Component'
}
};
function App() {
const handleClick = () => {
console.log('Clicked!');
};
return (
<div>
<my-button text="React App" onCustomEvent={handleClick} />
</div>
);
}
<template>
<div>
<my-button text="Vue App" @custom-event="handleClick" />
</div>
</template>
<script>
export default {
methods: {
handleClick() {
console.log('Clicked!');
}
}
}
</script>
// app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}
<!-- app.component.html -->
<my-button text="Angular App" (customEvent)="handleClick()"></my-button>
import { BaseTransformer, ComponentConfig } from '@trans/components';
class CustomTransformer extends BaseTransformer {
name = 'custom-transformer';
framework = 'custom' as const;
transform(component: any, config: ComponentConfig) {
// 自定义转换逻辑
return this.createWebComponent(component, config, (element) => {
// 自定义渲染逻辑
});
}
}
// 注册自定义转换器
import { getRegistry } from '@trans/components';
const registry = getRegistry();
registry.register(new CustomTransformer());
const component = document.querySelector('my-component');
// 更新属性
component.title = 'New Title';
component.count = 10;
// 监听属性变化
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.type === 'attributes') {
console.log('Attribute changed:', mutation.attributeName);
}
});
});
observer.observe(component, { attributes: true });
my-app-buttoncustom-eventconst config = {
tagName: 'my-component',
styles: `
/* 使用 :host 选择器设置组件容器样式 */
:host {
display: block;
--primary-color: #1890ff;
}
/* 使用 CSS 变量实现主题定制 */
.button {
background: var(--primary-color);
}
/* 响应式设计 */
@media (max-width: 768px) {
:host {
padding: 8px;
}
}
`
};
// 组件内部触发事件
const handleClick = () => {
// 触发自定义事件
element.dispatchEvent(new CustomEvent('custom-click', {
detail: { value: 'some data' },
bubbles: true,
composed: true // 允许事件穿越 Shadow DOM 边界
}));
};
shadow: false 如果不需要样式隔离组件不显示
样式不生效
:host 选择器事件不触发
composed: trueTypeScript 类型错误
欢迎贡献代码！请阅读 CONTRIBUTING.md 了解详细信息。
MIT License - 详见 LICENSE 文件。
FAQs
Transform React and Vue components to Web Components for cross-framework sharing
The npm package @baihuiru/trans-components receives a total of 3 weekly downloads. As such, @baihuiru/trans-components popularity was classified as not popular.
We found that @baihuiru/trans-components demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
A large-scale campaign abused GitHub Actions in compromised repositories to exploit CVE-2026-41940 in cPanel and WHM and steal server credentials.
Security News
Five frontier LLMs generated the same nonexistent package names, leaving 53 available for potential slopsquatting across PyPI and npm.
Security News
The White House’s Gold Eagle Initiative aims to coordinate AI-discovered vulnerabilities, validate findings, and accelerate patching across critical software.