Revamped options: should work with existing backends

Author: fileformat

src/app/advanced/[engine]/index.html/OptionsInput.tsx

@@ -0,0 +1,38 @@
+import { RegexEngine, RegexOption } from "@/engines/RegexEngine";
+import { PiArrowSquareOut } from "react-icons/pi";
+
+
+type OptionInputProps = {
+    engine: RegexEngine;
+    options: string[];
+};
+
+function getBackendValue(option: RegexOption): string {
+
+    if (option.legacyCode) {
+        return option.legacyCode;
+    }
+    return option.code;
+}
+
+export default function OptionsInput({ engine, options }: OptionInputProps) {
+
+    const optionCheckboxes = engine.options.map((option) => {
+        const optionValue = getBackendValue(option);
+
+        return (
+        <div className="form-check" key={option.code}>
+            <input className="form-check-input" type="checkbox" id={`option-${option.code}`} name="option" value={optionValue} defaultChecked={options.includes(option.code)} />
+                <label className="form-check-label" htmlFor={`option-${option.code}`}>{option.description} (<code>{option.code}</code>)</label>
+        </div>
+    )});
+
+    return (
+        <div className="mb-3">
+            <label className="form-label">Options <small><a href="options.html" target="_new">Help<PiArrowSquareOut className="ms-2" /></a></small></label>
+            <div className="row ms-1">
+                {optionCheckboxes}
+            </div>
+        </div>
+    );
+}

src/app/advanced/[engine]/index.html/TestForm.tsx

@@ -1,17 +1,17 @@
 'use client'
 import React, { useState } from 'react';
-import { PiArrowSquareOut } from "react-icons/pi";
 import { runTest } from '@/engines';
 import { TestInput } from '@/types/TestInput';
 import { TestOutput } from '@/types/TestOutput';
 import { TestResults } from '@/components/TestResults';
 import { RegexEngine } from '@/engines/RegexEngine';
+import OptionsInput from './OptionsInput';
 
