ci(examples): Test examples in CI (#5324)

* ci(examples): Test examples on CI * Remove test from example * Update svelte examples * Fix missing svelte types
TanStack · Feb 3, 2024 · 4e2dd61 · 4e2dd61
1 parent 88545f5
commit 4e2dd61
Show file tree

Hide file tree

Showing 32 changed files with 83 additions and 99 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -15,7 +15,6 @@ concurrency:
 
 env:
   NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
-  NX_CLOUD_AUTH_TOKEN: ${{ secrets.NX_CLOUD_AUTH_TOKEN }}
 
 jobs:
   test-and-publish:

diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
@@ -13,7 +13,6 @@ concurrency:
 
 env:
   NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
-  NX_CLOUD_AUTH_TOKEN: ${{ secrets.NX_CLOUD_AUTH_TOKEN }}
 
 jobs:
   test:

diff --git a/.github/workflows/stale-issues.yml b/.github/workflows/stale-issues.yml
diff --git a/.gitignore b/.gitignore
@@ -46,3 +46,5 @@ yarn.lock
 *.tsbuildinfo
 
 .nx/cache
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
diff --git a/examples/svelte/basic/package.json b/examples/svelte/basic/package.json
@@ -7,8 +7,7 @@
     "dev": "vite",
     "build": "vite build",
     "serve": "vite preview",
-    "start": "vite",
-    "check": "svelte-check --tsconfig ./tsconfig.json"
+    "test:types": "svelte-check --tsconfig ./tsconfig.json"
   },
   "devDependencies": {
     "@rollup/plugin-replace": "^5.0.5",

diff --git a/examples/svelte/column-groups/package.json b/examples/svelte/column-groups/package.json
@@ -7,8 +7,7 @@
     "dev": "vite",
     "build": "vite build",
     "serve": "vite preview",
-    "start": "vite",
-    "check": "svelte-check --tsconfig ./tsconfig.json"
+    "test:types": "svelte-check --tsconfig ./tsconfig.json"
   },
   "devDependencies": {
     "@rollup/plugin-replace": "^5.0.5",

diff --git a/examples/svelte/column-ordering/package.json b/examples/svelte/column-ordering/package.json
@@ -7,8 +7,7 @@
     "dev": "vite",
     "build": "vite build",
     "serve": "vite preview",
-    "start": "vite",
-    "check": "svelte-check --tsconfig ./tsconfig.json"
+    "test:types": "svelte-check --tsconfig ./tsconfig.json"
   },
   "devDependencies": {
     "@faker-js/faker": "^8.3.1",

diff --git a/examples/svelte/column-ordering/src/App.svelte b/examples/svelte/column-ordering/src/App.svelte
@@ -6,7 +6,13 @@
     getSortedRowModel,
     flexRender,
   } from '@tanstack/svelte-table'
-  import type { ColumnDef, TableOptions } from '@tanstack/svelte-table'
+  import type {
+    ColumnDef,
+    ColumnOrderState,
+    OnChangeFn,
+    TableOptions,
+    VisibilityState,
+  } from '@tanstack/svelte-table'
   import { makeData, type Person } from './makeData'
   import { faker } from '@faker-js/faker'
   import './index.css'
@@ -65,10 +71,10 @@
 
   const data = makeData(5000)
 
-  let columnOrder = []
-  let columnVisibility = {}
+  let columnOrder: ColumnOrderState = []
+  let columnVisibility: VisibilityState = {}
 
-  const setColumnOrder = updater => {
+  const setColumnOrder: OnChangeFn<ColumnOrderState> = updater => {
     if (updater instanceof Function) {
       columnOrder = updater(columnOrder)
     } else {
@@ -83,7 +89,7 @@
     }))
   }
 
