Use regexplanet-common for 'Your Browser' testing

Author: fileformat

.npmrc

@@ -0,0 +1 @@
+@jsr:registry=https://npm.jsr.io

package-lock.json

@@ -1,6 +1,7 @@
 {
   "dependencies": {
     "@popperjs/core": "^2.11.8",
+    "@regexplanet/common": "npm:@jsr/regexplanet__common@^1.2.0",
     "bootstrap": "^5.3.3",
     "fetch-jsonp": "^1.3.0",
     "next": "^14.2.14",

package.json

@@ -4,7 +4,7 @@ import { PiArrowSquareOut } from "react-icons/pi";
 
 type OptionInputProps = {
     engine: RegexEngine;
-    options: string[];
+    optionsOrNull: string[];
 };
 
 function getBackendValue(option: RegexOption): string {
@@ -15,7 +15,9 @@ function getBackendValue(option: RegexOption): string {
     return option.code;
 }
 
-export default function OptionsInput({ engine, options }: OptionInputProps) {
+export default function OptionsInput({ engine, optionsOrNull }: OptionInputProps) {
+
+    const options = optionsOrNull || [];
 
     const optionCheckboxes = engine.options.map((option) => {
         const optionValue = getBackendValue(option);

public/images/browsers/browser-ar21.svg

@@ -1,11 +1,9 @@
 'use client'
 import React, { useState } from 'react';
-import { TestInput } from '@/types/TestInput';
-import { TestOutput } from '@/types/TestOutput';
 import { TestResults } from '@/components/TestResults';
 import { RegexEngine } from '@/engines/RegexEngine';
 import OptionsInput from './OptionsInput';
-
+import { runTest as runBrowserTest, type TestInput, type TestOutput } from '@regexplanet/common';
 type TestFormProps = {
     engine: RegexEngine;
     testUrl?: string;       // override for use during engine development
@@ -14,10 +12,14 @@ type TestFormProps = {
 
 async function runTest(test_url:string, testInput: TestInput): Promise<TestOutput> {
 
+    if (test_url === 'javascript:runBrowserTest') {
+        return runBrowserTest(testInput);
+    }
+
     const postData =
         `regex=${encodeURIComponent(testInput.regex)}` +
         `&replacement=${encodeURIComponent(testInput.replacement)}` +
-        `&${testInput.option.map((option) => `option=${encodeURIComponent(option)}`).join("&")}` +
+        `&${testInput.options.map((option) => `option=${encodeURIComponent(option)}`).join("&")}` +
         `&${testInput.inputs.map((input) => `input=${encodeURIComponent(input)}`).join("&")}`;
 
     console.log("posting", test_url, postData);
@@ -28,8 +30,9 @@ async function runTest(test_url:string, testInput: TestInput): Promise<TestOutpu
         headers: {
             "Content-Type": "application/x-www-form-urlencoded",
         },
-        mode: "no-cors",
+        //mode: "no-cors",
     });
+    console.log("response", response);
     const data = await response.json();
 
     console.log("test results", data);
@@ -119,7 +122,7 @@ export default function TestForm(props: TestFormProps) {
                     <label htmlFor="replacement" className="form-label">Replacement</label>
                     <input type="text" className="form-control" id="replacement" name="replacement" defaultValue={testInput.replacement} />
                 </div>
-                { props.engine.options.length > 0 ? <OptionsInput engine={props.engine} options={testInput.option} /> : <></> }
+                { props.engine.options.length > 0 ? <OptionsInput engine={props.engine} options={testInput.options} /> : <></> }
                 <button type="submit" className="btn btn-primary">Test</button>
                 {inputRows}
                 <button type="submit" className="btn btn-primary">Test</button>
@@ -135,7 +138,7 @@ function formDataToTestInput(engineHandle:string, formData: FormData): TestInput
         engine: engineHandle,
         regex: formData.get('regex') as string,
         replacement: formData.get('replacement') as string,
-        option: formData.getAll('option') as string[],
+        options: formData.getAll('option') as string[],
         inputs: formData.getAll('input') as string[]
     };
     return retVal;;

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

@@ -31,15 +31,13 @@ export const browser: RegexEngine = {
       code: "d",
       description: "Generate indices for substring matches. (hasIndices)",
     },
-    { code: "g", legacyCode: "global", description: "Global search. (global)" },
+    { code: "g", description: "Global search. (global)" },
     {
       code: "i",
-      legacyCode: "ignorecase",
       description: "Case-insensitive search. (ignoreCase)",
     },
     {
       code: "m",
-      legacyCode: "multiline",
       description:
         "Allows ^ and $ to match next to newline characters. (multiline)",
     },
@@ -64,7 +62,7 @@ export const browser: RegexEngine = {
   short_name: "Your Browser",
   source_url: "https://github.com/regexplanet/regexplanet-next",
   status_url: undefined,
-  test_url: "javascript:",
+  test_url: "javascript:runBrowserTest",
 };
 
 

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

@@ -56,7 +56,7 @@ export const nodejs: RegexEngine = {
     },*/
   ],
   short_name: "Node.js",
-  source_url: "https://github.com/regexplanet/regexplanet-js",
-  status_url: "https://js.gcr.regexplanet.com/status.json",
-  test_url: "https://js.gcr.regexplanet.com/test.json",
+  source_url: "https://github.com/regexplanet/regexplanet-nodejs",
+  status_url: "https://nodejs.gcr.regexplanet.com/status.json",
+  test_url: "https://nodejs.gcr.regexplanet.com/test.json",
 };

src/engines/browser.ts

@@ -58,7 +58,7 @@ export const python: RegexEngine = {
     },
   ],
   short_name: "Python",
-  source_url: "https://github.com/regexplanet/regexplanet-python",
-  status_url: "https://regexplanet-python.appspot.com/status.json",
-  test_url: "https://regexplanet-python.appspot.com/test.json",
+  source_url: "https://github.com/regexplanet/regexplanet-python3",
+  status_url: "https://python3.gcr.regexplanet.com/status.json",
+  test_url: "https://python3.gcr.regexplanet.com/test.json",
 };