svelte-table-layout - npm Package Compare versions

Comparing version 0.0.12 to 0.0.13

dist/Cell.svelte.d.ts

@@ -11,3 +11,3 @@ import { SvelteComponentTyped } from "svelte";
         class?: string | undefined;
-        this?: HTMLTableCellElement | undefined;
+        innerThis?: HTMLTableCellElement | undefined;
         data?: Record<string, any> | undefined;
@@ -14,0 +14,0 @@ use?: (((element: HTMLTableCellElement, params: any) => void | {

dist/Row.svelte.d.ts

@@ -8,3 +8,3 @@ import { SvelteComponentTyped } from "svelte";
         class?: string | undefined;
-        this?: HTMLTableRowElement | undefined;
+        innerThis?: HTMLTableRowElement | undefined;
         data?: Record<string, any> | undefined;
@@ -11,0 +11,0 @@ };

dist/Table.svelte.d.ts

@@ -11,3 +11,3 @@ import { SvelteComponentTyped } from "svelte";
         class?: string | undefined;
-        this?: HTMLTableElement | undefined;
+        innerThis?: HTMLTableElement | undefined;
         data?: Record<string, any> | undefined;
@@ -31,19 +31,2 @@ headStyle?: string | undefined;
     events: {
-        click: MouseEvent;
-        mousedown: MouseEvent;
-        mouseup: MouseEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mousemove: MouseEvent;
-        pointerdown: PointerEvent;
-        pointerup: PointerEvent;
-        pointerenter: PointerEvent;
-        pointerleave: PointerEvent;
-        pointermove: PointerEvent;
-        pointerout: PointerEvent;
-        pointercancel: PointerEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        keyup: KeyboardEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
@@ -50,0 +33,0 @@ };

dist/utils.js

 import { BROWSER } from 'esm-env';
-import { onDestroy, onMount, tick } from 'svelte';
+import { onMount, tick } from 'svelte';
 // iterators
 function* rowsOfTable(table) {
-    for (const body of table.children) {
-        for (const row of body.children) {
-            if (!(row instanceof HTMLTableRowElement))
-                continue;
-            yield row;
-        }
-    }
+    yield* table.querySelectorAll('tr');
 }
 function* cellsOfRow(row) {
-    for (const cell of row.children) {
-        if (!(cell instanceof HTMLTableCellElement))
-            continue;
-        yield cell;
-    }
+    yield* row.querySelectorAll('td');
+    yield* row.querySelectorAll('th');
 }
@@ -163,4 +154,3 @@ // parsing
     const varsSet = new Set();
-    for (let rowIndex = 0; rowIndex < grid.rows.length; rowIndex++) {
-        const row = grid.rows[rowIndex];
+    for (const row of grid.rows) {
         for (let colIndex = 0; colIndex < row.children.length; colIndex++) {
@@ -172,4 +162,2 @@ const cell = row.children[colIndex];
             el.style.setProperty('--table-column-index', `${colIndex + 1}`);
-            el.style.setProperty('--table-column-span', `${cell.colspan + 1}`);
-            el.style.setProperty('--table-row-span', `${cell.rowspan + 1}`);
             varsSet.add(el);
@@ -195,16 +183,11 @@ }
 function observeFirstRow(table, observer) {
-    for (const row of rowsOfTable(table)) {
-        for (const cell of cellsOfRow(row)) {
-            observer.observe(cell);
-        }
-        break;
-    }
+    table
+        .querySelector('tr')
+        ?.querySelectorAll('td,th')
+        .forEach((cell) => observer.observe(cell));
 }
 function observeFirstColumn(table, observer) {
-    for (const row of rowsOfTable(table)) {
-        for (const cell of cellsOfRow(row)) {
-            observer.observe(cell);
-            break;
-        }
-    }
+    const elem = table.querySelector('tr td,tr th');
+    if (elem)
+        observer.observe(elem);
 }
@@ -215,25 +198,18 @@ export function observe({ getTable, columnSpec, gridChanged, dimensionsChanged }) {
     let table;
-    let grid;
     let colspec = [];
-    columnSpec.subscribe(async (c) => {
-        colspec = fillInColumnSpec(c);
-        onMutation();
-        await tick();
-        onResize();
-    });
-    const onResize = () => {
-        dimensionsChanged(computeDimensions(table));
-    };
-    const onMutation = () => {
-        grid = makeTableGrid(table, colspec);
-        gridChanged(grid);
-        setIndicesInGrid(grid);
-        resizeObserver.disconnect();
-        resizeObserver.observe(table);
-        observeFirstRow(table, resizeObserver);
-        observeFirstColumn(table, resizeObserver);
-    };
-    const resizeObserver = new ResizeObserver(onResize);
-    const mutationObserver = new MutationObserver(onMutation);
-    onMount(async () => {
+    onMount(() => {
+        const onResize = () => {
+            dimensionsChanged(computeDimensions(table));
+        };
+        const onMutation = () => {
+            const grid = makeTableGrid(table, colspec);
+            gridChanged(grid);
+            setIndicesInGrid(grid);
+            resizeObserver.disconnect();
+            resizeObserver.observe(table);
+            observeFirstRow(table, resizeObserver);
+            observeFirstColumn(table, resizeObserver);
+        };
+        const resizeObserver = new ResizeObserver(onResize);
+        const mutationObserver = new MutationObserver(onMutation);
         table = getTable();
@@ -246,11 +222,14 @@ mutationObserver.observe(table, {
         });
-        onMutation();
-        onResize();
-        await tick();
-        onMutation();
+        const unobserve = columnSpec.subscribe(async (c) => {
+            colspec = fillInColumnSpec(c);
+            await tick();
+            onMutation();
+            onResize();
+        });
+        return () => {
+            mutationObserver.disconnect();
+            resizeObserver.disconnect();
+            unobserve();
+        };
     });
-    onDestroy(() => {
-        mutationObserver.disconnect();
-        resizeObserver.disconnect();
-    });
 }
@@ -257,0 +236,0 @@ export function mapOpt(value, fn, def) {

package.json

 {
-  "name": "svelte-table-layout",
-  "version": "0.0.12",
-  "license": "MIT",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js"
-    }
-  },
-  "files": [
-    "dist"
-  ],
-  "peerDependencies": {
-    "svelte": "^3.54.0"
-  },
-  "devDependencies": {
-    "@playwright/test": "^1.28.1",
-    "@sveltejs/adapter-auto": "^2.0.0",
-    "@sveltejs/kit": "^1.5.0",
-    "@sveltejs/package": "^2.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.45.0",
-    "@typescript-eslint/parser": "^5.45.0",
-    "eslint": "^8.28.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-svelte3": "^4.0.0",
-    "prettier": "^2.8.0",
-    "prettier-plugin-svelte": "^2.8.1",
-    "publint": "^0.1.9",
-    "sass": "^1.58.3",
-    "svelte": "^3.54.0",
-    "svelte-check": "^3.0.1",
-    "svelte-preprocess": "^5.0.1",
-    "tslib": "^2.4.1",
-    "typescript": "^4.9.3",
-    "vite": "^4.0.0"
-  },
-  "svelte": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "type": "module",
-  "dependencies": {
-    "esm-env": "^1.0.0"
-  },
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build && npm run package",
-    "preview": "vite preview",
-    "package": "svelte-kit sync && svelte-package && publint",
-    "test": "playwright test",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --plugin-search-dir . --check . && eslint .",
-    "format": "prettier --plugin-search-dir . --write ."
-  }
-}
+	"name": "svelte-table-layout",
+	"version": "0.0.13",
+	"license": "MIT",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run package",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"test": "playwright test",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --plugin prettier-plugin-svelte --check . && eslint .",
+		"format": "prettier --plugin prettier-plugin-svelte --write ."
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist"
+	],
+	"peerDependencies": {
+		"svelte": "^3.54.0 || ^4.0.0"
+	},
+	"devDependencies": {
+		"@playwright/test": "^1.37.0",
+		"@sveltejs/adapter-auto": "^2.1.0",
+		"@sveltejs/kit": "^1.22.5",
+		"@sveltejs/package": "^2.2.1",
+		"@typescript-eslint/eslint-plugin": "^6.3.0",
+		"@typescript-eslint/parser": "^6.3.0",
+		"eslint": "^8.46.0",
+		"eslint-config-prettier": "^9.0.0",
+		"eslint-plugin-svelte": "^2.32.4",
+		"prettier": "^3.0.1",
+		"prettier-plugin-svelte": "^3.0.3",
+		"publint": "^0.2.0",
+		"sass": "^1.65.1",
+		"svelte": "^4.1.2",
+		"svelte-check": "^3.4.6",
+		"svelte-preprocess": "^5.0.4",
+		"tslib": "^2.6.1",
+		"typescript": "^5.1.6",
+		"vite": "^4.4.9"
+	},
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"dependencies": {
+		"esm-env": "^1.0.0"
+	}
+}

No alert changes

Improved metrics

Total package byte prevSize

27507

10.24%

Number of package files

14

7.69%

Worsened metrics

Lines of code

421

-8.28%

No dependency changes