feat: initial integration for lit

TanStack · May 4, 2024 · 924f434 · 924f434
1 parent 4fda521
commit 924f434
Show file tree

Hide file tree

Showing 16 changed files with 569 additions and 4 deletions.
diff --git a/.gitignore b/.gitignore
@@ -35,6 +35,7 @@ stats-hydration.json
 stats-react.json
 stats.html
 .vscode/settings.json
+.idea
 
 *.log
 .DS_Store

diff --git a/examples/lit/basic/.gitignore b/examples/lit/basic/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/examples/lit/basic/README.md b/examples/lit/basic/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm run start` or `yarn start`
diff --git a/examples/lit/basic/index.html b/examples/lit/basic/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+    <script type="module" src="https://cdn.skypack.dev/twind/shim"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.ts"></script>
+    <lit-table-example></lit-table-example>
+  </body>
+</html>
diff --git a/examples/lit/basic/package.json b/examples/lit/basic/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "tanstack-lit-table-example-basic",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "start": "vite"
+  },
+  "dependencies": {
+    "@tanstack/lit-table": "workspace:*",
+    "lit": "^3.1.3"
+  },
+  "devDependencies": {
+    "@rollup/plugin-replace": "^5.0.5",
+    "typescript": "5.4.5",
+    "vite": "^5.2.10"
+  }
+}
diff --git a/examples/lit/basic/src/index.css b/examples/lit/basic/src/index.css
@@ -0,0 +1,26 @@
+html {
+  font-family: sans-serif;
+  font-size: 14px;
+}
+
+table {
+  border: 1px solid lightgray;
+}
+
+tbody {
+  border-bottom: 1px solid lightgray;
+}
+
+th {
+  border-bottom: 1px solid lightgray;
+  border-right: 1px solid lightgray;
+  padding: 2px 4px;
+}
+
+tfoot {
+  color: gray;
+}
+
+tfoot th {
+  font-weight: normal;
+}
diff --git a/examples/lit/basic/src/main.ts b/examples/lit/basic/src/main.ts
@@ -0,0 +1,225 @@
+import { customElement } from 'lit/decorators.js'
+import { html, LitElement } from 'lit'
+import { repeat } from 'lit/directives/repeat.js'
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  TableController,
+} from '@tanstack/lit-table'
+
+type Person = {
+  firstName: string
+  lastName: string
+  age: number
+  visits: number
+  status: string
+  progress: number
+}
+
+const defaultData: Person[] = [
+  {
+    firstName: 'tanner',
+    lastName: 'linsley',
+    age: 24,
+    visits: 100,
+    status: 'In Relationship',
+    progress: 50,
+  },
+  {
+    firstName: 'tandy',
+    lastName: 'miller',
+    age: 40,
+    visits: 40,
+    status: 'Single',
+    progress: 80,
+  },
+  {
+    firstName: 'joe',
+    lastName: 'dirte',
+    age: 45,
+    visits: 20,
+    status: 'Complicated',
+    progress: 10,
+  },
+]
+
+const columnHelper = createColumnHelper<Person>()
+
+const columns = [
+  columnHelper.accessor('firstName', {
+    cell: info => info.getValue(),
+    footer: info => info.column.id,
+  }),
+  columnHelper.accessor(row => row.lastName, {
+    id: 'lastName',
+    cell: info => html`<i>${info.getValue()}</i>`,
+    header: () => html`<span>Last Name</span>`,
+    footer: info => info.column.id,
+  }),
+  columnHelper.accessor('age', {
+    header: () => 'Age',
+    cell: info => info.renderValue(),
+    footer: info => info.column.id,
+  }),
+  columnHelper.accessor('visits', {
+    header: () => html`<span>Visits</span>`,
+    footer: info => info.column.id,
+  }),
+  columnHelper.accessor('status', {
+    header: 'Status',
+    footer: info => info.column.id,
+  }),
+  columnHelper.accessor('progress', {
+    header: 'Profile Progress',
+    footer: info => info.column.id,
+  }),
+]
+
+const data: Person[] = [
+  {
+    firstName: 'tanner',
+    lastName: 'linsley',
+    age: 24,
+    visits: 100,
+    status: 'In Relationship',
+    progress: 50,
+  },
+  {
+    firstName: 'tandy',
+    lastName: 'miller',
+    age: 40,
+    visits: 40,
+    status: 'Single',
+    progress: 80,
+  },
+  {
+    firstName: 'joe',
+    lastName: 'dirte',
+    age: 45,
+    visits: 20,
+    status: 'Complicated',
+    progress: 10,
+  },
+  {
+    firstName: 'mor',
+    lastName: 'kadosh',
+    age: 31,
+    visits: 30,
+    status: 'In Relationship',
+    progress: 90,
+  },
+]
+
+@customElement('lit-table-example')
+class LitTableExample extends LitElement {
+  private tableController = new TableController<Person>(this)
+
+  protected render(): unknown {
+    const table = this.tableController.getTable({
+      columns,
+      data,
+      getCoreRowModel: getCoreRowModel(),
+    })
+
+    return html`
+      <table>
+        <thead>
+          ${repeat(
+            table.getHeaderGroups(),
+            headerGroup => headerGroup.id,
+            headerGroup =>
+              html`${repeat(
+                headerGroup.headers,
+                header => header.id,
+                header =>
+                  html` <th>
+                    ${header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                  </th>`
+              )}`
+          )}
+        </thead>
+        <tbody>
+          ${repeat(
+            table.getRowModel().rows,
+            row => row.id,
+            row => html`
+              <tr>
+                ${repeat(
+                  row.getVisibleCells(),
+                  cell => cell.id,
+                  cell =>
+                    html`<td>
+                      ${flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </td>`
+                )}
+              </tr>
+            `
+          )}
+        </tbody>
+        <tfoot>
+          ${repeat(
+            table.getFooterGroups(),
+            footerGroup => footerGroup.id,
+            footerGroup => html`
+              <tr>
+                ${repeat(
+                  footerGroup.headers,
+                  header => header.id,
+                  header => html`
+                    <th>
+                      ${header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.footer,
+                            header.getContext()
+                          )}
+                    </th>
+                  `
+                )}
+              </tr>
+            `
+          )}
+        </tfoot>
+      </table>
+      <style>
+        * {
+          font-family: sans-serif;
+          font-size: 14px;
+          box-sizing: border-box;
+        }
+
+        table {
+          border: 1px solid lightgray;
+          border-collapse: collapse;
+        }
+
+        tbody {
+          border-bottom: 1px solid lightgray;
+        }
+
+        th {
+          border-bottom: 1px solid lightgray;
+          border-right: 1px solid lightgray;
+          padding: 2px 4px;
+        }
+
+        tfoot {
+          color: gray;
+        }
+
+        tfoot th {
+          font-weight: normal;
+        }
+      </style>
+    `
+  }
+}
diff --git a/examples/lit/basic/tsconfig.json b/examples/lit/basic/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "emitDecoratorMetadata": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/examples/lit/basic/vite.config.js b/examples/lit/basic/vite.config.js
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import rollupReplace from '@rollup/plugin-replace'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    rollupReplace({
+      preventAssignment: true,
+      values: {
+        __DEV__: JSON.stringify(true),
+        'process.env.NODE_ENV': JSON.stringify('development'),
+      },
+    })
+  ],
+})