docs(frontend): add Frontend section (BE↔FE bridge, Web Host, authoring)#6
Draft
AndrewKirkovski wants to merge 6 commits into
Draft
docs(frontend): add Frontend section (BE↔FE bridge, Web Host, authoring)#6AndrewKirkovski wants to merge 6 commits into
AndrewKirkovski wants to merge 6 commits into
Conversation
… and authoring Adds a new `en/frontend/` documentation section with three layers: - BE → FE Bridge: registry entries, view.page, view.component, dynamic routing - Web Host: overview, facade entry point, bootstrap, multi-panel layout, proxy & isolation, CSS injection, @wippy-fe packages - Writing Wippy FE: page apps, web components, proxy API, theming (common + page-app + web-component), build system, host-less mode, compliance checklist, debugging Also includes 10 beautiful-mermaid diagrams (.mmd source + .svg) and wires the section into en/manifest.json. Updates framework/views.md and framework/facade.md to the current model (facade loads a JS module that takes over the page; iframe.html is the manual facade-less embedding path) and cross-links them to the new Frontend docs. Key facts verified against the wippy/views vendor source: - facade delivers via module.js / managed-layout.js (not an iframe shell) - fe_mode is current (compat default, managed early-access) - proxy injection: package.json camelCase + YAML proxy: snake_case override, host normalizes, YAML wins - view.component announced & auto_register both default false
Updates the section title in the manifest nav, the overview headings and cross-link, and the dynamic-routing diagram alt text. Folder path (be-fe-bridge/) is unchanged.
…ntends) Renames the FE docs vocabulary to a micro-frontend-native model so the pipeline reads cleanly: Frontend Facade -> Wippy Web Host -> (Micro Frontend Apps + Web Components). - "Backend-Frontend Bridge" -> "Frontend Registry" (it's the wippy/views registry, not a facade synonym); folder be-fe-bridge/ -> frontend-registry/ - "Writing Wippy FE" -> "Wippy Micro Frontends"; folder writing-fe/ -> micro-frontends/ - "page app" -> "micro frontend app" in prose; page-app.md -> micro-frontend-app.md, page-app-theming.md -> micro-frontend-app-theming.md, wc-theming.md -> web-component-theming.md - Manifest titles/paths, all cross-links, and the fe-arch-overview + frontend-registry diagrams updated to match; diagrams regenerated. Literal API/code nouns (view.page, view.component, /api/public/pages/list, mountRoute, WPage) and the host.bridge channel API are left untouched. The registry section keeps view-page.md/view-component.md since they document the literal entry types. All links validated; manifest is valid JSON.
Independent review pass after the Set A terminology rename. Fixes: - Catch mixed-case "Page app"/"Page apps" that the case-sensitive first pass missed (~18 across overview, proxy-api, packages, compliance, micro-frontend-app). This also realigns the compliance-checklist §3 TOC anchor with its heading. - view-page.md / view-component.md H1 headings → "Micro Frontend Apps (view.page)" / "Web Components (view.component)" to match the manifest. - bootstrap.md: PostMessage example uses the wire value `set-config` (was the enum name `SetConfig`). - facade.md: de-contradict the `fe_entry_path` row (scope it to the iframe embedding mode; the current facade loads the JS-module entry). - views.md: clarify the registry-entry frontends bullet (was conflating view.page apps and view.component web components). - css-injection.md: stale cross-ref label "Pages (view.page)" → "Micro Frontend Apps (view.page)". - host-less-mode.md: note customCss/customVariables are enabled by default (so apps relying only on overrides misleadingly appear to work). Confirmed false positives from the review (no change): apiRoutes appears in both AppConfig (top-level) and HostConfig per source; package.json wippy.type is correctly "page". All links validated; manifest valid; TOC anchors match.
…ade facts - Standardize all Web Host CDN URLs to the `<release-tag>` placeholder (the deploy path is /<git-release-tag>/; docs previously showed three different example tags). Drops concrete version examples. - facade.md: `session_type` corrected to `non-persistent | cookie` framed as auth-token storage (was wrongly "persistent" / "chat session persistence"). Verified against gen-2-chat types.ts + lib.ts. - facade.md: `fe_facade_url` default shown as the `<release-tag>` placeholder. - web-host/overview.md: simplify the CDN tag explanation. Verified-correct, no change: `@gen2-chat` is the real default message type (IFRAME_MESSAGE_TYPE = … || '@gen2-chat'); hostConfig.session.type values are non-persistent|cookie. All links validated; manifest valid.
New quickstart page with two minimal end-to-end examples drawn from the public wippyai/app-template repo: - a Vue Micro Frontend App (view.page): package.json wippy block, getWippyApi bootstrap with mandatory route sync, and the _index.yaml registration. - a Vue Web Component (view.component): reaction-bar — WippyVueElement + define(import.meta.url, …), useComponentProps/useComponentEvents, and the _index.yaml autoload registration. Each links to the full source on github.com/wippyai/app-template and to the deep-dive scaffold docs. Includes an "explore more" table of the repo's other web component samples. Wired into the manifest (after Overview) and linked from the section overview.
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 a new Frontend documentation section under
en/frontend/, integrating the previously-undocumented Wippy FE ecosystem into the docs site. Wires it intoen/manifest.jsonand updates the two existing FE-adjacent framework docs (views.md,facade.md) to the current model.Structure (three layers)
view.page,view.component, dynamic routing@wippy-fepackagesDiagrams
10 diagrams rendered with
beautiful-mermaid. Both.mmdsource and generated.svglive together underen/frontend/diagrams/(regenerate via the tool in.local/diagrams/). Includes separate diagrams for the two embedding paths: facade JS-module flow and manual iframe@gen2-chathandshake.Accuracy
Key facts verified against the unpacked
wippy/viewsvendor source:module.js/managed-layout.js(takes over the page) — not an iframe shell.iframe.html+SetConfigPostMessage is the manual, facade-less embedding path.fe_modeis a current facade parameter (compatdefault,managedearly-access).package.jsoncamelCase (author default) + YAMLproxy:snake_case (operator override); host normalizes, YAML wins.view.componentannouncedandauto_registerboth defaultfalse.Notes
en/) only for now; other languages deferred until content is stable.relativePath: true); links are file-relative. Dev artifacts (en/index.html,en/_sidebar.md,.local/,.cache/) are gitignored.Opened as draft for review.