reslop 0.1.2 → 0.1.3

package/lib/highlight.js

@@ -546,7 +546,7 @@ const highlightTemplate = (source, i, highlightExpr) => {
       emit(parts, 'interpolation', '${');
       j += 2;
       const interp = readTemplateInterp(source, j);
-      const inner = highlightExpr(interp.expr, false);
+      const inner = highlightExpr(interp.expr);
       for (const t of inner) parts.push(t);
       j = interp.end;
       if (source[j] === '}') {
@@ -562,7 +562,149 @@ const highlightTemplate = (source, i, highlightExpr) => {
   return { tokens: parts, end: j };
 };
 
-const highlightJsFamily = (source, ts = false) => {
+const isJsxTagStart = (source, i) => {
+  if (source[i] !== '<') return false;
+  if (i > 0 && /[A-Za-z0-9_$]/.test(source[i - 1])) return false;
+  const next = source[i + 1];
+  if (next === '>' || next === '/') return true;
+  if (!/[A-Za-z_$]/.test(next || '')) return false;
+  let j = i + 1;
+  while (j < source.length && /[A-Za-z0-9_$.:-]/.test(source[j])) j += 1;
+  const after = source[skipWs(source, j)];
+  if (after === '>' || after === '/' || after === '{') return true;
+  return /[A-Za-z_$]/.test(after || '');
+};
+
+const jsxNameStyle = (name) => {
+  if (/^[A-Z]/.test(name) || name.includes('.')) return 'className';
+  return 'tag';
+};
+
+const readJsxName = (source, i) => {
+  let j = i;
+  while (j < source.length && /[A-Za-z0-9_$.:-]/.test(source[j])) j += 1;
+  return { text: source.slice(i, j), end: j };
+};
+
+const highlightJsxExpr = (source, i, inner) => {
+  const out = [];
+  emit(out, 'interpolation', '{');
+  const interp = readTemplateInterp(source, i + 1);
+  const tokens = inner(interp.expr);
+  for (const t of tokens) out.push(t);
+  let end = interp.end;
+  if (source[end] === '}') {
+    emit(out, 'interpolation', '}');
+    end += 1;
+  }
+  return { tokens: out, end };
+};
+
+const highlightJsxTagTail = (source, i, inner, out) => {
+  const n = source.length;
+  let selfClosing = false;
+  while (i < n) {
+    const ch = source[i];
+    if (ch === '>') {
+      emit(out, 'punct', '>');
+      i += 1;
+      break;
+    }
+    if (ch === '/' && source[i + 1] === '>') {
+      emit(out, 'punct', '/>');
+      i += 2;
+      selfClosing = true;
+      break;
+    }
+    if (/\s/.test(ch)) {
+      emit(out, 'plain', ch);
+      i += 1;
+      continue;
+    }
+    if (ch === '{') {
+      const expr = highlightJsxExpr(source, i, inner);
+      for (const t of expr.tokens) out.push(t);
+      i = expr.end;
+      continue;
+    }
+    if (QUOTES.includes(ch)) {
+      const { text, end } = readString(source, i);
+      emit(out, 'string', text);
+      i = end;
+      continue;
+    }
+    if (ch === '=') {
+      emit(out, 'punct', '=');
+      i += 1;
+      continue;
+    }
+    if (/[A-Za-z_$]/.test(ch)) {
+      const { text, end } = readJsxName(source, i);
+      emit(out, 'attr', text);
+      i = end;
+      continue;
+    }
+    emit(out, 'punct', ch);
+    i += 1;
+  }
+  return { end: i, selfClosing };
+};
+
+const highlightJsxElement = (source, i, inner) => {
+  const out = [];
+  const n = source.length;
+  emit(out, 'punct', '<');
+  i += 1;
+  let closing = false;
+  if (source[i] === '/') {
+    emit(out, 'punct', '/');
+    i += 1;
+    closing = true;
+  }
+  const nameRead = readJsxName(source, i);
+  const name = nameRead.text;
+  if (name) {
+    emit(out, jsxNameStyle(name), name);
+    i = nameRead.end;
+  }
+  const tail = highlightJsxTagTail(source, i, inner, out);
+  i = tail.end;
+  if (closing || tail.selfClosing) return { tokens: out, end: i };
+  while (i < n) {
+    if (source.startsWith('</', i)) {
+      const close = highlightJsxElement(source, i, inner);
+      for (const t of close.tokens) out.push(t);
+      return { tokens: out, end: close.end };
+    }
+    if (source[i] === '{') {
+      const expr = highlightJsxExpr(source, i, inner);
+      for (const t of expr.tokens) out.push(t);
+      i = expr.end;
+      continue;
+    }
+    if (source[i] === '<' && isJsxTagStart(source, i)) {
+      const child = highlightJsxElement(source, i, inner);
+      for (const t of child.tokens) out.push(t);
+      i = child.end;
+      continue;
+    }
+    let j = i;
+    while (j < n && source[j] !== '<' && source[j] !== '{') j += 1;
+    if (j === i) {
+      emit(out, 'plain', source[i]);
+      i += 1;
+      continue;
+    }
+    emit(out, 'plain', source.slice(i, j));
+    i = j;
+  }
+  return { tokens: out, end: i };
+};
+
+const highlightJsFamily = (source, options = {}) => {
+  const ts = options.ts === true;
+  const jsx = options.jsx === true;
+  const inner = (expr) => highlightJsFamily(expr, options);
   const out = [];
   let i = 0;
   const n = source.length;
@@ -587,7 +729,7 @@ const highlightJsFamily = (source, ts = false) => {
     }
 
     if (ch === '`') {
-      const r = highlightTemplate(source, i, highlightJsFamily);
+      const r = highlightTemplate(source, i, inner);
       for (const t of r.tokens) out.push(t);
       i = r.end;
       continue;
@@ -636,6 +778,14 @@ const highlightJsFamily = (source, ts = false) => {
       continue;
     }
 
+    if (jsx && ch === '<' && isJsxTagStart(source, i)) {
+      const node = highlightJsxElement(source, i, inner);
+      for (const t of node.tokens) out.push(t);
+      i = node.end;
+      expectName = null;
+      continue;
+    }
+
     if (/[=<>!+\-*/%&|^~?:]/.test(ch)) {
       const { text, end } = readJsOperator(source, i);
       emit(out, 'operator', text);
@@ -1136,13 +1286,18 @@ const highlightTxt = (source) => {
   return out;
 };
 
-const highlightJs = (source) => highlightJsFamily(source, false);
-const highlightTs = (source) => highlightJsFamily(source, true);
+const highlightJs = (source) => highlightJsFamily(source, {});
+const highlightTs = (source) => highlightJsFamily(source, { ts: true });
+const highlightJsx = (source) => highlightJsFamily(source, { jsx: true });
+const highlightTsx = (source) =>
+  highlightJsFamily(source, { ts: true, jsx: true });
 
 const HIGHLIGHTERS = {
   js: highlightJs,
   mjs: highlightJs,
   ts: highlightTs,
+  jsx: highlightJsx,
+  tsx: highlightTsx,
   json: highlightJson,
   css: highlightCss,
   html: highlightHtml,

package/lib/keys.js

@@ -4,8 +4,8 @@ const ACTIONS = {
   add: { keys: ['a'], label: 'Add' },
   unstage: { keys: ['u'], label: 'Unstage' },
   revert: { keys: ['r'], label: 'Revert' },
-  prev: { keys: ['left', 'p'], hot: '←', label: 'Prev' },
-  next: { keys: ['right', 'n'], hot: '→', label: 'Next' },
+  prev: { keys: ['left', 'p', 'k'], hot: '←', label: 'Prev' },
+  next: { keys: ['right', 'n', 'j'], hot: '→', label: 'Next' },
   layout: { keys: ['m'], label: 'Mode' },
   files: { keys: ['l'], label: 'Files' },
   feedback: { keys: ['f'], label: 'Feedback' },
@@ -19,6 +19,12 @@ const FILES_DISABLED = ['layout', 'feedback'];
 const SCROLL = {
   up: 'scrollUp',
   down: 'scrollDown',
+  'ctrl-y': 'scrollUp',
+  'ctrl-e': 'scrollDown',
+  'ctrl-b': 'pageUp',
+  'ctrl-f': 'pageDown',
+  'ctrl-u': 'halfUp',
+  'ctrl-d': 'halfDown',
   enter: 'open',
   backspace: 'removeTodo',
   delete: 'removeTodo',

package/lib/render.js

@@ -103,6 +103,16 @@ const FILE_STATUS_FG = {
   partial: THEME.warnFg,
 };
 
+const FILE_COL_KEYS = ['add', 'del', 'status', 'n', 'm'];
+
+const FILE_COL_ALIGN = {
+  add: 'start',
+  del: 'start',
+  status: 'start',
+  n: 'start',
+  m: 'end',
+};
+
 const INFO_STATUS = [
   'copied',
   'staged',
@@ -575,23 +585,36 @@ const paintStatusLine = (view, status, width, color) => {
   );
 };
 
+const signedCount = (sign, n) => `${sign}${n ?? 0}`;
+
+const fileRowFields = (entry) => {
+  const { added, removed, staged, remaining } = entry;
+  const add = signedCount('+', added);
+  const del = signedCount('-', removed);
+  const status = entry.status ?? '';
+  const n = `${staged ?? 0}`;
+  const m = `${remaining ?? 0}`;
+  return { add, del, status, n, m };
+};
+
 const fileColumns = (files) => {
-  let statusW = 0;
-  let countW = 0;
+  const widths = {};
+  for (const key of FILE_COL_KEYS) widths[key] = 0;
   for (const entry of files) {
-    const status = entry.status ?? '';
-    const count = `${entry.remaining ?? 0}`;
-    const sw = visibleWidth(status);
-    const cw = visibleWidth(count);
-    if (sw > statusW) statusW = sw;
-    if (cw > countW) countW = cw;
+    const fields = fileRowFields(entry);
+    for (const key of FILE_COL_KEYS) {
+      const w = visibleWidth(fields[key]);
+      if (w > widths[key]) widths[key] = w;
+    }
   }
-  return { statusW, countW };
+  return widths;
 };
 
-const padStartVisible = (text, width) => {
+const padVisible = (text, width, align) => {
   const n = Math.max(0, width - visibleWidth(text));
-  return `${' '.repeat(n)}${text}`;
+  const gap = ' '.repeat(n);
+  if (align === 'end') return `${text}${gap}`;
+  return `${gap}${text}`;
 };
 
 const fileRowFg = (status, selected) => {
@@ -601,25 +624,55 @@ const fileRowFg = (status, selected) => {
   return THEME.mutedFg;
 };
 
+const fileRowParts = (entry, cols) => {
+  const fields = fileRowFields(entry);
+  const parts = {};
+  for (const key of FILE_COL_KEYS) {
+    const width = cols?.[key] ?? visibleWidth(fields[key]);
+    const align = FILE_COL_ALIGN[key];
+    parts[key] = padVisible(fields[key], width, align);
+  }
+  return parts;
+};
+
+const joinFileSuffix = (parts) => {
+  const { add, del, status, n, m } = parts;
+  return `  ${add}  ${del}  ${status}  ${n}/${m}`;
+};
+
+const paintFileSuffix = (parts, fgRgb, bgRgb, color) => {
+  const { add, del, status, n, m } = parts;
+  const gap = paint('  ', fgRgb, bgRgb, color);
+  const addText = paint(add, THEME.addLineFg, bgRgb, color);
+  const delText = paint(del, THEME.delLineFg, bgRgb, color);
+  const statusText = paint(status, fgRgb, bgRgb, color);
+  const nText = paint(n, fgRgb, bgRgb, color);
+  const slash = paint('/', fgRgb, bgRgb, color);
+  const mText = paint(m, fgRgb, bgRgb, color);
+  const counts = addText + gap + delText;
+  const meta = statusText + gap + nText + slash + mText;
+  return gap + counts + gap + meta;
+};
+
 const paintFileRow = (entry, width, color, selected, cols) => {
   const inner = Math.max(1, width - 1);
   const mark = selected ? FILE_MARK : ' ';
   const prefix = ` ${mark} `;
-  const status = entry.status ?? '';
-  const count = `${entry.remaining ?? 0}`;
-  const statusW = cols?.statusW ?? visibleWidth(status);
-  const countW = cols?.countW ?? visibleWidth(count);
-  const statusCol = padStartVisible(status, statusW);
-  const countCol = padStartVisible(count, countW);
-  const suffix = `  ${statusCol}  ${countCol}`;
+  const parts = fileRowParts(entry, cols);
+  const suffix = joinFileSuffix(parts);
   const pathW = Math.max(1, inner - visibleWidth(prefix + suffix));
-  const clipped = truncateVisible(entry.path, pathW);
+  const { path, status } = entry;
+  const clipped = truncateVisible(path, pathW);
   const pad = Math.max(0, pathW - visibleWidth(clipped));
-  const line = `${prefix}${clipped}${' '.repeat(pad)}${suffix}`;
+  const left = `${prefix}${clipped}${' '.repeat(pad)}`;
   const fgRgb = fileRowFg(status, selected);
   const bgRgb = selected ? THEME.buttonBg : THEME.ctxBg;
-  const row = paintBar(line, inner, fgRgb, bgRgb, color);
-  return row + fill(1, fgRgb, bgRgb, color);
+  const edge = fill(1, fgRgb, bgRgb, color);
+  if (!color) return `${left}${suffix}${edge}`;
+  let out = `${seq(fgRgb, bgRgb)}${EL}`;
+  out += paint(left, fgRgb, bgRgb, color);
+  out += paintFileSuffix(parts, fgRgb, bgRgb, color);
+  return out + edge;
 };
 
 const todoInnerWidth = (width) => Math.max(1, width - 2);
@@ -950,7 +1003,7 @@ const stackFrame = (view, width, color, rows, layout, windowed, notes) => {
   return overlayRows(rows, view.selection);
 };
 
-const frameResult = (text, painted, layout, windowed, hits) => {
+const frameResult = (text, painted, layout, windowed, hits, bodyH) => {
   const fileHits = windowed.fileHits;
   const todoHits = windowed.todoHits;
   const templateHits = hits.templateHits;
@@ -968,6 +1021,7 @@ const frameResult = (text, painted, layout, windowed, hits) => {
     height: painted.length,
     scroll,
     cursor,
+    bodyH,
   };
 };
 
@@ -999,7 +1053,7 @@ const renderFrame = (view, options = {}) => {
     notes.noteCursor,
     bodyH,
   );
-  return frameResult(text, painted, layout, windowed, hits);
+  return frameResult(text, painted, layout, windowed, hits, bodyH);
 };
 
 const presentCursor = (cursor) => {