github-mobile-reader 0.1.1 → 0.1.2

package/dist/index.js

@@ -21,12 +21,21 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   Priority: () => Priority,
+  extractClassName: () => extractClassName,
+  extractJSXComponentName: () => extractJSXComponentName,
   filterDiffLines: () => filterDiffLines,
   generateReaderMarkdown: () => generateReaderMarkdown,
+  hasJSXContent: () => hasJSXContent,
+  isClassNameOnlyLine: () => isClassNameOnlyLine,
+  isJSXElement: () => isJSXElement,
+  isJSXFile: () => isJSXFile,
   normalizeCode: () => normalizeCode,
+  parseClassNameChanges: () => parseClassNameChanges,
   parseDiffToLogicalFlow: () => parseDiffToLogicalFlow,
+  parseJSXToFlowTree: () => parseJSXToFlowTree,
   parseToFlowTree: () => parseToFlowTree,
-  renderFlowTree: () => renderFlowTree
+  renderFlowTree: () => renderFlowTree,
+  renderStyleChanges: () => renderStyleChanges
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -39,6 +48,131 @@ var Priority = /* @__PURE__ */ ((Priority2) => {
   Priority2[Priority2["OTHER"] = 5] = "OTHER";
   return Priority2;
 })(Priority || {});
+function isJSXFile(filename) {
+  return /\.(jsx|tsx)$/.test(filename);
+}
+function hasJSXContent(lines) {
+  return lines.some((l) => /<[A-Z][A-Za-z]*[\s/>]/.test(l) || /return\s*\(/.test(l));
+}
+function isClassNameOnlyLine(line) {
+  return /^className=/.test(line.trim());
+}
+function extractClassName(line) {
+  const staticMatch = line.match(/className="([^"]*)"/);
+  if (staticMatch) return staticMatch[1];
+  const ternaryMatch = line.match(/className=\{[^?]+\?\s*"([^"]*)"\s*:\s*"([^"]*)"\}/);
+  if (ternaryMatch) return `${ternaryMatch[1]} ${ternaryMatch[2]}`;
+  const templateMatch = line.match(/className=\{`([^`]*)`\}/);
+  if (templateMatch) {
+    const raw = templateMatch[1];
+    const literals = raw.replace(/\$\{[^}]*\}/g, " ").trim();
+    const exprStrings = [...raw.matchAll(/"([^"]*)"/g)].map((m) => m[1]);
+    return [literals, ...exprStrings].filter(Boolean).join(" ");
+  }
+  return null;
+}
+function extractComponentFromLine(line) {
+  const tagMatch = line.match(/<([A-Za-z][A-Za-z0-9.]*)/);
+  if (tagMatch) return tagMatch[1];
+  return "unknown";
+}
+function parseClassNameChanges(addedLines, removedLines) {
+  const componentMap = /* @__PURE__ */ new Map();
+  for (const line of addedLines.filter((l) => /className=/.test(l))) {
+    const cls = extractClassName(line);
+    const comp = extractComponentFromLine(line);
+    if (!cls) continue;
+    if (!componentMap.has(comp)) componentMap.set(comp, { added: /* @__PURE__ */ new Set(), removed: /* @__PURE__ */ new Set() });
+    cls.split(/\s+/).filter(Boolean).forEach((c) => componentMap.get(comp).added.add(c));
+  }
+  for (const line of removedLines.filter((l) => /className=/.test(l))) {
+    const cls = extractClassName(line);
+    const comp = extractComponentFromLine(line);
+    if (!cls) continue;
+    if (!componentMap.has(comp)) componentMap.set(comp, { added: /* @__PURE__ */ new Set(), removed: /* @__PURE__ */ new Set() });
+    cls.split(/\s+/).filter(Boolean).forEach((c) => componentMap.get(comp).removed.add(c));
+  }
+  const changes = [];
+  for (const [comp, { added, removed }] of componentMap) {
+    const pureAdded = [...added].filter((c) => !removed.has(c));
+    const pureRemoved = [...removed].filter((c) => !added.has(c));
+    if (pureAdded.length === 0 && pureRemoved.length === 0) continue;
+    changes.push({ component: comp, added: pureAdded, removed: pureRemoved });
+  }
+  return changes;
+}
+function renderStyleChanges(changes) {
+  const lines = [];
+  for (const change of changes) {
+    lines.push(`**${change.component}**`);
+    if (change.added.length > 0) lines.push(`  + ${change.added.join("  ")}`);
+    if (change.removed.length > 0) lines.push(`  - ${change.removed.join("  ")}`);
+  }
+  return lines;
+}
+function isJSXElement(line) {
+  const t = line.trim();
+  return /^<[A-Za-z]/.test(t) || /^<\/[A-Za-z]/.test(t);
+}
+function isJSXClosing(line) {
+  return /^<\/[A-Za-z]/.test(line.trim());
+}
+function isJSXSelfClosing(line) {
+  return /\/>[\s]*$/.test(line.trim());
+}
+function extractJSXComponentName(line) {
+  const trimmed = line.trim();
+  const closingMatch = trimmed.match(/^<\/([A-Za-z][A-Za-z0-9.]*)/);
+  if (closingMatch) return `/${closingMatch[1]}`;
+  const nameMatch = trimmed.match(/^<([A-Za-z][A-Za-z0-9.]*)/);
+  if (!nameMatch) return trimmed;
+  const name = nameMatch[1];
+  const eventProps = [];
+  for (const m of trimmed.matchAll(/\b(on[A-Z]\w+)=/g)) {
+    eventProps.push(m[1]);
+  }
+  return eventProps.length > 0 ? `${name}(${eventProps.join(", ")})` : name;
+}
+function shouldIgnoreJSX(line) {
+  const t = line.trim();
+  return isClassNameOnlyLine(t) || /^style=/.test(t) || /^aria-/.test(t) || /^data-/.test(t) || /^strokeLinecap=/.test(t) || /^strokeLinejoin=/.test(t) || /^strokeWidth=/.test(t) || /^viewBox=/.test(t) || /^fill=/.test(t) || /^stroke=/.test(t) || /^d="/.test(t) || t === "{" || t === "}" || t === "(" || t === ")" || t === "<>" || t === "</>" || /^\{\/\*/.test(t);
+}
+function parseJSXToFlowTree(lines) {
+  const roots = [];
+  const stack = [];
+  for (const line of lines) {
+    if (!isJSXElement(line)) continue;
+    if (shouldIgnoreJSX(line)) continue;
+    const depth = getIndentDepth(line);
+    if (isJSXClosing(line)) {
+      while (stack.length > 0 && stack[stack.length - 1].depth >= depth) {
+        stack.pop();
+      }
+      continue;
+    }
+    const name = extractJSXComponentName(line);
+    const selfClosing = isJSXSelfClosing(line);
+    const node = {
+      type: "call",
+      name,
+      children: [],
+      depth,
+      priority: 5 /* OTHER */
+    };
+    while (stack.length > 0 && stack[stack.length - 1].depth >= depth) {
+      stack.pop();
+    }
+    if (stack.length === 0) {
+      roots.push(node);
+    } else {
+      stack[stack.length - 1].node.children.push(node);
+    }
+    if (!selfClosing) {
+      stack.push({ node, depth });
+    }
+  }
+  return roots;
+}
 function filterDiffLines(diffText) {
   const lines = diffText.split("\n");
   const added = lines.filter((l) => l.startsWith("+") && !l.startsWith("+++") && l.trim() !== "+").map((l) => l.substring(1));
@@ -223,8 +357,20 @@ function parseDiffToLogicalFlow(diffText) {
   };
 }
 function generateReaderMarkdown(diffText, meta = {}) {
-  const result = parseDiffToLogicalFlow(diffText);
+  const { added, removed } = filterDiffLines(diffText);
+  const isJSX = Boolean(
+    meta.file && isJSXFile(meta.file) || hasJSXContent(added)
+  );
+  const addedForFlow = isJSX ? added.filter((l) => !isClassNameOnlyLine(l)) : added;
+  const normalizedAdded = normalizeCode(addedForFlow);
+  const flowTree = parseToFlowTree(normalizedAdded);
+  const rawCode = addedForFlow.join("\n");
+  const removedForCode = isJSX ? removed.filter((l) => !isClassNameOnlyLine(l)) : removed;
+  const removedCode = removedForCode.join("\n");
+  const classNameChanges = isJSX ? parseClassNameChanges(added, removed) : [];
+  const jsxTree = isJSX ? parseJSXToFlowTree(added) : [];
   const sections = [];
+  const lang = isJSX ? "tsx" : "typescript";
   sections.push("# \u{1F4D6} GitHub Reader View\n");
   sections.push("> Generated by **github-mobile-reader**");
   if (meta.repo) sections.push(`> Repository: ${meta.repo}`);
@@ -232,22 +378,33 @@ function generateReaderMarkdown(diffText, meta = {}) {
   if (meta.commit) sections.push(`> Commit: \`${meta.commit}\``);
   if (meta.file) sections.push(`> File: \`${meta.file}\``);
   sections.push("\n");
