Factor common code in @hyparam/utils

.github/workflows/ci_apps_cli.yml

@@ -16,6 +16,10 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - run: npm i
+      - run: npm run build
+        working-directory: ./packages/utils
+      - run: npm run build
+        working-directory: ./packages/components
       - run: npm run lint
 
   typecheck:
@@ -26,6 +30,8 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - run: npm i
+      - run: npm run build
+        working-directory: ./packages/utils
       - run: npm run build
         working-directory: ./packages/components
       - run: tsc
@@ -36,6 +42,10 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - run: npm i
+      - run: npm run build
+        working-directory: ./packages/utils
+      - run: npm run build
+        working-directory: ./packages/components
       - run: npm run coverage
 
   buildcheck:
@@ -46,6 +56,8 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - run: npm i
+      - run: npm run build
+        working-directory: ./packages/utils
       - run: npm run build
         working-directory: ./packages/components
       - run: npm run build

.github/workflows/ci_apps_hyparquet_demo.yml

@@ -15,18 +15,24 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - run: npm i
+      - run: npm run build
+        working-directory: ./packages/utils
       - run: npm run lint
 
   typecheck:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - run: npm i
+      - run: npm run build
+        working-directory: ./packages/utils
       - run: tsc
 
   buildcheck:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - run: npm i
+      - run: npm run build
+        working-directory: ./packages/utils
       - run: npm run build

.github/workflows/ci_packages_components.yml

@@ -15,20 +15,26 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - run: npm i
+      - run: npm run build
+        working-directory: ./packages/utils
       - run: npm run lint
 
   typecheck:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - run: npm i
+      - run: npm run build
+        working-directory: ./packages/utils
       - run: tsc
 
   test:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - run: npm i
+      - run: npm run build
+        working-directory: ./packages/utils
       - run: npm run coverage
 
   buildcheck:
@@ -37,3 +43,5 @@ jobs:
       - uses: actions/checkout@v4
       - run: npm i
       - run: npm run build
+        working-directory: ./packages/utils
+      - run: npm run build

.github/workflows/ci_packages_utils.yml

@@ -0,0 +1,39 @@
+name: packages/utils
+on:
+  push:
+    paths:
+      - 'packages/utils/**'
+      - '.github/workflows/ci_packages_utils.yml'
+
+defaults:
+  run:
+    working-directory: ./packages/utils
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - run: npm i
+      - run: npm run lint
+
+  typecheck:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - run: npm i
+      - run: tsc
+
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - run: npm i
+      - run: npm run coverage
+
+  buildcheck:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - run: npm i
+      - run: npm run build

README.md

@@ -4,6 +4,7 @@ This is a monorepo for the Hyperparam project.
 
 It contains the following package:
 - [`@hyparam/components`](./packages/components): a library of React components for building Hyperparam UIs.
+- [`@hyparam/utils`](./packages/utils): a library of utils.
 
 It also contains the following applications:
 - [`hyperparam`](./apps/cli): a cli tool for viewing arbitrarily large datasets in the browser.

apps/hyparquet-demo/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@hyparam/utils": "file:../../packages/utils",
     "hyparquet": "1.5.0",
     "hyparquet-compressors": "0.1.4",
     "hightable": "0.7.0",

apps/hyparquet-demo/src/App.tsx

@@ -2,14 +2,12 @@ import { ReactNode } from 'react'
 import Page, { PageProps } from './Page.js'
 import Welcome from './Welcome.js'
 
+import { AsyncBufferFrom, Row, asyncBufferFrom, parquetQueryWorker } from '@hyparam/utils'
 import { DataFrame, rowCache } from 'hightable'
 import { FileMetaData, byteLengthFromUrl, parquetMetadataAsync, parquetSchema } from 'hyparquet'
 import { useCallback, useEffect, useState } from 'react'
 import Dropzone from './Dropzone.js'
 import Layout from './Layout.js'
