Feature Request: Better Monorepo Support

[petermikitsh]

Stencil version:

 @stencil/core@latest

I'm submitting a:

[ ] bug report [x] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

Example Repo: https://github.com/petermikitsh/stencil-monorepo

When trying to develop 2 Stencil Component projects as subpackages in a lerna setup, some issues arise.

Project setup: Assume two component libraries, project-a and project-b.

• project-a defines a Stencil component, a-button, that is used inside of project-b.
• Both projects were generated with the npm init stencil command).

Limitations encountered:

• When I edit the a-button component, project-b won’t pick up the changes. Have to kill and restart the server.
• ~Inside of project-b, I don’t get the typings from project-as stencil components.~ Solved: https://github.com/petermikitsh/stencil-monorepo/commit/359dc577feeabce63dfeed6fd257578cde6a2048

Expected behavior:

Seamless support for monorepos. I should be able to develop multiple component libraries side-by-side with typescript types and hot reloading.

Steps to reproduce:

• Clone example repo
• npm i && npm start
• Try performing operations like editing the a-button component, and observe that project B can't detect the changes.

[bitflower]

This is my solution to the "reload on change" requirement: https://gist.github.com/bitflower/613c19b612ffaf3f3195b12b33316034

It's not pretty or fast but it works for now. I guess it's not enough if you do quick iterations in the consumed project.

[bitflower]

This repo demonstrates additionally how to include a "Util / Commons" kinda package consumed by both Stencil component packages.

https://github.com/bitflower/stencil-lerna

[LeeBurton]

I’m seeing an increase in people using monorepos for complex projects with Lerna, and this is something that I think needs addressing sooner rather than later, to solve it in a clean way :-)

[razvangeangu]

This is my solution to reload on change using parallel and alias for a util library inside stencil using lerna.

https://github.com/razvangeangu/stencil-ds-plugins-demo

[bitflower]

Dup of #2648

Guys, let's consolidate and get this happen. Recently Adam started adding changes to support this. It still doesn't work but I think we are close.

Which "main" ticket should be keep to not spam the issues list?

CC @splitinfinities

[bitflower]

@razvangeangu Can you point to the file using parallel? I found the alias.

[splitinfinities]

Hey there, thank you for the patience getting back to you. The new team is getting started and we're working through the backlog now.

I'd like to understand the current state of the art within the community working with a Monorepo. If you have any tips, tricks, concerns, or questions, please comment what you are bumping into and how/if you hack around it.

[cymptom]

@splitinfinities I don't have any tips and tricks unfortunately, but just wanted to highlight that this is an issue for us, in exactly the way described. Our more complex components depend on library packages that are defined adjacent to our Stencil package in our monorepo. When those library packages are rebuilt, Stencil's dev server does appear to rebuild and refresh, but the changes aren't actually incorporated. To incorporate them, you need to either stop and restart the dev server, or manually kick off a Stencil dev build and refresh the browser.

This has led to much confusion as we've started bringing other developers on to our project. The fact that Stencil does rebuild and refresh the dev server misleads our developers into expecting to find their changes in the browser, and this results in a lot of unnecessary wheel-spinning and misdirected troubleshooting, as you might imagine. I've made efforts to communicate the necessary order of operations for this workflow, but it makes for a tedious process that even I get tripped up on, despite knowing exactly what needs to happen.

[bitflower]

lerna is now maintained by nx https://github.com/lerna/lerna/issues/3121

[sawden]

I'm using Stencil in combination with Turborepo and encountering the same issue when it comes to importing from other workspaces. Stencil still doesn't seem to recognize when a change has been made in an imported package.

In my research, I found the following issues that describe this problem: #1379, #2648, #2587, #1496. Are there any updates or progress regarding Stencil's support for monorepos?

I understand that open source projects like this are a huge effort and that priorities must be balanced. I'm wondering if there are plans to work on this monorepo support issues, or if there are other topics that are currently taking precedence?

Thank you in advance for any updates or advice.

[bitflower]

How do I update @rwaskiewicz ? I added a thumbs up to the OP.

Any news reg. this issue/feature ? Does Stencil 4 still have the same issues then v2 (which I'm still on)?