diff --git a/README.md b/README.md index a8f7ce35..291bc83b 100644 --- a/README.md +++ b/README.md @@ -62,6 +62,7 @@ By default, **Dynamia Platform automatically generates full-featured web interfa - **Modern Web Stack**: HTML5, CSS3, Bootstrap via ZK Framework - **Flexible Patterns**: Use MVC or MVVM as per your preference - **Theme Support**: Customize look and feel with pluggable themes +- **Microfrontend Embedding**: Drop a Vue/React/Svelte bundle into any ZK page with ``, MVVM binding included - **Seamless Integration**: Works with any Java framework or library ## 🗺️ Roadmap @@ -92,6 +93,7 @@ A complete TypeScript/JavaScript package ecosystem for frontend development, ava | **[`@dynamia-tools/sdk`](https://www.npmjs.com/package/@dynamia-tools/sdk)** | Core client library for REST API interaction | | **[`@dynamia-tools/ui-core`](https://www.npmjs.com/package/@dynamia-tools/ui-core)** | Framework-agnostic view/viewer/renderer core | | **[`@dynamia-tools/vue`](https://www.npmjs.com/package/@dynamia-tools/vue)** | Vue 3 composables and components for reactive integration | +| **[`@dynamia-tools/microfrontend-bridge`](https://www.npmjs.com/package/@dynamia-tools/microfrontend-bridge)** | Typed helpers for bundles embedded via `` | | **[`@dynamia-tools/cli`](https://www.npmjs.com/package/@dynamia-tools/cli)** | CLI tool for scaffolding Dynamia Platform projects | ```bash @@ -120,6 +122,13 @@ Modern Vue 3 frontend integration with: - Real-time updates with WebSocket - Dashboard and reporting components +#### 🧩 **Microfrontend Embedding** ✅ Available +Drop external JS bundles (Vue, React, Svelte, plain JS) directly into a ZK page via ``, no iframe: +- Three mounting modes: custom element, single-spa-style `mountFn`/`unmountFn`, and auto-discovery of a Vite-style `dist/` build +- Full ZK MVVM support — `@bind`/`@command` work out of the box, including binding whole Java objects as JSON +- Update-in-place on prop changes, shadow-DOM CSS isolation, server↔bundle events, and automatic tenant/locale/auth context injection +- Typed bundle-side helpers via [`@dynamia-tools/microfrontend-bridge`](https://www.npmjs.com/package/@dynamia-tools/microfrontend-bridge) + #### 🔗 **Frontend Framework Integration** Seamless integration with popular frameworks: - **React** - Components and hooks for React apps diff --git a/docs/backend/ADVANCED_TOPICS.md b/docs/backend/ADVANCED_TOPICS.md index bcef9362..03ec553c 100644 --- a/docs/backend/ADVANCED_TOPICS.md +++ b/docs/backend/ADVANCED_TOPICS.md @@ -7,13 +7,14 @@ This document covers advanced concepts for building enterprise-grade application 1. [Advanced Spring Integration](#advanced-spring-integration) 2. [Custom Extension Development](#custom-extension-development) 3. [Custom View Renderers](#custom-view-renderers) -4. [Security Integration](#security-integration) -5. [Caching & Performance](#caching--performance) -6. [Event System](#event-system) -7. [Scheduled Tasks](#scheduled-tasks) -8. [REST API Development](#rest-api-development) -9. [Progressive Web Apps (PWA)](#progressive-web-apps-pwa) -10. [Modularity & Microservices](#modularity--microservices) +4. [Microfrontend Integration](#microfrontend-integration) +5. [Security Integration](#security-integration) +6. [Caching & Performance](#caching--performance) +7. [Event System](#event-system) +8. [Scheduled Tasks](#scheduled-tasks) +9. [REST API Development](#rest-api-development) +10. [Progressive Web Apps (PWA)](#progressive-web-apps-pwa) +11. [Modularity & Microservices](#modularity--microservices) --- @@ -410,6 +411,111 @@ fields: --- +## Microfrontend Integration + +`tools.dynamia.zk.ui.MicroFrontend` (module `tools.dynamia.zk`) embeds an external JS bundle — Vue, React, Svelte, or plain JS — inside a ZUL page, loaded and cached client-side, without an iframe. + +### Mounting Modes + +```xml + + + + + + + + +``` + +`app=` points at a bundler's production build root (e.g. Vite's `dist/` copied as-is into a static +folder); the browser fetches `{app}/index.html` and extracts the entry `