IPYReact sample mono-repo starter project

[paddymul]

I am looking at porting my package over to ipyreact to have a better supported buildchain.

Here is what I would like (and will stumble at points while building).

1. a single repo with python and js code
2. the JS inside that repo should be separate and look like a normal JS package to a js dev looking at it.
3. The JS should build and push to an NPM module and function as a JS module wihtout needing any of ipyreact, esbuild, backbone, or ipywidgets js code
4. The python code should use the ESM module pattern and build properly

nice to haves local-dev mode where you can write JS features and have them avaiable to IPYReact without having to publish to npm, for local development

The stack that I have very close to working

I followed a vite demo and can build a package that works (minus css) with IPYReact.

Do you have a strong preference for another JS Build stack? Is this project interesting to you? I think it will be useful for asking debugging questions even if you don't include it in official docs.

[paddymul]

I got this far. https://github.com/paddymul/ipyreact-starter

I have a react component library built with vite (that toolchain seemed to be most popular). It can be bundled with esbuild. I'm not sure if it would be possible to emit a bundled library with vite

There is a full_build.sh script which runs build in packages/ipyreact-tsxlib then builds the bundled file in packages/bundle-staging refereing packages/ipyreact-tsxlib by relative path.

Something with the module isn't working

ipyreact.define_module(
    "ipyreact-tsxlib",
    Path(__file__).parent.parent / "packages/bundled-staging/ipyreact-tsxlib.minimal.esm.js")

class Simple(ipyreact.ValueWidget):
    _module="ipyreact-tsxlib"
    _esm="""
    import confetti from "canvas-confetti";
    import * as React from "react";
    import SampleButton from "ipyreact-tsxlib";

    export default function({value, setValue}) {
        return (<div>
            <SampleButton label={"sample label"} />
            <button onClick={() => confetti() && setValue(value + 1)}>
            {value || 0} times confetti
        </button>
    </div>);
    };
    """

throws an error of

The requested module 'blob:http://localhost:8893/c37b466a-025c-4150-8469-b084e321c5e4' doesn't provide an export named: 'default'

[paddymul]

Update. I now got it to work with the rollup example from #59 . https://github.com/paddymul/ipyreact-starter/blob/main/packages/inline-notebook/all-in-one.ipynb

Yay progress. I was defining, exporting and importing my component library improperly.