Skip to content

Feat lit-query: add initial lit-query package #10501

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
chughgaurav wants to merge 18 commits into
base: main
Choose a base branch
from
Open

Feat lit-query: add initial lit-query package #10501

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
fbd1ddb
feat lit-query: add initial lit-query package
Apr 14, 2026
bf31fc5
remove internal docs from initial PR
Apr 14, 2026
a322b9c
fix review issues
Apr 14, 2026
d545bf7
align scripts with monorepo Nx targets and use workspace:* for query…
Apr 14, 2026
a87a875
feat(lit-query): fix type inference and monorepo integration
Apr 14, 2026
35e3ec0
fix(lit-query): polish package validation and examples
Apr 16, 2026
3c33376
Merge branch 'main' into feature/lit-query-adapter
TkDodo Apr 18, 2026
1e98c04
ci: apply automated fixes
autofix-ci[bot] Apr 18, 2026
e93e740
lit-query: preserve provider handshake ordering in BaseController
Apr 22, 2026
2dc7432
Update .changeset/lemon-memes-divide.md
chughgaurav Apr 23, 2026
aee2808
removing prettier config from adapter, so that global config from the…
Apr 23, 2026
e976ddc
removed the package local format scripts so formatting stays centrali…
Apr 23, 2026
915ba27
removing like other adapters keep build and test:build as separate ta…
Apr 23, 2026
45acd10
Compared against the other adapters and removed the lit-query-only al…
Apr 23, 2026
d912e37
package:check has been removed. The CJS smoke check is still needed b…
Apr 23, 2026
54add68
fix(lit-query): align lit examples and integration with monorepo conv…
Apr 26, 2026
099c508
chore(lit-query): clean up stale package checks
Apr 28, 2026
a1a9868
fix(lit-query): address review feedback for lit examples and lifecycl…
Apr 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/lemon-memes-divide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@tanstack/lit-query': minor
---

Add initial @tanstack/lit-query package
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ yarn.lock
build
coverage
dist
dist-cjs
dist-ts

# misc
Expand Down
5 changes: 5 additions & 0 deletions examples/lit/basic/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# Example

To run this example from the repo root:

- `pnpm --dir examples/lit/basic run dev`
12 changes: 12 additions & 0 deletions examples/lit/basic/basic-query.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lit Query Basic Example</title>
</head>
<body>
<basic-query-root></basic-query-root>
<script type="module" src="/src/basic-query.ts"></script>
</body>
</html>
1 change: 1 addition & 0 deletions examples/lit/basic/config/port.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export const DEMO_PORT: number
22 changes: 22 additions & 0 deletions examples/lit/basic/config/port.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
const DEFAULT_DEMO_PORT = 4173
const envPort = process.env.DEMO_PORT

