Bundle React library to UMD using a modern bundler

135 Views Asked by At

I have a Typescript react component/library

// src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Image, Shimmer } from 'react-shimmer';

function App() {
  return (
    <div>
      <Image
        src="https://source.unsplash.com/random/800x600"
        fallback={<Shimmer width={800} height={600} />}
      />
    </div>
  );
}

const render = (id: string) => ReactDOM.render(<App />, document.getElementById(id));

export default render;

I want it to be compiled to UMD format, to be consumed in HTML

// index.html
<!DOCTYPE html>
<html>
  <body>
    <div id="app"></div>
    <script type="text/javascript" src="./compiled.js">
        render('app');
    </script>
  </body>
</html>

Preferably I want to use a modern bundler like tsup. Because webpack just scares me.

Is this possible?

0

There are 0 best solutions below