nodejs-fs-explorer-ui 0.1.0

package/README.md

@@ -0,0 +1,52 @@
+# nodejs-fs-explorer-ui
+
+File Explorer Svelte component for the [NodeJS](https://nodejs.org) [filesystem](https://nodejs.org/docs/latest/api/fs.html) API for using in the browser, i.e. for browser libraries that implement the NodeJS FS API such as [zenfs](https://github.com/zen-fs/) and [memfs](https://github.com/streamich/memfs).
+
+## Install
+
+```sh
+npm install nodejs-fs-explorer-ui
+```
+
+## Usage
+
+```svelte
+<script>
+  import FileExplorer from "nodejs-fs-explorer-ui";
+  import fs from "@zenfs/core";
+</script>
+
+<FileExplorer {fs} />
+```
+
+## Developing
+
+Once you've installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+pnpm run dev
+```
+
+Everything inside `src/lib` is part of the library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build and pack:
+
+```sh
+pnpm pack
+```
+
+To create a production version of the library:
+
+```sh
+pnpm run build
+```
+
+You can preview the production build with `pnpm run preview`.
+
+## Publishing
+
+```sh
+pnpm publish
+```

package/dist/components/Editor.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import { ArrowLeftIcon, SaveIcon } from "@lucide/svelte";
+  import { editorOpened } from "../state.svelte";
+  import type { NodeJsFs } from "../types.js";
+  import { onMount } from "svelte";
+
+  let { fs }: { fs: NodeJsFs } = $props();
+  let text = $state("");
+  let saving = $state(false);
+
+  onMount(async () => {
+    text = await fs.promises.readFile(editorOpened.path!, { encoding: "utf8" });
+  });
+
+  async function save() {
+    saving = true;
+    try {
+      await fs.promises.writeFile(editorOpened.path!, text);
+    } catch (err) {
+      console.log(err);
+    } finally {
+      saving = false;
+    }
+  }
+
+  function close() {
+    editorOpened.path = null;
+  }
+</script>
+
+<div class="container">
+  <section role="toolbar">
+    <button onclick={close} title="Close" aria-label="Close">
+      <ArrowLeftIcon />
+    </button>
+    <button disabled={saving} onclick={save}>
+      <SaveIcon />
+      {#if saving}
+        Saving...
+      {:else}
+        Save
+      {/if}
+    </button>
+  </section>
+  <textarea aria-label="File contents" bind:value={text}></textarea>
+</div>
+
+<style>
+  textarea {
+    flex: 1;
+    resize: none;
+    font-family: "Courier New", Courier, monospace;
+    padding: 10px;
+  }
+
+  button {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+  }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    gap: 5px;
+  }
+</style>

package/dist/components/Editor.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { NodeJsFs } from "../types.ts";
+type $$ComponentProps = {
+    fs: NodeJsFs;
+};
+declare const Editor: import("svelte").Component<$$ComponentProps, {}, "">;
+type Editor = ReturnType<typeof Editor>;
+export default Editor;

package/dist/components/Entry.svelte

@@ -0,0 +1,159 @@
+<script lang="ts">
+  import {
+    DownloadIcon,
+    FileIcon,
+    FileSymlink,
+    FolderIcon,
+    MoreVerticalIcon,
+    TrashIcon,
+    XIcon,
+  } from "@lucide/svelte";
+  import { dirPath, editorOpened } from "../state.svelte";
+  import type { NodeJsFs } from "../types.js";
+  import type { Dirent } from "fs";
+  import { resolve } from "path-unified/posix";
+
+  let {
+    fs,
+    entry,
+    loadDirData,
+  }: { fs: NodeJsFs; entry: Dirent; loadDirData: () => void } = $props();
+  // svelte-ignore state_referenced_locally
+  let path = resolve(dirPath.path!, entry.name);
+
+  let actionsDialog: HTMLDialogElement;
+  let deleteDialog: HTMLDialogElement;
+
+  function onclick() {
+    if (entry.isDirectory()) {
+      dirPath.path = path;
+    }
+    if (entry.isFile()) {
+      editorOpened.path = path;
+    }
+  }
+
+  async function download() {
+    const file = new Blob([await fs.promises.readFile(path)]);
+
+    const link = document.createElement("a");
+    link.href = URL.createObjectURL(file);
+    link.download = entry.name;
+
+    document.body.appendChild(link);
+    link.click();
+
+    setTimeout(() => {
+      URL.revokeObjectURL(link.href);
+      document.body.removeChild(link);
+    }, 1000);
+  }
+
+  async function remove() {
+    try {
+      await fs.promises.unlink(path);
+    } catch (err) {
+      console.log(err);
+    }
+    loadDirData();
+    deleteDialog.close();
+  }
+</script>
+
+<dialog class="actions" bind:this={actionsDialog}>
+  <div class="container">
+    <div class="header">
+      <b>{entry.name}</b>
+      <button aria-label="Close" onclick={() => actionsDialog.close()}>
+        <XIcon />
+      </button>
+    </div>
+    <div class="buttons">
+      <button onclick={download}>
+        <DownloadIcon />
+        Download
+      </button>
+      <button
+        onclick={() => {
+          actionsDialog.close();
+          deleteDialog.showModal();
+        }}
+      >
+        <TrashIcon />
+        Delete
+      </button>
+    </div>
+  </div>
+</dialog>
+
+<dialog class="delete-dialog" bind:this={deleteDialog}>
+  <div>
+    Are you sure you want to delete "{entry.name}" ?
+  </div>
+  <br />
+  <div style="display: flex; justify-content: space-between;">
+    <button onclick={() => deleteDialog.close()}>Cancel</button>
+    <button onclick={remove}>Delete</button>
+  </div>
+</dialog>
+
+<div class="container">
+  <button {onclick}>
+    {#if entry.isDirectory()}
+      <FolderIcon aria-label="Directory" />
+    {:else if entry.isFile()}
+      <FileIcon aria-label="File" />
+    {:else if entry.isSymbolicLink()}
+      <FileSymlink aria-label="Symlink" />
+    {/if}
+    {entry.name}
+  </button>
+  {#if entry.isFile()}
+    <button aria-label="More" onclick={() => actionsDialog.showModal()}>
+      <MoreVerticalIcon />
+    </button>
+  {/if}
+</div>
+
+<style>
+  .container {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 5px;
+  }
+  button {
+    display: inline-flex;
+    gap: 5px;
+    align-items: center;
+    height: 30px;
+  }
+  dialog {
+    min-width: 300px;
+    min-height: 300px;
+    max-width: 500px;
+    padding: 5px;
+    border: 2px solid;
+    border-radius: 5px;
+  }
+  .actions .container,
+  .actions .buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+  .actions .header {
+    display: flex;
+    gap: 5px;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .actions .buttons button {
+    width: 100%;
+  }
+
+  .delete-dialog button {
+    width: 40%;
+    text-align: center;
+    display: inline-block;
+  }
+</style>

package/dist/components/Entry.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { NodeJsFs } from "../types.ts";
+import type { Dirent } from "fs";
+type $$ComponentProps = {
+    fs: NodeJsFs;
+    entry: Dirent;
+    loadDirData: () => void;
+};
+declare const Entry: import("svelte").Component<$$ComponentProps, {}, "">;
+type Entry = ReturnType<typeof Entry>;
+export default Entry;

package/dist/components/FolderContent.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import Entry from "./Entry.svelte";
+  import { onMount } from "svelte";
+  import { addFiles } from "../lib.js";
+  import { dirPath } from "../state.svelte";
+  import type { NodeJsFs } from "../types.js";
+  import type { Dirent } from "fs";
+
+  let {
+    fs,
+    dirData,
+    loadDirData,
+  }: { fs: NodeJsFs; dirData: Dirent[]; loadDirData: () => void } = $props();
+
+  let dropZone: HTMLElement;
+  onMount(() => {
+    ["dragenter", "dragover", "dragleave", "drop"].forEach((eventName) => {
+      dropZone.addEventListener(eventName, preventDefault, false);
+    });
+
+    function preventDefault(e: Event) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+
+    dropZone.addEventListener("drop", onDrop);
+  });
+
+  async function onDrop(e: DragEvent) {
+    if (!e.dataTransfer) return;
+    const files = Array.from(e.dataTransfer.files);
+    if (!files.length) return;
+    let dir = dirPath.path!;
+    if (!dir.endsWith("/")) dir += "/";
+    try {
+      await addFiles(fs, dir, files);
+      loadDirData();
+    } catch (err) {
+      console.log(err);
+    }
+  }
+</script>
+
+<section
+  class="folder-content"
+  aria-label="Folder content"
+  bind:this={dropZone}
+>
+  {#if dirData.length > 0}
+    {#each dirData as entry (entry.name)}
+      <Entry {fs} {entry} {loadDirData} />
+    {/each}
+  {:else}
+    <div class="empty-info">
+      <div>This folder is empty</div>
+    </div>
+  {/if}
+</section>
+
+<style>
+  .folder-content {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    row-gap: 5px;
+  }
+  .empty-info {
+    height: 100%;
+    color: gray;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+</style>

package/dist/components/FolderContent.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { NodeJsFs } from "../types.ts";
+import type { Dirent } from "fs";
+type $$ComponentProps = {
+    fs: NodeJsFs;
+    dirData: Dirent[];
+    loadDirData: () => void;
+};
+declare const FolderContent: import("svelte").Component<$$ComponentProps, {}, "">;
+type FolderContent = ReturnType<typeof FolderContent>;
+export default FolderContent;

package/dist/components/Main.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import Toolbar from "./Toolbar.svelte";
+  import FolderContent from "./FolderContent.svelte";
+  import Editor from "./Editor.svelte";
+  import { dirPath, editorOpened } from "../state.svelte.js";
+  import type { NodeJsFs } from "../types.js";
+  import type { Dirent } from "fs";
+
+  let {
+    fs,
+    options = {},
+  }: { fs: NodeJsFs; options?: { initialDir?: string } } = $props();
+  // svelte-ignore state_referenced_locally
+  let initialDir = options.initialDir || "/";
+  dirPath.path = initialDir;
+  let dirDataPromise: Promise<Dirent[]> | undefined = $state.raw();
+
+  function loadDirData() {
+    dirDataPromise = fs.promises.readdir(dirPath.path!, {
+      withFileTypes: true,
+    });
+  }
+
+  $effect(() => {
+    loadDirData();
+  });
+</script>
+
+<div class="container">
+  {#if editorOpened.path !== null}
+    <Editor {fs} />
+  {:else}
+    <Toolbar {fs} {loadDirData} />
+    {#if dirDataPromise}
+      {#await dirDataPromise then dirData}
+        <FolderContent {fs} {dirData} {loadDirData} />
+      {/await}
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .container {
+    padding: 5px;
+    height: calc(100% - 10px);
+  }
+</style>

package/dist/components/Main.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { NodeJsFs } from "../types.ts";
+type $$ComponentProps = {
+    fs: NodeJsFs;
+    options?: {
+        initialDir?: string;
+    };
+};
+declare const Main: import("svelte").Component<$$ComponentProps, {}, "">;
+type Main = ReturnType<typeof Main>;
+export default Main;

package/dist/components/Toolbar.svelte

@@ -0,0 +1,159 @@
+<script lang="ts">
+  import {
+    ArrowLeftIcon,
+    CheckIcon,
+    FileUpIcon,
+    FolderPlusIcon,
+    XIcon,
+  } from "@lucide/svelte";
+  import { addFiles } from "../lib.js";
+  import { tick } from "svelte";
+  import { dirPath } from "../state.svelte";
+  import type { NodeJsFs } from "../types.js";
+  import { dirname, resolve } from "path-unified/posix";
+
+  let { fs, loadDirData }: { fs: NodeJsFs; loadDirData: () => void } = $props();
+
+  let newFolderNameEl: HTMLInputElement | undefined = $state(undefined);
+  let showNewFolderDiv = $state(false);
+  let folderName = $state("");
+  let canCreateFolder = $derived(folderName.trim() !== "");
+
+  let folderCreationError: null | string = $state(null);
+
+  function goBack() {
+    dirPath.path = dirname(dirPath.path!);
+  }
+
+  function importFiles() {
+    const fileInput = document.createElement("input");
+    fileInput.type = "file";
+    fileInput.hidden = true;
+    fileInput.multiple = true;
+    fileInput.onchange = async () => {
+      const files = Array.from(fileInput.files!);
+      if (files.length) {
+        let dir = dirPath.path!;
+        if (!dir.endsWith("/")) {
+          dir += "/";
+        }
+        try {
+          await addFiles(fs, dir, files);
+          loadDirData();
+        } catch (err) {
+          console.log(err);
+        }
+      }
+      fileInput.remove();
+    };
+    document.body.append(fileInput);
+    fileInput.click();
+  }
+
+  async function createFolder() {
+    try {
+      await fs.promises.mkdir(resolve(dirPath.path!, folderName));
+      loadDirData();
+      folderCreationError = null;
+      folderName = "";
+      showNewFolderDiv = false;
+    } catch (err) {
+      folderCreationError = String(err);
+    }
+  }
+</script>
+
+<section role="toolbar" class="toolbar">
+  <button onclick={goBack} aria-label="Go back" title="Go back">
+    <ArrowLeftIcon />
+  </button>
+  <button onclick={importFiles} aria-label="Import files" title="Import files">
+    <FileUpIcon />
+  </button>
+  <button
+    onclick={() => {
+      showNewFolderDiv = true;
+      tick().then(() => newFolderNameEl!.focus());
+    }}
+    aria-label="New folder"
+    title="New folder"
+  >
+    <FolderPlusIcon />
+  </button>
+  <input
+    type="text"
+    bind:value={dirPath.path}
+    disabled
+    aria-label="Current directory"
+    title="Current directory"
+  />
+</section>
+{#if showNewFolderDiv}
+  <form
+    class="new-folder"
+    onsubmit={(e) => {
+      e.preventDefault();
+      createFolder();
+    }}
+  >
+    <input
+      type="text"
+      placeholder="Folder name"
+      required
+      bind:value={folderName}
+      bind:this={newFolderNameEl}
+    />
+    <button
+      type="submit"
+      disabled={!canCreateFolder}
+      aria-label="Create folder"
+      title="Create folder"
+    >
+      <CheckIcon />
+    </button>
+    <button
+      type="button"
+      onclick={() => {
+        showNewFolderDiv = false;
+        folderCreationError = null;
+      }}
+      aria-label="Cancel"
+      title="Cancel"
+    >
+      <XIcon />
+    </button>
+  </form>
+  <div role="alert">
+    {#if folderCreationError}
+      <!-- `key` ensures that the error is re-announced,
+      even if the error text is the same. -->
+      {#key folderCreationError}
+        <div class="error">
+          {folderCreationError}
+        </div>
+      {/key}
+    {/if}
+  </div>
+{/if}
+<hr />
+
+<style>
+  .toolbar {
+    display: flex;
+    gap: 5px;
+    margin-bottom: 5px;
+  }
+
+  .toolbar input {
+    flex-grow: 1;
+  }
+
+  .new-folder {
+    display: flex;
+    gap: 5px;
+  }
+
+  .error {
+    color: red;
+  }
+</style>

package/dist/components/Toolbar.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { NodeJsFs } from "../types.ts";
+type $$ComponentProps = {
+    fs: NodeJsFs;
+    loadDirData: () => void;
+};
+declare const Toolbar: import("svelte").Component<$$ComponentProps, {}, "">;
+type Toolbar = ReturnType<typeof Toolbar>;
+export default Toolbar;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import FileExplorer from "./components/Main.svelte";
+export default FileExplorer;

package/dist/index.js

@@ -0,0 +1,2 @@
+import FileExplorer from "./components/Main.svelte";
+export default FileExplorer;

package/dist/lib.d.ts

@@ -0,0 +1,2 @@
+import type { NodeJsFs } from "./types.ts";
+export declare function addFiles(fs: NodeJsFs, dir: string, files: File[]): Promise<void>;

package/dist/lib.js

@@ -0,0 +1,10 @@
+async function addFile(fs, dir, file) {
+    const path = dir + file.name;
+    const uint8arr = new Uint8Array(await file.arrayBuffer());
+    await fs.promises.writeFile(path, uint8arr);
+}
+export async function addFiles(fs, dir, files) {
+    await Promise.all(files.map(async (file) => {
+        await addFile(fs, dir, file);
+    }));
+}

package/dist/state.svelte.d.ts

@@ -0,0 +1,6 @@
+export declare const dirPath: {
+    path: string | undefined;
+};
+export declare const editorOpened: {
+    path: string | null;
+};

package/dist/state.svelte.js

@@ -0,0 +1,4 @@
+export const dirPath = $state({
+    path: undefined,
+});
+export const editorOpened = $state({ path: null });

package/dist/types.d.ts

@@ -0,0 +1,2 @@
+import type * as FS from "node:fs";
+export type NodeJsFs = typeof FS;

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "nodejs-fs-explorer-ui",
+  "version": "0.1.0",
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^2.0.2",
+    "@eslint/js": "^9.39.2",
+    "@sveltejs/adapter-auto": "^7.0.0",
+    "@sveltejs/kit": "^2.50.2",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@types/node": "^24",
+    "@zenfs/core": "^2.5.2",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-svelte": "^3.14.0",
+    "globals": "^17.3.0",
+    "prettier": "^3.8.1",
+    "prettier-plugin-svelte": "^3.4.1",
+    "publint": "^0.3.17",
+    "svelte": "^5.51.0",
+    "svelte-check": "^4.4.2",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.54.0",
+    "vite": "^7.3.1"
+  },
+  "keywords": [
+    "svelte",
+    "nodejs",
+    "fs",
+    "filesystem",
+    "browser",
+    "explorer",
+    "ui"
+  ],
+  "dependencies": {
+    "@lucide/svelte": "^0.577.0",
+    "path-unified": "^0.2.0"
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run prepack",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --check . && eslint .",
+    "format": "prettier --write ."
+  }
+}