28 |
32 | );
33 | }
34 |
35 | interface Position {
36 | line: number;
37 | column: number;
38 | }
39 |
40 | interface GoalWidgetProps {
41 | goal: InfoRecord;
42 | position: Position;
43 | }
44 | function GoalWidget({goal, position}: GoalWidgetProps) {
45 | const tacticHeader = goal.text &&
29 | {msg.pos_line}:{msg.pos_col}: {msg.severity}: {msg.caption}
30 |
31 |
46 | {position.line}:{position.column}: tactic {
47 | {goal.text}}
;
48 | const docs = goal.doc &&
51 | {position.line}:{position.column}: type {
52 | goal['full-id'] && of
53 | {goal['full-id']}}
;
54 | const typeBody = (goal.type && !goal.text) // don't show type of tactics
55 | && ')}}/>;
57 |
58 | const goalStateHeader = goal.state &&
59 | {position.line}:{position.column}: goal
;
60 | const goalStateBody = goal.state && '}} />;
62 |
63 | return (
64 | // put tactic state first so that there's less jumping around when the cursor moves
65 |
66 | {goalStateHeader}
67 | {goalStateBody}
68 | {tacticHeader || typeHeader}
69 | {typeBody}
70 | {docs}
71 |
72 | );
73 | }
74 |
75 | interface ToggleDocProps {
76 | doc: string;
77 | }
78 | interface ToggleDocState {
79 | showDoc: boolean;
80 | }
81 | class ToggleDoc extends React.Component
92 | {this.state.showDoc ?
93 | this.props.doc : // TODO: markdown / highlighting?
94 | {this.props.doc.slice(0, 75)} [...]}
95 |
96 |
97 |
;
98 | }
99 | }
100 |
101 | enum DisplayMode {
102 | OnlyState, // only the state at the current cursor position including the tactic state
103 | AllMessage, // all messages
104 | }
105 |
106 | interface InfoViewProps {
107 | file: string;
108 | cursor?: Position;
109 | }
110 | interface InfoViewState {
111 | goal?: GoalWidgetProps;
112 | messages: Message[];
113 | displayMode: DisplayMode;
114 | }
115 | class InfoView extends React.Component96 |
97 |
{GoalWidget(this.state.goal)}
);
174 | const filteredMsgs = (this.state.displayMode === DisplayMode.AllMessage) ?
175 | this.state.messages :
176 | this.state.messages.filter(({pos_col, pos_line, end_pos_col, end_pos_line}) => {
177 | if (!this.props.cursor) { return false; }
178 | const {line, column} = this.props.cursor;
179 | return pos_line <= line &&
180 | ((!end_pos_line && line === pos_line) || line <= end_pos_line) &&
181 | (line !== pos_line || pos_col <= column) &&
182 | (line !== end_pos_line || end_pos_col >= column);
183 | });
184 | const msgs = filteredMsgs.map((msg, i) =>
185 | ({MessageWidget({msg})}
));
186 | return (
187 |
188 |
203 | );
204 | }
205 | }
206 |
207 | interface PageHeaderProps {
208 | file: string;
209 | url: string;
210 | onSubmit: (value: string) => void;
211 | status: string;
212 | onSave: () => void;
213 | onLoad: (localFile: string, lastFileName: string) => void;
214 | clearUrlParam: () => void;
215 | onChecked: () => void;
216 | }
217 | interface PageHeaderState {
218 | currentlyRunning: boolean;
219 | }
220 | class PageHeader extends React.Component
189 | 
{
192 | this.setState({ displayMode: DisplayMode.OnlyState });
193 | }}/>
194 | 
{
197 | this.setState({ displayMode: DisplayMode.AllMessage });
198 | }}/>
199 |
200 | {goal}
201 | {msgs}
202 | {
192 | this.setState({ displayMode: DisplayMode.OnlyState });
193 | }}/>
194 | {
197 | this.setState({ displayMode: DisplayMode.AllMessage });
198 | }}/>
199 |
274 |
276 |
279 |
311 |
312 | );
313 | }
314 | }
315 |
316 | interface UrlFormProps {
317 | url: string;
318 | onSubmit: (value: string) => void;
319 | clearUrlParam: () => void;
320 | }
321 | interface UrlFormState {
322 | value: string;
323 | }
324 | class UrlForm extends React.Component
280 | 
282 |
282 |
283 |
285 |
310 |
286 |
287 | {/* */}
288 |
289 |
290 |
291 |
298 | {this.props.status &&
299 | (
300 | Could not fetch (error: {this.props.status})!
301 | {this.props.status.startsWith('TypeError') && (
302 | If you see
303 | cross-origin (CORS) errors
304 | in your browser's dev console, try
305 | a CORS proxy
306 | , e.g. prepend https://cors-anywhere.herokuapp.com/ to the beginning of your URL.
307 | )}
308 | )}
309 |
346 |
351 | );
352 | }
353 | }
354 |
355 | interface ModalState {
356 | isOpen: boolean;
357 | }
358 | // https://assortment.io/posts/accessible-modal-component-react-portals-part-1 & 2
359 | // TODO: change focus back to button when modal closes
360 | class Modal extends React.Component<{}, ModalState> {
361 | private modalNode: Node;
362 | constructor(props) {
363 | super(props);
364 | this.state = {
365 | isOpen: false,
366 | };
367 | this.open = this.open.bind(this);
368 | this.close = this.close.bind(this);
369 | this.keyDown = this.keyDown.bind(this);
370 | this.clickAway = this.clickAway.bind(this);
371 | }
372 |
373 | open() {
374 | this.setState({ isOpen: true }, () => {
375 | });
376 | }
377 | close() {
378 | this.setState({ isOpen: false });
379 | }
380 | keyDown({ keyCode }) {
381 | return keyCode === 27 && this.close();
382 | }
383 | clickAway(e) {
384 | if (this.modalNode && this.modalNode.contains(e.target)) { return; }
385 | this.close();
386 | }
387 |
388 | render() {
389 | return (
390 |
414 | {k} : {commit}
415 |
);
416 | } else {
417 | libinfo.push(
419 | {k} : {v}
420 |
);
421 | }
422 | }
423 | }
424 | }
425 |
426 | return createPortal(
427 | ,
560 | document.body);
561 | }
562 |
563 | interface LeanEditorProps {
564 | file: string;
565 | initialValue: string;
566 | onValueChange?: (value: string) => void;
567 | initialUrl: string;
568 | onUrlChange?: (value: string) => void;
569 | clearUrlParam: () => void;
570 | }
571 | interface LeanEditorState {
572 | cursor?: Position;
573 | split: 'vertical' | 'horizontal';
574 | url: string;
575 | status: string;
576 | size: number;
577 | checked: boolean;
578 | lastFileName: string;
579 | }
580 | class LeanEditor extends React.Component
724 |
);
739 | }
740 | }
741 |
742 | const defaultValue =
743 | `-- Live ${(self as any).WebAssembly ? 'WebAssembly' : 'JavaScript'} version of Lean
744 | #eval let v := lean.version in let s := lean.special_version_desc in string.join
745 | ["Lean (version ", v.1.repr, ".", v.2.1.repr, ".", v.2.2.repr, ", ",
746 | if s ≠ "" then s ++ ", " else s, "commit ", (lean.githash.to_list.take 12).as_string, ")"]
747 |
748 | example (m n : ℕ) : m + n = n + m :=
749 | by simp [nat.add_comm]`;
750 |
751 | interface HashParams {
752 | url: string;
753 | code: string;
754 | }
755 | function parseHash(hash: string): HashParams {
756 | hash = hash.slice(1);
757 | const hashObj = hash.split('&').map((s) => s.split('='))
758 | .reduce( (pre, [key, value]) => ({ ...pre, [key]: value }), {} ) as any;
759 | const url = decodeURIComponent(hashObj.url || '');
760 | const code = decodeURIComponent(hashObj.code || defaultValue);
761 | return { url, code };
762 | }
763 | function paramsToString(params: HashParams): string {
764 | let s = '#';
765 | if (params.url) {
766 | s = '#url=' + encodeURIComponent(params.url)
767 | .replace(/\(/g, '%28').replace(/\)/g, '%29');
768 | }
769 | // nonempty params.code will wipe out params.url
770 | if (params.code) {
771 | params.url = null;
772 | s = '#code=' + encodeURIComponent(params.code)
773 | .replace(/\(/g, '%28').replace(/\)/g, '%29');
774 | }
775 | return s;
776 | }
777 |
778 | function App() {
779 | const initUrl: URL = new URL(window.location.href);
780 | const params: HashParams = parseHash(initUrl.hash);
781 |
782 | function changeUrl(newValue, key) {
783 | params[key] = newValue;
784 | // if we just loaded a url, wipe out the code param
785 | if (key === 'url' || !newValue) { params.code = null; }
786 | history.replaceState(undefined, undefined, paramsToString(params));
787 | }
788 |
789 | function clearUrlParam() {
790 | params.url = null;
791 | history.replaceState(undefined, undefined, paramsToString(params));
792 | }
793 |
794 | const fn = monaco.Uri.file('test.lean').fsPath;
795 |
796 | if (window.localStorage.getItem('underline') === 'true') {
797 | const style = document.createElement('style');
798 | style.type = 'text/css';
799 | style.id = 'hideUnderline';
800 | style.appendChild(document.createTextNode(`.monaco-editor .greensquiggly,
801 | .monaco-editor .redsquiggly { background-size:0px; }`));
802 | document.head.appendChild(style);
803 | }
804 |
805 | if (window.localStorage.getItem('docs') === 'true') {
806 | const style = document.createElement('style');
807 | style.type = 'text/css';
808 | style.id = 'hideDocs';
809 | style.appendChild(document.createTextNode(`.toggleDoc, .doc-header { display:none; }`));
810 | document.head.appendChild(style);
811 | }
812 |
813 | return (
814 |
725 |
728 |
729 |
730 |
732 |
733 |
737 |
738 |
734 |
735 |
736 |