diff options
Diffstat (limited to 'language-web/src/main/js/index.tsx')
-rw-r--r-- | language-web/src/main/js/index.tsx | 79 |
1 files changed, 79 insertions, 0 deletions
diff --git a/language-web/src/main/js/index.tsx b/language-web/src/main/js/index.tsx new file mode 100644 index 00000000..f59b40a9 --- /dev/null +++ b/language-web/src/main/js/index.tsx | |||
@@ -0,0 +1,79 @@ | |||
1 | import { CacheProvider } from "@emotion/react"; | ||
2 | import React from 'react'; | ||
3 | import { render } from 'react-dom'; | ||
4 | import CssBaseline from '@material-ui/core/CssBaseline'; | ||
5 | import { ThemeProvider, createTheme } from '@material-ui/core/styles'; | ||
6 | import { getCache } from "tss-react/cache"; | ||
7 | |||
8 | import App from './App'; | ||
9 | import RootStore, { RootStoreProvider } from './RootStore'; | ||
10 | |||
11 | import '../css/index.scss'; | ||
12 | |||
13 | const initialValue = `class Family { | ||
14 | contains Person[] members | ||
15 | } | ||
16 | |||
17 | class Person { | ||
18 | Person[] children opposite parent | ||
19 | Person[0..1] parent opposite children | ||
20 | int age | ||
21 | TaxStatus taxStatus | ||
22 | } | ||
23 | |||
24 | enum TaxStatus { | ||
25 | child, student, adult, retired | ||
26 | } | ||
27 | |||
28 | % A child cannot have any dependents. | ||
29 | error invalidTaxStatus(Person p) <-> | ||
30 | taxStatus(p, child), children(p, _q). | ||
31 | |||
32 | unique family. | ||
33 | Family(family). | ||
34 | members(family, anne). | ||
35 | members(family, bob). | ||
36 | members(family, ciri). | ||
37 | children(anne, ciri). | ||
38 | ?children(bob, ciri). | ||
39 | default children(ciri, *): false. | ||
40 | taxStatus(anne, adult). | ||
41 | age(anne, 35). | ||
42 | bobAge: 27. | ||
43 | age(bob, bobAge). | ||
44 | !age(ciri, bobAge). | ||
45 | |||
46 | scope Family = 1, Person += 5..10. | ||
47 | `; | ||
48 | |||
49 | const rootStore = new RootStore(); | ||
50 | rootStore.editorStore.updateValue(initialValue); | ||
51 | |||
52 | const theme = createTheme({ | ||
53 | palette: { | ||
54 | mode: 'dark', | ||
55 | background: { | ||
56 | default: '#212121', | ||
57 | paper: '#2f2f2f', | ||
58 | }, | ||
59 | primary: { | ||
60 | main: '#82aaff', | ||
61 | }, | ||
62 | secondary: { | ||
63 | main: '#ff5370', | ||
64 | }, | ||
65 | }, | ||
66 | }); | ||
67 | |||
68 | const app = ( | ||
69 | <CacheProvider value={getCache()}> | ||
70 | <ThemeProvider theme={theme}> | ||
71 | <CssBaseline/> | ||
72 | <RootStoreProvider rootStore={rootStore}> | ||
73 | <App/> | ||
74 | </RootStoreProvider> | ||
75 | </ThemeProvider> | ||
76 | </CacheProvider> | ||
77 | ); | ||
78 | |||
79 | render(app, document.getElementById('app')); | ||