init mast-react
This commit is contained in:
Anish Lakhwara
parent
417a16cc74
commit
d04497f24d
|
|
@ -22,6 +22,3 @@ dist-ssr
|
|||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
dbs/
|
||||
|
||||
public/assets/crsqlite-*.wasm
|
||||
50
mast-react-vite/README.md
Normal file
50
mast-react-vite/README.md
Normal file
|
|
@ -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,
|
||||
},
|
||||
})
|
||||
```
|
||||
20
mast-react-vite/components.json
Normal file
20
mast-react-vite/components.json
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema.json",
|
||||
"style": "new-york",
|
||||
"rsc": false,
|
||||
"tsx": true,
|
||||
"tailwind": {
|
||||
"config": "tailwind.config.js",
|
||||
"css": "src/index.css",
|
||||
"baseColor": "zinc",
|
||||
"cssVariables": true,
|
||||
"prefix": ""
|
||||
},
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils",
|
||||
"ui": "@/components/ui",
|
||||
"lib": "@/lib",
|
||||
"hooks": "@/hooks"
|
||||
}
|
||||
}
|
||||
28
mast-react-vite/eslint.config.js
Normal file
28
mast-react-vite/eslint.config.js
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
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 },
|
||||
],
|
||||
},
|
||||
},
|
||||
)
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
3872
mast-react-vite/package-lock.json
generated
Normal file
3872
mast-react-vite/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
42
mast-react-vite/package.json
Normal file
42
mast-react-vite/package.json
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
{
|
||||
"name": "mast-react",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@radix-ui/react-icons": "^1.3.0",
|
||||
"@tanstack/react-table": "^8.20.5",
|
||||
"@vlcn.io/react": "^3.1.0",
|
||||
"@vlcn.io/rx-tbl": "^0.15.0",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.1.1",
|
||||
"lucide-react": "^0.454.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"tailwind-merge": "^2.5.4",
|
||||
"tailwindcss-animate": "^1.0.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.13.0",
|
||||
"@types/node": "^22.8.2",
|
||||
"@types/react": "^18.3.11",
|
||||
"@types/react-dom": "^18.3.1",
|
||||
"@vitejs/plugin-react-swc": "^3.5.0",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"eslint": "^9.13.0",
|
||||
"eslint-plugin-react-hooks": "^5.0.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.13",
|
||||
"globals": "^15.11.0",
|
||||
"postcss": "^8.4.47",
|
||||
"tailwindcss": "^3.4.14",
|
||||
"typescript": "~5.6.2",
|
||||
"typescript-eslint": "^8.10.0",
|
||||
"vite": "^5.4.9"
|
||||
}
|
||||
}
|
||||
6
mast-react-vite/postcss.config.js
Normal file
6
mast-react-vite/postcss.config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
|
@ -7,19 +7,30 @@
|
|||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 2em;
|
||||
padding: 1.5em;
|
||||
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);
|
||||
|
||||
@keyframes logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
a:nth-of-type(2) .logo {
|
||||
animation: logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
88
mast-react-vite/src/App.tsx
Normal file
88
mast-react-vite/src/App.tsx
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
import { useState } from 'react'
|
||||
import { useCachedState, useQuery } from "@vlcn.io/react";
|
||||
import './App.css'
|
||||
import {
|
||||
ColumnDef,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
useReactTable,
|
||||
} from "@tanstack/react-table"
|
||||
import { DataTable } from "@/components/ui/data-table"
|
||||
import * as addParser from '../../parser/add_parser.js';
|
||||
|
||||
function Marshall(parsed) {
|
||||
let project = "";
|
||||
const tags = [];
|
||||
console.log(parsed);
|
||||
for (const attr of parsed.attributes) {
|
||||
console.log(attr);
|
||||
switch (attr.type) {
|
||||
case 'project':
|
||||
project = attr.value;
|
||||
break;
|
||||
case 'tag':
|
||||
tags.push(attr.value);
|
||||
break;
|
||||
}
|
||||
}
|
||||
return { description: parsed.description, tags: JSON.stringify(tags), project: project };
|
||||
}
|
||||
|
||||
type Todo = {
|
||||
id: string
|
||||
description: string
|
||||
status: 0 | 1
|
||||
tags: string[]
|
||||
project: string
|
||||
}
|
||||
|
||||
export const columns: ColumnDef<Todo>[] = [
|
||||
{
|
||||
accessorKey: "description",
|
||||
header: "Description",
|
||||
},
|
||||
{
|
||||
accessorKey: "project",
|
||||
header: "Project",
|
||||
},
|
||||
{
|
||||
accessorKey: "tags",
|
||||
header: "tags",
|
||||
cell: ({ row }) => {
|
||||
console.log("Tags Parsing: " + row.getValue("tags"))
|
||||
const formatted = JSON.parse(row.getValue("tags"))
|
||||
return <div className="text-right font-medium">{formatted.join(", ")}</div>
|
||||
}
|
||||
},
|
||||
]
|
||||
|
||||
function App({ ctx }) {
|
||||
const todos = useQuery(ctx, "SELECT * FROM todos").data;
|
||||
const [newText, setNewText] = useState("");
|
||||
|
||||
const addTodo = (e) => {
|
||||
if (e.key === "Enter" && e.target.value.trim() !== "") {
|
||||
const parsed = Marshall(addParser.parse(e.target.value));
|
||||
ctx.db.exec(`INSERT INTO todos (id, description, tags, project, completed)
|
||||
VALUES (lower(hex(randomblob(16))), ?, ?, ?, 0)`,
|
||||
[
|
||||
parsed.description,
|
||||
parsed.tags,
|
||||
parsed.project
|
||||
]);
|
||||
setNewText("");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<input type="text"
|
||||
onKeyUp={addTodo}
|
||||
onChange={(e) => setNewText(e.target.value)}
|
||||
/>
|
||||
<DataTable columns={columns} data={todos} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
|
Before Width: | Height: | Size: 4 KiB After Width: | Height: | Size: 4 KiB |
81
mast-react-vite/src/components/ui/data-table.tsx
Normal file
81
mast-react-vite/src/components/ui/data-table.tsx
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
"use client"
|
||||
|
||||
import {
|
||||
ColumnDef,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
useReactTable,
|
||||
} from "@tanstack/react-table"
|
||||
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table"
|
||||
|
||||
interface DataTableProps<TData, TValue> {
|
||||
columns: ColumnDef<TData, TValue>[]
|
||||
data: TData[]
|
||||
}
|
||||
|
||||
export function DataTable<TData, TValue>({
|
||||
columns,
|
||||
data,
|
||||
}: DataTableProps<TData, TValue>) {
|
||||
const table = useReactTable({
|
||||
data,
|
||||
columns,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="bg-zinc-950 dark:bg-white">
|
||||
<Table >
|
||||
<TableHeader>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<TableRow key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header) => {
|
||||
return (
|
||||
<TableHead key={header.id}>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext()
|
||||
)}
|
||||
</TableHead>
|
||||
)
|
||||
})}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{table.getRowModel().rows?.length ? (
|
||||
table.getRowModel().rows.map((row) => (
|
||||
<TableRow
|
||||
key={row.id}
|
||||
data-state={row.getIsSelected() && "selected"}
|
||||
>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<TableCell key={cell.id}>
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<TableRow>
|
||||
<TableCell colSpan={columns.length} className="h-24 text-center">
|
||||
No results.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
120
mast-react-vite/src/components/ui/table.tsx
Normal file
120
mast-react-vite/src/components/ui/table.tsx
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Table = React.forwardRef<
|
||||
HTMLTableElement,
|
||||
React.HTMLAttributes<HTMLTableElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div className="relative w-full overflow-auto">
|
||||
<table
|
||||
ref={ref}
|
||||
className={cn("w-full caption-bottom text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
Table.displayName = "Table"
|
||||
|
||||
const TableHeader = React.forwardRef<
|
||||
HTMLTableSectionElement,
|
||||
React.HTMLAttributes<HTMLTableSectionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
|
||||
))
|
||||
TableHeader.displayName = "TableHeader"
|
||||
|
||||
const TableBody = React.forwardRef<
|
||||
HTMLTableSectionElement,
|
||||
React.HTMLAttributes<HTMLTableSectionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<tbody
|
||||
ref={ref}
|
||||
className={cn("[&_tr:last-child]:border-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TableBody.displayName = "TableBody"
|
||||
|
||||
const TableFooter = React.forwardRef<
|
||||
HTMLTableSectionElement,
|
||||
React.HTMLAttributes<HTMLTableSectionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<tfoot
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TableFooter.displayName = "TableFooter"
|
||||
|
||||
const TableRow = React.forwardRef<
|
||||
HTMLTableRowElement,
|
||||
React.HTMLAttributes<HTMLTableRowElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<tr
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TableRow.displayName = "TableRow"
|
||||
|
||||
const TableHead = React.forwardRef<
|
||||
HTMLTableCellElement,
|
||||
React.ThHTMLAttributes<HTMLTableCellElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<th
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TableHead.displayName = "TableHead"
|
||||
|
||||
const TableCell = React.forwardRef<
|
||||
HTMLTableCellElement,
|
||||
React.TdHTMLAttributes<HTMLTableCellElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<td
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TableCell.displayName = "TableCell"
|
||||
|
||||
const TableCaption = React.forwardRef<
|
||||
HTMLTableCaptionElement,
|
||||
React.HTMLAttributes<HTMLTableCaptionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<caption
|
||||
ref={ref}
|
||||
className={cn("mt-4 text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TableCaption.displayName = "TableCaption"
|
||||
|
||||
export {
|
||||
Table,
|
||||
TableHeader,
|
||||
TableBody,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TableCell,
|
||||
TableCaption,
|
||||
}
|
||||
|
|
@ -1,3 +1,7 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
|
|
@ -11,7 +15,6 @@
|
|||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -55,34 +58,6 @@ 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;
|
||||
6
mast-react-vite/src/lib/utils.ts
Normal file
6
mast-react-vite/src/lib/utils.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
import { clsx, type ClassValue } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
33
mast-react-vite/src/main.tsx
Normal file
33
mast-react-vite/src/main.tsx
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from "./App.tsx";
|
||||
|
||||
import initWasm from '@vlcn.io/crsqlite-wasm';
|
||||
import wasmUrl from '@vlcn.io/crsqlite-wasm/crsqlite.wasm?url';
|
||||
import tblrx from '@vlcn.io/rx-tbl';
|
||||
|
||||
const sqlite = await initWasm(() => wasmUrl);
|
||||
|
||||
const db = await sqlite.open("todo.db");
|
||||
await db.exec(`
|
||||
CREATE TABLE IF NOT EXISTS todos (
|
||||
id BLOB PRIMARY KEY NOT NULL,
|
||||
description TEXT,
|
||||
project text,
|
||||
tags text,
|
||||
due text,
|
||||
wait text,
|
||||
priority text,
|
||||
urgency real,
|
||||
completed INTEGER NOT NULL DEFAULT 0
|
||||
);
|
||||
SELECT crsql_as_crr('todos');
|
||||
`);
|
||||
|
||||
const rx = tblrx(db);
|
||||
const ctx = { db, rx };
|
||||
|
||||
createRoot(document.getElementById("root") as HTMLElement).render(
|
||||
<App ctx={ctx} />
|
||||
);
|
||||
60
mast-react-vite/tailwind.config.js
Normal file
60
mast-react-vite/tailwind.config.js
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
darkMode: ["class"],
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/.{js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
borderRadius: {
|
||||
lg: 'var(--radius)',
|
||||
md: 'calc(var(--radius) - 2px)',
|
||||
sm: 'calc(var(--radius) - 4px)'
|
||||
},
|
||||
colors: {
|
||||
background: 'hsl(var(--background))',
|
||||
foreground: 'hsl(var(--foreground))',
|
||||
card: {
|
||||
DEFAULT: 'hsl(var(--card))',
|
||||
foreground: 'hsl(var(--card-foreground))'
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: 'hsl(var(--popover))',
|
||||
foreground: 'hsl(var(--popover-foreground))'
|
||||
},
|
||||
primary: {
|
||||
DEFAULT: 'hsl(var(--primary))',
|
||||
foreground: 'hsl(var(--primary-foreground))'
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: 'hsl(var(--secondary))',
|
||||
foreground: 'hsl(var(--secondary-foreground))'
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: 'hsl(var(--muted))',
|
||||
foreground: 'hsl(var(--muted-foreground))'
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: 'hsl(var(--accent))',
|
||||
foreground: 'hsl(var(--accent-foreground))'
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: 'hsl(var(--destructive))',
|
||||
foreground: 'hsl(var(--destructive-foreground))'
|
||||
},
|
||||
border: 'hsl(var(--border))',
|
||||
input: 'hsl(var(--input))',
|
||||
ring: 'hsl(var(--ring))',
|
||||
chart: {
|
||||
'1': 'hsl(var(--chart-1))',
|
||||
'2': 'hsl(var(--chart-2))',
|
||||
'3': 'hsl(var(--chart-3))',
|
||||
'4': 'hsl(var(--chart-4))',
|
||||
'5': 'hsl(var(--chart-5))'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: [require("tailwindcss-animate")],
|
||||
}
|
||||
36
mast-react-vite/tsconfig.app.json
Normal file
36
mast-react-vite/tsconfig.app.json
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": [
|
||||
"ES2020",
|
||||
"DOM",
|
||||
"DOM.Iterable"
|
||||
],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "Bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true,
|
||||
/* shadcn */
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./src/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
]
|
||||
}
|
||||
19
mast-react-vite/tsconfig.json
Normal file
19
mast-react-vite/tsconfig.json
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.app.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.node.json"
|
||||
}
|
||||
],
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./src/*"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
23
mast-react-vite/tsconfig.node.json
Normal file
23
mast-react-vite/tsconfig.node.json
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "Bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
13
mast-react-vite/vite.config.ts
Normal file
13
mast-react-vite/vite.config.ts
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react-swc'
|
||||
import path from "path"
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": path.resolve(__dirname, "./src"),
|
||||
},
|
||||
},
|
||||
})
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
fly.toml
|
||||
Dockerfile
|
||||
.dockerignore
|
||||
node_modules
|
||||
.git
|
||||
dbs
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
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',
|
||||
},
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"trailingComma": "es5",
|
||||
"tabWidth": 2,
|
||||
"singleQuote": false
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
nodeLinker: node-modules
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
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" ]
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
# 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.
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
# 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}"
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
# 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
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
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
|
||||
```
|
||||
7718
mast-react/package-lock.json
generated
7718
mast-react/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -1,38 +0,0 @@
|
|||
{
|
||||
"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",
|
||||
"uuid4": "^2.0.3",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,23 +0,0 @@
|
|||
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);
|
||||
|
|
@ -1,148 +0,0 @@
|
|||
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
|
||||
? "-"
|
||||
: "_"),
|
||||
""
|
||||
);
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
import App from "./App.tsx";
|
||||
import schemaContent from "./schemas/main2.sql?raw";
|
||||
import { DBProvider } from "@vlcn.io/react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 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() {
|
||||
let uuid = uuidv4();
|
||||
return uuid.replaceAll("-", "");
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
|
|
@ -1,13 +0,0 @@
|
|||
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>
|
||||
);
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
CREATE TABLE IF NOT EXISTS test (id PRIMARY KEY NOT NULL, name TEXT);
|
||||
SELECT crsql_as_crr('test');
|
||||
|
|
@ -1,338 +0,0 @@
|
|||
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;
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
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,25 +0,0 @@
|
|||
{
|
||||
"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" }]
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
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