Initial commit

Author: conartist6

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [["styled-components", { "ssr": true }]]
+}

.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

.prettierrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  printWidth: 100, // Yes I know prettier says it's not a good idea.
+  trailingComma: 'all',
+  singleQuote: true,
+
+  overrides: [
+    {
+      files: '*.md',
+      options: {
+        printWidth: 60,
+      },
+    },
+  ],
+};

README.md

@@ -0,0 +1,24 @@
+# @iter-tools/regex-playground
+
+`regex-playground` provides a playground for `@iter-tools/regex` to help you see how the engine evaluates patterns. It is useful for learning how a regex engine works, and for debugging.
+
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). It is using the [Grommet](https://v2.grommet.io/) component library and [Typescript](https://www.typescriptlang.org/).
+
+## Getting Started
+
+To develop on this project run the `dev` [script](https://gist.github.com/conartist6/4f784765b76977ab3b95dc2b26ee9a15), which runs a local web server which live-reloads changes.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

components/glyph-stream.tsx

@@ -0,0 +1,27 @@
+import { Box } from 'grommet';
+import { take, map, drop, isEmpty, execPipe, toArray } from 'iter-tools-es';
+import { Glyph } from './glyph';
+
+export const GlyphStream = ({ nLetters = 10, index, width, engine, forkr }: any) => {
+  const streamLetters = execPipe(
+    forkr as IterableIterator<string>,
+    take(nLetters),
+    map((glyph, i) => <Glyph key={index + i} index={index + i} glyph={glyph} />),
+    toArray,
+  );
+
+  if (index === 0 && width === 0) {
+    streamLetters.unshift(<Glyph key="start" index={null} glyph={null} />);
+  }
+  if (isEmpty(drop(nLetters, forkr))) {
+    streamLetters.push(<Glyph key="end" index={null} glyph={null} />);
+  } else {
+    streamLetters.push(<Glyph key="more" index={null} glyph={'...'} />);
+  }
+
+  return (
+    <Box direction="row" gap="medium" style={{ paddingTop: '1.4em' }}>
+      {streamLetters}
+    </Box>
+  );
+};

components/glyph.tsx

@@ -0,0 +1,13 @@
+import { Box } from 'grommet';
+
+export const Glyph = ({ glyph, index }: any) => (
+  <Box
+    pad="small"
+    background={glyph === null ? 'black' : 'white'}
+    elevation="medium"
+    style={{ position: 'relative' }}
+  >
+    <Box style={{ position: 'absolute', top: '-24px' }}>{index !== null ? index : ' '}</Box>
+    <pre style={{ margin: 0 }}>{glyph || ' '}</pre>
+  </Box>
+);

components/inspector.tsx

@@ -0,0 +1,20 @@
+import { Button, Main } from 'grommet';
+
+import { GlyphStream } from '../components/glyph-stream';
+import { Matches } from '../components/matches';
+
+export const Inspector = ({ index, width, engine, forkr, done, matches, dispatch }) => {
+  return (
+    <Main pad="medium" gap="large">
+      <Matches matches={matches} />
+      <Button
+        primary
+        disabled={done}
+        label={done ? 'done' : width ? 'step1' : 'step0'}
+        alignSelf="start"
+        onClick={() => dispatch({ type: 'step' })}
+      />
+      <GlyphStream index={index} width={width} engine={engine} forkr={forkr} />
+    </Main>
+  );
+};

components/matches.tsx

@@ -0,0 +1,13 @@
+import { Box, Card, CardBody } from 'grommet';
+
+export const Matches = ({ matches }) => {
+  const content = !matches.length
+    ? 'There are no matches yet'
+    : matches.map((match, i) => (
+        <Card key={i} background="white" pad="small">
+          <CardBody>Match {JSON.stringify(match)}</CardBody>
+        </Card>
+      ));
+
+  return <Box direction="row">{content}</Box>;
+};

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig

package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@iter-tools/regex-playground",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@iter-tools/regex": "iter-tools/regex#c6328c4768b9532b60e5a017d14ee86bf6fd82d3",
+    "grommet": "^2.17.2",
+    "grommet-icons": "^4.5.0",
+    "iter-tools-es": "^7.3.1",
+    "next": "latest",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-is": "17.0.2",
+    "styled-components": "^5.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "17.0.23",
+    "@types/react": "17.0.43",
+    "@types/react-dom": "17.0.14",
+    "@types/styled-components": "5.1.24",
+    "babel-plugin-styled-components": "^1.12.0",
+    "prettier": "2.6.2",
+    "typescript": "4.6.3"
+  }
+}

