masua 0.11.3 → 0.11.5

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,15 @@ 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
+    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 +258,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.3",
+  "version": "0.11.5",
   "repository": "github:tobua/masua",
   "homepage": "https://tobua.github.io/masua",
   "license": "MIT",
@@ -12,14 +12,14 @@
   "scripts": {
     "format": "bun biome format . --write",
     "lint": "bun biome lint .",
-    "types": "tsc --noEmit"
+    "types": "tsc"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.7.1",
-    "@types/bun": "^1.1.0",
-    "@types/react": "^18.2.79",
+    "@types/bun": "^1.1.1",
+    "@types/react": "^18.3.1",
     "typescript": "^5.4.5",
-    "zero-configuration": "^0.3.1"
+    "zero-configuration": "^0.6.0"
   },
   "peerDependencies": {
     "react": ">= 18",
@@ -33,6 +33,9 @@
   "trustedDependencies": [
     "zero-configuration"
   ],
+  "workspaces": [
+    "demo"
+  ],
   "type": "module",
   "sideEffects": false,
   "main": "./index.ts",
@@ -60,21 +63,12 @@
   "publishConfig": {
     "provenance": true
   },
-  "engines": {
-    "node": ">= 18"
-  },
   "configuration": {
-    "gitignore": "recommended",
-    "vscode": "recommended",
+    "gitignore": "bundle",
+    "vscode": "biome",
     "typescript": {
+      "extends": "plugin",
       "compilerOptions": {
-        "strict": true,
-        "skipLibCheck": true,
-        "lib": [
-          "DOM",
-          "ES2020"
-        ],
-        "module": "Preserve",
         "jsx": "react-jsx"
       },
       "files": [
@@ -89,12 +83,9 @@
           "nursery": {
             "all": true
           }
-        },
-        "ignore": [
-          "demo"
-        ]
+        }
       },
-      "formatter": {
+      "files": {
         "ignore": [
           "demo"
         ]