@ape-egg/codie 0.1.1 → 0.1.3

package/codie.js

@@ -61,7 +61,7 @@ const highlight = (code, modes, options = {}) => {
   if (!modes.html) {
     if (modes.json) return highlightJSON(escaped);
     if (modes.css) return highlightCSS(escaped);
-    if (modes.js) return highlightJS(escaped);
+    if (modes.js) return highlightJSRaw(code);
     return escaped;
   }
 

package/constants.js

@@ -53,6 +53,7 @@ export const CLASS = {
   CSS_VALUE: 'codie-css-value',
 
   // Syntax tokens - JS
+  COMMAND: 'codie-command',
   JS_KEYWORD: 'codie-js-keyword',
   JS_IMPORT: 'codie-js-import',
   JS_STRING: 'codie-js-string',

package/format.js

@@ -12,12 +12,13 @@ export const dedent = str => {
 
 // Clean up boolean attributes for non-value attributes:
 // attr="" → attr, attr="true" → attr, attr="false" → (removed)
+// Vibe name bindings (@[expr]) count as attribute names too.
 export const cleanupBooleanAttrs = html =>
   html
-    .replace(/ ([\w-]+)="(?:true|)"/g, (match, attr) =>
+    .replace(/ ([\w-]+|@\[[^\]]+\])="(?:true|)"/g, (match, attr) =>
       VALUE_ATTRS.has(attr) ? match : ` ${attr}`
     )
-    .replace(/ ([\w-]+)="false"/g, (match, attr) =>
+    .replace(/ ([\w-]+|@\[[^\]]+\])="false"/g, (match, attr) =>
       VALUE_ATTRS.has(attr) ? match : ''
     )
 

package/highlight-js.css

@@ -1,5 +1,9 @@
 /* Codie JavaScript syntax highlighting */
 
+[codie] .codie-command {
+  color: var(--codie-js-ident);
+}
+
 [codie] .codie-js-keyword {
   color: var(--codie-js-keyword);
 }

package/highlight.js

@@ -44,7 +44,7 @@ const highlightCommentVariables = (content) => {
 export const highlightJS = (code, options = {}) => {
   const tokens = [];
   const tokenRegex =
-    /(@\[([^\]]+)\])|("(?:[^&]|&(?!quot;))*?")|('(?:[^'\\]|\\.)*')|(`(?:[^`\\]|\\.)*`)|(\/\/[^\n]*)|(\/\*[\s\S]*?\*\/)|(\$\.([a-zA-Z_][a-zA-Z0-9_]*))|(\b\d+\.?\d*\b)|(\b[a-zA-Z_][a-zA-Z0-9_]*\b)|([^\s])/g;
+    /(@\[([^\]]+)\])|(&quot;(?:[^&]|&(?!quot;))*?&quot;)|('(?:[^'\\]|\\.)*')|(`(?:[^`\\]|\\.)*`)|((?<=^|\s)(?:\/\/|#)[^\n]*)|(\/\*[\s\S]*?\*\/)|(\$\.([a-zA-Z_][a-zA-Z0-9_]*))|(\b\d[\d_]*(?:\.[\d_]+)?\b)|(\b[a-zA-Z_][a-zA-Z0-9_]*\b)|([^\s])/g;
   let match,
     lastIndex = 0;
 
@@ -112,8 +112,10 @@ export const highlightJS = (code, options = {}) => {
 // JavaScript highlighter for raw (unescaped) content
 export const highlightJSRaw = (code) => {
   const tokens = [];
+  // A command line: a bare lowercase word then arguments, on one full row — no JS
+  // keyword lead, no assignment/call/statement characters, no trailing continuation \
   const tokenRegex =
-    /(<\/?[a-zA-Z][a-zA-Z0-9-]*(?:\s+[^>]*)?>)|("(?:[^"\\]|\\.)*")|('(?:[^'\\]|\\.)*')|(`(?:[^`\\]|\\.)*`)|(\/\/[^\n]*)|(\/\*[\s\S]*?\*\/)|(\$\.([a-zA-Z_][a-zA-Z0-9_]*))|(\b\d+\.?\d*\b)|(\b[a-zA-Z_][a-zA-Z0-9_]*\b)|([^\s])/g;
+    /(^[ \t]*(?!(?:import|export|const|let|var|return|await|async|function|if|else|for|while|new|typeof|throw)\b)[a-z][\w.-]*[ \t]+[^\n=(){};]*[^\n\\=(){};])$|(<\/?[a-zA-Z][a-zA-Z0-9-]*(?:\s+[^>]*)?>)|("(?:[^"\\]|\\.)*")|('(?:[^'\\]|\\.)*')|(`(?:[^`\\]|\\.)*`)|((?<=^|\s)(?:\/\/|#)[^\n]*)|(\/\*[\s\S]*?\*\/)|(\$\.([a-zA-Z_][a-zA-Z0-9_]*))|(\b\d[\d_]*(?:\.[\d_]+)?\b)|(\b[a-zA-Z_][a-zA-Z0-9_]*\b)|([^\s])/gm;
   let match,
     lastIndex = 0;
 
@@ -122,6 +124,7 @@ export const highlightJSRaw = (code) => {
 
     const [
       full,
+      commandLine,
       htmlTag,
       dblStr,
       sglStr,
@@ -136,7 +139,9 @@ export const highlightJSRaw = (code) => {
     ] = match;
     const escaped = escapeHTML(full);
 
-    if (htmlTag) {
+    if (commandLine) {
+      tokens.push(span(CLASS.COMMAND, escaped));
+    } else if (htmlTag) {
       const tagMatch = full.match(/^(<\/?)([a-zA-Z][a-zA-Z0-9-]*)([\s\S]*?)(>)$/);
       if (tagMatch) {
         const [, open, tagName, attrs, close] = tagMatch;
@@ -196,7 +201,7 @@ export const highlightJSRaw = (code) => {
 // CSS highlighter
 export const highlightCSS = (code, options = {}) => {
   let result = '';
-  const ruleRegex = /(\/\*[\s\S]*?\*\/)|([^{}]+)(\{)([^}]*)(\})/g;
+  const ruleRegex = /(\/\*[\s\S]*?\*\/)|((?:[^{}\/]|\/(?!\*))+)(\{)([^}]*)(\})/g;
   let match,
     lastIndex = 0;
 
@@ -324,21 +329,25 @@ export const highlightHTML = (
     span(CLASS.COMMENT, `&lt;!--${highlightCommentVariables(content)}--&gt;`),
   );
 
-  // HTML tags with attributes
+  // HTML tags with attributes (attribute names can be @[...] name bindings)
   highlighted = highlighted.replace(
-    /(&lt;\/?)([a-zA-Z0-9\-]+)((?:\s+[a-zA-Z0-9\-:]+(?:=(?:&quot;(?:(?!&quot;).)*?&quot;|'[^']*'|[^\s&gt;]+))?)*\s*)(\/?\s*&gt;)/gs,
+    /(&lt;\/?)([a-zA-Z0-9\-]+)((?:\s+(?:[a-zA-Z0-9\-:]+|@\[[^\]]+\])(?:=(?:&quot;(?:(?!&quot;).)*?&quot;|'[^']*'|[^\s&gt;]+))?)*\s*)(\/?\s*&gt;)/gs,
     (fullMatch, open, tag, attrs, close) => {
       let result = span(CLASS.PUNCTUATION, open) + span(CLASS.TAG, tag);
 
       if (attrs) {
         if (attrs.trim()) {
           const attrRegex =
-            /([a-zA-Z0-9\-:]+)(=(?:&quot;((?:(?!&quot;).)*?)&quot;|'([^']*)'|([^\s&gt;]+)))?/gs;
+            /([a-zA-Z0-9\-:]+|@\[[^\]]+\])(=(?:&quot;((?:(?!&quot;).)*?)&quot;|'([^']*)'|([^\s&gt;]+)))?/gs;
           let attrMatch,
             last = 0;
 
           while ((attrMatch = attrRegex.exec(attrs)) !== null) {
-            result += attrs.substring(last, attrMatch.index) + span(CLASS.ATTR_NAME, attrMatch[1]);
+            result +=
+              attrs.substring(last, attrMatch.index) +
+              (attrMatch[1].startsWith('@[')
+                ? highlightBindings(attrMatch[1])
+                : span(CLASS.ATTR_NAME, attrMatch[1]));
 
             if (attrMatch[2]) {
               result += span(CLASS.PUNCTUATION, '=');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ape-egg/codie",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Modular code display and editing package",
   "type": "module",
   "main": "codie.js",
@@ -21,6 +21,9 @@
     "syntax-highlighting",
     "code-display"
   ],
-  "author": "kortes",
-  "license": "MIT"
+  "author": "kkortes",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public"
+  }
 }

package/structure.css

@@ -5,7 +5,7 @@
   display: grid;
   position: relative;
   width: 100%;
-  font-size: inherit;
+  font-size: var(--unit-size, inherit);
   line-height: 1.5;
   font-family:
     'Geist Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New',
@@ -50,6 +50,9 @@
   min-height: 100%;
   border: none;
   outline: none;
+  box-shadow: none;
+  border-radius: 0;
+  background: none;
   resize: none;
   overflow: hidden;
   color: transparent;