Skip to content
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

Merged
merged 1 commit into from
Feb 8, 2025
Merged

feat: grpc playground #388

merged 1 commit into from
Feb 8, 2025

Conversation

MartianGreed
Copy link
Collaborator

@MartianGreed MartianGreed commented Feb 5, 2025

Closes #

Introduced changes

Checklist

  • Linked relevant issue
  • Updated relevant documentation
  • Added relevant tests
  • Add a dedicated CI job for new examples
  • Performed self-review of the code

Summary by CodeRabbit

  • New Features

    • Launched a new interactive playground featuring an intuitive query editor, execution engine, schema explorer, and responsive UI components.
    • Enhanced coding standards with improved formatting, linting, and editor integration for a more consistent experience.
    • Added support for TypeScript and React with a comprehensive configuration for ESLint and TypeScript projects.
    • Introduced new components including Alert, Button, Card, QueryEditor, QueryResults, QueryHistory, and SchemaExplorer.
  • Documentation

    • Introduced detailed setup instructions and guidance for using the new playground, ensuring users can quickly get started.
    • Added a README file outlining the project setup and ESLint configuration.
  • Chores

    • Updated build processes, dependency management, and project configurations to support the new features and streamline development workflows.
    • Introduced new configuration files for TypeScript and Vite to enhance project structure and build optimization.

Copy link

coderabbitai bot commented Feb 5, 2025

Walkthrough

This pull request introduces several new configuration and source files. A central configuration file (biome.json) is added to define formatting and linting rules. Additionally, a complete example project is created under an example-vite-grpc-playground directory that includes configuration files (ESLint, TypeScript, Vite), React components for a gRPC Playground (including query editor, history, and results), UI components, and web worker functionality using Dojo. Minor updates to the SDK package and build scripts are also included.

Changes

File(s) Change Summary
biome.json New configuration file defining formatting, linting, VCS, and file-handling settings for the project using Biome schema v1.9.4.
examples/example-vite-grpc-playground/(.gitignore, README.md, dojoConfig.ts, eslint.config.js, index.html, package.json) New example project template providing project documentation, dependency management, Dojo configuration, and ESLint setup for a React + TypeScript + Vite application.
examples/.../src/App.tsx Main React component for the gRPC Playground app, managing query execution, state, error handling, and UI interactions.
examples/.../src/components/(minimal-worker.ts, query-editor.tsx, query-history.tsx, query-results.tsx, schema-explorer.tsx, ts-executor.ts) New functional components for web worker handling, Monaco-based query editing, query history display, results presentation, schema exploration, and asynchronous code evaluation.
examples/.../src/components/ui/(alert.tsx, button.tsx, card.tsx) Introduction of new UI components that encapsulate alert, button, and card styling with defined interfaces.
examples/.../src/(index.css, main.tsx, vite-env.d.ts) New CSS file providing Tailwind CSS integration and custom styles; entry point (main.tsx) initializing the SDK and rendering the React app; Vite client reference added for TypeScript support.
examples/.../(tsconfig.app.json, tsconfig.json, tsconfig.node.json, vite.config.ts) New TypeScript and Vite configuration files to support modern ECMAScript, React JSX compilation, bundler settings, and project references.
packages/sdk/package.json Updated export section to include a new "./types" entry that exposes type definitions from ./dist/index.d.ts.
scripts/build-examples.sh Build script updated to include the new example-vite-grpc-playground directory in its examples list.

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
Loading
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
Loading

Possibly related PRs

  • Nodejs wasm #257: Adds configuration file creation using createDojoConfig and shares code-level functionality with dojoConfig.ts.

Poem

Hop along, dear coder, in fields of fresh new code,
I’m a bunny with bright ideas down every winding road.
From formatting to workers, each file brings a smile,
New features twirl like carrots, making woes worthwhile.
With a twitch of my nose and a skip in my beat,
I celebrate these changes with joy so sweet!
🥕🐇 Happy coding, now hop to the beat!

✨ Finishing Touches
  • 📝 Generate Docstrings (Beta)

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?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link

@coderabbitai coderabbitai bot left a 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 beautification

The 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: Use import type for type-only imports.

Since PropsWithChildren is only used as a type, use the import 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.

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: Use import type for type-only imports.

Since PropsWithChildren is only used as a type, use the import 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 security
  • react/jsx-no-target-blank for security
  • react/jsx-key for React best practices
         rules: {
             ...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

📥 Commits

Reviewing files that changed from the base of the PR and between 750229a and 537f4d9.

⛔ 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: LGTM

This 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 the examples 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 new biome.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
The README.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, and require) 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:

  1. Adding other common Node.js built-ins as external dependencies
  2. 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 grpc

Length 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.

Comment on lines +22 to +24
export async function evaluateUserInput(query: string): Promise<any> {
return await createWorker(query);
}
Copy link

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.

Suggested change
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)

Comment on lines +2 to +20
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 });
});
}
Copy link

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.

Suggested change
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);
}
});
}

Comment on lines +10 to +28
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 });
Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue

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:

  1. 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));
}
  1. 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";
