remove svelte/react experiments for now
don't want to have to deal with security warnings from GitHub about outdated dependencies while not actively using the code
This commit is contained in:
Damien Elmes
parent
aa44240302
commit
c298bae1ff
@ -46,7 +46,6 @@ Subcomponents
|
||||
is only a tiny subsection at the moment.
|
||||
- proto contains the interface used to communicate between different
|
||||
languages.
|
||||
- tslib and react are just an experiment at the moment.
|
||||
|
||||
Makefile
|
||||
--------------
|
||||
|
||||
@ -1 +0,0 @@
|
||||
EXTEND_ESLINT=true
|
||||
@ -1,9 +0,0 @@
|
||||
module.exports = {
|
||||
extends: ["react-app"],
|
||||
rules: {
|
||||
"@typescript-eslint/no-unused-vars": [
|
||||
"error",
|
||||
{ argsIgnorePattern: "^_", varsIgnorePattern: "^_" }
|
||||
]
|
||||
},
|
||||
};
|
||||
24
react/.gitignore
vendored
24
react/.gitignore
vendored
@ -1,24 +0,0 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
.vscode
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
@ -1,35 +0,0 @@
|
||||
SHELL := /bin/bash
|
||||
|
||||
.SHELLFLAGS := -eu -o pipefail -c
|
||||
.DELETE_ON_ERROR:
|
||||
MAKEFLAGS += --warn-undefined-variables
|
||||
MAKEFLAGS += --no-builtin-rules
|
||||
.SUFFIXES:
|
||||
|
||||
$(shell mkdir -p .build)
|
||||
|
||||
.PHONY: all
|
||||
all: run
|
||||
|
||||
.PHONY: run
|
||||
run: build-tslib
|
||||
tmux new -d -s anki-react "make run-pybackend"
|
||||
tmux split-window "make run-react"
|
||||
tmux attach
|
||||
|
||||
.PHONY: run-pybackend
|
||||
run-pybackend:
|
||||
../pyenv/bin/pip install bottle
|
||||
../pyenv/bin/python pybackend.py
|
||||
|
||||
.PHONY: build-tslib
|
||||
build-tslib:
|
||||
(cd ../tslib && make build)
|
||||
|
||||
.PHONY: run-react
|
||||
run-react: .build/deps
|
||||
npm run start
|
||||
|
||||
.build/deps: package.json
|
||||
npm i
|
||||
@touch $@
|
||||
13
react/README
13
react/README
@ -1,13 +0,0 @@
|
||||
This is a proof of concept for an alternate, web-based UI. It is in the very
|
||||
early stages, and does not do anything useful at the moment.
|
||||
|
||||
The code uses the helpers in ../tslib to communicate with the Python
|
||||
backend defined in ../pylib/anki/pybackend.py, leveraging the same
|
||||
protobuf definitions used for the Rust/Python bridge.
|
||||
|
||||
To try it:
|
||||
|
||||
- ensure 'tmux' is installed
|
||||
- run 'make run' in the top level folder and close Anki
|
||||
- copy a test .anki2 file to ~/test.anki2
|
||||
- run 'make run' in this folder
|
||||
15598
react/package-lock.json
generated
15598
react/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,54 +0,0 @@
|
||||
{
|
||||
"name": "anki-react",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@testing-library/jest-dom": "^4.2.4",
|
||||
"@testing-library/react": "^9.3.2",
|
||||
"@testing-library/user-event": "^7.1.2",
|
||||
"@types/jest": "^24.0.23",
|
||||
"@types/node": "^12.12.14",
|
||||
"@types/react": "^16.9.15",
|
||||
"@types/react-dom": "^16.9.4",
|
||||
"react": "^16.12.0",
|
||||
"react-dom": "^16.12.0",
|
||||
"react-scripts": "3.3.0",
|
||||
"typescript": "^3.7.3",
|
||||
"anki": "../tslib"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": "react-app"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react-router-dom": "^5.1.3",
|
||||
"@types/react-virtualized-auto-sizer": "^1.0.0",
|
||||
"@types/react-window": "^1.8.1",
|
||||
"eslint": "^6.8.0",
|
||||
"prettier": "^1.19.1",
|
||||
"protobufjs": "^6.8.8",
|
||||
"react-router-dom": "^5.1.2",
|
||||
"react-split-pane": "^0.1.89",
|
||||
"react-virtualized-auto-sizer": "^1.0.2",
|
||||
"react-window": "^1.8.5",
|
||||
"typescript-plugin-css-modules": "^2.1.1"
|
||||
},
|
||||
"proxy": "http://localhost:5006/"
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<title>Anki</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,2 +0,0 @@
|
||||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
@ -1,19 +0,0 @@
|
||||
from bottle import run, route, request, response
|
||||
from anki.pybackend import PythonBackend
|
||||
from anki import Collection
|
||||
import sys, os
|
||||
|
||||
path = os.path.expanduser("~/test.anki2")
|
||||
if not os.path.exists(path):
|
||||
print(f"to use, copy your collection to {path}")
|
||||
sys.exit(1)
|
||||
|
||||
col = Collection(path)
|
||||
backend = PythonBackend(col)
|
||||
|
||||
@route('/request', method="POST")
|
||||
def proto_request():
|
||||
response.content_type = 'application/protobuf'
|
||||
return backend.run_command_bytes(request.body.read())
|
||||
|
||||
run(host='localhost', port=5006)
|
||||
@ -1,9 +0,0 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import "./ui/index.css";
|
||||
import App from "./ui/App";
|
||||
import * as serviceWorker from "./serviceWorker";
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById("root"));
|
||||
|
||||
serviceWorker.unregister();
|
||||
1
react/src/react-app-env.d.ts
vendored
1
react/src/react-app-env.d.ts
vendored
@ -1 +0,0 @@
|
||||
/// <reference types="react-scripts" />
|
||||
@ -1,145 +0,0 @@
|
||||
// This optional code is used to register a service worker.
|
||||
// register() is not called by default.
|
||||
|
||||
// This lets the app load faster on subsequent visits in production, and gives
|
||||
// it offline capabilities. However, it also means that developers (and users)
|
||||
// will only see deployed updates on subsequent visits to a page, after all the
|
||||
// existing tabs open on the page have been closed, since previously cached
|
||||
// resources are updated in the background.
|
||||
|
||||
// To learn more about the benefits of this model and instructions on how to
|
||||
// opt-in, read https://bit.ly/CRA-PWA
|
||||
|
||||
const isLocalhost = Boolean(
|
||||
window.location.hostname === 'localhost' ||
|
||||
// [::1] is the IPv6 localhost address.
|
||||
window.location.hostname === '[::1]' ||
|
||||
// 127.0.0.0/8 are considered localhost for IPv4.
|
||||
window.location.hostname.match(
|
||||
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
|
||||
)
|
||||
);
|
||||
|
||||
type Config = {
|
||||
onSuccess?: (registration: ServiceWorkerRegistration) => void;
|
||||
onUpdate?: (registration: ServiceWorkerRegistration) => void;
|
||||
};
|
||||
|
||||
export function register(config?: Config) {
|
||||
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
|
||||
// The URL constructor is available in all browsers that support SW.
|
||||
const publicUrl = new URL(
|
||||
process.env.PUBLIC_URL,
|
||||
window.location.href
|
||||
);
|
||||
if (publicUrl.origin !== window.location.origin) {
|
||||
// Our service worker won't work if PUBLIC_URL is on a different origin
|
||||
// from what our page is served on. This might happen if a CDN is used to
|
||||
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
|
||||
return;
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
|
||||
|
||||
if (isLocalhost) {
|
||||
// This is running on localhost. Let's check if a service worker still exists or not.
|
||||
checkValidServiceWorker(swUrl, config);
|
||||
|
||||
// Add some additional logging to localhost, pointing developers to the
|
||||
// service worker/PWA documentation.
|
||||
navigator.serviceWorker.ready.then(() => {
|
||||
console.log(
|
||||
'This web app is being served cache-first by a service ' +
|
||||
'worker. To learn more, visit https://bit.ly/CRA-PWA'
|
||||
);
|
||||
});
|
||||
} else {
|
||||
// Is not localhost. Just register service worker
|
||||
registerValidSW(swUrl, config);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function registerValidSW(swUrl: string, config?: Config) {
|
||||
navigator.serviceWorker
|
||||
.register(swUrl)
|
||||
.then(registration => {
|
||||
registration.onupdatefound = () => {
|
||||
const installingWorker = registration.installing;
|
||||
if (installingWorker == null) {
|
||||
return;
|
||||
}
|
||||
installingWorker.onstatechange = () => {
|
||||
if (installingWorker.state === 'installed') {
|
||||
if (navigator.serviceWorker.controller) {
|
||||
// At this point, the updated precached content has been fetched,
|
||||
// but the previous service worker will still serve the older
|
||||
// content until all client tabs are closed.
|
||||
console.log(
|
||||
'New content is available and will be used when all ' +
|
||||
'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
|
||||
);
|
||||
|
||||
// Execute callback
|
||||
if (config && config.onUpdate) {
|
||||
config.onUpdate(registration);
|
||||
}
|
||||
} else {
|
||||
// At this point, everything has been precached.
|
||||
// It's the perfect time to display a
|
||||
// "Content is cached for offline use." message.
|
||||
console.log('Content is cached for offline use.');
|
||||
|
||||
// Execute callback
|
||||
if (config && config.onSuccess) {
|
||||
config.onSuccess(registration);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error during service worker registration:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function checkValidServiceWorker(swUrl: string, config?: Config) {
|
||||
// Check if the service worker can be found. If it can't reload the page.
|
||||
fetch(swUrl, {
|
||||
headers: { 'Service-Worker': 'script' }
|
||||
})
|
||||
.then(response => {
|
||||
// Ensure service worker exists, and that we really are getting a JS file.
|
||||
const contentType = response.headers.get('content-type');
|
||||
if (
|
||||
response.status === 404 ||
|
||||
(contentType != null && contentType.indexOf('javascript') === -1)
|
||||
) {
|
||||
// No service worker found. Probably a different app. Reload the page.
|
||||
navigator.serviceWorker.ready.then(registration => {
|
||||
registration.unregister().then(() => {
|
||||
window.location.reload();
|
||||
});
|
||||
});
|
||||
} else {
|
||||
// Service worker found. Proceed as normal.
|
||||
registerValidSW(swUrl, config);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
console.log(
|
||||
'No internet connection found. App is running in offline mode.'
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
export function unregister() {
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.ready.then(registration => {
|
||||
registration.unregister();
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
||||
// allows you to do things like:
|
||||
// expect(element).toHaveTextContent(/react/i)
|
||||
// learn more: https://github.com/testing-library/jest-dom
|
||||
import '@testing-library/jest-dom/extend-expect';
|
||||
@ -1,117 +0,0 @@
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #f7f7f7;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #333;
|
||||
box-sizing: border-box;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgb(0, 100, 200);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: rgb(0, 80, 160);
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
padding: 0.4em;
|
||||
margin: 0 0 0.5em 0;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
input:disabled {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
color: #333;
|
||||
background-color: #f4f4f4;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button:active {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
border-color: #666;
|
||||
}
|
||||
|
||||
.Resizer {
|
||||
background: #000;
|
||||
opacity: 0.2;
|
||||
z-index: 1;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.Resizer:hover {
|
||||
-webkit-transition: all 2s ease;
|
||||
transition: all 2s ease;
|
||||
}
|
||||
|
||||
.Resizer.horizontal {
|
||||
height: 11px;
|
||||
margin: -5px 0;
|
||||
border-top: 5px solid rgba(255, 255, 255, 0);
|
||||
border-bottom: 5px solid rgba(255, 255, 255, 0);
|
||||
cursor: row-resize;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.Resizer.horizontal:hover {
|
||||
border-top: 5px solid rgba(0, 0, 0, 0.5);
|
||||
border-bottom: 5px solid rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.Resizer.vertical {
|
||||
width: 11px;
|
||||
margin: 0 -5px;
|
||||
border-left: 5px solid rgba(255, 255, 255, 0);
|
||||
border-right: 5px solid rgba(255, 255, 255, 0);
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
.Resizer.vertical:hover {
|
||||
border-left: 5px solid rgba(0, 0, 0, 0.5);
|
||||
border-right: 5px solid rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.Resizer.disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.Resizer.disabled:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
import React from "react";
|
||||
import { render } from "@testing-library/react";
|
||||
import App from "./App";
|
||||
|
||||
test("renders link", () => {
|
||||
const { getByText } = render(<App />);
|
||||
const linkElement = getByText(/decks/i);
|
||||
expect(linkElement).toBeInTheDocument();
|
||||
});
|
||||
@ -1,33 +0,0 @@
|
||||
import "./App.css";
|
||||
import React from "react";
|
||||
import { Switch, Route, Link, HashRouter } from "react-router-dom";
|
||||
import { DeckDueScreen } from "./DeckScreen";
|
||||
import { BrowseScreen } from "./BrowseScreen";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<HashRouter hashType="slash">
|
||||
<div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
|
||||
<ul>
|
||||
<li>
|
||||
<Link to="/decks">Decks</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/browse">Browse</Link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<hr />
|
||||
|
||||
<Switch>
|
||||
<Route exact path="/decks">
|
||||
<DeckDueScreen />
|
||||
</Route>
|
||||
<Route path="/browse">
|
||||
<BrowseScreen />
|
||||
</Route>
|
||||
</Switch>
|
||||
</div>
|
||||
</HashRouter>
|
||||
);
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
.row {
|
||||
/* ensures text is center-aligned */
|
||||
line-height: 2em;
|
||||
height: 2em;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
background-color: white;
|
||||
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
|
||||
.rowAlt {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.rowSelected {
|
||||
background-color: #77f;
|
||||
}
|
||||
@ -1,51 +0,0 @@
|
||||
import { useEffect, useState, CSSProperties, memo } from "react";
|
||||
import { Browser } from "anki/dist/browser";
|
||||
import React from "react";
|
||||
import styles from "./BrowseRow.module.css";
|
||||
|
||||
interface BrowseRow {
|
||||
index: number;
|
||||
style: CSSProperties;
|
||||
data: BrowserData;
|
||||
}
|
||||
|
||||
interface BrowserData {
|
||||
browser: Browser;
|
||||
}
|
||||
|
||||
export const BrowseRow = memo(
|
||||
({ index, style, data: { browser } }: BrowseRow) => {
|
||||
const [data, setData] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
const idx = index;
|
||||
browser.getRowData(idx, setData);
|
||||
console.log(`effect ${index}`);
|
||||
|
||||
return function cleanup() {
|
||||
browser.cancelRequest(index);
|
||||
};
|
||||
}, [index, browser]);
|
||||
|
||||
const onClick = () => {
|
||||
browser.selectOnly(index);
|
||||
// fixme: better way to trigger refresh
|
||||
setData(data + " ");
|
||||
};
|
||||
|
||||
const classes = [styles.row];
|
||||
if (index % 2) {
|
||||
classes.push(styles.rowAlt);
|
||||
}
|
||||
if (browser.rowIsSelected(index)) {
|
||||
classes.push(styles.rowSelected);
|
||||
}
|
||||
|
||||
console.log(`render ${index}`);
|
||||
return (
|
||||
<div style={style} className={classes.join(" ")} onClick={onClick}>
|
||||
Item {index}: {data}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
@ -1,37 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import { Browser } from "anki/dist/browser";
|
||||
import { BrowseTable } from "./BrowseTable";
|
||||
import { BrowseSearchInput } from "./BrowseSearchInput";
|
||||
import SplitPane from "react-split-pane";
|
||||
|
||||
export const BrowseScreen = () => {
|
||||
const [browser, setBrowser] = useState<Browser | null>(null);
|
||||
|
||||
const onSearchChanged = (txt: string) => {
|
||||
const s = new Browser();
|
||||
setBrowser(null);
|
||||
s.search(txt)
|
||||
.then(() => setBrowser(s))
|
||||
.catch(err => {
|
||||
throw Error(err);
|
||||
});
|
||||
};
|
||||
|
||||
console.log("render browser");
|
||||
|
||||
return (
|
||||
<div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
|
||||
<div>
|
||||
<BrowseSearchInput onSearchChanged={onSearchChanged} />
|
||||
</div>
|
||||
<div style={{ position: "relative", height: "100%" }}>
|
||||
<SplitPane split="horizontal" minSize={50} defaultSize={500}>
|
||||
<div style={{ flexBasis: "100%" }} tabIndex={0}>
|
||||
<BrowseTable browser={browser} />
|
||||
</div>
|
||||
<div>Editing Area</div>
|
||||
</SplitPane>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,30 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
interface BrowseSearchInputProps {
|
||||
onSearchChanged: (txt: string) => void;
|
||||
}
|
||||
|
||||
export const BrowseSearchInput = ({
|
||||
onSearchChanged
|
||||
}: BrowseSearchInputProps) => {
|
||||
let currentInput = "";
|
||||
|
||||
function onInput(e: React.FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault();
|
||||
onSearchChanged(currentInput);
|
||||
}
|
||||
|
||||
function onInputChange(e: React.FormEvent<HTMLInputElement>) {
|
||||
currentInput = (e.target as any).value;
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={onInput}>
|
||||
<input
|
||||
onChange={onInputChange}
|
||||
autoFocus
|
||||
placeholder="Hit enter to search"
|
||||
/>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
@ -1,33 +0,0 @@
|
||||
import React from "react";
|
||||
import { FixedSizeList } from "react-window";
|
||||
import AutoSizer from "react-virtualized-auto-sizer";
|
||||
import { Browser } from "anki/dist/browser";
|
||||
import { BrowseRow } from "./BrowseRow";
|
||||
|
||||
interface BrowseTableProps {
|
||||
browser: Browser | null;
|
||||
}
|
||||
|
||||
export const BrowseTable: React.FC<BrowseTableProps> = ({ browser }) => {
|
||||
if (!browser) {
|
||||
return <div />;
|
||||
} else {
|
||||
return (
|
||||
<AutoSizer>
|
||||
{({ height, width }) => (
|
||||
<div tabIndex={0}>
|
||||
<FixedSizeList
|
||||
height={height}
|
||||
itemCount={browser.rows()}
|
||||
itemSize={35}
|
||||
width={width}
|
||||
itemData={{ browser }}
|
||||
>
|
||||
{BrowseRow}
|
||||
</FixedSizeList>
|
||||
</div>
|
||||
)}
|
||||
</AutoSizer>
|
||||
);
|
||||
}
|
||||
};
|
||||
@ -1,36 +0,0 @@
|
||||
button {
|
||||
border: none;
|
||||
background: none;
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
.nodeOuter {
|
||||
border-bottom: 1px solid #eee;
|
||||
margin-bottom: 5px;
|
||||
transition: 1s ease-in;
|
||||
transition-property: height;
|
||||
}
|
||||
|
||||
.nodeInner {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.counts {
|
||||
float: right;
|
||||
font-size: smaller;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.new {
|
||||
color: #000099;
|
||||
}
|
||||
.due {
|
||||
color: #007700;
|
||||
}
|
||||
|
||||
.dueTable {
|
||||
max-width: 50em;
|
||||
min-width: 40vw;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
@ -1,69 +0,0 @@
|
||||
import React from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
import "./DeckScreen.css";
|
||||
import "./App.css";
|
||||
|
||||
import { deckTree, pb as pt } from "anki/dist/backend";
|
||||
|
||||
export const DeckDueScreen: React.FC = () => {
|
||||
const [decks, setDecks] = useState<pt.IDeckTreeNode[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!decks.length) {
|
||||
getTopNode();
|
||||
}
|
||||
});
|
||||
|
||||
const getTopNode = async () => {
|
||||
setDecks(await deckTree());
|
||||
};
|
||||
|
||||
const rows = decks.map(deck => (
|
||||
<DeckRow key={deck.deckId?.toString()} deck={deck} />
|
||||
));
|
||||
|
||||
return <div className="dueTable">{rows}</div>;
|
||||
};
|
||||
|
||||
type DeckRowProps = {
|
||||
deck: pt.IDeckTreeNode;
|
||||
};
|
||||
|
||||
const DeckRow: React.FC<DeckRowProps> = ({ deck }) => {
|
||||
const name = deck.names![deck.names!.length - 1];
|
||||
const dueCount = deck.reviewCount! + deck.learnCount!;
|
||||
const haveChildren = deck.children!.length > 0;
|
||||
const indent = deck.names!.length > 1 ? 1 : 0;
|
||||
const [collapsed, setCollapsed] = useState(deck.collapsed!);
|
||||
|
||||
const onClick = () => {
|
||||
setCollapsed(!collapsed);
|
||||
console.log(`collapsed now ${collapsed}`);
|
||||
};
|
||||
|
||||
console.log(`drawing ${name}`);
|
||||
|
||||
return (
|
||||
<div className="nodeOuter" style={{ marginLeft: indent * 15 + "px" }}>
|
||||
<div className="nodeInner">
|
||||
{haveChildren ? (
|
||||
<button onClick={onClick}>{collapsed ? "+" : "-"}</button>
|
||||
) : (
|
||||
<button />
|
||||
)}
|
||||
{name}
|
||||
<div className="counts">
|
||||
<span className="due">{dueCount}</span>
|
||||
<br />
|
||||
<span className="new">{deck.newCount}</span>
|
||||
</div>
|
||||
</div>
|
||||
{collapsed
|
||||
? ""
|
||||
: deck.children!.map(deck => (
|
||||
<DeckRow key={deck.deckId?.toString()} deck={deck} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,20 +0,0 @@
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
|
||||
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
|
||||
monospace;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react",
|
||||
"plugins": [
|
||||
{
|
||||
"name": "typescript-plugin-css-modules"
|
||||
}
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
]
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
webpack.config.js
|
||||
@ -1,29 +0,0 @@
|
||||
module.exports = {
|
||||
extends: ["eslint:recommended"],
|
||||
parserOptions: {
|
||||
ecmaVersion: 2019,
|
||||
sourceType: "module"
|
||||
},
|
||||
env: {
|
||||
es6: true,
|
||||
browser: true
|
||||
},
|
||||
plugins: ["svelte3"],
|
||||
overrides: [
|
||||
{
|
||||
files: ["**/*.svelte"],
|
||||
processor: "svelte3/svelte3"
|
||||
}
|
||||
],
|
||||
rules: {
|
||||
"@typescript-eslint/no-unused-vars": [
|
||||
"error",
|
||||
{ argsIgnorePattern: "^_", varsIgnorePattern: "^_" }
|
||||
],
|
||||
"no-unused-vars": [
|
||||
"error",
|
||||
{ argsIgnorePattern: "^_", varsIgnorePattern: "^_" }
|
||||
]
|
||||
},
|
||||
settings: {}
|
||||
};
|
||||
6
svelte/.gitignore
vendored
6
svelte/.gitignore
vendored
@ -1,6 +0,0 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
public/bundle.*
|
||||
dist
|
||||
es
|
||||
.vscode
|
||||
@ -1,6 +0,0 @@
|
||||
{
|
||||
"svelteSortOrder" : "styles-scripts-markup",
|
||||
"svelteStrictMode": true,
|
||||
"svelteBracketNewLine": true,
|
||||
"pluginSearchDirs": ["."]
|
||||
}
|
||||
@ -1,39 +0,0 @@
|
||||
SHELL := /bin/bash
|
||||
|
||||
.SHELLFLAGS := -eu -o pipefail -c
|
||||
.DELETE_ON_ERROR:
|
||||
MAKEFLAGS += --warn-undefined-variables
|
||||
MAKEFLAGS += --no-builtin-rules
|
||||
.SUFFIXES:
|
||||
|
||||
$(shell mkdir -p .build)
|
||||
|
||||
.PHONY: all
|
||||
all: run
|
||||
|
||||
.PHONY: run
|
||||
run: build-tslib
|
||||
tmux new -d -s anki-react "make run-pybackend"
|
||||
tmux split-window "make run-svelte"
|
||||
tmux attach
|
||||
|
||||
.PHONY: run-pybackend
|
||||
run-pybackend:
|
||||
../pyenv/bin/pip install bottle
|
||||
../pyenv/bin/python ../react/pybackend.py
|
||||
|
||||
.PHONY: build-tslib
|
||||
build-tslib:
|
||||
(cd ../tslib && make build)
|
||||
|
||||
.PHONY: run-svelte
|
||||
run-svelte: .build/deps
|
||||
npm run dev
|
||||
|
||||
.build/deps: package.json
|
||||
npm i
|
||||
@touch $@
|
||||
|
||||
.PHONY: svelete-lint
|
||||
svelte-lint:
|
||||
npx --no-install svelte-type-checker
|
||||
@ -1,2 +0,0 @@
|
||||
This is another experiment, using Svelte instead of React for the UI.
|
||||
Instructions are the same as ../react/README
|
||||
11317
svelte/package-lock.json
generated
11317
svelte/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,41 +0,0 @@
|
||||
{
|
||||
"name": "anki-svelte",
|
||||
"version": "0.1.0",
|
||||
"devDependencies": {
|
||||
"@sveltejs/svelte-virtual-list": "^3.0.1",
|
||||
"@types/jest": "^24.0.23",
|
||||
"@typescript-eslint/eslint-plugin": "^2.11.0",
|
||||
"@typescript-eslint/parser": "^2.11.0",
|
||||
"cross-env": "^5.2.0",
|
||||
"css-loader": "^2.1.1",
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-loader": "^3.0.3",
|
||||
"eslint-plugin-svelte3": "^2.7.3",
|
||||
"jest": "^24.9.0",
|
||||
"mini-css-extract-plugin": "^0.6.0",
|
||||
"node-fetch": "^2.6.0",
|
||||
"prettier": "^1.19.1",
|
||||
"prettier-plugin-svelte": "^0.7.0",
|
||||
"serve": "^11.0.0",
|
||||
"style-loader": "^0.23.1",
|
||||
"svelte": "^3.16.0",
|
||||
"svelte-loader": "^2.13.3",
|
||||
"svelte-spa-router": "^2.0.0",
|
||||
"svelte-type-checker": "^0.1.4",
|
||||
"ts-jest": "^24.2.0",
|
||||
"ts-loader": "^6.2.1",
|
||||
"typescript": "^3.7.3",
|
||||
"webpack": "^4.30.0",
|
||||
"webpack-cli": "^3.3.0",
|
||||
"webpack-dev-server": "^3.3.1",
|
||||
"anki": "../tslib"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "cross-env NODE_ENV=production webpack",
|
||||
"dev": "webpack-dev-server --content-base public"
|
||||
},
|
||||
"dependencies": {
|
||||
"protobufjs": "^6.8.8"
|
||||
},
|
||||
"proxy": "http://localhost:5006/"
|
||||
}
|
||||
@ -1,63 +0,0 @@
|
||||
html, body {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #f7f7f7;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #333;
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgb(0,100,200);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: rgb(0,80,160);
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input, button, select, textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
padding: 0.4em;
|
||||
margin: 0 0 0.5em 0;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
input:disabled {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
color: #333;
|
||||
background-color: #f4f4f4;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button:active {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
border-color: #666;
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<meta name='viewport' content='width=device-width'>
|
||||
|
||||
<title>Anki</title>
|
||||
|
||||
<link rel='stylesheet' href='global.css'>
|
||||
<link rel='stylesheet' href='bundle.css'>
|
||||
|
||||
<script defer src='bundle.js'></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,31 +0,0 @@
|
||||
<style>
|
||||
/* Style for "active" links; need to mark this :global because the router adds the class directly */
|
||||
:global(a.active) {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import DeckDueTree from "./DeckDueTree.svelte";
|
||||
import BrowseScreen from "./BrowseScreen.svelte";
|
||||
|
||||
import Router from "svelte-spa-router";
|
||||
|
||||
import { link } from "svelte-spa-router";
|
||||
import active from "svelte-spa-router/active";
|
||||
|
||||
const routes = {
|
||||
// Exact path
|
||||
"/": DeckDueTree,
|
||||
"/browse": BrowseScreen
|
||||
};
|
||||
</script>
|
||||
|
||||
<body>
|
||||
<nav>
|
||||
<a href="/" use:link use:active>Decks</a>
|
||||
<a href="/browse" use:link use:active>Browse</a>
|
||||
|
||||
</nav>
|
||||
<Router {routes} />
|
||||
</body>
|
||||
@ -1,43 +0,0 @@
|
||||
<style>
|
||||
.row {
|
||||
/* ensures text is center-aligned */
|
||||
line-height: 35px;
|
||||
height: 35px;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
background-color: white;
|
||||
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
|
||||
.rowAlt {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.rowSelected {
|
||||
background-color: #77f;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { Browser } from "anki/dist/browser";
|
||||
import { onMount, onDestroy } from "svelte";
|
||||
|
||||
export let idx = 0;
|
||||
export let browser = new Browser();
|
||||
|
||||
$: cardData = null;
|
||||
|
||||
onMount(() => {
|
||||
browser.getRowData(idx, data => (cardData = data));
|
||||
});
|
||||
onDestroy(() => {
|
||||
browser.cancelRequest(idx);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="row" class:rowAlt="{idx % 2 === 0}" class:rowSelected="{false}">
|
||||
{#if cardData !== null}{idx}: {cardData}{/if}
|
||||
</div>
|
||||
@ -1,21 +0,0 @@
|
||||
<script>
|
||||
import BrowseTable from "./BrowseTable";
|
||||
import BrowseSearchInput from "./BrowseSearchInput";
|
||||
import { Browser } from "anki/dist/browser";
|
||||
|
||||
let browser = new Browser();
|
||||
|
||||
async function onSearchEnter(evt) {
|
||||
console.log(`got ${evt.detail.searchText}`);
|
||||
browser = new Browser();
|
||||
|
||||
const b = new Browser();
|
||||
await b.search(evt.detail.searchText);
|
||||
browser = b;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<BrowseSearchInput on:enter="{onSearchEnter}" />
|
||||
</div>
|
||||
<BrowseTable {browser} />
|
||||
@ -1,21 +0,0 @@
|
||||
<script>
|
||||
import { createEventDispatcher } from "svelte";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let searchText;
|
||||
|
||||
function onKeyUp(e) {
|
||||
if (e.keyCode === 13) {
|
||||
console.log(`on key up: e.target.keycode`);
|
||||
dispatch("enter", { searchText });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<input
|
||||
bind:value="{searchText}"
|
||||
placeholder="hit enter to search"
|
||||
on:keyup="{onKeyUp}"
|
||||
autofocus
|
||||
/>
|
||||
@ -1,17 +0,0 @@
|
||||
<script>
|
||||
import VirtualList from "@sveltejs/svelte-virtual-list";
|
||||
import BrowseRow from "./BrowseRow.svelte";
|
||||
|
||||
export let browser;
|
||||
|
||||
let start, end;
|
||||
|
||||
let rows;
|
||||
$: rows = Array.from(Array(browser.rows()).keys());
|
||||
</script>
|
||||
|
||||
<p>showing {start}-{end} of {rows.length} rows</p>
|
||||
|
||||
<VirtualList items="{rows}" let:item bind:start bind:end itemHeight="{35}">
|
||||
<BrowseRow idx="{item}" {browser} />
|
||||
</VirtualList>
|
||||
@ -1,70 +0,0 @@
|
||||
<style>
|
||||
button {
|
||||
border: none;
|
||||
background: none;
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
.nodeOuter {
|
||||
border-bottom: 1px solid #eee;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.nodeInner {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.counts {
|
||||
float: right;
|
||||
font-size: smaller;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.new {
|
||||
color: #000099;
|
||||
}
|
||||
.due {
|
||||
color: #007700;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { slide } from "svelte/transition";
|
||||
import { pb } from "anki/dist/backend";
|
||||
|
||||
export let record = new pb.DeckTreeNode();
|
||||
|
||||
$: deck = record.names[record.names.length - 1];
|
||||
$: dueCount = record.reviewCount + record.learnCount;
|
||||
$: collapsed = record.collapsed;
|
||||
$: indent = record.names.length > 1 ? 1 : 0;
|
||||
|
||||
function onToggleRow() {
|
||||
collapsed = !collapsed;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="nodeOuter" style="margin-left: {indent * 15}px;">
|
||||
<div class="nodeInner">
|
||||
{#if record.children.length > 0}
|
||||
<button on:click="{onToggleRow}">
|
||||
{#if collapsed}+{:else}-{/if}
|
||||
</button>
|
||||
{:else}
|
||||
<button></button>
|
||||
{/if}
|
||||
{deck}
|
||||
<div class="counts">
|
||||
<span class="due">{dueCount}</span>
|
||||
<br />
|
||||
<span class="new">{record.newCount}</span>
|
||||
</div>
|
||||
</div>
|
||||
{#if !collapsed}
|
||||
<div transition:slide|local>
|
||||
{#each record.children as child, idx (child.deckId)}
|
||||
<svelte:self record="{child}" />
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@ -1,27 +0,0 @@
|
||||
<style>
|
||||
.dueTable {
|
||||
max-width: 50em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import DeckDueNode from "./DeckDueNode.svelte";
|
||||
import { onMount } from "svelte";
|
||||
import { deckTree } from "anki/dist/backend";
|
||||
|
||||
$: records = [];
|
||||
|
||||
onMount(async () => {
|
||||
records = await deckTree();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="outer">
|
||||
<div class="dueTable">
|
||||
{#each records as record}
|
||||
<DeckDueNode {record} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
@ -1,14 +0,0 @@
|
||||
import App from "./App.svelte";
|
||||
|
||||
const app = new App({
|
||||
target: document.body
|
||||
});
|
||||
|
||||
window.onerror = function(e) {
|
||||
window.alert(`An error occurred: ${e}`);
|
||||
};
|
||||
window.onunhandledrejection = function(e) {
|
||||
window.alert(`An error occurred: ${e.reason}`);
|
||||
};
|
||||
|
||||
export default app;
|
||||
@ -1,22 +0,0 @@
|
||||
{
|
||||
"exclude": ["node_modules", "dist", "es"],
|
||||
"compilerOptions": {
|
||||
/* Basic Options */
|
||||
"target": "es6" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
|
||||
"module": "es6" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
|
||||
"rootDir": "src" /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */,
|
||||
/* Strict Type-Checking Options */
|
||||
"strict": true /* Enable all strict type-checking options. */,
|
||||
"noImplicitAny": true /* Raise error on expressions and declarations with an implied 'any' type. */,
|
||||
"strictNullChecks": true /* Enable strict null checks. */,
|
||||
"strictFunctionTypes": true /* Enable strict checking of function types. */,
|
||||
"strictBindCallApply": true /* Enable strict 'bind', 'call', and 'apply' methods on functions. */,
|
||||
"strictPropertyInitialization": true /* Enable strict checking of property initialization in classes. */,
|
||||
"noImplicitThis": true /* Raise error on 'this' expressions with an implied 'any' type. */,
|
||||
"alwaysStrict": true /* Parse in strict mode and emit "use strict" for each source file. */,
|
||||
/* Module Resolution Options */
|
||||
"moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
|
||||
"allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
|
||||
"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
|
||||
}
|
||||
}
|
||||
@ -1,70 +0,0 @@
|
||||
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||||
const path = require("path");
|
||||
|
||||
const mode = process.env.NODE_ENV || "development";
|
||||
const prod = mode === "production";
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
bundle: ["./src/ui/main.js"]
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
svelte: path.resolve("node_modules", "svelte")
|
||||
},
|
||||
extensions: [".mjs", ".js", ".svelte", ".ts"],
|
||||
mainFields: ["svelte", "browser", "module", "main"]
|
||||
},
|
||||
output: {
|
||||
path: __dirname + "/public",
|
||||
filename: "[name].js",
|
||||
chunkFilename: "[name].[id].js"
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.svelte$/,
|
||||
use: [
|
||||
{
|
||||
loader: "svelte-loader",
|
||||
options: {
|
||||
emitCss: true,
|
||||
hotReload: true
|
||||
}
|
||||
},
|
||||
{ loader: "eslint-loader" }
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [
|
||||
/**
|
||||
* MiniCssExtractPlugin doesn't support HMR.
|
||||
* For developing, use 'style-loader' instead.
|
||||
* */
|
||||
prod ? MiniCssExtractPlugin.loader : "style-loader",
|
||||
"css-loader"
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
use: ["ts-loader", "eslint-loader"],
|
||||
exclude: /node_modules/
|
||||
}
|
||||
]
|
||||
},
|
||||
mode,
|
||||
plugins: [
|
||||
new MiniCssExtractPlugin({
|
||||
filename: "[name].css"
|
||||
})
|
||||
],
|
||||
devtool: prod ? false : "source-map",
|
||||
devServer: { port: 3000,
|
||||
proxy: {
|
||||
'/request': {
|
||||
target: 'http://localhost:5006'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -1,9 +0,0 @@
|
||||
module.exports = {
|
||||
extends: [
|
||||
"eslint:recommended",
|
||||
"plugin:@typescript-eslint/eslint-recommended",
|
||||
"plugin:@typescript-eslint/recommended"
|
||||
],
|
||||
parser: "@typescript-eslint/parser",
|
||||
plugins: ["@typescript-eslint"]
|
||||
};
|
||||
5
tslib/.gitignore
vendored
5
tslib/.gitignore
vendored
@ -1,5 +0,0 @@
|
||||
node_modules
|
||||
.build
|
||||
dist
|
||||
package-lock.json
|
||||
|
||||
@ -1,26 +0,0 @@
|
||||
SHELL := /bin/bash
|
||||
|
||||
.SHELLFLAGS := -eu -o pipefail -c
|
||||
.DELETE_ON_ERROR:
|
||||
MAKEFLAGS += --warn-undefined-variables
|
||||
MAKEFLAGS += --no-builtin-rules
|
||||
.SUFFIXES:
|
||||
|
||||
$(shell mkdir -p .build dist)
|
||||
|
||||
all: build
|
||||
|
||||
.build/deps: package.json
|
||||
npm i
|
||||
@touch $@
|
||||
|
||||
build: .build/deps dist/backend_pb.js
|
||||
npm run build
|
||||
|
||||
dist/backend_pb.js: .build/deps ../proto/backend.proto
|
||||
npm run proto
|
||||
|
||||
.PHONY: check
|
||||
check:
|
||||
npm run lint
|
||||
npm run check-pretty
|
||||
@ -1,25 +0,0 @@
|
||||
{
|
||||
"name": "anki",
|
||||
"version": "0.1.0",
|
||||
"devDependencies": {
|
||||
"@typescript-eslint/eslint-plugin": "^2.11.0",
|
||||
"@typescript-eslint/parser": "^2.11.0",
|
||||
"eslint": "^6.7.2",
|
||||
"prettier": "^1.19.1",
|
||||
"typescript": "^3.7.3"
|
||||
},
|
||||
"scripts": {
|
||||
"prepare": "npm run proto; npm run build",
|
||||
"build": "tsc --build tsconfig.json",
|
||||
"proto": "pbjs -t static-module ../proto/backend.proto -o dist/backend_pb.js; pbts dist/backend_pb.js -o dist/backend_pb.d.ts",
|
||||
"pretty": "prettier --write src/*.ts",
|
||||
"check-pretty": "prettier --check src/*.ts",
|
||||
"lint": "eslint --max-warnings=0 src/*"
|
||||
},
|
||||
"dependencies": {
|
||||
"protobufjs": "^6.8.8"
|
||||
},
|
||||
"files": [
|
||||
"dist/*"
|
||||
]
|
||||
}
|
||||
@ -1,77 +0,0 @@
|
||||
import { backend_proto as pb } from "../dist/backend_pb";
|
||||
import { expectNotNull } from "./tsutils";
|
||||
export { pb };
|
||||
|
||||
const BACKEND_URL = "http://localhost:3000/request";
|
||||
|
||||
function responseError(err: pb.BackendError): Error {
|
||||
switch (err.value) {
|
||||
case "invalidInput":
|
||||
return Error(`invalid input: ${err.invalidInput?.info}`);
|
||||
case "templateParse":
|
||||
return Error(`template parse failed: ${err.templateParse?.info}`);
|
||||
default:
|
||||
return Error("unexpected error response value");
|
||||
}
|
||||
}
|
||||
|
||||
/** Encode and send a request, decoding and returning the response.
|
||||
* Throws on error.
|
||||
*/
|
||||
async function webRequest(input: pb.IBackendInput): Promise<pb.BackendOutput> {
|
||||
// encode request
|
||||
const err = pb.BackendInput.verify(input);
|
||||
if (err) {
|
||||
throw Error(err);
|
||||
}
|
||||
const buf = pb.BackendInput.encode(input).finish();
|
||||
|
||||
// send to backend
|
||||
const resp = await fetch(BACKEND_URL, {
|
||||
method: "POST",
|
||||
body: buf,
|
||||
headers: {
|
||||
"Content-Type": "application/protobuf",
|
||||
"Accept": "application/protobuf",
|
||||
}
|
||||
});
|
||||
if (!resp.ok) {
|
||||
throw Error(`unexpected reply: ${resp.statusText}`);
|
||||
}
|
||||
|
||||
// get returned bytes
|
||||
const respBlob = await resp.blob();
|
||||
const respBuf = await new Response(respBlob).arrayBuffer();
|
||||
|
||||
// decode response, throwing on error/missing
|
||||
const result = pb.BackendOutput.decode(new Uint8Array(respBuf));
|
||||
if (result.value === undefined) {
|
||||
throw Error("Unexpected vaule in backend output.");
|
||||
} else if (result.value === "error") {
|
||||
throw responseError(result?.error as pb.BackendError);
|
||||
} else {
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
||||
export async function deckTree(): Promise<pb.IDeckTreeNode[]> {
|
||||
const resp = await webRequest({
|
||||
deckTree: new pb.Empty()
|
||||
});
|
||||
return expectNotNull(resp?.deckTree?.top?.children);
|
||||
}
|
||||
|
||||
export async function findCards(search: string): Promise<number[]> {
|
||||
const resp = await webRequest({
|
||||
findCards: new pb.FindCardsIn({ search })
|
||||
});
|
||||
return expectNotNull(resp?.findCards?.cardIds) as number[];
|
||||
}
|
||||
|
||||
// just sort field for now
|
||||
export async function browserRows(cardIds: number[]): Promise<string[]> {
|
||||
const resp = await webRequest({
|
||||
browserRows: new pb.BrowserRowsIn({ cardIds })
|
||||
});
|
||||
return expectNotNull(resp?.browserRows?.sortFields);
|
||||
}
|
||||
@ -1,211 +0,0 @@
|
||||
import { findCards, browserRows } from "./backend";
|
||||
import { expectNotNull } from "./tsutils";
|
||||
|
||||
const BATCH_SIZE = 50;
|
||||
|
||||
type DataCallback = (data: string) => void;
|
||||
|
||||
interface InFlightRequest {
|
||||
kind: "inflight";
|
||||
callback?: DataCallback;
|
||||
}
|
||||
|
||||
interface FinishedRequest {
|
||||
kind: "finished";
|
||||
data: string;
|
||||
}
|
||||
|
||||
type DataState = InFlightRequest | FinishedRequest;
|
||||
|
||||
export class Browser {
|
||||
/** The list of card IDs returned by a search request. */
|
||||
private cardIds: number[];
|
||||
|
||||
private selectedIds: Set<number> = new Set();
|
||||
|
||||
/** Requests that are not yet dispatched, and can be canceled.
|
||||
* Maps row -> callback
|
||||
*/
|
||||
private newDataRequests: Map<number, DataCallback> = new Map();
|
||||
|
||||
/** Map of card IDs to pending|complete data. */
|
||||
private cardData: Map<number, DataState>;
|
||||
/** If a request is currently active. */
|
||||
private cardDataRequestInFlight = false;
|
||||
|
||||
/** Timestamp of the last request sending time. */
|
||||
private lastRequestTime = 0;
|
||||
|
||||
private dispatchTimer: number | undefined;
|
||||
|
||||
constructor() {
|
||||
this.cardIds = [];
|
||||
this.cardData = new Map();
|
||||
}
|
||||
|
||||
/** Performs a search with the provided string. */
|
||||
async search(text: string): Promise<void> {
|
||||
this.cardIds = await findCards(text);
|
||||
this.cardData = new Map();
|
||||
this.selectedIds = new Set();
|
||||
}
|
||||
|
||||
/** The number of rows returned by a search. */
|
||||
rows(): number {
|
||||
return this.cardIds.length;
|
||||
}
|
||||
|
||||
/** Calls callback with data associated with provided row, fetching if necessary. */
|
||||
getRowData(row: number, callback: DataCallback): void {
|
||||
const state = this.dataStateFromRow(row);
|
||||
if (state) {
|
||||
if (state.kind === "finished") {
|
||||
callback(state.data);
|
||||
} else if (state.kind === "inflight") {
|
||||
// a prefetch request may not have a callback registered
|
||||
if (!state.callback) {
|
||||
state.callback = callback;
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
this.newDataRequests.set(row, callback);
|
||||
this.maybeDispatch();
|
||||
}
|
||||
|
||||
rowIsSelected(row: number): boolean {
|
||||
const cid = this.cardIds[row];
|
||||
return this.selectedIds.has(cid);
|
||||
}
|
||||
|
||||
toggleRowSelected(row: number): void {
|
||||
const cid = this.cardIds[row];
|
||||
if (this.selectedIds.has(cid)) {
|
||||
this.selectedIds.delete(cid);
|
||||
} else {
|
||||
this.selectedIds.add(cid);
|
||||
}
|
||||
}
|
||||
|
||||
selectOnly(row: number): void {
|
||||
const cid = this.cardIds[row];
|
||||
this.selectedIds.clear();
|
||||
this.selectedIds.add(cid);
|
||||
}
|
||||
|
||||
/** Cancel a request for the given row.
|
||||
* Rows that scroll off screen can avoid unnecessary work this way.
|
||||
*/
|
||||
cancelRequest(row: number): void {
|
||||
this.newDataRequests.delete(row);
|
||||
const state = this.dataStateFromRow(row);
|
||||
if (state && state.kind === "inflight") {
|
||||
state.callback = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
private dataStateFromRow(row: number): DataState | undefined {
|
||||
const cid = this.cardIds[row];
|
||||
return this.cardData.get(cid);
|
||||
}
|
||||
|
||||
private setDataStateForRow(row: number, state: DataState): void {
|
||||
const cid = this.cardIds[row];
|
||||
this.cardData.set(cid, state);
|
||||
}
|
||||
|
||||
/** Fire a new request if none is active, and the time/size limits have been reached. */
|
||||
private maybeDispatch(): void {
|
||||
const sendAfterMillis = 100;
|
||||
|
||||
// everything cancelled?
|
||||
if (this.newDataRequests.size === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.lastRequestTime) {
|
||||
this.lastRequestTime = new Date().getTime();
|
||||
}
|
||||
const millisSince = new Date().getTime() - this.lastRequestTime;
|
||||
|
||||
// time to fire off a new request?
|
||||
if (
|
||||
(this.newDataRequests.size === BATCH_SIZE ||
|
||||
millisSince > sendAfterMillis) &&
|
||||
!this.cardDataRequestInFlight
|
||||
) {
|
||||
this.lastRequestTime = new Date().getTime();
|
||||
this.dispatchRequestBatch();
|
||||
} else {
|
||||
// check again in 100ms
|
||||
if (!this.dispatchTimer) {
|
||||
this.dispatchTimer = window.setTimeout(() => {
|
||||
this.dispatchTimer = undefined;
|
||||
this.maybeDispatch();
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** If a batch is small, add extra requests for rows above or below the requested row. */
|
||||
private addPrefetchIds(cids: number[], rows: number[]): void {
|
||||
const scrollingDown = rows.length < 2 || rows[0] < rows[1];
|
||||
let lastRow = rows[rows.length - 1];
|
||||
while (rows.length < BATCH_SIZE) {
|
||||
lastRow += scrollingDown ? 1 : -1;
|
||||
if (lastRow < 0 || lastRow >= this.cardIds.length) {
|
||||
break;
|
||||
}
|
||||
if (this.dataStateFromRow(lastRow)) {
|
||||
// already in flight or received
|
||||
break;
|
||||
}
|
||||
if (rows.indexOf(lastRow) !== -1) {
|
||||
// already in batch
|
||||
break;
|
||||
}
|
||||
console.log(`adding extra prefetch ${lastRow}`);
|
||||
cids.push(this.cardIds[lastRow]);
|
||||
rows.push(lastRow);
|
||||
this.setDataStateForRow(lastRow, { kind: "inflight" });
|
||||
}
|
||||
}
|
||||
|
||||
/** Request a batch of pending card objects. */
|
||||
private dispatchRequestBatch(): void {
|
||||
const cids: number[] = [];
|
||||
const rows: number[] = [];
|
||||
// fixme: reverse order, limit to batch size
|
||||
this.newDataRequests.forEach((cb, row) => {
|
||||
this.setDataStateForRow(row, { kind: "inflight", callback: cb });
|
||||
rows.push(row);
|
||||
cids.push(this.cardIds[row]);
|
||||
});
|
||||
this.newDataRequests.clear();
|
||||
this.addPrefetchIds(cids, rows);
|
||||
this.cardDataRequestInFlight = true;
|
||||
browserRows(cids)
|
||||
.then(res => {
|
||||
this.cardDataRequestInFlight = false;
|
||||
this.onRequestBatchReceived(res, rows);
|
||||
})
|
||||
.catch(err => {
|
||||
this.cardDataRequestInFlight = false;
|
||||
throw Error(`failed to fetch browser row: ${err}`);
|
||||
});
|
||||
}
|
||||
|
||||
/** Save received data, notifying interested parties. */
|
||||
private onRequestBatchReceived(data: string[], rows: number[]): void {
|
||||
data.forEach((val, n) => {
|
||||
const row = rows[n];
|
||||
const singleData = data[n];
|
||||
const state = expectNotNull(this.dataStateFromRow(row));
|
||||
if (state.kind === "inflight" && state.callback) {
|
||||
state.callback(singleData);
|
||||
}
|
||||
this.setDataStateForRow(row, { kind: "finished", data: singleData });
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
/** Throws if argument is null/undefined. */
|
||||
export function expectNotNull<T>(val: T | null | undefined): T {
|
||||
if (val === null || val === undefined) {
|
||||
throw Error("Unexpected missing value.");
|
||||
}
|
||||
return val as T;
|
||||
}
|
||||
|
||||
//* Throws if argument is not truthy. */
|
||||
export function assert<T>(val: T): asserts val {
|
||||
if (!val) {
|
||||
throw Error("Assertion failed.");
|
||||
}
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
{
|
||||
"exclude": ["node_modules", "dist"],
|
||||
"compilerOptions": {
|
||||
/* Basic Options */
|
||||
"target": "es6",
|
||||
"module": "es6",
|
||||
"declaration": true, /* Generates corresponding '.d.ts' file. */
|
||||
"rootDir": "src",
|
||||
"outDir": "dist",
|
||||
/* Strict Type-Checking Options */
|
||||
"strict": true /* Enable all strict type-checking options. */,
|
||||
"noImplicitAny": true /* Raise error on expressions and declarations with an implied 'any' type. */,
|
||||
"strictNullChecks": true /* Enable strict null checks. */,
|
||||
"strictFunctionTypes": true /* Enable strict checking of function types. */,
|
||||
"strictBindCallApply": true /* Enable strict 'bind', 'call', and 'apply' methods on functions. */,
|
||||
"strictPropertyInitialization": true /* Enable strict checking of property initialization in classes. */,
|
||||
"noImplicitThis": true /* Raise error on 'this' expressions with an implied 'any' type. */,
|
||||
"alwaysStrict": true /* Parse in strict mode and emit "use strict" for each source file. */,
|
||||
/* Module Resolution Options */
|
||||
"moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
|
||||
"allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
|
||||
"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user