'App.tsx' is now entirely generated

simshadows · simshadows · commit 11278d4aaed2 · 2022-07-05T14:27:10.000+10:00
diff --git a/solves/base-template/src/components/App.tsx.ejs b/solves/base-template/src/components/App.tsx.ejs
@@ -17,15 +17,23 @@ function parseInput(s: string): string[] {
 interface State {
     initialized: boolean;
 
-    inputColours:  string;
-    inputVertices: string;
-    inputEdges:    string;
+<%-
+        Object.entries(input).map(([k, v]) => {
+            const x = {};
+            x.inputID = k;
+            return ht.stateTypeInputValue(x);
+        }).join("")
+-%>
 
     outputResult: null | ClingoResult;
     invalidInputLines: {
-        colours:  number[];
-        vertices: number[];
-        edges:    number[];
+<%-
+        Object.entries(input).map(([k, v]) => {
+            const x = {};
+            x.inputID = k;
+            return ht.stateTypeInputValidation(x);
+        }).join("")
+-%>
     };
 }
 
@@ -44,24 +52,38 @@ export class App extends React.Component<{}, State> {
             //       Either implement a proper uncontrolled
             //       component, or improve LineHighlighterTextbox into a
             //       controllable component!
-            inputColours:  "red\ngreen\nblue",
-            inputVertices: "v1\nv2\nv3\nv4",
-            inputEdges:    "v1,v2\nv2,v3\nv3,v4\nv4,v1\nv1,v3",
+<%-
+            Object.entries(input).map(([k, v]) => {
+                const x = {};
+                x.inputID = k;
+                x.initialValues = v.initialValues;
+                return ht.stateInputValue(x);
+            }).join("")
+-%>
 
             outputResult: null,
             invalidInputLines: {
-                colours:  [],
-                vertices: [],
-                edges:    [],
+<%-
+            Object.entries(input).map(([k, v]) => {
+                const x = {};
+                x.inputID = k;
+                x.initialValues = v.initialValues;
+                return ht.stateInputValidation(x);
+            }).join("")
+-%>
             },
         };
     }
 
     async _recalculateOutputs() {
         const result = await runSolver({
-            colours:  parseInput(this.state.inputColours),
-            vertices: parseInput(this.state.inputVertices),
-            edges:    parseInput(this.state.inputEdges),
+<%-
+        Object.entries(input).map(([k, v]) => {
+            const x = {};
+            x.inputID = k;
+            return ht.resultParameter(x);
+        }).join("")
+-%>
         });
         this.setState({
             initialized:       true,
@@ -77,15 +99,14 @@ export class App extends React.Component<{}, State> {
     override render() {
         const recalcCallback = async () => this._recalculateOutputs();
 
-        const setColours = async (event: {target: {value: string;};}) => {
-            this.setState({inputColours: event.target.value}, recalcCallback);
-        };
-        const setVertices = async (event: {target: {value: string;};}) => {
-            this.setState({inputVertices: event.target.value}, recalcCallback);
-        };
-        const setEdges = async (event: {target: {value: string;};}) => {
-            this.setState({inputEdges: event.target.value}, recalcCallback);
-        };
+<%-
+        Object.entries(input).map(([k, v]) => {
+            const x = {};
+            x.stateValue = "input" + upperCaseFirst(k);
+            x.onChangeFnName = "set" + upperCaseFirst(k);
+            return ht.onChangeHelpers(x);
+        }).join("")
+-%>
 
         return <div id="app">
 <%-
@@ -94,10 +115,10 @@ export class App extends React.Component<{}, State> {
                     x.title = v.title;
                     x.stateValue = "input" + upperCaseFirst(k);
                     x.stateValidation = k;
-                    x.onChange = "set" + upperCaseFirst(k);
+                    x.onChangeFnName = "set" + upperCaseFirst(k);
                     return ht.jsxParts(x);
                 }).join("")
-%>
+-%>
             <div className="output-table-wrapper">
                 <ResultDisplay
                     clingoResult={this.state.outputResult}
diff --git a/solves/base-template/src/components/App.tsx.ejshelpers/jsxParts.tsx.ejs b/solves/base-template/src/components/App.tsx.ejshelpers/jsxParts.tsx.ejs
@@ -3,6 +3,6 @@
                     label="<%- title %>"
                     initialValue={this.state.<%- stateValue %>}
                     errorLineNumbers={this.state.invalidInputLines.<%- stateValidation %>}
-                    onChange={<%- onChange %>}
+                    onChange={<%- onChangeFnName %>}
                 />
             </div>
diff --git a/solves/base-template/src/components/App.tsx.ejshelpers/onChangeHelpers.tsx.ejs b/solves/base-template/src/components/App.tsx.ejshelpers/onChangeHelpers.tsx.ejs
@@ -0,0 +1,3 @@
+        const <%- onChangeFnName %> = async (event: {target: {value: string;};}) => {
+            this.setState({<%- stateValue %>: event.target.value}, recalcCallback);
+        };
diff --git a/solves/base-template/src/components/App.tsx.ejshelpers/resultParameter.tsx.ejs b/solves/base-template/src/components/App.tsx.ejshelpers/resultParameter.tsx.ejs
@@ -0,0 +1 @@
+            <%- inputID %>: parseInput(this.state.input<%- upperCaseFirst(inputID) %>),
diff --git a/solves/base-template/src/components/App.tsx.ejshelpers/stateInputValidation.tsx.ejs b/solves/base-template/src/components/App.tsx.ejshelpers/stateInputValidation.tsx.ejs
@@ -0,0 +1 @@
+                <%- inputID %>: [],
diff --git a/solves/base-template/src/components/App.tsx.ejshelpers/stateInputValue.tsx.ejs b/solves/base-template/src/components/App.tsx.ejshelpers/stateInputValue.tsx.ejs
@@ -0,0 +1 @@
+            input<%- upperCaseFirst(inputID) %>: "<%- initialValues.join("\\n") %>",
diff --git a/solves/base-template/src/components/App.tsx.ejshelpers/stateTypeInputValidation.tsx.ejs b/solves/base-template/src/components/App.tsx.ejshelpers/stateTypeInputValidation.tsx.ejs
@@ -0,0 +1 @@
+        <%- inputID %>: number[];
diff --git a/solves/base-template/src/components/App.tsx.ejshelpers/stateTypeInputValue.tsx.ejs b/solves/base-template/src/components/App.tsx.ejshelpers/stateTypeInputValue.tsx.ejs
@@ -0,0 +1 @@
+    input<%- upperCaseFirst(inputID) %>: string;
diff --git a/solves/base-template/src/components/ResultDisplay.tsx b/solves/base-template/src/components/ResultDisplay.tsx
@@ -30,8 +30,8 @@ function renderSatisfiable(solution: string[]) {
     return <table className="result-satisfiable">
         <thead>
             <tr>
-                <td>Vertex</td>
-                <td>Colour</td>
+                <th>Vertex</th>
+                <th>Colour</th>
             </tr>
         </thead>
         <tbody>
diff --git a/solves/src/spec-parse.ts b/solves/src/spec-parse.ts
@@ -59,6 +59,7 @@ interface InputPartialSpec {
     title: string;
     template: PartialTemplate[];
     substitutionsCount: number;
+    initialValues: string[];
 }
 
 interface OutputPartialSpec {
@@ -107,13 +108,18 @@ export function getSpecValues(specPath: string): SpecValues {
             const title: string = ensureStr(obj.title, "input[].title");
             const template: string = ensureStr(obj.template, "input[].template");
             const substitutionsCount: number = (template.match(/%/g) || []).length;
+            const initialValues: string[] = obj.initialValues
+                .map((s: any) => ensureStr(s, "input[].initialValues[]"));
+
             if (substitutionsCount === 0) {
                 throw new Error(`Input ${obj.title} must provide a template that includes substitution markers.`);
             }
+
             return {
                 title,
                 template: parseSimpleTemplate(template),
-                substitutionsCount
+                substitutionsCount,
+                initialValues,
             };
         }),
 
diff --git a/solves/test/sample-spec.yml b/solves/test/sample-spec.yml
@@ -4,12 +4,27 @@ input:
   colours:
     title: Colours
     template: colour(%1%).
+    initialValues:
+      - red
+      - green
+      - blue
   vertices:
     title: Vertices
     template: vertex(%1%).
+    initialValues:
+      - v1
+      - v2
+      - v3
+      - v4
   edges:
     title: Edges
     template: edge(%1%,%2%).
+    initialValues:
+      - v1,v2
+      - v2,v3
+      - v3,v4
+      - v4,v1
+      - v1,v3
 output:
   colourings:
     title: Colourings

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+ const <%- onChangeFnName %> = async (event: {target: {value: string;};}) => {`
	`2`	`+ this.setState({<%- stateValue %>: event.target.value}, recalcCallback);`
	`3`	`+ };`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+ <%- inputID %>: parseInput(this.state.input<%- upperCaseFirst(inputID) %>),`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+ input<%- upperCaseFirst(inputID) %>: "<%- initialValues.join("\\n") %>",`