-  const setColumnVisibility = updater => {
+  const setColumnVisibility: OnChangeFn<VisibilityState> = updater => {
     if (updater instanceof Function) {
       columnVisibility = updater(columnVisibility)
     } else {

diff --git a/examples/svelte/column-pinning/package.json b/examples/svelte/column-pinning/package.json
@@ -7,8 +7,7 @@
     "dev": "vite",
     "build": "vite build",
     "serve": "vite preview",
-    "start": "vite",
-    "check": "svelte-check --tsconfig ./tsconfig.json"
+    "test:types": "svelte-check --tsconfig ./tsconfig.json"
   },
   "devDependencies": {
     "@faker-js/faker": "^8.3.1",

diff --git a/examples/svelte/column-pinning/src/App.svelte b/examples/svelte/column-pinning/src/App.svelte
@@ -6,7 +6,14 @@
     getSortedRowModel,
     flexRender,
   } from '@tanstack/svelte-table'
-  import type { ColumnDef, TableOptions } from '@tanstack/svelte-table'
+  import type {
+    ColumnDef,
+    ColumnOrderState,
+    ColumnPinningState,
+    OnChangeFn,
+    TableOptions,
+    VisibilityState,
+  } from '@tanstack/svelte-table'
   import { makeData, type Person } from './makeData'
   import { faker } from '@faker-js/faker'
   import './index.css'
@@ -67,11 +74,11 @@
 
   let isSplit = false
 
-  let columnOrder = []
-  let columnPinning = {}
-  let columnVisibility = {}
+  let columnOrder: ColumnOrderState = []
+  let columnPinning: ColumnPinningState = {}
+  let columnVisibility: VisibilityState = {}
 
-  const setColumnOrder = updater => {
+  const setColumnOrder: OnChangeFn<ColumnOrderState> = updater => {
     if (updater instanceof Function) {
       columnOrder = updater(columnOrder)
     } else {
@@ -86,7 +93,7 @@
     }))
   }
 
-  const setColumnPinning = updater => {
+  const setColumnPinning: OnChangeFn<ColumnPinningState> = updater => {
     if (updater instanceof Function) {
       columnPinning = updater(columnPinning)
     } else {
@@ -101,7 +108,7 @@
     }))
   }
 
