feat: add sql example

dojoengine · Jan 8, 2025 · 115f5e3 · 115f5e3
1 parent e558a58
commit 115f5e3
Show file tree

Hide file tree

Showing 49 changed files with 4,328 additions and 258 deletions.
diff --git a/examples/example-vite-react-sql/.gitignore b/examples/example-vite-react-sql/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/example-vite-react-sql/README.md b/examples/example-vite-react-sql/README.md
@@ -0,0 +1,50 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+    languageOptions: {
+        // other options...
+        parserOptions: {
+            project: ["./tsconfig.node.json", "./tsconfig.app.json"],
+            tsconfigRootDir: import.meta.dirname,
+        },
+    },
+});
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from "eslint-plugin-react";
+
+export default tseslint.config({
+    // Set the react version
+    settings: { react: { version: "18.3" } },
+    plugins: {
+        // Add the react plugin
+        react,
+    },
+    rules: {
+        // other rules...
+        // Enable its recommended rules
+        ...react.configs.recommended.rules,
+        ...react.configs["jsx-runtime"].rules,
+    },
+});
+```
diff --git a/examples/example-vite-react-sql/components.json b/examples/example-vite-react-sql/components.json
@@ -0,0 +1,21 @@
+{
+    "$schema": "https://ui.shadcn.com/schema.json",
+    "style": "new-york",
+    "rsc": false,
+    "tsx": true,
+    "tailwind": {
+        "config": "tailwind.config.ts",
+        "css": "src/index.css",
+        "baseColor": "neutral",
+        "cssVariables": true,
+        "prefix": ""
+    },
+    "aliases": {
+        "components": "@/components",
+        "utils": "@/lib/utils",
+        "ui": "@/components/ui",
+        "lib": "@/lib",
+        "hooks": "@/hooks"
+    },
+    "iconLibrary": "lucide"
+}
diff --git a/examples/example-vite-react-sql/dojoConfig.ts b/examples/example-vite-react-sql/dojoConfig.ts
@@ -0,0 +1,7 @@
+import { createDojoConfig } from "@dojoengine/core";
+
+import manifest from "../../worlds/dojo-starter/manifest_dev.json";
+
+export const dojoConfig = createDojoConfig({
+    manifest,
+});
diff --git a/examples/example-vite-react-sql/eslint.config.js b/examples/example-vite-react-sql/eslint.config.js
@@ -0,0 +1,28 @@
+import js from "@eslint/js";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+    { ignores: ["dist"] },
+    {
+        extends: [js.configs.recommended, ...tseslint.configs.recommended],
+        files: ["**/*.{ts,tsx}"],
+        languageOptions: {
+            ecmaVersion: 2020,
+            globals: globals.browser,
+        },
+        plugins: {
+            "react-hooks": reactHooks,
+            "react-refresh": reactRefresh,
+        },
+        rules: {
+            ...reactHooks.configs.recommended.rules,
+            "react-refresh/only-export-components": [
+                "warn",
+                { allowConstantExport: true },
+            ],
+        },
+    }
+);
diff --git a/examples/example-vite-react-sql/index.html b/examples/example-vite-react-sql/index.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <script>
+            let theme = localStorage.getItem("dojo-react-sql-theme");
+            if (!theme)
+                theme = window.matchMedia("(prefers-color-scheme: dark)")
+                    .matches
+                    ? "dark"
+                    : "light";
+            document.documentElement.classList.toggle("dark", theme === "dark");
+        </script>
+        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Vite + React + TS</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
+</html>
diff --git a/examples/example-vite-react-sql/package.json b/examples/example-vite-react-sql/package.json
@@ -0,0 +1,61 @@
+{
+    "name": "example-vite-react-sql",
+    "version": "1.0.0",
+    "description": "",
+    "main": "index.js",
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc -b && vite build",
+        "lint": "eslint .",
+        "preview": "vite preview"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "ISC",
+    "devDependencies": {
+        "@tanstack/eslint-plugin-query": "^5.62.16",
+        "@tanstack/router-devtools": "^1.95.1",
+        "@tanstack/router-plugin": "^1.95.1",
+        "@types/node": "^22.10.5",
+        "@types/react": "^18.3.18",
+        "@types/react-dom": "^18.3.5",
+        "@types/uuid": "^10.0.0",
+        "@vitejs/plugin-react": "^4.3.4",
+        "autoprefixer": "^10.4.20",
+        "drizzle-kit": "^0.30.1",
+        "postcss": "^8.4.49",
+        "tailwindcss": "^3.4.17",
+        "vite": "^6.0.7",
+        "vite-plugin-top-level-await": "^1.4.4",
+        "vite-plugin-wasm": "^3.4.1"
+    },
+    "dependencies": {
+        "@dojoengine/core": "workspace:*",
+        "@dojoengine/predeployed-connector": "workspace:*",
+        "@dojoengine/sdk": "workspace:*",
+        "@dojoengine/torii-client": "workspace:*",
+        "@dojoengine/utils": "workspace:*",
+        "@libsql/client": "^0.14.0",
+        "@radix-ui/react-accordion": "^1.2.2",
+        "@radix-ui/react-dropdown-menu": "^2.1.4",
+        "@radix-ui/react-icons": "^1.3.2",
+        "@radix-ui/react-popover": "^1.1.4",
+        "@radix-ui/react-slot": "^1.1.1",
+        "@starknet-react/chains": "catalog:",
+        "@starknet-react/core": "catalog:",
+        "@tanstack/react-query": "^5.62.16",
+        "@tanstack/react-router": "^1.95.1",
+        "axios": "^1.7.9",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "drizzle-orm": "^0.38.3",
+        "lucide-react": "^0.469.0",
+        "next-themes": "^0.4.4",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "starknet": "catalog:",
+        "tailwind-merge": "^2.6.0",
+        "tailwindcss-animate": "^1.0.7",
+        "uuid": "^10.0.0"
+    }
+}
diff --git a/examples/example-vite-react-sql/postcss.config.js b/examples/example-vite-react-sql/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};
diff --git a/examples/example-vite-react-sql/src/components/Documentation.tsx b/examples/example-vite-react-sql/src/components/Documentation.tsx
@@ -0,0 +1,149 @@
+export function Documentation() {
+    return (
+        <div className="documentation">
+            <h2>Torii SQL Endpoint Documentation</h2>
+
+            <section>
+                <h3>Why creating an sql endpoint ?</h3>
+                <p>
+                    Because Torii already provides a fully featured ECS query
+                    system (grpc & graphql) to retrieve your world state, SQL
+                    endpoint is not meant to vbe used as a state query system.
+                </p>
+                <p>
+                    We suggest you to use sql endpoint as a sidecar query tool
+                    to get those aggregation queries that would be complicated
+                    to get with grpc
+                </p>
+
+                <div className="endpoint">
+                    <h4>GET /sql</h4>
+                    <p>Execute SQL queries against torii db.</p>
+
+                    <h5>Example Usage</h5>
+                    <pre>
+                        {`fetch(\`\$\{process.env.TORII_URL\}\`/sql?' + 
+new URLSearchParams({ q: "SELECT name from contracts", }))`}
+                    </pre>
+                </div>
+
+                <div className="endpoint">
+                    <h4>POST /sql</h4>
+                    <p>Execute SQL queries against torii db.</p>
+
+                    <h5>Example Usage</h5>
+                    <pre>
+                        {`fetch(\`\$\{process.env.TORII_URL\}\`/sql', {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: "SELECT name from contracts",
+}))`}
+                    </pre>
+                </div>
+                <div className="endpoint">
+                    <h4>Response</h4>
+                    <p>
+                        Torii will always return data you've queried in a JSON
+                        formatted object
+                    </p>
+
+                    <h5>Example</h5>
+                    <pre>
+                        {`SELECT 
+        m.name as table_name,
+        p.name as column_name,
+        p.type as data_type,
+        p."notnull" as is_nullable,
+        p.pk as is_primary_key
+    FROM sqlite_master m
+    JOIN pragma_table_info(m.name) p
+    WHERE m.type = 'table'
+    AND m.name NOT LIKE 'sqlite_%'
+    ORDER BY m.name, p.cid;
+  `}
+                    </pre>
+                    <h5>JSON Response</h5>
+                    <pre>
+                        {`
+[
+	{
+		"column_name": "version",
+		"data_type": "BIGINT",
+		"is_nullable": 0,
+		"is_primary_key": 1,
+		"table_name": "_sqlx_migrations"
+	},
+	{
+		"column_name": "description",
+		"data_type": "TEXT",
+		"is_nullable": 1,
+		"is_primary_key": 0,
+		"table_name": "_sqlx_migrations"
+	},
+	{
+		"column_name": "installed_on",
+		"data_type": "TIMESTAMP",
+		"is_nullable": 1,
+		"is_primary_key": 0,
+		"table_name": "_sqlx_migrations"
+	},
+...
+]
+`}
+                    </pre>
+                </div>
+
+                <div className="notes">
+                    <h4>Important Notes:</h4>
+                    <ul>
+                        <li>
+                            Torii only exposes a way to use custom queries, NOT
+                            db handle
+                        </li>
+                        <li>
+                            Db access is <b>read only</b>
+                        </li>
+                        <li>
+                            For now Torii relies on sqlite, double check if
+                            sqlite supports your queries.
+                        </li>
+                    </ul>
+                </div>
+            </section>
+
+            <style>{`
+        .documentation {
+          max-width: 800px;
+          margin: 20px auto;
+          padding: 20px;
+          font-family: system-ui, -apple-system, sans-serif;
+        }
+        .endpoint {
+          background: #f5f5f5;
+          padding: 20px;
+          border-radius: 8px;
+          margin: 20px 0;
+        }
+        pre {
+          background: #2d2d2d;
+          color: #fff;
+          padding: 15px;
+          border-radius: 4px;
+          overflow-x: auto;
+        }
+        code {
+          background: #eee;
+          padding: 2px 6px;
+          border-radius: 4px;
+        }
+        .notes {
+          border-left: 4px solid #ffd700;
+          padding-left: 20px;
+          margin: 20px 0;
+        }
+      `}</style>
+        </div>
+    );
+}