function resolvePort() {
if (!envPort) {
return DEFAULT_DEMO_PORT
}

const parsedPort = Number.parseInt(envPort, 10)
const isValidPort =
Number.isInteger(parsedPort) && parsedPort > 0 && parsedPort <= 65535

Comment on lines +9 to +12
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Apr 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🌐 Web query:

In JavaScript, does Number.parseInt("4173abc", 10) return 4173, and what is the recommended strict validation pattern for environment variable ports?

💡 Result:

Yes, Number.parseInt("4173abc", 10) returns 4173. This is because parseInt parses until it encounters a non-digit character in the specified radix (base 10 here), ignoring trailing invalid characters. The recommended strict validation pattern for environment variable ports in Node.js combines parsing with validation to ensure the entire string consists only of valid digits (no trailing junk, decimals, etc.) and the value is in the valid port range (typically 0-65535, often >0 and <=65535 for TCP ports). A common pattern, seen in Express generator's normalizePort and various best practices: function normalizePort(val) { const port = parseInt(val, 10); if (isNaN(port)) return val; // Allow named pipes if (port >= 0) return port; return false; } For stricter integer-only validation (rejecting anything not purely digits): - Test if the string matches /^\d+$/ (optionally allowing leading + or - if needed, but ports are unsigned). - Then parseInt and check range. Example strict port parser: function parseStrictPort(str) { if (!/^\d+$/.test(str)) return NaN; const port = Number.parseInt(str, 10); return (port >= 0 && port <= 65535) ? port : NaN; } Usage: const port = parseStrictPort(process.env.PORT); if (isNaN(port)) { throw new Error('Invalid PORT'); }

Citations:

🏁 Script executed:

cat -n packages/lit-query/examples/lit-query-e2e-app/config/port.js | sed -n '1,20p'

Repository: TanStack/query

Length of output: 649

Use strict numeric validation for DEMO_PORT.

Lines 9-12 currently accept values like "4173abc" because Number.parseInt is prefix-tolerant, silently accepting invalid environment input. Enforce digit-only validation before parsing.

Proposed fix 
-  const parsedPort = Number.parseInt(envPort, 10)
-  const isValidPort =
-    Number.isInteger(parsedPort) && parsedPort > 0 && parsedPort <= 65535
+  const isDigitsOnly = /^\d+$/.test(envPort)
+  const parsedPort = Number(envPort)
+  const isValidPort =
+    isDigitsOnly && Number.isInteger(parsedPort) && parsedPort > 0 && parsedPort <= 65535
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const parsedPort = Number.parseInt(envPort, 10)
const isValidPort =
Number.isInteger(parsedPort) && parsedPort > 0 && parsedPort <= 65535
const isDigitsOnly = /^\d+$/.test(envPort)
const parsedPort = Number(envPort)
const isValidPort =
isDigitsOnly && Number.isInteger(parsedPort) && parsedPort > 0 && parsedPort <= 65535
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@packages/lit-query/examples/lit-query-e2e-app/config/port.js` around lines 9
- 12, The port validation currently uses Number.parseInt on envPort which
accepts prefixes like "4173abc"; update the logic around
envPort/parsedPort/isValidPort to first verify envPort contains only digits
(e.g., /^\d+$/) before parsing, then parse to a number and enforce
Number.isInteger(parsedPort) && parsedPort > 0 && parsedPort <= 65535 so
non-numeric suffixes are rejected; adjust any error/default branch to rely on
this stricter check.

if (!isValidPort) {
throw new Error(
`Invalid DEMO_PORT "${envPort}". Expected an integer between 1 and 65535.`,
)
}

return parsedPort
}

export const DEMO_PORT = resolvePort()
12 changes: 12 additions & 0 deletions examples/lit/basic/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TanStack Lit Query E2E Demo</title>
</head>
<body>
<demo-root></demo-root>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
12 changes: 12 additions & 0 deletions examples/lit/basic/lifecycle-contract.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TanStack Lit Query Lifecycle Contract Fixture</title>
</head>
<body>
<lifecycle-contract-root></lifecycle-contract-root>
<script type="module" src="/src/lifecycle-contract.ts"></script>
</body>
</html>
12 changes: 12 additions & 0 deletions examples/lit/basic/mutation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lit Query Mutation Example</title>
</head>
<body>
<mutation-example-root></mutation-example-root>
<script type="module" src="/src/mutation.ts"></script>
</body>
</html>
20 changes: 20 additions & 0 deletions examples/lit/basic/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"name": "@tanstack/query-example-lit-basic",
"private": true,
"version": "0.0.1",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc --noEmit && vite build",
"preview": "vite preview"
},
"dependencies": {
"@tanstack/lit-query": "^0.1.0",
"@tanstack/query-core": "^5.99.0",
"lit": "^3.3.1"
},
"devDependencies": {
"typescript": "5.8.3",
"vite": "^6.4.1"
}
}
90 changes: 90 additions & 0 deletions examples/lit/basic/src/basic-query.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
import { html, LitElement } from 'lit'
import { QueryClient } from '@tanstack/query-core'
import { QueryClientProvider, createQueryController } from '@tanstack/lit-query'
import {
fetchTodosFromServer,
resetTodoApi,
type TodosResponse,
} from './todoApi'

resetTodoApi()

const queryClient = new QueryClient({
defaultOptions: {
queries: { retry: false },
},
})

class BasicQueryProvider extends QueryClientProvider {
constructor() {
super()
this.client = queryClient
}

protected override createRenderRoot(): HTMLElement | DocumentFragment {
return this
}
}

customElements.define('basic-query-provider', BasicQueryProvider)

class BasicQueryExample extends LitElement {
private readonly todos = createQueryController<TodosResponse, Error>(this, {
queryKey: ['todos'],
queryFn: fetchTodosFromServer,
})

protected override createRenderRoot(): HTMLElement | DocumentFragment {
return this
}

render() {
const query = this.todos()
return html`
<main>
<h1>Basic Query Example</h1>
<p data-testid="basic-query-status">
Status: <strong>${query.status}</strong>
</p>
<button
data-testid="basic-refetch"
@click=${() => this.todos.refetch()}
>
Refetch
</button>

${query.isPending
? html`<p data-testid="basic-loading">Loading...</p>`
: null}
${query.isError
? html`<p data-testid="basic-error">Error: ${String(query.error)}</p>`
: null}

<ul data-testid="basic-todo-list">
${(query.data?.items ?? []).map(
(todo) =>
html`<li data-testid="basic-todo-item">${todo.title}</li>`,
)}
</ul>
</main>
`
}
}

customElements.define('basic-query-example', BasicQueryExample)

class BasicQueryRoot extends LitElement {
protected override createRenderRoot(): HTMLElement | DocumentFragment {
return this
}

render() {
return html`
<basic-query-provider>
<basic-query-example></basic-query-example>
</basic-query-provider>
`
}
}

customElements.define('basic-query-root', BasicQueryRoot)
Loading