-  const setColumnVisibility = updater => {
+  const setColumnVisibility: OnChangeFn<VisibilityState> = updater => {
     if (updater instanceof Function) {
       columnVisibility = updater(columnVisibility)
     } else {

diff --git a/examples/svelte/column-visibility/package.json b/examples/svelte/column-visibility/package.json
@@ -7,8 +7,7 @@
     "dev": "vite",
     "build": "vite build",
     "serve": "vite preview",
-    "start": "vite",
-    "check": "svelte-check --tsconfig ./tsconfig.json"
+    "test:types": "svelte-check --tsconfig ./tsconfig.json"
   },
   "devDependencies": {
     "@rollup/plugin-replace": "^5.0.5",

diff --git a/examples/svelte/column-visibility/src/App.svelte b/examples/svelte/column-visibility/src/App.svelte
@@ -6,7 +6,12 @@
     getSortedRowModel,
     flexRender,
   } from '@tanstack/svelte-table'
-  import type { ColumnDef, TableOptions } from '@tanstack/svelte-table'
+  import type {
+    ColumnDef,
+    OnChangeFn,
+    TableOptions,
+    VisibilityState,
+  } from '@tanstack/svelte-table'
   import './index.css'
 
   type Person = {
@@ -97,9 +102,9 @@
     },
   ]
 
-  let columnVisibility = {}
+  let columnVisibility: VisibilityState = {}
 
-  const setColumnVisibility = updater => {
+  const setColumnVisibility: OnChangeFn<VisibilityState> = updater => {
     if (updater instanceof Function) {
       columnVisibility = updater(columnVisibility)
     } else {

diff --git a/examples/svelte/sorting/package.json b/examples/svelte/sorting/package.json
@@ -7,8 +7,7 @@
     "dev": "vite",
     "build": "vite build",
     "serve": "vite preview",
-    "start": "vite",
-    "check": "svelte-check --tsconfig ./tsconfig.json"
+    "test:types": "svelte-check --tsconfig ./tsconfig.json"
   },
   "devDependencies": {
     "@faker-js/faker": "^8.3.1",

diff --git a/examples/svelte/sorting/src/App.svelte b/examples/svelte/sorting/src/App.svelte
@@ -6,7 +6,12 @@
     getSortedRowModel,
     flexRender,
   } from '@tanstack/svelte-table'
-  import type { ColumnDef, TableOptions } from '@tanstack/svelte-table'
+  import type {
+    ColumnDef,
+    OnChangeFn,
+    SortingState,
+    TableOptions,
+  } from '@tanstack/svelte-table'
   import { makeData, type Person } from './makeData'
   import './index.css'
 
@@ -64,9 +69,9 @@
 
   const data = makeData(100_000)
 
-  let sorting = []
+  let sorting: SortingState = []
 
-  const setSorting = updater => {
+  const setSorting: OnChangeFn<SortingState> = updater => {
     if (updater instanceof Function) {
       sorting = updater(sorting)
     } else {
@@ -131,10 +136,11 @@
                       header.getContext()
                     )}
                   />
-                  {{
-                    asc: ' 🔼',
-                    desc: ' 🔽',
-                  }[header.column.getIsSorted().toString()] ?? ''}
+                  {#if header.column.getIsSorted().toString() === 'asc'}
+                    🔼
+                  {:else if header.column.getIsSorted().toString() === 'desc'}
+                    🔽
+                  {/if}
                 </div>
               {/if}
             </th>

diff --git a/examples/vue/basic/package.json b/examples/vue/basic/package.json
@@ -4,8 +4,9 @@
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
-    "preview": "vite preview"
+    "build": "vite build",
+    "preview": "vite preview",
+    "test:types": "vue-tsc"
   },
   "dependencies": {
     "vue": "^3.4.14",

diff --git a/examples/vue/column-ordering/package.json b/examples/vue/column-ordering/package.json
@@ -3,9 +3,8 @@
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
-    "preview": "vite preview --port 5050",
-    "typecheck": "vue-tsc --noEmit"
+    "build": "vite build",
+    "preview": "vite preview"
   },
   "dependencies": {
     "@faker-js/faker": "^8.3.1",

diff --git a/examples/vue/column-ordering/src/makeData.ts b/examples/vue/column-ordering/src/makeData.ts
@@ -36,7 +36,7 @@ const newPerson = (): Person => {
 export function makeData(...lens: number[]) {
   const makeDataLevel = (depth = 0): Person[] => {
     const len = lens[depth]!
-    return range(len).map((d): Person => {
+    return range(len).map((): Person => {
       return {
         ...newPerson(),
         subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,

diff --git a/examples/vue/column-pinning/package.json b/examples/vue/column-pinning/package.json
@@ -3,9 +3,8 @@
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
-    "preview": "vite preview --port 5050",
-    "typecheck": "vue-tsc --noEmit"
+    "build": "vite build",
+    "preview": "vite preview"
   },
   "dependencies": {
     "@faker-js/faker": "^8.3.1",

diff --git a/examples/vue/column-pinning/src/makeData.ts b/examples/vue/column-pinning/src/makeData.ts
@@ -36,7 +36,7 @@ const newPerson = (): Person => {
 export function makeData(...lens: number[]) {
   const makeDataLevel = (depth = 0): Person[] => {
     const len = lens[depth]!
-    return range(len).map((d): Person => {
+    return range(len).map((): Person => {
       return {
         ...newPerson(),
         subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,

diff --git a/examples/vue/pagination-controlled/package.json b/examples/vue/pagination-controlled/package.json
@@ -4,8 +4,9 @@
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
-    "preview": "vite preview"
+    "build": "vite build",
+    "preview": "vite preview",
+    "test:types": "vue-tsc"
   },
   "dependencies": {
     "@faker-js/faker": "^8.3.1",

diff --git a/examples/vue/pagination-controlled/src/App.vue b/examples/vue/pagination-controlled/src/App.vue
@@ -77,13 +77,13 @@ function setPagination({
   return { pageIndex, pageSize }
 }
 
-function handleGoToPage(e) {
+function handleGoToPage(e: any) {
   const page = e.target.value ? Number(e.target.value) - 1 : 0
   goToPageNumber.value = page + 1
   table.setPageIndex(page)
 }
 
-function handlePageSizeChange(e) {
+function handlePageSizeChange(e: any) {
   table.setPageSize(Number(e.target.value))
 }
 </script>

diff --git a/examples/vue/pagination/package.json b/examples/vue/pagination/package.json
@@ -4,8 +4,9 @@
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
-    "preview": "vite preview"
+    "build": "vite build",
+    "preview": "vite preview",
+    "test:types": "vue-tsc"
   },
   "dependencies": {
     "vue": "^3.4.14",

diff --git a/examples/vue/pagination/src/App.vue b/examples/vue/pagination/src/App.vue
@@ -76,13 +76,13 @@ function rerender() {
   data.value = defaultData
 }
 
-function handleGoToPage(e) {
+function handleGoToPage(e: any) {
   const page = e.target.value ? Number(e.target.value) - 1 : 0
   goToPageNumber.value = page + 1
   table.setPageIndex(page)
 }
 
-function handlePageSizeChange(e) {
+function handlePageSizeChange(e: any) {
   table.setPageSize(Number(e.target.value))
 }
 </script>

diff --git a/examples/vue/pagination/src/makeData.ts b/examples/vue/pagination/src/makeData.ts
@@ -36,7 +36,7 @@ const newPerson = (): Person => {
 export function makeData(...lens: number[]) {
   const makeDataLevel = (depth = 0): Person[] => {
     const len = lens[depth]!
-    return range(len).map((d): Person => {
+    return range(len).map((): Person => {
       return {
         ...newPerson(),
         subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,

diff --git a/examples/vue/row-selection/package.json b/examples/vue/row-selection/package.json
@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
+    "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {