feat(examples): add parse-playground example

aminkhorrami · Jul 11, 2020 · 8b6dc62 · 8b6dc62
1 parent 7691457
commit 8b6dc62
Show file tree

Hide file tree

Showing 11 changed files with 557 additions and 0 deletions.
diff --git a/assets/examples/parse-playground.png b/assets/examples/parse-playground.png
diff --git a/examples/parse-playground/.gitignore b/examples/parse-playground/.gitignore
@@ -0,0 +1,8 @@
+.cache
+out
+node_modules
+yarn.lock
+*.js
+*.map
+!src/*.d.ts
+!*.config.js
diff --git a/examples/parse-playground/README.md b/examples/parse-playground/README.md
@@ -0,0 +1,29 @@
+# parse-playground
+
+[Visit playground](http://demo.thi.ng/umbrella/parse-playground/)
+
+This project was largely created during the very first [thi.ng/umbrella
+livestream](https://www.youtube.com/watch?v=mXp92s_VP40&t=44) on
+2020-07-10. Feel free to visit and rewatch the video for more details.
+
+The only additional features added afterwards are:
+
+- editor state serialized using
+  [msgpack](https://www.npmjs.com/package/@ygoe/msgpack) (and base64) as
+  URI hash for easier sharing/bookmarking
+- added multiple test inputs (with tabbed UI) for easier testing and
+  specifying different inputs for different parser rules
+- added 3rd codegen template (now: TS, ESM & CommonJS)
+- added various comments in the source code and some minor cleanup
+
+Please refer to the [example build
+instructions](https://github.com/thi-ng/umbrella/wiki/Example-build-instructions)
+on the wiki.
+
+## Authors
+
+- Karsten Schmidt
+
+## License
+
+&copy; 2020 Karsten Schmidt // Apache Software License 2.0
diff --git a/examples/parse-playground/index.html b/examples/parse-playground/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+        <title>parse-playground</title>
+        <link
+            href="https://unpkg.com/tachyons@4/css/tachyons.min.css"
+            rel="stylesheet"
+        />
+        <style>
+            main {
+                display: grid;
+                grid-template-columns: 1fr;
+                gap: 0.5rem;
+            }
+
+            textarea {
+                border: 0;
+            }
+
+            /** Safari fix */
+            textarea:disabled {
+                -webkit-text-fill-color: currentColor;
+                opacity: 1;
+            }
+
+            textarea.editor {
+                border-left: 0.125rem solid white;
+            }
+
+            textarea.editor:focus {
+                outline: none;
+                border-left-color: hotpink;
+            }
+
+            @media screen and (min-width: 60rem) {
+                main {
+                    grid-template-columns: 1fr 1fr;
+                }
+            }
+        </style>
+    </head>
+    <body class="ma2 sans-serif bg-light-gray">
+        <script type="text/javascript" src="./src/index.ts"></script>
+    </body>
+</html>
diff --git a/examples/parse-playground/package.json b/examples/parse-playground/package.json
@@ -0,0 +1,53 @@
+{
+    "name": "parse-playground",
+    "version": "0.0.1",
+    "description": "Parser grammar livecoding editor/playground & codegen",
+    "repository": "https://github.com/thi-ng/umbrella",
+    "author": "Karsten Schmidt <[email protected]>",
+    "license": "Apache-2.0",
+    "scripts": {
+        "clean": "rm -rf .cache build out",
+        "build": "yarn clean && parcel build index.html -d out --public-url ./ --no-source-maps --no-cache --detailed-report --experimental-scope-hoisting",
+        "build:webpack": "../../node_modules/.bin/webpack --mode production",
+        "start": "parcel index.html -p 8080 --open"
+    },
+    "devDependencies": {
+        "parcel-bundler": "^1.12.4",
+        "terser": "^4.8.0",
+        "typescript": "^3.9.5"
+    },
+    "dependencies": {
+        "@thi.ng/api": "latest",
+        "@thi.ng/bench": "latest",
+        "@thi.ng/dl-asset": "latest",
+        "@thi.ng/hiccup-carbon-icons": "latest",
+        "@thi.ng/hiccup-html": "latest",
+        "@thi.ng/parse": "latest",
+        "@thi.ng/rdom": "latest",
+        "@thi.ng/rdom-components": "latest",
+        "@thi.ng/rstream": "latest",
+        "@thi.ng/strings": "latest",
+        "@thi.ng/transducers": "latest",
+        "@thi.ng/transducers-binary": "latest",
+        "@ygoe/msgpack": "latest"
+    },
+    "browserslist": [
+        "last 3 Chrome versions"
+    ],
+    "browser": {
+        "process": false
+    },
+    "thi.ng": {
+        "readme": [
+            "dl-asset",
+            "hiccup-carbon-icons",
+            "hiccup-html",
+            "parse",
+            "rdom",
+            "rdom-components",
+            "rstream",
+            "transducers-binary"
+        ],
+        "screenshot": "examples/parse-playground.png"
+    }
+}
diff --git a/examples/parse-playground/src/api.ts b/examples/parse-playground/src/api.ts
@@ -0,0 +1,19 @@
+export type Status = "ok" | "partial" | "fail" | "err";
+
+export interface State {
+    grammar: string;
+    input: string;
+    rule: string;
+}
+
+export interface ParseResult {
+    status: Status;
+    body: string;
+    time?: number;
+}
+
+export interface CodeTemplate {
+    name: string;
+    ext: string;
+    code: string;
+}
diff --git a/examples/parse-playground/src/config.ts b/examples/parse-playground/src/config.ts
@@ -0,0 +1,99 @@
+import type { IObjectOf } from "@thi.ng/api";
+import type { EditorOpts } from "@thi.ng/rdom-components";
+import type { CodeTemplate, Status } from "./api";
+
+const REPO_URL = "https://github.com/thi-ng/umbrella/tree/develop/";
+export const DOC_URL = REPO_URL + "packages/parse#readme";
+export const SRC_URL = REPO_URL + "examples/parse-playground";
+
+export const CODE_TEMPLATES: IObjectOf<CodeTemplate> = {
+    js: {
+        name: "JavaScript (CommonJS)",
+        ext: "js",
+        code: `// downloaded from {0} @ {1}
+const { defContext, defGrammar } = require("@thi.ng/parse");
+
+const lang = defGrammar(\`\n{2}\n\`);
+
+module.exports = {
+    lang,
+    parse: (src, opts) => {
+        const ctx = defContext(src, opts);
+        return { result: lang.rules.{3}(ctx), ctx };
+    }
+};`,
+    },
+
+    esm: {
+        name: "JavaScript (ESM)",
+        ext: "js",
+        code: `// downloaded from {0} @ {1}
+import { defContext, defGrammar } from "@thi.ng/parse";
+
+export const lang = defGrammar(\`\n{2}\n\`);
+
+export const parse = (src, opts) => {
+    const ctx = defContext(src, opts);
+    return { result: lang.rules.{3}(ctx), ctx };
+};`,
+    },
+
+    ts: {
+        name: "TypeScript",
+        ext: "ts",
+        code: `// downloaded from {0} @ {1}
+import { ContextOpts, defContext, defGrammar } from "@thi.ng/parse";
+
+export const lang = defGrammar(\`\n{2}\n\`);
+
+export const parse = (src: string, opts?: Partial<ContextOpts>) => {
+    const ctx = defContext(src, opts);
+    return { result: lang.rules.{3}(ctx), ctx };
+};`,
+    },
+};
+
+export const DEFAULT_GRAMMAR = `# grammar rules...
+list: '('! <expr> ')'! ;
+sym: ( <ALPHA_NUM> | [?!$+\\u002d*/.~#^=<>] )+ => join ;
+expr: ( <FLOAT> | <STRING> | <sym> | <list> | <WS1> )* ;
+main: <START> <expr> <END> => hoist ;
+`;
+
+export const DEFAULT_RULE = "main";
+
+export const DEFAULT_INPUTS = [
+    `(def hello (x) (str "hello, " x))
+(print (hello -12.3))`,
+    "(hello world)",
+    "intentionally left black",
+];
+
+export const LINK_CLASSES = "link blue";
+
+export const BUTTON_CLASSES =
+    "pa2 db w-100 bg-blue hover-bg-dark-blue bg-animate white bn pointer";
+
+export const PANEL_CLASSES = "w-100 pa2 code f7 lh-copy bg-animate";
+
+export const EDITOR_OPTS: Partial<EditorOpts> = {
+    wrapper: { class: "relative" },
+    editor: { attribs: { class: PANEL_CLASSES + " editor", rows: 16 } },
+    cursor: {
+        attribs: {
+            class:
+                "absolute top-0 right-0 z1 pa2 br3 br--left br--bottom bg-light-gray gray tr f7",
+        },
+    },
+};
+
+export const DROPDOWN_ATTRIBS = { class: "db w-100 mb2 pa2" };
+
+export const BG_COLS: Record<Status, string> = {
+    ok: "bg-washed-green dark-green",
+    partial: "bg-washed-yellow orange",
+    fail: "bg-washed-red dark-red",
+    err: "bg-light-red white",
+};
+
+export const TAB_CLASSES = ".dib.w3.pa2.mr2.br3.br--top.pointer";