MicroFrontend: embed JS bundles in ZK (custom-element/mount-fn/auto), MVVM, and integration improvements#73
Merged
Conversation
…roying and recreating it MVVM binding resolves each @bind-ed property with its own setter call, and every one of them triggered a full unmount+remount, wiping any state the mounted app held (e.g. a form the user is filling in). When only props change and the bundle/tag/mountFn/shadow stay the same, custom-element mode now just reassigns the existing element's properties, and mount-fn mode calls an optional updateFn(container, props) hook (single-spa-style) instead of a full teardown; without updateFn it still falls back to unmount+remount. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…namiaHost prop Every microfrontend needs the same cross-cutting values (tenant, locale, current user, API base URL, auth token...), and today each ZUL author has to wire them by hand as regular props. MicroFrontendHostContextProvider lets app code register one or more Spring beans that get merged and injected as a "dynamiaHost" prop on every mount (except MODE_AUTO, which has no prop channel at all), resolved entirely server-side via Containers.findObjects() with no client-side changes needed. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…ifecycle events
Loading/mounting failures (404 on the bundle or its stylesheet, a missing index.html
in "auto" mode, an undeclared mountFn/updateFn, an exception from the bundle itself)
previously only reached the browser console, with no way for the ZUL page to react
(loading indicator, retry button, fallback message). onMicrofrontendReady now fires
once a (re)mount/update succeeds and onMicrofrontendError fires with a {message} data
payload whenever it doesn't, both bindable with @command(...) like onMicrofrontendEvent.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…pm package Bundle authors integrating with tools.dynamia.zk.ui.MicroFrontend had to know its ad-hoc protocol (a dynamiaEmit callback injected into props, a dynamiaHost prop with server-registered context) and duck-type it by hand. This package wraps it in three small, fully-typed, zero-runtime-dependency functions - emitToHost, getHostContext, isDynamiaHost - that work the same whether the bundle is a custom element or a mount-fn/updateFn app, following the same build/publish conventions as the existing sdk/vue packages. Typecheck, tests (6 passing) and build verified locally. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
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
Adds
tools.dynamia.zk.ui.MicroFrontend, a ZK component that embeds an external JS bundle (Vue, React, Svelte, plain JS) inside a ZUL page, plus a round of integration improvements building on it.Core component
custom-element(default),mount-fn(single-spa-stylemountFn/unmountFn), andauto(self-mounting SPA bundles, auto-discovered from a Vite-styledist/index.htmlviaapp=).css=), Shadow DOM isolation (shadow=true), and adynamiaEmit(data)channel injected into props so the bundle can notify the server (onMicrofrontendEvent).@bind/@commandwork out of the box, including binding whole Java POJOs (serialized to real nested JSON via Jackson, nottoString()).Integration improvements (this branch)
custom-elementreassigns properties,mount-fnuses an optionalupdateFnhook, both preserving any internal state the bundle holds.MicroFrontendHostContextProviderbeans are merged and delivered automatically as adynamiaHostprop on every mount (tenant, locale, API base URL, auth, etc.), resolved server-side with zero client-side wiring per page.onMicrofrontendReady/onMicrofrontendError(with a{message}payload) fire around mount/update, bindable with@command(...), covering script/stylesheet 404s, missingindex.html, undeclaredmountFn/updateFn, and exceptions from the bundle itself.@dynamia-tools/microfrontend-bridge: new npm package (typecheck + 6 tests + build passing) withemitToHost/getHostContext/isDynamiaHostand TypeScript types, so bundle authors don't have to duck-type the props protocol by hand.Demo (
demo-zk-books→ Library → More Examples → MicroFrontend): five panels exercising every mode, update-in-place, host context, and a button that deliberately breaks a bundle to triggeronMicrofrontendError.Test plan
mvn -q -o installonplatform/ui/zk— compiles cleanmvn -q -o compileonexamples/demo-zk-books— compiles cleanpnpm run typecheck && pnpm run test && pnpm run buildonplatform/packages/microfrontend-bridge— typecheck clean, 6/6 tests pass, build produces ESM+CJS+d.tsonMicrofrontendErrordemo panel🤖 Generated with Claude Code