├── public
    ├── favicon.ico
    ├── favicon.svg
    └── icons.svg
├── vitest.config.js
├── src
    ├── entry-client.jsx
    ├── components
    │   ├── ErrorMessage.module.css
    │   ├── HighlightWhiteSpace.module.css
    │   ├── Range.jsx
    │   ├── Table.module.css
    │   ├── ErrorMessage.jsx
    │   ├── EnhancedTextarea.module.css
    │   ├── HighlightWhiteSpace.jsx
    │   ├── Table.jsx
    │   └── EnhancedTextarea.jsx
    ├── lib
    │   ├── range.js
    │   ├── featureDetection.js
    │   ├── range.test.js
    │   ├── getRegExpFromString.js
    │   ├── getRegExpFromString.test.js
    │   ├── createShortcut.js
    │   ├── markText.js
    │   └── markText.test.js
    ├── routes
    │   ├── cheat-sheet
    │   │   ├── index.module.css
    │   │   └── index.jsx
    │   ├── [...404].jsx
    │   └── (home)
    │   │   ├── index.module.css
    │   │   └── index.jsx
    ├── entry-server.jsx
    ├── settings.js
    ├── app.jsx
    ├── app.css
    └── context
    │   └── app.jsx
├── app.config.js
├── jsconfig.json
├── .gitignore
├── README.md
├── .eslintrc.cjs
├── package.json
└── .github
    └── workflows
        └── main.yml


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/loonkwil/regexify/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/vitest.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vitest/config";
2 | 
3 | export default defineConfig({
4 |   test: {
5 |     globals: true,
6 |   },
7 | });
8 | 


--------------------------------------------------------------------------------
/src/entry-client.jsx:
--------------------------------------------------------------------------------
1 | // @refresh reload
2 | import { mount, StartClient } from "@solidjs/start/client";
3 | 
4 | mount(() => <StartClient />, document.getElementById("app"));
5 | 


