Make FlowfileEditor embeddable as a Vue component library#338
Open
Edwardvaneechoud wants to merge 7 commits intomainfrom
Open
Make FlowfileEditor embeddable as a Vue component library#338Edwardvaneechoud wants to merge 7 commits intomainfrom
Edwardvaneechoud wants to merge 7 commits intomainfrom
Conversation
Add library build mode so flowfile_wasm can be used as a drop-in `<FlowfileEditor>` component in any Vue 3 app, similar to VueFlow. New files: - src/lib/types.ts: Public API types (props, events, exposed methods) - src/lib/FlowfileEditor.vue: Main wrapper component with prop/event bridge - src/lib/plugin.ts: Vue plugin installer (auto-installs Pinia if needed) - src/lib/index.ts: Library entry point exporting component and types - src/styles/editor.css: Scoped CSS (vars under .flowfile-editor-root) - src/utils/iconUrls.ts: Explicit icon imports for library build Modified files: - Canvas.vue: Accept toolbar/node config props, emit execution events, replace Material Icons with inline SVGs, use iconUrls utility - DemoButton.vue, PreviewSettings.vue: Replace Material Icons with SVGs - flow-store.ts: Add output callback mechanism for embeddable mode - theme-store.ts: Support scoped theming (embedded mode skips global DOM) - vite.config.ts: Dual build (app + library via BUILD_MODE=lib env var) - package.json: Add exports, peerDependencies, build:lib script All 192 existing tests pass. Both app and library builds succeed. https://claude.ai/code/session_01SztvepLRjChvuh634qxFnu
✅ Deploy Preview for flowfile-wasm ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Instead of requiring indirect node_reference matching, this adds a proper "External Data" node type that users drag onto the canvas and select a dataset from a dropdown. The host application provides datasets via the inputData prop, and they appear as selectable options in the node settings. On export, only the dataset name and schema snapshot are saved (not the actual data), so flows remain lightweight and the host re-provides data on re-import. https://claude.ai/code/session_01SztvepLRjChvuh634qxFnu
The right-click context menu was teleported to <body>, which placed it outside the .flowfile-editor-root container. In embedded mode, CSS variables are scoped to .flowfile-editor-root (not :root), so the teleported menu lost access to --bg-secondary and --border-color, rendering it transparent. Removing the Teleport keeps the menu in the DOM tree where CSS variables are inherited. The position:fixed style still positions it relative to the viewport. Also added external_data icon mapping to FlowNode's iconMap. https://claude.ai/code/session_01SztvepLRjChvuh634qxFnu
VueFlow renders nodes inside a transformed container, which breaks position:fixed — making the context menu appear at the wrong coordinates. Instead of teleporting to <body> (loses CSS vars) or rendering inline (breaks positioning), teleport to a dedicated container div inside Canvas.vue. This sits inside the CSS variable scope but outside VueFlow's transform layer, fixing both the styling and positioning. https://claude.ai/code/session_01SztvepLRjChvuh634qxFnu
- external_data code gen: generates pl.scan_csv("dataset.csv") placeholder
with a comment telling the user to replace the path
- external_output node: full stack implementation (types, settings UI,
execute handler, code gen). On execution, collects the input DataFrame
and sends it to the host via output callbacks. Code gen produces
df.collect() to materialize the result.
- New SVG icons for both external_data (blue database + inbound arrow)
and external_output (green document + outbound arrow), replacing the
old external_source.png
https://claude.ai/code/session_01SztvepLRjChvuh634qxFnu
Interactive example page at /embed-example that shows: - Two editable input datasets (orders + customers) as CSV text areas - Dataset names are editable and map to External Data node dropdown - An "Add Dataset" button for adding more inputs on the fly - Output results panel that shows data from External Output nodes - The full FlowfileEditor embedded in the right panel This serves as both a test page and reference implementation for consumers building their own integration. https://claude.ai/code/session_01SztvepLRjChvuh634qxFnu
DraggablePanel used position: fixed, so panels were positioned relative to the viewport. When the editor is embedded in part of a page, panels would overflow into the host page's other areas. Changed to position: absolute so panels are positioned relative to .canvas-container (which has position: relative + overflow: hidden). All window.innerWidth/Height references now use getContainerRect() to measure the actual container. Added ResizeObserver to track container size changes in addition to window resize events. Panel dragging is also now clamped to container boundaries. https://claude.ai/code/session_01SztvepLRjChvuh634qxFnu
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
2 participants
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
This PR transforms the FlowfileEditor from a standalone application into an embeddable Vue component library that can be integrated into other Vue 3 applications. The editor can now be published to npm and used as a reusable component with a clean public API.
Key Changes
New Public API & Component Export
FlowfileEditor.vueas the main embeddable component with comprehensive props for configurationlib/index.tsas the library entry point exporting the component, plugin, and all public typesFlowfileEditorPluginfor easy registration viaapp.use()FlowfileEditorProps,FlowfileEditorAPI, etc.)Library Build Configuration
vite.config.tsto support dual build modes: app (dev/preview) and library (npm package)package.jsonwith library metadata (main, module, types, exports, files)flowfile-wasmtoflowfile-editorfor clarityStyling & Theme System
editor.css(1367 lines) with design token system aligned with flowfile_frontenddata-theme="dark"attribute.flowfile-editor-rootfor isolation in embedded contextsEmbedded Mode Features
theme-store.tswithembeddedflag to prevent global document theme changessetEmbedded()method to isolate theme application to component scope onlyinjectInputData()for programmatic data loadingflow-store.tsfor capturing execution resultsdefineExpose()for template ref accessToolbar & UI Customization
effectiveToolbarconfigCanvas.vueto respect toolbar configuration (showRun, showSaveLoad, showClear, showCodeGen, showDemo)PreviewSettings.vueandDemoButton.vueto use inline SVGsIcon Management
utils/iconUrls.tsto explicitly import all node icons as base64 data URIsProps & Configuration
FlowfileEditorPropssupports: initialFlow, inputData, pyodide config, theme, toolbar, nodeCategories, readonly, height, widthPyodideConfigallows custom CDN URLs and auto-initialization controlToolbarConfigprovides granular control over visible toolbar buttonsInputDataMapenables programmatic data injection matched by node_referenceNotable Implementation Details