Initial commit

silphium-labs · Jul 11, 2024 · f7c180c · f7c180c
commit f7c180c
Show file tree

Hide file tree

Showing 19 changed files with 452 additions and 0 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,13 @@
+const base = require('@bablr/eslint-config-base');
+const pluginSyntaxJSX = require('@babel/plugin-syntax-jsx').default;
+
+module.exports = {
+  ...base,
+  parserOptions: {
+    ...base.parserOptions,
+    babelOptions: {
+      ...base.parserOptions.babelOptions,
+      plugins: [...base.parserOptions.babelOptions.plugins, pluginSyntaxJSX],
+    },
+  },
+};
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2024 Conrad Buck
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,32 @@
+## Paneditor
+
+The Paneditor!
+
+## Usage
+
+```bash
+$ npm install # or pnpm install or yarn install
+```
+
+### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm run dev`
+
+Runs the app in the development mode.<br>
+Open [http://localhost:5173](http://localhost:5173) to view it in the browser.
+
+### `npm run build`
+
+Builds the app for production to the `dist` folder.<br>
+It correctly bundles Solid in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br>
+Your app is ready to be deployed!
+
+## Deployment
+
+Learn more about deploying your application with the [documentations](https://vitejs.dev/guide/static-deploy.html)
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Paneditor</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "paneditor",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@iter-tools/imm-stack": "1.1.0",
+    "@bablr/language-json": "0.3.6",
+    "@reduxjs/toolkit": "2.2.6",
+    "bablr": "0.2.1",
+    "iter-tools-es": "7.5.3",
+    "solid-js": "1.8.18"
+  },
+  "devDependencies": {
+    "@bablr/eslint-config-base": "github:bablr-lang/eslint-config-base#49f5952efed27f94ee9b94340eb1563c440bf64e",
+    "@babel/plugin-syntax-jsx": "7.24.7",
+    "enhanced-resolve": "^5.12.0",
+    "eslint": "^8.47.0",
+    "eslint-import-resolver-enhanced-resolve": "^1.0.5",
+    "eslint-plugin-import": "^2.27.5",
+    "prettier": "^2.0.5",
+    "vite": "^5.3.1",
+    "vite-plugin-solid": "2.10.2"
+  }
+}
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/assets/solid.svg b/src/assets/solid.svg
diff --git a/src/components/ContextPane/ContextPane.css b/src/components/ContextPane/ContextPane.css
@@ -0,0 +1,3 @@
+.context-pane {
+  padding: 2rem;
+}
diff --git a/src/components/ContextPane/ContextPane.jsx b/src/components/ContextPane/ContextPane.jsx
@@ -0,0 +1,17 @@
+import { useContext } from 'solid-js';
+import { AgastContext, SelectionContext } from '../../state/store.js';
+
+import './ContextPane.css';
+
+function ContextPane() {
+  const agastContext = useContext(AgastContext);
+  const { selectedRange } = useContext(SelectionContext);
+
+  return (
+    <>
+      <div class="context-pane">{() => agastContext.nodeForTag(selectedRange()[1])?.type}</div>
+    </>
+  );
+}
+
+export default ContextPane;
diff --git a/src/components/Editor/Editor.css b/src/components/Editor/Editor.css
@@ -0,0 +1,9 @@
+.editor {
+  height: 100%;
+
+  padding: 2rem;
+}
+
+.selected {
+  background-color: blue;
+}
diff --git a/src/components/Editor/Editor.jsx b/src/components/Editor/Editor.jsx
@@ -0,0 +1,125 @@
+import emptyStack from '@iter-tools/imm-stack';
+import { useContext } from 'solid-js';
+import { streamParse } from 'bablr';
+import * as language from '@bablr/language-json';
+import { SelectionContext, AgastContext } from '../../state/store.js';
+
+import './Editor.css';
+
+const initialCode = `[1, 2, 3]`;
+
+function Editor() {
+  const { selectedRange, setSelectedRange } = useContext(SelectionContext);
+  const agastContext = useContext(AgastContext);
+
+  const { tokens: tokens_ } = streamParse(
+    language,
+    'Expression',
+    initialCode,
+    {},
+    { agastContext },
+  );
+
+  const nodeBindings = new WeakMap();
+
+  const tokens = [...tokens_];
+
+  const madness = tokens.reduce((stack, token) => {
+    if (token.type === 'OpenNodeTag') {
+      let ref = agastContext.getPreviousTerminal(token);
+
+      while (ref && ref.type !== 'Reference') {
+        ref = agastContext.getPreviousTerminal(ref);
+      }
+
+      stack = stack.push({ type: token.value.type, ref, fragment: <></> });
+    }
+
+    if (token.type === 'Literal' || (token.type === 'OpenNodeTag' && token.value.intrinsicValue)) {
+      const value = token.type === 'Literal' ? token.value : token.value.intrinsicValue;
+      stack = stack.replace({
+        ref: stack.value.ref,
+        type: stack.value.type,
+        fragment: (
+          <>
+            {stack.value.fragment}
+            {value}
+          </>
+        ),
+      });
+    }
+
+    if (
+      token.type === 'CloseNodeTag' ||
+      (token.type === 'OpenNodeTag' && token.value.intrinsicValue)
+    ) {
+      const doneFrame = stack.value;
+      let ref, type, fragment;
+
+      stack = stack.pop();
+
+      if (doneFrame.ref) {
+        const node = agastContext.nodeForTag(token);
+        const { flags } = node;
+        const nodeValue = !(flags.trivia || flags.escape) ? (
+          <span
+            data-path={doneFrame.ref.value.name}
+            {...() => {
+              return selectedRange()[1] === token ? { class: 'selected' } : {};
+            }}
+          >
+            {doneFrame.fragment}
+          </span>
+        ) : (
+          <span>{doneFrame.fragment}</span>
+        );
+
+        nodeBindings.set(node, nodeValue);
+        nodeBindings.set(nodeValue, node);
+
+        ref = stack.value.ref;
+        type = stack.value.type;
+        fragment = nodeValue;
+      } else {
+        // capture the return value (an empty stack doesn't hold any data)
+        ref = null;
+        type = null;
+        fragment = doneFrame.fragment;
+      }
+
+      stack = stack.replace({
+        ref,
+        type,
+        fragment: (
+          <>
+            {stack.value.fragment}
+            {fragment}
+          </>
+        ),
+      });
+    }
+
+    return stack;
+  }, emptyStack.push({ type: null, ref: null, fragment: <></> }));
+
+  return (
+    <>
+      <div
+        class="editor"
+        onClick={(e) => {
+          const token = nodeBindings.get(e.target);
+
+          if (token) {
+            setSelectedRange([token.openTag, token.closeTag || token.openTag]);
+          } else {
+            setSelectedRange([null, null]);
+          }
+        }}
+      >
+        {madness.value.fragment}
+      </div>
+    </>
+  );
+}
+
+export default Editor;
diff --git a/src/components/Environment/Environment.css b/src/components/Environment/Environment.css
@@ -0,0 +1,15 @@
+.environment {
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+}
+
+.environment > .editor {
+  flex-grow: 1;
+}
+
+.environment > .context-pane {
+  flex-basis: 400px;
+  max-width: 30%;
+  background-color: rgb(30, 29, 29);
+}
diff --git a/src/components/Environment/Environment.jsx b/src/components/Environment/Environment.jsx
@@ -0,0 +1,26 @@
+import { createSignal } from 'solid-js';
+import { AgastContext } from 'bablr';
+import Editor from '../Editor/Editor.jsx';
+import ContextPane from '../ContextPane/ContextPane.jsx';
+import { SelectionContext, AgastContext as AgastSolidContext } from '../../state/store.js';
+
+import './Environment.css';
+
+function Environment() {
+  const [selectedRange, setSelectedRange] = createSignal([null, null]);
+
+  return (
+    <>
+      <AgastSolidContext.Provider value={AgastContext.create()}>
+        <SelectionContext.Provider value={{ selectedRange, setSelectedRange }}>
+          <div class="environment">
+            <Editor />
+            <ContextPane />
+          </div>
+        </SelectionContext.Provider>
+      </AgastSolidContext.Provider>
+    </>
+  );
+}
+
+export default Environment;