Make FlowfileEditor embeddable as a Vue component library#338
Merged
Edwardvaneechoud merged 11 commits intomainfrom Feb 17, 2026
Merged
Make FlowfileEditor embeddable as a Vue component library#338Edwardvaneechoud merged 11 commits intomainfrom
Edwardvaneechoud merged 11 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
Triggers on `wasm-v*` tags (e.g. `wasm-v0.1.0`). Runs tests and type-checking before building the library and publishing to npm with provenance. Verifies the tag version matches package.json. Requires an `npm` environment with an NPM_TOKEN secret configured in the repository settings. https://claude.ai/code/session_01SztvepLRjChvuh634qxFnu
1. Security: Fix Python injection in external_output — outputName was interpolated directly into a Python string. Now uses toPythonJson() consistently with all other node handlers. 2. CSS scoping: Scope .vue-flow__* and .ag-theme-balham selectors under .flowfile-editor-root so they don't leak into host applications that use Vue Flow or AG Grid independently. 3. DraggablePanel: Fix getContainerRect race condition — if container has zero dimensions during mount (not laid out yet), defer positioning to nextTick. 4. Type gap: Remove unused options parameter from setInputData type signature since the implementation doesn't wire it up. 5. Output callbacks: Add clearOutputCallbacks() to flow store and call it in FlowfileEditor's onUnmounted to prevent callback leaks. 6. Cleanup: Remove refreshInputData no-op in EmbedExample (v-model already triggers reactivity), add coupling comment on external_data's reuse of execute_manual_input. Verified: vue-router is tree-shaken out of the library bundle (0 refs). https://claude.ai/code/session_01SztvepLRjChvuh634qxFnu
README: Replace standalone-app README with consumer-facing docs covering installation, props, events, programmatic API, input data, output capture, CORS headers, and TypeScript types. Icons: Replace all 14 PNG node icons (200KB total) with hand-crafted SVGs (~15KB total). Removes the assetsInlineLimit: 100000 workaround from vite.config since SVGs are naturally small. Library JS bundle drops from 1,225KB to 1,048KB gzipped (-14%). Code-splitting: Lazy-load PolarsCodeSettings and CodeGenerator via defineAsyncComponent so vue-codemirror and @codemirror/* are only fetched when the user opens those panels. https://claude.ai/code/session_01SztvepLRjChvuh634qxFnu
Reverts the SVG icon replacements and restores the original PNG imports in iconUrls.ts and the assetsInlineLimit config in vite.config.ts. 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