Skip to content

Comments

xftp-web: prepare for npm publishing#1715

Open
shumvgolove wants to merge 11 commits intoep/xftp-webfrom
sh/xftp-web-publish
Open

xftp-web: prepare for npm publishing#1715
shumvgolove wants to merge 11 commits intoep/xftp-webfrom
sh/xftp-web-publish

Conversation

@shumvgolove
Copy link
Collaborator

@shumvgolove shumvgolove commented Feb 19, 2026

xftp-web: embeddable widget, zero CLS, progress ring

Embeddable widget

  • Scoped CSS via :is(#app, [data-xftp-app]) — works standalone or embedded
  • Dark mode (.dark parent class), i18n (window.__XFTP_I18N__), runtime server config (window.__XFTP_SERVERS__)
  • Deferred init, hashchange control, xftp:ready/xftp:upload-complete/xftp:download-complete events
  • Web Share API button on supported devices

Zero layout shift

  • UI renders before WASM loads — WASM only needed on upload/download action
  • Placeholder HTML in index.html with <template> swap for download mode
  • CSP-compatible: inline script hashes auto-computed by vite plugin

Build

  • Relative base path for relocatable deployment
  • Stable output filenames (no content hashes)
  • npm packaging: description, repository, files, publishConfig

Progress ring

  • Smooth animation (lerp), green checkmark on completion
  • Per-phase colors: encrypt (amber), upload (blue), download (cyan), decrypt (violet)
  • Each phase tracks real progress 0-100% independently
  • Decrypt phase reports actual chunk processing from web worker
  • Theme-reactive via MutationObserver + matchMedia

Bug fixes

  • Only enter download mode for valid XFTP URIs
  • Retry resets to file picker instead of re-triggering transfer
  • Hide retry for permanent errors

Remove private flag, add description/license/repository/publishConfig,
rename postinstall to pretest, add prepublishOnly, set files and main.
- worker output to assets/ for single-directory deployment
- scoped all CSS under #app, removed global resets
- dark mode via .dark ancestor class
- progress ring reads colors from CSS custom properties
- i18n via window.__XFTP_I18N__ with t() helper
- configurable mount element via data-xftp-app attribute
- optional hashchange listener (data-no-hashchange)
- completion events: xftp:upload-complete, xftp:download-complete
- enhanced file-too-large error mentioning SimpleX app
- native share button via navigator.share
- data-defer-init attribute skips auto-initialization
- window.__XFTP_SERVERS__ overrides baked-in server list
Move sodium.ready await after UI initialization so the upload/download
interface appears instantly. WASM is only needed when user triggers
an actual upload or download. Dispatch xftp:ready event once WASM loads.
Add placeholder HTML to index.html so the page renders a styled card
before JS executes, preventing layout shift. Use a <template> element
with an inline script to swap to the download placeholder when the URL
hash indicates a file download. Auto-compute CSP SHA-256 hashes for
inline scripts in the vite build plugin.

Change all CSS selectors from #app to :is(#app, [data-xftp-app]) so
styles apply when the widget is embedded with data-xftp-app attribute.
Rewrite progress ring with smooth lerp animation, green checkmark on
completion, theme reactivity via MutationObserver, and per-phase color
variables (encrypt/upload/download/decrypt).

Show honest per-phase progress: each phase animates 0-100% independently
with a ring color change between phases. Add decrypt progress callback
from the web worker so the decryption phase tracks real chunk processing
instead of showing an indeterminate spinner.

Snap immediately on phase reset (0) and completion (1) to avoid
lingering partial progress. Clean up animation and observers via
destroy() in finally blocks.
@shumvgolove shumvgolove changed the title xftp-web: prepare for npm publishing, stable build output xftp-web: prepare for npm publishing Feb 21, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant