From 308b774cfb3bfc7366b7d9e443a80474df0f5f30 Mon Sep 17 00:00:00 2001 From: Ken Gorab Date: Sun, 14 Mar 2021 21:56:31 -0400 Subject: [PATCH] Lots of cleanup - Removed unused svg icons from an old version of the playground page - Changed from using code-prettify to just using codemirror's `runMode` function for formatting code samples on the homepage/docs page. This makes all the code styles consistent, and allowed me to remove a few dependencies and clean up some code. It also means that new syntax features don't need to be implemented twice, once for the playground page and once for the docs pages - Begin scaffolding for Manual (new docs) page --- package-lock.json | 18 -------- package.json | 2 - src/@types/code-prettify.d.ts | 34 --------------- src/@types/react-snapshot.d.ts | 9 ---- src/App.tsx | 2 + src/components/Code.tsx | 67 ++++++++++++++++------------- src/img/refresh.svg | 4 -- src/img/ui-play.svg | 4 -- src/index.tsx | 4 -- src/pages/Manual.tsx | 11 +++++ src/prettier-languages.ts | 78 ---------------------------------- 11 files changed, 50 insertions(+), 183 deletions(-) delete mode 100644 src/@types/code-prettify.d.ts delete mode 100644 src/@types/react-snapshot.d.ts delete mode 100644 src/img/refresh.svg delete mode 100644 src/img/ui-play.svg create mode 100644 src/pages/Manual.tsx delete mode 100644 src/prettier-languages.ts diff --git a/package-lock.json b/package-lock.json index d5bb02e..144b2ca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3516,11 +3516,6 @@ } } }, - "classnames": { - "version": "2.2.6", - "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", - "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" - }, "clean-css": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz", @@ -3591,11 +3586,6 @@ "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=" }, - "code-prettify": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/code-prettify/-/code-prettify-0.1.0.tgz", - "integrity": "sha1-RocMyMGlDQm61TmzOpg9vUqjSx4=" - }, "codemirror": { "version": "5.48.0", "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.48.0.tgz", @@ -10428,14 +10418,6 @@ "scheduler": "^0.13.6" } }, - "react-dropdown": { - "version": "1.6.4", - "resolved": "https://registry.npmjs.org/react-dropdown/-/react-dropdown-1.6.4.tgz", - "integrity": "sha512-zTlNRZ6vzjEPsodBNgh6Xjp9IempEx9sReH3crT2Jw4S6KW2wS/BRIH3d/grYf/iXARadDRD91//uUCs9yjoLg==", - "requires": { - "classnames": "^2.2.3" - } - }, "react-error-overlay": { "version": "5.1.6", "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-5.1.6.tgz", diff --git a/package.json b/package.json index 682312a..2fcf590 100644 --- a/package.json +++ b/package.json @@ -4,12 +4,10 @@ "private": true, "dependencies": { "@kengorab/abra_wasm": "^0.6.9", - "code-prettify": "^0.1.0", "codemirror": "^5.48.0", "react": "^16.8.6", "react-codemirror2": "^6.0.0", "react-dom": "^16.8.6", - "react-dropdown": "^1.6.4", "react-responsive": "^8.1.0", "react-router-dom": "^5.0.1", "react-router-hash-link": "^1.2.1", diff --git a/src/@types/code-prettify.d.ts b/src/@types/code-prettify.d.ts deleted file mode 100644 index 1bc5ef8..0000000 --- a/src/@types/code-prettify.d.ts +++ /dev/null @@ -1,34 +0,0 @@ -declare module 'code-prettify' { - type LexerRule = [string, RegExp] | [string, RegExp, null] | [string, RegExp, null, string | undefined] - - export class PR { - prettyPrint() - - registerLangHandler(lexer: PRLexer, languages: string[]) - - createSimpleLexer( - shortcutStylePatterns: LexerRule[], - fallthroughStylePatterns: LexerRule[] - ): PRLexer - - PR_PLAIN: string - PR_STRING: string - PR_COMMENT: string - PR_STRING: string - PR_KEYWORD: string - PR_LITERAL: string - PR_TYPE: string - PR_TAG: string - PR_PLAIN: string - PR_PUNCTUATION: string - } - - declare global { - interface Window { - PR: PR - } - } - - interface PRLexer { - } -} \ No newline at end of file diff --git a/src/@types/react-snapshot.d.ts b/src/@types/react-snapshot.d.ts deleted file mode 100644 index b0012cb..0000000 --- a/src/@types/react-snapshot.d.ts +++ /dev/null @@ -1,9 +0,0 @@ -declare module 'react-snapshot' { - import { ReactElement } from 'react' - - export function render

( - element: ReactElement

, - container: Element | null, - callback?: () => void - ) -} \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 68ad4a3..d762c92 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,6 +3,7 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom' import { Layout, Header, Main } from './components/Layout' import HomePage from './pages/HomePage' import Documentation from './pages/Documentation' +import Manual from './pages/Manual' import PlaygroundPage from './pages/PlaygroundPage' export default function App() { @@ -15,6 +16,7 @@ export default function App() {

+
diff --git a/src/components/Code.tsx b/src/components/Code.tsx index b7ba00a..3ac1b2a 100644 --- a/src/components/Code.tsx +++ b/src/components/Code.tsx @@ -1,47 +1,54 @@ import * as React from 'react' import styled from 'styled-components' -import { VsCodeThemeStyles } from '../prettier-languages' -import 'code-prettify' -import 'code-prettify/src/run_prettify' +import Codemirror from 'codemirror' +import 'codemirror/addon/runmode/runmode' +import 'codemirror/lib/codemirror.css' +import 'codemirror/theme/material.css' +import '../abra-lang/abra-mode' interface Props { children: string, - language?: 'abra' | 'abrac', - style?: React.CSSProperties } -export default function Code({ children, style, language = 'abra' }: Props) { - const pre = React.createRef() - - // Split into lines, removing any empty lines at start and end (but keeping empty lines in middle) - const codeLines = children.trimEnd() - .split('\n') - .filter((line, idx) => idx !== 0 || line.length) - const indentation = codeLines[0] ? codeLines[0].length - codeLines[0].trimStart().length : 0 - const code = codeLines.map(line => line.substring(indentation, line.length)).join('\n') +export default function Code({ children }: Props) { + const ref = React.createRef() React.useLayoutEffect(() => { - if (pre.current) { - pre.current.classList.remove('prettyprinted') - } - window.PR.prettyPrint() - }, [pre, code]) - - return ( - <> - - 
-        {code}
-
- - ) + const code = unindent(children) + + // @ts-ignore: this function is an addon, and isn't present in the type definitions + Codemirror.runMode(code, 'abra', ref.current) + }, [ref, children]) + + return 
+}
+
+function unindent(str: string): string {
+  const lines = str.split('\n')
+
+  let startIdx = 0
+  for (; startIdx < lines.length; startIdx++) {
+    if (lines[startIdx].trim()) break
+  }
+  let endIdx = lines.length - 1
+  for (; endIdx >= 0; endIdx--) {
+    if (lines[endIdx].trim()) break
+  }
+
+  const firstLine = lines[startIdx]
+  if (!firstLine) return str
+  const indentation = firstLine.search(/\S/)
+
+  return lines.slice(startIdx, endIdx + 1)
+    .map(line => line.substring(indentation))
+    .join('\n')
 }
 
 const Pre = styled.pre`
-  padding: 16px !important; // Need to override prettyprint's default for padding
+  height: auto !important; // Need to override codemirror's default 300px height
+  padding: 16px; 
   border-radius: 6px;
   max-width: 100%;
   max-height: 300px;
   overflow: scroll;
 `
-
diff --git a/src/img/refresh.svg b/src/img/refresh.svg
deleted file mode 100644
index a38ef8a..0000000
--- a/src/img/refresh.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-    
-
\ No newline at end of file
diff --git a/src/img/ui-play.svg b/src/img/ui-play.svg
deleted file mode 100644
index 3659592..0000000
--- a/src/img/ui-play.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-    
-
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index dbf119a..ea838aa 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,10 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import App from './App'
-import { registerAbracLang, registerAbraLang } from './prettier-languages'
 import './index.css'
 
-registerAbraLang()
-registerAbracLang()
-
 ReactDOM.render(, document.getElementById('root'))
diff --git a/src/pages/Manual.tsx b/src/pages/Manual.tsx
new file mode 100644
index 0000000..93aacaa
--- /dev/null
+++ b/src/pages/Manual.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { Section } from '../components/Layout'
+
+export default function Manual() {
+  return (
+    

+      
Abra Manual

+      // TODO
+    

+  )
+}
diff --git a/src/prettier-languages.ts b/src/prettier-languages.ts
deleted file mode 100644
index 3c5a94a..0000000
--- a/src/prettier-languages.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { createGlobalStyle } from 'styled-components'
-
-export const VsCodeThemeStyles = createGlobalStyle`
-  pre.prettyprint { display: block; background-color: #1e1e1e; }
-  pre .str { color: #ffa0a0; } // string
-  pre .kwd { color: #569cd6; font-weight: bold; } // keyword
-  pre .com { color: #6c9d5a; } // comment
-  pre .typ { color: #4ec9b0; } // type
-  pre .lit { color: #cd5c5c; } // literal
-  pre .pun { color: #bfbfbf; } // punctuation
-  pre .pln { color: #ffffff; } // plaintext / identifiers
-  pre .dec { color: #b5cea8; } // decimal
-`
-
-export function registerAbraLang() {
-  const { PR } = window
-  const lexer = window.PR.createSimpleLexer(
-    [
-      // Whitespace
-      [PR['PR_PLAIN'], /^[\t\n\r \xA0]+/, null, '\t\n\r \xA0']
-    ],
-    [
-      // Single-line comments
-      [PR['PR_COMMENT'], /^\/\/(?:.*)/],
-
-      // Multi-line comments
-      [PR['PR_COMMENT'], /^\/\*[^*]*\*+(?:[^/*][^*]*\*+)*\//],
-
-      // Double-quoted strings
-      [PR['PR_STRING'], /^r?"("|(?:[^\n\r\f])*?[^\\]")/],
-
-      // Keywords for constants
-      [PR['PR_KEYWORD'], /^\b(?:false|true)\b/i],
-
-      // Other keywords
-      [PR['PR_KEYWORD'], /^\b(?:val|var|func|if|else|for|in|while|break|type|None|self|enum|import|from|export)\b/i],
-
-      // Types are typically capitalized
-      [PR['PR_TYPE'], /^[A-Z]\w*/],
-
-      // Numbers
-      [PR['PR_LITERAL'], /^\b\d+(?:\.\d*)?(?:e[+-]?\d+)?/i],
-
-      // Identifiers
-      [PR['PR_PLAIN'], /^[a-z_$][a-z0-9_]*/i],
-
-      // Punctuation
-      [PR['PR_PUNCTUATION'], /^[(){}[\],.:;=+\-*/]/]
-    ]
-  )
-
-  PR.registerLangHandler(lexer, ['abra'])
-}
-
-export function registerAbracLang() {
-  const { PR } = window
-  const lexer = window.PR.createSimpleLexer(
-    [
-      // Whitespace
-      [PR['PR_PLAIN'], /^[\t\n\r \xA0]+/, null, '\t\n\r \xA0']
-    ],
-    [
-      // Comments
-      [PR['PR_COMMENT'], /;\s*.*/],
-
-      // Labels
-      [PR['PR_PLAIN'], /[a-z_$0-9]*:/],
-
-      // Numbers
-      [PR['PR_LITERAL'], /^\b\d+(?:\.\d*)?(?:e[+-]?\d+)?/i],
-
-      // Instructions
-      [PR['PR_KEYWORD'], /^[a-z_$][a-z0-9_]*/i],
-    ]
-  )
-
-  PR.registerLangHandler(lexer, ['abrac'])
-}