feature: added excel support to playground

Author: norberttech

shell.nix

@@ -56,6 +56,7 @@ pkgs.mkShell {
             # WASM build tools
             pkgs.emscripten
             pkgs.autoconf
+            pkgs.cmake
             pkgs.wget
             pkgs.gnutar
             pkgs.xz

wasm/.gitignore

@@ -6,7 +6,7 @@ manifest.json
 /libxml2-*
 /libpg_query
 /php-ext-snappy
-
+/libzip-*
 # Build logs
 *.log
 

wasm/build.sh

@@ -66,6 +66,68 @@ if [ ! -d "$LIBPG_QUERY_DIR" ]; then
     cd $PROJECT_ROOT
 fi
 
+echo "Build libzip for WebAssembly"
+LIBZIP_VERSION=1.11.3
+LIBZIP_DIR=libzip-$LIBZIP_VERSION
+LIBZIP_INSTALL_DIR="$PROJECT_ROOT/$LIBZIP_DIR/install"
+
+# Check for installed library, not just source directory
+if [ ! -f "$LIBZIP_INSTALL_DIR/lib/libzip.a" ]; then
+    # First, ensure Emscripten's zlib port is built by triggering a compile
+    # This downloads and builds zlib to the Emscripten cache
+    echo "int main(){return 0;}" > /tmp/zlib_test.c
+    emcc -sUSE_ZLIB=1 /tmp/zlib_test.c -o /tmp/zlib_test.js 2>/dev/null || true
+    rm -f /tmp/zlib_test.c /tmp/zlib_test.js /tmp/zlib_test.wasm
+
+    # Get Emscripten cache path and locate zlib
+    EM_CACHE=$(em-config CACHE)
+    ZLIB_LIBRARY="$EM_CACHE/sysroot/lib/wasm32-emscripten/lto/libz.a"
+    ZLIB_INCLUDE_DIR="$EM_CACHE/sysroot/include"
+
+    echo "Using zlib from Emscripten cache:"
+    echo "  ZLIB_LIBRARY=$ZLIB_LIBRARY"
+    echo "  ZLIB_INCLUDE_DIR=$ZLIB_INCLUDE_DIR"
+
+    if [ ! -f "$ZLIB_LIBRARY" ]; then
+        echo "ERROR: zlib library not found at $ZLIB_LIBRARY"
+        exit 1
+    fi
+
+    if [ ! -e $LIBZIP_DIR.tar.xz ]; then
+        wget https://libzip.org/download/libzip-$LIBZIP_VERSION.tar.xz
+    fi
+    tar xf $LIBZIP_DIR.tar.xz
+    cd $LIBZIP_DIR
+
+    mkdir -p build && cd build
+
+    # Configure libzip for WebAssembly using CMake
+    # Provide explicit paths to Emscripten's zlib (from its ports system)
+    # Disable encryption and optional compression to minimize dependencies
+    emcmake cmake .. \
+        -DCMAKE_INSTALL_PREFIX=$LIBZIP_INSTALL_DIR \
+        -DZLIB_LIBRARY=$ZLIB_LIBRARY \
+        -DZLIB_INCLUDE_DIR=$ZLIB_INCLUDE_DIR \
+        -DBUILD_SHARED_LIBS=OFF \
+        -DENABLE_COMMONCRYPTO=OFF \
+        -DENABLE_GNUTLS=OFF \
+        -DENABLE_MBEDTLS=OFF \
+        -DENABLE_OPENSSL=OFF \
+        -DENABLE_WINDOWS_CRYPTO=OFF \
+        -DENABLE_BZIP2=OFF \
+        -DENABLE_LZMA=OFF \
+        -DENABLE_ZSTD=OFF \
+        -DBUILD_TOOLS=OFF \
+        -DBUILD_REGRESS=OFF \
+        -DBUILD_EXAMPLES=OFF \
+        -DBUILD_DOC=OFF
+
+    emmake make -j$(nproc)
+    emmake make install
+
+    cd $PROJECT_ROOT
+fi
+
 echo "Download and extract PHP if needed"
 if [ ! -d "$PHP_PATH" ]; then
     if [ ! -e $PHP_PATH.tar.xz ]; then
@@ -94,9 +156,15 @@ cp -r "$SNAPPY_EXT_DIR" "$SNAPPY_EXT_DST"
 echo "Configure PHP"
 
 # Use -Oz for size optimization instead of -O3 for speed
-export CFLAGS="-Oz -flto -fPIC -g0 -DZEND_MM_ERROR=0 -I$LIBXML2_INSTALL_DIR/include/libxml2 -I$LIBPG_QUERY_INSTALL_DIR -I$LIBPG_QUERY_INSTALL_DIR/src -sUSE_ZLIB=1"
+export CFLAGS="-Oz -flto -fPIC -g0 -DZEND_MM_ERROR=0 -I$LIBXML2_INSTALL_DIR/include/libxml2 -I$LIBPG_QUERY_INSTALL_DIR -I$LIBPG_QUERY_INSTALL_DIR/src -I$LIBZIP_INSTALL_DIR/include -sUSE_ZLIB=1"
 export CXXFLAGS="-Oz -flto -fPIC -g0 -std=c++11 -sUSE_ZLIB=1"
-export LDFLAGS="-L$LIBXML2_INSTALL_DIR/lib -L$LIBPG_QUERY_INSTALL_DIR -sUSE_ZLIB=1"
+export LDFLAGS="-L$LIBXML2_INSTALL_DIR/lib -L$LIBPG_QUERY_INSTALL_DIR -L$LIBZIP_INSTALL_DIR/lib -sUSE_ZLIB=1"
+
+# Set PKG_CONFIG_PATH so PHP configure can find libzip
+# Note: emconfigure overrides PKG_CONFIG_PATH with PKG_CONFIG_LIBDIR, so we also set LIBZIP_* directly
+export PKG_CONFIG_PATH="$LIBZIP_INSTALL_DIR/lib/pkgconfig:${PKG_CONFIG_PATH:-}"
+export LIBZIP_CFLAGS="-I$LIBZIP_INSTALL_DIR/include"
+export LIBZIP_LIBS="-L$LIBZIP_INSTALL_DIR/lib -lzip"
 
 cd $PHP_PATH
 
@@ -106,6 +174,7 @@ cd $PHP_PATH
 # - xml, dom, xmlreader, xmlwriter: required by flow-php/etl-adapter-xml
 # - phar, mbstring: essential PHP extensions
 # - iconv: required by symfony/polyfill-mbstring
+# - zip: required by flow-php/etl-adapter-excel (XLSX files are ZIP archives)
 
 # Fix permissions for build scripts
 chmod +x buildconf build/config-stubs build/shtool 2>/dev/null || true
@@ -143,7 +212,8 @@ emconfigure ./configure \
   --enable-xmlwriter \
   --enable-pg-query \
   --with-pg-query=$LIBPG_QUERY_INSTALL_DIR \
-  --enable-snappy
+  --enable-snappy \
+  --with-zip
 
 if [ $? -ne 0 ]; then
     echo "emconfigure failed. Content of config.log:"
@@ -189,7 +259,7 @@ emcc $CFLAGS $LDFLAGS \
   -s ASYNCIFY=1 \
   -s STACK_OVERFLOW_CHECK=0 \
   -s SAFE_HEAP=0 \
-  libs/libphp.a pib_eval.o $LIBXML2_INSTALL_DIR/lib/libxml2.a $LIBPG_QUERY_INSTALL_DIR/libpg_query.a -o out/php.js
+  libs/libphp.a pib_eval.o $LIBXML2_INSTALL_DIR/lib/libxml2.a $LIBPG_QUERY_INSTALL_DIR/libpg_query.a $LIBZIP_INSTALL_DIR/lib/libzip.a -o out/php.js
 
 echo "Copy outputs to web/landing/assets/wasm"
 OUTPUT_DIR="$PROJECT_ROOT/../web/landing/assets/wasm"

web/landing/assets/controllers/playground_tabs_controller.js

@@ -74,6 +74,19 @@ export default class extends Controller {
 
         try {
             const fullPath = `/workspace${filePath}`
+            const fileName = filePath.split('/').pop()
+            const extension = fileName.split('.').pop().toLowerCase()
+            const isBinary = this.#isBinaryExtension(extension)
+
+            if (isBinary) {
+                this.previewFileValue = filePath
+                this.#setPreviewContent(`[Binary file: ${fileName}]\n\nClick the download button to save this file.`, filePath)
+                this.activeTabValue = 'preview'
+                this.#updateTabUI()
+                this.#log('Binary file opened:', filePath)
+                return
+            }
+
             const result = await this.wasmOutlet.readFile(fullPath)
 
             if (!result.success || result.content === null || result.content === undefined) {
@@ -118,21 +131,39 @@ export default class extends Controller {
         this.openFile({ currentTarget: { dataset: { filePath } } })
     }
 
-    downloadPreviewFile(event) {
+    async downloadPreviewFile(event) {
         if (event) {
             event.preventDefault()
         }
 
-        if (!this.previewFileValue || !this.#previewEditor) {
+        if (!this.previewFileValue) {
             this.#log('No file to download')
             return
         }
 
         try {
-            const content = this.#previewEditor.state.doc.toString()
             const fileName = this.previewFileValue.split('/').pop()
+            const extension = fileName.split('.').pop().toLowerCase()
+            const isBinary = this.#isBinaryExtension(extension)
+
+            let blob
+            if (isBinary && this.hasWasmOutlet) {
+                const fullPath = `/workspace${this.previewFileValue}`
+                const result = await this.wasmOutlet.readFile(fullPath, true)
+                if (!result.success) {
+                    this.#log('Failed to read binary file:', this.previewFileValue)
+                    return
+                }
+                const mimeType = this.#getMimeType(extension)
+                blob = new Blob([result.content], { type: mimeType })
+            } else if (this.#previewEditor) {
+                const content = this.#previewEditor.state.doc.toString()
+                blob = new Blob([content], { type: 'text/plain' })
+            } else {
+                this.#log('No content to download')
+                return
+            }
 
-            const blob = new Blob([content], { type: 'text/plain' })
             const url = URL.createObjectURL(blob)
             const a = document.createElement('a')
             a.href = url
@@ -148,6 +179,32 @@ export default class extends Controller {
         }
     }
 
+    #isBinaryExtension(extension) {
+        const binaryExtensions = ['xlsx', 'xls', 'zip', 'tar', 'gz', 'pdf', 'png', 'jpg', 'jpeg', 'gif', 'bmp', 'ico', 'parquet', 'avro', 'orc']
+        return binaryExtensions.includes(extension)
+    }
+
+    #getMimeType(extension) {
+        const mimeTypes = {
+            'xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+            'xls': 'application/vnd.ms-excel',
+            'zip': 'application/zip',
+            'tar': 'application/x-tar',
+            'gz': 'application/gzip',
+            'pdf': 'application/pdf',
+            'png': 'image/png',
+            'jpg': 'image/jpeg',
+            'jpeg': 'image/jpeg',
+            'gif': 'image/gif',
+            'bmp': 'image/bmp',
+            'ico': 'image/x-icon',
+            'parquet': 'application/octet-stream',
+            'avro': 'application/octet-stream',
+            'orc': 'application/octet-stream'
+        }
+        return mimeTypes[extension] || 'application/octet-stream'
+    }
+
     #setPreviewContent(content, filePath) {
         if (!this.hasPreviewPanelTarget) {
             return

web/landing/assets/controllers/wasm_controller.js

@@ -223,8 +223,8 @@ require '/workspace/bin/cs-fixer.php';
         })
     }
 
-    async readFile(path) {
-        const content = this.#readFileSync(path)
+    async readFile(path, binary = false) {
+        const content = binary ? this.#readFileBinarySync(path) : this.#readFileSync(path)
         if (content === null) {
             return { success: false, error: 'File not found' }
         }
@@ -363,6 +363,23 @@ require '/workspace/bin/cs-fixer.php';
         }
     }
 
+    #readFileBinarySync(filePath) {
+        if (!this.#phpModuleLoaded) {
+            this.#logError('Cannot read file: PHP module not loaded yet')
+            return null
+        }
+
+        try {
+            const FS = this.#phpModule.FS
+            const content = FS.readFile(filePath)
+            this.#log('File read successfully (binary):', filePath)
+            return content
+        } catch (error) {
+            this.#logError('Error reading file:', error)
+            return null
+        }
+    }
+
     #uploadFile(filename, uint8Array) {
         if (!this.#phpModuleLoaded) {
             this.#logError('Cannot upload file: PHP module not loaded yet')