Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit8ae998e

Browse files
committed
fix: improved resilience
1 parent053ffe8 commit8ae998e

File tree

10 files changed

+156
-50
lines changed

10 files changed

+156
-50
lines changed

‎docs/compute-engine/02-compute-engine-demo.md‎

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { useEffect, useState } from 'react';
1010
import { clsx } from 'clsx';
1111
import CodePlayground from '@site/src/components/CodePlayground';
1212
import ConsoleMarkup from '@site/src/components/ConsoleMarkup';
13+
import ErrorBoundary from '@site/src/components/ErrorBoundary';
1314

1415
export function ToggleButton ({toggle, className, style}) {
1516
return <button
@@ -126,15 +127,17 @@ n^2+1 & n \\geq 2
126127

127128
return (
128129
<divclassName="example-cells">{
129-
examples.map((x, i) =>
130-
<div
131-
key={x.label ?? x.latex ?? x.json}
132-
className={clsx("example-cell", {"active": i === index} )}
133-
onClick={() => onSelect(x, i)}
134-
>
135-
{x.label ? x.label:`$$${x.latex}$$`}
136-
</div>
137-
)
130+
examples.map((x, i) => {
131+
return (
132+
<div
133+
key={x.label ?? x.latex ?? x.json}
134+
className={clsx("example-cell", {"active": i === index} )}
135+
onClick={() => onSelect(x, i)}
136+
>
137+
{x.label ? x.label:`$$${x.latex}$$`}
138+
</div>
139+
);
140+
})
138141
}
139142
</div>
140143
);
@@ -199,14 +202,23 @@ console.info(await expr.evaluateAsync());
199202
}
200203
}
201204

202-
setValue(code);
205+
if (!('ComputeEngine' in window)) {
206+
setValue(`// 😕 The Compute Engine could not be loaded.
207+
// Check your network connection or try again later.`);
208+
} else {
209+
setValue(code);
210+
}
203211
setIndex(exampleIndex);
204212
};
205213

