Skip to content

Commit 83ec92c

Browse files
miguelgrinbergmiguelgrinberg
committed
demo app logic
1 parent 4ac5adb commit 83ec92c

8 files changed

+146
-60
lines changed

‎demo/README.md

+3-49
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,4 @@
1-
# React + TypeScript + Vite
1+
# Request Converter Demo
22

3-
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4-
5-
Currently, two official plugins are available:
6-
7-
- [@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
8-
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9-
10-
## Expanding the ESLint configuration
11-
12-
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
13-
14-
- Configure the top-level `parserOptions` property like this:
15-
16-
```js
17-
export default tseslint.config({
18-
languageOptions: {
19-
// other options...
20-
parserOptions: {
21-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
22-
tsconfigRootDir: import.meta.dirname,
23-
},
24-
},
25-
})
26-
```
27-
28-
- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
29-
- Optionally add `...tseslint.configs.stylisticTypeChecked`
30-
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
31-
32-
```js
33-
// eslint.config.js
34-
import react from 'eslint-plugin-react'
35-
36-
export default tseslint.config({
37-
// Set the react version
38-
settings: { react: { version: '18.3' } },
39-
plugins: {
40-
// Add the react plugin
41-
react,
42-
},
43-
rules: {
44-
// other rules...
45-
// Enable its recommended rules
46-
...react.configs.recommended.rules,
47-
...react.configs['jsx-runtime'].rules,
48-
},
49-
})
50-
```
3+
This is a small React application that demonstrates how to work with the
4+
Request Converter library.

‎demo/index.html

+4-2
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
65
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite + React + TS</title>
6+
<link rel="preconnect" href="https://fonts.googleapis.com">
7+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
8+
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
9+
<title>Elasticsearch Request Converter Demo</title>
810
</head>
911
<body>
1012
<div id="root"></div>

‎demo/package.json

+7-2
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,12 @@
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13+
"@elastic/request-converter": "file:..",
14+
"bootstrap": "^5.3.3",
1315
"react": "^19.0.0",
14-
"react-dom": "^19.0.0"
16+
"react-bootstrap": "^2.10.9",
17+
"react-dom": "^19.0.0",
18+
"react-syntax-highlighter": "^15.6.1"
1519
},
1620
"devDependencies": {
1721
"@eslint/js": "^9.19.0",
@@ -25,6 +29,7 @@
2529
"globals": "^15.14.0",
2630
"typescript": "~5.7.2",
2731
"typescript-eslint": "^8.22.0",
28-
"vite": "^6.1.0"
32+
"vite": "^6.1.0",
33+
"vite-plugin-node-polyfills": "^0.23.0"
2934
}
3035
}

‎demo/src/App.tsx

