-
Notifications
You must be signed in to change notification settings - Fork 53
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.
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
feat: grpc playground #388
Conversation
WalkthroughThis pull request introduces several new configuration and source files. A central configuration file ( Changes
Sequence Diagram(s)sequenceDiagram
participant Main as main.tsx
participant SDK as DojoEngine SDK
participant App as React App
Main->>SDK: Initialize with dojoConfig and biome.json settings
SDK-->>Main: Return configured SDK instance
Main->>App: Render App with SDK prop
sequenceDiagram
participant App as React App
participant Executor as ts-executor.ts
participant Worker as Web Worker
App->>Executor: executeQuery (user input)
Executor->>Worker: create worker and send code for evaluation
Worker-->>Executor: return result (success/error)
Executor-->>App: Update query results and history
Possibly related PRs
Poem
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 13
🧹 Nitpick comments (16)
examples/example-vite-grpc-playground/src/components/worker.ts (2)
1-9
: Cache imported modules to improve performance.Dynamic imports on every message can impact performance.
+let sdkModules: any = null; + self.onmessage = async (e) => { - const { - ToriiQueryBuilder, - ClauseBuilder, - AndComposeClause, - OrComposeClause, - KeysClause, - MemberClause, - } = await import("@dojoengine/sdk"); + if (!sdkModules) { + sdkModules = await import("@dojoengine/sdk"); + } + const { + ToriiQueryBuilder, + ClauseBuilder, + AndComposeClause, + OrComposeClause, + KeysClause, + MemberClause, + } = sdkModules;
29-37
: Enhance error handling with error types and limits.The current error handling could be more informative and secure.
} catch (error) { + const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred'; + const errorStack = error instanceof Error ? + error.stack?.slice(0, 1000) : // Limit stack trace length + undefined; self.postMessage({ type: "error", error: { - message: (error as Error).message, - stack: (error as Error).stack, + message: errorMessage, + stack: errorStack, + type: error.constructor.name }, }); }examples/example-vite-grpc-playground/src/App.tsx (1)
90-93
: Implement or remove this placeholder beautificationThe
beautifyCurrentQuery
function effectively reassigns the same string to itself. If you plan to provide true query formatting, please integrate a code beautifier or remove this placeholder.examples/example-vite-grpc-playground/src/components/ui/card.tsx (2)
1-1
: Useimport type
for type-only imports.Since
PropsWithChildren
is only used as a type, use theimport type
syntax to ensure it's removed during compilation.-import { type PropsWithChildren } from "react"; +import type { PropsWithChildren } from "react";🧰 Tools
🪛 Biome (1.9.4)
[error] 1-1: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
3-5
: MakeclassName
prop optional.The
className
prop should be optional since it has a fallback empty string in the component.interface CardProps { - className: string; + className?: string; }examples/example-vite-grpc-playground/src/components/ui/alert.tsx (2)
1-1
: Useimport type
for type-only imports.Since
PropsWithChildren
is only used as a type, use theimport type
syntax to ensure it's removed during compilation.-import { type PropsWithChildren } from "react"; +import type { PropsWithChildren } from "react";🧰 Tools
🪛 Biome (1.9.4)
[error] 1-1: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
7-14
: Extract styles to constants for better maintainability.Consider extracting the style classes to named constants for better readability and maintainability.
+const ALERT_STYLES = { + default: "bg-zinc-800 border rounded-lg p-4", + destructive: "bg-red-900/50 text-red-200 border border-red-800/50 rounded-lg p-4" +} as const; + export const Alert = ({ children, variant }: PropsWithChildren<AlertProps>) => { - const classes = - variant === "destructive" - ? "bg-red-900/50 text-red-200 border border-red-800/50 rounded-lg p-4" - : "bg-zinc-800 border rounded-lg p-4"; - - return <div className={classes}>{children}</div>; + return <div className={ALERT_STYLES[variant]}>{children}</div>; };examples/example-vite-grpc-playground/eslint.config.js (1)
1-28
: Consider adding essential ESLint rules for security and best practices.The configuration is good but could be enhanced with additional rules:
no-eval
for securityreact/jsx-no-target-blank
for securityreact/jsx-key
for React best practicesrules: { ...reactHooks.configs.recommended.rules, "react-refresh/only-export-components": [ "warn", { allowConstantExport: true }, ], + "no-eval": "error", + "react/jsx-no-target-blank": "error", + "react/jsx-key": "error", },examples/example-vite-grpc-playground/src/main.tsx (2)
8-29
: Add configuration validation.Consider validating the Dojo configuration before initialization to provide better error messages.
async function main() { + // Validate configuration + const requiredConfig = ["rpcUrl", "toriiUrl", "relayUrl"]; + for (const key of requiredConfig) { + if (!dojoConfig[key]) { + throw new Error(`Missing required configuration: ${key}`); + } + } + const sdk = await init({ client: { rpcUrl: dojoConfig.rpcUrl,🧰 Tools
🪛 Biome (1.9.4)
[error] 24-24: Forbidden non-null assertion.
(lint/style/noNonNullAssertion)
31-31
: Enhance error handling with user feedback.Consider adding user feedback for initialization errors instead of just logging to console.
-main().catch(console.error); +main().catch((error) => { + console.error("Failed to initialize application:", error); + const rootElement = document.getElementById("root"); + if (rootElement) { + createRoot(rootElement).render( + <div className="text-red-500 p-4"> + Failed to initialize application. Please check console for details. + </div> + ); + } +});examples/example-vite-grpc-playground/src/components/ui/button.tsx (1)
1-1
: Use type-only import for PropsWithChildren.Since PropsWithChildren is only used as a type, it should be imported using import type.
-import { type PropsWithChildren } from "react"; +import type { PropsWithChildren } from "react";🧰 Tools
🪛 Biome (1.9.4)
[error] 1-1: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
examples/example-vite-grpc-playground/src/components/schema-explorer.tsx (1)
14-16
: Improve type safety for expandedTables state.The current type allows for SchemaItem[] which isn't used, and x: string is too loose.
const [expandedTables, setExpandedTables] = useState<{ - [x: string]: boolean | SchemaItem[]; + [tableName: string]: boolean; }>({});examples/example-vite-grpc-playground/src/components/query-results.tsx (2)
47-50
: Avoid using array indices as keys in table rows.Using array indices as keys can lead to performance issues. Consider using a unique identifier from the row data if available.
- {response.map((row: any, rowIndex: number) => ( + {response.map((row, rowIndex) => ( <tr - key={rowIndex} + key={Object.values(row).join('-')}🧰 Tools
🪛 Biome (1.9.4)
[error] 47-47: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 49-49: Avoid using the index of an array as key property in an element.
This is the source of the key value.
The order of the items may change, and this also affects performances and component state.
Check the React documentation.(lint/suspicious/noArrayIndexKey)
33-45
: Enhance table accessibility with ARIA labels and scope attributes.Add proper ARIA attributes and scope for better table accessibility.
- <table className="min-w-full divide-y divide-zinc-800"> + <table + className="min-w-full divide-y divide-zinc-800" + aria-label="Query Results" + > <thead className="bg-zinc-900"> <tr> {Object.keys(response[0]).map((header) => ( <th key={header} className="px-6 py-3 text-left text-xs font-medium text-zinc-400 uppercase tracking-wider" + scope="col"examples/example-vite-grpc-playground/src/components/query-editor.tsx (1)
42-52
: Replace forEach with for...of loop for better performance.Using
forEach
with large arrays can lead to performance issues.- node.members.forEach((member) => { - if (ts.isMethodDeclaration(member) && member.name) { - const methodName = member.name.getText(sourceFile); - completionItems.push({ - label: methodName, - kind: monaco.languages.CompletionItemKind.Method, - insertText: methodName, - detail: `Method ${methodName} of class ${className}`, - }); - } - }); + for (const member of node.members) { + if (ts.isMethodDeclaration(member) && member.name) { + const methodName = member.name.getText(sourceFile); + completionItems.push({ + label: methodName, + kind: monaco.languages.CompletionItemKind.Method, + insertText: methodName, + detail: `Method ${methodName} of class ${className}`, + }); + } + }🧰 Tools
🪛 Biome (1.9.4)
[error] 42-52: Prefer for...of instead of forEach.
forEach may lead to performance issues when working with large arrays. When combined with functions like filter or map, this causes multiple iterations over the same type.
(lint/complexity/noForEach)
examples/example-vite-grpc-playground/tsconfig.node.json (1)
1-24
: LGTM! Consider adding configuration documentation.The TypeScript configuration is well-structured with appropriate settings for a modern Node.js environment.
Consider adding a comment at the top of the file to explain the purpose of this specific configuration, especially its relationship with
tsconfig.app.json
.🧰 Tools
🪛 Biome (1.9.4)
[error] 9-9: JSON standard does not allow comments.
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 14-16: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 16-16: JSON standard does not allow comments.
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 18-18: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 18-18: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 18-18: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 18-18: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 23-24: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
examples/example-vite-grpc-playground/public/vite.svg
is excluded by!**/*.svg
examples/example-vite-grpc-playground/src/assets/react.svg
is excluded by!**/*.svg
pnpm-lock.yaml
is excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (27)
biome.json
(1 hunks)examples/example-vite-grpc-playground/.gitignore
(1 hunks)examples/example-vite-grpc-playground/README.md
(1 hunks)examples/example-vite-grpc-playground/dojoConfig.ts
(1 hunks)examples/example-vite-grpc-playground/eslint.config.js
(1 hunks)examples/example-vite-grpc-playground/index.html
(1 hunks)examples/example-vite-grpc-playground/package.json
(1 hunks)examples/example-vite-grpc-playground/src/App.tsx
(1 hunks)examples/example-vite-grpc-playground/src/components/minimal-worker.ts
(1 hunks)examples/example-vite-grpc-playground/src/components/query-editor.tsx
(1 hunks)examples/example-vite-grpc-playground/src/components/query-history.tsx
(1 hunks)examples/example-vite-grpc-playground/src/components/query-results.tsx
(1 hunks)examples/example-vite-grpc-playground/src/components/schema-explorer.tsx
(1 hunks)examples/example-vite-grpc-playground/src/components/ts-executor.ts
(1 hunks)examples/example-vite-grpc-playground/src/components/ui/alert.tsx
(1 hunks)examples/example-vite-grpc-playground/src/components/ui/button.tsx
(1 hunks)examples/example-vite-grpc-playground/src/components/ui/card.tsx
(1 hunks)examples/example-vite-grpc-playground/src/components/worker.ts
(1 hunks)examples/example-vite-grpc-playground/src/index.css
(1 hunks)examples/example-vite-grpc-playground/src/main.tsx
(1 hunks)examples/example-vite-grpc-playground/src/vite-env.d.ts
(1 hunks)examples/example-vite-grpc-playground/tsconfig.app.json
(1 hunks)examples/example-vite-grpc-playground/tsconfig.json
(1 hunks)examples/example-vite-grpc-playground/tsconfig.node.json
(1 hunks)examples/example-vite-grpc-playground/vite.config.ts
(1 hunks)packages/sdk/package.json
(1 hunks)scripts/build-examples.sh
(1 hunks)
✅ Files skipped from review due to trivial changes (5)
- examples/example-vite-grpc-playground/tsconfig.json
- examples/example-vite-grpc-playground/src/vite-env.d.ts
- examples/example-vite-grpc-playground/.gitignore
- examples/example-vite-grpc-playground/index.html
- examples/example-vite-grpc-playground/package.json
🧰 Additional context used
🪛 Biome (1.9.4)
examples/example-vite-grpc-playground/src/main.tsx
[error] 24-24: Forbidden non-null assertion.
(lint/style/noNonNullAssertion)
examples/example-vite-grpc-playground/src/components/ui/alert.tsx
[error] 1-1: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.
(lint/style/useImportType)
examples/example-vite-grpc-playground/src/components/ts-executor.ts
[error] 22-22: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
examples/example-vite-grpc-playground/tsconfig.app.json
[error] 10-10: JSON standard does not allow comments.
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 15-15: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 15-15: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 15-15: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 15-15: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-18: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 18-18: JSON standard does not allow comments.
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-24: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 25-25: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 25-25: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 25-25: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 25-26: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
examples/example-vite-grpc-playground/src/components/ui/button.tsx
[error] 4-4: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 4-4: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 1-1: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.
(lint/style/useImportType)
examples/example-vite-grpc-playground/src/components/query-editor.tsx
[error] 42-52: Prefer for...of instead of forEach.
forEach may lead to performance issues when working with large arrays. When combined with functions like filter or map, this causes multiple iterations over the same type.
(lint/complexity/noForEach)
[error] 107-107: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 107-107: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 108-108: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 108-108: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 109-109: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 109-109: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 110-110: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 110-110: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 139-139: This hook does not specify all of its dependencies: query
This dependency is not specified in the hook dependency list.
Either include it or remove the dependency array
(lint/correctness/useExhaustiveDependencies)
[error] 139-139: This hook does not specify all of its dependencies: setQuery
This dependency is not specified in the hook dependency list.
Either include it or remove the dependency array
(lint/correctness/useExhaustiveDependencies)
examples/example-vite-grpc-playground/src/components/schema-explorer.tsx
[error] 38-46: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
examples/example-vite-grpc-playground/src/components/query-results.tsx
[error] 5-5: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 47-47: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 49-49: Avoid using the index of an array as key property in an element.
This is the source of the key value.
The order of the items may change, and this also affects performances and component state.
Check the React documentation.
(lint/suspicious/noArrayIndexKey)
[error] 59-59: Avoid using the index of an array as key property in an element.
This is the source of the key value.
The order of the items may change, and this also affects performances and component state.
Check the React documentation.
(lint/suspicious/noArrayIndexKey)
examples/example-vite-grpc-playground/tsconfig.node.json
[error] 9-9: JSON standard does not allow comments.
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: JSON standard does not allow comments.
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 18-18: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 18-18: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 18-18: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 18-18: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-24: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
examples/example-vite-grpc-playground/src/components/query-history.tsx
[error] 26-29: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
[error] 22-22: Avoid using the index of an array as key property in an element.
This is the source of the key value.
The order of the items may change, and this also affects performances and component state.
Check the React documentation.
(lint/suspicious/noArrayIndexKey)
[error] 34-40: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a form
element. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
(lint/a11y/useButtonType)
examples/example-vite-grpc-playground/src/App.tsx
[error] 2-2: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.
(lint/style/useImportType)
[error] 5-5: Some named imports are only used as types.
This import is only used as a type.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Add inline type keywords.
(lint/style/useImportType)
[error] 6-6: Some named imports are only used as types.
This import is only used as a type.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Add inline type keywords.
(lint/style/useImportType)
[error] 9-9: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.
(lint/style/useImportType)
examples/example-vite-grpc-playground/src/components/ui/card.tsx
[error] 1-1: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.
(lint/style/useImportType)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: check
🔇 Additional comments (13)
examples/example-vite-grpc-playground/dojoConfig.ts (1)
1-8
: Looks good!No issues found. This straightforward configuration is well structured.
examples/example-vite-grpc-playground/src/components/minimal-worker.ts (1)
1-8
: LGTMThis minimal worker does exactly what it advertises. No concerns here.
examples/example-vite-grpc-playground/src/components/ui/card.tsx (1)
6-14
: LGTM! Clean and reusable card component.The component implementation is clean and follows React best practices:
- Uses TypeScript for type safety
- Handles optional className gracefully
- Follows composition pattern with children prop
examples/example-vite-grpc-playground/src/index.css (1)
1-31
: LGTM!The CSS implementation is clean and well-structured:
- Proper use of Tailwind CSS
- Well-defined animation keyframes
- Cross-browser compatible scrollbar styling
- Appropriate Monaco editor dimensions
examples/example-vite-grpc-playground/tsconfig.app.json (1)
1-26
: LGTM!The TypeScript configuration is well-structured with appropriate settings for a modern React application:
- Proper React JSX configuration
- Strict type checking enabled
- Modern module resolution settings
- Correct source directory inclusion
🧰 Tools
🪛 Biome (1.9.4)
[error] 10-10: JSON standard does not allow comments.
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 15-15: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 15-15: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 15-15: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 15-15: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 16-18: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 18-18: JSON standard does not allow comments.
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 24-24: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 25-25: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 25-25: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 25-25: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 25-26: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
scripts/build-examples.sh (1)
20-20
: New Example Directory Added
The new entry"examples/example-vite-grpc-playground"
has been correctly added to theexamples
array. Ensure that the referenced directory exists and its build process is integrated into the CI/CD pipeline.biome.json (1)
1-46
: Biome Configuration File Review
This newbiome.json
file provides a comprehensive configuration for code formatting and linting, including VCS integration, file handling, formatter settings, and JavaScript-specific options. The settings align well with a modern project setup.examples/example-vite-grpc-playground/README.md (1)
1-51
: New README Documentation for gRPC Playground Example
TheREADME.md
clearly outlines the setup for a React + TypeScript + Vite project with Hot Module Replacement and ESLint integration. The guidance on expanding the ESLint configuration (including code examples) is helpful for developers.packages/sdk/package.json (1)
34-39
: Review New Export for "./types"
The new export entry for"./types"
maps all keys (types
,import
, andrequire
) to"./dist/index.d.ts"
. This configuration implies that the export is solely for type information rather than executable code. Please verify that consumers of this package are intended to import from"./types"
exclusively for type checking.examples/example-vite-grpc-playground/vite.config.ts (4)
27-37
: Consider the performance impact of inline dynamic imports.While
inlineDynamicImports: true
simplifies the build output, it might impact initial load time as it prevents code splitting for workers. Consider if separate worker chunks would be more beneficial for performance.
17-26
: Review external dependencies configuration.The build configuration excludes "chalk", but for a gRPC playground, you might need to consider:
- Adding other common Node.js built-ins as external dependencies
- Ensuring all gRPC-related dependencies are properly handled
Let's check the repository for any gRPC-related dependencies that might need to be marked as external:
✅ Verification successful
🏁 Script executed:
#!/bin/bash # Check package.json for gRPC-related dependencies fd package.json | xargs cat | jq '.dependencies,.devDependencies' | grep -i grpcLength of output: 80
🏁 Script executed:
#!/bin/bash # Search the entire repository for any reference to gRPC-related packages or imports rg -i "grpc" .Length of output: 920
External dependencies configuration appears appropriate.
Based on our investigation:
- No gRPC-related dependencies are found in any package.json or code references besides usage in the playground’s UI.
- Excluding "chalk" remains valid for handling browser-specific bundles.
- Although no additional Node built-ins or gRPC-specific packages were detected, it's still advisable to keep an eye on any Node dependency usage that might require similar external treatment.
38-41
: Verify browser compatibility requirements for gRPC.The
global: "globalThis"
setting provides basic compatibility, but gRPC might require additional polyfills or globals. Please verify the browser requirements for your gRPC implementation.✅ Verification successful
🌐 Web query:
What are the browser compatibility requirements for gRPC-web?
Length of output: 5379
Global configuration is correct for basic gRPC-Web support, but be mindful of advanced features.
- The Vite config setting
global: "globalThis"
ensures that libraries expecting a global reference work in the browser.- gRPC-Web is designed to work over HTTP/1.1 (using XHR/Fetch), so most modern browsers are compatible.
- Note that while unary and basic server streaming are supported, advanced features (like client or bidirectional streaming) are limited by browser capabilities.
- If you later require support for streaming or additional Node-like globals (e.g., Buffer, process), you may need to add further polyfills.
1-16
: Verify package versions and consider additional Monaco Editor language workers.The plugin configuration looks good, but please verify the following:
Also, consider adding the "protobuf" language worker to Monaco Editor for better gRPC/Protocol Buffers support.
✅ Verification successful
🌐 Web query:
What are the latest versions of @vitejs/plugin-react, @tailwindcss/vite, vite-plugin-wasm, and vite-plugin-monaco-editor-esm packages?
Length of output: 5614
Package Versions and Additional Language Workers Verified
- @vitejs/plugin-react is confirmed at version 4.3.4.
- @tailwindcss/vite aligns with Tailwind CSS v4, so its integration reflects the latest release.
- vite-plugin-wasm does not have explicit version details in the search results—ensure the dependency is intentional or check your package.json.
- vite-plugin-monaco-editor-esm appears to refer to vite-plugin-monaco-editor at version 1.1.0.
- Consider adding a "protobuf" language worker to the Monaco Editor configuration for enhanced support with gRPC/Protocol Buffers if needed.
export async function evaluateUserInput(query: string): Promise<any> { | ||
return await createWorker(query); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
Replace 'any' with a more specific return type.
Using any
disables type checking. Consider defining an interface for the expected result type.
-export async function evaluateUserInput(query: string): Promise<any> {
+interface EvaluationResult {
+ // Define the expected structure of your result
+ [key: string]: unknown;
+}
+export async function evaluateUserInput(query: string): Promise<EvaluationResult> {
return await createWorker(query);
}
📝 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.
export async function evaluateUserInput(query: string): Promise<any> { | |
return await createWorker(query); | |
} | |
interface EvaluationResult { | |
// Define the expected structure of your result | |
[key: string]: unknown; | |
} | |
export async function evaluateUserInput(query: string): Promise<EvaluationResult> { | |
return await createWorker(query); | |
} |
🧰 Tools
🪛 Biome (1.9.4)
[error] 22-22: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
async function createWorker(code: string) { | ||
return new Promise((resolve, reject) => { | ||
const worker = new Worker(new URL("./worker.ts", import.meta.url), { | ||
type: "module", | ||
}); | ||
|
||
worker.onmessage = (event) => { | ||
if (event.data.type === "success") { | ||
resolve(event.data.result); | ||
} | ||
if (event.data.type === "error") { | ||
reject(event.data.error); | ||
} | ||
worker.terminate(); | ||
}; | ||
|
||
worker.postMessage({ code }); | ||
}); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
Consider adding error handling for worker creation and message posting.
The worker creation and message posting could fail, but these scenarios aren't handled.
Add error handling:
async function createWorker(code: string) {
return new Promise((resolve, reject) => {
+ try {
const worker = new Worker(new URL("./worker.ts", import.meta.url), {
type: "module",
});
+ worker.onerror = (error) => {
+ reject(error);
+ worker.terminate();
+ };
worker.onmessage = (event) => {
if (event.data.type === "success") {
resolve(event.data.result);
}
if (event.data.type === "error") {
reject(event.data.error);
}
worker.terminate();
};
worker.postMessage({ code });
+ } catch (error) {
+ reject(error);
+ }
});
}
📝 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.
async function createWorker(code: string) { | |
return new Promise((resolve, reject) => { | |
const worker = new Worker(new URL("./worker.ts", import.meta.url), { | |
type: "module", | |
}); | |
worker.onmessage = (event) => { | |
if (event.data.type === "success") { | |
resolve(event.data.result); | |
} | |
if (event.data.type === "error") { | |
reject(event.data.error); | |
} | |
worker.terminate(); | |
}; | |
worker.postMessage({ code }); | |
}); | |
} | |
async function createWorker(code: string) { | |
return new Promise((resolve, reject) => { | |
try { | |
const worker = new Worker(new URL("./worker.ts", import.meta.url), { | |
type: "module", | |
}); | |
worker.onerror = (error) => { | |
reject(error); | |
worker.terminate(); | |
}; | |
worker.onmessage = (event) => { | |
if (event.data.type === "success") { | |
resolve(event.data.result); | |
} | |
if (event.data.type === "error") { | |
reject(event.data.error); | |
} | |
worker.terminate(); | |
}; | |
worker.postMessage({ code }); | |
} catch (error) { | |
reject(error); | |
} | |
}); | |
} |
try { | ||
const inputCode = new Function( | ||
"ToriiQueryBuilder", | ||
"ClauseBuilder", | ||
"AndComposeClause", | ||
"OrComposeClause", | ||
"KeysClause", | ||
"MemberClause", | ||
`return function() { ${e.data.code} }` | ||
); | ||
const result = inputCode( | ||
ToriiQueryBuilder, | ||
ClauseBuilder, | ||
AndComposeClause, | ||
OrComposeClause, | ||
KeysClause, | ||
MemberClause | ||
)(); | ||
self.postMessage({ type: "success", result }); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Critical: Implement code validation and sandbox the execution environment.
Using new Function()
for dynamic code execution poses significant security risks as it allows arbitrary code execution.
Consider these security measures:
- Implement code validation:
function validateCode(code: string): boolean {
// Add validation rules to prevent malicious code
const disallowedPatterns = [
/eval\(/, /Function\(/, /import\(/, /require\(/,
/process\./, /global\./, /window\./, /document\./
];
return !disallowedPatterns.some(pattern => pattern.test(code));
}
- Use a proper code sandbox library:
- const inputCode = new Function(
- "ToriiQueryBuilder",
- "ClauseBuilder",
- "AndComposeClause",
- "OrComposeClause",
- "KeysClause",
- "MemberClause",
- `return function() { ${e.data.code} }`
- );
+ if (!validateCode(e.data.code)) {
+ throw new Error("Invalid code detected");
+ }
+ // Consider using a proper sandbox library like vm2
+ const sandbox = new VM({
+ timeout: 1000,
+ sandbox: {
+ ToriiQueryBuilder,
+ ClauseBuilder,
+ AndComposeClause,
+ OrComposeClause,
+ KeysClause,
+ MemberClause
+ }
+ });
+ const result = sandbox.run(e.data.code);
@@ -0,0 +1,271 @@ | |||
import { useState, useEffect, useCallback } from "react"; | |||
import { type init } from "@dojoengine/sdk/experimental"; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
Use import type for purely type-based imports
Some of these imports appear to be used only as types. Converting them to import type
can reduce overhead and aligns with TypeScript best practices.
- import { type init } from "@dojoengine/sdk/experimental";
+ import type { init } from "@dojoengine/sdk/experimental";
- import { QueryHistory, QueryItem } from "./components/query-history";
+ import { QueryHistory } from "./components/query-history";
+ import type { QueryItem } from "./components/query-history";
- import { SchemaExplorer, SchemaItem } from "./components/schema-explorer";
+ import { SchemaExplorer } from "./components/schema-explorer";
+ import type { SchemaItem } from "./components/schema-explorer";
- import { StandardizedQueryResult, SchemaType } from "@dojoengine/sdk";
+ import type { StandardizedQueryResult, SchemaType } from "@dojoengine/sdk";
Also applies to: 5-5, 6-6, 9-9
🧰 Tools
🪛 Biome (1.9.4)
[error] 2-2: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.
(lint/style/useImportType)
interface AlertProps { | ||
variant: string; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
Use union type for variant prop.
Instead of using a string type for variant
, define specific allowed values using a union type for better type safety.
+type AlertVariant = "default" | "destructive";
+
interface AlertProps {
- variant: string;
+ variant: AlertVariant;
}
📝 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.
interface AlertProps { | |
variant: string; | |
} | |
type AlertVariant = "default" | "destructive"; | |
interface AlertProps { | |
variant: AlertVariant; | |
} |
<div className="space-y-2 p-4"> | ||
{queries.map((item, index) => ( | ||
<div | ||
key={index} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
Avoid using array index as key.
Using array index as key can lead to performance issues and bugs with state. Consider using a unique identifier from the query item.
- key={index}
+ key={`${item.timestamp}-${item.query.slice(0, 10)}`}
📝 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.
key={index} | |
key={`${item.timestamp}-${item.query.slice(0, 10)}`} |
🧰 Tools
🪛 Biome (1.9.4)
[error] 22-22: Avoid using the index of an array as key property in an element.
This is the source of the key value.
The order of the items may change, and this also affects performances and component state.
Check the React documentation.
(lint/suspicious/noArrayIndexKey)
<div | ||
className="flex items-center gap-2 p-2 cursor-pointer hover:bg-zinc-800" | ||
onClick={() => | ||
setExpandedTables((prev) => ({ | ||
...prev, | ||
[tableName]: !prev[tableName], | ||
})) | ||
} | ||
> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
Enhance accessibility with keyboard navigation and ARIA attributes.
The clickable div should be a button with proper ARIA attributes for better accessibility.
- <div
+ <button
className="flex items-center gap-2 p-2 cursor-pointer hover:bg-zinc-800"
onClick={() =>
setExpandedTables((prev) => ({
...prev,
[tableName]: !prev[tableName],
}))
}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ setExpandedTables((prev) => ({
+ ...prev,
+ [tableName]: !prev[tableName],
+ }));
+ }
+ }}
+ aria-expanded={!!expandedTables[tableName]}
+ type="button"
📝 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.
<div | |
className="flex items-center gap-2 p-2 cursor-pointer hover:bg-zinc-800" | |
onClick={() => | |
setExpandedTables((prev) => ({ | |
...prev, | |
[tableName]: !prev[tableName], | |
})) | |
} | |
> | |
<button | |
className="flex items-center gap-2 p-2 cursor-pointer hover:bg-zinc-800" | |
onClick={() => | |
setExpandedTables((prev) => ({ | |
...prev, | |
[tableName]: !prev[tableName], | |
})) | |
} | |
onKeyDown={(e) => { | |
if (e.key === 'Enter' || e.key === ' ') { | |
setExpandedTables((prev) => ({ | |
...prev, | |
[tableName]: !prev[tableName], | |
})); | |
} | |
}} | |
aria-expanded={!!expandedTables[tableName]} | |
type="button" | |
> |
🧰 Tools
🪛 Biome (1.9.4)
[error] 38-46: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
interface QueryResultsProps { | ||
response: any; | ||
error: string | null; | ||
loading: boolean; | ||
executionTime: number | null; | ||
onDownload: () => void; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
Improve type safety in QueryResultsProps interface.
The response type should be more specific than any.
interface QueryResultsProps {
- response: any;
+ response: Record<string, unknown>[] | null;
error: string | null;
loading: boolean;
executionTime: number | null;
onDownload: () => void;
}
📝 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.
interface QueryResultsProps { | |
response: any; | |
error: string | null; | |
loading: boolean; | |
executionTime: number | null; | |
onDownload: () => void; | |
} | |
interface QueryResultsProps { | |
response: Record<string, unknown>[] | null; | |
error: string | null; | |
loading: boolean; | |
executionTime: number | null; | |
onDownload: () => void; | |
} |
🧰 Tools
🪛 Biome (1.9.4)
[error] 5-5: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
interface QueryEditorProps { | ||
setQuery: (...args: any) => any; | ||
onExecute: (...args: any) => any; | ||
onBeautify: (...args: any) => any; | ||
onCopy: (...args: any) => any; | ||
query: string; | ||
loading: boolean; | ||
copied: boolean; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
Define proper types for callback functions in QueryEditorProps.
Replace any
types with proper TypeScript types to improve type safety and maintainability.
interface QueryEditorProps {
- setQuery: (...args: any) => any;
- onExecute: (...args: any) => any;
- onBeautify: (...args: any) => any;
- onCopy: (...args: any) => any;
+ setQuery: (query: string) => void;
+ onExecute: () => void;
+ onBeautify: () => void;
+ onCopy: () => void;
query: string;
loading: boolean;
copied: boolean;
}
📝 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.
interface QueryEditorProps { | |
setQuery: (...args: any) => any; | |
onExecute: (...args: any) => any; | |
onBeautify: (...args: any) => any; | |
onCopy: (...args: any) => any; | |
query: string; | |
loading: boolean; | |
copied: boolean; | |
} | |
interface QueryEditorProps { | |
setQuery: (query: string) => void; | |
onExecute: () => void; | |
onBeautify: () => void; | |
onCopy: () => void; | |
query: string; | |
loading: boolean; | |
copied: boolean; | |
} |
🧰 Tools
🪛 Biome (1.9.4)
[error] 107-107: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 107-107: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 108-108: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 108-108: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 109-109: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 109-109: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 110-110: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 110-110: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
useEffect(() => { | ||
if (elementRef.current) { | ||
editorRef.current = monaco.editor.create(elementRef.current, { | ||
value: query, | ||
language: "typescript", | ||
theme: "vs-dark", | ||
minimap: { enabled: false }, | ||
fontSize: 14, | ||
// model: monaco.editor.getModel(monaco.Uri.parse("sdk.d.ts")), | ||
}); | ||
|
||
editorRef.current.addCommand( | ||
monaco.KeyMod.CtrlCmd | monaco.KeyCode.Space, | ||
() => { | ||
editorRef.current?.trigger( | ||
"keyboard", | ||
"editor.action.triggerSuggest", | ||
{} | ||
); | ||
} | ||
); | ||
|
||
editorRef.current.onDidChangeModelContent(() => { | ||
setQuery(editorRef.current?.getValue()); | ||
}); | ||
} | ||
|
||
return () => { | ||
if (editorRef.current) { | ||
editorRef.current.dispose(); | ||
} | ||
}; | ||
}, []); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Add missing dependencies to useEffect hook.
The hook uses query
and setQuery
but they're not listed in the dependencies array.
- }, []);
+ }, [query, setQuery]);
📝 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.
useEffect(() => { | |
if (elementRef.current) { | |
editorRef.current = monaco.editor.create(elementRef.current, { | |
value: query, | |
language: "typescript", | |
theme: "vs-dark", | |
minimap: { enabled: false }, | |
fontSize: 14, | |
// model: monaco.editor.getModel(monaco.Uri.parse("sdk.d.ts")), | |
}); | |
editorRef.current.addCommand( | |
monaco.KeyMod.CtrlCmd | monaco.KeyCode.Space, | |
() => { | |
editorRef.current?.trigger( | |
"keyboard", | |
"editor.action.triggerSuggest", | |
{} | |
); | |
} | |
); | |
editorRef.current.onDidChangeModelContent(() => { | |
setQuery(editorRef.current?.getValue()); | |
}); | |
} | |
return () => { | |
if (editorRef.current) { | |
editorRef.current.dispose(); | |
} | |
}; | |
}, []); | |
useEffect(() => { | |
if (elementRef.current) { | |
editorRef.current = monaco.editor.create(elementRef.current, { | |
value: query, | |
language: "typescript", | |
theme: "vs-dark", | |
minimap: { enabled: false }, | |
fontSize: 14, | |
// model: monaco.editor.getModel(monaco.Uri.parse("sdk.d.ts")), | |
}); | |
editorRef.current.addCommand( | |
monaco.KeyMod.CtrlCmd | monaco.KeyCode.Space, | |
() => { | |
editorRef.current?.trigger( | |
"keyboard", | |
"editor.action.triggerSuggest", | |
{} | |
); | |
} | |
); | |
editorRef.current.onDidChangeModelContent(() => { | |
setQuery(editorRef.current?.getValue()); | |
}); | |
} | |
return () => { | |
if (editorRef.current) { | |
editorRef.current.dispose(); | |
} | |
}; | |
}, [query, setQuery]); |
🧰 Tools
🪛 Biome (1.9.4)
[error] 139-139: This hook does not specify all of its dependencies: query
This dependency is not specified in the hook dependency list.
Either include it or remove the dependency array
(lint/correctness/useExhaustiveDependencies)
[error] 139-139: This hook does not specify all of its dependencies: setQuery
This dependency is not specified in the hook dependency list.
Either include it or remove the dependency array
(lint/correctness/useExhaustiveDependencies)
537f4d9
to
14d38f0
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 3
♻️ Duplicate comments (4)
examples/example-vite-grpc-playground/src/components/ui/alert.tsx (1)
3-5
: 🛠️ Refactor suggestionUse union type for variant prop.
Instead of using a string type for
variant
, define specific allowed values using a union type for better type safety.+type AlertVariant = "default" | "destructive"; + interface AlertProps { - variant: string; + variant: AlertVariant; }examples/example-vite-grpc-playground/src/components/ts-executor.ts (2)
2-20
: 🛠️ Refactor suggestionConsider adding error handling for worker creation and message posting.
The worker creation and message posting could fail, but these scenarios aren't handled.
async function createWorker(code: string) { return new Promise((resolve, reject) => { + try { const worker = new Worker(new URL("./worker.ts", import.meta.url), { type: "module", }); + worker.onerror = (error) => { + reject(error); + worker.terminate(); + }; worker.onmessage = (event) => { if (event.data.type === "success") { resolve(event.data.result); } if (event.data.type === "error") { reject(event.data.error); } worker.terminate(); }; worker.postMessage({ code }); + } catch (error) { + reject(error); + } }); }
22-24
: 🛠️ Refactor suggestionReplace 'any' with a more specific return type.
Using
any
disables type checking. Consider defining an interface for the expected result type.+interface EvaluationResult { + // Define the expected structure of your result + [key: string]: unknown; +} -export async function evaluateUserInput(query: string): Promise<any> { +export async function evaluateUserInput(query: string): Promise<EvaluationResult> { return await createWorker(query); }🧰 Tools
🪛 Biome (1.9.4)
[error] 22-22: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
examples/example-vite-grpc-playground/src/main.tsx (1)
24-24
: 🛠️ Refactor suggestionReplace non-null assertion with proper error handling.
Instead of using the non-null assertion operator (
!
), add proper error handling for when the root element is not found.- createRoot(document.getElementById("root")!).render( + const rootElement = document.getElementById("root"); + if (!rootElement) { + throw new Error("Failed to find root element"); + } + createRoot(rootElement).render(🧰 Tools
🪛 Biome (1.9.4)
[error] 24-24: Forbidden non-null assertion.
(lint/style/noNonNullAssertion)
🧹 Nitpick comments (11)
examples/example-vite-grpc-playground/src/components/ui/card.tsx (2)
1-1
: Useimport type
for type-only imports.Since
PropsWithChildren
is only used as a type, use theimport type
syntax to ensure it's removed during compilation.-import { type PropsWithChildren } from "react"; +import type { PropsWithChildren } from "react";🧰 Tools
🪛 Biome (1.9.4)
[error] 1-1: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
3-5
: Make className prop optional.Since you provide a fallback empty string, consider making the className prop optional for better developer experience.
interface CardProps { - className: string; + className?: string; }examples/example-vite-grpc-playground/src/components/ui/alert.tsx (1)
1-1
: Useimport type
for type-only imports.Since
PropsWithChildren
is only used as a type, use theimport type
syntax to ensure it's removed during compilation.-import { type PropsWithChildren } from "react"; +import type { PropsWithChildren } from "react";🧰 Tools
🪛 Biome (1.9.4)
[error] 1-1: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
examples/example-vite-grpc-playground/src/components/ui/button.tsx (1)
1-1
: Use import type for type-only imports.Since PropsWithChildren is only used as a type, it should be imported using import type.
-import { type PropsWithChildren } from "react"; +import type { PropsWithChildren } from "react";🧰 Tools
🪛 Biome (1.9.4)
[error] 1-1: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
examples/example-vite-grpc-playground/src/components/query-history.tsx (1)
34-40
: Add type attribute to button element.Explicitly specify the button type to prevent unintended form submissions.
<button className="p-1 hover:text-yellow-500 transition-colors" + type="button" onClick={(e) => { e.stopPropagation(); onToggleFavorite(index); }}
🧰 Tools
🪛 Biome (1.9.4)
[error] 34-40: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a
form
element. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset(lint/a11y/useButtonType)
examples/example-vite-grpc-playground/src/components/schema-explorer.tsx (1)
14-16
: Improve type safety in expandedTables state.The state type can be more specific than using a union with SchemaItem[].
- const [expandedTables, setExpandedTables] = useState<{ - [x: string]: boolean | SchemaItem[]; - }>({}); + const [expandedTables, setExpandedTables] = useState<Record<string, boolean>>({});examples/example-vite-grpc-playground/src/components/query-results.tsx (1)
81-88
: Extract "No Results" component for better code organization.Consider extracting the "No Results" view into a separate component for better maintainability.
+const NoResults = () => ( + <div className="flex flex-col items-center justify-center h-full text-zinc-500"> + <p className="text-lg font-medium">No Results Yet</p> + <p className="text-sm">Execute a query to see results here</p> + </div> +); {(!response || response.length === 0) && !error && !loading && ( - <div className="flex flex-col items-center justify-center h-full text-zinc-500"> - <p className="text-lg font-medium">No Results Yet</p> - <p className="text-sm">Execute a query to see results here</p> - </div> + <NoResults /> )}examples/example-vite-grpc-playground/src/components/query-editor.tsx (3)
17-21
: Remove commented code.Remove the commented code block as it's not being used. If this code might be needed in the future, consider documenting the reason in a TODO comment or tracking it in a separate issue.
-// const dojoenginesdkModel = monaco.editor.createModel( -// sdkType, -// "typescript", -// monaco.Uri.parse("sdk.d.ts") -// );
29-31
: Improve type safety and documentation.The comment implies a missing "Step 1". Also, the array type could be more specific.
-// Step 2: Extract relevant information -const completionItems: Partial<monaco.languages.CompletionItem>[] = []; +// Initialize completion items array for TypeScript suggestions +const completionItems: Required<Pick<monaco.languages.CompletionItem, 'label' | 'kind' | 'insertText' | 'detail'>>[] = [];
42-52
: Replace forEach with for...of for better performance.Using forEach may lead to performance issues when working with large arrays. Using for...of is more performant and easier to read.
- node.members.forEach((member) => { - if (ts.isMethodDeclaration(member) && member.name) { - const methodName = member.name.getText(sourceFile); - completionItems.push({ - label: methodName, - kind: monaco.languages.CompletionItemKind.Method, - insertText: methodName, - detail: `Method ${methodName} of class ${className}`, - }); - } - }); + for (const member of node.members) { + if (ts.isMethodDeclaration(member) && member.name) { + const methodName = member.name.getText(sourceFile); + completionItems.push({ + label: methodName, + kind: monaco.languages.CompletionItemKind.Method, + insertText: methodName, + detail: `Method ${methodName} of class ${className}`, + }); + } + }🧰 Tools
🪛 Biome (1.9.4)
[error] 42-52: Prefer for...of instead of forEach.
forEach may lead to performance issues when working with large arrays. When combined with functions like filter or map, this causes multiple iterations over the same type.
(lint/complexity/noForEach)
examples/example-vite-grpc-playground/src/App.tsx (1)
81-87
: Extract duplicated sorting logic.The history sorting logic is duplicated. Extract it into a separate function to improve maintainability.
+const sortQueryHistory = (a: QueryItem, b: QueryItem) => { + if (a.favorite === b.favorite) { + return b.timestamp - a.timestamp; + } + return b.favorite ? 1 : -1; +}; // Replace both occurrences of the sorting logic with: -return updated.sort((a, b) => { - if (a.favorite === b.favorite) { - return b.timestamp - a.timestamp; - } - return b.favorite ? 1 : -1; -}); +return updated.sort(sortQueryHistory);Also applies to: 136-142
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
examples/example-vite-grpc-playground/public/vite.svg
is excluded by!**/*.svg
examples/example-vite-grpc-playground/src/assets/react.svg
is excluded by!**/*.svg
pnpm-lock.yaml
is excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (27)
biome.json
(1 hunks)examples/example-vite-grpc-playground/.gitignore
(1 hunks)examples/example-vite-grpc-playground/README.md
(1 hunks)examples/example-vite-grpc-playground/dojoConfig.ts
(1 hunks)examples/example-vite-grpc-playground/eslint.config.js
(1 hunks)examples/example-vite-grpc-playground/index.html
(1 hunks)examples/example-vite-grpc-playground/package.json
(1 hunks)examples/example-vite-grpc-playground/src/App.tsx
(1 hunks)examples/example-vite-grpc-playground/src/components/minimal-worker.ts
(1 hunks)examples/example-vite-grpc-playground/src/components/query-editor.tsx
(1 hunks)examples/example-vite-grpc-playground/src/components/query-history.tsx
(1 hunks)examples/example-vite-grpc-playground/src/components/query-results.tsx
(1 hunks)examples/example-vite-grpc-playground/src/components/schema-explorer.tsx
(1 hunks)examples/example-vite-grpc-playground/src/components/ts-executor.ts
(1 hunks)examples/example-vite-grpc-playground/src/components/ui/alert.tsx
(1 hunks)examples/example-vite-grpc-playground/src/components/ui/button.tsx
(1 hunks)examples/example-vite-grpc-playground/src/components/ui/card.tsx
(1 hunks)examples/example-vite-grpc-playground/src/components/worker.ts
(1 hunks)examples/example-vite-grpc-playground/src/index.css
(1 hunks)examples/example-vite-grpc-playground/src/main.tsx
(1 hunks)examples/example-vite-grpc-playground/src/vite-env.d.ts
(1 hunks)examples/example-vite-grpc-playground/tsconfig.app.json
(1 hunks)examples/example-vite-grpc-playground/tsconfig.json
(1 hunks)examples/example-vite-grpc-playground/tsconfig.node.json
(1 hunks)examples/example-vite-grpc-playground/vite.config.ts
(1 hunks)packages/sdk/package.json
(1 hunks)scripts/build-examples.sh
(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (15)
- examples/example-vite-grpc-playground/src/vite-env.d.ts
- scripts/build-examples.sh
- examples/example-vite-grpc-playground/src/components/worker.ts
- examples/example-vite-grpc-playground/src/index.css
- examples/example-vite-grpc-playground/src/components/minimal-worker.ts
- examples/example-vite-grpc-playground/eslint.config.js
- examples/example-vite-grpc-playground/.gitignore
- biome.json
- examples/example-vite-grpc-playground/tsconfig.json
- packages/sdk/package.json
- examples/example-vite-grpc-playground/dojoConfig.ts
- examples/example-vite-grpc-playground/vite.config.ts
- examples/example-vite-grpc-playground/README.md
- examples/example-vite-grpc-playground/index.html
- examples/example-vite-grpc-playground/package.json
🧰 Additional context used
🪛 Biome (1.9.4)
examples/example-vite-grpc-playground/src/components/query-results.tsx
[error] 5-5: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 47-47: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 49-49: Avoid using the index of an array as key property in an element.
This is the source of the key value.
The order of the items may change, and this also affects performances and component state.
Check the React documentation.
(lint/suspicious/noArrayIndexKey)
[error] 59-59: Avoid using the index of an array as key property in an element.
This is the source of the key value.
The order of the items may change, and this also affects performances and component state.
Check the React documentation.
(lint/suspicious/noArrayIndexKey)
examples/example-vite-grpc-playground/src/App.tsx
[error] 2-2: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.
(lint/style/useImportType)
[error] 5-5: Some named imports are only used as types.
This import is only used as a type.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Add inline type keywords.
(lint/style/useImportType)
[error] 6-6: Some named imports are only used as types.
This import is only used as a type.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Add inline type keywords.
(lint/style/useImportType)
[error] 9-9: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.
(lint/style/useImportType)
examples/example-vite-grpc-playground/src/components/query-editor.tsx
[error] 42-52: Prefer for...of instead of forEach.
forEach may lead to performance issues when working with large arrays. When combined with functions like filter or map, this causes multiple iterations over the same type.
(lint/complexity/noForEach)
[error] 107-107: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 107-107: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 108-108: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 108-108: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 109-109: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 109-109: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 110-110: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 110-110: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 139-139: This hook does not specify all of its dependencies: query
This dependency is not specified in the hook dependency list.
Either include it or remove the dependency array
(lint/correctness/useExhaustiveDependencies)
[error] 139-139: This hook does not specify all of its dependencies: setQuery
This dependency is not specified in the hook dependency list.
Either include it or remove the dependency array
(lint/correctness/useExhaustiveDependencies)
examples/example-vite-grpc-playground/src/components/query-history.tsx
[error] 26-29: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
[error] 22-22: Avoid using the index of an array as key property in an element.
This is the source of the key value.
The order of the items may change, and this also affects performances and component state.
Check the React documentation.
(lint/suspicious/noArrayIndexKey)
[error] 34-40: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a form
element. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
(lint/a11y/useButtonType)
examples/example-vite-grpc-playground/src/components/schema-explorer.tsx
[error] 38-46: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
examples/example-vite-grpc-playground/src/components/ts-executor.ts
[error] 22-22: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
examples/example-vite-grpc-playground/src/components/ui/alert.tsx
[error] 1-1: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.
(lint/style/useImportType)
examples/example-vite-grpc-playground/src/components/ui/button.tsx
[error] 4-4: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 4-4: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 1-1: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.
(lint/style/useImportType)
examples/example-vite-grpc-playground/src/components/ui/card.tsx
[error] 1-1: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.
(lint/style/useImportType)
examples/example-vite-grpc-playground/src/main.tsx
[error] 24-24: Forbidden non-null assertion.
(lint/style/noNonNullAssertion)
examples/example-vite-grpc-playground/tsconfig.app.json
[error] 10-10: JSON standard does not allow comments.
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 15-15: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 15-15: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 15-15: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 15-15: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-18: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 18-18: JSON standard does not allow comments.
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-24: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 25-25: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 25-25: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 25-25: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 25-26: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
examples/example-vite-grpc-playground/tsconfig.node.json
[error] 9-9: JSON standard does not allow comments.
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: JSON standard does not allow comments.
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 18-18: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 18-18: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 18-18: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 18-18: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-24: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: build
- GitHub Check: check
🔇 Additional comments (21)
examples/example-vite-grpc-playground/tsconfig.node.json (5)
1-8
: Approved Compiler Options Setup
The compiler options defined in lines 1–8 (including settings fortsBuildInfoFile
,target
,lib
,module
, andskipLibCheck
) look correctly configured for a modern ECMAScript environment.
9-15
: JSON Comments in Bundler Mode Section
This block (lines 9–15) includes an inline comment (/* Bundler mode */
). TypeScript configuration files (tsconfig) are typically handled as JSONC, which permits comments. However, be aware that some JSON linters or CI tools might enforce strict JSON and flag these comments. Please verify that your toolchain accepts JSON with comments or consider removing them if necessary.🧰 Tools
🪛 Biome (1.9.4)
[error] 9-9: JSON standard does not allow comments.
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
16-22
: Linting Options and Comment Usage
The linting options (lines 16–22) enforce a strict code quality regime, which is excellent. As with the bundler mode section, the comment (/* Linting */
) may trigger errors in strict JSON validators. Confirm that all tooling (linters, build scripts) is configured to handle JSONC, or remove the comment if strict JSON is required.🧰 Tools
🪛 Biome (1.9.4)
[error] 16-16: JSON standard does not allow comments.
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 18-18: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 18-18: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 18-18: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 18-18: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
23-23
: Include Directive Validation
The"include": ["vite.config.ts"]
on line 23 correctly limits TypeScript’s scope to the Vite configuration file. Make sure the path remains valid as the project evolves.🧰 Tools
🪛 Biome (1.9.4)
[error] 23-23: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 23-24: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
1-25
: Addressing Static Analysis Warnings
Multiple static analysis warnings (e.g., errors about comments and "End of file expected") appear to stem from a strict JSON parser that does not support comments or extra formatting tokens. If your project uses the JSONC parser (as is standard for tsconfig files), these warnings can be safely disregarded. Otherwise, consider updating your configuration (or linter settings) to avoid these false positives.🧰 Tools
🪛 Biome (1.9.4)
[error] 9-9: JSON standard does not allow comments.
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 14-16: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 16-16: JSON standard does not allow comments.
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 18-18: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 18-18: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 18-18: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 18-18: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 23-24: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
examples/example-vite-grpc-playground/tsconfig.app.json (5)
1-9
: Positive Initial Configuration Structure
The compiler options are well laid out and target modern JavaScript/TypeScript features along with React support. The settings for ESNext and React JSX are appropriate for a project like this.
18-23
: Handling Additional Comment Blocks
Similarly, the/* Linting */
comment preceding the linting rules triggers the same static analysis errors as noted above. If your toolset enforces strict JSON, consider updating its configuration to allow comments in tsconfig files or remove these comments.🧰 Tools
🪛 Biome (1.9.4)
[error] 18-18: JSON standard does not allow comments.
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
24-26
: Configuration Completeness
The remaining configuration, including the"include": ["src"]
setting, is clear and correctly specifies the source directory. The overall JSON structure is sound for a TypeScript project configuration file.🧰 Tools
🪛 Biome (1.9.4)
[error] 24-24: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 25-25: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 25-25: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 25-25: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 25-26: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
27-27
: Trailing Newline Note
The extra newline at line 27 is acceptable and does not affect functionality.
10-16
: JSON Comments and Static Analysis
This section includes the comment/* Bundler mode */
right before the bundler-related options. Although TypeScript configuration files are processed as JSONC (JSON with comments) and thus tolerate comments, standard JSON does not. The static analysis tool (Biome) is flagging these comments. Consider one of the following actions:
- Configure your static analysis tool to recognize JSONC for tsconfig files.
- Remove or reformat the comments if strict JSON is required.
Optional Diff Suggestion:
- /* Bundler mode */ - "moduleResolution": "bundler", - "allowImportingTsExtensions": true, - "isolatedModules": true, - "moduleDetection": "force", - "noEmit": true, - "jsx": "react-jsx", + // Bundler mode + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "isolatedModules": true, + "moduleDetection": "force", + "noEmit": true, + "jsx": "react-jsx",🧰 Tools
🪛 Biome (1.9.4)
[error] 10-10: JSON standard does not allow comments.
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 15-15: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 15-15: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 15-15: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 15-15: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
examples/example-vite-grpc-playground/src/components/ui/card.tsx (1)
6-14
: LGTM! Well-structured component.The Card component is well-implemented with proper TypeScript types and Tailwind CSS classes.
examples/example-vite-grpc-playground/src/components/ui/alert.tsx (1)
7-14
: LGTM! Well-structured component.The Alert component is well-implemented with proper conditional styling based on the variant.
examples/example-vite-grpc-playground/src/main.tsx (2)
16-21
: Replace placeholder values with actual configuration.The domain configuration uses placeholder values that should be replaced with actual values.
Please ensure these values are correct for your environment:
WORLD_NAME
KATANA
31-31
: LGTM! Good error handling for main function.The catch block for the main function ensures errors are properly logged.
examples/example-vite-grpc-playground/src/components/ui/button.tsx (1)
3-8
: 🛠️ Refactor suggestionImprove type safety in ButtonProps interface.
The interface can be made more type-safe by:
- Using a more specific type for onClick
- Making variant a union type of supported values
interface ButtonProps { - onClick: (...args: any) => any; + onClick: (...args: unknown[]) => void; disabled?: boolean; - variant?: string; + variant?: 'outline' | 'default'; className?: string; }Likely invalid or redundant comment.
🧰 Tools
🪛 Biome (1.9.4)
[error] 4-4: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 4-4: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
examples/example-vite-grpc-playground/src/components/query-history.tsx (1)
21-29
: 🛠️ Refactor suggestionImprove accessibility and semantic HTML structure.
The clickable div should be a button for better accessibility and semantic HTML.
- <div + <button key={`${item.timestamp}-${item.query.slice(0, 10)}`} className="p-2 hover:bg-zinc-800 rounded cursor-pointer group border border-zinc-800" - > - <div className="flex items-center justify-between"> - <div - className="flex-1 cursor-pointer" - onClick={() => onSelectQuery(item.query)} - > + onClick={() => onSelectQuery(item.query)} + type="button" + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + onSelectQuery(item.query); + } + }} + > + <div className="flex items-center justify-between"> + <div className="flex-1">Likely invalid or redundant comment.
🧰 Tools
🪛 Biome (1.9.4)
[error] 26-29: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
[error] 22-22: Avoid using the index of an array as key property in an element.
This is the source of the key value.
The order of the items may change, and this also affects performances and component state.
Check the React documentation.(lint/suspicious/noArrayIndexKey)
examples/example-vite-grpc-playground/src/components/schema-explorer.tsx (1)
38-46
: 🛠️ Refactor suggestionEnhance accessibility with keyboard navigation and ARIA attributes.
The clickable div should be a button with proper ARIA attributes for better accessibility.
- <div + <button className="flex items-center gap-2 p-2 cursor-pointer hover:bg-zinc-800" onClick={() => setExpandedTables((prev) => ({ ...prev, [tableName]: !prev[tableName], })) } + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + setExpandedTables((prev) => ({ + ...prev, + [tableName]: !prev[tableName], + })); + } + }} + aria-expanded={!!expandedTables[tableName]} + type="button"Likely invalid or redundant comment.
🧰 Tools
🪛 Biome (1.9.4)
[error] 38-46: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
examples/example-vite-grpc-playground/src/components/query-results.tsx (1)
4-10
: 🛠️ Refactor suggestionImprove type safety in QueryResultsProps interface.
The response type should be more specific than any.
interface QueryResultsProps { - response: any; + response: Record<string, unknown>[] | null; error: string | null; loading: boolean; executionTime: number | null; onDownload: () => void; }Likely invalid or redundant comment.
🧰 Tools
🪛 Biome (1.9.4)
[error] 5-5: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
examples/example-vite-grpc-playground/src/components/query-editor.tsx (2)
106-114
: Define proper types for callback functions in QueryEditorProps.Replace
any
types with proper TypeScript types to improve type safety and maintainability.🧰 Tools
🪛 Biome (1.9.4)
[error] 107-107: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 107-107: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 108-108: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 108-108: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 109-109: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 109-109: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 110-110: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 110-110: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
139-171
: Add missing dependencies to editor initialization effect.The effect uses
query
andsetQuery
but they're not listed in the dependencies array.🧰 Tools
🪛 Biome (1.9.4)
[error] 139-139: This hook does not specify all of its dependencies: query
This dependency is not specified in the hook dependency list.
Either include it or remove the dependency array
(lint/correctness/useExhaustiveDependencies)
[error] 139-139: This hook does not specify all of its dependencies: setQuery
This dependency is not specified in the hook dependency list.
Either include it or remove the dependency array
(lint/correctness/useExhaustiveDependencies)
examples/example-vite-grpc-playground/src/App.tsx (1)
1-10
: Use import type for purely type-based imports.Some of these imports appear to be used only as types. Converting them to
import type
can reduce overhead and aligns with TypeScript best practices.🧰 Tools
🪛 Biome (1.9.4)
[error] 2-2: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
[error] 5-5: Some named imports are only used as types.
This import is only used as a type.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Add inline type keywords.(lint/style/useImportType)
[error] 6-6: Some named imports are only used as types.
This import is only used as a type.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Add inline type keywords.(lint/style/useImportType)
[error] 9-9: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
{response.map((row: any, rowIndex: number) => ( | ||
<tr | ||
key={rowIndex} | ||
className={ | ||
rowIndex % 2 === 0 | ||
? "bg-zinc-900" | ||
: "bg-zinc-900/50" | ||
} | ||
> | ||
{Object.values(row).map( | ||
(value, colIndex) => ( | ||
<td | ||
key={colIndex} | ||
className="px-6 py-4 whitespace-nowrap text-sm text-zinc-300 font-mono" | ||
> | ||
{value === null ? ( | ||
<span className="text-zinc-500 italic"> | ||
NULL | ||
</span> | ||
) : typeof value === | ||
"object" ? ( | ||
JSON.stringify(value) | ||
) : ( | ||
String(value) | ||
)} | ||
</td> | ||
) | ||
)} | ||
</tr> | ||
))} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
Improve type safety and performance in table rendering.
- Replace any with proper type
- Use meaningful keys instead of array indices
- {response.map((row: any, rowIndex: number) => (
+ {response.map((row: Record<string, unknown>, rowIndex: number) => (
<tr
- key={rowIndex}
+ key={Object.values(row).join('-')}
className={
rowIndex % 2 === 0
? "bg-zinc-900"
: "bg-zinc-900/50"
}
>
{Object.values(row).map(
(value, colIndex) => (
<td
- key={colIndex}
+ key={`${Object.keys(row)[colIndex]}-${value}`}
📝 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.
{response.map((row: any, rowIndex: number) => ( | |
<tr | |
key={rowIndex} | |
className={ | |
rowIndex % 2 === 0 | |
? "bg-zinc-900" | |
: "bg-zinc-900/50" | |
} | |
> | |
{Object.values(row).map( | |
(value, colIndex) => ( | |
<td | |
key={colIndex} | |
className="px-6 py-4 whitespace-nowrap text-sm text-zinc-300 font-mono" | |
> | |
{value === null ? ( | |
<span className="text-zinc-500 italic"> | |
NULL | |
</span> | |
) : typeof value === | |
"object" ? ( | |
JSON.stringify(value) | |
) : ( | |
String(value) | |
)} | |
</td> | |
) | |
)} | |
</tr> | |
))} | |
{response.map((row: Record<string, unknown>, rowIndex: number) => ( | |
<tr | |
key={Object.values(row).join('-')} | |
className={ | |
rowIndex % 2 === 0 | |
? "bg-zinc-900" | |
: "bg-zinc-900/50" | |
} | |
> | |
{Object.values(row).map((value, colIndex) => ( | |
<td | |
key={`${Object.keys(row)[colIndex]}-${value}`} | |
className="px-6 py-4 whitespace-nowrap text-sm text-zinc-300 font-mono" | |
> | |
{value === null ? ( | |
<span className="text-zinc-500 italic"> | |
NULL | |
</span> | |
) : typeof value === "object" ? ( | |
JSON.stringify(value) | |
) : ( | |
String(value) | |
)} | |
</td> | |
))} | |
</tr> | |
))} |
🧰 Tools
🪛 Biome (1.9.4)
[error] 47-47: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 49-49: Avoid using the index of an array as key property in an element.
This is the source of the key value.
The order of the items may change, and this also affects performances and component state.
Check the React documentation.
(lint/suspicious/noArrayIndexKey)
[error] 59-59: Avoid using the index of an array as key property in an element.
This is the source of the key value.
The order of the items may change, and this also affects performances and component state.
Check the React documentation.
(lint/suspicious/noArrayIndexKey)
useEffect(() => { | ||
const resize = () => { | ||
if (editorRef.current) { | ||
editorRef.current.layout({ height: 0, width: 0 }); | ||
editorRef.current.layout(); | ||
} | ||
}; | ||
window.addEventListener("resize", resize); | ||
setTimeout(() => resize); // push to next tick | ||
return () => window.removeEventListener("resize", resize); | ||
}); | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Add missing dependency array to resize effect.
The effect uses window event listeners but has no dependency array, causing it to run on every render.
- });
+ }, []);
📝 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.
useEffect(() => { | |
const resize = () => { | |
if (editorRef.current) { | |
editorRef.current.layout({ height: 0, width: 0 }); | |
editorRef.current.layout(); | |
} | |
}; | |
window.addEventListener("resize", resize); | |
setTimeout(() => resize); // push to next tick | |
return () => window.removeEventListener("resize", resize); | |
}); | |
useEffect(() => { | |
const resize = () => { | |
if (editorRef.current) { | |
editorRef.current.layout({ height: 0, width: 0 }); | |
editorRef.current.layout(); | |
} | |
}; | |
window.addEventListener("resize", resize); | |
setTimeout(() => resize); // push to next tick | |
return () => window.removeEventListener("resize", resize); | |
}, []); |
const beautifyCurrentQuery = () => { | ||
const beautified = query; | ||
setQuery(beautified); | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Implement query beautification.
The function currently doesn't perform any actual beautification. Consider using a TypeScript formatter like Prettier to properly format the query.
const beautifyCurrentQuery = () => {
- const beautified = query;
+ // Use Prettier to format TypeScript code
+ const beautified = prettier.format(query, {
+ parser: "typescript",
+ semi: true,
+ singleQuote: true,
+ });
setQuery(beautified);
};
📝 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.
const beautifyCurrentQuery = () => { | |
const beautified = query; | |
setQuery(beautified); | |
}; | |
const beautifyCurrentQuery = () => { | |
// Use Prettier to format TypeScript code | |
const beautified = prettier.format(query, { | |
parser: "typescript", | |
semi: true, | |
singleQuote: true, | |
}); | |
setQuery(beautified); | |
}; |
14d38f0
to
afec7f9
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 4
🔭 Outside diff range comments (1)
examples/example-vite-grpc-playground/tsconfig.node.json (1)
25-25
: Stray Line CheckIt appears there is a stray line with the number "25" at the end of the file. If this is unintentional, please remove it to ensure the file remains valid JSON/JSONC.
If you need help generating a fix, let me know.
♻️ Duplicate comments (18)
examples/example-vite-grpc-playground/src/components/ui/alert.tsx (1)
3-5
: 🛠️ Refactor suggestionUse union type for variant prop.
Instead of using a string type for
variant
, define specific allowed values using a union type for better type safety.+type AlertVariant = "default" | "destructive"; + interface AlertProps { - variant: string; + variant: AlertVariant; }examples/example-vite-grpc-playground/src/components/ts-executor.ts (2)
2-20
: 🛠️ Refactor suggestionAdd error handling for worker creation and message posting.
The worker creation and message posting could fail, but these scenarios aren't handled.
async function createWorker(code: string) { return new Promise((resolve, reject) => { + try { const worker = new Worker(new URL("./worker.ts", import.meta.url), { type: "module", }); + worker.onerror = (error) => { + reject(error); + worker.terminate(); + }; worker.onmessage = (event) => { if (event.data.type === "success") { resolve(event.data.result); } if (event.data.type === "error") { reject(event.data.error); } worker.terminate(); }; worker.postMessage({ code }); + } catch (error) { + reject(error); + } }); }
22-24
: 🛠️ Refactor suggestionReplace 'any' with a more specific return type.
Using
any
disables type checking. Consider defining an interface for the expected result type.+interface EvaluationResult { + // Define the expected structure of your result + [key: string]: unknown; +} -export async function evaluateUserInput(query: string): Promise<any> { +export async function evaluateUserInput(query: string): Promise<EvaluationResult> { return await createWorker(query); }🧰 Tools
🪛 Biome (1.9.4)
[error] 22-22: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
examples/example-vite-grpc-playground/src/components/ui/button.tsx (1)
3-8
: 🛠️ Refactor suggestionImprove type safety in ButtonProps interface.
The interface can be made more type-safe with the following improvements:
- Replace
any
with a more specific type for onClick- Make variant a union type of supported values
interface ButtonProps { - onClick: (...args: any) => any; + onClick: (...args: unknown[]) => void; disabled?: boolean; - variant?: string; + variant?: 'outline' | 'default'; className?: string; }🧰 Tools
🪛 Biome (1.9.4)
[error] 4-4: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 4-4: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
examples/example-vite-grpc-playground/src/components/query-history.tsx (2)
21-29
: 🛠️ Refactor suggestionImprove accessibility and semantic HTML structure.
The clickable div should be a button for better accessibility and semantic HTML.
- <div + <button key={index} className="p-2 hover:bg-zinc-800 rounded cursor-pointer group border border-zinc-800" - > - <div className="flex items-center justify-between"> - <div - className="flex-1 cursor-pointer" - onClick={() => onSelectQuery(item.query)} - > + onClick={() => onSelectQuery(item.query)} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + onSelectQuery(item.query); + } + }} + > + <div className="flex items-center justify-between"> + <div className="flex-1">🧰 Tools
🪛 Biome (1.9.4)
[error] 26-29: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
[error] 22-22: Avoid using the index of an array as key property in an element.
This is the source of the key value.
The order of the items may change, and this also affects performances and component state.
Check the React documentation.(lint/suspicious/noArrayIndexKey)
22-22
: 🛠️ Refactor suggestionAvoid using array index as key.
Using array index as key can lead to performance issues and bugs with state. Consider using a unique identifier from the query item.
- key={index} + key={`${item.timestamp}-${item.query.slice(0, 10)}`}🧰 Tools
🪛 Biome (1.9.4)
[error] 22-22: Avoid using the index of an array as key property in an element.
This is the source of the key value.
The order of the items may change, and this also affects performances and component state.
Check the React documentation.(lint/suspicious/noArrayIndexKey)
examples/example-vite-grpc-playground/src/components/schema-explorer.tsx (2)
38-46
: 🛠️ Refactor suggestionEnhance accessibility with keyboard navigation and ARIA attributes.
The clickable div should be a button with proper ARIA attributes for better accessibility.
- <div + <button className="flex items-center gap-2 p-2 cursor-pointer hover:bg-zinc-800" onClick={() => setExpandedTables((prev) => ({ ...prev, [tableName]: !prev[tableName], })) } + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + setExpandedTables((prev) => ({ + ...prev, + [tableName]: !prev[tableName], + })); + } + }} + aria-expanded={!!expandedTables[tableName]} + type="button"🧰 Tools
🪛 Biome (1.9.4)
[error] 38-46: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
38-46
: 🛠️ Refactor suggestionEnhance accessibility with keyboard navigation and ARIA attributes.
The clickable div should be a button with proper ARIA attributes for better accessibility.
- <div + <button className="flex items-center gap-2 p-2 cursor-pointer hover:bg-zinc-800" onClick={() => setExpandedTables((prev) => ({ ...prev, [tableName]: !prev[tableName], })) } + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + setExpandedTables((prev) => ({ + ...prev, + [tableName]: !prev[tableName], + })); + } + }} + aria-expanded={!!expandedTables[tableName]} + type="button"🧰 Tools
🪛 Biome (1.9.4)
[error] 38-46: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
examples/example-vite-grpc-playground/src/components/query-results.tsx (4)
4-10
: 🛠️ Refactor suggestionImprove type safety in QueryResultsProps interface.
The response type should be more specific than any.
interface QueryResultsProps { - response: any; + response: Record<string, unknown>[] | null; error: string | null; loading: boolean; executionTime: number | null; onDownload: () => void; }🧰 Tools
🪛 Biome (1.9.4)
[error] 5-5: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
47-76
: 🛠️ Refactor suggestionImprove type safety and performance in table rendering.
- Replace any with proper type
- Use meaningful keys instead of array indices
- {response.map((row: any, rowIndex: number) => ( + {response.map((row: Record<string, unknown>, rowIndex: number) => ( <tr - key={rowIndex} + key={Object.values(row).join('-')} className={ rowIndex % 2 === 0 ? "bg-zinc-900" : "bg-zinc-900/50" } > {Object.values(row).map( (value, colIndex) => ( <td - key={colIndex} + key={`${Object.keys(row)[colIndex]}-${value}`}🧰 Tools
🪛 Biome (1.9.4)
[error] 47-47: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 49-49: Avoid using the index of an array as key property in an element.
This is the source of the key value.
The order of the items may change, and this also affects performances and component state.
Check the React documentation.(lint/suspicious/noArrayIndexKey)
[error] 59-59: Avoid using the index of an array as key property in an element.
This is the source of the key value.
The order of the items may change, and this also affects performances and component state.
Check the React documentation.(lint/suspicious/noArrayIndexKey)
4-10
: 🛠️ Refactor suggestionImprove type safety in QueryResultsProps interface.
The response type should be more specific than any.
interface QueryResultsProps { - response: any; + response: Record<string, unknown>[] | null; error: string | null; loading: boolean; executionTime: number | null; onDownload: () => void; }🧰 Tools
🪛 Biome (1.9.4)
[error] 5-5: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
47-76
: 🛠️ Refactor suggestionImprove type safety and performance in table rendering.
- Replace any with proper type
- Use meaningful keys instead of array indices
- {response.map((row: any, rowIndex: number) => ( + {response.map((row: Record<string, unknown>, rowIndex: number) => ( <tr - key={rowIndex} + key={Object.values(row).join('-')} className={ rowIndex % 2 === 0 ? "bg-zinc-900" : "bg-zinc-900/50" } > {Object.values(row).map( (value, colIndex) => ( <td - key={colIndex} + key={`${Object.keys(row)[colIndex]}-${value}`}🧰 Tools
🪛 Biome (1.9.4)
[error] 47-47: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 49-49: Avoid using the index of an array as key property in an element.
This is the source of the key value.
The order of the items may change, and this also affects performances and component state.
Check the React documentation.(lint/suspicious/noArrayIndexKey)
[error] 59-59: Avoid using the index of an array as key property in an element.
This is the source of the key value.
The order of the items may change, and this also affects performances and component state.
Check the React documentation.(lint/suspicious/noArrayIndexKey)
examples/example-vite-grpc-playground/src/components/query-editor.tsx (6)
106-114
: 🛠️ Refactor suggestionDefine proper types for callback functions in QueryEditorProps.
Replace
any
types with proper TypeScript types to improve type safety and maintainability.interface QueryEditorProps { - setQuery: (...args: any) => any; - onExecute: (...args: any) => any; - onBeautify: (...args: any) => any; - onCopy: (...args: any) => any; + setQuery: (query: string) => void; + onExecute: () => void; + onBeautify: () => void; + onCopy: () => void; query: string; loading: boolean; copied: boolean; }🧰 Tools
🪛 Biome (1.9.4)
[error] 107-107: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 107-107: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 108-108: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 108-108: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 109-109: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 109-109: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 110-110: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 110-110: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
127-138
: 🛠️ Refactor suggestionAdd missing dependency array to resize effect.
The effect uses window event listeners but has no dependency array, causing it to run on every render.
- }); + }, []);
139-171
: 🛠️ Refactor suggestionAdd missing dependencies to useEffect hook.
The hook uses
query
andsetQuery
but they're not listed in the dependencies array.- }, []); + }, [query, setQuery]);🧰 Tools
🪛 Biome (1.9.4)
[error] 139-139: This hook does not specify all of its dependencies: query
This dependency is not specified in the hook dependency list.
Either include it or remove the dependency array
(lint/correctness/useExhaustiveDependencies)
[error] 139-139: This hook does not specify all of its dependencies: setQuery
This dependency is not specified in the hook dependency list.
Either include it or remove the dependency array
(lint/correctness/useExhaustiveDependencies)
106-114
: 🛠️ Refactor suggestionDefine proper types for callback functions in QueryEditorProps.
Replace
any
types with proper TypeScript types to improve type safety and maintainability.interface QueryEditorProps { - setQuery: (...args: any) => any; - onExecute: (...args: any) => any; - onBeautify: (...args: any) => any; - onCopy: (...args: any) => any; + setQuery: (query: string) => void; + onExecute: () => void; + onBeautify: () => void; + onCopy: () => void; query: string; loading: boolean; copied: boolean; }🧰 Tools
🪛 Biome (1.9.4)
[error] 107-107: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 107-107: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 108-108: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 108-108: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 109-109: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 109-109: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 110-110: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 110-110: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
127-138
: 🛠️ Refactor suggestionAdd missing dependency array to resize effect.
The effect uses window event listeners but has no dependency array, causing it to run on every render.
- }); + }, []);
139-171
: 🛠️ Refactor suggestionAdd missing dependencies to useEffect hook.
The hook uses
query
andsetQuery
but they're not listed in the dependencies array.- }, []); + }, [query, setQuery]);🧰 Tools
🪛 Biome (1.9.4)
[error] 139-139: This hook does not specify all of its dependencies: query
This dependency is not specified in the hook dependency list.
Either include it or remove the dependency array
(lint/correctness/useExhaustiveDependencies)
[error] 139-139: This hook does not specify all of its dependencies: setQuery
This dependency is not specified in the hook dependency list.
Either include it or remove the dependency array
(lint/correctness/useExhaustiveDependencies)
🧹 Nitpick comments (10)
examples/example-vite-grpc-playground/src/components/ui/card.tsx (1)
1-1
: Useimport type
for type imports.Since
PropsWithChildren
is only used as a type, useimport type
to ensure it's removed during compilation.-import { type PropsWithChildren } from "react"; +import type { PropsWithChildren } from "react";🧰 Tools
🪛 Biome (1.9.4)
[error] 1-1: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
examples/example-vite-grpc-playground/src/components/ui/alert.tsx (1)
1-1
: Useimport type
for type imports.Since
PropsWithChildren
is only used as a type, useimport type
to ensure it's removed during compilation.-import { type PropsWithChildren } from "react"; +import type { PropsWithChildren } from "react";🧰 Tools
🪛 Biome (1.9.4)
[error] 1-1: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
examples/example-vite-grpc-playground/src/components/ui/button.tsx (1)
1-1
: Useimport type
for type imports.Since
PropsWithChildren
is only used as a type, useimport type
to ensure it's removed during compilation.-import { type PropsWithChildren } from "react"; +import type { PropsWithChildren } from "react";🧰 Tools
🪛 Biome (1.9.4)
[error] 1-1: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
examples/example-vite-grpc-playground/src/components/query-editor.tsx (3)
42-52
: Replace forEach with for...of loop for better performance.Using forEach may lead to performance issues when working with large arrays.
- node.members.forEach((member) => { - if (ts.isMethodDeclaration(member) && member.name) { - const methodName = member.name.getText(sourceFile); - completionItems.push({ - label: methodName, - kind: monaco.languages.CompletionItemKind.Method, - insertText: methodName, - detail: `Method ${methodName} of class ${className}`, - }); - } - }); + for (const member of node.members) { + if (ts.isMethodDeclaration(member) && member.name) { + const methodName = member.name.getText(sourceFile); + completionItems.push({ + label: methodName, + kind: monaco.languages.CompletionItemKind.Method, + insertText: methodName, + detail: `Method ${methodName} of class ${className}`, + }); + } + }🧰 Tools
🪛 Biome (1.9.4)
[error] 42-52: Prefer for...of instead of forEach.
forEach may lead to performance issues when working with large arrays. When combined with functions like filter or map, this causes multiple iterations over the same type.
(lint/complexity/noForEach)
42-52
: Optimize performance with for...of loop.Replace forEach with for...of for better performance when iterating over node members.
- node.members.forEach((member) => { + for (const member of node.members) { if (ts.isMethodDeclaration(member) && member.name) { const methodName = member.name.getText(sourceFile); completionItems.push({ label: methodName, kind: monaco.languages.CompletionItemKind.Method, insertText: methodName, detail: `Method ${methodName} of class ${className}`, }); } - }); + }🧰 Tools
🪛 Biome (1.9.4)
[error] 42-52: Prefer for...of instead of forEach.
forEach may lead to performance issues when working with large arrays. When combined with functions like filter or map, this causes multiple iterations over the same type.
(lint/complexity/noForEach)
42-52
: Optimize performance by replacing forEach with for...of.Using forEach may lead to performance issues when working with large arrays.
- node.members.forEach((member) => { - if (ts.isMethodDeclaration(member) && member.name) { - const methodName = member.name.getText(sourceFile); - completionItems.push({ - label: methodName, - kind: monaco.languages.CompletionItemKind.Method, - insertText: methodName, - detail: `Method ${methodName} of class ${className}`, - }); - } - }); + for (const member of node.members) { + if (ts.isMethodDeclaration(member) && member.name) { + const methodName = member.name.getText(sourceFile); + completionItems.push({ + label: methodName, + kind: monaco.languages.CompletionItemKind.Method, + insertText: methodName, + detail: `Method ${methodName} of class ${className}`, + }); + } + }🧰 Tools
🪛 Biome (1.9.4)
[error] 42-52: Prefer for...of instead of forEach.
forEach may lead to performance issues when working with large arrays. When combined with functions like filter or map, this causes multiple iterations over the same type.
(lint/complexity/noForEach)
examples/example-vite-grpc-playground/src/App.tsx (3)
12-17
: Enhance the default query example.The welcome message could be more helpful by including a complete, working example query.
const DEFAULT_COMMENT = `// Welcome to Torii gRPC Playground! // This is a sandboxed environment. All you need is return the value you want. -// Try running a query like:`; +// Try running a query like this example:`; const DEFAULT_QUERY = `${DEFAULT_COMMENT} -return new ToriiQueryBuilder().build();`; +return new ToriiQueryBuilder() + .select(['position', 'player']) + .from('moves') + .where('game_id', '=', 1) + .build();`;
32-36
: Add error handling for localStorage operations.The localStorage access could fail due to various reasons (e.g., privacy mode, storage quota). Add try-catch for resilience.
const [queryHistory, setQueryHistory] = useState<QueryItem[]>(() => { // Load history from localStorage on init - const saved = localStorage.getItem("queryHistory"); - return saved ? JSON.parse(saved) : []; + try { + const saved = localStorage.getItem("queryHistory"); + return saved ? JSON.parse(saved) : []; + } catch (error) { + console.warn("Failed to load query history:", error); + return []; + } });
232-232
: Improve mobile responsiveness for card heights.Using viewport units (
vh
) directly can cause issues on mobile browsers due to dynamic toolbars. Consider using CSS custom properties with fallbacks.-<Card className="flex flex-col h-[calc(75vh-48px)]"> +<Card className="flex flex-col h-[calc(var(--vh, 1vh)*75-48px)]"> -<Card className="flex flex-col h-[75vh]"> +<Card className="flex flex-col h-[calc(var(--vh, 1vh)*75)]">Add this JavaScript to handle mobile viewport:
// Add to useEffect const setVH = () => { document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`); }; window.addEventListener('resize', setVH); setVH(); return () => window.removeEventListener('resize', setVH);Also applies to: 258-258
examples/example-vite-grpc-playground/src/main.tsx (1)
31-31
: Enhance error handling for main function.The current error handling only logs to console, which might not be sufficient for production. Consider adding proper error boundaries and error reporting.
-main().catch(console.error); +main().catch((error) => { + console.error('Failed to initialize application:', error); + // Consider adding error reporting service + // Consider showing a user-friendly error message + document.body.innerHTML = '<div class="error">Failed to initialize application. Please try again later.</div>'; +});
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
examples/example-vite-grpc-playground/public/vite.svg
is excluded by!**/*.svg
examples/example-vite-grpc-playground/src/assets/react.svg
is excluded by!**/*.svg
pnpm-lock.yaml
is excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (27)
biome.json
(1 hunks)examples/example-vite-grpc-playground/.gitignore
(1 hunks)examples/example-vite-grpc-playground/README.md
(1 hunks)examples/example-vite-grpc-playground/dojoConfig.ts
(1 hunks)examples/example-vite-grpc-playground/eslint.config.js
(1 hunks)examples/example-vite-grpc-playground/index.html
(1 hunks)examples/example-vite-grpc-playground/package.json
(1 hunks)examples/example-vite-grpc-playground/src/App.tsx
(1 hunks)examples/example-vite-grpc-playground/src/components/minimal-worker.ts
(1 hunks)examples/example-vite-grpc-playground/src/components/query-editor.tsx
(1 hunks)examples/example-vite-grpc-playground/src/components/query-history.tsx
(1 hunks)examples/example-vite-grpc-playground/src/components/query-results.tsx
(1 hunks)examples/example-vite-grpc-playground/src/components/schema-explorer.tsx
(1 hunks)examples/example-vite-grpc-playground/src/components/ts-executor.ts
(1 hunks)examples/example-vite-grpc-playground/src/components/ui/alert.tsx
(1 hunks)examples/example-vite-grpc-playground/src/components/ui/button.tsx
(1 hunks)examples/example-vite-grpc-playground/src/components/ui/card.tsx
(1 hunks)examples/example-vite-grpc-playground/src/components/worker.ts
(1 hunks)examples/example-vite-grpc-playground/src/index.css
(1 hunks)examples/example-vite-grpc-playground/src/main.tsx
(1 hunks)examples/example-vite-grpc-playground/src/vite-env.d.ts
(1 hunks)examples/example-vite-grpc-playground/tsconfig.app.json
(1 hunks)examples/example-vite-grpc-playground/tsconfig.json
(1 hunks)examples/example-vite-grpc-playground/tsconfig.node.json
(1 hunks)examples/example-vite-grpc-playground/vite.config.ts
(1 hunks)packages/sdk/package.json
(1 hunks)scripts/build-examples.sh
(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (15)
- examples/example-vite-grpc-playground/src/vite-env.d.ts
- scripts/build-examples.sh
- examples/example-vite-grpc-playground/tsconfig.json
- examples/example-vite-grpc-playground/src/index.css
- examples/example-vite-grpc-playground/eslint.config.js
- examples/example-vite-grpc-playground/src/components/minimal-worker.ts
- packages/sdk/package.json
- examples/example-vite-grpc-playground/.gitignore
- examples/example-vite-grpc-playground/dojoConfig.ts
- examples/example-vite-grpc-playground/README.md
- examples/example-vite-grpc-playground/src/components/worker.ts
- examples/example-vite-grpc-playground/vite.config.ts
- examples/example-vite-grpc-playground/index.html
- biome.json
- examples/example-vite-grpc-playground/package.json
👮 Files not reviewed due to content moderation or server errors (3)
- examples/example-vite-grpc-playground/src/components/schema-explorer.tsx
- examples/example-vite-grpc-playground/src/components/query-results.tsx
- examples/example-vite-grpc-playground/src/components/query-editor.tsx
🧰 Additional context used
🪛 Biome (1.9.4)
examples/example-vite-grpc-playground/src/components/schema-explorer.tsx
[error] 38-46: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
examples/example-vite-grpc-playground/src/components/query-results.tsx
[error] 5-5: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 47-47: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 49-49: Avoid using the index of an array as key property in an element.
This is the source of the key value.
The order of the items may change, and this also affects performances and component state.
Check the React documentation.
(lint/suspicious/noArrayIndexKey)
[error] 59-59: Avoid using the index of an array as key property in an element.
This is the source of the key value.
The order of the items may change, and this also affects performances and component state.
Check the React documentation.
(lint/suspicious/noArrayIndexKey)
examples/example-vite-grpc-playground/src/App.tsx
[error] 2-2: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.
(lint/style/useImportType)
[error] 5-5: Some named imports are only used as types.
This import is only used as a type.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Add inline type keywords.
(lint/style/useImportType)
[error] 6-6: Some named imports are only used as types.
This import is only used as a type.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Add inline type keywords.
(lint/style/useImportType)
[error] 9-9: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.
(lint/style/useImportType)
examples/example-vite-grpc-playground/src/components/query-editor.tsx
[error] 42-52: Prefer for...of instead of forEach.
forEach may lead to performance issues when working with large arrays. When combined with functions like filter or map, this causes multiple iterations over the same type.
(lint/complexity/noForEach)
[error] 107-107: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 107-107: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 108-108: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 108-108: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 109-109: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 109-109: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 110-110: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 110-110: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 139-139: This hook does not specify all of its dependencies: query
This dependency is not specified in the hook dependency list.
Either include it or remove the dependency array
(lint/correctness/useExhaustiveDependencies)
[error] 139-139: This hook does not specify all of its dependencies: setQuery
This dependency is not specified in the hook dependency list.
Either include it or remove the dependency array
(lint/correctness/useExhaustiveDependencies)
examples/example-vite-grpc-playground/src/components/query-history.tsx
[error] 26-29: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
[error] 22-22: Avoid using the index of an array as key property in an element.
This is the source of the key value.
The order of the items may change, and this also affects performances and component state.
Check the React documentation.
(lint/suspicious/noArrayIndexKey)
[error] 34-40: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a form
element. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
(lint/a11y/useButtonType)
examples/example-vite-grpc-playground/src/components/ts-executor.ts
[error] 22-22: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
examples/example-vite-grpc-playground/src/components/ui/alert.tsx
[error] 1-1: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.
(lint/style/useImportType)
examples/example-vite-grpc-playground/src/components/ui/button.tsx
[error] 4-4: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 4-4: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 1-1: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.
(lint/style/useImportType)
examples/example-vite-grpc-playground/src/components/ui/card.tsx
[error] 1-1: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.
(lint/style/useImportType)
examples/example-vite-grpc-playground/src/main.tsx
[error] 24-24: Forbidden non-null assertion.
(lint/style/noNonNullAssertion)
examples/example-vite-grpc-playground/tsconfig.app.json
[error] 10-10: JSON standard does not allow comments.
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 15-15: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 15-15: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 15-15: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 15-15: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-18: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 18-18: JSON standard does not allow comments.
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-24: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 25-25: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 25-25: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 25-25: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 25-26: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
examples/example-vite-grpc-playground/tsconfig.node.json
[error] 9-9: JSON standard does not allow comments.
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: JSON standard does not allow comments.
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 18-18: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 18-18: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 18-18: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 18-18: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-24: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: build
- GitHub Check: check
🔇 Additional comments (22)
examples/example-vite-grpc-playground/tsconfig.app.json (1)
1-27
: Overall File Review
The overall configuration options specified in this tsconfig file are well-structured and appropriate for a modern TypeScript project (targeting ESNext, using bundler mode, etc.). Once the above issues with comments are addressed, the file will fully comply with strict JSON parsing expectations and enhance its compatibility with tooling.🧰 Tools
🪛 Biome (1.9.4)
[error] 10-10: JSON standard does not allow comments.
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 15-15: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 15-15: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 15-15: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 15-15: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 16-18: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 18-18: JSON standard does not allow comments.
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 24-24: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 25-25: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 25-25: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 25-25: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 25-26: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
examples/example-vite-grpc-playground/tsconfig.node.json (4)
1-8
: Basic Compiler Options Configuration: Looks GoodThe basic compiler options (tsBuildInfoFile, target, lib, module, skipLibCheck) are set appropriately for your node configuration.
9-15
: Comments and Bundler Mode Options: Verify JSONC CompatibilityThe use of inline comments (e.g., /* Bundler mode */) in a JSON file may trigger issues with tools strictly enforcing the JSON standard. Since tsconfig files typically allow comments (JSONC), please confirm that your tooling supports this syntax. If not, consider removing these comments or renaming the file to use a supported extension (e.g., .jsonc).
🧰 Tools
🪛 Biome (1.9.4)
[error] 9-9: JSON standard does not allow comments.
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
16-22
: Comments and Linting Options: Verify JSONC CompatibilityAgain, the inline comment (/* Linting */) might cause issues with strict JSON parsers. As tsconfig files are generally parsed as JSONC within TypeScript tooling, ensure your development environment supports this. Additionally, the linting options themselves (strict, noUnusedLocals, etc.) look correctly configured.
🧰 Tools
🪛 Biome (1.9.4)
[error] 16-16: JSON standard does not allow comments.
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 18-18: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 18-18: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 18-18: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 18-18: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
23-24
: Include Configuration: Correct and FocusedThe inclusion of "vite.config.ts" is precise and aligns with the project structure for this example.
🧰 Tools
🪛 Biome (1.9.4)
[error] 23-23: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
[error] 23-24: End of file expected
Use an array for a sequence of values:
[1, 2]
(parse)
examples/example-vite-grpc-playground/src/components/ui/card.tsx (1)
3-14
: LGTM! Well-structured card component.The component is well-implemented with:
- Type-safe props interface
- Flexible styling through className prop
- Proper children handling
examples/example-vite-grpc-playground/src/components/ui/alert.tsx (1)
7-14
: LGTM! Clean alert component implementation.The component is well-implemented with:
- Clear conditional styling based on variant
- Proper children handling
- Good use of Tailwind CSS classes
examples/example-vite-grpc-playground/src/components/ui/button.tsx (1)
10-34
: LGTM! Well-structured button component.The component is well-implemented with:
- Good default prop values
- Clear conditional styling based on variant
- Proper accessibility attributes
- Flexible styling through className prop
examples/example-vite-grpc-playground/src/components/query-history.tsx (2)
1-11
: LGTM!The type and interface declarations are well-structured with clear property names and appropriate types.
13-17
: LGTM!The component declaration and props destructuring follow React best practices.
examples/example-vite-grpc-playground/src/App.tsx (2)
2-2
: Use import type for purely type-based imports.Some imports are only used as types. Converting them to
import type
can reduce bundle size.Also applies to: 5-6, 9-9
🧰 Tools
🪛 Biome (1.9.4)
[error] 2-2: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
90-93
: Implement query beautification.The function currently doesn't perform any actual beautification.
examples/example-vite-grpc-playground/src/main.tsx (2)
24-24
: Replace non-null assertion with proper error handling.Instead of using the non-null assertion operator (
!
), add proper error handling for when the root element is not found.- createRoot(document.getElementById("root")!).render( + const rootElement = document.getElementById("root"); + if (!rootElement) { + throw new Error("Failed to find root element"); + } + createRoot(rootElement).render(🧰 Tools
🪛 Biome (1.9.4)
[error] 24-24: Forbidden non-null assertion.
(lint/style/noNonNullAssertion)
6-6
: 💡 Verification agentI'll start by gathering evidence about the location of dojoConfig.ts relative to main.tsx:
Once the script runs, if the output indicates that dojoConfig.ts is located at:
examples/example-vite-grpc-playground/src/dojoConfig.tsThis confirms that the file is indeed in the same directory as main.tsx. The current import using the path
"../dojoConfig.ts"
incorrectly navigates one level up.Import Path Correction Needed for dojoConfig
- The dojoConfig.ts file is found in the same directory as main.tsx (i.e. examples/example-vite-grpc-playground/src).
- The current path
"../dojoConfig.ts"
attempts to import from a parent directory where dojoConfig.ts does not reside.- Please update the import to:
-import { dojoConfig } from "../dojoConfig.ts"; +import { dojoConfig } from "./dojoConfig.ts";examples/example-vite-grpc-playground/src/components/schema-explorer.tsx (3)
3-12
: LGTM!The type definitions are well-structured and provide clear typing for the schema data.
38-46
: Enhance accessibility with keyboard navigation and ARIA attributes.The clickable div should be a button with proper ARIA attributes for better accessibility.
🧰 Tools
🪛 Biome (1.9.4)
[error] 38-46: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
3-12
: LGTM!The type definitions are well-structured and provide good type safety.
examples/example-vite-grpc-playground/src/components/query-results.tsx (2)
4-10
: Improve type safety in QueryResultsProps interface.The response type should be more specific than any.
🧰 Tools
🪛 Biome (1.9.4)
[error] 5-5: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
47-76
: Improve type safety and performance in table rendering.
- Replace any with proper type
- Use meaningful keys instead of array indices
🧰 Tools
🪛 Biome (1.9.4)
[error] 47-47: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 49-49: Avoid using the index of an array as key property in an element.
This is the source of the key value.
The order of the items may change, and this also affects performances and component state.
Check the React documentation.(lint/suspicious/noArrayIndexKey)
[error] 59-59: Avoid using the index of an array as key property in an element.
This is the source of the key value.
The order of the items may change, and this also affects performances and component state.
Check the React documentation.(lint/suspicious/noArrayIndexKey)
examples/example-vite-grpc-playground/src/components/query-editor.tsx (3)
106-114
: Define proper types for callback functions in QueryEditorProps.Replace
any
types with proper TypeScript types to improve type safety and maintainability.🧰 Tools
🪛 Biome (1.9.4)
[error] 107-107: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 107-107: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 108-108: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 108-108: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 109-109: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 109-109: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 110-110: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 110-110: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
127-138
: Add missing dependency array to resize effect.The effect uses window event listeners but has no dependency array, causing it to run on every render.
139-171
: Add missing dependencies to useEffect hook.The hook uses
query
andsetQuery
but they're not listed in the dependencies array.🧰 Tools
🪛 Biome (1.9.4)
[error] 139-139: This hook does not specify all of its dependencies: query
This dependency is not specified in the hook dependency list.
Either include it or remove the dependency array
(lint/correctness/useExhaustiveDependencies)
[error] 139-139: This hook does not specify all of its dependencies: setQuery
This dependency is not specified in the hook dependency list.
Either include it or remove the dependency array
(lint/correctness/useExhaustiveDependencies)
"module": "ESNext", | ||
"skipLibCheck": true, | ||
|
||
/* Bundler mode */ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
Issue: Comments Not Allowed in Strict JSON
The comment "/* Bundler mode */" on line 10 is not permitted by the JSON standard. While TypeScript’s tsconfig files often allow comments, some tools (such as Biome in this case) expect strict JSON. Consider either removing the comment or renaming the file to use a .jsonc extension (and updating tooling accordingly) to signal that comments are allowed.
🧰 Tools
🪛 Biome (1.9.4)
[error] 10-10: JSON standard does not allow comments.
(parse)
"noEmit": true, | ||
"jsx": "react-jsx", | ||
|
||
/* Linting */ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
Issue: Comments Not Allowed in Strict JSON
Similarly, the comment "/* Linting */" on line 18 violates the JSON standard. Removing this comment or converting the file to JSONC (by renaming it) will resolve the static analysis errors.
🧰 Tools
🪛 Biome (1.9.4)
[error] 16-18: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 18-18: JSON standard does not allow comments.
(parse)
const response = await fetch( | ||
`http://localhost:8080/sql?${new URLSearchParams({ query: schemaQuery })}` | ||
); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
Make the server URL configurable.
Hardcoding the server URL to localhost makes the component less flexible for different environments.
+const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8080';
+
const response = await fetch(
- `http://localhost:8080/sql?${new URLSearchParams({ query: schemaQuery })}`
+ `${API_URL}/sql?${new URLSearchParams({ query: schemaQuery })}`
);
📝 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.
const response = await fetch( | |
`http://localhost:8080/sql?${new URLSearchParams({ query: schemaQuery })}` | |
); | |
const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8080'; | |
const response = await fetch( | |
`${API_URL}/sql?${new URLSearchParams({ query: schemaQuery })}` | |
); |
domain: { | ||
name: "WORLD_NAME", | ||
version: "1.0", | ||
chainId: "KATANA", | ||
revision: "1", | ||
}, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
Consider externalizing domain configuration.
The domain configuration contains hardcoded values that should be externalized to configuration:
- "WORLD_NAME" appears to be a placeholder
- Version, chainId, and revision are hardcoded
Consider moving these values to dojoConfig
or environment variables:
domain: {
- name: "WORLD_NAME",
- version: "1.0",
- chainId: "KATANA",
- revision: "1",
+ name: dojoConfig.domain.name,
+ version: dojoConfig.domain.version,
+ chainId: dojoConfig.domain.chainId,
+ revision: dojoConfig.domain.revision,
},
📝 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.
domain: { | |
name: "WORLD_NAME", | |
version: "1.0", | |
chainId: "KATANA", | |
revision: "1", | |
}, | |
domain: { | |
name: dojoConfig.domain.name, | |
version: dojoConfig.domain.version, | |
chainId: dojoConfig.domain.chainId, | |
revision: dojoConfig.domain.revision, | |
}, |
Closes #
Introduced changes
Checklist
Summary by CodeRabbit
New Features
Alert
,Button
,Card
,QueryEditor
,QueryResults
,QueryHistory
, andSchemaExplorer
.Documentation
Chores