pages/_app.tsx

@@ -0,0 +1,12 @@
+import type { AppProps } from 'next/app'
+import { grommet, Grommet } from 'grommet';
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <Grommet theme={grommet}>
+      <Component {...pageProps} />
+    </Grommet>
+  );
+}
+
+export default MyApp;

pages/_document.tsx

@@ -0,0 +1,43 @@
+import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document';
+import { ServerStyleSheet } from 'styled-components';
+
+class MyDocument extends Document {
+  static async getInitialProps(ctx: DocumentContext) {
+    const sheet = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;
+
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
+        });
+
+      const initialProps = await Document.getInitialProps(ctx);
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>
+        ),
+      };
+    } finally {
+      sheet.seal();
+    }
+  }
+
+  render() {
+    return (
+      <Html>
+        <Head />
+        <body style={{ margin: 0 }}>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default MyDocument;

pages/index.tsx

@@ -0,0 +1,119 @@
+import Head from 'next/head';
+import { parse } from '@iter-tools/regex';
+// @ts-ignore-error
+import { Engine } from '@iter-tools/regex/internal/engine';
+import { Box, Button, CheckBox, Header, Main, Markdown, TextInput } from 'grommet';
+
+import { Grid, BlockQuote } from 'grommet-icons';
+import { PureComponent } from 'react';
+import { forkerate } from 'iter-tools-es';
+import { Inspector } from '../components/inspector';
+
+type InspectorState = {
+  index: number;
+  width: number;
+  engine: any;
+  forkr: any;
+  done: boolean;
+  matches: Array<Array<string | undefined>>;
+};
+
+const welcomeText = `
+
+Welcome to the [@iter-tools/regex](https://github.com/iter-tools/regex) playground!
+      
+This playground allows you to step through the incremental process by which \`@iter-tools/regex\`
+does matching.
+
+To get started, enter a pattern and some text to match against, press "execute" to setup the engine,
+then press the step button repeatedly to see how matching progresses.`;
+
+const Welcome = () => {
+  return (
+    <Main pad="medium">
+      <Markdown components={{ p: { props: { fill: true } } }}>{welcomeText}</Markdown>
+    </Main>
+  );
+};
+
+export default class App extends PureComponent<never, InspectorState> {
+  state: InspectorState = {
+    index: null!,
+    width: null!,
+    engine: null,
+    forkr: null,
+    done: null!,
+    matches: null!,
+  };
+
+  dispatch = (action) => {
+    switch (action.type) {
+      case 'step':
+        this.step();
+        break;
+    }
+  };
+
+  execute = () => {
+    const { pattern, text, ...flags } = Object.fromEntries(new FormData(document.forms[0]));
+    this.setState({
+      index: 0,
+      width: 0,
+      forkr: forkerate(text as string),
+      engine: new Engine(parse(pattern as string, Object.keys(flags).join(''))),
+      done: false,
+      matches: [],
+    });
+  };
+
+  step = () => {
+    const { index, width, forkr, engine, matches } = this.state;
+
+    if (width === 0) {
+      const { value, done } = engine.step0(index === 0, forkr.done, forkr.index, forkr.value);
+
+      if (value !== null) {
+      }
+
+      this.setState({ width: 1, matches: value ? [...matches, ...value] : matches, done });
+    } else {
+      engine.step1(forkr.value);
+
+      forkr.advance();
+      this.setState({ width: 0, index: index + 1 });
+    }
+  };
+
+  render() {
+    const { engine } = this.state;
+    const content = engine ? <Inspector {...this.state} dispatch={this.dispatch} /> : <Welcome />;
+
+    return (
+      <Box
+        flex
+        margin={{ horizontal: 'auto', vertical: '0' }}
+        width={{ max: '100%' }}
+        height={{ min: '100vh' }}
+        background="light-2"
+      >
+        <Head>
+          <title>Regex playground</title>
+          <link rel="icon" href="/favicon.ico" />
+        </Head>
+        <form id="inputs">
+          <Header background="white" pad="medium">
+            <TextInput name="pattern" icon={<Grid />} placeholder="pattern" />
+            <TextInput name="text" icon={<BlockQuote />} placeholder="text" />
+            <CheckBox name="g" label="g" />
+            <CheckBox name="i" label="i" />
+            <CheckBox name="s" label="s" />
+            <CheckBox name="m" label="m" />
+            <CheckBox name="y" label="y" />
+            <Button primary label="execute" onClick={this.execute} />
+          </Header>
+        </form>
+        {content}
+      </Box>
+    );
+  }
+}