lwc2react

A rollup plugin for compile-time conversion of lwc components to react for easy interop. This is a proof of concept and NOT ready for use in production!

What is working:

1. Template data binding and reactive data
2. Template lists
3. Template conditionals
4. Scoped CSS
5. @api properties
6. slots (named and anonymous)
7. lifecycle methods
8. Form and input events
9. Custom events (from within templates)

What is not working:

1. Wire adapters

Example

Add the lwc2react plugin. Make sure to configure it to process your lwc modules with the include option:

import lwc from '@lwc/rollup-plugin';
import resolve from 'rollup-plugin-node-resolve';
import replace from 'rollup-plugin-replace';
import commonjs from 'rollup-plugin-commonjs';
import path from 'path';
import lwc2react from 'lwc2react';

const outputDir = path.resolve(__dirname, `./src/dist`);
const input = path.resolve(__dirname, './src/index.js');
const output = path.join(outputDir, 'app.js');
const env = process.env.NODE_ENV || 'development';

export default {
  input,
  output: {
    format: 'iife',
    file: path.join(outputDir, 'app.js'),
  },
  plugins: [
    resolve(),
    lwc({
      rootDir: "./src",
      modules: [
        {
          dir: 'modules',
        },
      ],
    }),
    commonjs(),
    replace({'process.env.NODE_ENV': JSON.stringify(env)}),
    lwc2react({
      include: "**/modules/my/**"
    }),
  ],
};

Now any react component can render an LWC component:

import React from 'react';
import MyComp from 'my/comp'; // lwc component

export default function App() {
    return <div>
        <MyComp />
    </div>
}