arche-highlight 0.3.1 → 0.5.0

package/ArcheHighlight.es.js

@@ -12,13 +12,8 @@ function testComment(term) {
     || (term[0] === "/" && term[1] === "*")
 }
 
-// testOperator(term string) -> boolean
-function testOperator(term) {
-  return term == "+" || term == "-" || term == "*" || term == "/" || term == "**" || term == "=" || term == "+=" || term == "++" || term == "-=" || term == "*=" || term == "/=" || term == "**=" || term == "==" || term == "===" || term == "!=" || term == "!==" || term == ">" || term == ">=" || term == "<" || term == "<=" || term == "?" || term == ":" || term == "&&" || term == "||" || term == "??" || term == "&" || term == "|" || term == "^" || term == "~" || term == ">>" || term == "<<" || term == "&=" || term == "|=" || term == "^="
-}
-
-// pushWordTerm(parsedElements Array<object|string>, term string) -> ()
-function pushWordTerm(parsedElements, term) {
+// pushWordTerm(parsedElements Array<object|string>, term string, index number, text string) -> ()
+function pushWordTerm(parsedElements, term, index, text) {
   if (term == "process" || term == "require" || term == "console" || term == "window" || term == "global" || term == "globalThis" || term == "isNaN") {
     parsedElements.push(Span({ class: "global-object" }, term))
   } else if (term == "undefined") {
@@ -30,8 +25,21 @@ function pushWordTerm(parsedElements, term) {
   } else if (term == "NaN") {
     parsedElements.push(Span({ class: "not-a-number" }, term))
   } else {
-    parsedElements.push(term)
+    const spaces = []
+    let c = text[index]
+    while (c === " " || c === "\n") {
+      spaces.push(c)
+      index += 1
+      c = text[index]
+    }
+    if (c === "(") {
+      parsedElements.push(Span({ class: "function-name" }, term))
+    } else {
+      parsedElements.push(term)
+    }
+    parsedElements.push(...spaces)
   }
+  return index
 }
 
 function parseJavaScript(text) {
@@ -236,7 +244,12 @@ function parseJavaScript(text) {
       }
       else {
         if (term.length > 0) {
-          pushWordTerm(parsedElements, term, index, text)
+          index = pushWordTerm(parsedElements, term, index, text)
+          c = text[index]
+          if (c !== " " && c !== "\n") {
+            term = ""
+            continue
+          }
         }
         parsedElements.push(c)
         term = ""
@@ -272,7 +285,7 @@ function parseJavaScript(text) {
         parsedElements.push(Span({ class: "function-name" }, term))
         isFunctionDeclaration = false
       }
-      parsedElements.push(Span({ class: "opening-parentheses" }, c))
+      parsedElements.push(c)
       term = ""
       index += 1
     } else if (c === ",") {
@@ -286,7 +299,7 @@ function parseJavaScript(text) {
       if (term.length > 0) {
         pushWordTerm(parsedElements, term, index, text)
       }
-      parsedElements.push(Span({ class: "closing-parentheses" }, c))
+      parsedElements.push(c)
       term = ""
       index += 1
     } else if (c === "{") {

package/ArcheHighlight.js

@@ -18,13 +18,8 @@ function testComment(term) {
     || (term[0] === "/" && term[1] === "*")
 }
 
-// testOperator(term string) -> boolean
-function testOperator(term) {
-  return term == "+" || term == "-" || term == "*" || term == "/" || term == "**" || term == "=" || term == "+=" || term == "++" || term == "-=" || term == "*=" || term == "/=" || term == "**=" || term == "==" || term == "===" || term == "!=" || term == "!==" || term == ">" || term == ">=" || term == "<" || term == "<=" || term == "?" || term == ":" || term == "&&" || term == "||" || term == "??" || term == "&" || term == "|" || term == "^" || term == "~" || term == ">>" || term == "<<" || term == "&=" || term == "|=" || term == "^="
-}
-
-// pushWordTerm(parsedElements Array<object|string>, term string) -> ()
-function pushWordTerm(parsedElements, term) {
+// pushWordTerm(parsedElements Array<object|string>, term string, index number, text string) -> ()
+function pushWordTerm(parsedElements, term, index, text) {
   if (term == "process" || term == "require" || term == "console" || term == "window" || term == "global" || term == "globalThis" || term == "isNaN") {
     parsedElements.push(Span({ class: "global-object" }, term))
   } else if (term == "undefined") {
@@ -36,8 +31,21 @@ function pushWordTerm(parsedElements, term) {
   } else if (term == "NaN") {
     parsedElements.push(Span({ class: "not-a-number" }, term))
   } else {
-    parsedElements.push(term)
+    const spaces = []
+    let c = text[index]
+    while (c === " " || c === "\n") {
+      spaces.push(c)
+      index += 1
+      c = text[index]
+    }
+    if (c === "(") {
+      parsedElements.push(Span({ class: "function-name" }, term))
+    } else {
+      parsedElements.push(term)
+    }
+    parsedElements.push(...spaces)
   }
+  return index
 }
 
 function parseJavaScript(text) {
@@ -242,7 +250,12 @@ function parseJavaScript(text) {
       }
       else {
         if (term.length > 0) {
-          pushWordTerm(parsedElements, term, index, text)
+          index = pushWordTerm(parsedElements, term, index, text)
+          c = text[index]
+          if (c !== " " && c !== "\n") {
+            term = ""
+            continue
+          }
         }
         parsedElements.push(c)
         term = ""
@@ -278,7 +291,7 @@ function parseJavaScript(text) {
         parsedElements.push(Span({ class: "function-name" }, term))
         isFunctionDeclaration = false
       }
-      parsedElements.push(Span({ class: "opening-parentheses" }, c))
+      parsedElements.push(c)
       term = ""
       index += 1
     } else if (c === ",") {
@@ -292,7 +305,7 @@ function parseJavaScript(text) {
       if (term.length > 0) {
         pushWordTerm(parsedElements, term, index, text)
       }
-      parsedElements.push(Span({ class: "closing-parentheses" }, c))
+      parsedElements.push(c)
       term = ""
       index += 1
     } else if (c === "{") {

package/ArcheHighlight.mjs

@@ -12,13 +12,8 @@ function testComment(term) {
     || (term[0] === "/" && term[1] === "*")
 }
 
-// testOperator(term string) -> boolean
-function testOperator(term) {
-  return term == "+" || term == "-" || term == "*" || term == "/" || term == "**" || term == "=" || term == "+=" || term == "++" || term == "-=" || term == "*=" || term == "/=" || term == "**=" || term == "==" || term == "===" || term == "!=" || term == "!==" || term == ">" || term == ">=" || term == "<" || term == "<=" || term == "?" || term == ":" || term == "&&" || term == "||" || term == "??" || term == "&" || term == "|" || term == "^" || term == "~" || term == ">>" || term == "<<" || term == "&=" || term == "|=" || term == "^="
-}
-
-// pushWordTerm(parsedElements Array<object|string>, term string) -> ()
-function pushWordTerm(parsedElements, term) {
+// pushWordTerm(parsedElements Array<object|string>, term string, index number, text string) -> ()
+function pushWordTerm(parsedElements, term, index, text) {
   if (term == "process" || term == "require" || term == "console" || term == "window" || term == "global" || term == "globalThis" || term == "isNaN") {
     parsedElements.push(Span({ class: "global-object" }, term))
   } else if (term == "undefined") {
@@ -30,8 +25,21 @@ function pushWordTerm(parsedElements, term) {
   } else if (term == "NaN") {
     parsedElements.push(Span({ class: "not-a-number" }, term))
   } else {
-    parsedElements.push(term)
+    const spaces = []
+    let c = text[index]
+    while (c === " " || c === "\n") {
+      spaces.push(c)
+      index += 1
+      c = text[index]
+    }
+    if (c === "(") {
+      parsedElements.push(Span({ class: "function-name" }, term))
+    } else {
+      parsedElements.push(term)
+    }
+    parsedElements.push(...spaces)
   }
+  return index
 }
 
 function parseJavaScript(text) {
@@ -236,7 +244,12 @@ function parseJavaScript(text) {
       }
       else {
         if (term.length > 0) {
-          pushWordTerm(parsedElements, term, index, text)
+          index = pushWordTerm(parsedElements, term, index, text)
+          c = text[index]
+          if (c !== " " && c !== "\n") {
+            term = ""
+            continue
+          }
         }
         parsedElements.push(c)
         term = ""
@@ -272,7 +285,7 @@ function parseJavaScript(text) {
         parsedElements.push(Span({ class: "function-name" }, term))
         isFunctionDeclaration = false
       }
-      parsedElements.push(Span({ class: "opening-parentheses" }, c))
+      parsedElements.push(c)
       term = ""
       index += 1
     } else if (c === ",") {
@@ -286,7 +299,7 @@ function parseJavaScript(text) {
       if (term.length > 0) {
         pushWordTerm(parsedElements, term, index, text)
       }
-      parsedElements.push(Span({ class: "closing-parentheses" }, c))
+      parsedElements.push(c)
       term = ""
       index += 1
     } else if (c === "{") {

package/README.md

@@ -1,2 +1,88 @@
 # ArcheHighlight
-Syntax highlighting for [vanilla microfrontends](https://arche.gallery/).
+Syntax highlighting for [vanilla microfrontends](https://arche.gallery/). Converts JavaScript code into a React Element or HTML.
+
+```javascript
+const ReactElement = Arche(React)
+window.Span = ReactElement.Span
+
+const code = `
+function f() {
+  const x = 1
+}
+
+f()
+`
+
+ArcheHighlight.parseJavaScript(code)
+// '<span class="function-keyword">function</span>',
+// ' ',
+// '<span class="function-name">f</span>',
+// ' ',
+// '(',
+// ')',
+// ' ',
+// '{',
+// '\n',
+// ' ',
+// ' ',
+// '<span class="variable-declaration-keyword">const</span>',
+// ' ',
+// 'x',
+// ' ',
+// '<span class="operator">=</span>',
+// ' ',
+// '<span class="number">1</span>',
+// '\n',
+// '}',
+// '\n',
+// '\n',
+// '<span class="function-name">f</span>',
+// '(',
+// ')',
+// '\n',
+```
+
+## React Element or HTML
+ArcheHighlight requires a special `Span` function to exist globally on the `globalThis` object on the server or on the `window` object in browsers. The global `Span` function can be from `ReactElement`, which is created from `Arche` and `React`.
+```
+const ReactElement = Arche(React)
+window.Span = ReactElement.Span
+```
+
+`React` can be the [React](https://react.dev/) library or a server-side polyfill of React. [ArcheHTML](https://github.com/richytong/ArcheHTML) comes installed with a `React` polyfill for server-side rendering.
+
+## Docs
+```coffeescript [specscript]
+ArcheHighlight.parseJavaScript(code string) -> parsed string|object
+```
+ArcheHighlight JavaScript parser. Parses code into a React Element or HTML with JavaScript classes.
+
+Arguments:
+  * `code` - `string` - the JavaScript code to highlight.
+
+Return:
+  * `parsed` - `string|object` - a React Element or HTML with JavaScript classes.
+
+### JavaScript Classes
+The following JavaScript classes are added to the code as `span` elements of the parsed React Element or HTML:
+  * `comment` - single line (`//`) or multi-line comments (`/* */`)
+  * `number` - numbers, for example `1`, `0`, `2.5`, `-1`, `100`
+  * `string` - strings, for example `"a"`, `'a'`, `"This is a string."`
+  * `template-literal` - template literals, for example `\`This is a${x} ${y} literal\``
+  * `template-variable` - variables in template literals, for example the `${x}` and `${y}` in the template literal above.
+  * `bigint` - JavaScript BigInts, for example `2n`.
+  * `variable-declaration-keyword` - `var`, `const`, `let`
+  * `keyword` - `import`, `new`, `async`, `await`, `for`, `while`, `of`
+  * `function-keyword` - the `function` keyword for function declarations, for example `function f() {}`
+  * `arrow-function-operator` - the arrow function operator `=>` for arrow function declarations, for example `const fn = () => {}`
+  * `function-name` - the name of a function, either in a function declaration or as the function of a function call, for example in `function f() {}`, `f` would have a `function-name` class, and in `add(1, 2)`, `add` would have a `function-name` class.
+  * `operator` - the JavaScript operators `+`, `-`, `*`, `/`, `**`, `=`, `+=`, `++`, `-=`, `*=`, `/=`, `**=`, `==`, `===`, `!=`, `!==`, `>`, `>=`, `<`, `<=`, `?`, `:`, `&&`, `||`, `??`, `&`, `|`, `^`, `~`, `>>`, `<<`, `&=`, `|=`, and `^=`.
+
+  * `object-colon`
+  * `property-accessor`
+  * `spread-operator`
+  * `global-object` - global objects and functions: `process`, `require`, `console`, `window`, `global`, `globalThis`, `isNaN`
+  * `undefined` - the `undefined` value
+  * `null` - the `null` object
+  * `boolean` - booleans `true` and `false`
+  * `not-a-number` - the special numeric value `NaN` that represents an undefined or unrepresentable number, for example `0 / 0`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "arche-highlight",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "description": "Syntax highlighting for vanilla microfrontends",
   "author": "Richard Tong",
   "license": "CFOSS",