init react
This commit is contained in:
Anish Lakhwara
parent
efecf5b4de
commit
f7b2d09c4b
6
mast-react/.dockerignore
Normal file
6
mast-react/.dockerignore
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
fly.toml
|
||||||
|
Dockerfile
|
||||||
|
.dockerignore
|
||||||
|
node_modules
|
||||||
|
.git
|
||||||
|
dbs
|
||||||
14
mast-react/.eslintrc.cjs
Normal file
14
mast-react/.eslintrc.cjs
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
module.exports = {
|
||||||
|
env: { browser: true, es2020: true },
|
||||||
|
extends: [
|
||||||
|
'eslint:recommended',
|
||||||
|
'plugin:@typescript-eslint/recommended',
|
||||||
|
'plugin:react-hooks/recommended',
|
||||||
|
],
|
||||||
|
parser: '@typescript-eslint/parser',
|
||||||
|
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
|
||||||
|
plugins: ['react-refresh'],
|
||||||
|
rules: {
|
||||||
|
'react-refresh/only-export-components': 'warn',
|
||||||
|
},
|
||||||
|
}
|
||||||
27
mast-react/.gitignore
vendored
Normal file
27
mast-react/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
# 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?
|
||||||
|
dbs/
|
||||||
|
|
||||||
|
public/assets/crsqlite-*.wasm
|
||||||
5
mast-react/.prettierrc
Normal file
5
mast-react/.prettierrc
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
{
|
||||||
|
"trailingComma": "es5",
|
||||||
|
"tabWidth": 2,
|
||||||
|
"singleQuote": false
|
||||||
|
}
|
||||||
1
mast-react/.yarnrc.yml
Normal file
1
mast-react/.yarnrc.yml
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
nodeLinker: node-modules
|
||||||
32
mast-react/Dockerfile
Normal file
32
mast-react/Dockerfile
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
FROM debian:bullseye as builder
|
||||||
|
|
||||||
|
ENV PATH=/usr/local/node/bin:$PATH
|
||||||
|
ARG NODE_VERSION=19.0.1
|
||||||
|
|
||||||
|
RUN apt-get update; apt install -y curl python-is-python3 pkg-config build-essential && \
|
||||||
|
curl -sL https://github.com/nodenv/node-build/archive/master.tar.gz | tar xz -C /tmp/ && \
|
||||||
|
/tmp/node-build-master/bin/node-build "${NODE_VERSION}" /usr/local/node && \
|
||||||
|
rm -rf /tmp/node-build-master
|
||||||
|
|
||||||
|
RUN mkdir /app
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
COPY . .
|
||||||
|
|
||||||
|
RUN npm install -g pnpm
|
||||||
|
RUN pnpm install
|
||||||
|
RUN pnpm run build
|
||||||
|
|
||||||
|
|
||||||
|
FROM debian:bullseye-slim
|
||||||
|
|
||||||
|
LABEL fly_launch_runtime="nodejs"
|
||||||
|
|
||||||
|
COPY --from=builder /usr/local/node /usr/local/node
|
||||||
|
COPY --from=builder /app /app
|
||||||
|
|
||||||
|
WORKDIR /app
|
||||||
|
ENV NODE_ENV production
|
||||||
|
ENV PATH /usr/local/node/bin:$PATH
|
||||||
|
|
||||||
|
CMD [ "pnpm", "run", "start" ]
|
||||||
30
mast-react/README.md
Normal file
30
mast-react/README.md
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
# vite-starter
|
||||||
|
|
||||||
|
Getting started with pnpm/npm/yarn create:
|
||||||
|
|
||||||
|
```
|
||||||
|
# npm
|
||||||
|
npm create @vlcn.io@latest your-app-name
|
||||||
|
# pnpm
|
||||||
|
pnpm create @vlcn.io your-app-name
|
||||||
|
# yarn
|
||||||
|
yarn create @vlcn.io your-app-name
|
||||||
|
```
|
||||||
|
|
||||||
|
Or, just cloning directly:
|
||||||
|
|
||||||
|
```
|
||||||
|
git clone git@github.com:vlcn-io/vite-starter.git
|
||||||
|
npm install
|
||||||
|
npm dev
|
||||||
|
```
|
||||||
|
|
||||||
|
What you get:
|
||||||
|
- A client ([App.tsx](https://github.com/vlcn-io/vite-starter/blob/main/src/App.tsx)) that runs a SQLite DB
|
||||||
|
- A server ([server.js](https://github.com/vlcn-io/vite-starter/blob/main/server.js)) that the client (or many clients) can sync to when online
|
||||||
|
- A database schema file ([schemas/main.mjs](https://github.com/vlcn-io/vite-starter/blob/main/src/schemas/main.mjs) that is automatically migrated to (auto migration is still in beta! You may find yourself needing to wipe the DB (clear indexeddb or change dbid) when using auto-migrate) on server and client restart.
|
||||||
|
|
||||||
|
|
||||||
|
Demo Video: [](https://www.youtube.com/watch?v=QJBQLYmXReI)
|
||||||
|
|
||||||
|
Deployed Scaffolding: https://vite-starter2.fly.dev/ Try it out! Collaborate between all your devices.
|
||||||
25
mast-react/etc/litefs.yml
Normal file
25
mast-react/etc/litefs.yml
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
# This directory is where your application will access the database.
|
||||||
|
fuse:
|
||||||
|
dir: "/app/dbs"
|
||||||
|
|
||||||
|
# This directory is where LiteFS will store internal data.
|
||||||
|
# You must place this directory on a persistent volume.
|
||||||
|
data:
|
||||||
|
dir: "/var/lib/litefs"
|
||||||
|
|
||||||
|
exec:
|
||||||
|
- cmd: "pnpm run start"
|
||||||
|
|
||||||
|
# The lease section specifies how the cluster will be managed. We're using the
|
||||||
|
# "consul" lease type so that our application can dynamically change the primary.
|
||||||
|
#
|
||||||
|
# These environment variables will be available in your Fly.io application.
|
||||||
|
lease:
|
||||||
|
type: "consul"
|
||||||
|
advertise-url: "http://${HOSTNAME}.vm.${FLY_APP_NAME}.internal:20202"
|
||||||
|
candidate: ${FLY_REGION == PRIMARY_REGION}
|
||||||
|
promote: true
|
||||||
|
|
||||||
|
consul:
|
||||||
|
url: "${FLY_CONSUL_URL}"
|
||||||
|
key: "litefs/${FLY_APP_NAME}"
|
||||||
45
mast-react/fly.toml
Normal file
45
mast-react/fly.toml
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
# fly.toml app configuration file generated for mast-react on 2023-06-01T10:35:47-04:00
|
||||||
|
#
|
||||||
|
# See https://fly.io/docs/reference/configuration/ for information about how to use this file.
|
||||||
|
#
|
||||||
|
|
||||||
|
app = "vite-starter2"
|
||||||
|
primary_region = "iad"
|
||||||
|
kill_signal = "SIGINT"
|
||||||
|
kill_timeout = "5s"
|
||||||
|
|
||||||
|
[experimental]
|
||||||
|
auto_rollback = true
|
||||||
|
|
||||||
|
[env]
|
||||||
|
PORT = "8080"
|
||||||
|
PRIMARY_REGION = "iad"
|
||||||
|
|
||||||
|
[[mounts]]
|
||||||
|
source = "dbs_machines"
|
||||||
|
destination = "/app/dbs"
|
||||||
|
processes = ["app"]
|
||||||
|
|
||||||
|
[[services]]
|
||||||
|
protocol = "tcp"
|
||||||
|
internal_port = 8080
|
||||||
|
processes = ["app"]
|
||||||
|
|
||||||
|
[[services.ports]]
|
||||||
|
port = 80
|
||||||
|
handlers = ["http"]
|
||||||
|
force_https = true
|
||||||
|
|
||||||
|
[[services.ports]]
|
||||||
|
port = 443
|
||||||
|
handlers = ["tls", "http"]
|
||||||
|
[services.concurrency]
|
||||||
|
type = "connections"
|
||||||
|
hard_limit = 250
|
||||||
|
soft_limit = 200
|
||||||
|
|
||||||
|
[[services.tcp_checks]]
|
||||||
|
interval = "15s"
|
||||||
|
timeout = "2s"
|
||||||
|
grace_period = "1s"
|
||||||
|
restart_limit = 0
|
||||||
13
mast-react/index.html
Normal file
13
mast-react/index.html
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<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>
|
||||||
12
mast-react/notes.md
Normal file
12
mast-react/notes.md
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
more regions:
|
||||||
|
https://fly.io/docs/litefs/speedrun/#5-add-some-replicas-in-other-regions
|
||||||
|
|
||||||
|
```
|
||||||
|
fly m clone --select --region lhr
|
||||||
|
```
|
||||||
|
|
||||||
|
consul:
|
||||||
|
|
||||||
|
```
|
||||||
|
fly consul attach
|
||||||
|
```
|
||||||
37
mast-react/package.json
Normal file
37
mast-react/package.json
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
{
|
||||||
|
"name": "mast-react",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "node ./server.js",
|
||||||
|
"start": "NODE_ENV=production node ./server.js",
|
||||||
|
"build": "tsc && vite build",
|
||||||
|
"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@vlcn.io/crsqlite-wasm": "0.16.0",
|
||||||
|
"@vlcn.io/react": "3.1.0",
|
||||||
|
"@vlcn.io/ws-browserdb": "0.2.0",
|
||||||
|
"@vlcn.io/ws-client": "0.2.0",
|
||||||
|
"@vlcn.io/ws-server": "0.2.3",
|
||||||
|
"cors": "^2.8.5",
|
||||||
|
"express": "^4.18.2",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"vite-express": "^0.9.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/react": "^18.0.28",
|
||||||
|
"@types/react-dom": "^18.0.11",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^5.57.1",
|
||||||
|
"@typescript-eslint/parser": "^5.57.1",
|
||||||
|
"@vitejs/plugin-react": "^4.0.0",
|
||||||
|
"eslint": "^8.38.0",
|
||||||
|
"eslint-plugin-react-hooks": "^4.6.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.3.4",
|
||||||
|
"typescript": "^5.0.2",
|
||||||
|
"vite": "^4.3.9",
|
||||||
|
"vite-plugin-pwa": "^0.16.4"
|
||||||
|
}
|
||||||
|
}
|
||||||
4858
mast-react/pnpm-lock.yaml
Normal file
4858
mast-react/pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load diff
1
mast-react/public/vite.svg
Normal file
1
mast-react/public/vite.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
23
mast-react/server.js
Normal file
23
mast-react/server.js
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
import express from "express";
|
||||||
|
import ViteExpress from "vite-express";
|
||||||
|
import { attachWebsocketServer } from "@vlcn.io/ws-server";
|
||||||
|
import * as http from "http";
|
||||||
|
|
||||||
|
const PORT = parseInt(process.env.PORT || "8080");
|
||||||
|
|
||||||
|
const app = express();
|
||||||
|
const server = http.createServer(app);
|
||||||
|
|
||||||
|
const wsConfig = {
|
||||||
|
dbFolder: "./dbs",
|
||||||
|
schemaFolder: "./src/schemas",
|
||||||
|
pathPattern: /\/sync/,
|
||||||
|
};
|
||||||
|
|
||||||
|
attachWebsocketServer(server, wsConfig);
|
||||||
|
|
||||||
|
server.listen(PORT, () =>
|
||||||
|
console.log("info", `listening on http://localhost:${PORT}!`)
|
||||||
|
);
|
||||||
|
|
||||||
|
ViteExpress.bind(app, server);
|
||||||
31
mast-react/src/App.css
Normal file
31
mast-react/src/App.css
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
#root {
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
height: 6em;
|
||||||
|
padding: 2em;
|
||||||
|
will-change: filter;
|
||||||
|
transition: filter 300ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo:hover {
|
||||||
|
filter: drop-shadow(0 0 2em #646cffaa);
|
||||||
|
}
|
||||||
|
.logo.react:hover {
|
||||||
|
filter: drop-shadow(0 0 2em #61dafbaa);
|
||||||
|
}
|
||||||
|
.logo.vlcn:hover {
|
||||||
|
filter: drop-shadow(0 0 2em #e3eaef);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.read-the-docs {
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
148
mast-react/src/App.tsx
Normal file
148
mast-react/src/App.tsx
Normal file
|
|
@ -0,0 +1,148 @@
|
||||||
|
import { CtxAsync, useCachedState, useQuery, useSync } from "@vlcn.io/react";
|
||||||
|
import reactLogo from "./assets/react.svg";
|
||||||
|
import viteLogo from "/vite.svg";
|
||||||
|
import vlcnLogo from "./assets/vlcn.png";
|
||||||
|
import "./App.css";
|
||||||
|
import randomWords from "./support/randomWords.js";
|
||||||
|
import { useDB } from "@vlcn.io/react";
|
||||||
|
import SyncWorker from "./sync-worker.js?worker";
|
||||||
|
|
||||||
|
type TestRecord = { id: string; name: string };
|
||||||
|
const wordOptions = { exactly: 3, join: " " };
|
||||||
|
|
||||||
|
function getEndpoint() {
|
||||||
|
let proto = "ws:";
|
||||||
|
const host = window.location.host;
|
||||||
|
if (window.location.protocol === "https:") {
|
||||||
|
proto = "wss:";
|
||||||
|
}
|
||||||
|
|
||||||
|
return `${proto}//${host}/sync`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const worker = new SyncWorker();
|
||||||
|
function App({ dbname }: { dbname: string }) {
|
||||||
|
const ctx = useDB(dbname);
|
||||||
|
useSync({
|
||||||
|
dbname,
|
||||||
|
endpoint: getEndpoint(),
|
||||||
|
room: dbname,
|
||||||
|
worker,
|
||||||
|
});
|
||||||
|
const data = useQuery<TestRecord>(
|
||||||
|
ctx,
|
||||||
|
"SELECT * FROM test ORDER BY id DESC"
|
||||||
|
).data;
|
||||||
|
|
||||||
|
const addData = () => {
|
||||||
|
ctx.db.exec("INSERT INTO test (id, name) VALUES (?, ?);", [
|
||||||
|
nanoid(10),
|
||||||
|
randomWords(wordOptions) as string,
|
||||||
|
]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const dropData = () => {
|
||||||
|
ctx.db.exec("DELETE FROM test;");
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div>
|
||||||
|
<a href="https://vitejs.dev" target="_blank">
|
||||||
|
<img src={viteLogo} className="logo" alt="Vite logo" />
|
||||||
|
</a>
|
||||||
|
<a href="https://react.dev" target="_blank">
|
||||||
|
<img src={reactLogo} className="logo react" alt="React logo" />
|
||||||
|
</a>
|
||||||
|
<a href="https://vlcn.io" target="_blank">
|
||||||
|
<img src={vlcnLogo} className="logo vlcn" alt="Vulcan logo" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<h1>Vite + React + Vulcan</h1>
|
||||||
|
<div className="card">
|
||||||
|
<button onClick={addData} style={{ marginRight: "1em" }}>
|
||||||
|
Add Data
|
||||||
|
</button>
|
||||||
|
<button onClick={dropData}>Drop Data</button>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>ID</th>
|
||||||
|
<th>Name</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{data.map((row) => (
|
||||||
|
<tr key={row.id}>
|
||||||
|
<td>{row.id}</td>
|
||||||
|
<td>
|
||||||
|
<EditableItem ctx={ctx} id={row.id} value={row.name} />
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<p>
|
||||||
|
Edit <code>src/App.tsx</code> and save to test HMR
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Open another browser and navigate to{" "}
|
||||||
|
<a href={window.location.href} target="_blank">
|
||||||
|
this window's url
|
||||||
|
</a>{" "}
|
||||||
|
to test sync.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<p className="read-the-docs">
|
||||||
|
Click on the Vite, React and Vulcan logos to learn more
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function EditableItem({
|
||||||
|
ctx,
|
||||||
|
id,
|
||||||
|
value,
|
||||||
|
}: {
|
||||||
|
ctx: CtxAsync;
|
||||||
|
id: string;
|
||||||
|
value: string;
|
||||||
|
}) {
|
||||||
|
// Generally you will not need to use `useCachedState`. It is only required for highly interactive components
|
||||||
|
// that write to the database on every interaction (e.g., keystroke or drag) or in cases where you want
|
||||||
|
// to de-bounce your writes to the DB.
|
||||||
|
//
|
||||||
|
// `useCachedState` will never be required once when one of the following is true:
|
||||||
|
// a. We complete the synchronous Reactive SQL layer (SQLiteRX)
|
||||||
|
// b. We figure out how to get SQLite-WASM to do a write + read round-trip in a single event loop tick
|
||||||
|
const [cachedValue, setCachedValue] = useCachedState(value);
|
||||||
|
const onChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
setCachedValue(e.target.value);
|
||||||
|
// You could de-bounce your write to the DB here if so desired.
|
||||||
|
return ctx.db.exec("UPDATE test SET name = ? WHERE id = ?;", [
|
||||||
|
e.target.value,
|
||||||
|
id,
|
||||||
|
]);
|
||||||
|
};
|
||||||
|
|
||||||
|
return <input type="text" value={cachedValue} onChange={onChange} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
|
|
||||||
|
const nanoid = (t = 21) =>
|
||||||
|
crypto
|
||||||
|
.getRandomValues(new Uint8Array(t))
|
||||||
|
.reduce(
|
||||||
|
(t, e) =>
|
||||||
|
(t +=
|
||||||
|
(e &= 63) < 36
|
||||||
|
? e.toString(36)
|
||||||
|
: e < 62
|
||||||
|
? (e - 26).toString(36).toUpperCase()
|
||||||
|
: e > 62
|
||||||
|
? "-"
|
||||||
|
: "_"),
|
||||||
|
""
|
||||||
|
);
|
||||||
78
mast-react/src/Root.tsx
Normal file
78
mast-react/src/Root.tsx
Normal file
|
|
@ -0,0 +1,78 @@
|
||||||
|
import App from "./App.tsx";
|
||||||
|
import schemaContent from "./schemas/main2.sql?raw";
|
||||||
|
import { DBProvider } from "@vlcn.io/react";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generates a random room name to sync with or pulls one from local storage.
|
||||||
|
*/
|
||||||
|
function getRoom(hash: HashBag): string {
|
||||||
|
return hash.room || localStorage.getItem("room") || newRoom();
|
||||||
|
}
|
||||||
|
|
||||||
|
function hashChanged() {
|
||||||
|
const hash = parseHash();
|
||||||
|
const room = getRoom(hash);
|
||||||
|
if (room != hash.room) {
|
||||||
|
hash.room = room;
|
||||||
|
window.location.hash = writeHash(hash);
|
||||||
|
}
|
||||||
|
localStorage.setItem("room", room);
|
||||||
|
return room;
|
||||||
|
}
|
||||||
|
const room = hashChanged();
|
||||||
|
|
||||||
|
export default function Root() {
|
||||||
|
const [theRoom, setTheRoom] = useState(room);
|
||||||
|
useEffect(() => {
|
||||||
|
const cb = () => {
|
||||||
|
const room = hashChanged();
|
||||||
|
if (room != theRoom) {
|
||||||
|
setTheRoom(room);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
addEventListener("hashchange", cb);
|
||||||
|
return () => {
|
||||||
|
removeEventListener("hashchange", cb);
|
||||||
|
};
|
||||||
|
}, []); // ignore -- theRoom is managed by the effect
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DBProvider
|
||||||
|
dbname={theRoom}
|
||||||
|
schema={{
|
||||||
|
name: "main2.sql",
|
||||||
|
content: schemaContent,
|
||||||
|
}}
|
||||||
|
Render={() => <App dbname={theRoom} />}
|
||||||
|
></DBProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
type HashBag = { [key: string]: string };
|
||||||
|
function parseHash(): HashBag {
|
||||||
|
const hash = window.location.hash;
|
||||||
|
const ret: { [key: string]: string } = {};
|
||||||
|
if (hash.length > 1) {
|
||||||
|
const substr = hash.substring(1);
|
||||||
|
const parts = substr.split(",");
|
||||||
|
for (const part of parts) {
|
||||||
|
const [key, value] = part.split("=");
|
||||||
|
ret[key] = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return ret;
|
||||||
|
}
|
||||||
|
|
||||||
|
function writeHash(hash: HashBag) {
|
||||||
|
const parts = [];
|
||||||
|
for (const key in hash) {
|
||||||
|
parts.push(`${key}=${hash[key]}`);
|
||||||
|
}
|
||||||
|
return parts.join(",");
|
||||||
|
}
|
||||||
|
|
||||||
|
function newRoom() {
|
||||||
|
return crypto.randomUUID().replaceAll("-", "");
|
||||||
|
}
|
||||||
1
mast-react/src/assets/react.svg
Normal file
1
mast-react/src/assets/react.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 4 KiB |
BIN
mast-react/src/assets/vlcn-hand.png
Normal file
BIN
mast-react/src/assets/vlcn-hand.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
BIN
mast-react/src/assets/vlcn.png
Normal file
BIN
mast-react/src/assets/vlcn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
97
mast-react/src/index.css
Normal file
97
mast-react/src/index.css
Normal file
|
|
@ -0,0 +1,97 @@
|
||||||
|
:root {
|
||||||
|
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
color-scheme: light dark;
|
||||||
|
color: rgba(255, 255, 255, 0.87);
|
||||||
|
background-color: #242424;
|
||||||
|
|
||||||
|
font-synthesis: none;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #646cff;
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #535bf2;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
min-width: 320px;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3.2em;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
padding: 0.6em 1.2em;
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: inherit;
|
||||||
|
background-color: #1a1a1a;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: border-color 0.25s;
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
border-color: #646cff;
|
||||||
|
}
|
||||||
|
button:focus,
|
||||||
|
button:focus-visible {
|
||||||
|
outline: 4px auto -webkit-focus-ring-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
table input {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
text-align: center;
|
||||||
|
padding: 8px;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
table input:focus {
|
||||||
|
background: grey;
|
||||||
|
}
|
||||||
|
|
||||||
|
thead {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root {
|
||||||
|
color: #213547;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #747bff;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
}
|
||||||
13
mast-react/src/main.tsx
Normal file
13
mast-react/src/main.tsx
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
import ReactDOM from "react-dom/client";
|
||||||
|
|
||||||
|
import "./index.css";
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import Root from "./Root.tsx";
|
||||||
|
|
||||||
|
// Launch our app.
|
||||||
|
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<Root />
|
||||||
|
</React.StrictMode>
|
||||||
|
);
|
||||||
2
mast-react/src/schemas/main2.sql
Normal file
2
mast-react/src/schemas/main2.sql
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
CREATE TABLE IF NOT EXISTS test (id PRIMARY KEY NOT NULL, name TEXT);
|
||||||
|
SELECT crsql_as_crr('test');
|
||||||
338
mast-react/src/support/randomWords.ts
Normal file
338
mast-react/src/support/randomWords.ts
Normal file
|
|
@ -0,0 +1,338 @@
|
||||||
|
var wordList = [
|
||||||
|
// Borrowed from xkcd password generator which borrowed it from wherever
|
||||||
|
"ability","able","aboard","about","above","accept","accident","according",
|
||||||
|
"account","accurate","acres","across","act","action","active","activity",
|
||||||
|
"actual","actually","add","addition","additional","adjective","adult","adventure",
|
||||||
|
"advice","affect","afraid","after","afternoon","again","against","age",
|
||||||
|
"ago","agree","ahead","aid","air","airplane","alike","alive",
|
||||||
|
"all","allow","almost","alone","along","aloud","alphabet","already",
|
||||||
|
"also","although","am","among","amount","ancient","angle","angry",
|
||||||
|
"animal","announced","another","answer","ants","any","anybody","anyone",
|
||||||
|
"anything","anyway","anywhere","apart","apartment","appearance","apple","applied",
|
||||||
|
"appropriate","are","area","arm","army","around","arrange","arrangement",
|
||||||
|
"arrive","arrow","art","article","as","aside","ask","asleep",
|
||||||
|
"at","ate","atmosphere","atom","atomic","attached","attack","attempt",
|
||||||
|
"attention","audience","author","automobile","available","average","avoid","aware",
|
||||||
|
"away","baby","back","bad","badly","bag","balance","ball",
|
||||||
|
"balloon","band","bank","bar","bare","bark","barn","base",
|
||||||
|
"baseball","basic","basis","basket","bat","battle","be","bean",
|
||||||
|
"bear","beat","beautiful","beauty","became","because","become","becoming",
|
||||||
|
"bee","been","before","began","beginning","begun","behavior","behind",
|
||||||
|
"being","believed","bell","belong","below","belt","bend","beneath",
|
||||||
|
"bent","beside","best","bet","better","between","beyond","bicycle",
|
||||||
|
"bigger","biggest","bill","birds","birth","birthday","bit","bite",
|
||||||
|
"black","blank","blanket","blew","blind","block","blood","blow",
|
||||||
|
"blue","board","boat","body","bone","book","border","born",
|
||||||
|
"both","bottle","bottom","bound","bow","bowl","box","boy",
|
||||||
|
"brain","branch","brass","brave","bread","break","breakfast","breath",
|
||||||
|
"breathe","breathing","breeze","brick","bridge","brief","bright","bring",
|
||||||
|
"broad","broke","broken","brother","brought","brown","brush","buffalo",
|
||||||
|
"build","building","built","buried","burn","burst","bus","bush",
|
||||||
|
"business","busy","but","butter","buy","by","cabin","cage",
|
||||||
|
"cake","call","calm","came","camera","camp","can","canal",
|
||||||
|
"cannot","cap","capital","captain","captured","car","carbon","card",
|
||||||
|
"care","careful","carefully","carried","carry","case","cast","castle",
|
||||||
|
"cat","catch","cattle","caught","cause","cave","cell","cent",
|
||||||
|
"center","central","century","certain","certainly","chain","chair","chamber",
|
||||||
|
"chance","change","changing","chapter","character","characteristic","charge","chart",
|
||||||
|
"check","cheese","chemical","chest","chicken","chief","child","children",
|
||||||
|
"choice","choose","chose","chosen","church","circle","circus","citizen",
|
||||||
|
"city","class","classroom","claws","clay","clean","clear","clearly",
|
||||||
|
"climate","climb","clock","close","closely","closer","cloth","clothes",
|
||||||
|
"clothing","cloud","club","coach","coal","coast","coat","coffee",
|
||||||
|
"cold","collect","college","colony","color","column","combination","combine",
|
||||||
|
"come","comfortable","coming","command","common","community","company","compare",
|
||||||
|
"compass","complete","completely","complex","composed","composition","compound","concerned",
|
||||||
|
"condition","congress","connected","consider","consist","consonant","constantly","construction",
|
||||||
|
"contain","continent","continued","contrast","control","conversation","cook","cookies",
|
||||||
|
"cool","copper","copy","corn","corner","correct","correctly","cost",
|
||||||
|
"cotton","could","count","country","couple","courage","course","court",
|
||||||
|
"cover","cow","cowboy","crack","cream","create","creature","crew",
|
||||||
|
"crop","cross","crowd","cry","cup","curious","current","curve",
|
||||||
|
"customs","cut","cutting","daily","damage","dance","danger","dangerous",
|
||||||
|
"dark","darkness","date","daughter","dawn","day","dead","deal",
|
||||||
|
"dear","death","decide","declared","deep","deeply","deer","definition",
|
||||||
|
"degree","depend","depth","describe","desert","design","desk","detail",
|
||||||
|
"determine","develop","development","diagram","diameter","did","die","differ",
|
||||||
|
"difference","different","difficult","difficulty","dig","dinner","direct","direction",
|
||||||
|
"directly","dirt","dirty","disappear","discover","discovery","discuss","discussion",
|
||||||
|
"disease","dish","distance","distant","divide","division","do","doctor",
|
||||||
|
"does","dog","doing","doll","dollar","done","donkey","door",
|
||||||
|
"dot","double","doubt","down","dozen","draw","drawn","dream",
|
||||||
|
"dress","drew","dried","drink","drive","driven","driver","driving",
|
||||||
|
"drop","dropped","drove","dry","duck","due","dug","dull",
|
||||||
|
"during","dust","duty","each","eager","ear","earlier","early",
|
||||||
|
"earn","earth","easier","easily","east","easy","eat","eaten",
|
||||||
|
"edge","education","effect","effort","egg","eight","either","electric",
|
||||||
|
"electricity","element","elephant","eleven","else","empty","end","enemy",
|
||||||
|
"energy","engine","engineer","enjoy","enough","enter","entire","entirely",
|
||||||
|
"environment","equal","equally","equator","equipment","escape","especially","essential",
|
||||||
|
"establish","even","evening","event","eventually","ever","every","everybody",
|
||||||
|
"everyone","everything","everywhere","evidence","exact","exactly","examine","example",
|
||||||
|
"excellent","except","exchange","excited","excitement","exciting","exclaimed","exercise",
|
||||||
|
"exist","expect","experience","experiment","explain","explanation","explore","express",
|
||||||
|
"expression","extra","eye","face","facing","fact","factor","factory",
|
||||||
|
"failed","fair","fairly","fall","fallen","familiar","family","famous",
|
||||||
|
"far","farm","farmer","farther","fast","fastened","faster","fat",
|
||||||
|
"father","favorite","fear","feathers","feature","fed","feed","feel",
|
||||||
|
"feet","fell","fellow","felt","fence","few","fewer","field",
|
||||||
|
"fierce","fifteen","fifth","fifty","fight","fighting","figure","fill",
|
||||||
|
"film","final","finally","find","fine","finest","finger","finish",
|
||||||
|
"fire","fireplace","firm","first","fish","five","fix","flag",
|
||||||
|
"flame","flat","flew","flies","flight","floating","floor","flow",
|
||||||
|
"flower","fly","fog","folks","follow","food","foot","football",
|
||||||
|
"for","force","foreign","forest","forget","forgot","forgotten","form",
|
||||||
|
"former","fort","forth","forty","forward","fought","found","four",
|
||||||
|
"fourth","fox","frame","free","freedom","frequently","fresh","friend",
|
||||||
|
"friendly","frighten","frog","from","front","frozen","fruit","fuel",
|
||||||
|
"full","fully","fun","function","funny","fur","furniture","further",
|
||||||
|
"future","gain","game","garage","garden","gas","gasoline","gate",
|
||||||
|
"gather","gave","general","generally","gentle","gently","get","getting",
|
||||||
|
"giant","gift","girl","give","given","giving","glad","glass",
|
||||||
|
"globe","go","goes","gold","golden","gone","good","goose",
|
||||||
|
"got","government","grabbed","grade","gradually","grain","grandfather","grandmother",
|
||||||
|
"graph","grass","gravity","gray","great","greater","greatest","greatly",
|
||||||
|
"green","grew","ground","group","grow","grown","growth","guard",
|
||||||
|
"guess","guide","gulf","gun","habit","had","hair","half",
|
||||||
|
"halfway","hall","hand","handle","handsome","hang","happen","happened",
|
||||||
|
"happily","happy","harbor","hard","harder","hardly","has","hat",
|
||||||
|
"have","having","hay","he","headed","heading","health","heard",
|
||||||
|
"hearing","heart","heat","heavy","height","held","hello","help",
|
||||||
|
"helpful","her","herd","here","herself","hidden","hide","high",
|
||||||
|
"higher","highest","highway","hill","him","himself","his","history",
|
||||||
|
"hit","hold","hole","hollow","home","honor","hope","horn",
|
||||||
|
"horse","hospital","hot","hour","house","how","however","huge",
|
||||||
|
"human","hundred","hung","hungry","hunt","hunter","hurried","hurry",
|
||||||
|
"hurt","husband","ice","idea","identity","if","ill","image",
|
||||||
|
"imagine","immediately","importance","important","impossible","improve","in","inch",
|
||||||
|
"include","including","income","increase","indeed","independent","indicate","individual",
|
||||||
|
"industrial","industry","influence","information","inside","instance","instant","instead",
|
||||||
|
"instrument","interest","interior","into","introduced","invented","involved","iron",
|
||||||
|
"is","island","it","its","itself","jack","jar","jet",
|
||||||
|
"job","join","joined","journey","joy","judge","jump","jungle",
|
||||||
|
"just","keep","kept","key","kids","kill","kind","kitchen",
|
||||||
|
"knew","knife","know","knowledge","known","label","labor","lack",
|
||||||
|
"lady","laid","lake","lamp","land","language","large","larger",
|
||||||
|
"largest","last","late","later","laugh","law","lay","layers",
|
||||||
|
"lead","leader","leaf","learn","least","leather","leave","leaving",
|
||||||
|
"led","left","leg","length","lesson","let","letter","level",
|
||||||
|
"library","lie","life","lift","light","like","likely","limited",
|
||||||
|
"line","lion","lips","liquid","list","listen","little","live",
|
||||||
|
"living","load","local","locate","location","log","lonely","long",
|
||||||
|
"longer","look","loose","lose","loss","lost","lot","loud",
|
||||||
|
"love","lovely","low","lower","luck","lucky","lunch","lungs",
|
||||||
|
"lying","machine","machinery","mad","made","magic","magnet","mail",
|
||||||
|
"main","mainly","major","make","making","man","managed","manner",
|
||||||
|
"manufacturing","many","map","mark","market","married","mass","massage",
|
||||||
|
"master","material","mathematics","matter","may","maybe","me","meal",
|
||||||
|
"mean","means","meant","measure","meat","medicine","meet","melted",
|
||||||
|
"member","memory","men","mental","merely","met","metal","method",
|
||||||
|
"mice","middle","might","mighty","mile","military","milk","mill",
|
||||||
|
"mind","mine","minerals","minute","mirror","missing","mission","mistake",
|
||||||
|
"mix","mixture","model","modern","molecular","moment","money","monkey",
|
||||||
|
"month","mood","moon","more","morning","most","mostly","mother",
|
||||||
|
"motion","motor","mountain","mouse","mouth","move","movement","movie",
|
||||||
|
"moving","mud","muscle","music","musical","must","my","myself",
|
||||||
|
"mysterious","nails","name","nation","national","native","natural","naturally",
|
||||||
|
"nature","near","nearby","nearer","nearest","nearly","necessary","neck",
|
||||||
|
"needed","needle","needs","negative","neighbor","neighborhood","nervous","nest",
|
||||||
|
"never","new","news","newspaper","next","nice","night","nine",
|
||||||
|
"no","nobody","nodded","noise","none","noon","nor","north",
|
||||||
|
"nose","not","note","noted","nothing","notice","noun","now",
|
||||||
|
"number","numeral","nuts","object","observe","obtain","occasionally","occur",
|
||||||
|
"ocean","of","off","offer","office","officer","official","oil",
|
||||||
|
"old","older","oldest","on","once","one","only","onto",
|
||||||
|
"open","operation","opinion","opportunity","opposite","or","orange","orbit",
|
||||||
|
"order","ordinary","organization","organized","origin","original","other","ought",
|
||||||
|
"our","ourselves","out","outer","outline","outside","over","own",
|
||||||
|
"owner","oxygen","pack","package","page","paid","pain","paint",
|
||||||
|
"pair","palace","pale","pan","paper","paragraph","parallel","parent",
|
||||||
|
"park","part","particles","particular","particularly","partly","parts","party",
|
||||||
|
"pass","passage","past","path","pattern","pay","peace","pen",
|
||||||
|
"pencil","people","per","percent","perfect","perfectly","perhaps","period",
|
||||||
|
"person","personal","pet","phrase","physical","piano","pick","picture",
|
||||||
|
"pictured","pie","piece","pig","pile","pilot","pine","pink",
|
||||||
|
"pipe","pitch","place","plain","plan","plane","planet","planned",
|
||||||
|
"planning","plant","plastic","plate","plates","play","pleasant","please",
|
||||||
|
"pleasure","plenty","plural","plus","pocket","poem","poet","poetry",
|
||||||
|
"point","pole","police","policeman","political","pond","pony","pool",
|
||||||
|
"poor","popular","population","porch","port","position","positive","possible",
|
||||||
|
"possibly","post","pot","potatoes","pound","pour","powder","power",
|
||||||
|
"powerful","practical","practice","prepare","present","president","press","pressure",
|
||||||
|
"pretty","prevent","previous","price","pride","primitive","principal","principle",
|
||||||
|
"printed","private","prize","probably","problem","process","produce","product",
|
||||||
|
"production","program","progress","promised","proper","properly","property","protection",
|
||||||
|
"proud","prove","provide","public","pull","pupil","pure","purple",
|
||||||
|
"purpose","push","put","putting","quarter","queen","question","quick",
|
||||||
|
"quickly","quiet","quietly","quite","rabbit","race","radio","railroad",
|
||||||
|
"rain","raise","ran","ranch","range","rapidly","rate","rather",
|
||||||
|
"raw","rays","reach","read","reader","ready","real","realize",
|
||||||
|
"rear","reason","recall","receive","recent","recently","recognize","record",
|
||||||
|
"red","refer","refused","region","regular","related","relationship","religious",
|
||||||
|
"remain","remarkable","remember","remove","repeat","replace","replied","report",
|
||||||
|
"represent","require","research","respect","rest","result","return","review",
|
||||||
|
"rhyme","rhythm","rice","rich","ride","riding","right","ring",
|
||||||
|
"rise","rising","river","road","roar","rock","rocket","rocky",
|
||||||
|
"rod","roll","roof","room","root","rope","rose","rough",
|
||||||
|
"round","route","row","rubbed","rubber","rule","ruler","run",
|
||||||
|
"running","rush","sad","saddle","safe","safety","said","sail",
|
||||||
|
"sale","salmon","salt","same","sand","sang","sat","satellites",
|
||||||
|
"satisfied","save","saved","saw","say","scale","scared","scene",
|
||||||
|
"school","science","scientific","scientist","score","screen","sea","search",
|
||||||
|
"season","seat","second","secret","section","see","seed","seeing",
|
||||||
|
"seems","seen","seldom","select","selection","sell","send","sense",
|
||||||
|
"sent","sentence","separate","series","serious","serve","service","sets",
|
||||||
|
"setting","settle","settlers","seven","several","shade","shadow","shake",
|
||||||
|
"shaking","shall","shallow","shape","share","sharp","she","sheep",
|
||||||
|
"sheet","shelf","shells","shelter","shine","shinning","ship","shirt",
|
||||||
|
"shoe","shoot","shop","shore","short","shorter","shot","should",
|
||||||
|
"shoulder","shout","show","shown","shut","sick","sides","sight",
|
||||||
|
"sign","signal","silence","silent","silk","silly","silver","similar",
|
||||||
|
"simple","simplest","simply","since","sing","single","sink","sister",
|
||||||
|
"sit","sitting","situation","six","size","skill","skin","sky",
|
||||||
|
"slabs","slave","sleep","slept","slide","slight","slightly","slip",
|
||||||
|
"slipped","slope","slow","slowly","small","smaller","smallest","smell",
|
||||||
|
"smile","smoke","smooth","snake","snow","so","soap","social",
|
||||||
|
"society","soft","softly","soil","solar","sold","soldier","solid",
|
||||||
|
"solution","solve","some","somebody","somehow","someone","something","sometime",
|
||||||
|
"somewhere","son","song","soon","sort","sound","source","south",
|
||||||
|
"southern","space","speak","special","species","specific","speech","speed",
|
||||||
|
"spell","spend","spent","spider","spin","spirit","spite","split",
|
||||||
|
"spoken","sport","spread","spring","square","stage","stairs","stand",
|
||||||
|
"standard","star","stared","start","state","statement","station","stay",
|
||||||
|
"steady","steam","steel","steep","stems","step","stepped","stick",
|
||||||
|
"stiff","still","stock","stomach","stone","stood","stop","stopped",
|
||||||
|
"store","storm","story","stove","straight","strange","stranger","straw",
|
||||||
|
"stream","street","strength","stretch","strike","string","strip","strong",
|
||||||
|
"stronger","struck","structure","struggle","stuck","student","studied","studying",
|
||||||
|
"subject","substance","success","successful","such","sudden","suddenly","sugar",
|
||||||
|
"suggest","suit","sum","summer","sun","sunlight","supper","supply",
|
||||||
|
"support","suppose","sure","surface","surprise","surrounded","swam","sweet",
|
||||||
|
"swept","swim","swimming","swing","swung","syllable","symbol","system",
|
||||||
|
"table","tail","take","taken","tales","talk","tall","tank",
|
||||||
|
"tape","task","taste","taught","tax","tea","teach","teacher",
|
||||||
|
"team","tears","teeth","telephone","television","tell","temperature","ten",
|
||||||
|
"tent","term","terrible","test","than","thank","that","thee",
|
||||||
|
"them","themselves","then","theory","there","therefore","these","they",
|
||||||
|
"thick","thin","thing","think","third","thirty","this","those",
|
||||||
|
"thou","though","thought","thousand","thread","three","threw","throat",
|
||||||
|
"through","throughout","throw","thrown","thumb","thus","thy","tide",
|
||||||
|
"tie","tight","tightly","till","time","tin","tiny","tip",
|
||||||
|
"tired","title","to","tobacco","today","together","told","tomorrow",
|
||||||
|
"tone","tongue","tonight","too","took","tool","top","topic",
|
||||||
|
"torn","total","touch","toward","tower","town","toy","trace",
|
||||||
|
"track","trade","traffic","trail","train","transportation","trap","travel",
|
||||||
|
"treated","tree","triangle","tribe","trick","tried","trip","troops",
|
||||||
|
"tropical","trouble","truck","trunk","truth","try","tube","tune",
|
||||||
|
"turn","twelve","twenty","twice","two","type","typical","uncle",
|
||||||
|
"under","underline","understanding","unhappy","union","unit","universe","unknown",
|
||||||
|
"unless","until","unusual","up","upon","upper","upward","us",
|
||||||
|
"use","useful","using","usual","usually","valley","valuable","value",
|
||||||
|
"vapor","variety","various","vast","vegetable","verb","vertical","very",
|
||||||
|
"vessels","victory","view","village","visit","visitor","voice","volume",
|
||||||
|
"vote","vowel","voyage","wagon","wait","walk","wall","want",
|
||||||
|
"war","warm","warn","was","wash","waste","watch","water",
|
||||||
|
"wave","way","we","weak","wealth","wear","weather","week",
|
||||||
|
"weigh","weight","welcome","well","went","were","west","western",
|
||||||
|
"wet","whale","what","whatever","wheat","wheel","when","whenever",
|
||||||
|
"where","wherever","whether","which","while","whispered","whistle","white",
|
||||||
|
"who","whole","whom","whose","why","wide","widely","wife",
|
||||||
|
"wild","will","willing","win","wind","window","wing","winter",
|
||||||
|
"wire","wise","wish","with","within","without","wolf","women",
|
||||||
|
"won","wonder","wonderful","wood","wooden","wool","word","wore",
|
||||||
|
"work","worker","world","worried","worry","worse","worth","would",
|
||||||
|
"wrapped","write","writer","writing","written","wrong","wrote","yard",
|
||||||
|
"year","yellow","yes","yesterday","yet","you","young","younger",
|
||||||
|
"your","yourself","youth","zero","zebra","zipper","zoo","zulu"
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function words(
|
||||||
|
options: any
|
||||||
|
) {
|
||||||
|
|
||||||
|
function word() {
|
||||||
|
if (options && options.maxLength > 1) {
|
||||||
|
return generateWordWithMaxLength();
|
||||||
|
} else {
|
||||||
|
return generateRandomWord();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function generateWordWithMaxLength() {
|
||||||
|
var rightSize = false;
|
||||||
|
var wordUsed;
|
||||||
|
while (!rightSize) {
|
||||||
|
wordUsed = generateRandomWord();
|
||||||
|
if(wordUsed.length <= (options.maxLength)) {
|
||||||
|
rightSize = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
return wordUsed;
|
||||||
|
}
|
||||||
|
|
||||||
|
function generateRandomWord() {
|
||||||
|
return wordList[randInt(wordList.length)];
|
||||||
|
}
|
||||||
|
|
||||||
|
function randInt(lessThan: number) {
|
||||||
|
return Math.floor(Math.random() * lessThan);
|
||||||
|
}
|
||||||
|
|
||||||
|
// No arguments = generate one word
|
||||||
|
if (typeof(options) === 'undefined') {
|
||||||
|
return word();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Just a number = return that many words
|
||||||
|
if (typeof(options) === 'number') {
|
||||||
|
options = { exactly: options };
|
||||||
|
}
|
||||||
|
|
||||||
|
// options supported: exactly, min, max, join
|
||||||
|
if (options.exactly) {
|
||||||
|
options.min = options.exactly;
|
||||||
|
options.max = options.exactly;
|
||||||
|
}
|
||||||
|
|
||||||
|
// not a number = one word par string
|
||||||
|
if (typeof(options.wordsPerString) !== 'number') {
|
||||||
|
options.wordsPerString = 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
//not a function = returns the raw word
|
||||||
|
if (typeof(options.formatter) !== 'function') {
|
||||||
|
options.formatter = (word: string) => word;
|
||||||
|
}
|
||||||
|
|
||||||
|
//not a string = separator is a space
|
||||||
|
if (typeof(options.separator) !== 'string') {
|
||||||
|
options.separator = ' ';
|
||||||
|
}
|
||||||
|
|
||||||
|
var total = options.min + randInt(options.max + 1 - options.min);
|
||||||
|
var results: any = [];
|
||||||
|
var token = '';
|
||||||
|
var relativeIndex = 0;
|
||||||
|
|
||||||
|
for (var i = 0; (i < total * options.wordsPerString); i++) {
|
||||||
|
if (relativeIndex === options.wordsPerString - 1) {
|
||||||
|
token += options.formatter(word(), relativeIndex);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
token += options.formatter(word(), relativeIndex) + options.separator;
|
||||||
|
}
|
||||||
|
relativeIndex++;
|
||||||
|
if ((i + 1) % options.wordsPerString === 0) {
|
||||||
|
results.push(token);
|
||||||
|
token = '';
|
||||||
|
relativeIndex = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
if (typeof options.join === 'string') {
|
||||||
|
results = results.join(options.join);
|
||||||
|
}
|
||||||
|
|
||||||
|
return results;
|
||||||
|
}
|
||||||
10
mast-react/src/sync-worker.ts
Normal file
10
mast-react/src/sync-worker.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
import { Config, defaultConfig } from "@vlcn.io/ws-client";
|
||||||
|
import { start } from "@vlcn.io/ws-client/worker.js";
|
||||||
|
import { createDbProvider } from "@vlcn.io/ws-browserdb";
|
||||||
|
|
||||||
|
export const config: Config = {
|
||||||
|
dbProvider: createDbProvider(),
|
||||||
|
transportProvider: defaultConfig.transportProvider,
|
||||||
|
};
|
||||||
|
|
||||||
|
start(config);
|
||||||
1
mast-react/src/vite-env.d.ts
vendored
Normal file
1
mast-react/src/vite-env.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
/// <reference types="vite/client" />
|
||||||
25
mast-react/tsconfig.json
Normal file
25
mast-react/tsconfig.json
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ESNext",
|
||||||
|
"lib": ["DOM", "DOM.Iterable", "ESNext"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"allowJs": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["src"],
|
||||||
|
"references": [{ "path": "./tsconfig.node.json" }]
|
||||||
|
}
|
||||||
10
mast-react/tsconfig.node.json
Normal file
10
mast-react/tsconfig.node.json
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowSyntheticDefaultImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
36
mast-react/vite.config.ts
Normal file
36
mast-react/vite.config.ts
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
import { defineConfig } from "vite";
|
||||||
|
import react from "@vitejs/plugin-react";
|
||||||
|
import { VitePWA } from "vite-plugin-pwa";
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
build: {
|
||||||
|
target: "esnext",
|
||||||
|
},
|
||||||
|
optimizeDeps: {
|
||||||
|
exclude: ["@vite/client", "@vite/env", "@vlcn.io/crsqlite-wasm"],
|
||||||
|
esbuildOptions: {
|
||||||
|
target: "esnext",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
react(),
|
||||||
|
// VitePWA({
|
||||||
|
// workbox: {
|
||||||
|
// globPatterns: [
|
||||||
|
// "**/*.js",
|
||||||
|
// "**/*.css",
|
||||||
|
// "**/*.svg",
|
||||||
|
// "**/*.html",
|
||||||
|
// "**/*.png",
|
||||||
|
// "**/*.wasm",
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// }),
|
||||||
|
],
|
||||||
|
server: {
|
||||||
|
fs: {
|
||||||
|
strict: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
Loading…
Reference in a new issue