Skip to content

Commit 7eb52c7

Browse files
lovasoalovasoa
committed
Initial commit
1 parent 1718059 commit 7eb52c7

File tree

8 files changed

+15011
-0
lines changed

8 files changed

+15011
-0
lines changed

‎.gitignore‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.idea/
2+
.vscode/
3+
node_modules/
4+
build
5+
.DS_Store
6+
*.tgz
7+
my-app*
8+
template/src/__tests__/__snapshots__/
9+
lerna-debug.log
10+
npm-debug.log*
11+
yarn-debug.log*
12+
yarn-error.log*
13+
/.changelog
14+
.npm/
15+
yarn.lock

‎config-overrides.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
const CopyPlugin = require('copy-webpack-plugin');
2+
3+
module.exports = function override(config, env) {
4+
config.plugins.push(new CopyPlugin([
5+
{ from: 'node_modules/sql.js/dist/sql-wasm.wasm', to: 'static/js/'},
6+
]));
7+
return config;
8+
}

‎package-lock.json‎

Lines changed: 14811 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "react-sqljs-demo",
3+
"version": "1.0.0",
4+
"description": "sql.js + react example starter project",
5+
"keywords": [
6+
"react",
7+
"starter"
8+
],
9+
"main": "src/index.js",
10+
"dependencies": {
11+
"react": "16.12.0",
12+
"react-dom": "16.12.0",
13+
"react-scripts": "^3.4.0",
14+
"sql.js": "^1.2.1"
15+
},
16+
"devDependencies": {
17+
"copy-webpack-plugin": "^5.1.1",
18+
"react-app-rewired": "^2.1.5",
19+
"typescript": "3.3.3"
20+
},
21+
"scripts": {
22+
"start": "react-app-rewired start",
23+
"build": "react-app-rewired build",
24+
"test": "react-app-rewired test --env=jsdom",
25+
"eject": "react-scripts eject"
26+
},
27+
"browserslist": [
28+
">0.2%",
29+
"not dead",
30+
"not ie <= 11",
31+
"not op_mini all"
32+
]
33+
}

‎public/index.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7+
<meta name="theme-color" content="#000000">
8+
<!--
9+
manifest.json provides metadata used when your web app is added to the
10+
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
11+
-->
12+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
13+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
14+
<!--
15+
Notice the use of %PUBLIC_URL% in the tags above.
16+
It will be replaced with the URL of the `public` folder during the build.
17+
Only files inside the `public` folder can be referenced from the HTML.
18+
19+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
20+
work correctly both with client-side routing and a non-root public URL.
21+
Learn how to configure a non-root public URL by running `npm run build`.
22+
-->
23+
<title>React App</title>
24+
</head>
25+
26+
<body>
27+
<noscript>
28+
You need to enable JavaScript to run this app.
29+
</noscript>
30+
<div id="root"></div>
31+
<!--
32+
This HTML file is a template.
33+
If you open it directly in the browser, you will see an empty page.
34+
35+
You can add webfonts, meta tags, or analytics to this file.
36+
The build step will place the bundled scripts into the <body> tag.
37+
38+
To begin the development, run `npm start` or `yarn start`.
39+
To create a production bundle, use `npm run build` or `yarn build`.
40+
-->
41+
</body>
42+
43+
</html>

‎src/App.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import React from "react";
2+
import "./styles.css";
3+
import initSqlJs from "sql.js";
4+
5+
6+
export default class App extends React.Component {
7+
constructor() {
8+
super();
9+
this.state = { db: null, err: null, result: null }
10+
}
11+
componentDidMount() {
12+
initSqlJs()
13+
.then(SQL => this.setState({ db: new SQL.Database() }))
14+
.catch(err => this.setState({ err }));
15+
}
16+
exec(sql) {
17+
let result = null, err = null;
18+
try {
19+
result = this.state.db.exec(sql);
20+
} catch (e) {
21+
err = e
22+
}
23+
this.setState({ result, err })
24+
}
25+
renderResult({ columns, values }) {
26+
27+
return <table>
28+
<thead>
29+
<tr>
30+
{columns.map(c => <td>{c}</td>)}
31+
</tr>
32+
</thead>
33+
<tbody>
34+
{values.map(row =>
35+
<tr>{row.map(v => <td>{v}</td>)}</tr>
36+
)}
37+
</tbody>
38+
</table>
39+
}
40+
render() {
41+
let { db, err, result } = this.state;
42+
if (!db) return <pre>Loading...</pre>;
43+
return (
44+
<div className="App">
45+
<h1>React SQL interpreter</h1>
46+
<textarea
47+
onChange={e => this.exec(e.target.value)}
48+
placeholder="Enter some SQL. No inpiration ? Try “select sqlite_version()”"></textarea>
49+
<pre className="error">{(err || "").toString()}</pre>
50+
<pre>{result ? result.map(this.renderResult) : ""}</pre>
51+
</div>
52+
);
53+
}
54+
}

‎src/index.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
4+
import App from "./App";
5+
6+
const rootElement = document.getElementById("root");
7+
ReactDOM.render(
8+
<React.StrictMode>
9+
<App />
10+
</React.StrictMode>,
11+
rootElement
12+
);

‎src/styles.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
.App {
2+
font-family: sans-serif;
3+
font-size: 1.5em;
4+
}
5+
6+
textarea{
7+
font-size: 1.1em;
8+
width: 70%;
9+
display: block;
10+
margin:auto;
11+
}
12+
13+
table{
14+
border: 1px solid #1C6EA4;
15+
background-color: #EEEEEE;
16+
width: 40%;
17+
margin: 1.5em auto;
18+
text-align: left;
19+
border-collapse: collapse;
20+
text-align: right;
21+
}
22+
23+
thead{
24+
font-weight: bold;
25+
text-align: center;
26+
border: 2px solid #999;
27+
}
28+
29+
th, td{
30+
border: 1px solid #aaa;
31+
}
32+
33+
.error{
34+
color:#922;
35+
}

0 commit comments

Comments
 (0)