Sharing string#1
Open
lvkoppen wants to merge 3 commits into
Open
Conversation
Flow's internal state (useNodesState/useEdgesState) ignores prop changes after mount, so blueprint imports were silently dropped. Fixed by adding an externalState prop with a version counter that Flow watches via useEffect — when version increments, Flow replaces its nodes/edges. Also added an "Import Blueprint" button to the start screen via a new actionButton slot in ObjectiveSelector, so users can load builds without first building a new one. - Flow.tsx: externalState prop + useRef version tracking - canvas.tsx: setExternalState on blueprint import and URL state load - ObjectiveSelector.tsx: optional actionButton prop in header right slot - index.tsx: Import Blueprint button wired to paste modal - bunfig.toml: scope bun test to __tests__/ (exclude Playwright e2e) - blueprint.test.ts: 3 new tests for runtime field stripping + hydration contract
Add JSDoc to exported functions in blueprint.ts and ShareButton component. Add inline prop comments to ShareButtonProps, FlowProps, and ObjectiveSelectorProps. Add declarations.d.ts to fix CSS side-effect import warning introduced by TypeScript upgrade to 5.8.
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.
Hey Fredppm,
First off, I really love this tool! It looks really clean and it makes it so much easier to plan more complex parts of my factory. But with bigger design I kept having a issue my work couldn't be saved correctly because the URL just became too long. I decided why don't I try to fix it!
I'm not super experienced in frontend dev, so this was the lowest hanging fruit I felt comfortable tackling. I do have a few other features in mind and will probably open more PRs down the line as I get more comfortable with the codebase.
One thing to be transparent about: this was written with the help of Claude, but I've personally checked the changes, made sure extra test cases were written before opening this PR, do forgive me if you find anything not up to standard.
Kind regards,
lvkoppen
Summary
URL-based sharing was broken for complex builds — the
?state=query param grew too large for browsers and servers to handle. This PR replaces it with a blueprint string system: a copy-paste code (COI1:…) that works for any build size, and adds import access from both the canvas and the start screen.Changes
New files
utils/blueprint.ts—encodeToBlueprintString/decodeFromBlueprintStringusing lz-string compression. Strips all runtime-only fields on encode (callbacks, inputs/outputs, full building objects); stores only node id, type, position, name, building id, and multiplier.__tests__/utils/blueprint.test.ts— 30 unit tests covering round-trips, edge cases, runtime field stripping, hydration contract, and large build safety.bunfig.toml— Scopesbun testto__tests__/so Playwright e2e specs are no longer picked up as unit tests.declarations.d.ts— Declares*.cssmodules to fix a TypeScript 5.8 side-effect import warning.Modified files
components/ShareButton/ShareButton.tsx— Replaced "copy URL" with two buttons: export (copies blueprint string to clipboard) and import (opens paste modal).pages/canvas.tsx— Removed all URL state writing. Kept?state=reading for backward compat with old shared links. Blueprint and legacy URL imports both push state into Flow viaexternalState.components/Flow/Flow.tsx— AddedexternalStateprop. When itsversionincrements, auseEffectreplaces Flow's internal nodes/edges. Necessary becauseuseNodesState/useEdgesStateignore prop changes after mount.pages/index.tsx— Added "Import Blueprint" button and paste modal on the start screen. On load, navigates to/canvas?state=<blueprint>.components/ObjectiveSelector/ObjectiveSelector.tsx— Added optionalactionButton?: React.ReactNodeprop rendered in the right header slot (previously an empty spacer), so the import button renders inside the full-screen overlay instead of behind it.package.json— Addedlz-string+@types/lz-stringdependencies.Commits
feat:blueprint string system (core encode/decode, ShareButton, canvas wiring)fix:blueprint import now updates canvas + import button on start screenstyle:JSDoc and inline prop comments per contributing guide