demo: split out dropzone

.eslintrc.json

@@ -39,7 +39,7 @@
     "jsdoc/require-returns-type": "error",
     "jsdoc/sort-tags": "error",
     "no-constant-condition": "off",
-    "no-extra-parens": "error",
+    "no-extra-parens": "warn",
     "no-multi-spaces": "error",
     "no-trailing-spaces": "error",
     "no-useless-concat": "error",

demo/demo.js

@@ -6,6 +6,7 @@ import {
   parquetMetadata, parquetMetadataAsync, parquetRead, parquetSchema, toJson,
 } from '../src/hyparquet.js'
 import { asyncBufferFromUrl } from '../src/utils.js'
+import { initDropzone } from './dropzone.js'
 import { fileLayout, fileMetadata } from './layout.js'
 
 /**
@@ -13,55 +14,15 @@ import { fileLayout, fileMetadata } from './layout.js'
  * @typedef {import('../src/types.js').FileMetaData} FileMetaData
  */
 
-/* eslint-disable no-extra-parens */
-const dropzone = /** @type {HTMLElement} */ (document.getElementById('dropzone'))
-const fileInput = /** @type {HTMLInputElement} */ (document.getElementById('#file-input'))
 const content = document.querySelectorAll('#content')[0]
-const welcome = document.querySelectorAll('#welcome')[0]
 
-let enterCount = 0
-
-dropzone.addEventListener('dragenter', e => {
-  if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy'
-  dropzone.classList.add('over')
-  enterCount++
-})
-
-dropzone.addEventListener('dragover', e => {
-  e.preventDefault()
-})
-
-dropzone.addEventListener('dragleave', () => {
-  enterCount--
-  if (!enterCount) dropzone.classList.remove('over')
-})
-
-dropzone.addEventListener('drop', e => {
-  e.preventDefault() // prevent dropped file from being "downloaded"
-  dropzone.classList.remove('over')
-
-  if (!e.dataTransfer) throw new Error('Missing dataTransfer')
-  const { files, items } = e.dataTransfer
-  if (files.length > 0) {
-    const file = files[0]
-    processFile(file)
-  }
-  if (items.length > 0) {
-    const item = items[0]
-    if (item.kind === 'string') {
-      item.getAsString(str => {
-        if (str.startsWith('http')) {
-          processUrl(str)
-        }
-      })
-    }
-  }
-})
+// Initialize drag-and-drop
+initDropzone(handleFileDrop, handleUrlDrop)
 
 /**
  * @param {string} url
  */
-async function processUrl(url) {
+async function handleUrlDrop(url) {
   content.innerHTML = ''
   try {
     const asyncBuffer = await asyncBufferFromUrl(url)
@@ -76,7 +37,7 @@ async function processUrl(url) {
 /**
  * @param {File} file
  */
-function processFile(file) {
+function handleFileDrop(file) {
   content.innerHTML = ''
   const reader = new FileReader()
   reader.onload = async e => {
@@ -140,16 +101,6 @@ function renderSidebar(asyncBuffer, metadata, name) {
   sidebar.appendChild(fileLayout(metadata, asyncBuffer))
 }
 
-welcome.addEventListener('click', () => {
-  fileInput?.click()
-})
-
-fileInput?.addEventListener('change', () => {
-  if (fileInput.files?.length) {
-    processFile(fileInput.files[0])
-  }
-})
-
 /**
  * @param {import('hightable').DataFrame} data
  */

demo/dropzone.js

@@ -0,0 +1,60 @@
+/**
+ * Initialize the dropzone for file and url drag-and-drop.
+ *
+ * @param {Function} handleFileDrop
+ * @param {Function} handleUrlDrop
+ */
+export function initDropzone(handleFileDrop, handleUrlDrop) {
+  let enterCount = 0
+
+  const dropzone = /** @type {HTMLElement} */ (document.getElementById('dropzone'))
+  const fileInput = /** @type {HTMLInputElement} */ (document.getElementById('file-input'))
+  const welcome = document.querySelectorAll('#welcome')[0]
+
+  // Click to select file
+  welcome.addEventListener('click', () => {
+    fileInput?.click()
+  })
+  fileInput?.addEventListener('change', () => {
+    if (fileInput.files?.length) {
+      handleFileDrop(fileInput.files[0])
+    }
+  })
+
+  dropzone.addEventListener('dragenter', e => {
+    if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy'
+    dropzone.classList.add('over')
+    enterCount++
+  })
+
+  dropzone.addEventListener('dragover', e => {
+    e.preventDefault()
+  })
+
+  dropzone.addEventListener('dragleave', () => {
+    enterCount--
+    if (!enterCount) dropzone.classList.remove('over')
+  })
+
+  dropzone.addEventListener('drop', e => {
+    e.preventDefault() // prevent dropped file from being "downloaded"
+    dropzone.classList.remove('over')
+
+    if (!e.dataTransfer) throw new Error('Missing dataTransfer')
+    const { files, items } = e.dataTransfer
+    if (files.length > 0) {
+      const file = files[0]
+      handleFileDrop(file)
+    }
+    if (items.length > 0) {
+      const item = items[0]
+      if (item.kind === 'string') {
+        item.getAsString(str => {
+          if (str.startsWith('http')) {
+            handleUrlDrop(str)
+          }
+        })
+      }
+    }
+  })
+}

package.json

@@ -34,8 +34,8 @@
     "@types/node": "22.5.4",
     "@types/react": "18.3.5",
     "@types/react-dom": "18.3.0",
-    "@typescript-eslint/eslint-plugin": "8.4.0",
-    "@vitest/coverage-v8": "2.0.5",
+    "@typescript-eslint/eslint-plugin": "8.5.0",
+    "@vitest/coverage-v8": "2.1.0",
     "eslint": "8.57.0",
     "eslint-plugin-import": "2.30.0",
     "eslint-plugin-jsdoc": "50.2.2",
@@ -44,8 +44,8 @@
     "hyparquet-compressors": "0.1.4",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "rollup": "4.21.2",
-    "typescript": "5.5.4",
-    "vitest": "2.0.5"
+    "rollup": "4.21.3",
+    "typescript": "5.6.2",
+    "vitest": "2.1.0"
   }
 }