Repository navigation
Conversation
Each fold renders in a Vue app of its own, whose useId() starts at v-0, so two folded menus on a page both had reka-dropdown-menu-trigger-v-0. Each render now gets an idPrefix numbered within the compile.
Replaces the workspace and the modes gallery with a small Linear-style tracker in memory: a ~VUE sidebar, a hybrid board with folded filter menus and drag and drop through a server action, a hybrid issue page with folded property menus and comments, and a server-only activity rail. Press X for the x-ray, which outlines each region by how it renders.
The patcher locates slots by parsing the statics with markers, where a v-if branch or a component is only its marker's text but renders elements. A slot after one in the same parent was written to the wrong element. The render now keys blocks false in data-vapor-keys, and the patcher skips the slots that follow a block in its parent.
The list groups a team's issues, or the person's, by status, sorts them with a folded menu and moves a selection through one server action. New issue is Reactive mode: its refs and computeds run in QuickBEAM, and creating the issue is the LiveView's own Elixir clause.
The layout renders it once and it lives on across navigation. Reka's Dialog folds open and closed, the filtering runs in the browser, and an Elixir counterpart lists the commands for the server's render.
While the x-ray is on, a legend names the four ways a region renders, and a click on a region shows its file, served from the demo's own sources read while compiling.
A block shifts the siblings that follow it, but not how many follow: a slot after the last block in its parent is addressed by its index from the end, so it's still written straight to the DOM. Only a slot between two blocks is left to LiveView.
- Tests drive the board's drag and filters, the issue page, the list's bulk move, the reactive form and its direct DOM patches, the palette, the x-ray, and a PhoenixReplay session of the board. - The palette renders from the root layout, once: in the app layout it was re-sent with every update, so no update was value-only. - Activity ids count up, as random ones could repeat a seeded id. - The tests use the system's fonts, so a page's load doesn't wait on Google. - The Button macro styles the tracker's buttons; es-toolkit is gone.
As PhoenixReplay's example app does: VaporDemoWeb.Theme reads the theme cookie into the session and a @theme assign, the root layout renders it on <html>, and the dashboard's frame_layout is that root layout, so the replay renders it again at each moment. The theme was only in localStorage, which a recording never sees. The replay test switches it mid-session.
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.
The demo had become two apps stapled together, a workspace and a gallery of six toy pages, with a generic look. This rebuilds it as one showcase: a small Linear-style issue tracker, where each PhoenixVapor mode is used where it fits, and an x-ray that shows how each part of a page renders.
The demo
~VUE) and activity rail (server-only.vue).Library fixes the demo found
reka-dropdown-menu-trigger-v-0. Each render now gets a numberedidPrefix.v-ifin the same parent was written into the wrong element.data-vapor-keysnow marks blocksfalse; a slot after the last block is found from the end, and one between two blocks is left to LiveView.Both have tests and CHANGELOG entries under Unreleased.
Tests
The demo's browser tests are rewritten for the tracker: the board's drag and filters, the issue page, the list's bulk move, the reactive form and its direct patches, the palette, the x-ray, the client-state reports, and a PhoenixReplay session of the board checked in the player's frames.
mix lint,mix test --include e2e(410 passed).mix lint,mix test(16 passed, stable across repeated runs).npm.lockonly dropses-toolkit;mix npm.installwould also have bumped Playwright, so the entry was removed by hand and--frozenaccepts the result.