masua 0.10.3 → 0.11.1

package/README.md

@@ -6,6 +6,19 @@
 
 Simple masonry layout library in TypeScript. Initially forked from [minimasonry](https://github.com/Spope/MiniMasonry.js) by Spope.
 
+- ❗ Check out the [interactive demo and documentation](https://tobua.github.io/masua)
+- ⚛️ TypeScript and React support
+
+## Installation
+
+⚠️ This plugin is published as TypeScript and JSX (for the React plugin) see [this post on 𝕏](https://twitter.com/matthiasgiger/status/1766443368567971946) for the reasoning. Make sure to add the necessary types listed below if they are missing in your project and align your [`tsconfig.json`](https://github.com/tobua/masua/blob/main/tsconfig.json) with the reference used for this project. React is only required when the `masua/react` export is used.
+
+```sh
+bun install masua
+bun install @types/bun # or @types/node
+bun install @types/react # for React export
+```
+
 ## Usage
 
 ```ts
@@ -27,7 +40,7 @@ grid(document.querySelector('#my-custom-grid'), {
 ## React
 
 ```tsx
-import { Grid } from 'masua'
+import { Grid } from 'masua/react'
 
 const MyGrid = () => (
   <Grid disabled={window.innerWidth < 501}>

package/index.ts

@@ -2,18 +2,19 @@ interface State {
   sizes: number[]
   columns: number[]
   container: HTMLElement
+  // Number of columns, only used for internal calculations.
   count: number
   width: number
-  removeListener: () => void
-  currentGutterX: number | string
-  currentGutterY: number | string
-  resizeTimeout: NodeJS.Timeout
+  removeListener?: () => void
+  currentGutterX: number
+  currentGutterY: number
+  resizeTimeout?: ReturnType<typeof setTimeout>
   baseWidth: number
-  gutterX: number | string
-  gutterY: number | string
-  gutter: number | string
+  gutterX: number
+  gutterY: number
+  gutter: number
   minify: boolean
-  singleColumnGutter: string | number
+  singleColumnGutter: number
   surroundingGutter: boolean
   direction: 'ltr' | 'rtl'
   wedge: boolean
@@ -31,11 +32,18 @@ export interface Configuration {
   wedge: boolean
 }
 
+interface NumberConfiguration extends Configuration {
+  gutter: number
+  gutterX: number
+  gutterY: number
+  singleColumnGutter: number
+}
+
+const log = (message: string) => console.log(`masua: ${message}.`)
+
 function getCount(state: State) {
   if (state.surroundingGutter) {
-    return Math.floor(
-      (state.width - state.currentGutterX) / (state.baseWidth + state.currentGutterX),
-    )
+    return Math.floor((state.width - state.currentGutterX) / (state.baseWidth + state.currentGutterX))
   }
 
   return Math.floor((state.width + state.currentGutterX) / (state.baseWidth + state.currentGutterX))
@@ -69,7 +77,7 @@ function getShortest(state: State) {
 function reset(state: State) {
   state.sizes = []
   state.columns = []
-  state.count = null
+  state.count = 0
   state.width = state.container.clientWidth
   const minWidth = state.baseWidth
   if (state.width < minWidth) {
@@ -91,7 +99,7 @@ function reset(state: State) {
 }
 
 function computeWidth(state: State) {
-  let width
+  let width: number
   if (state.surroundingGutter) {
     width = (state.width - state.currentGutterX) / state.count - state.currentGutterX
   } else {
@@ -102,6 +110,7 @@ function computeWidth(state: State) {
   return width
 }
 
+// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: TODO decrease complexity
 function layout(state: State) {
   if (!state.container) {
     console.error('Container not found')
@@ -110,7 +119,7 @@ function layout(state: State) {
   reset(state)
 
   // Computing columns count
-  if (state.count == null) {
+  if (state.count === 0) {
     state.count = getCount(state)
   }
   // Computing columns width
@@ -129,7 +138,7 @@ function layout(state: State) {
     state.sizes[index] = child.clientHeight
   }
 
-  let startX
+  let startX: number
   if (state.direction === 'ltr') {
     startX = state.surroundingGutter ? state.currentGutterX : 0
   } else {
@@ -137,8 +146,7 @@ function layout(state: State) {
   }
   if (state.count > state.sizes.length) {
     // If more columns than children
-    const occupiedSpace =
-      state.sizes.length * (colWidth + state.currentGutterX) - state.currentGutterX
+    const occupiedSpace = state.sizes.length * (colWidth + state.currentGutterX) - state.currentGutterX
     if (state.wedge === false) {
       if (state.direction === 'ltr') {
         startX = (state.width - occupiedSpace) / 2
@@ -170,8 +178,7 @@ function layout(state: State) {
     const child = children[index] as HTMLElement
     child.style.transform = `translate3d(${Math.round(x)}px,${Math.round(y)}px,0)`
 
-    state.columns[nextColumn] +=
-      state.sizes[index] + (state.count > 1 ? state.gutterY : state.singleColumnGutter) // margin-bottom
+    state.columns[nextColumn] += state.sizes[index] + (state.count > 1 ? state.gutterY : state.singleColumnGutter) // margin-bottom
   }
 
   state.container.style.height = `${state.columns[getLongest(state)] - state.currentGutterY}px`
@@ -181,7 +188,7 @@ function resizeThrottler(state: State) {
   // ignore resize events as long as an actualResizeHandler execution is in the queue
   if (!state.resizeTimeout) {
     state.resizeTimeout = setTimeout(() => {
-      state.resizeTimeout = null
+      state.resizeTimeout = undefined
       // IOS Safari throw random resize event on scroll, call layout only if size has changed
       if (state.container.clientWidth !== state.width) {
         layout(state)
@@ -202,13 +209,13 @@ function init(state: State) {
   state.currentGutterX = state.gutterX
   state.currentGutterY = state.gutterY
 
-  const onResize = resizeThrottler.bind(this, state)
+  const onResize = resizeThrottler.bind(null, state)
   window.addEventListener('resize', onResize)
   state.removeListener = function removeListener() {
     window.removeEventListener('resize', onResize)
     if (state.resizeTimeout != null) {
       window.clearTimeout(state.resizeTimeout)
-      state.resizeTimeout = null
+      state.resizeTimeout = undefined
     }
   }
 
@@ -221,56 +228,111 @@ function destroy(state: State) {
   }
 
   const { children } = state.container
-  for (let index = 0; index < children.length; index += 1) {
-    const child = children[index] as HTMLElement
-    child.style.removeProperty('width')
-    child.style.removeProperty('transform')
+  for (const child of Array.from(children)) {
+    const childElement = child as HTMLElement
+    childElement.style.removeProperty('width')
+    childElement.style.removeProperty('transform')
   }
   state.container.style.removeProperty('height')
   state.container.style.removeProperty('min-width')
 }
 
+const sizeCache = new Map<string, number>()
+
+function getSizeInPixels(size: string) {
+  const fromCache = sizeCache.get(size)
+
+  if (fromCache) {
+    return fromCache
+  }
+
+  const tempElement = document.createElement('div')
+  tempElement.style.width = size
+  document.body.appendChild(tempElement)
+  const computedWidth = window.getComputedStyle(tempElement).width
+  document.body.removeChild(tempElement)
+  const pixels = Number.parseFloat(computedWidth)
+  sizeCache.set(size, pixels)
+  return pixels
+}
+
+const sizeValues: (keyof Configuration)[] = ['gutter', 'gutterX', 'gutterY', 'singleColumnGutter']
+
+function convertStringSizesToPixels(configuration: Partial<Configuration>): Partial<NumberConfiguration> {
+  for (const property of sizeValues) {
+    const value = configuration[property]
+    if (typeof value === 'string') {
+      configuration.gutter = getSizeInPixels(value)
+    }
+  }
+
+  return configuration as Partial<NumberConfiguration>
+}
+
+function getContainer(element: HTMLElement | string) {
+  if (typeof element === 'string') {
+    const foundElementOnPage = document.querySelector(element) as HTMLElement
+    if (!foundElementOnPage) {
+      log(`element with selector ${element} not found on page`)
+      return false
+    }
+    return foundElementOnPage
+  }
+
+  if (element instanceof HTMLElement) {
+    return element
+  }
+
+  log('first argument invalid, must be HTMLElement or a string')
+  return false
+}
+
 export function grid(element: HTMLElement | string, configuration: Partial<Configuration> = {}) {
   if (!element && process.env.NODE_ENV !== 'production') {
     throw new Error('masua: "element" parameter is missing or undefined.')
   }
 
+  const container = getContainer(element)
+
+  if (!container) {
+    return
+  }
+
+  const numberConfiguration = convertStringSizesToPixels(configuration)
+
   const state: State = {
     sizes: [],
     columns: [],
-    container: typeof element === 'string' ? document.querySelector(element) : element,
-    count: null,
+    container,
+    count: 0,
     width: 0,
-    removeListener: null,
-    currentGutterX: null,
-    currentGutterY: null,
-    resizeTimeout: null,
     baseWidth: 255,
     gutter: 10,
     minify: true,
     surroundingGutter: false,
     direction: 'ltr',
     wedge: false,
-    ...configuration,
-    gutterX: configuration.gutterX || configuration.gutter || 10,
-    gutterY: configuration.gutterY || configuration.gutter || 10,
+    currentGutterX: 0,
+    currentGutterY: 0,
+    ...numberConfiguration,
+    gutterX: numberConfiguration.gutterX || numberConfiguration.gutter || 10,
+    gutterY: numberConfiguration.gutterY || numberConfiguration.gutter || 10,
     // One column is theoretically an Y-gutter so that's preferred if available.
-    singleColumnGutter:
-      configuration.singleColumnGutter || configuration.gutterY || configuration.gutter || 10,
+    singleColumnGutter: numberConfiguration.singleColumnGutter || numberConfiguration.gutterY || numberConfiguration.gutter || 10,
   }
 
-  // TODO use calc if gutter is string.
-
   init(state)
 
   return {
     destroy: () => destroy(state),
     update: (changes: Partial<Configuration> = {}) => {
-      Object.assign(state, changes)
-      state.gutterX = changes.gutterX || changes.gutter || state.gutterX
-      state.gutterY = changes.gutterY || changes.gutter || state.gutterY
+      // TODO animate box and container location/height changes.
+      const numberChanges = convertStringSizesToPixels(changes)
+      Object.assign(state, numberChanges)
+      state.gutterX = numberChanges.gutterX || numberChanges.gutter || state.gutterX
+      state.gutterY = numberChanges.gutterY || numberChanges.gutter || state.gutterY
       state.singleColumnGutter =
-        changes.singleColumnGutter || changes.gutterY || changes.gutter || state.singleColumnGutter
+        numberChanges.singleColumnGutter || numberChanges.gutterY || numberChanges.gutter || state.singleColumnGutter
       layout(state)
     },
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "masua",
   "description": "Simple masonry layout library in TypeScript.",
-  "version": "0.10.3",
+  "version": "0.11.1",
   "repository": "github:tobua/masua",
   "homepage": "https://tobua.github.io/masua",
   "license": "MIT",
@@ -10,32 +10,25 @@
     "Spope (minimasonry)"
   ],
   "scripts": {
-    "build": "padua build",
-    "start": "padua watch"
-  },
-  "padua": {
-    "tsconfig": {
-      "include": [
-        "index.ts",
-        "react.tsx"
-      ]
-    }
+    "format": "bun biome format . --write",
+    "lint": "bun biome lint .",
+    "types": "tsc --noEmit"
   },
   "devDependencies": {
-    "@types/react": "^18.2.67",
-    "padua": "^4.0.0"
+    "@biomejs/biome": "^1.6.4",
+    "@types/bun": "^1.0.12",
+    "@types/react": "^18.2.76",
+    "typescript": "^5.4.5"
   },
   "peerDependencies": {
-    "react": ">= 18"
+    "react": ">= 18",
+    "typescript": ">= 5"
   },
   "peerDependenciesMeta": {
     "react": {
       "optional": true
     }
   },
-  "trustedDependencies": [
-    "padua"
-  ],
   "type": "module",
   "sideEffects": false,
   "main": "./index.ts",
@@ -48,8 +41,8 @@
     }
   },
   "files": [
-    "index.ts",
-    "react.tsx"
+    "*.ts",
+    "*.tsx"
   ],
   "keywords": [
     "masonry",
@@ -60,10 +53,6 @@
     "react",
     "typescript"
   ],
-  "prettier": "padua/configuration/.prettierrc.json",
-  "eslintConfig": {
-    "extends": "./node_modules/padua/configuration/eslint.cjs"
-  },
   "publishConfig": {
     "provenance": true
   },

package/react.tsx

@@ -1,5 +1,5 @@
-import { useRef, useEffect, useMemo } from 'react'
-import { grid, type Configuration } from 'masua'
+import { type Configuration, grid } from 'masua'
+import { type JSX, useEffect, useMemo, useRef } from 'react'
 
 interface ReactConfiguration extends Configuration {
   disabled: boolean
@@ -17,18 +17,15 @@ const configurationProperties = [
   'wedge',
 ]
 
-export function Grid({
-  disabled = false,
-  children,
-  ...props
-}: JSX.IntrinsicElements['div'] & Partial<ReactConfiguration>) {
+export function Grid({ disabled = false, children, ...props }: JSX.IntrinsicElements['div'] & Partial<ReactConfiguration>) {
   const gridRef = useRef(null)
-  const instance = useRef<ReturnType<typeof grid>>(null)
+  const instance = useRef<ReturnType<typeof grid> | null>(null)
   const configurationProps = useMemo(
     () =>
-      Object.entries(props).reduce((result, [key, value]) => {
+      Object.entries(props).reduce((result: { [key: string]: string }, [key, value]) => {
         if (configurationProperties.includes(key)) {
           result[key] = value
+          // @ts-ignore
           delete props[key]
         }
         return result
@@ -37,14 +34,20 @@ export function Grid({
   )
 
   useEffect(() => {
-    if (disabled) return () => {}
+    if (disabled) {
+      return
+    }
     if (instance.current) {
       instance.current.update()
       return instance.current.destroy
     }
+    if (!gridRef.current) {
+      return
+    }
+
     instance.current = grid(gridRef.current, configurationProps)
-    return instance.current.destroy
-  }, [children])
+    return instance.current?.destroy
+  }, [configurationProps, disabled])
 
   return (
     <div ref={gridRef} {...props}>