--------------------------------------------------------------------------------
/app.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "@solidjs/start/config";
2 | 
3 | export default defineConfig({
4 |   server: {
5 |     baseURL: process.env.BASE_PATH,
6 |     preset: "static",
7 |   },
8 | });
9 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "jsx": "preserve",
 4 |     "jsxImportSource": "solid-js",
 5 |     "paths": {
 6 |       "~/*": [
 7 |         "./src/*"
 8 |       ]
 9 |     }
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/public/favicon.svg:
--------------------------------------------------------------------------------
1 | <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M9.94531 2.33594H11.4297L5.28906 15.4844H3.79688L9.94531 2.33594Z" fill="#28292F"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/src/components/ErrorMessage.module.css:
--------------------------------------------------------------------------------
 1 | .root {
 2 |   display: grid;
 3 |   justify-content: center;
 4 |   align-content: center;
 5 |   gap: 2rem;
 6 |   text-align: center;
 7 | 
 8 |   & div {
 9 |     font-weight: normal;
10 |     font-size: 3rem;
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/lib/range.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * Returns a list of numbers from "start" (inclusive) to "end" (exclusive)
3 |  *
4 |  * @param {number} start
5 |  * @param {number} end
6 |  */
7 | export default (start, end) =>
8 |   Array.from({ length: Math.abs(end - start) }, (_, i) => start + i);
9 | 


--------------------------------------------------------------------------------
/src/routes/cheat-sheet/index.module.css:
--------------------------------------------------------------------------------
 1 | .root {
 2 |   display: grid;
 3 |   grid-template-columns: auto 1fr;
 4 |   gap: 1.5rem;
 5 | 
 6 |   & dl {
 7 |     display: grid;
 8 |     grid-template-columns: auto 1fr;
 9 |     gap: 0.5rem;
10 |   }
11 | 
12 |   & dd {
13 |     margin: 0;
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/src/lib/featureDetection.js:
--------------------------------------------------------------------------------
1 | /** @returns {boolean} */
2 | export const isCSSNestingSupported = () => CSS.supports("selector(&)");
3 | 
4 | /** @returns {boolean} */
5 | export const isModernRegExpSupported = () =>
6 |   typeof String.prototype.matchAll === "function" &&
7 |   "hasIndices" in RegExp.prototype;
8 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | 
 2 | dist
 3 | .solid
 4 | .output
 5 | .vercel
 6 | .netlify
 7 | .vinxi
 8 | app.config.timestamp_*.js
 9 | 
10 | # Environment
11 | .env
12 | .env*.local
13 | 
14 | # dependencies
15 | /node_modules
16 | 
17 | # IDEs and editors
18 | /.idea
19 | .project
20 | .classpath
21 | *.launch
22 | .settings/
23 | 
24 | # Temp
25 | gitignore
26 | 
27 | # System Files
28 | .DS_Store
29 | Thumbs.db
30 | 


--------------------------------------------------------------------------------
/src/components/HighlightWhiteSpace.module.css:
--------------------------------------------------------------------------------
 1 | .root {
 2 |   [data-char] {
 3 |     vertical-align: bottom;
 4 |     position: relative;
 5 |     display: inline-block;
 6 |     height: 1lh;
 7 |     cursor: text;
 8 | 
 9 |     &:after {
10 |       content: attr(data-char);
11 |       color: var(--text-secondary);
12 |       position: absolute;
13 |       left: 0;
14 |       top: 0;
15 |     }
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/components/Range.jsx:
--------------------------------------------------------------------------------
 1 | import { Index } from "solid-js";
 2 | import range from "~/lib/range";
 3 | 
 4 | /**
 5 |  * @param {Object} props
 6 |  * @param {number} props.start
 7 |  * @param {number} props.end
 8 |  * @param {function(function(): number, number)} props.children
 9 |  * @returns {import('solid-js').JSX.Element}
10 |  */
11 | export default (props) => (
12 |   <Index each={range(props.start, props.end)}>{props.children}</Index>
13 | );
14 | 


--------------------------------------------------------------------------------
/src/lib/range.test.js:
--------------------------------------------------------------------------------
 1 | import range from "./range";
 2 | 
 3 | describe("range", () => {
 4 |   test.each([
 5 |     // start, end, expected
 6 |     [-1, 2, [-1, 0, 1]],
 7 |     [1, 2, [1]],
 8 |   ])("it should create the range", (start, end, expected) => {
 9 |     expect(range(start, end)).toMatchObject(expected);
10 |   });
11 | 
12 |   test("it should create an empty range if the start and the end is equal", () => {
13 |     expect(range(1, 1)).toHaveLength(0);
14 |   });
15 | });
16 | 


--------------------------------------------------------------------------------
/src/routes/[...404].jsx:
--------------------------------------------------------------------------------
 1 | import { HttpStatusCode } from "@solidjs/start";
 2 | import { A } from "@solidjs/router";
 3 | import ErrorMessage from "~/components/ErrorMessage";
 4 | 
 5 | export default () => (
 6 |   <>
 7 |     <HttpStatusCode code={404} />
 8 |     <ErrorMessage
 9 |       message={
10 |         <>
11 |           404 Page Not Found
12 |           <br />
13 |           <A href="/">Go Back to the Home Page</A>
14 |         </>
15 |       }
16 |     />
17 |   </>
18 | );
19 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Regexify
 2 | 
 3 | ![Preview of the app](https://github.com/loonkwil/regexify/assets/1401202/56db1bcb-68da-449c-9c32-87e8f044edf8)
 4 | 
 5 | https://loonkwil.github.io/regexify/
 6 | 
 7 | A web-based tool that allows you to interactively test and experiment with
 8 | regular expressions in real-time.
 9 | 
10 | The primary goal of this application is to experiment with
11 | [SolidJS](https://solidjs.com/),
12 | [SolidStart](https://start.solidjs.com/),
13 | Server Side Rendering,
14 | [nested CSS](https://drafts.csswg.org/css-nesting/),
15 | and accessibility.
16 | 


--------------------------------------------------------------------------------
/src/components/Table.module.css:
--------------------------------------------------------------------------------
 1 | .root {
 2 |   & table {
 3 |     white-space: pre-wrap;
 4 |     width: 100%;
 5 |     border-collapse: collapse;
 6 | 
 7 |     & thead {
 8 |       text-align: left;
 9 |     }
10 | 
11 |     :is(th, td) {
12 |       padding: 0.5rem 0.75rem;
13 |     }
14 | 
15 |     & td {
16 |       border-top: 1px solid var(--border-secondary);
17 | 
18 |       &:empty:after {
19 |         content: " ";
20 |       }
21 |     }
22 |   }
23 | 
24 |   & button {
25 |     padding: 0.5rem 0.75rem;
26 |     cursor: pointer;
27 |     text-decoration: underline;
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/src/lib/getRegExpFromString.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @example
 3 |  * // returns /[0-9]/g
 4 |  * getRegExpFromString(`/
 5 |  * [0-9]
 6 |  * /g`)
 7 |  * @param {string}
 8 |  * @returns {RegExp}
 9 |  * @throws {SyntaxError}
10 |  */
11 | export default (str) => {
12 |   const oneline = str.replaceAll("\n", "").trim();
13 |   const match = oneline.match(/\/(?<pattern>.*?)\/(?<flags>[a-z]+)?$/);
14 |   if (!match) {
15 |     throw new SyntaxError("Invalid RegExp");
16 |   }
17 | 
18 |   const {
19 |     groups: { pattern, flags = "" },
20 |   } = match;
21 |   return new RegExp(pattern, flags);
22 | };
23 | 


--------------------------------------------------------------------------------
/src/components/ErrorMessage.jsx:
--------------------------------------------------------------------------------
 1 | import styles from "./ErrorMessage.module.css";
 2 | import { createEffect } from "solid-js";
 3 | 
 4 | /**
 5 |  * @param {Object} props
 6 |  * @param {string} props.message
 7 |  * @param {Error=} props.error
 8 |  * @returns {import('solid-js').JSX.Element}
 9 |  */
10 | export default (props) => {
11 |   createEffect(() => {
12 |     if (props.error) {
13 |       console.error(props.error);
14 |     }
15 |   });
16 | 
17 |   return (
18 |     <div class={styles.root}>
19 |       <div aria-hidden="true">(☉_☉)</div>
20 |       <p>{props.message}</p>
21 |     </div>
22 |   );
23 | };
24 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     browser: true,
 5 |     es2021: true,
 6 |   },
 7 |   plugins: ["solid"],
 8 |   extends: ["eslint:recommended", "plugin:solid/recommended"],
 9 | 
10 |   overrides: [],
11 |   parserOptions: {
12 |     ecmaVersion: "latest",
13 |     sourceType: "module",
14 |   },
15 |   rules: {},
16 |   globals: {
17 |     suite: true,
18 |     test: true,
19 |     describe: true,
20 |     it: true,
21 |     expect: true,
22 |     assert: true,
23 |     vitest: true,
24 |     vi: true,
25 |     beforeAll: true,
26 |     afterAll: true,
27 |     beforeEach: true,
28 |     afterEach: true,
29 |   },
30 | };
31 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Regexify",
 3 |   "description": "Live JavaScript RegExp tester",
 4 |   "scripts": {
 5 |     "dev": "vinxi dev",
 6 |     "build": "vinxi build",
 7 |     "test:unit": "vitest",
 8 |     "test": "npm run test:unit"
 9 |   },
10 |   "type": "module",
11 |   "devDependencies": {
12 |     "@solidjs/meta": "^0.29.4",
13 |     "@solidjs/router": "^0.15.3",
14 |     "@solidjs/start": "^1.1.1",
15 |     "eslint": "^8.42.0",
16 |     "eslint-plugin-solid": "^0.14.5",
17 |     "postcss": "^8.5.3",
18 |     "solid-js": "^1.9.5",
19 |     "vinxi": "^0.5.3",
20 |     "vite": "^6.2.0",
21 |     "vitest": "^3.0.7"
22 |   },
23 |   "version": "1.3.3"
24 | }
25 | 


--------------------------------------------------------------------------------
/src/entry-server.jsx:
--------------------------------------------------------------------------------
 1 | // @refresh reload
 2 | import { createHandler, StartServer } from "@solidjs/start/server";
 3 | 
 4 | export default createHandler(() => (
 5 |   <StartServer
 6 |     document={({ assets, children, scripts }) => (
 7 |       <html lang="en">
 8 |         <head>
 9 |           <meta charset="utf-8" />
10 |           <meta name="viewport" content="width=device-width, initial-scale=1" />
11 |           <meta name="color-scheme" content="light dark" />
12 |           <link rel="icon" type="image/svg+xml" href={`${import.meta.env.SERVER_BASE_URL}favicon.svg`} />
13 |           {assets}
14 |         </head>
15 |         <body>
16 |           <div id="app">{children}</div>
17 |           {scripts}
18 |         </body>
19 |       </html>
20 |     )}
21 |   />
22 | ));
23 | 


--------------------------------------------------------------------------------
/src/lib/getRegExpFromString.test.js:
--------------------------------------------------------------------------------
 1 | import getRegExpFromString from "./getRegExpFromString";
 2 | 
 3 | describe("getRegExpFromString", () => {
 4 |   test.each([
 5 |     "/",
 6 |     "/(?:)/z", // Invalid flag
 7 |     "/[/g",
 8 |   ])("it should throw an error if the RegExp is invalid", (pattern) => {
 9 |     expect(() => getRegExpFromString(pattern)).toThrowError(SyntaxError);
10 |   });
11 | 
12 |   test("it should convert the string literal to a RegExp object", () => {
13 |     const str = "/./g";
14 |     const regexp = getRegExpFromString(str);
15 |     expect(regexp).toBeInstanceOf(RegExp);
16 |     expect(regexp.toString()).toBe(str);
17 |   });
18 | 
19 |   test("it should work with a multiline pattern", () => {
20 |     const str = `/
21 | [0-9]+/`;
22 |     const regexp = getRegExpFromString(str);
23 |     expect("1234".match(regexp)[0]).toEqual("1234");
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/settings.js:
--------------------------------------------------------------------------------
 1 | export const initialPattern =
 2 |   "/(?<modifier>ctrl|alt|cmd)\\s?[+]\\s?(?<key>\\w)/gi";
 3 | 
 4 | export const initialInput = `🐭 Size and Speed
 5 | It uses SolidJS and Server Side Rendering to be fast.
 6 | The initial page is less than 40kB.
 7 | 
 8 | ♿️ Accessibility
 9 | Keyboard navigation, screen readers, light and dark modes, and high contrast are supported.
10 | 
11 | ⌨️ Keyboard Shortcuts
12 | Select pattern: Ctrl + P.
13 | Select input field: Ctrl + I.
14 | Copy RegExp: Ctrl + S.
15 | Open cheat sheet: Ctrl + M (hit Ctrl + M again to close it).
16 | 
17 | 🔒 Privacy
18 | Everything is calculated in your browser.
19 | Your data will not be uploaded or stored anywhere.
20 | There are no ads or cookies.
21 | 
22 | ✨ Extended RegExp
23 | You can use a multiline string as a pattern.`;
24 | 
25 | // Debounce input events if the text is too large
26 | export const largeInput = 1e4;
27 | 
28 | export const debounceTimeoutInMs = 200;
29 | 


--------------------------------------------------------------------------------
/src/lib/createShortcut.js:
--------------------------------------------------------------------------------
 1 | import { isServer } from "solid-js/web";
 2 | import { onCleanup } from "solid-js";
 3 | 
 4 | /**
 5 |  * @param {Object} options
 6 |  * @param {string} options.key
 7 |  * @param {boolean=} options.ctrlKey
 8 |  * @param {boolean=} options.altKey
 9 |  * @param {boolean=} options.metaKey
10 |  * @param {boolean=} options.shiftKey
11 |  * @param {function(KeyboardEvent)} cb
12 |  */
13 | export default (
14 |   { key, ctrlKey = false, altKey = false, metaKey = false, shiftKey = false },
15 |   cb
16 | ) => {
17 |   if (isServer) {
18 |     return;
19 |   }
20 | 
21 |   const handler = (e) => {
22 |     if (
23 |       key.toLowerCase() === e.key &&
24 |       ctrlKey === e.ctrlKey &&
25 |       altKey === e.altKey &&
26 |       metaKey === e.metaKey &&
27 |       shiftKey === e.shiftKey
28 |     ) {
29 |       cb(e);
30 |     }
31 |   };
32 |   window.addEventListener("keydown", handler);
33 |   onCleanup(() => {
34 |     window.removeEventListener("keydown", handler);
35 |   });
36 | };
37 | 


--------------------------------------------------------------------------------
/src/components/EnhancedTextarea.module.css:
--------------------------------------------------------------------------------
 1 | .root {
 2 |   resize: vertical;
 3 |   border: 2px solid var(--border-default);
 4 |   border-radius: 0.5rem;
 5 |   background: var(--input-bg);
 6 |   padding: 0.5rem 0.75rem 0.5rem;
 7 |   overflow: hidden;
 8 |   display: grid;
 9 |   gap: 0.5rem;
10 |   grid-template-rows: auto 1fr;
11 |   min-height: 4rem;
12 |   user-select: none;
13 |   transition: border-color 150ms;
14 | 
15 |   &:focus-within {
16 |     border-color: var(--border-active);
17 |   }
18 | 
19 |   &:has(textarea:invalid) {
20 |     border-color: var(--border-error);
21 |   }
22 | 
23 |   & label {
24 |     font-size: var(--text-sm);
25 |     font-weight: bold;
26 |     color: var(--text-secondary);
27 |   }
28 | }
29 | 
30 | .container {
31 |   overflow: auto;
32 |   height: 100%;
33 |   display: grid;
34 | 
35 |   & > * {
36 |     grid-area: 1 / 1;
37 |     border: none;
38 |     padding: 0;
39 |     margin: 0;
40 |     white-space: pre-wrap;
41 |     background: transparent;
42 |     color: transparent;
43 |   }
44 | 
45 |   & > textarea {
46 |     color: var(--text-main);
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/src/routes/(home)/index.module.css:
--------------------------------------------------------------------------------
 1 | .root {
 2 |   display: grid;
 3 |   gap: 1.5rem;
 4 |   grid-template-columns: 1fr auto;
 5 |   grid-template-rows: auto 1fr;
 6 | }
 7 | 
 8 | .main {
 9 |   grid-column-end: span 2;
10 |   display: grid;
11 |   gap: 1.5rem;
12 |   grid-template-areas:
13 |     "pattern"
14 |     "input"
15 |     "matches";
16 |   grid-template-columns: 100%;
17 |   grid-template-rows: auto auto 1fr;
18 | 
19 |   @media screen and (min-width: 1024px) {
20 |     grid-template-areas:
21 |       "pattern matches"
22 |       "input matches";
23 |     grid-template-columns: 1fr 1fr;
24 |     grid-template-rows: auto 1fr;
25 |   }
26 | }
27 | 
28 | .pattern {
29 |   grid-area: pattern;
30 | }
31 | 
32 | .animate {
33 |   animation: blink 150ms 1;
34 | }
35 | 
36 | .input {
37 |   grid-area: input;
38 | 
39 |   & mark {
40 |     background-color: var(--mark-bg-default);
41 |     transition: background-color 150ms;
42 | 
43 |     & span {
44 |       background-color: transparent;
45 |       transition: inherit;
46 |     }
47 |   }
48 | }
49 | 
50 | .matches {
51 |   grid-area: matches;
52 | }
53 | 
54 | @keyframes blink {
55 |   from {
56 |     opacity: 1;
57 |   }
58 | 
59 |   50% {
60 |     opacity: 0;
61 |   }
62 | 
63 |   to {
64 |     opacity: 1;
65 |   }
66 | }
67 | 


--------------------------------------------------------------------------------
/public/icons.svg:
--------------------------------------------------------------------------------
 1 | <svg
 2 |   viewBox="0 0 24 24"
 3 |   xmlns="http://www.w3.org/2000/svg"
 4 | >
 5 |   <defs>
 6 |     <symbol
 7 |       id="book"
 8 |       stroke="currentcolor"
 9 |       stroke-width="1.5"
10 |       stroke-linecap="round"
11 |       stroke-linejoin="round"
12 |       fill="none"
13 |     >
14 |       <path d="M22 16.74V4.67001C22 3.47001 21.02 2.58001 19.83 2.68001H19.77C17.67 2.86001 14.48 3.93001 12.7 5.05001L12.53 5.16001C12.24 5.34001 11.76 5.34001 11.47 5.16001L11.22 5.01001C9.44 3.90001 6.26 2.84001 4.16 2.67001C2.97 2.57001 2 3.47001 2 4.66001V16.74C2 17.7 2.78 18.6 3.74 18.72L4.03 18.76C6.2 19.05 9.55 20.15 11.47 21.2L11.51 21.22C11.78 21.37 12.21 21.37 12.47 21.22C14.39 20.16 17.75 19.05 19.93 18.76L20.26 18.72C21.22 18.6 22 17.7 22 16.74Z" />
15 |       <path d="M12 5.48999V20.49" />
16 |       <path d="M7.75 8.48999H5.5" />
17 |       <path d="M8.5 11.49H5.5" />
18 |     </symbol>
19 |     <symbol
20 |       id="left-arrow"
21 |       stroke="currentcolor"
22 |       stroke-width="1.5"
23 |       stroke-miterlimit="10"
24 |       stroke-linecap="round"
25 |       stroke-linejoin="round"
26 |       fill="none"
27 |     >
28 |       <path d="M15 19.92L8.47997 13.4C7.70997 12.63 7.70997 11.37 8.47997 10.6L15 4.07999" />
29 |     </symbol>
30 |   </defs>
31 | </svg>
32 | 


--------------------------------------------------------------------------------
/src/components/HighlightWhiteSpace.jsx:
--------------------------------------------------------------------------------
 1 | import { Show, createMemo } from "solid-js";
 2 | import markText from "~/lib/markText";
 3 | import styles from "./HighlightWhiteSpace.module.css";
 4 | 
 5 | const replacements = {
 6 |   "\u{0020}": "·", // Space
 7 |   "\u{00A0}": "⍽", // No-Break Space
 8 |   "\u{0009}": "→", // Tab
 9 |   "\u{000A}": "⏎", // New Line
10 | };
11 | 
12 | /**
13 |  * @param {Object} props
14 |  * @param {string} props.children
15 |  * @returns {Element}
16 |  */
17 | export default (props) => {
18 |   const positions = createMemo(() =>
19 |     props.children
20 |       ? Array.from(props.children.matchAll(/\s/g), ({ index }) => [
21 |           index,
22 |           index + 1,
23 |         ])
24 |       : [],
25 |   );
26 | 
27 |   return (
28 |     <Show when={props.children}>
29 |       <div class={styles.root} aria-label={props.children}>
30 |         <span aria-hidden="true">
31 |           {markText(props.children, positions(), (char) => {
32 |             const replacement = replacements[char];
33 |             if (!replacement) {
34 |               return char;
35 |             }
36 | 
37 |             return (
38 |               <>
39 |                 <span data-char={replacement}>{char !== "\n" && char}</span>
40 |                 {char === "\n" && <br />}
41 |               </>
42 |             );
43 |           })}
44 |         </span>
45 |       </div>
46 |     </Show>
47 |   );
48 | };
49 | 


--------------------------------------------------------------------------------
/src/lib/markText.js:
--------------------------------------------------------------------------------
 1 | /** @typedef {import('solid-js').JSX.Element} Element */
 2 | 
 3 | /** @typedef {Array<number>} Boundary */
 4 | 
 5 | /**
 6 |  * @callback MarkerFn
 7 |  * @param {string} text - Selected text
 8 |  * @param {number} count - Iteration number (0-indexed)
 9 |  * @param {Boundary} boundary
10 |  * @returns {Element}
11 |  */
12 | 
13 | /**
14 |  * @example
15 |  * // returns ['ABC', <mark>DE</mark>, 'F']
16 |  * markText('ABCDEF', [[2, 4]], (text) => <mark>{text}</mark>)
17 |  * @param {string} text
18 |  * @param {Array<Boundary|undefined>} boundaries
19 |  * @param {MarkerFn} markerFn
20 |  * @param {number=} offset - Offset the coordinates in the boundaries array
21 |  * @returns {Array<Element>}
22 |  */
23 | export default (text, boundaries, markerFn, offset = 0) => {
24 |   const fragments = [];
25 |   for (let i = 0; i < boundaries.length; i += 1) {
26 |     const boundary = boundaries[i];
27 |     if (!boundary) {
28 |       continue;
29 |     }
30 | 
31 |     const start = boundary[0] - offset;
32 |     const end = boundary[1] - offset;
33 | 
34 |     const before = text.substring(0, start);
35 |     const selected = text.substring(start, end);
36 |     const after = text.substring(end);
37 | 
38 |     fragments.push(before, markerFn(selected, i, boundary));
39 | 
40 |     text = after;
41 |     offset = boundary[1];
42 |   }
43 | 
44 |   if (text) {
45 |     fragments.push(text);
46 |   }
47 | 
48 |   return fragments;
49 | };
50 | 


--------------------------------------------------------------------------------
/.github/workflows/main.yml:
--------------------------------------------------------------------------------
 1 | name: Build and Deploy
 2 | 
 3 | on:
 4 |   release:
 5 |     types: [published]
 6 |   # Allows you to run this workflow manually from the Actions tab
 7 |   workflow_dispatch:
 8 | 
 9 | 
10 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
11 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
12 | concurrency:
13 |   group: "pages"
14 |   cancel-in-progress: false
15 | 
16 | jobs:
17 |   build:
18 |     runs-on: ubuntu-latest
19 |     permissions:
20 |       contents: read
21 |     steps:
22 |       - name: Checkout
23 |         uses: actions/checkout@v3
24 |       - name: Setup Node
25 |         uses: actions/setup-node@v3
26 |         with:
27 |           node-version: "lts/*"
28 |       - name: Install Dependencies
29 |         run: npm ci --ignore-scripts
30 |       - name: Run Unit Tests
31 |         run: npm test
32 |       - name: Build
33 |         run:  npm run build
34 |         env:
35 |           BASE_PATH: /regexify/
36 |       - name: Upload Artifact
37 |         uses: actions/upload-pages-artifact@v3
38 |         with:
39 |           path: ".output/public"
40 | 
41 |   deploy:
42 |     needs: build
43 |     environment:
44 |       name: github-pages
45 |       url: ${{ steps.deployment.outputs.page_url }}
46 |     runs-on: ubuntu-latest
47 |     permissions:
48 |       pages: write
49 |       id-token: write
50 |     steps:
51 |       - name: Deploy
52 |         id: deployment
53 |         uses: actions/deploy-pages@v4
54 | 


--------------------------------------------------------------------------------
/src/lib/markText.test.js:
--------------------------------------------------------------------------------
 1 | import { vi } from "vitest";
 2 | import markText from "./markText";
 3 | 
 4 | describe("markText", () => {
 5 |   test("it should mark the text", () => {
 6 |     const text = "foo bar baz";
 7 |     const boundaries = [
 8 |       [0, 3],
 9 |       [4, 7],
10 |     ];
11 |     const marker = (selected) => `*${selected}*`;
12 |     expect(markText(text, boundaries, marker).join("")).toBe("*foo* *bar* baz");
13 |   });
14 | 
15 |   test("it should return with the original text if there are no indices", () => {
16 |     const text = "foo bar baz";
17 |     const boundaries = [];
18 |     const marker = (selected) => selected;
19 |     expect(markText(text, boundaries, marker)).toEqual([text]);
20 |   });
21 | 
22 |   test("it should call the marker function with the proper arguments", () => {
23 |     const text = "foo bar baz";
24 |     const boundaries = [
25 |       [0, 3],
26 |       [4, 7],
27 |       [8, 11],
28 |     ];
29 |     const marker = vi.fn((selected) => selected);
30 |     markText(text, boundaries, marker);
31 | 
32 |     expect(marker).toHaveBeenCalledTimes(3);
33 |     expect(marker).toHaveBeenNthCalledWith(1, "foo", 0, boundaries[0]);
34 |     expect(marker).toHaveBeenNthCalledWith(2, "bar", 1, boundaries[1]);
35 |     expect(marker).toHaveBeenNthCalledWith(3, "baz", 2, boundaries[2]);
36 |   });
37 | 
38 |   test("it should offset the coordinates", () => {
39 |     const text = "foo bar";
40 |     const boundaries = [[5, 8]];
41 |     const offset = 1;
42 |     const marker = (selected) => `*${selected}*`;
43 |     expect(markText(text, boundaries, marker, offset).join("")).toBe(
44 |       "foo *bar*"
45 |     );
46 |   });
47 | 
48 |   test("it should skip the coordinates if it is undefined", () => {
49 |     const text = "foo bar";
50 |     const boundaries = [undefined, [4, 7]];
51 |     const marker = vi.fn((selected) => selected);
52 |     markText(text, boundaries, marker);
53 | 
54 |     expect(marker).toHaveBeenCalledTimes(1);
55 |     expect(marker).toHaveBeenNthCalledWith(1, "bar", 1, boundaries[1]);
56 |   });
57 | });
58 | 


--------------------------------------------------------------------------------
/src/app.jsx:
--------------------------------------------------------------------------------
 1 | import { MetaProvider, Title } from "@solidjs/meta";
 2 | import { Router } from "@solidjs/router";
 3 | import { FileRoutes } from "@solidjs/start/router";
 4 | import { isServer } from "solid-js/web";
 5 | import { Suspense, Show, ErrorBoundary } from "solid-js";
 6 | import { AppProvider } from "~/context/app";
 7 | import ErrorMessage from "~/components/ErrorMessage";
 8 | import {
 9 |   isModernRegExpSupported,
10 |   isCSSNestingSupported,
11 | } from "~/lib/featureDetection";
12 | import "./app.css";
13 | 
14 | export default function App() {
15 |   const base = import.meta.env.SERVER_BASE_URL.replace(/\/$/, "");
16 |   return (
17 |     <Router
18 |       base={base}
19 |       root={props => (
20 |         <MetaProvider>
21 |           <Title>Regexify</Title>
22 |           <Show
23 |             when={
24 |               isServer || (isModernRegExpSupported() && isCSSNestingSupported())
25 |             }
26 |             fallback={
27 |               <ErrorMessage
28 |                 message={
29 |                   <>
30 |                     Your Browser is not Supported
31 |                     <br />
32 |                     Try to use a browser that supports{" "}
33 |                     <a
34 |                       href="https://drafts.csswg.org/css-nesting/"
35 |                       target="_blank"
36 |                       rel="noreferrer"
37 |                     >
38 |                       nested CSS
39 |                     </a>{" "}
40 |                     and the{" "}
41 |                     <a
42 |                       href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll"
43 |                       rel="noreferrer"
44 |                       target="_blank"
45 |                     >
46 |                       matchAll
47 |                     </a>{" "}
48 |                     RegExp function (Chrome 112+, Safari 16.5+, Firefox 117+).
49 |                   </>
50 |                 }
51 |               />
52 |             }
53 |           >
54 |             <ErrorBoundary
55 |               fallback={(e) => (
56 |                 <ErrorMessage
57 |                   message={
58 |                     <>
59 |                       Something Went Wrong
60 |                       <br />
61 |                       <a href="/">Try to reload the page</a>
62 |                     </>
63 |                   }
64 |                   error={e}
65 |                 />
66 |               )}
67 |             >
68 |               <AppProvider>
69 |                 <Suspense>{props.children}</Suspense>
70 |               </AppProvider>
71 |             </ErrorBoundary>
72 |           </Show>
73 |         </MetaProvider>
74 |       )}
75 |     >
76 |       <FileRoutes />
77 |     </Router>
78 |   );
79 | }
80 | 


--------------------------------------------------------------------------------
/src/app.css:
--------------------------------------------------------------------------------
  1 | /* Variable declarations */
  2 | :root {
  3 |   --black: #26262c;
  4 |   --gray-900: #747486;
  5 |   --gray-600: #b2b2bd;
  6 |   --gray-300: #f2f2f2;
  7 |   --yellow: #f6d578;
  8 |   --red: #ff565e;
  9 |   --white: #ffffff;
 10 | 
 11 |   --bg: var(--gray-300);
 12 |   --text-main: var(--black);
 13 |   --text-secondary: var(--gray-900);
 14 |   --border-default: var(--black);
 15 |   --border-active: var(--yellow);
 16 |   --border-error: var(--red);
 17 |   --border-secondary: var(--gray-600);
 18 |   --mark-bg-default: var(--gray-600);
 19 |   --mark-bg-active: var(--yellow);
 20 |   --input-bg: var(--white);
 21 | 
 22 |   --text-xl: 1.5rem; /* 24px */
 23 |   --text-lg: 1.25rem; /* 20px */
 24 |   --text-md: 1rem; /* 16px */
 25 |   --text-sm: 0.75rem; /* 12px */
 26 |   --text-xs: 0.5rem; /* 8px */
 27 | 
 28 |   @media (prefers-contrast: more) {
 29 |     --black: #000000;
 30 |     --yellow: #ffff00;
 31 |     --red: #ff0000;
 32 | 
 33 |     --bg: var(--white);
 34 |     --text-secondary: var(--black);
 35 |     --border-secondary: var(--black);
 36 |   }
 37 | 
 38 |   @media (prefers-color-scheme: dark) {
 39 |     --bg: var(--black);
 40 |     --text-main: var(--white);
 41 |     --text-secondary: var(--gray-600);
 42 |     --border-default: var(--white);
 43 |     --border-active: var(--yellow);
 44 |     --border-error: var(--red);
 45 |     --border-secondary: var(--gray-900);
 46 |     --mark-bg-default: var(--gray-900);
 47 |     --mark-bg-active: var(--yellow);
 48 |     --input-bg: var(--black);
 49 | 
 50 |     @media (prefers-contrast: more) {
 51 |       --text-secondary: var(--white);
 52 |       --border-secondary: var(--white);
 53 |     }
 54 |   }
 55 | }
 56 | 
 57 | /* Resets */
 58 | html {
 59 |   box-sizing: border-box;
 60 | }
 61 | 
 62 | *,
 63 | *:before,
 64 | *:after {
 65 |   box-sizing: inherit;
 66 | }
 67 | 
 68 | /* Global formatting */
 69 | html {
 70 |   font:
 71 |     var(--text-md) / 1.25rem "SF Mono",
 72 |     "Consolas",
 73 |     "DejaVu Sans Mono",
 74 |     "Roboto Mono",
 75 |     monospace;
 76 |   color: var(--text-main);
 77 |   background: var(--bg);
 78 | }
 79 | 
 80 | body {
 81 |   margin: 0;
 82 |   padding: 1.5rem 1rem;
 83 |   display: grid;
 84 |   min-height: 100vh;
 85 | }
 86 | 
 87 | h1,
 88 | h2,
 89 | h3,
 90 | h4,
 91 | h5,
 92 | h6 {
 93 |   margin: 0;
 94 | }
 95 | 
 96 | h1 {
 97 |   font-size: var(--text-xl);
 98 |   font-weight: 700;
 99 | }
100 | 
101 | h2 {
102 |   font-size: var(--text-lg);
103 |   font-weight: 700;
104 | }
105 | 
106 | p {
107 |   margin: 0;
108 | }
109 | 
110 | a {
111 |   color: inherit;
112 | }
113 | 
114 | button {
115 |   font: inherit;
116 |   color: inherit;
117 |   border: none;
118 |   padding: 0;
119 |   background: transparent;
120 | }
121 | 
122 | textarea {
123 |   font: inherit;
124 |   outline: none;
125 |   resize: none;
126 |   border: none;
127 |   color: inherit;
128 | }
129 | 
130 | mark {
131 |   color: inherit;
132 | }
133 | 
134 | code {
135 |   background: var(--dark-gray);
136 | }
137 | 


--------------------------------------------------------------------------------
/src/components/Table.jsx:
--------------------------------------------------------------------------------
  1 | import { Show, Index, createMemo, mergeProps, createUniqueId } from "solid-js";
  2 | import Range from "~/components/Range";
  3 | import styles from "./Table.module.css";
  4 | 
  5 | /** @typedef {import('solid-js').JSX.Element} Element */
  6 | 
  7 | /**
  8 |  * @param {Object} props
  9 |  * @param {number=} props.rowLimit - Only show the first "n" row and a link to show the rest.
 10 |  * @param {Array<Array<Element>>} props.data
 11 |  * @param {Array<Element>} props.header
 12 |  * @param {function(Element): Element=} props.renderCell
 13 |  * @param {Function=} props.onShowAllRequest
 14 |  * @param {function(Array<number>)=} props.onHover
 15 |  * @param {Function=} props.onLeave
 16 |  * @returns {Element}
 17 |  */
 18 | export default (props) => {
 19 |   props = mergeProps(
 20 |     {
 21 |       rowLimit: Infinity,
 22 |       renderCell(el) {
 23 |         return el;
 24 |       },
 25 |       onShowAllRequest() {},
 26 |       onHover() {},
 27 |       onLeave() {},
 28 |     },
 29 |     props,
 30 |   );
 31 | 
 32 |   const id = createUniqueId();
 33 |   const length = createMemo(() => Math.min(props.rowLimit, props.data.length));
 34 | 
 35 |   /**
 36 |    * @param {HTMLElement} el
 37 |    * @returns {?Array<number>}
 38 |    */
 39 |   const getCoordinates = (el) => {
 40 |     let elWithColProp = el;
 41 |     while (elWithColProp && !elWithColProp.dataset.col) {
 42 |       elWithColProp = elWithColProp.parentElement;
 43 |     }
 44 | 
 45 |     if (!elWithColProp) {
 46 |       return null;
 47 |     }
 48 | 
 49 |     const {
 50 |       dataset: { col },
 51 |     } = elWithColProp;
 52 |     const {
 53 |       dataset: { row },
 54 |     } = elWithColProp.parentElement;
 55 |     return [parseInt(row, 10), parseInt(col, 10)];
 56 |   };
 57 | 
 58 |   const handleMouseLeave = () => props.onLeave();
 59 |   const handleMouseOver = ({ target }) => {
 60 |     const coordinates = getCoordinates(target);
 61 |     if (coordinates) {
 62 |       props.onHover(coordinates);
 63 |     }
 64 |   };
 65 | 
 66 |   return (
 67 |     <div class={styles.root}>
 68 |       <table
 69 |         onMouseLeave={handleMouseLeave}
 70 |         onMouseOver={handleMouseOver}
 71 |         aria-rowcount={props.data.length}
 72 |         id={id}
 73 |       >
 74 |         <thead>
 75 |           <tr data-row={-1}>
 76 |             <Index each={props.header}>
 77 |               {(item, colIndex) => <th data-col={colIndex}>{item()}</th>}
 78 |             </Index>
 79 |           </tr>
 80 |         </thead>
 81 |         <tbody>
 82 |           <Range start={0} end={length()}>
 83 |             {(rowIndex) => (
 84 |               <tr data-row={rowIndex()}>
 85 |                 <Index each={props.data[rowIndex()]}>
 86 |                   {(item, colIndex) => (
 87 |                     <td data-col={colIndex}>{props.renderCell(item())}</td>
 88 |                   )}
 89 |                 </Index>
 90 |               </tr>
 91 |             )}
 92 |           </Range>
 93 |         </tbody>
 94 |       </table>
 95 |       <Show when={props.data.length !== length()}>
 96 |         <button
 97 |           onClick={() => props.onShowAllRequest()}
 98 |           aria-label={`Click here to show all the ${props.data.length} results`}
 99 |           aria-controls={id}
100 |         >
101 |           {props.data.length - props.rowLimit} results are hidden
102 |         </button>
103 |       </Show>
104 |     </div>
105 |   );
106 | };
107 | 


--------------------------------------------------------------------------------
/src/components/EnhancedTextarea.jsx:
--------------------------------------------------------------------------------
  1 | import { createUniqueId, createEffect, mergeProps, Show } from "solid-js";
  2 | import markText from "~/lib/markText";
  3 | import styles from "./EnhancedTextarea.module.css";
  4 | 
  5 | /**
  6 |  * @param {Object} props
  7 |  * @param {string} props.initialValue
  8 |  * @param {Array<Array<Array<number>>>=} props.highlights
  9 |  * @param {string=} props.invalid
 10 |  * @param {string} props.label
 11 |  * @param {string=} props.id
 12 |  * @param {string=} props.spellcheck
 13 |  * @param {string=} props.autofocus
 14 |  * @param {Function=} props.ref
 15 |  * @param {string=} props.title
 16 |  * @param {string=} props.containerClasses
 17 |  * @param {string=} props.ariaLabel
 18 |  * @param {string=} props.ariaKeyShortcuts
 19 |  * @returns {Element}
 20 |  */
 21 | export default (props) => {
 22 |   props = mergeProps(
 23 |     { highlights: [], ref() {}, containerClasses: "", id: createUniqueId() },
 24 |     props,
 25 |   );
 26 | 
 27 |   let textareaEl;
 28 |   createEffect(() => {
 29 |     if (textareaEl) {
 30 |       const message = props.invalid ?? "";
 31 |       textareaEl.setCustomValidity(message);
 32 |     }
 33 |   });
 34 | 
 35 |   const highlightedText = () => {
 36 |     // Hack: if the text ends with a new line character, we have to insert an
 37 |     // extra "\n" in order to have the same height as the textarea
 38 |     const rawText = props.value.replace(/\n$/, "\n\n");
 39 | 
 40 |     if (props.highlights.length === 0) {
 41 |       return rawText;
 42 |     }
 43 | 
 44 |     const mainMarks = [];
 45 |     const subMarks = [];
 46 |     for (const positions of props.highlights) {
 47 |       mainMarks.push(positions[0]);
 48 |       subMarks.push(positions.slice(1));
 49 |     }
 50 | 
 51 |     return markText(rawText, mainMarks, (mainText, rowIndex, boundary) => (
 52 |       <mark data-row={rowIndex}>
 53 |         {markText(
 54 |           mainText,
 55 |           subMarks[rowIndex],
 56 |           (subText, colIndex) => (
 57 |             <span data-col={colIndex}>{subText}</span>
 58 |           ),
 59 |           boundary[0],
 60 |         )}
 61 |       </mark>
 62 |     ));
 63 |   };
 64 | 
 65 |   return (
 66 |     <div class={styles.root}>
 67 |       <Show when={props.label}>
 68 |         <label for={props.id} title={props.title}>
 69 |           {props.label}
 70 |         </label>
 71 |       </Show>
 72 |       <div class={`${styles.container} ${props.containerClasses}`}>
 73 |         <div aria-hidden="true">{highlightedText()}</div>
 74 |         {
 75 |           // By default, Firefox will persist the value of the textarea across page loads.
 76 |           // With the feature, it is hard to keep the props.value the highlighted text and the textarea in sync.
 77 |           // This feature can be disabled with the "autocomplete" attribute.
 78 |         }
 79 |         <textarea
 80 |           id={props.id}
 81 |           rows="1"
 82 |           autocomplete="off"
 83 |           spellcheck={props.spellcheck}
 84 |           ref={(el) => {
 85 |             textareaEl = el;
 86 |             props.ref(el);
 87 |           }}
 88 |           onInput={({ target: { value } }) => {
 89 |             props.setValue(value);
 90 |           }}
 91 |           autofocus={props.autofocus}
 92 |           aria-label={props.ariaLabel}
 93 |           aria-keyshortcuts={props.ariaKeyshortcuts}
 94 |         >
 95 |           {props.value}
 96 |         </textarea>
 97 |       </div>
 98 |     </div>
 99 |   );
100 | };
101 | 


--------------------------------------------------------------------------------
/src/context/app.jsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   createContext,
  3 |   useContext,
  4 |   createSignal,
  5 |   createMemo,
  6 |   createEffect,
  7 |   onCleanup,
  8 |   batch,
  9 |   on,
 10 | } from "solid-js";
 11 | import {
 12 |   initialPattern,
 13 |   initialInput,
 14 |   largeInput,
 15 |   debounceTimeoutInMs,
 16 | } from "~/settings";
 17 | import getRegExpFromString from "~/lib/getRegExpFromString";
 18 | 
 19 | /**
 20 |  * @typedef {Object} Matches
 21 |  * @property {Array<Array<string>>} texts
 22 |  * @property {Array<Array<number>>} indices
 23 |  */
 24 | 
 25 | /**
 26 |  * @typedef {Object} AppState
 27 |  * @property {string} patternString
 28 |  * @property {RegExp|SyntaxError} patternRegExp
 29 |  * @property {boolean} animatePattern
 30 |  * @property {string} inputString
 31 |  * @property {?Array<number>} hoverPosition
 32 |  * @property {boolean} processing
 33 |  * @property {Matches} matches
 34 |  */
 35 | 
 36 | /**
 37 |  * @typedef {Object} Setters
 38 |  * @property {function(string)} setPattern
 39 |  * @property {function(boolean)} setAnimatePattern
 40 |  * @property {function(string)} setInput
 41 |  * @property {function(?Array<number>=)} setHoverPosition
 42 |  */
 43 | 
 44 | const AppContext = createContext();
 45 | 
 46 | /**
 47 |  * @returns {import('solid-js').JSX.Element}
 48 |  */
 49 | export function AppProvider(props) {
 50 |   const [patternString, setPatternString] = createSignal(initialPattern);
 51 |   const patternRegExp = createMemo(() => {
 52 |     try {
 53 |       return getRegExpFromString(patternString());
 54 |     } catch (e) {
 55 |       return e;
 56 |     }
 57 |   });
 58 |   const [animatePattern, setAnimatePattern] = createSignal(false);
 59 | 
 60 |   const [inputString, setInputString] = createSignal(initialInput);
 61 | 
 62 |   const [hoverPosition, setHoverPosition] = createSignal(null);
 63 | 
 64 |   const [processing, setProcessing] = createSignal(false);
 65 | 
 66 |   /** @returns {Matches} */
 67 |   const calculateMatches = () => {
 68 |     const texts = [];
 69 |     const indices = [];
 70 | 
 71 |     const regExp = patternRegExp();
 72 |     const input = inputString();
 73 |     const isValid = regExp instanceof RegExp;
 74 |     if (isValid) {
 75 |       // Set the "d" flag in order to read the indices of the matching groups
 76 |       const regExpWithIndices = regExp.hasIndices
 77 |         ? regExp
 78 |         : new RegExp(regExp, `${regExp.flags}d`);
 79 | 
 80 |       let matches;
 81 |       if (regExpWithIndices.global) {
 82 |         matches = input.matchAll(regExpWithIndices);
 83 |       } else {
 84 |         const match = input.match(regExpWithIndices);
 85 |         matches = match ? [match] : [];
 86 |       }
 87 | 
 88 |       for (let match of matches) {
 89 |         texts.push(Array.from(match));
 90 |         indices.push(Array.from(match.indices));
 91 |       }
 92 |     }
 93 | 
 94 |     return { texts, indices };
 95 |   };
 96 | 
 97 |   const updateMatches = () => {
 98 |     batch(() => {
 99 |       setMatches(calculateMatches());
100 |       setProcessing(false);
101 |     });
102 |   };
103 | 
104 |   const [matches, setMatches] = createSignal(calculateMatches());
105 | 
106 |   let tick;
107 |   createEffect(
108 |     on(
109 |       [patternRegExp, inputString],
110 |       () => {
111 |         clearTimeout(tick);
112 | 
113 |         if (inputString().length > largeInput) {
114 |           setProcessing(true);
115 |           tick = setTimeout(updateMatches, debounceTimeoutInMs);
116 |         } else {
117 |           updateMatches();
118 |         }
119 | 
120 |         onCleanup(() => clearTimeout(tick));
121 |       },
122 |       // Do not run the computation immediately.
123 |       // The initial value of the matches signal has the correct values.
124 |       { defer: true }
125 |     )
126 |   );
127 | 
128 |   const app = [
129 |     {
130 |       patternString,
131 |       patternRegExp,
132 |       animatePattern,
133 |       inputString,
134 |       hoverPosition,
135 |       processing,
136 |       matches,
137 |     },
138 |     {
139 |       setPattern: setPatternString,
140 |       setAnimatePattern,
141 |       setInput: setInputString,
142 |       setHoverPosition,
143 |     },
144 |   ];
145 | 
146 |   return (
147 |     <AppContext.Provider value={app}>{props.children}</AppContext.Provider>
148 |   );
149 | }
150 | 
151 | /**
152 |  * @returns {[AppState, Setters]}
153 |  */
154 | export function useAppState() {
155 |   return useContext(AppContext);
156 | }
157 | 


--------------------------------------------------------------------------------
/src/routes/(home)/index.jsx:
--------------------------------------------------------------------------------
  1 | import { Title, Style } from "@solidjs/meta";
  2 | import { A, useNavigate } from "@solidjs/router";
  3 | import { createMemo, createSignal, Show, Switch, Match } from "solid-js";
  4 | import EnhancedTextarea from "~/components/EnhancedTextarea";
  5 | import HighlightWhiteSpace from "~/components/HighlightWhiteSpace";
  6 | import Table from "~/components/Table";
  7 | import range from "~/lib/range";
  8 | import { useAppState } from "~/context/app";
  9 | import styles from "./index.module.css";
 10 | import createShortcut from "~/lib/createShortcut";
 11 | 
 12 | function Header(props) {
 13 |   return (
 14 |     <header>
 15 |       <h1 id={props.id}>JavaScript RegExp Tester</h1>
 16 |     </header>
 17 |   );
 18 | }
 19 | 
 20 | function Navigation() {
 21 |   return (
 22 |     <nav>
 23 |       <A
 24 |         href="/cheat-sheet"
 25 |         title="RegExp Cheat Sheet (Ctrl + M)"
 26 |         aria-label="Click here to open the RegExp Cheat Sheet"
 27 |         aria-keyshortcuts="Control+M"
 28 |       >
 29 |         <svg width="24" height="24" role="presentation">
 30 |           <use href={`${import.meta.env.SERVER_BASE_URL}icons.svg#book`} />
 31 |         </svg>
 32 |       </A>
 33 |     </nav>
 34 |   );
 35 | }
 36 | 
 37 | /**
 38 |  * @param {Object} props
 39 |  * @param {Function} props.ref
 40 |  */
 41 | function Pattern(props) {
 42 |   const [state, { setPattern, setAnimatePattern }] = useAppState();
 43 |   return (
 44 |     <section
 45 |       class={styles.pattern}
 46 |       onAnimationEnd={() => setAnimatePattern(false)}
 47 |     >
 48 |       <EnhancedTextarea
 49 |         ref={props.ref}
 50 |         containerClasses={state.animatePattern() ? styles.animate : ""}
 51 |         label="Pattern"
 52 |         id="pattern"
 53 |         title="RegExp pattern (Ctrl + P)"
 54 |         ariaLabel="RegExp pattern"
 55 |         ariaKeyshortcuts="Control+P"
 56 |         spellcheck="false"
 57 |         invalid={
 58 |           state.patternRegExp() instanceof Error
 59 |             ? state.patternRegExp().message
 60 |             : ""
 61 |         }
 62 |         value={state.patternString()}
 63 |         setValue={setPattern}
 64 |       />
 65 |     </section>
 66 |   );
 67 | }
 68 | 
 69 | /**
 70 |  * @param {Object} props
 71 |  * @param {Function} props.ref
 72 |  */
 73 | function Input(props) {
 74 |   const [state, { setInput }] = useAppState();
 75 |   const selector = createMemo(() => {
 76 |     if (!state.hoverPosition()) {
 77 |       return null;
 78 |     }
 79 | 
 80 |     const [row, col] = state.hoverPosition();
 81 |     const isHeader = row === -1;
 82 |     const isFirstColumn = col === 0;
 83 | 
 84 |     if (isHeader && isFirstColumn) {
 85 |       return null;
 86 |     }
 87 | 
 88 |     let selector = `.${styles.input}`;
 89 | 
 90 |     if (!isHeader) {
 91 |       selector += ` [data-row="${row}"]`;
 92 |     }
 93 | 
 94 |     if (!isFirstColumn) {
 95 |       selector += ` [data-col="${col - 1}"]`;
 96 |     }
 97 | 
 98 |     return selector;
 99 |   });
100 | 
101 |   const highlights = createMemo(() => {
102 |     if (state.processing()) {
103 |       return [];
104 |     }
105 |     return state.matches().indices;
106 |   });
107 | 
108 |   return (
109 |     <>
110 |       <Style>
111 |         {
112 |           // Hack: if the Style tag is empty, Solid Start will render it like
113 |           // this: "<style />" which is invalid, hence the fallback attribute.
114 |         }
115 |         <Show when={selector()} fallback={" "}>
116 |           {`${selector()} { background-color: var(--mark-bg-active); }`}
117 |         </Show>
118 |       </Style>
119 |       <section class={styles.input}>
120 |         <EnhancedTextarea
121 |           ref={props.ref}
122 |           label="Input"
123 |           id="input"
124 |           title="Text input (Ctrl + I)"
125 |           ariaLabel="Text input"
126 |           ariaKeyshortcuts="Control+I"
127 |           spellcheck="false"
128 |           autofocus
129 |           highlights={highlights()}
130 |           value={state.inputString()}
131 |           setValue={setInput}
132 |         />
133 |       </section>
134 |     </>
135 |   );
136 | }
137 | 
138 | function Matches() {
139 |   const [state, { setHoverPosition }] = useAppState();
140 |   const [showAll, setShowAll] = createSignal(false);
141 |   return (
142 |     <output
143 |       class={styles.matches}
144 |       for="input pattern"
145 |       aria-label="Matches"
146 |       aria-live="off"
147 |     >
148 |       <Switch>
149 |         <Match when={state.processing()}>
150 |           <p>Processing...</p>
151 |         </Match>
152 |         <Match when={state.matches().texts.length === 0}>
153 |           <p>No match</p>
154 |         </Match>
155 |         <Match when={true}>
156 |           <Table
157 |             header={[
158 |               "$&",
159 |               ...range(1, state.matches().texts[0].length).map((i) => `$${i}`),
160 |             ]}
161 |             data={state.matches().texts}
162 |             rowLimit={showAll() ? Infinity : 10}
163 |             onShowAllRequest={() => setShowAll(true)}
164 |             renderCell={(cell) => (
165 |               <HighlightWhiteSpace>{cell}</HighlightWhiteSpace>
166 |             )}
167 |             onHover={setHoverPosition}
168 |             onLeave={setHoverPosition}
169 |           />
170 |         </Match>
171 |       </Switch>
172 |     </output>
173 |   );
174 | }
175 | 
176 | export default () => {
177 |   const navigate = useNavigate();
178 |   createShortcut({ key: "m", ctrlKey: true }, (e) => {
179 |     e.preventDefault();
180 |     navigate("/cheat-sheet");
181 |   });
182 | 
183 |   let patternEl;
184 |   createShortcut({ key: "p", ctrlKey: true }, (e) => {
185 |     e.preventDefault();
186 |     patternEl?.focus();
187 |   });
188 | 
189 |   let inputEl;
190 |   createShortcut({ key: "i", ctrlKey: true }, (e) => {
191 |     e.preventDefault();
192 |     inputEl?.focus();
193 |   });
194 | 
195 |   const [state, { setAnimatePattern }] = useAppState();
196 |   createShortcut({ key: "s", ctrlKey: true }, (e) => {
197 |     e.preventDefault();
198 |     const text = state.patternRegExp().toString();
199 |     navigator.clipboard.writeText(text).then(() => {
200 |       setAnimatePattern(true);
201 |     });
202 |   });
203 | 
204 |   return (
205 |     <div class={styles.root}>
206 |       <Title>Home Page - Regexify</Title>
207 | 
208 |       <Header id="title" />
209 |       <Navigation />
210 |       <main class={styles.main} aria-labelledby="title">
211 |         <Pattern ref={patternEl} />
212 |         <Input ref={inputEl} />
213 |         <Matches />
214 |       </main>
215 |     </div>
216 |   );
217 | };
218 | 


--------------------------------------------------------------------------------
/src/routes/cheat-sheet/index.jsx:
--------------------------------------------------------------------------------
  1 | import { Title } from "@solidjs/meta";
  2 | import { A, useNavigate } from "@solidjs/router";
  3 | import styles from "./index.module.css";
  4 | import createShortcut from "~/lib/createShortcut";
  5 | 
  6 | function Navigation() {
  7 |   return (
  8 |     <nav>
  9 |       <A
 10 |         href="/"
 11 |         title="Home (Ctrl + M)"
 12 |         aria-label="Click here to close the Cheat Sheet and go back to the home page"
 13 |         aria-keyshortcuts="Control+M"
 14 |       >
 15 |         <svg width="24" height="24" role="presentation">
 16 |           <use href={`${import.meta.env.SERVER_BASE_URL}icons.svg#left-arrow`} />
 17 |         </svg>
 18 |       </A>
 19 |     </nav>
 20 |   );
 21 | }
 22 | 
 23 | function Content() {
 24 |   return (
 25 |     <>
 26 |       <h2>
 27 |         <a
 28 |           href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions#advanced_searching_with_flags"
 29 |           target="_blank"
 30 |           rel="noreferrer"
 31 |         >
 32 |           Flags
 33 |         </a>
 34 |       </h2>
 35 |       <dl>
 36 |         <dt>
 37 |           <code>d</code>
 38 |         </dt>
 39 |         <dd>Generate indices for substring matches.</dd>
 40 |         <dt>
 41 |           <code>g</code>
 42 |         </dt>
 43 | 
 44 |         <dd>Global search.</dd>
 45 |         <dt>
 46 |           <code>i</code>
 47 |         </dt>
 48 |         <dd>Case-insensitive search.</dd>
 49 | 
 50 |         <dt>
 51 |           <code>m</code>
 52 |         </dt>
 53 |         <dd>
 54 |           Allows <code>^</code> and <code>$</code> to match newline characters.
 55 |         </dd>
 56 | 
 57 |         <dt>
 58 |           <code>s</code>
 59 |         </dt>
 60 |         <dd>
 61 |           Allows <code>.</code> to match newline characters.
 62 |         </dd>
 63 | 
 64 |         <dt>
 65 |           <code>u</code>
 66 |         </dt>
 67 |         <dd>
 68 |           "Unicode"; treat a pattern as a sequence of Unicode code points.
 69 |         </dd>
 70 | 
 71 |         <dt>
 72 |           <code>y</code>
 73 |         </dt>
 74 |         <dd>
 75 |           Perform a "sticky" search that matches starting at the current
 76 |           position in the target string.
 77 |         </dd>
 78 |       </dl>
 79 | 
 80 |       <h2>
 81 |         <a
 82 |           href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions/Groups_and_backreferences#types"
 83 |           target="_blank"
 84 |           rel="noreferrer"
 85 |         >
 86 |           Groups and backreferences
 87 |         </a>
 88 |       </h2>
 89 |       <dl>
 90 |         <dt>
 91 |           <code>(x)</code>
 92 |         </dt>
 93 |         <dd>Capturing group</dd>
 94 | 
 95 |         <dt>
 96 |           <code>(?&lt;Name&gt;x)</code>
 97 |         </dt>
 98 |         <dd>Named capturing group</dd>
 99 | 
100 |         <dt>
101 |           <code>(?:x)</code>
102 |         </dt>
103 |         <dd>Non-capturing group</dd>
104 | 
105 |         <dt>
106 |           <code>&#92;N</code>
107 |         </dt>
108 |         <dd>
109 |           Where "N" is a positive integer. A back reference to the last
110 |           substring matching the N parenthetical in the regular expression
111 |           (counting left parentheses).
112 |         </dd>
113 | 
114 |         <dt>
115 |           <code>&#92;k&lt;Name&gt;</code>
116 |         </dt>
117 |         <dd>
118 |           A back reference to the last substring matching the named capture
119 |           group specified by <code>&lt;Name&gt;</code>.
120 |         </dd>
121 |       </dl>
122 | 
123 |       <h2>
124 |         <a
125 |           href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions/Character_classes#types"
126 |           target="_blank"
127 |           rel="noreferrer"
128 |         >
129 |           Character classes
130 |         </a>
131 |       </h2>
132 |       <dl>
133 |         <dt>
134 |           <code>[xyz]</code>
135 |           <br />
136 |           <code>[a-c]</code>
137 |         </dt>
138 |         <dd>A character class.</dd>
139 | 
140 |         <dt>
141 |           <code>[^xyz]</code>
142 |           <br />
143 |           <code>[^a-c]</code>
144 |         </dt>
145 |         <dd>A negated or complemented character class.</dd>
146 | 
147 |         <dt>
148 |           <code>.</code>
149 |         </dt>
150 |         <dd>
151 |           Matches any single character except line terminators:{" "}
152 |           <code>&#92;n</code>, <code>&#92;r</code>, <code>&#92;u2028</code> or{" "}
153 |           <code>&#92;u2029</code>.
154 |           <br />
155 |           Inside a character class, the dot loses its special meaning and
156 |           matches a literal dot.
157 |           <br />
158 |           Note that the m multiline flag doesn't change the dot behavior. So to
159 |           match a pattern across multiple lines, the character class{" "}
160 |           <code>[^]</code> can be used — it will match any character including
161 |           newlines.
162 |           <br />
163 |           The <code>s</code> "dotAll" flag allows the dot to also match line
164 |           terminators.
165 |         </dd>
166 | 
167 |         <dt>
168 |           <code>&#92;d</code>
169 |         </dt>
170 |         <dd>
171 |           Matches any digit. Equivalent to <code>[0-9]</code>.
172 |         </dd>
173 | 
174 |         <dt>
175 |           <code>&#92;D</code>
176 |         </dt>
177 |         <dd>
178 |           Matches any character that is not a digit. Equivalent to{" "}
179 |           <code>[^0-9]</code>.
180 |         </dd>
181 | 
182 |         <dt>
183 |           <code>&#92;w</code>
184 |         </dt>
185 |         <dd>
186 |           Matches any alphanumeric character from the basic Latin alphabet,
187 |           including the underscore. Equivalent to <code>[A-Za-z0-9_]</code>.
188 |         </dd>
189 | 
190 |         <dt>
191 |           <code>&#92;W</code>
192 |         </dt>
193 |         <dd>
194 |           Matches any character that is not a word character from the basic
195 |           Latin alphabet. Equivalent to <code>[^A-Za-z0-9_]</code>.
196 |         </dd>
197 | 
198 |         <dt>
199 |           <code>&#92;s</code>
200 |         </dt>
201 |         <dd>
202 |           Matches a single white space character, including space, tab, form
203 |           feed, line feed, and other Unicode spaces.
204 |         </dd>
205 | 
206 |         <dt>
207 |           <code>&#92;S</code>
208 |         </dt>
209 |         <dd>Matches a single character other than white space.</dd>
210 | 
211 |         <dt>
212 |           <code>&#92;t</code>
213 |         </dt>
214 |         <dd>Matches a horizontal tab.</dd>
215 | 
216 |         <dt>
217 |           <code>&#92;r</code>
218 |         </dt>
219 |         <dd>Matches a carriage return.</dd>
220 | 
221 |         <dt>
222 |           <code>&#92;n</code>
223 |         </dt>
224 |         <dd>Matches a linefeed.</dd>
225 | 
226 |         <dt>
227 |           <code>&#92;v</code>
228 |         </dt>
229 |         <dd>Matches a vertical tab.</dd>
230 | 
231 |         <dt>
232 |           <code>&#92;f</code>
233 |         </dt>
234 |         <dd>Matches a form-feed.</dd>
235 | 
236 |         <dt>
237 |           <code>[&#92;b]</code>
238 |         </dt>
239 |         <dd>Matches a backspace.</dd>
240 | 
241 |         <dt>
242 |           <code>&#92;0</code>
243 |         </dt>
244 |         <dd>Matches a NUL character. Do not follow this with another digit.</dd>
245 | 
246 |         <dt>
247 |           <code>&#92;cX</code>
248 |         </dt>
249 |         <dd>
250 |           Matches a control character using caret notation, where "X" is a
251 |           letter from A–Z (corresponding to code points <code>U+0001</code>–
252 |           <code>U+001A</code>).
253 |         </dd>
254 | 
255 |         <dt>
256 |           <code>&#92;xhh</code>
257 |         </dt>
258 |         <dd>
259 |           Matches the character with the code hh (two hexadecimal digits).
260 |         </dd>
261 | 
262 |         <dt>
263 |           <code>&#92;uhhhh</code>
264 |         </dt>
265 |         <dd>
266 |           Matches a UTF-16 code-unit with the value hhhh (four hexadecimal
267 |           digits).
268 |         </dd>
269 | 
270 |         <dt>
271 |           <code>&#92;u&lbrace;hhhh&rbrace;</code> or
272 |           <br />
273 |           <code>&#92;u&lbrace;hhhhh&rbrace;</code>
274 |         </dt>
275 |         <dd>
276 |           (Only when the <code>u</code> flag is set.) Matches the character with
277 |           the Unicode value <code>U+hhhh</code> or <code>U+hhhhh</code>{" "}
278 |           (hexadecimal digits).
279 |         </dd>
280 | 
281 |         <dt>
282 |           <code>&#92;p&lbrace;UnicodeProperty&rbrace;</code>,
283 |           <br />
284 |           <code>&#92;P&lbrace;UnicodeProperty&rbrace;</code>
285 |         </dt>
286 |         <dd>
287 |           Matches a character based on its{" "}
288 |           <a
289 |             href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Unicode_character_class_escape"
290 |             target="_blank"
291 |             rel="noreferrer"
292 |           >
293 |             Unicode character properties.
294 |           </a>
295 |         </dd>
296 |       </dl>
297 | 
298 |       <h2>
299 |         <a
300 |           href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions/Assertions#types"
301 |           target="_blank"
302 |           rel="noreferrer"
303 |         >
304 |           Assertions
305 |         </a>
306 |       </h2>
307 |       <dl>
308 |         <dt>
309 |           <code>^</code>
310 |         </dt>
311 |         <dd>
312 |           Matches the beginning of input. If the multiline flag is set to true,
313 |           also matches immediately after a line break character.
314 |         </dd>
315 | 
316 |         <dt>
317 |           <code>$</code>
318 |         </dt>
319 |         <dd>
320 |           Matches the end of input. If the multiline flag is set to true, also
321 |           matches immediately before a line break character.
322 |         </dd>
323 | 
324 |         <dt>
325 |           <code>&#92;b</code>
326 |         </dt>
327 |         <dd>
328 |           Matches a word boundary. This is the position where a word character
329 |           is not followed or preceded by another word-character, such as between
330 |           a letter and a space. Note that a matched word boundary is not
331 |           included in the match.
332 |         </dd>
333 | 
334 |         <dt>
335 |           <code>&#92;B</code>
336 |         </dt>
337 |         <dd>Matches a non-word boundary.</dd>
338 | 
339 |         <dt>
340 |           <code>x(?=y)</code>
341 |         </dt>
342 |         <dd>
343 |           Lookahead assertion: Matches "x" only if "x" is followed by "y".
344 |         </dd>
345 | 
346 |         <dt>
347 |           <code>x(?!y)</code>
348 |         </dt>
349 |         <dd>
350 |           Negative lookahead assertion: Matches "x" only if "x" is not followed
351 |           by "y".
352 |         </dd>
353 | 
354 |         <dt>
355 |           <code>(?&lt;=y)x</code>
356 |         </dt>
357 |         <dd>
358 |           Lookbehind assertion: Matches "x" only if "x" is preceded by "y".
359 |         </dd>
360 | 
361 |         <dt>
362 |           <code>(?&lt;!y)x</code>
363 |         </dt>
364 |         <dd>
365 |           Negative lookbehind assertion: Matches "x" only if "x" is not preceded
366 |           by "y".
367 |         </dd>
368 |       </dl>
369 | 
370 |       <h2>
371 |         <a
372 |           href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions/Quantifiers#types"
373 |           target="_blank"
374 |           rel="noreferrer"
375 |         >
376 |           Quantifiers
377 |         </a>
378 |       </h2>
379 |       <dl>
380 |         <dt>
381 |           <code>x*</code>
382 |         </dt>
383 |         <dd>Matches the preceding item "x" 0 or more times.</dd>
384 | 
385 |         <dt>
386 |           <code>x+</code>
387 |         </dt>
388 |         <dd>Matches the preceding item "x" 1 or more times.</dd>
389 | 
390 |         <dt>
391 |           <code>x?</code>
392 |         </dt>
393 |         <dd>Matches the preceding item "x" 0 or 1 times.</dd>
394 | 
395 |         <dt>
396 |           <code>x&lbrace;n&rbrace;</code>
397 |         </dt>
398 |         <dd>
399 |           Where "n" is a positive integer, matches exactly "n" occurrences of
400 |           the preceding item "x".
401 |         </dd>
402 | 
403 |         <dt>
404 |           <code>x&lbrace;n,&rbrace;</code>
405 |         </dt>
406 |         <dd>
407 |           Where "n" is a positive integer, matches at least "n" occurrences of
408 |           the preceding item "x".
409 |         </dd>
410 | 
411 |         <dt>
412 |           <code>x&lbrace;n,m&rbrace;</code>
413 |         </dt>
414 |         <dd>
415 |           Where "n" is 0 or a positive integer, "m" is a positive integer, and{" "}
416 |           <code>m &gt; n</code>, matches at least "n" and at most "m"
417 |           occurrences of the preceding item "x".{" "}
418 |         </dd>
419 | 
420 |         <dt>
421 |           <code>x*?</code>
422 |           <br />
423 |           <code>x+?</code>
424 |           <br />
425 |           <code>x??</code>
426 |           <br />
427 |           <code>x&lbrace;n&rbrace;?</code>
428 |           <br />
429 |           <code>x&lbrace;n,&rbrace;?</code>
430 |           <br />
431 |           <code>x&lbrace;n,m&rbrace;?</code>
432 |         </dt>
433 |         <dd>
434 |           The <code>?</code> character after the quantifier makes the quantifier
435 |           "non-greedy": meaning that it will stop as soon as it finds a match.
436 |         </dd>
437 |       </dl>
438 |       <p>
439 |         Source:{" "}
440 |         <a
441 |           href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions"
442 |           target="_blank"
443 |           rel="noreferrer"
444 |         >
445 |           MDN Web Docs
446 |         </a>
447 |       </p>
448 |     </>
449 |   );
450 | }
451 | 
452 | export default () => {
453 |   const navigate = useNavigate();
454 |   createShortcut({ key: "m", ctrlKey: true }, (e) => {
455 |     e.preventDefault();
456 |     navigate("/");
457 |   });
458 | 
459 |   return (
460 |     <div class={styles.root}>
461 |       <Title>Cheat Sheet - Regexify</Title>
462 | 
463 |       <Navigation />
464 |       <main aria-label="Cheat Sheet">
465 |         <Content />
466 |       </main>
467 |     </div>
468 |   );
469 | };
470 | 


--------------------------------------------------------------------------------