Hi, I'm Sergio A. Arevalo Soria ๐
sasoria / astro-microfrontends Goto Github PK
View Code? Open in Web Editor NEWClient-side composition of microfrontends using Astro
License: MIT License
Client-side composition of microfrontends using Astro
License: MIT License
Thanks for a great blog post and an excellent starting point!
I was plying around with it and set up a solution where I removed the server and served the bundle.js using vite preview.
Are you open for PRs?
There is this shell build failure since Astro update to version 4:
s\astro-microfrontends\shell> npm run build
> @example/[email protected] build
> astro build
00:48:17 [build] output: "static"
00:48:17 [build] directory: C:\work\microfrontends\astro-microfrontends\shell\dist\
00:48:17 [build] Collecting build info...
00:48:17 [build] โ Completed in 250ms.
00:48:17 [build] Building static entrypoints...
00:48:20 [build] โ Completed in 3.39s.
building client (vite)
00:48:20 [vite] โ 4 modules transformed.
00:48:20 [ERROR] [vite] [vite:build-import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. If you use tsconfig.json, make sure to not set jsx to preserve.
file: C:/work/microfrontends/astro-microfrontends/shell/src/components/SolidComponent.jsx:7:7
5: <>
6: <MicroFrontendC />
7: </>
^
8: );
9: }
transforming (6) node_modules\@astrojs\react\static-html.jsFailed to parse source for import analysis because the content contains invalid JS syntax. If you use tsconfig.json, make sure to not set jsx to preserve.
Stack trace:
at error (file:///C:/work/microfrontends/astro-microfrontends/shell/node_modules/astro/node_modules/rollup/dist/es/shared/parseAst.js:337:30)
at Object.error (file:///C:/work/microfrontends/astro-microfrontends/shell/node_modules/astro/node_modules/rollup/dist/es/shared/node-entry.js:17530:42)
I think this is due to the Astro upgrade because I also have this problem in my forked version:
it worked with Astro 2, but fails with the same error with Astro 4.
This is a nice approach, I would like to use microfrontends in Astro and started to experiment with your code.
Tried to add some interactivity to the React app-a:
import React, { useState } from "react";
import "./App.css";
const App = () => {
const [count, setCount] = useState(0);
return (
<section className="app-a">
<h1 onClick={() => setCount((c) => (c + 1))} style={{ cursor: "pointer" }}>App a {count}</h1>
</section>
)
};
export default App;
and unfortunately this is not working at all.
Running the server and the astro app the astro app cannot run the React microforntend, the error is:
react.production.min.js:25 Uncaught TypeError: Cannot read properties of null (reading 'useState')
at n.useState (react.production.min.js:25:394)
at j (bundle.js:9:655)
at renderWithHooks (react-dom.development.js:16305:18)
at mountIndeterminateComponent (react-dom.development.js:20074:13)
and this is the same even if I remove the external references from the build process and include react in the bundle.
I tried to fork your project and add nanostores in order to be able to share states between microfrontends, it doesnt works, when I update my state from my X microfronted and try to retrieve the state from another Y microfrontend (usign useEffect to see realtime results) im not able to get the updated value.
Do you have any suggestion for it? The only way that works is to use the PostMessage method
I also tried this with solid and it is much better. This works fine:
import styles from "./App.module.css";
import { createSignal } from "solid-js";
function App() {
const [count, setCount] = createSignal(0);
return (
<section className={styles["app-c"]}>
<h1 onClick={() => setCount(c => c + 1)} style={{ cursor: "pointer"}}>App c {count()}</h1>
</section>
);
}
export default App;
Also added an app-d
in a similar fashion and the 2 microfrontends worked fine together on the same page.
However, when I tried to set the solid-js
dependency external, in the same way as you do it for react
, the microfrontends could not be loaded at all due to this error:
Uncaught (in promise) TypeError: Failed to resolve module specifier "solid-js". Relative references must start with either "/", "./", or "../".
My configuration in the solid apps vite.config.js
:
rollupOptions: {
input: resolve(__dirname, "src/App.jsx"),
preserveEntrySignatures: "exports-only",
external: ["solid-js"],
output: {
entryFileNames: "bundle.js",
format: "esm",
},
},
in the shell astro.config.mjs
:
hooks: {
'astro:build:setup': ({ vite, target }) => {
if(target === 'client') {
vite.build.rollupOptions["external"] = ["react", "react-dom", "solid-js"];
}
}
}
But at least this is working if I include solidJS in the bundles...
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.