Convert to React app

author: Kristóf Marussy <marussy@mit.bme.hu> 2021-06-30 11:42:41 +0200
committer: Kristóf Marussy <marussy@mit.bme.hu> 2021-06-30 11:45:25 +0200
commit: a17708ac1ddcfa8dd53ff7be9bfb0e5ba43a0cea (patch)
tree: cf96b878b0d91ca7a806224960d3bd1d65f0aec8 /language-web/src/main
parent: Fix enum literal scopes (diff)
download: refinery-a17708ac1ddcfa8dd53ff7be9bfb0e5ba43a0cea.tar.gz
refinery-a17708ac1ddcfa8dd53ff7be9bfb0e5ba43a0cea.tar.zst
refinery-a17708ac1ddcfa8dd53ff7be9bfb0e5ba43a0cea.zip
4 files changed, 81 insertions, 51 deletions
diff --git a/language-web/src/main/html/index.html b/language-web/src/main/html/index.html
index 915234d3..01b4e536 100644
--- a/language-web/src/main/html/index.html
+++ b/language-web/src/main/html/index.html
@@ -5,44 +5,11 @@
    <title>Example Web Editor</title>
  </head>
  <body>
-    <div class="container">
+    <noscript>
-      <div class="header">
+      <p>
-        <h1>Example Problem Web Editor</h1>
+        This application requires JavaScript to run.
-      </div>
+      </p>
-      <div class="content">
+    </noscript>
-        <div class="xtext-editor"><pre>class Family {
+    <div id="app"></div>
-  contains Person[] members
-}
-class Person {
-  Person[] children opposite parent
-  Person[0..1] parent opposite children
-  int age
-  TaxStatus taxStatus
-}
-enum TaxStatus {
-  child, student, adult, retired
-}
-% A child cannot have any dependents.
-error invalidTaxStatus(Person p) :-
-  taxStatus(p, child), children(p, _q).
-Family('family').
-members('family', anne).
-members('family', bob).
-members('family', ciri).
-children(anne, ciri).
-?children(bob, ciri).
-taxStatus(anne, adult).
-age(anne, 35).
-bobAge: 27.
-age(bob, bobAge).
-!age(ciri, bobAge).
-scope Family = 1, Person += 5..10.</pre></div>
-      </div>
-    </div>
  </body>
 </html>
diff --git a/language-web/src/main/js/components/XtextCodeMirror.jsx b/language-web/src/main/js/components/XtextCodeMirror.jsx
new file mode 100644
index 00000000..75a20daa
--- /dev/null
+++ b/language-web/src/main/js/components/XtextCodeMirror.jsx
@@ -0,0 +1,32 @@
+import React, { useCallback, useState } from 'react';
+import { Controlled as CodeMirror } from 'react-codemirror2';
+import 'mode-problem';
+import { createServices, removeServices } from 'xtext/xtext-codemirror';
+export default function XtextCodeMirror({ initialValue }) {
+  const [value, setValue] = useState(initialValue);
+  const codeMirrorOptions = {
+    mode: 'xtext/problem',
+    indentUnit: 2,
+  };
+  const xtextOptions = {
+    xtextLang: 'problem',
+    enableFormattingAction: true,
+  };
+  const onBeforeChange = useCallback((_editor, _data, newValue) => {
+    setValue(newValue);
+  }, [setValue]);
+  return (
+    <CodeMirror
+      value={value}
+      options={codeMirrorOptions}
+      editorDidMount={editor => createServices(editor, xtextOptions)}
+      editorWillUnmount={removeServices}
+      onBeforeChange={onBeforeChange}
+    />
+  );
+};
diff --git a/language-web/src/main/js/index.js b/language-web/src/main/js/index.js
deleted file mode 100644
index b4cd450e..00000000
--- a/language-web/src/main/js/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import xtext from 'xtext/xtext-codemirror';
-import 'mode-problem';
-import '../css/index.scss';
-xtext.createEditor({
-  baseUrl: '/',
-  xtextLang: 'problem',
-  enableFormattingAction: true,
-  sendFullText: false,
-  indentUnit: 2,
-});
diff --git a/language-web/src/main/js/index.jsx b/language-web/src/main/js/index.jsx
new file mode 100644
index 00000000..48c0baeb
--- /dev/null
+++ b/language-web/src/main/js/index.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { render } from 'react-dom';
+import XtextCodeMirror from "./components/XtextCodeMirror";
+import '../css/index.scss';
+const initialValue = `class Family {
+  contains Person[] members
+}
+class Person {
+  Person[] children opposite parent
+  Person[0..1] parent opposite children
+  int age
+  TaxStatus taxStatus
+}
+enum TaxStatus {
+  child, student, adult, retired
+}
+% A child cannot have any dependents.
+error invalidTaxStatus(Person p) :-
+  taxStatus(p, child), children(p, _q).
+Family('family').
+members('family', anne).
+members('family', bob).
+members('family', ciri).
+children(anne, ciri).
+?children(bob, ciri).
+taxStatus(anne, adult).
+age(anne, 35).
+bobAge: 27.
+age(bob, bobAge).
+!age(ciri, bobAge).
+scope Family = 1, Person += 5..10.
+`;
+const app = <XtextCodeMirror initialValue={initialValue}/>;
+render(app, document.getElementById('app'));
author	Kristóf Marussy <marussy@mit.bme.hu>	2021-06-30 11:42:41 +0200
committer	Kristóf Marussy <marussy@mit.bme.hu>	2021-06-30 11:45:25 +0200
commit	a17708ac1ddcfa8dd53ff7be9bfb0e5ba43a0cea (patch)
tree	cf96b878b0d91ca7a806224960d3bd1d65f0aec8 /language-web/src/main
parent	Fix enum literal scopes (diff)
download	refinery-a17708ac1ddcfa8dd53ff7be9bfb0e5ba43a0cea.tar.gz refinery-a17708ac1ddcfa8dd53ff7be9bfb0e5ba43a0cea.tar.zst refinery-a17708ac1ddcfa8dd53ff7be9bfb0e5ba43a0cea.zip