Copy link

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)

Comment on lines +3 to +5
interface AlertProps {
variant: string;
}
Copy link

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.

Suggested change
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}
Copy link

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.

Suggested change
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)

Comment on lines +38 to +46
<div
className="flex items-center gap-2 p-2 cursor-pointer hover:bg-zinc-800"
onClick={() =>
setExpandedTables((prev) => ({
...prev,
[tableName]: !prev[tableName],
}))
}
>
Copy link

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.

Suggested change
<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)

Comment on lines +4 to +10
interface QueryResultsProps {
response: any;
error: string | null;
loading: boolean;
executionTime: number | null;
onDownload: () => void;
}
Copy link

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.

Suggested change
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)

Comment on lines +106 to +114
interface QueryEditorProps {
setQuery: (...args: any) => any;
onExecute: (...args: any) => any;
onBeautify: (...args: any) => any;
onCopy: (...args: any) => any;
query: string;
loading: boolean;
copied: boolean;
}
Copy link

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.

Suggested change
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)

Comment on lines +139 to +171
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();
}
};
}, []);
Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue

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.

Suggested change
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)

Copy link

@coderabbitai coderabbitai bot left a 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 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;
 }
examples/example-vite-grpc-playground/src/components/ts-executor.ts (2)

2-20: 🛠️ 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.

 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 suggestion

Replace '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 suggestion

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)

🧹 Nitpick comments (11)
examples/example-vite-grpc-playground/src/components/ui/card.tsx (2)

1-1: Use import type for type-only imports.

Since PropsWithChildren is only used as a type, use the import 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: Use import type for type-only imports.

Since PropsWithChildren is only used as a type, use the import 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

📥 Commits

Reviewing files that changed from the base of the PR and between 537f4d9 and 14d38f0.

⛔ 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 for tsBuildInfoFile, target, lib, module, and skipLibCheck) 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 suggestion

Improve type safety in ButtonProps interface.

The interface can be made more type-safe by:

  1. Using a more specific type for onClick
  2. 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 suggestion

Improve 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 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"

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 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;
 }

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 and setQuery 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)

Comment on lines +47 to +76
{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>
))}
Copy link

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.

  1. Replace any with proper type
  2. 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.

Suggested change
{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)

Comment on lines +127 to +138
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);
});

Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue

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.

Suggested change
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);
}, []);

Comment on lines +90 to +93
const beautifyCurrentQuery = () => {
const beautified = query;
setQuery(beautified);
};
Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue

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.

Suggested change
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);
};

Copy link

@coderabbitai coderabbitai bot left a 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 Check

It 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 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;
 }
examples/example-vite-grpc-playground/src/components/ts-executor.ts (2)

2-20: 🛠️ Refactor suggestion

Add 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 suggestion

Replace '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 suggestion

Improve type safety in ButtonProps interface.

The interface can be made more type-safe with the following improvements:

  1. Replace any with a more specific type for onClick
  2. 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 suggestion

Improve 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 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)}`}
🧰 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 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"
🧰 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 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"
🧰 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 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;
 }
🧰 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 suggestion

Improve type safety and performance in table rendering.

  1. Replace any with proper type
  2. 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 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;
 }
🧰 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 suggestion

Improve type safety and performance in table rendering.

  1. Replace any with proper type
  2. 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 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;
 }
🧰 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 suggestion

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: 🛠️ Refactor suggestion

Add missing dependencies to useEffect hook.

The hook uses query and setQuery 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 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;
 }
🧰 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 suggestion

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: 🛠️ Refactor suggestion

Add missing dependencies to useEffect hook.

The hook uses query and setQuery 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: Use import type for type imports.

Since PropsWithChildren is only used as a type, use import 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: Use import type for type imports.

Since PropsWithChildren is only used as a type, use import 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: Use import type for type imports.

Since PropsWithChildren is only used as a type, use import 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

📥 Commits

Reviewing files that changed from the base of the PR and between 14d38f0 and afec7f9.

⛔ 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 Good

The basic compiler options (tsBuildInfoFile, target, lib, module, skipLibCheck) are set appropriately for your node configuration.


9-15: Comments and Bundler Mode Options: Verify JSONC Compatibility

The 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 Compatibility

Again, 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 Focused

The 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 agent

I'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.ts

This 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.

  1. Replace any with proper type
  2. 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 and setQuery 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 */
Copy link

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

⚠️ Potential issue

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 */
Copy link

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

⚠️ Potential issue

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)

Comment on lines +60 to +62
const response = await fetch(
`http://localhost:8080/sql?${new URLSearchParams({ query: schemaQuery })}`
);
Copy link

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.

Suggested change
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 })}`
);

Comment on lines +16 to +21
domain: {
name: "WORLD_NAME",
version: "1.0",
chainId: "KATANA",
revision: "1",
},
Copy link

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.

Suggested change
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,
},

@MartianGreed MartianGreed merged commit c3ae656 into main Feb 8, 2025
6 checks passed
@MartianGreed MartianGreed deleted the feat/grpc-playground branch February 8, 2025 15:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant