I have many repos (e.g. A, B, C, D, ...) using the same other repo (e.g. X) as a submodule.
I use Next.js to export static html pages for each of the repo A, B, C and D. When I make a change to repo X, I need to rebuild each (re-export static html pages for each) of the repo A, B, C, D (again, each of which uses repo X as a submodule) and then redeploy those static html pages to Firebase hosting. That takes a long time, since I actually have not 4 (A, B, C, D) but 20 repos using X as a submodule.
What I would like to do is, and forgive my terminology I’m new to this, to “compile”/”package” all of the code from repo X (to something like X.js ??), serve that from a server (e.g. https://cdn.com/X.js) and let it be dynamically loaded by each of the static html pages exported from repo A, B, C and D.
The goal is that I wouldn’t anymore use X as submodule of repo A, B, C and D and I wouldn’t have to re-export static html pages for each of the repo A, B, C and D every time I make a change to repo X. When making a change to repo X, I would only have to “re-compile”/”re-package” X.js and upload it to https://cdn.com/X.js, and then all the static html pages would start using the latest version of X upon being loaded in the browser.
Something like:
Say the repo X includes a many files such as Welcome.js:
export default function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
And then have, in Next.js, pages that look something like pages/index.js:
import Head from 'next/head';
...
return (
<div>
<Head>
<script
async
src="https://cdn.com/X.js"
></script>
</Head>
// The component Welcome coming from X.js - could it be accessed like that?
<Welcome name={“Pat”}/>
</div>);
Is this even possible? What I don’t know how to do is the parts: “compile”/”package” all of the code (react components) from repo X and then access them from the pages to be statically exported.