diff --git a/language-web/src/main/html/index.html b/language-web/src/main/html/index.html index 915234d3..01b4e536 100644 --- a/language-web/src/main/html/index.html +++ b/language-web/src/main/html/index.html
@@ -5,44 +5,11 @@
5	<title>Example Web Editor</title>	5	<title>Example Web Editor</title>
6	</head>	6	</head>
7	<body>	7	<body>
8	<div class="container">	8	<noscript>
9	<div class="header">	9	<p>
10	<h1>Example Problem Web Editor</h1>	10	This application requires JavaScript to run.
11	</div>	11	</p>
12	<div class="content">	12	</noscript>
13	<div class="xtext-editor"><pre>class Family {	13	<div id="app"></div>
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	Family('family').
33	members('family', anne).
34	members('family', bob).
35	members('family', ciri).
36	children(anne, ciri).
37	?children(bob, ciri).
38	taxStatus(anne, adult).
39	age(anne, 35).
40	bobAge: 27.
41	age(bob, bobAge).
42	!age(ciri, bobAge).
43
44	scope Family = 1, Person += 5..10.</pre></div>
45	</div>
46	</div>
47	</body>	14	</body>
48	</html>	15	</html>


diff --git a/language-web/src/main/js/components/XtextCodeMirror.jsx b/language-web/src/main/js/components/XtextCodeMirror.jsx new file mode 100644 index 00000000..75a20daa --- /dev/null +++ b/language-web/src/main/js/components/XtextCodeMirror.jsx
@@ -0,0 +1,32 @@
		1	import React, { useCallback, useState } from 'react';
		2	import { Controlled as CodeMirror } from 'react-codemirror2';
		3	import 'mode-problem';
		4	import { createServices, removeServices } from 'xtext/xtext-codemirror';
		5
		6	export default function XtextCodeMirror({ initialValue }) {
		7	const [value, setValue] = useState(initialValue);
		8
		9	const codeMirrorOptions = {
		10	mode: 'xtext/problem',
		11	indentUnit: 2,
		12	};
		13
		14	const xtextOptions = {
		15	xtextLang: 'problem',
		16	enableFormattingAction: true,
		17	};
		18
		19	const onBeforeChange = useCallback((_editor, _data, newValue) => {
		20	setValue(newValue);
		21	}, [setValue]);
		22
		23	return (
		24	<CodeMirror
		25	value={value}
		26	options={codeMirrorOptions}
		27	editorDidMount={editor => createServices(editor, xtextOptions)}
		28	editorWillUnmount={removeServices}
		29	onBeforeChange={onBeforeChange}
		30	/>
		31	);
		32	};


diff --git a/language-web/src/main/js/index.js b/language-web/src/main/js/index.js deleted file mode 100644 index b4cd450e..00000000 --- a/language-web/src/main/js/index.js +++ /dev/null
@@ -1,12 +0,0 @@
1	import xtext from 'xtext/xtext-codemirror';
2	import 'mode-problem';
3
4	import '../css/index.scss';
5
6	xtext.createEditor({
7	baseUrl: '/',
8	xtextLang: 'problem',
9	enableFormattingAction: true,
10	sendFullText: false,
11	indentUnit: 2,
12	});


diff --git a/language-web/src/main/js/index.jsx b/language-web/src/main/js/index.jsx new file mode 100644 index 00000000..48c0baeb --- /dev/null +++ b/language-web/src/main/js/index.jsx
@@ -0,0 +1,43 @@
		1	import React from 'react';
		2	import { render } from 'react-dom';
		3
		4	import XtextCodeMirror from "./components/XtextCodeMirror";
		5
		6	import '../css/index.scss';
		7
		8	const initialValue = `class Family {
		9	contains Person[] members
		10	}
		11
		12	class Person {
		13	Person[] children opposite parent
		14	Person[0..1] parent opposite children
		15	int age
		16	TaxStatus taxStatus
		17	}
		18
		19	enum TaxStatus {
		20	child, student, adult, retired
		21	}
		22
		23	% A child cannot have any dependents.
		24	error invalidTaxStatus(Person p) :-
		25	taxStatus(p, child), children(p, _q).
		26
		27	Family('family').
		28	members('family', anne).
		29	members('family', bob).
		30	members('family', ciri).
		31	children(anne, ciri).
		32	?children(bob, ciri).
		33	taxStatus(anne, adult).
		34	age(anne, 35).
		35	bobAge: 27.
		36	age(bob, bobAge).
		37	!age(ciri, bobAge).
		38
		39	scope Family = 1, Person += 5..10.
		40	`;
		41	const app = <XtextCodeMirror initialValue={initialValue}/>;
		42
		43	render(app, document.getElementById('app'));