-  if (result.root.length > 0) {
+  if (flowTree.length > 0) {
     sections.push("## \u{1F9E0} Logical Flow\n");
     sections.push("```");
-    sections.push(...renderFlowTree(result.root));
+    sections.push(...renderFlowTree(flowTree));
     sections.push("```\n");
   }
-  if (result.rawCode.trim()) {
+  if (isJSX && jsxTree.length > 0) {
+    sections.push("## \u{1F3A8} JSX Structure\n");
+    sections.push("```");
+    sections.push(...renderFlowTree(jsxTree));
+    sections.push("```\n");
+  }
+  if (isJSX && classNameChanges.length > 0) {
+    sections.push("## \u{1F485} Style Changes\n");
+    sections.push(...renderStyleChanges(classNameChanges));
+    sections.push("");
+  }
+  if (rawCode.trim()) {
     sections.push("## \u2705 Added Code\n");
-    sections.push("```typescript");
-    sections.push(result.rawCode);
+    sections.push(`\`\`\`${lang}`);
+    sections.push(rawCode);
     sections.push("```\n");
   }
-  if (result.removedCode.trim()) {
+  if (removedCode.trim()) {
     sections.push("## \u274C Removed Code\n");
-    sections.push("```typescript");
-    sections.push(result.removedCode);
+    sections.push(`\`\`\`${lang}`);
+    sections.push(removedCode);
     sections.push("```\n");
   }
   sections.push("---");
@@ -257,10 +414,19 @@ function generateReaderMarkdown(diffText, meta = {}) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Priority,
+  extractClassName,
+  extractJSXComponentName,
   filterDiffLines,
   generateReaderMarkdown,
+  hasJSXContent,
+  isClassNameOnlyLine,
+  isJSXElement,
+  isJSXFile,
   normalizeCode,
+  parseClassNameChanges,
   parseDiffToLogicalFlow,
+  parseJSXToFlowTree,
   parseToFlowTree,
-  renderFlowTree
+  renderFlowTree,
+  renderStyleChanges
 });

package/dist/index.mjs

@@ -7,6 +7,131 @@ var Priority = /* @__PURE__ */ ((Priority2) => {
   Priority2[Priority2["OTHER"] = 5] = "OTHER";
   return Priority2;
 })(Priority || {});
+function isJSXFile(filename) {
+  return /\.(jsx|tsx)$/.test(filename);
+}
+function hasJSXContent(lines) {
+  return lines.some((l) => /<[A-Z][A-Za-z]*[\s/>]/.test(l) || /return\s*\(/.test(l));
+}
+function isClassNameOnlyLine(line) {
+  return /^className=/.test(line.trim());
+}
+function extractClassName(line) {
+  const staticMatch = line.match(/className="([^"]*)"/);
+  if (staticMatch) return staticMatch[1];
+  const ternaryMatch = line.match(/className=\{[^?]+\?\s*"([^"]*)"\s*:\s*"([^"]*)"\}/);
+  if (ternaryMatch) return `${ternaryMatch[1]} ${ternaryMatch[2]}`;
+  const templateMatch = line.match(/className=\{`([^`]*)`\}/);
+  if (templateMatch) {
+    const raw = templateMatch[1];
+    const literals = raw.replace(/\$\{[^}]*\}/g, " ").trim();
+    const exprStrings = [...raw.matchAll(/"([^"]*)"/g)].map((m) => m[1]);
+    return [literals, ...exprStrings].filter(Boolean).join(" ");
+  }
+  return null;
+}
+function extractComponentFromLine(line) {
+  const tagMatch = line.match(/<([A-Za-z][A-Za-z0-9.]*)/);
+  if (tagMatch) return tagMatch[1];
+  return "unknown";
+}
+function parseClassNameChanges(addedLines, removedLines) {
+  const componentMap = /* @__PURE__ */ new Map();
+  for (const line of addedLines.filter((l) => /className=/.test(l))) {
+    const cls = extractClassName(line);
+    const comp = extractComponentFromLine(line);
+    if (!cls) continue;
+    if (!componentMap.has(comp)) componentMap.set(comp, { added: /* @__PURE__ */ new Set(), removed: /* @__PURE__ */ new Set() });
+    cls.split(/\s+/).filter(Boolean).forEach((c) => componentMap.get(comp).added.add(c));
+  }
+  for (const line of removedLines.filter((l) => /className=/.test(l))) {
+    const cls = extractClassName(line);
+    const comp = extractComponentFromLine(line);
+    if (!cls) continue;
+    if (!componentMap.has(comp)) componentMap.set(comp, { added: /* @__PURE__ */ new Set(), removed: /* @__PURE__ */ new Set() });
+    cls.split(/\s+/).filter(Boolean).forEach((c) => componentMap.get(comp).removed.add(c));
+  }
+  const changes = [];
+  for (const [comp, { added, removed }] of componentMap) {
+    const pureAdded = [...added].filter((c) => !removed.has(c));
+    const pureRemoved = [...removed].filter((c) => !added.has(c));
+    if (pureAdded.length === 0 && pureRemoved.length === 0) continue;
+    changes.push({ component: comp, added: pureAdded, removed: pureRemoved });
+  }
+  return changes;
+}
+function renderStyleChanges(changes) {
+  const lines = [];
+  for (const change of changes) {
+    lines.push(`**${change.component}**`);
+    if (change.added.length > 0) lines.push(`  + ${change.added.join("  ")}`);
+    if (change.removed.length > 0) lines.push(`  - ${change.removed.join("  ")}`);
+  }
+  return lines;
+}
+function isJSXElement(line) {
+  const t = line.trim();
+  return /^<[A-Za-z]/.test(t) || /^<\/[A-Za-z]/.test(t);
+}
+function isJSXClosing(line) {
+  return /^<\/[A-Za-z]/.test(line.trim());
+}
+function isJSXSelfClosing(line) {
+  return /\/>[\s]*$/.test(line.trim());
+}
+function extractJSXComponentName(line) {
+  const trimmed = line.trim();
+  const closingMatch = trimmed.match(/^<\/([A-Za-z][A-Za-z0-9.]*)/);
+  if (closingMatch) return `/${closingMatch[1]}`;
+  const nameMatch = trimmed.match(/^<([A-Za-z][A-Za-z0-9.]*)/);
+  if (!nameMatch) return trimmed;
+  const name = nameMatch[1];
+  const eventProps = [];
+  for (const m of trimmed.matchAll(/\b(on[A-Z]\w+)=/g)) {
+    eventProps.push(m[1]);
+  }
+  return eventProps.length > 0 ? `${name}(${eventProps.join(", ")})` : name;
+}
+function shouldIgnoreJSX(line) {
+  const t = line.trim();
+  return isClassNameOnlyLine(t) || /^style=/.test(t) || /^aria-/.test(t) || /^data-/.test(t) || /^strokeLinecap=/.test(t) || /^strokeLinejoin=/.test(t) || /^strokeWidth=/.test(t) || /^viewBox=/.test(t) || /^fill=/.test(t) || /^stroke=/.test(t) || /^d="/.test(t) || t === "{" || t === "}" || t === "(" || t === ")" || t === "<>" || t === "</>" || /^\{\/\*/.test(t);
+}
+function parseJSXToFlowTree(lines) {
+  const roots = [];
+  const stack = [];
+  for (const line of lines) {
+    if (!isJSXElement(line)) continue;
+    if (shouldIgnoreJSX(line)) continue;
+    const depth = getIndentDepth(line);
+    if (isJSXClosing(line)) {
+      while (stack.length > 0 && stack[stack.length - 1].depth >= depth) {
+        stack.pop();
+      }
+      continue;
+    }
+    const name = extractJSXComponentName(line);
+    const selfClosing = isJSXSelfClosing(line);
+    const node = {
+      type: "call",
+      name,
+      children: [],
+      depth,
+      priority: 5 /* OTHER */
+    };
+    while (stack.length > 0 && stack[stack.length - 1].depth >= depth) {
+      stack.pop();
+    }
+    if (stack.length === 0) {
+      roots.push(node);
+    } else {
+      stack[stack.length - 1].node.children.push(node);
+    }
+    if (!selfClosing) {
+      stack.push({ node, depth });
+    }
+  }
+  return roots;
+}
 function filterDiffLines(diffText) {
   const lines = diffText.split("\n");
   const added = lines.filter((l) => l.startsWith("+") && !l.startsWith("+++") && l.trim() !== "+").map((l) => l.substring(1));
@@ -191,8 +316,20 @@ function parseDiffToLogicalFlow(diffText) {
   };
 }
 function generateReaderMarkdown(diffText, meta = {}) {
-  const result = parseDiffToLogicalFlow(diffText);
+  const { added, removed } = filterDiffLines(diffText);
+  const isJSX = Boolean(
+    meta.file && isJSXFile(meta.file) || hasJSXContent(added)
+  );
+  const addedForFlow = isJSX ? added.filter((l) => !isClassNameOnlyLine(l)) : added;
+  const normalizedAdded = normalizeCode(addedForFlow);
+  const flowTree = parseToFlowTree(normalizedAdded);
+  const rawCode = addedForFlow.join("\n");
+  const removedForCode = isJSX ? removed.filter((l) => !isClassNameOnlyLine(l)) : removed;
+  const removedCode = removedForCode.join("\n");
+  const classNameChanges = isJSX ? parseClassNameChanges(added, removed) : [];
+  const jsxTree = isJSX ? parseJSXToFlowTree(added) : [];
   const sections = [];
+  const lang = isJSX ? "tsx" : "typescript";
   sections.push("# \u{1F4D6} GitHub Reader View\n");
   sections.push("> Generated by **github-mobile-reader**");
   if (meta.repo) sections.push(`> Repository: ${meta.repo}`);
@@ -200,22 +337,33 @@ function generateReaderMarkdown(diffText, meta = {}) {
   if (meta.commit) sections.push(`> Commit: \`${meta.commit}\``);
   if (meta.file) sections.push(`> File: \`${meta.file}\``);
   sections.push("\n");
-  if (result.root.length > 0) {
+  if (flowTree.length > 0) {
     sections.push("## \u{1F9E0} Logical Flow\n");
     sections.push("```");
-    sections.push(...renderFlowTree(result.root));
+    sections.push(...renderFlowTree(flowTree));
     sections.push("```\n");
   }
-  if (result.rawCode.trim()) {
+  if (isJSX && jsxTree.length > 0) {
+    sections.push("## \u{1F3A8} JSX Structure\n");
+    sections.push("```");
+    sections.push(...renderFlowTree(jsxTree));
+    sections.push("```\n");
+  }
+  if (isJSX && classNameChanges.length > 0) {
+    sections.push("## \u{1F485} Style Changes\n");
+    sections.push(...renderStyleChanges(classNameChanges));
+    sections.push("");
+  }
+  if (rawCode.trim()) {
     sections.push("## \u2705 Added Code\n");
-    sections.push("```typescript");
-    sections.push(result.rawCode);
+    sections.push(`\`\`\`${lang}`);
+    sections.push(rawCode);
     sections.push("```\n");
   }
-  if (result.removedCode.trim()) {
+  if (removedCode.trim()) {
     sections.push("## \u274C Removed Code\n");
-    sections.push("```typescript");
-    sections.push(result.removedCode);
+    sections.push(`\`\`\`${lang}`);
+    sections.push(removedCode);
     sections.push("```\n");
   }
   sections.push("---");
@@ -224,10 +372,19 @@ function generateReaderMarkdown(diffText, meta = {}) {
 }
 export {
   Priority,
+  extractClassName,
+  extractJSXComponentName,
   filterDiffLines,
   generateReaderMarkdown,
+  hasJSXContent,
+  isClassNameOnlyLine,
+  isJSXElement,
+  isJSXFile,
   normalizeCode,
+  parseClassNameChanges,
   parseDiffToLogicalFlow,
+  parseJSXToFlowTree,
   parseToFlowTree,
-  renderFlowTree
+  renderFlowTree,
+  renderStyleChanges
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "github-mobile-reader",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Transform git diffs into mobile-friendly Markdown — no more horizontal scrolling when reviewing code on your phone.",
   "keywords": [
     "github",
@@ -17,10 +17,13 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/3rdflr/github-mobile-reader.git"
+    "url": "git+https://github.com/3rdflr/github-mobile-reader.git"
   },
   "license": "MIT",
   "author": "3rdflrhtl@gmail.com",
+  "bin": {
+    "github-mobile-reader": "dist/cli.js"
+  },
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -39,7 +42,8 @@
   "scripts": {
     "build": "tsup src/index.ts --format cjs,esm --dts --clean",
     "build:action": "tsup src/action.ts --format cjs --outDir dist --no-splitting",
-    "build:all": "npm run build && npm run build:action",
+    "build:cli": "tsup src/cli.ts --format cjs --outDir dist --no-splitting",
+    "build:all": "npm run build && npm run build:action && npm run build:cli",
     "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
     "prepublishOnly": "npm run build:all"
   },