-type props = {
+type TestFormProps = {
     engine: RegexEngine;
 }
 
-export default function TestForm({ engine }: props) {
+export default function TestForm({ engine }: TestFormProps) {
     const [testOutput, setTestOutput] = useState<TestOutput | null>();
     const [testInput, setTestInput] = useState<TestInput | null>();
 
@@ -31,7 +31,7 @@ export default function TestForm({ engine }: props) {
         const localInput: TestInput = {
             regex: formData.get('regex') as string,
             replacement: formData.get('replacement') as string,
-            options: formData.get('options') as string,
+            option: formData.getAll('option') as string[],
             inputs: formData.getAll('input') as string[]
         };
         console.log(localInput);
@@ -58,17 +58,7 @@ export default function TestForm({ engine }: props) {
                     <label htmlFor="replacement" className="form-label">Replacement</label>
                     <input type="text" className="form-control" id="replacement" name="replacement" />
                 </div>
-                <div className="mb-3">
-                    <label htmlFor="options" className="form-label">Options</label>
-                    <div className="row">
-                        <div className="col-7 col-sm-6 col-md-4 col-lg-3 col-xl-2">
-                            <input type="text" className="form-control" id="options" name="options" />
-                        </div>
-                        <div className="col-5 col-sm-6 col-md-8 col-lg-9 col-xl-10">
-                            <a href="options.html" target="_new">Help<PiArrowSquareOut className="ms-2" /></a>
-                        </div>
-                    </div>
-                </div>
+                { engine.options.length > 0 ? <OptionsInput engine={engine} options={[]} /> : <></> }
                 <button type="submit" className="btn btn-primary">Test</button>
                 {inputRows}
                 <button type="submit" className="btn btn-primary">Test</button>

src/app/advanced/[engine]/options.html/page.tsx

@@ -1,4 +1,5 @@
 import { getEngine } from '@/engines';
+import { RegexOption } from '@/engines/RegexEngine';
 import { notFound } from 'next/navigation';
 
 export async function generateMetadata({ params }: { params: { engine: string } }) {
@@ -13,6 +14,16 @@ export async function generateMetadata({ params }: { params: { engine: string }
     }
 }
 
+function OptionValue(theOption: RegexOption): string {
+    if (theOption.numericCode) {
+        return theOption.numericCode.toString();
+    }
+    if (theOption.legacyCode) {
+        return theOption.legacyCode;
+    }
+    return theOption.code;
+}
+
 export default function Page({ params }: { params: { engine: string } }) {
     const engine = getEngine(params.engine);
     if (!engine) {
@@ -29,13 +40,17 @@ export default function Page({ params }: { params: { engine: string } }) {
                     <tr>
                         <th>Option</th>
                         <th>Description</th>
+                        <th>Backend value</th>
+                        <th>Portable value</th>
                     </tr>
                 </thead>
                 <tbody>
                     {engine.options.map((option) => (
                         <tr key={option.code}>
                             <td>{option.code}</td>
                             <td>{option.description}</td>
+                            <td>{OptionValue(option)}</td>
+                            <td>{option.portableCode || <i className="text-muted">(not portable)</i>}</td>
                         </tr>
                     ))}
                 </tbody>

src/app/advanced/[engine]/results.html/route.ts

@@ -32,7 +32,7 @@ export async function GET(
   const testInput = {
     regex: "test",
     replacement: "test",
-    options: "get",
+    option: [],
     inputs: ["test"],
   };
 
@@ -71,7 +71,7 @@ export async function POST(
   const testInput = {
     regex: (rawData.get("regex") || "") as string,
     replacement: (rawData.get("replacement") || "") as string,
-    options: (rawData.get("options") || "") as string,
+    option: (rawData.getAll("options") || "") as string[],
     inputs: (rawData.getAll("input") || []) as string[],
   };
 

src/engines/RegexEngine.ts

@@ -1,13 +1,26 @@
-type RegexOption = {
+
+type PortableCodes = "ignorecase" | "multiline" | "comments" | "dotall";
+
+export type RegexOption = {
   code: string;
-  value: string | number;
+  legacyCode?: string;    // for the original RegexPlanet backends
+  portableCode?: PortableCodes;  // for translating this code when switching to other engines
+  numericCode?: number;    // the value for engines that use a numeric bitmask for options
   description: string;
-  portable?: string;
+};
+
+export type RegexExtraInput = {
+  name: string; // name of the form field (used in the POST request)
+  prompt: string; // text to display to the user
+  element: JSX.Element; // the input element to display to gather the input
+  help: string; // text to display to the user to help them fill out the form
+  defaultValue: string; // the default value to use if the user doesn't provide one
 };
 
 type RegexEngine = {
   description: string; // library or module name (do not include `short_name`)
   enabled: boolean; // always true for now
+  extra_inputs?: RegexExtraInput[]; // A list of extra inputs to gather from the user
   help_label: string; // text for the help button on the testing page
   help_url: string; // URL destination for the help button on the testing page
   handle: string; // unique identifier for the language or engine used as the slug in URLs

src/engines/go.ts

@@ -15,9 +15,7 @@ export const go: RegexEngine = {
   options: [
     {
       code: "posix",
-      description:
-        "POSIX ERE (egrep) syntax and leftmost-longest match semantics",
-      value: "posix",
+      description: "Use `CompilePOSIX` instead of `Compile`",
     },
   ],
   option_notes: `The <code>posix</code> option is really a separate API call (<code>CompilePOSIX</code>).  Other option need to be specified in the regex pattern.`,

src/engines/java.ts

@@ -17,38 +17,55 @@ export const java: RegexEngine = {
   options: [
     {
       code: "CANON_EQ",
-      value: 128,
-      description: "Enables canonical equivalence.",
+      legacyCode: "canon",
+      numericCode: 128,
+      description: "Canonical equivalence.",
     },
     {
       code: "CASE_INSENSITIVE",
-      value: 2,
-      description: "Enables case-insensitive matching.",
+      legacyCode: "ignorecase",
+      portableCode: "ignorecase",
+      numericCode: 2,
+      description: "Case-insensitive matching.",
     },
     {
       code: "COMMENTS",
-      value: 4,
-      description: "Permits whitespace and comments in pattern.",
+      legacyCode: "comments",
+      portableCode: "comments",
+      numericCode: 4,
+      description: "Allow whitespace and comments in pattern.",
     },
-    { code: "DOTALL", value: 32, description: "Enables dotall mode." },
+    { code: "DOTALL", legacyCode: "dotall", numericCode: 32, description: "Enables dotall mode." },
     {
       code: "LITERAL",
-      value: 16,
-      description: "Enables literal parsing of the pattern.",
+      legacyCode: "literal",
+      numericCode: 16,
+      description: "Literal parsing of the pattern.",
     },
-    { code: "MULTILINE", value: 8, description: "Enables multiline mode." },
     {
-      code: "UNICODE_CASE",
-      value: 64,
-      description: " Enables Unicode-aware case folding.",
+      code: "MULTILINE",
+      legacyCode: "multiline",
+      numericCode: 8,
+      description: "Multiline mode.",
     },
     {
+      code: "UNICODE_CASE",
+      legacyCode: "unicode",
+      numericCode: 64,
+      description: "Unicode-aware case folding.",
+    },
+    /* LATER: enable when engine gets updated {
       code: "UNICODE_CHARACTER_CLASS",
-      value: 256,
+      numericCode: 256,
       description:
-        "Enables the Unicode version of Predefined character classes and POSIX character classes.",
+        "Use the Unicode version of Predefined character classes and POSIX character classes.",
+    },*/
+    {
+      code: "UNIX_LINES",
+      legacyCode: "unixline",
+      numericCode: 1,
+      description: "Unix lines mode.",
     },
-    { code: "UNIX_LINES", value: 1, description: "Enables Unix lines mode." },
   ],
   short_name: "Java",
   source_url: "https://github.com/regexplanet/regexplanet-java",

src/engines/nodejs.ts

@@ -21,44 +21,41 @@ export const nodejs: RegexEngine = {
     "https://nodeping.com/reports/checks/9z4pmj0b-ve3m-42s9-8s07-6c53rlel69iy",
   notfound: ["javascript", "typescript"],
   options: [
-    {
+    /*{
       code: "d",
-      value: "d",
       description: "Generate indices for substring matches. (hasIndices)",
-    },
-    { code: "g", value: "g", description: "Global search. (global)" },
+    },*/
+    { code: "g", 
+      legacyCode: "global",
+      description: "Global search. (global)" },
     {
       code: "i",
-      value: "i",
+      legacyCode: "ignorecase",
       description: "Case-insensitive search. (ignoreCase)",
     },
     {
       code: "m",
-      value: "m",
+      legacyCode: "multiline",
       description:
         "Allows ^ and $ to match next to newline characters. (multiline)",
     },
-    {
+    /*{
       code: "s",
-      value: "s",
       description: "Allows . to match newline characters. (dotAll)",
     },
     {
       code: "u",
-      value: "u",
       description: `"Unicode"; treat a pattern as a sequence of Unicode code points. (unicode)`,
     },
     {
       code: "v",
-      value: "v",
       description:
         "An upgrade to the u mode with more Unicode features. (unicodeSets)",
     },
     {
       code: "y",
-      value: "y",
       description: `Perform a "sticky" search that matches starting at the current position in the target string. (sticky)`,
-    },
+    },*/
   ],
   short_name: "Node.js",
   source_url: "https://github.com/regexplanet/regexplanet-js",

src/engines/perl.ts

@@ -16,21 +16,32 @@ export const perl: RegexEngine = {
   nodeping_url:
     "https://nodeping.com/reports/checks/gkh86985-3ae2-4w7b-8opi-il8pki62v1ie",
   options: [
-    { code: "m", value: "m", description: "multiline" },
-    { code: "s", value: "s", description: "single line" },
-    { code: "i", value: "i", description: "case-insensitive" },
+    {
+      code: "m",
+      legacyCode: "multiline",
+      portableCode: "multiline",
+      description: "Multiline",
+    },
+    { code: "s", legacyCode: "dotall", description: "Single line" },
+    {
+      code: "i",
+      legacyCode: "ignorecase",
+      portableCode: "ignorecase",
+      description: "Case-insensitive",
+    },
     {
       code: "x",
-      value: "x",
+      legacyCode: "comment",
+      portableCode: "comments",
       description: "Extended with whitespace and comments",
     },
-    { code: "p", value: "p", description: "Preserve matched strings" },
-    { code: "g", value: "g", description: "Global match" },
-    { code: "c", value: "c", description: "Keep current position" },
-    { code: "a", value: "a", description: "Use ASCII charset rules" },
-    { code: "d", value: "d", description: "Use default charset rules" },
-    { code: "l", value: "l", description: "Use locale charset rules" },
-    { code: "u", value: "u", description: "Use Unicode charset rules" },
+    { code: "p", legacyCode: "p", description: "Preserve matched strings" },
+    { code: "g", legacyCode: "global", description: "Global match" },
+    { code: "c", legacyCode: "c", description: "Keep current position" },
+    { code: "a", legacyCode: "a", description: "Use ASCII charset rules" },
+    { code: "d", legacyCode: "d", description: "Use default charset rules" },
+    { code: "l", legacyCode: "l", description: "Use locale charset rules" },
+    { code: "u", legacyCode: "u", description: "Use Unicode charset rules" },
   ],
   option_notes: `When <code>m</code> and <code>s</code> together, <code>.</code> matches any char including newlines but <code>^</code> and <code>$</code> match lines.`,
   short_name: "Perl",