arche-highlight 0.4.1 → 0.5.0

package/ArcheHighlight.es.js

@@ -12,11 +12,6 @@ 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, 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") {
@@ -290,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 === ",") {
@@ -304,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,11 +18,6 @@ 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, 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") {
@@ -296,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 === ",") {
@@ -310,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,11 +12,6 @@ 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, 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") {
@@ -290,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 === ",") {
@@ -304,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.4.1",
+  "version": "0.5.0",
   "description": "Syntax highlighting for vanilla microfrontends",
   "author": "Richard Tong",
   "license": "CFOSS",