電子冒険:エピソード21:ファイルマネージャ

楽しいターミナルアプリの後、電子メールとsvelteでファイルマネージャを構築しましょう.
我々は、現在のディレクトリにファイルの一覧を表示するだけで、他のディレクトリにクリックしてナビゲートできるように、小さな起動します.
我々は、前のエピソードからsvelteセットアップから始めます.私は、私がいろいろなボイラープレートジェネレータについてのエピソードを持っていると思います、現在、あなたはちょうどエピソード13からファイルをコピーすることができて、それに何か意味がある何かをきれいにすることができます.

プリロード。js

つの関数をエクスポートする必要があります.まず最初に、我々はアプリがどこで我々が始めたか知っているようにする必要があります、そして、幸いに、それは非常に簡単です:

let currentDirectory = () => {
  return process.cwd()
}

第2に、ディレクトリアプリケーションのファイルのリストを返す必要があります.ノードは、そのための複数の厄介なAPIを持って、少なくとも厄介な1つから1つですfs/promises .
残念ながらDirent それが返すオブジェクトはpreloadコードからフロントエンドまでの旅行を生き残らないでください、そして、我々はそれがプレーンなJavaScriptオブジェクトに戻るものを変える必要があります.私はなぜそれが動作しないのか完全に確信していない、私はコンテキストの分離がどのように動作するかについて何かを推測している.

let { readdir } = require("fs/promises")

let directoryContents = async (path) => {
  let results = await readdir(path, {withFileTypes: true})
  return results.map(entry => ({
    name: entry.name,
    type: entry.isDirectory() ? "directory" : "file",
  }))
}

今、私たちはpreload.js を公開する

let { contextBridge } = require("electron")

contextBridge.exposeInMainWorld(
  "api", { directoryContents, currentDirectory }
)

アプリ。js

そして、ここではアプリ自体です.我々はここで積極的にsvelteの機能を使用している.

<script>
  let directory = window.api.currentDirectory()
  $: filesPromise = window.api.directoryContents(directory)
  $: isRoot = (directory === "/")

  function navigate(path) {
    if (directory === "/") {
      directory = "/" + path
    } else {
      directory += "/" + path
    }
  }
  function navigateUp() {
    directory = directory.split("/").slice(0, -1).join("/") || "/"
  }
</script>

<h1>{directory}</h1>

{#await filesPromise}
{:then files}
  {#if !isRoot}
    <div><button on:click={() => navigateUp()}>..</button></div>
  {/if}
  {#each files as entry}
    {#if entry.type === "directory"}
      <div>
        <button on:click={() => navigate(entry.name)}>{entry.name}</button>
      </div>
    {:else}
      <div>{entry.name}</div>
    {/if}
  {/each}
{/await}

<style>
  :global(body) {
    background-color: #444;
    color: #ccc;
  }
</style>

いくつか説明しましょう.いくつかのパス操作があります-ライブラリがありますが、私は何か複雑なことをしたくなかったので、私はちょうど私たちはMac、またはLinux/ セパレータ
単に追加/path または最後に取り除く/path ディレクトリを上下に変更します/ 空の文字列ではありません.
その後、他のすべての新しい約束を作成するようなfilesPromise , 解決files , 設定isRoot Svelteの反応性によって処理されます.
あなたが反応背景から来ているならば、それは2、3を取るでしょうuseEffect and usePromise Svelteはそれをすべての数字として、我々はする必要はありません呼び出し.または、私たちはそのロジックの多くを店やカスタムフック、またはそのようなものに移動することができますが、Svelteは十分に定期的なコンポーネントは、ちょうど今のところ、罰金を行うに十分な表現です.

結果

結果を以下に示します.

私はこのアプリに多くの機能を追加する予定ですが、ちょうど楽しみのために、次のエピソードのために反応して同じことをして、それが比較する方法を参照してください.
いつものように.all the code for the episode is here .