206214
return (
207215
<divclassName="flex flex-col items-center">
208-
<ExampleSelectoronSelect={handleSelect}index={index}/>
209-
<CodePlaygroundjs={value} />
216+
<ErrorBoundary>
217+
<ExampleSelectoronSelect={handleSelect}index={index}/>
218+
<ErrorBoundary>
219+
<CodePlaygroundjs={value} />
220+
</ErrorBoundary>
221+
</ErrorBoundary>
210222
</div>
211223
);
212224
}
@@ -350,4 +362,3 @@ button.toggle svg {
350362

351363

352364
<ComputeEngineDemo/>
353-

‎docs/compute-engine/08-guide-types.md‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,7 @@ by omitting the endpoint.
211211
For example:`real<..1.0>` is the type of real numbers less than $1.0$,
212212
and is equivalent to`real< -oo..1.0 >`.
213213

214-
To represent an open interval, use a negationvalue type to exclude the endpoints.
214+
To represent an open interval, use a negationand a literal type to exclude the endpoints.
215215
For example`real<0..> & !0` is the type of real numbers greater than $0$.
216216

217217
When using integers, you can adjust the endpoint instead, so for example
@@ -383,7 +383,7 @@ contains three elements with keys `red`, `green` and `blue`, and values of type
383383
- The keys of the first record are a subset of the keys of the second.
384384
- The values of the first record are compatible with the values of the second.
385385
- The order of the keys does not matter.
386-
- A record is compatible with a dictionary`dictionary<T>` if eachvaluetype`T1`,`T2`, ... is compatible with`T`.
386+
- A record is compatible with a dictionary`dictionary<T>` if each type`T1`,`T2`, ... is compatible with`T`.
387387

388388

389389
```js
@@ -516,21 +516,21 @@ and it cannot be combined with optional arguments.
516516

517517
The type`function` matches any function literal. It is a shorthand for`(any*) -> unknown`.
518518

519-
##Value Type
519+
##Literal Type
520520

521-
A**value type** is a type that represents a single value.
521+
A**literal type** is a type that represents a single value.
522522

523523
The value can be:
524524
- a boolean:`true` or`false`
525525
- a number, such as`42`,`-3.14`, or`6.022e23`
526526
- a string, such as`"yellow"`,
527527

528-
Value types can be used in conjunction with a union to represent a type that
528+
Literal types can be used in conjunction with a union to represent a type that
529529
can be one of multiple values, for example:
530530

531531
-`0 | 1` is the type of values that are either`0` or`1`.
532-
-`integer |nothing` is the type of values that areintegers or`Nothing`.
533-
-`"red" | "green" | "blue"` is the type of values that are either of the strings`"red"`,`"green"` or`"blue"`.
532+
-`"red" |"green" | "blue"` is the type of values that areeither of the
533+
strings`"red"`,`"green"` or`"blue"`.
534534

535535

536536
##Other Constructed Types
@@ -650,7 +650,8 @@ ce.parse("\\{red: 1, green: 2\\}").type
650650
// ➔ true
651651
```
652652

653-
Records are compatible with dictionaries if all the values of the record are compatible with the dictionary's value type.
653+
Records are compatible with dictionaries if all the values of the record are
654+
compatible with the dictionary's value type.
654655

655656
```js
656657
ce.parse("\\{red: 104, green: 2, blue: 37\\}").type

‎docs/compute-engine/50-math-json.md‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import Mathfield from '@site/src/components/Mathfield';
99
import ConsoleMarkup from '@site/src/components/ConsoleMarkup';
1010
import {useState, useEffect} from 'react';
1111
import {BrowserOnly} from '@docusaurus/BrowserOnly';
12+
import ErrorBoundary from '@site/src/components/ErrorBoundary';
1213

1314
export function setupComputeEngine() {
1415
if (window.ce !== undefined) return;
@@ -17,10 +18,6 @@ export function setupComputeEngine() {
1718
setTimeout(setupComputeEngine, 50);
1819
return;
1920
}
20-
const[value, setValue] = useState(children);
21-
const[json, setJson] = useState({});
22-
window.ce = new ComputeEngine.ComputeEngine();
23-
setJson(window.ce?.parse(value).json);
2421
}
2522
export function MathJSONOutput({children}) {
2623
const[value, setValue] = useState(children);
@@ -29,8 +26,20 @@ export function MathJSONOutput({children}) {
2926
// We need to use useEffect so that the MathfieldElement is available
3027
// when this code runs (in the client).
3128
useEffect(() => {
32-
setupComputeEngine();
33-
setJson(window.ce?.parse(value).json);
29+
let cancelled = false;
30+
31+
const tryParse = () => {
32+
if (window.ce) {
33+
const result = window.ce.parse(value);
34+
setJson(result?.json ?? {});
35+
} else if (!cancelled) {
36+
setTimeout(tryParse, 50);
37+
}
38+
};
39+
40+
tryParse();
41+
42+
return () => { cancelled = true; };
3443
},[value]);
3544
return<>
3645
<Mathfield
@@ -73,7 +82,9 @@ MathJSON can be transformed from (parsing) and to (serialization) other formats.
7382

7483
:::info[Demo]
7584
Type an expression in the mathfield below to see its MathJSON representation.
76-
<MathJSONOutput>{`e^{i\\pi}+1=0`}</MathJSONOutput>
85+
<ErrorBoundary>
86+
<MathJSONOutput>{`e^{i\\pi}+1=0`}</MathJSONOutput>
87+
</ErrorBoundary>
7788
:::
7889

7990

@@ -790,3 +801,4 @@ Library.
790801
<ReadMorepath="/compute-compute-engine/guides/augmenting/">
791802
Read more about**Adding New Definitions**<Iconname="chevron-right-bold" />
792803
</ReadMore>
804+

‎docs/mathfield/02-playground.md‎

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -203,6 +203,7 @@ body.glyphs .if-glyphs, body:not(.glyphs) .if-not-glyphs {
203203

204204
import { useEffect } from 'react';
205205
import { convertLatexToMarkup } from 'mathlive';
206+
import ErrorBoundary from '@site/src/components/ErrorBoundary';
206207

207208
export function MathfieldDemo({children}) {
208209
const INDENT = ' ';
@@ -528,36 +529,41 @@ export function MathfieldDemo({children}) {
528529
const latexField = document.getElementById('latex');
529530
if (!latexField) return;
530531
latexField.value = mf.value;
531-
const expr = mf.expression;
532+
const expr = mf?.expression;
532533
// Output MathJSON representation of the expression
533-
document.getElementById('math-json').innerHTML = asString(0, expr.json).text;
534-
534+
document.getElementById('math-json').innerHTML = expr ? asString(0, expr.json).text : '😕 The Compute Engine is not available';
535+
if (!expr) return;
536+
535537
let result = '';
536-
537-
MathfieldElement.computeEngine.precision = 7;
538-
538+
539+
if (typeof MathfieldElement !== 'undefined' && MathfieldElement.computeEngine) {
540+
MathfieldElement.computeEngine.precision = 7;
541+
}
542+
539543
if (expr.head !== 'Equal') {
540544
const exprN = expr.N();
541-
545+
542546
if (!exprN.isSame(expr)) result = exprN.latex;
543547
}
544-
548+
545549
if (!result) {
546550
const exprSimplify = expr.simplify();
547551
if (!exprSimplify.isSame(expr)) result = exprSimplify.latex;
548552
}
549-
553+
550554
if (expr.head !== 'Equal') {
551555
if (!result) {
552556
const exprEval = expr.evaluate();
553557
if (!exprEval.isSame(expr)) result = exprEval.latex;
554558
}
555559
}
556-
560+
557561
if (result) {
558562
document.getElementById('result').innerHTML = convertLatexToMarkup('= ' + result);
559563
document.getElementById('result-section').classList.add('is-visible');
560-
} else document.getElementById('result-section').classList.remove('is-visible');
564+
} else {
565+
document.getElementById('result-section').classList.remove('is-visible');
566+
}
561567
};
562568

563569
const onInput = (evt) => onMathfieldUpdate(evt.target);
@@ -578,7 +584,9 @@ export function MathfieldDemo({children}) {
578584
}
579585

580586

581-
<MathfieldDemo>{`x=\\frac{-b\\pm \\sqrt{b^2-4ac}}{2a}`}</MathfieldDemo>
587+
<ErrorBoundary>
588+
<MathfieldDemo>{`x=\\frac{-b\\pm \\sqrt{b^2-4ac}}{2a}`}</MathfieldDemo>
589+
</ErrorBoundary>
582590

583591
<divstyle={{marginLeft:"auto",paddingTop:".5em",textAlign:"right"}}>
584592
<ahref="#shortcuts">Keyboard Shortcuts</a>

‎modules/route-update.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
functionsetupComputeEngine(){
1+
functionsetupComputeEngine(delay){
22
if(window.ce!==undefined&&'CodeMirror'inwindow)return;
33
// If we're not ready, try again in 50ms
44
if(!("ComputeEngine"inwindow)||!("CodeMirror"inwindow)){
5-
setTimeout(setupComputeEngine,50);
5+
setTimeout(()=>setupComputeEngine(Math.max(1000,2*delay)),delay);
66
return;
77
}
88
window.ce=newComputeEngine.ComputeEngine();
@@ -11,12 +11,12 @@ function setupComputeEngine() {
1111
setTimeout(()=>document.querySelectorAll("code-playground").forEach((x)=>{
1212
if(typeofx.run==='function')x.run()
1313
}),
14-
20);
14+
20);
1515
}
1616

17-
functionrenderMath(){
17+
functionrenderMath(delay){
1818
if(!("MathLive"inwindow)){
19-
setTimeout(renderMath,500);
19+
setTimeout(()=>renderMath(Math.max(1000,2*delay)),delay);
2020
return;
2121
}
2222
MathLive.renderMathInDocument({
@@ -54,7 +54,7 @@ export function onRouteDidUpdate({ location, previousLocation }) {
5454
// Don't execute if we are still on the same page; the lifecycle may be fired
5555
// because the hash changes (e.g. when navigating between headings)
5656
if(location.pathname!==previousLocation?.pathname){
57-
renderMath();
58-
setupComputeEngine();
57+
renderMath(20);
58+
setupComputeEngine(10);
5959
}
6060
}

‎plugins/load-scripts/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ loadScripts([
5454
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js",
5555
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/javascript/javascript.min.js",
5656
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/xml/xml.min.js",
57-
// "https://cdn.jsdelivr.net/npm/@cortex-js/compute-engine/dist/compute-engine.min.cjs",
57+
// "https://cdn.jsdelivr.net/npm/@cortex-js/compute-engine@latest/dist/compute-engine.umd.js",
5858
"https://unpkg.com/@cortex-js/compute-engine",
5959
"https://cdn.jsdelivr.net/npm/mathlive",
6060
"https://cdn.jsdelivr.net/npm/@ui-js/code-playground/dist/code-playground.min.js@module",
@@ -63,6 +63,7 @@ loadScripts([
6363
})();
6464
`;
6565

66+
6667
exportdefaultfunction(context,options){
6768
return{
6869
name:"load-scripts",
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
2+
3+
importReactfrom'react';
4+
importCodePlaygroundfrom'@site/src/components/CodePlayground';
5+
6+
exportdefaultfunctionCodePlaygroundWithError({ js}){
7+
if(js.includes('boom'))thrownewError('Simulated CodePlayground error');
8+
return<CodePlaygroundjs={js}/>;
9+
}
Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
importReactfrom'react';
2+
3+
exportdefaultclassErrorBoundaryextendsReact.Component{
4+
constructor(props){
5+
super(props);
6+
this.state={hasError:false,isHover:false,isActive:false};
7+
}
8+
9+
staticgetDerivedStateFromError(){
10+
return{hasError:true};
11+
}
12+
13+
componentDidCatch(error,errorInfo){
14+
console.error('ErrorBoundary caught an error:',error,errorInfo);
15+
}
16+
17+
render(){
18+
if(this.state.hasError){
19+
const{ isHover, isActive}=this.state;
20+
constbuttonStyle={
21+
padding:'0.75rem 1.5rem',
22+
fontSize:'1rem',
23+
borderRadius:'8px',
24+
border:'none',
25+
backgroundColor:isActive
26+
?'var(--primary-color-light)'
27+
:isHover
28+
?'var(--primary-color-dark)'
29+
:'var(--primary-color)',
30+
color:isActive ?'var(--primary-color)' :'#fff',
31+
cursor:'pointer',
32+
transform:isActive ?'scale(0.98)' :'none',
33+
};
34+
35+
return(
36+
<divstyle={{
37+
padding:'4rem',
38+
textAlign:'center',
39+
backgroundColor:'var(--neutral-800)',
40+
borderRadius:'8px',
41+
border:'1px solid var(--neutral-700)',
42+
margin:'2rem',
43+
}}>
44+
<h1style={{fontSize:'2rem',marginBottom:'1rem'}}>😕 Something went wrong</h1>
45+
<pstyle={{fontSize:'1rem',marginBottom:'2rem'}}>
46+
We couldn’t load this section. Please try again or reload the page.
47+
</p>
48+
<button
49+
onClick={()=>window.location.reload()}
50+
onMouseOver={()=>this.setState({isHover:true})}
51+
onMouseOut={()=>this.setState({isHover:false,isActive:false})}
52+
onMouseDown={()=>this.setState({isActive:true})}
53+
onMouseUp={()=>this.setState({isActive:false})}
54+
style={buttonStyle}
55+
>
56+
Reload
57+
</button>
58+
</div>
59+
);
60+
}
61+
62+
returnthis.props.children;
63+
}
64+
}

‎src/css/typography.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ body {
7676
--ifm-heading-font-weight:700;
7777

7878
text-wrap: balance;
79-
letter-spacing:-3px;
79+
letter-spacing:-2px;
8080
}
8181

8282
@mediaonly screenand (min-width:767px) {

‎submodules/cortex-js.github.io‎

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp