masua 0.11.4 → 0.11.6

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Matthias Giger, 2017 Spope
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -43,7 +43,7 @@ grid(document.querySelector('#my-custom-grid'), {
 import { Grid } from 'masua/react'
 
 const MyGrid = () => (
-  <Grid disabled={window.innerWidth < 501}>
+  <Grid disabled={window.innerWidth < 501} gutter={50}>
     <Box />
     <Box size={3} />
     <Box size={2} />

package/index.ts

@@ -21,7 +21,7 @@ interface State {
 }
 
 export interface Configuration {
-  baseWidth: number
+  baseWidth: number | string
   gutter: number | string
   gutterX: number | string
   gutterY: number | string
@@ -33,6 +33,7 @@ export interface Configuration {
 }
 
 interface NumberConfiguration extends Configuration {
+  baseWidth: number
   gutter: number
   gutterX: number
   gutterY: number
@@ -52,7 +53,7 @@ function getCount(state: State) {
 function getLongest(state: State) {
   let longest = 0
   for (let index = 0; index < state.count; index += 1) {
-    if (state.columns[index] > state.columns[longest]) {
+    if ((state.columns[index] ?? 0) > (state.columns[longest] ?? 1)) {
       longest = index
     }
   }
@@ -66,7 +67,7 @@ function getNextColumn(index: number, state: State) {
 function getShortest(state: State) {
   let shortest = 0
   for (let index = 0; index < state.count; index += 1) {
-    if (state.columns[index] < state.columns[shortest]) {
+    if ((state.columns[index] ?? 1) < (state.columns[shortest] ?? 0)) {
       shortest = index
     }
   }
@@ -174,15 +175,17 @@ function layout(state: State) {
     } else {
       x = startX - (colWidth + childrenGutter) * nextColumn - colWidth
     }
-    const y = state.columns[nextColumn]
+    const y = state.columns[nextColumn] ?? 0
     const child = children[index] as HTMLElement
     child.style.transform = `translate3d(${Math.round(x)}px,${Math.round(y)}px,0)`
     child.style.position = 'absolute'
 
-    state.columns[nextColumn] += state.sizes[index] + (state.count > 1 ? state.gutterY : state.singleColumnGutter) // margin-bottom
+    if (state.columns[nextColumn]) {
+      state.columns[nextColumn] += (state.sizes[index] ?? 0) + (state.count > 1 ? state.gutterY : state.singleColumnGutter) // margin-bottom
+    }
   }
 
-  state.container.style.height = `${state.columns[getLongest(state)] - state.currentGutterY}px`
+  state.container.style.height = `${(state.columns[getLongest(state)] ?? 0) - state.currentGutterY}px`
 }
 
 function resizeThrottler(state: State) {
@@ -257,13 +260,14 @@ function getSizeInPixels(size: string) {
   return pixels
 }
 
-const sizeValues: (keyof Configuration)[] = ['gutter', 'gutterX', 'gutterY', 'singleColumnGutter']
+const sizeValues: (keyof Configuration)[] = ['baseWidth', '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)
+      // @ts-ignore No idea what's the issue here.
+      configuration[property] = getSizeInPixels(value)
     }
   }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "masua",
   "description": "Simple masonry layout library in TypeScript.",
-  "version": "0.11.4",
+  "version": "0.11.6",
   "repository": "github:tobua/masua",
   "homepage": "https://tobua.github.io/masua",
   "license": "MIT",
@@ -10,16 +10,15 @@
     "Spope (minimasonry)"
   ],
   "scripts": {
-    "format": "bun biome format . --write",
-    "lint": "bun biome lint .",
+    "check": "biome check --write .",
     "types": "tsc"
   },
   "devDependencies": {
-    "@biomejs/biome": "^1.7.1",
-    "@types/bun": "^1.1.0",
-    "@types/react": "^18.3.1",
-    "typescript": "^5.4.5",
-    "zero-configuration": "^0.5.5"
+    "@biomejs/biome": "^1.8.3",
+    "@types/bun": "^1.1.6",
+    "@types/react": "^18.3.3",
+    "typescript": "^5.5.3",
+    "zero-configuration": "^0.17.0"
   },
   "peerDependencies": {
     "react": ">= 18",
@@ -63,12 +62,21 @@
   "publishConfig": {
     "provenance": true
   },
-  "engines": {
-    "node": ">= 18"
-  },
   "configuration": {
     "gitignore": "bundle",
     "vscode": "biome",
+    "license": {
+      "extends": "MIT",
+      "authors": [
+        {
+          "name": "Matthias Giger"
+        },
+        {
+          "name": "Spope",
+          "year": "2017"
+        }
+      ]
+    },
     "typescript": {
       "extends": "plugin",
       "compilerOptions": {
@@ -81,13 +89,6 @@
     },
     "biome": {
       "extends": "recommended",
-      "linter": {
-        "rules": {
-          "nursery": {
-            "all": true
-          }
-        }
-      },
       "files": {
         "ignore": [
           "demo"

package/react.tsx

@@ -1,6 +1,5 @@
-// biome-ignore lint/nursery/noUndeclaredDependencies: This is a reference to the local package.
 import { type Configuration, grid } from 'masua'
-import { type JSX, useEffect, useMemo, useRef } from 'react'
+import { type JSX, useEffect, useRef } from 'react'
 
 interface ReactConfiguration extends Configuration {
   disabled: boolean
@@ -21,18 +20,15 @@ const configurationProperties = [
 export function Grid({ disabled = false, children, ...props }: JSX.IntrinsicElements['div'] & Partial<ReactConfiguration>) {
   const gridRef = useRef(null)
   const instance = useRef<ReturnType<typeof grid> | null>(null)
-  const configurationProps = useMemo(
-    () =>
-      Object.entries(props).reduce((result: { [key: string]: string }, [key, value]) => {
-        if (configurationProperties.includes(key)) {
-          result[key] = value
-          // @ts-ignore
-          delete props[key]
-        }
-        return result
-      }, {}),
-    [props],
-  )
+  // TODO props changes on every render, cannot be memoized, should do deep compare.
+  const configurationProps = Object.entries(props).reduce((result: { [key: string]: string }, [key, value]) => {
+    if (configurationProperties.includes(key)) {
+      result[key] = value
+      // @ts-ignore
+      delete props[key]
+    }
+    return result
+  }, {})
 
   useEffect(() => {
     if (disabled) {