+78-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,83 @@
1+
import React, { useState, useEffect } from 'react';
2+
import Container from 'react-bootstrap/Container';
3+
import Row from 'react-bootstrap/Row';
4+
import Col from 'react-bootstrap/Col';
5+
import Stack from 'react-bootstrap/Stack';
6+
import Form from 'react-bootstrap/Form';
7+
import SyntaxHighlighter from 'react-syntax-highlighter';
8+
import { atomOneLight } from 'react-syntax-highlighter/dist/esm/styles/hljs';
9+
import { convertRequests, loadSchema, listFormats } from "@elastic/request-converter";
10+
111
function App() {
12+
const formats = listFormats().sort();
13+
const [hasSchema, setHasSchema] = useState(false);
14+
const [source, setSource] = useState('GET /_search');
15+
const [code, setCode] = useState('Loading...');
16+
const [language, setLanguage] = useState(formats[0]);
17+
18+
useEffect(() => {
19+
document.getElementById("source").focus();
20+
}, []);
21+
22+
useEffect(() => {
23+
(async () => {
24+
const response = await fetch('https://raw.githubusercontent.com/elastic/elasticsearch-specification/refs/heads/main/output/schema/schema.json');
25+
if (response.ok) {
26+
loadSchema(await response.json());
27+
setHasSchema(true);
28+
}
29+
})();
30+
}, []);
31+
32+
useEffect(() => {
33+
(async () => {
34+
if (hasSchema) {
35+
let c: string = "";
36+
try {
37+
c = await convertRequests(source, language, {complete: true, printResponse: true}) as string;
38+
}
39+
catch (err) {
40+
}
41+
if (c) {
42+
setCode(c as string);
43+
}
44+
}
45+
})();
46+
}, [hasSchema, source, language]);
47+
48+
const onRequestChanged = (ev: React.ChangeEventHandler<HTMLSelectElement>) => {
49+
setSource(ev.target.value);
50+
ev.target.style.height = ev.target.scrollHeight + "px";
51+
};
52+
253
return (
3-
<p>App</p>
54+
<Container id="main-container">
55+
<h1>Elasticsearch Request Converter Demo</h1>
56+
<Row>
57+
<Col className="col-6">
58+
Source Request
59+
</Col>
60+
<Col className="col-6">
61+
<Stack direction="horizontal" className="heading">
62+
<p>Converted&nbsp;Code</p>
63+
<p className="spacer"></p>
64+
<Form.Select id="language-choice" size="sm" defaultValue={language} onChange={ev => setLanguage(ev.currentTarget.value)}>
65+
{formats.map(fmt => <option key={fmt} value={fmt}>{fmt}</option>)}
66+
</Form.Select>
67+
</Stack>
68+
</Col>
69+
</Row>
70+
<Form id="main-form">
71+
<Row id="main-row">
72+
<Col className="col-6">
73+
<Form.Control as="textarea" id="source" value={source} onChange={onRequestChanged} />
74+
</Col>
75+
<Col className="col-6">
76+
<SyntaxHighlighter wrapLongLines={true} language={language} style={atomOneLight}>{code}</SyntaxHighlighter>
77+
</Col>
78+
</Row>
79+
</Form>
80+
</Container>
481
)
582
}
683

‎demo/src/index.css

+43
Original file line numberDiff line numberDiff line change
@@ -1 +1,44 @@
1+
html, body, #root {
2+
margin-top: 0;
3+
margin-bottom: 0;
4+
height: 100%;
5+
min-height: 100%;
6+
}
7+
8+
body {
9+
color: #444;
10+
}
11+
12+
h1 {
13+
font-size: 2em;
14+
font-weight: 1000;
15+
color: #888;
16+
}
17+
18+
textarea.form-control {
19+
resize: none;
20+
min-height: 200px;
21+
font-family: monospace;
22+
font-size: 14px;
23+
}
24+
25+
.heading {
26+
align-items: baseline;
27+
}
28+
29+
.spacer {
30+
width: 100%;
31+
}
32+
33+
#language-choice {
34+
width: 150px;
35+
}
36+
37+
pre {
38+
margin-top: 10px;
39+
padding: 5px 5px 10px 5px;
40+
overflow: hidden;
41+
white-space: pre-wrap;
42+
}
43+
144

‎demo/src/main.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import { StrictMode } from 'react'
2-
import { createRoot } from 'react-dom/client'
3-
import './index.css'
4-
import App from './App.tsx'
1+
import { StrictMode } from 'react';
2+
import { createRoot } from 'react-dom/client';
3+
import 'bootstrap/dist/css/bootstrap.min.css';
4+
import './index.css';
5+
import App from './App.tsx';
56

67
createRoot(document.getElementById('root')!).render(
78
<StrictMode>

‎demo/vite.config.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
import { defineConfig } from 'vite'
22
import react from '@vitejs/plugin-react'
3+
import { nodePolyfills } from 'vite-plugin-node-polyfills';
34

45
// https://vite.dev/config/
56
export default defineConfig({
6-
plugins: [react()],
7+
plugins: [react(), nodePolyfills({ include: ['url'] })],
8+
optimizeDeps: {
9+
include: ['@elastic/request-converter'],
10+
},
711
})

‎eslint.config.mjs

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@ import tseslint from "typescript-eslint";
66
export default tseslint.config(
77
eslint.configs.recommended,
88
...tseslint.configs.recommended,
9-
{ignores: ["**/.venv/", "**/es-client/", "tests/wasm"]},
9+
{ignores: ["**/.venv/", "**/es-client/", "**/templates.js", "tests/wasm"]},
1010
{languageOptions: {globals: {require: true}}},
1111
);

0 commit comments

Comments
 (0)