Buka dan Kelola File Tarball Langsung di Javascript, tanpa NodeJS

Posted on by syauqi wiryahasana

Dunia pemrograman web semakin berkembang pesat. Saat ini, JavaScript tidak hanya bisa berinteraksi dengan elemen antarmuka web, tapi juga mampu memproses file secara langsung! Artikel ini membahas mengenai pustaka JsExt, yang memungkinkan JavaScript untuk membuka dan mengelola file terkompresi berformat .tar (tarball) tanpa memerlukan server.

Melewati Batasan: Memproses Tarball dengan Javascript

Sebelumnya, memproses file tarball membutuhkan server untuk menjalankan program seperti tar. Namun, JsExt hadir sebagai solusi inovatif. Pustaka ini menyediakan API Tarball yang canggih, memungkinkan kita untuk memanipulasi file tarball secara langsung di Javascript.

API Tarball: Fleksibel dan Universal

API Tarball dirancang untuk menjadi fleksibel dan universal. Ia tidak hanya bisa mengekstrak file dari tarball, tetapi juga memungkinkan kita untuk menambah file baru, menghapus file yang ada, dan bahkan melihat daftar isi tarball, layaknya aplikasi pengelola file biasa.

Keunggulan Utama API Tarball:

  • Tidak Bergantung pada Server: API Tarball tidak bergantung pada pustaka atau runtime server tertentu. Ia memanfaatkan Web API modern, terutama ReadableStream, yang tersedia di semua browser dan runtime modern seperti Node.js, Deno, Bun, Cloudflare Workers, dan lain sebagainya.
  • Mudah Digunakan: JsExt menawarkan abstraksi yang mudah dipahami. Kita dapat berinteraksi dengan file tarball melalui API yang intuitif, tanpa perlu menulis kode rumit yang memanipulasi struktur file secara manual.
  • Beragam Fitur: API Tarball menyediakan berbagai fitur yang memudahkan pengelolaan file tarball, seperti:
    • Menambah file baru ke tarball
    • Menghapus file yang ada di tarball
    • Melihat daftar isi tarball (nama file, ukuran, dan lain-lain)
    • Menyimpan tarball yang sudah dimodifikasi

Memulai dengan JsExt

Untuk menggunakan API Tarball, kita perlu memuat pustaka JsExt terlebih dahulu. Metode pemuatan tergantung pada lingkungan pengembangan yang digunakan. Berikut beberapa contoh:

  • Node.js, Deno, Bun, Cloudflare Workers, dan Browser (dengan bundler atau import map):
import { Tarball } from "@ayonli/jsext/archive";
  • Deno dengan URL import:
import { Tarball } from "https://ayonli.github.io/jsext/archive.ts";
  • Browser dengan URL import:
import { Tarball } from "https://ayonli.github.io/jsext/esm/archive.js";

Membuat Instance Tarball

Ada dua cara untuk membuat instance Tarball:

  1. Membuat Tarball Kosong:
const tarball = new Tarball();
  1. Memuat File Tarball yang Ada:
// Memuat dari file system (termasuk OPFS di browser)
import { createReadableStream } from "@ayonli/jsext/fs";

const stream = createReadableStream("/file/to/archive.tar");
const tarball = await Tarball.load(stream);

// Memuat dari response HTTP
const res = await fetch("https://example.com/file/to/archive.tar");
const tarball = await Tarball.load(res.body!);

Menambahkan File ke Tarball

Setelah memiliki instance Tarball, kita bisa dengan mudah menambahkan file baru ke dalamnya. Bahkan, kita bisa menambah file ke tarball yang sudah terisi sebelumnya.

const file = new File(["Hello, World!"], "hello.txt", { type: "text/plain" });
tarball.appen(file);

Kita juga dapat menambahkan direktori atau file beserta jalurnya. JsExt akan secara otomatis membuat direktori yang diperlukan jika belum ada.

const file = new Blob(["This is some content"], { type: "text/plain" });
tarball.append(file, { relativePath: "foo/bar.txt" });

// Sekarang tarball akan memiliki direktori `foo` dan file `bar.txt` di dalamnya.

Mengelola File di Dalam Tarball

Kita bisa melihat daftar file yang ada di dalam tarball, atau bahkan mengambil isi dari sebuah file tertentu.

import { readAsText } from "@ayonli/jsext/reader";

const entry = tarball.retrieve("hello.txt")!;
const content = await readAsText(entry.stream);

console.log(content); // Hello,

Melanjutkan Jelajah Tarball dengan Javascript: Mengintip Isi dan Menyimpannya

Menjelajahi Isi Tarball

API Tarball menyediakan dua cara untuk melihat isi tarball:

  1. Iterasi Manual:
for (const entry of tarball) {
  if (entry.kind === "directory") {
    console.log(`Directory: ${entry.name}; Path: ${entry.relativePath}`);
  } else {
    console.log(`File: ${entry.name}; Path: ${entry.relativePath}; Size: ${entry.size}; Last-Modified: ${entry.mtime}`);
  }
}
  1. Tampilan Pohon:
const tree = tarball.treeView();
console.log(tree);

Menyimpan Tarball yang Telah Dimodifikasi

Sama seperti memuat tarball, kita dapat menyimpan tarball yang telah dimodifikasi ke file atau mengunggahnya ke URL.

// Menyimpan tarball ke file system (termasuk OPFS di browser)
import { createWritableStream } from "@ayonli/jsext/fs";

const stream = createWritableStream("/file/to/save.tar");
await tarball.stream().pipeTo(stream);

// Mengunggah tarball ke URL
const res = await fetch("https://example.com/path/to/save.tar", {
  method: "PUT",
  body: tarball.stream(),
  headers: {
    "Content-Type": "application/x-tar",
  },
});

Kompresi Tarball (Opsional)

Sebelum menyimpan tarball, kita dapat mengompresnya menjadi format .tar.gz untuk menghemat ruang penyimpanan.

const res = await fetch("https://example.com/path/to/save.tar.gz", {
  method: "PUT",
  body: tarball.stream({ gzip: true }),
  headers: {
    "Content-Type": "application/gzip",
  },
});

Fitur Tambahan API Tarball

API Tarball menyediakan beberapa fitur tambahan untuk mengelola file tarball, seperti:

  • remove: Menghapus file dari tarball
  • replace: Mengganti file yang sudah ada di tarball
  • stat: Mendapatkan informasi statistik tentang file di tarball

JsExt: Lebih dari Sekedar Tarball

JsExt adalah pustaka Javascript yang kaya akan fitur, tidak hanya untuk mengelola tarball. Berikut beberapa fitur menarik lainnya:

  • Fungsi bawaan untuk berbagai tipe data yang tidak tersedia secara default di Javascript
  • Fungsi utilitas untuk memperluas kontrol alur program
  • Pemrosesan multi-thread untuk Javascript
  • API file system untuk server dan browser
  • Kotak dialog terbuka di aplikasi CLI dan web
  • Manipulasi jalur file system dan URL dengan cara yang sama
  • Penanganan array byte dan aliran yang dapat dibaca dengan mudah
  • Pembuatan, ekstraksi, dan pratinjau arsip di semua runtime

JsExt dan API Tarball-nya membuka peluang baru bagi pengembang Javascript untuk mengelola file tarball secara langsung di browser atau server tanpa memerlukan server. Hal ini memungkinkan aplikasi web yang lebih canggih dan interaktif, seperti aplikasi pengelola file online atau alat kompresi file.