feat(examples): add micro-frontend example with Hub + multi-framework sub-apps#296
Open
feat(examples): add micro-frontend example with Hub + multi-framework sub-apps#296
Conversation
… sub-apps - Add ssr-micro-shared for sharing @esmx/router across all sub-apps - Add ssr-micro-html with native HTML + TypeScript - Add ssr-micro-vue2 with Vue 2.7 + Composition API - Add ssr-micro-vue3 with Vue 3.5 + SSR - Add ssr-micro-react with React 18 + Hooks - Add ssr-micro-hub to aggregate all sub-app routes - Configure modules.exports for framework library sharing (vue, react, react-dom) - Configure server-only exports for vue-server-renderer and @vue/server-renderer - Add README.md and README.en.md for each package - Remove outdated ssr-demo-html and ssr-demo-preact-htm examples
Deploying esmx with
|
| Latest commit: |
9d88560
|
| Status: | ⚡️ Build in progress... |
lzxb
force-pushed
the
feat-micro-app-example
branch
from
37060e3 to
0070dfb
Compare
added 16 commits
May 7, 2026 20:53
… page refresh loops
… cards - Add consistent styling system with CSS animations - Redesign home page with modern cards, icons, and feature section - Update all sub-apps with consistent card-based layout - Add fade-in animations for page transitions - Use container element pattern for clean unmounting - Improve visual hierarchy and responsive design
…igation - Create useLayout() composable in ssr-micro-shared - Add consistent sidebar with navigation across all micro-apps - Integrate layout into Vue2, Vue3, React, HTML, and Hub home page - Remove global layout styles from entry.server.ts
…t flicker on app switch
- Use fixed DOM IDs (esmx-sidebar, esmx-layout-footer) across all apps - Only update active state and rebind events when DOM already exists - Avoid DOM recreation during micro-app transitions
- Layout is now a class instance with mount/unmount methods - useLayout() acts as a composable factory for Vue2/Vue3 setup usage - Maintains shared DOM behavior to prevent flicker
…removing global animations - Remove global fadeIn animation from entry.server.ts - Return empty string in Layout.header if sidebar DOM already exists - Prevent v-html from replacing existing sidebar on each app switch
- Vue3: Move app creation to factory function, use v-once in template - React: Simplify app structure, add biome-ignore for safe HTML - HTML: Move Layout creation to mount function - Hub: Simplify home.ts Layout usage
…container element
…HomeApp) - HtmlApp: class-based HTML micro-app with render/mount/unmount methods - HomeApp: class-based Hub home page with render/mount/unmount methods - Both follow Vue pattern: instance created in factory function
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Add a complete micro-frontend example (
examples/micro-app/) demonstrating Esmx v3 best practices with Hub + sub-apps using@esmx/router.What's Included
@esmx/routerKey Features
modules.exports(vue, react, react-dom)//html,/vue2,/vue3,/reactDocumentation