Electron Adventures: 에피소드 88: Svelte CSV 뷰어

몇 가지 흥미로운 OS 통합을 실험하고 싶지만 먼저 이를 위한 앱을 구해 보겠습니다. 간단한 CSV 뷰어는 Svelte입니다.

앱을 시작하면 파일 대화 상자가 열리고 열려는 하나 이상의 CSV 파일을 선택하라는 메시지가 표시됩니다. 그런 다음 선택한 각 파일에 대해 새 창이 열립니다.

a few CSV example files with Taylor Swift lyrics from Kaggle을 선택하여 samples 하위 폴더에 넣었습니다.
d3-dsv를 사용하여 CSV 파일을 구문 분석할 것입니다. D3의 일부이지만 별도로 사용할 수 있으므로 npm install d3-dsv .

index.js

먼저 CSV 파일을 선택하는 대화 상자를 팝업해야 합니다.

let { app, BrowserWindow, dialog } = require("electron")

async function createWindow() {
  let { canceled, filePaths } = await dialog.showOpenDialog({
    properties: ["openFile", "multiSelections", "showHiddenFiles"],
    filters: [
      { name: "CSV files", extensions: ["csv"] },
      { name: "All Files", extensions: ["*"] }
    ],
    message: "Select a CSV file to open",
    defaultPath: `${__dirname}/samples`,
  })
  if (canceled) {
    app.quit()
  }
  for (let path of filePaths) {
    let qs = new URLSearchParams({ path }).toString();
    let win = new BrowserWindow({
      width: 1024,
      height: 768,
      webPreferences: {
        preload: `${__dirname}/preload.js`,
      },
    })
    win.loadURL(`http://localhost:5000/?${qs}`)
  }
}

app.on("ready", createWindow)

app.on("window-all-closed", () => {
  app.quit()
})

이전에 언급했듯이 이것은 Electron API의 이상함입니다. 파일 대화 상자는 실제로 프런트엔드 문제이므로 논리적으로 프런트엔드 프로세스로 이동해야 하지만 Electron API는 이를 백엔드로 이동하므로 여기에서 몇 가지 후프를 건너뛰어야 합니다.

16진수 편집기에서 약간의 변경을 위해 파일만 표시하도록 기본 필터를 설정했습니다*.csv. OS별 필터 드롭다운을 통해 사용자가 재정의할 수 있습니다.

preload.js

let fs = require("fs")
let { contextBridge } = require("electron")

let q = new URLSearchParams(window.location.search)

let path = q.get("path")
let data = fs.readFileSync(path, "utf8")

contextBridge.exposeInMainWorld(
  "api", { path, data }
)

16진수 편집기에서 약간 변경하여 String가 아닌 Buffer를 반환하려고 하므로 CSV가 UTF8로 가정합니다. 그렇지 않다면, 음, 21세기라면 이미 그것을 고쳤어야 합니다.

src/App.svelte

이제 매우 간단한 CSV 뷰어의 경우 헤더나 데이터 유형 등을 특별히 처리하지 않고 모든 것을 간단한 HTML 테이블에 덤프합니다.

<script>
  import {csvParseRows} from "d3-dsv"

  let data = csvParseRows(window.api.data)
  let fileName = window.api.path.split("/").slice(-1)[0]
  let title = `CSV Viewer - ${fileName}`
</script>

<h1>CSV Viewer</h1>

<table>
  {#each data as row}
    <tr>
      {#each row as column}
        <td>{column}</td>
      {/each}
    </tr>
  {/each}
</table>


<svelte:head>
  <title>{title}</title>
</svelte:head>

<style>
:global(body) {
  margin: 0;
  background-color: #444;
  color: #fff;
}
tr {
  text-align: center;
}
</style>

결과

결과는 다음과 같습니다.



이제 기본 앱이 있으므로 다음 몇 개의 에피소드에 걸쳐 몇 가지 흥미로운 개선 사항을 추가할 것입니다.

평소와 같이 all the code for the episode is here .