chore: add and configure size-limit (#5370)

* chore: add and configure size-limit

* format

* fix new svelte example

Author: KevinVandy

examples/svelte/filtering/src/App.svelte

@@ -1,30 +1,26 @@
 <script lang="ts">
-  import './index.css';
-  import { writable } from 'svelte/store';
+  import './index.css'
+  import { writable } from 'svelte/store'
 
-import './index.css';
+  import './index.css'
 
   import {
     createSvelteTable,
     flexRender,
     getCoreRowModel,
-	  getFilteredRowModel,
-	  getPaginationRowModel,
-    type FilterFn
-  } from '@tanstack/svelte-table';
+    getFilteredRowModel,
+    getPaginationRowModel,
+  } from '@tanstack/svelte-table'
 
-  import { type RankingInfo, rankItem } from '@tanstack/match-sorter-utils';
+  import type {
+    ColumnDef,
+    TableOptions,
+    FilterFn,
+  } from '@tanstack/svelte-table'
 
-  import { makeData, type Person } from './makeData';
+  import { rankItem } from '@tanstack/match-sorter-utils'
 
-  declare module '@tanstack/table-core' {
-    interface FilterFns {
-      fuzzy: FilterFn<unknown>;
-    }
-    interface FilterMeta {
-      itemRank: RankingInfo;
-    }
-  }
+  import { makeData, type Person } from './makeData'
 
   let globalFilter = ''
 
@@ -39,18 +35,20 @@ import './index.css';
     return itemRank.passed
   }
 
+  let columns: ColumnDef<Person>[] = [
+    {
+      accessorFn: row => `${row.firstName} ${row.lastName}`,
+      id: 'fullName',
+      header: 'Name',
+      cell: info => info.getValue(),
+      footer: props => props.column.id,
+      filterFn: 'fuzzy',
+    },
+  ]
+
   const options = writable<TableOptions<any>>({
     data: makeData(25),
-    columns: [
-      {
-        accessorFn: (row) => `${row.firstName} ${row.lastName}`,
-        id: 'fullName',
-        header: 'Name',
-        cell: (info) => info.getValue(),
-        footer: (props) => props.column.id,
-        filterFn: 'fuzzy',
-      },
-    ],
+    columns,
     filterFns: {
       fuzzy: fuzzyFilter,
     },
@@ -62,8 +60,19 @@ import './index.css';
   })
 
   const table = createSvelteTable(options)
+
+  const handleKeyUp = (e: any) => {
+    $table.setGlobalFilter(String(e?.target?.value))
+  }
 </script>
-<input type="text" placeholder="Global filter" class="border w-full p-1" bind:value={globalFilter} on:keyup={(e) => $table.setGlobalFilter(String(e.target.value))} />
+
+<input
+  type="text"
+  placeholder="Global filter"
+  class="border w-full p-1"
+  bind:value={globalFilter}
+  on:keyup={handleKeyUp}
+/>
 <div class="h-2" />
 <table class="w-full">
   <thead>
@@ -99,4 +108,4 @@ import './index.css';
   </tbody>
 </table>
 <div class="h-2" />
-<pre>"globalFilter": "{$table.getState().globalFilter}"</pre>
+<pre>"globalFilter": "{$table.getState().globalFilter}"</pre>

examples/svelte/filtering/src/main.ts

@@ -1,6 +1,19 @@
 // @ts-ignore
 import App from './App.svelte'
 
+import type { FilterFn } from '@tanstack/svelte-table'
+
+import type { RankingInfo } from '@tanstack/match-sorter-utils'
+
+declare module '@tanstack/svelte-table' {
+  interface FilterFns {
+    fuzzy: FilterFn<unknown>
+  }
+  interface FilterMeta {
+    itemRank: RankingInfo
+  }
+}
+
 const app = new App({
   target: document.getElementById('root')!,
 })

knip.json

@@ -1,5 +1,6 @@
 {
   "$schema": "https://unpkg.com/knip@4/schema.json",
+  "ignoreDependencies": ["size-limit", "@size-limit/preset-small-lib"],
   "ignoreWorkspaces": ["examples/**"],
   "workspaces": {
     "packages/match-sorter-utils": {

package.json

@@ -1,5 +1,6 @@
 {
   "name": "table",
+  "namespace": "@tanstack",
   "private": true,
   "repository": "https://github.com/tanstack/table.git",
   "packageManager": "pnpm@8.12.1",
@@ -16,8 +17,8 @@
     "test:lib:dev": "pnpm test:lib && nx watch --all -- pnpm test:lib",
     "test:types": "nx affected --targets=test:types --exclude=examples/**",
     "test:knip": "knip",
-    "build": "nx affected --targets=build --exclude=examples/**",
-    "build:all": "nx run-many --targets=build --exclude=examples/**",
+    "build": "nx affected --targets=build --exclude=examples/** && size-limit",
+    "build:all": "nx run-many --targets=build --exclude=examples/** && size-limit",
     "watch": "pnpm run build:all && nx watch --all -- pnpm run build:all",
     "dev": "pnpm run watch",
     "prettier": "prettier --ignore-unknown '**/*'",
@@ -31,7 +32,16 @@
       "test:sherif"
     ]
   },
-  "namespace": "@tanstack",
+  "size-limit": [
+    {
+      "path": "packages/table-core/build/lib/index.js",
+      "limit": "16 KB"
+    },
+    {
+      "path": "packages/table-core/build/lib/index.mjs",
+      "limit": "15 KB"
+    }
+  ],
   "devDependencies": {
     "@babel/core": "^7.23.7",
     "@babel/preset-env": "^7.23.8",
@@ -43,6 +53,7 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.5",
     "@rollup/plugin-terser": "^0.4.4",
+    "@size-limit/preset-small-lib": "^11.0.2",
     "@tanstack/config": "^0.4.2",
     "@testing-library/jest-dom": "^6.2.0",
     "@testing-library/react": "^14.1.2",
@@ -63,6 +74,7 @@
     "rollup-plugin-svelte": "^7.1.6",
     "rollup-plugin-visualizer": "^5.12.0",
     "sherif": "^0.7.0",
+    "size-limit": "^11.0.2",
     "svelte": "^4.2.8",
     "typescript": "5.3.3",
     "vitest": "^1.2.0"