Integration and module federation

React integration

import React from 'react';
import './my-web-component';

interface WebComponentProps {
  title: string;
  onCustomEvent?: (event: CustomEvent) => void;
}

export const WebComponentWrapper: React.FC<WebComponentProps> = ({ 
  title, 
  onCustomEvent 
}) => {
  const ref = useRef<HTMLElement>(null);

  useEffect(() => {
    const element = ref.current;
    if (element && onCustomEvent) {
      element.addEventListener('custom-event', onCustomEvent);
      return () => element.removeEventListener('custom-event', onCustomEvent);
    }
  }, [onCustomEvent]);

  return <my-web-component ref={ref} title={title} />;
};

Vue integration

<template>
  <my-web-component
    :title="title"
    @custom-event="handleEvent"
  />
</template>

<script setup>
import './my-web-component';

const props = defineProps(['title']);
const handleEvent = (event) => {
  console.log('Custom event:', event.detail);
};
</script>

Module federation

// webpack.config.js
const ModuleFederationPlugin = require('@module-federation/webpack');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'webComponentLibrary',
      filename: 'remoteEntry.js',
      exposes: {
        './MyComponent': './src/components/my-component.ts'
      },
      shared: ['lit']
    })
  ]
};