-import { asyncBufferFrom } from './utils.js'
-import { parquetQueryWorker } from './workers/parquetWorkerClient.js'
-import { AsyncBufferFrom, Row } from './workers/types.js'
 
 export default function App(): ReactNode {
   const params = new URLSearchParams(location.search)

apps/hyparquet-demo/src/Dropdown.tsx

@@ -1,5 +1,5 @@
+import { cn } from '@hyparam/utils'
 import { ReactNode, useEffect, useRef, useState } from 'react'
-import { cn } from './utils.js'
 
 interface DropdownProps {
   label?: string

apps/hyparquet-demo/src/Layout.tsx

@@ -1,5 +1,5 @@
+import { cn } from '@hyparam/utils'
 import { ReactNode, useEffect } from 'react'
-import { cn } from './utils.js'
 
 interface LayoutProps {
   children: ReactNode

package.json

@@ -8,6 +8,7 @@
     "apps/cli",
     "apps/hightable-demo",
     "apps/hyparquet-demo",
-    "packages/components"
+    "packages/components",
+    "packages/utils"
   ]
 }

packages/components/README.md

@@ -1,3 +1,3 @@
 # React components for hyparam apps
 
-This package contains the React components for the hyparam apps.
+This package contains the React components for the hyparam apps.

packages/components/package.json

@@ -18,12 +18,12 @@
   "main": "dist/index.umd.min.js",
   "unpkg": "dist/index.umd.min.js",
   "module": "dist/index.es.min.js",
-  "types": "es/components/index.d.ts",
+  "types": "es/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/index.es.min.js",
       "require": "./dist/index.umd.min.js",
-      "types": "./es/components/index.d.ts"
+      "types": "./es/index.d.ts"
     }
   },
   "files": [
@@ -38,6 +38,7 @@
     "test": "vitest run"
   },
   "dependencies": {
+    "@hyparam/utils": "file:../utils",
     "hightable": "0.6.3",
     "hyparquet": "1.5.0",
     "hyparquet-compressors": "0.1.4"

packages/components/src/components/Breadcrumb.tsx → packages/components/src/Breadcrumb.tsx

@@ -1,4 +1,4 @@
-import { FileKey, UrlKey } from '../lib/key.js'
+import { FileKey, UrlKey } from '@hyparam/utils'
 
 interface BreadcrumbProps {
   parsedKey: UrlKey | FileKey

packages/components/src/components/Cell.tsx → packages/components/src/Cell.tsx

@@ -1,8 +1,7 @@
+import { FileKey, UrlKey, parquetDataFrame } from '@hyparam/utils'
 import { asyncRows } from 'hightable'
 import { asyncBufferFromUrl, parquetMetadataAsync } from 'hyparquet'
 import { useEffect, useState } from 'react'
-import { FileKey, UrlKey } from '../lib/key.js'
-import { parquetDataFrame } from '../lib/tableProvider.js'
 import Breadcrumb from './Breadcrumb.js'
 import Layout from './Layout.js'
 

packages/components/src/components/File.tsx → packages/components/src/File.tsx

@@ -1,5 +1,5 @@
+import { FileKey, UrlKey } from '@hyparam/utils'
 import { useState } from 'react'
-import { FileKey, UrlKey } from '../lib/key.js'
 import Breadcrumb from './Breadcrumb.js'
 import Layout from './Layout.js'
 import Viewer from './Viewer.js'

packages/components/src/components/Folder.tsx → packages/components/src/Folder.tsx

@@ -1,7 +1,5 @@
+import { FileMetadata, FolderKey, cn, getFileDate, getFileDateShort, getFileSize, listFiles } from '@hyparam/utils'
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { FileMetadata, getFileDate, getFileDateShort, getFileSize, listFiles } from '../lib/files.js'
-import type { FolderKey } from '../lib/key.js'
-import { cn } from '../lib/utils.js'
 import Layout, { Spinner } from './Layout.js'
 
 interface FolderProps {

packages/components/src/components/Layout.tsx → packages/components/src/Layout.tsx

@@ -1,5 +1,5 @@
+import { cn } from '@hyparam/utils'
 import { ReactNode, useEffect } from 'react'
-import { cn } from '../lib/utils.js'
 
 interface LayoutProps {
   children: ReactNode