The other week, @petersalomonsen.near transferred [near-bos-webcomponent](https://github.com/petersalomonsen/near-bos-webcomponent) repository over to @nearbuilders.near. This was after merging a [pull request](https://github.com/NEARBuilders/near-bos-webcomponent/pull/4) to enable customizing the default widget when you [deploy to web4](https://near.social/mob.near/widget/MainPage.N.Post.Page?accountId=efiz.near&blockHeight=113981432). --- From this, I've been able to bootstrap web components with [near-social-vm](https://github.com/NearSocial/VM) and speciality packages installed, such as: * [trylivepeer.near.page](https://trylivepeer.near.page) - [Livepeer](https://livepeer.org/) - exposes `Player` and `Broadcast` custom elements through the VM. ([repo](https://github.com/NEARBuilders/trylivepeer.near)) * [tldraw.near.page](https://tldraw.near.page) - [tldraw](https://tldraw.dev/) - exposes `Canvas` through the VM. ([repo](https://github.com/NEARBuilders/tldraw.near)) --- The new version of [bos-workspace](https://github.com/NEARBuilders/bos-workspace) allows you to provide the path to a custom `dist` via the `--gateway` flag, so develop locally using these web components. `bos-workspace ws dev -g /gateway/dist` --- I just opened another PR to near-bos-wc to upgrade it to React Router v6.4 ([What's new in v6.4?](https://reactrouter.com/en/main/start/overview) -- throwback to [a post from the beginning of the year](https://near.social/mob.near/widget/MainPage.N.Post.Page?accountId=efiz.near&blockHeight=110572794)). Now our App looks like this: ```javascript const router = createBrowserRouter([ { path: "/", element: ( <Viewer widgetSrc={props.src} code={props.code} initialProps={props.initialProps} /> ), }, { path: "/*", element: <Viewer /> }, ]); return <RouterProvider router={router} />; ``` --- Reminds me of this App module we have: [`devs.near/widget/App`](https://near.social/devs.near/widget/App), which takes a JSON config with a "routes" array, it's the pattern behind my ETH Denver hackathon project [event.app.create](https://devfolio.co/projects/eventsappcreate-ebe8). ```javascript const config = { ..., layout: { src: "devs.near/widget/Layout", props: { variant: "standard", }, }, blocks: { // these get passed to the layout and children Header: () => ( // customize your header <Widget src="events.efiz.near/widget/components.Navbar" props={{ routes: config.router.routes, ...passProps }} /> ), Footer: () => <></>, // customize your footer }, router: { param: "page", routes: { home: { path: "events.efiz.near/widget/page.home", blockHeight: "final", init: { name: "Home", }, default: true, }, }, }, }; return <Widget src="every.near/widget/app.view" props={{ config }} /> ``` --- The other week, @wendersonpires.near built [Alem](https://near.social/alem-lib.near/widget/Index). Alem introduces this pretty robust "compiler", which compiles all of your widgets into a single file. Among other things, it provides a "useStore" hook to all of its components, uniquely utilizing the Storage API's privateSet and privateGet methods. I'm not sure we want to compile all widgets to a single file, but what if we could compile into building an app module? How can we learn from [Next.js' project structure](https://nextjs.org/docs/getting-started/project-structure)? --- What if an app has dependencies, like livepeer or tldraw? @archetype-org.near --- So many possibilities... please share your thoughts below #build #everything