llm-code-format
Version:
Parsing and serialization of multiple code files in Markdown for LLMs
571 lines (480 loc) • 16.8 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vitest_1 = require("vitest");
const parseMarkdownFiles_1 = require("./parseMarkdownFiles");
// Tests for parseMarkdownFiles function with different formats
(0, vitest_1.test)("parseMarkdownFiles detects Bold Format and parses files", () => {
const markdownString = `
**index.html**
\`\`\`html
<!-- HTML content -->
\`\`\`
**script.js**
\`\`\`javascript
// JavaScript content
\`\`\`
**styles.css**
\`\`\`css
/* CSS content */
\`\`\`
`;
const { files, format } = (0, parseMarkdownFiles_1.parseMarkdownFiles)(markdownString);
(0, vitest_1.expect)(format).toBe("Bold Format");
(0, vitest_1.expect)(files).toEqual({
"index.html": "<!-- HTML content -->",
"script.js": "// JavaScript content",
"styles.css": "/* CSS content */",
});
});
(0, vitest_1.test)("parseMarkdownFiles detects Bold Format with extra text and parses files", () => {
const markdownString = `
**index.html**
\`\`\`html
<!-- HTML content -->
\`\`\`
**script.js** (some commentary)
\`\`\`javascript
// JavaScript content
\`\`\`
**styles.css**
\`\`\`css
/* CSS content */
\`\`\`
`;
const { files, format } = (0, parseMarkdownFiles_1.parseMarkdownFiles)(markdownString);
(0, vitest_1.expect)(format).toBe("Bold Format");
(0, vitest_1.expect)(files).toEqual({
"index.html": "<!-- HTML content -->",
"script.js": "// JavaScript content",
"styles.css": "/* CSS content */",
});
});
(0, vitest_1.test)("parseMarkdownFiles handles Bold Format with parentheses and extra text", () => {
const markdownString = `
**renderArcs.js (New file)**
\`\`\`javascript
// JavaScript content for renderArcs
\`\`\`
**utils.js (Modified)**
\`\`\`javascript
// JavaScript content for utils
\`\`\`
**config.json (Configuration file)**
\`\`\`json
{ "version": "1.0" }
\`\`\`
`;
const { files, format } = (0, parseMarkdownFiles_1.parseMarkdownFiles)(markdownString);
(0, vitest_1.expect)(format).toBe("Bold Format");
(0, vitest_1.expect)(files).toEqual({
"renderArcs.js": "// JavaScript content for renderArcs",
"utils.js": "// JavaScript content for utils",
"config.json": '{ "version": "1.0" }',
});
});
(0, vitest_1.test)("parseMarkdownFiles detects Backtick-Heading Format and parses files", () => {
const markdownString = `
### \`index.html\`
\`\`\`html
<!-- HTML content -->
\`\`\`
### \`script.js\`
\`\`\`javascript
// JavaScript content
\`\`\`
### \`styles.css\`
\`\`\`css
/* CSS content */
\`\`\`
`;
const { files, format } = (0, parseMarkdownFiles_1.parseMarkdownFiles)(markdownString);
(0, vitest_1.expect)(format).toBe("Backtick-Heading Format");
(0, vitest_1.expect)(files).toEqual({
"index.html": "<!-- HTML content -->",
"script.js": "// JavaScript content",
"styles.css": "/* CSS content */",
});
});
(0, vitest_1.test)("parseMarkdownFiles detects Standard Heading Format and parses files", () => {
const markdownString = `
### index.html
\`\`\`html
<!-- HTML content -->
\`\`\`
### script.js
\`\`\`javascript
// JavaScript content
\`\`\`
### styles.css
\`\`\`css
/* CSS content */
\`\`\`
`;
const { files, format } = (0, parseMarkdownFiles_1.parseMarkdownFiles)(markdownString);
(0, vitest_1.expect)(format).toBe("Standard Heading Format");
(0, vitest_1.expect)(files).toEqual({
"index.html": "<!-- HTML content -->",
"script.js": "// JavaScript content",
"styles.css": "/* CSS content */",
});
});
(0, vitest_1.test)("parseMarkdownFiles detects Colon Format and parses files", () => {
const markdownString = `
index.html:
\`\`\`html
<!-- HTML content -->
\`\`\`
script.js:
\`\`\`javascript
// JavaScript content
\`\`\`
styles.css:
\`\`\`css
/* CSS content */
\`\`\`
`;
const { files, format } = (0, parseMarkdownFiles_1.parseMarkdownFiles)(markdownString);
(0, vitest_1.expect)(format).toBe("Colon Format");
(0, vitest_1.expect)(files).toEqual({
"index.html": "<!-- HTML content -->",
"script.js": "// JavaScript content",
"styles.css": "/* CSS content */",
});
});
(0, vitest_1.test)("parseMarkdownFiles detects Bold Format and parses files", () => {
const markdownString = `
**index.html**
\`\`\`html
<!-- HTML content -->
\`\`\`
**script.js**
\`\`\`javascript
// JavaScript content
\`\`\`
**styles.css**
\`\`\`css
/* CSS content */
\`\`\`
`;
const { files, format } = (0, parseMarkdownFiles_1.parseMarkdownFiles)(markdownString);
(0, vitest_1.expect)(format).toBe("Bold Format");
(0, vitest_1.expect)(files).toEqual({
"index.html": "<!-- HTML content -->",
"script.js": "// JavaScript content",
"styles.css": "/* CSS content */",
});
});
(0, vitest_1.test)("parseMarkdownFiles detects File Bold Format and parses files", () => {
const markdownString = `
### File: **index.html**
\`\`\`html
<!-- HTML content -->
\`\`\`
### File: **script.js**
\`\`\`javascript
// JavaScript content
\`\`\`
### File: **styles.css**
\`\`\`css
/* CSS content */
\`\`\`
`;
const { files, format } = (0, parseMarkdownFiles_1.parseMarkdownFiles)(markdownString);
(0, vitest_1.expect)(format).toBe("File Bold Format");
(0, vitest_1.expect)(files).toEqual({
"index.html": "<!-- HTML content -->",
"script.js": "// JavaScript content",
"styles.css": "/* CSS content */",
});
});
(0, vitest_1.test)("parseMarkdownFiles detects Heading Bold Format and parses files", () => {
const markdownString = `
### **index.html**
\`\`\`html
<!-- HTML content -->
\`\`\`
### **script.js**
\`\`\`javascript
// JavaScript content
\`\`\`
### **styles.css**
\`\`\`css
/* CSS content */
\`\`\`
`;
const { files, format } = (0, parseMarkdownFiles_1.parseMarkdownFiles)(markdownString);
(0, vitest_1.expect)(format).toBe("Heading Bold Format");
(0, vitest_1.expect)(files).toEqual({
"index.html": "<!-- HTML content -->",
"script.js": "// JavaScript content",
"styles.css": "/* CSS content */",
});
});
(0, vitest_1.test)("parseMarkdownFiles detects Numbered Bold Format and parses files", () => {
const markdownString = `
1. **index.html**
\`\`\`html
<!-- HTML content -->
\`\`\`
2. **style.css**
This file contains the CSS for styling the scatter plot.
\`\`\`css
/* CSS content */
\`\`\`
`;
const { files, format } = (0, parseMarkdownFiles_1.parseMarkdownFiles)(markdownString);
(0, vitest_1.expect)(format).toBe("Numbered Bold Format");
(0, vitest_1.expect)(files).toEqual({
"index.html": "<!-- HTML content -->",
"style.css": "/* CSS content */",
});
});
(0, vitest_1.test)("parseMarkdownFiles detects Numbered Bold Format with extra text", () => {
const markdownString = `
To create a scatter plot with D3.js, follow these steps:
1. **index.html**: In your HTML file, include the three required files for D3.js:
\`\`\`html
<!-- HTML content -->
\`\`\`
2. **style.css**: Style the plot as needed. Here's a minimal style to give it a white background and add some padding:
\`\`\`css
/* CSS content */
\`\`\`
`;
const { files, format } = (0, parseMarkdownFiles_1.parseMarkdownFiles)(markdownString);
(0, vitest_1.expect)(format).toBe("Numbered Bold Format");
(0, vitest_1.expect)(files).toEqual({
"index.html": "<!-- HTML content -->",
"style.css": "/* CSS content */",
});
});
(0, vitest_1.test)("parseMarkdownFiles detects Numbered Backtick Format and parses files", () => {
const markdownString = `
### 1. \`index.html\`
\`\`\`html
<!-- HTML content -->
\`\`\`
### 2. \`style.css\`
This file contains the CSS for styling the scatter plot.
\`\`\`css
/* CSS content */
\`\`\`
`;
const { files, format } = (0, parseMarkdownFiles_1.parseMarkdownFiles)(markdownString);
(0, vitest_1.expect)(format).toBe("Numbered Backtick Format");
(0, vitest_1.expect)(files).toEqual({
"index.html": "<!-- HTML content -->",
"style.css": "/* CSS content */",
});
});
(0, vitest_1.test)("parseMarkdownFiles detects Hash Format and parses files", () => {
const markdownString = `
# index.html
\`\`\`html
<!-- HTML content -->
\`\`\`
# script.js
\`\`\`javascript
// JavaScript content
\`\`\`
# styles.css
\`\`\`css
/* CSS content */
\`\`\`
`;
const { files, format } = (0, parseMarkdownFiles_1.parseMarkdownFiles)(markdownString);
(0, vitest_1.expect)(format).toBe("Hash Format");
(0, vitest_1.expect)(files).toEqual({
"index.html": "<!-- HTML content -->",
"script.js": "// JavaScript content",
"styles.css": "/* CSS content */",
});
});
(0, vitest_1.test)("parseMarkdownFiles should use final version", () => {
const markdownString = `
**index.html**
\`\`\`html
<!-- Old HTML content -->
\`\`\`
And then we do some work on it and...
**index.html**
\`\`\`html
<!-- New HTML content -->
\`\`\`
`;
const { files, format } = (0, parseMarkdownFiles_1.parseMarkdownFiles)(markdownString);
(0, vitest_1.expect)(format).toBe("Bold Format");
(0, vitest_1.expect)(files).toEqual({
"index.html": "<!-- New HTML content -->",
});
});
const content = ` To create a scatter plot with D3.js, follow these steps:
1. **index.html**: In your HTML file, include the three required files for D3.js:
\`\`\`html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scatter Plot with D3.js</title>
<script src="https://d3js.org/d3.v6.min.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="scatter-plot"></div>
<script src="index.js"></script>
</body>
</html>
\`\`\`
2. **styles.css**: Style the plot as needed. Here's a minimal style to give it a white background and add some padding:
\`\`\`css
/* styles.css */
body, html {
height: 102%;
padding: 0;
}
#scatter-plot {
width: 100%;
height: 100%;
}
\`\`\`
3. **index.js**: In your JavaScript file, load data for the scatter plot (which can be from an API, CSV file, or the browser), create a SVG container, and define the plot. Here's an example that generates random data:
\`\`\`javascript
// index.js
d3.select("body")
.append("div")
.attr("id", "scatter-plot");
// Load data
const data = d3.randomN(500, (x, y) => ({x, y}));
// Create SVG container
const svg = d3.select("#scatter-plot")
.append("svg")
.attr("width", "100%")
.attr("height", "100%");
// Scales X and Y axes
const xInfo = d3.scaleLinear()
.domain(d3.extent(data, d => d.x))
.range([0, svg.node().width]);
const yInfo = d3.scaleLinear()
.domain(d3.extent(data, d => d.y))
.range([svg.node().height, 0]);
// Create circles and color them based on their distances from the axes
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", d => xInfo(d.x))
.attr("cy", d => yInfo(d.y))
.attr("r", 4)
.attr("fill", "steelblue")
.on("mousemove", function(event, d) {
// Change color of circles based on their distances from the axes
const xDistance = Math.abs(data.average(d => d.x) - d3.mouse(this).x);
const yDistance = Math.abs(data.average(d => d.y) - d3.mouse(this).y);
d3.select(this)
.style("fill", \`steelblue\${yDistance > xDistance ? "20%" : ""}\`);
});
\`\`\`
This code generates a scatter plot of 500 circles with random coordinates between 0 and 100, and colors each circle with a gradient from blue to red based on its distance from the X and Y axes. When you move the mouse over a circle, its color changes based on its distance from the moving mouse pointer.
`;
(0, vitest_1.test)("parseMarkdownFiles work with real output from Mistral", () => {
const { files, format } = (0, parseMarkdownFiles_1.parseMarkdownFiles)(content);
// console.log(JSON.stringify(files, null, 2));
(0, vitest_1.expect)(format).toBe("Numbered Bold Format");
(0, vitest_1.expect)(files).toEqual({
"index.html": '\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <title>Scatter Plot with D3.js</title>\n <script src="https://d3js.org/d3.v6.min.js"></script>\n <link rel="stylesheet" href="styles.css">\n</head>\n<body>\n <div id="scatter-plot"></div>\n <script src="index.js"></script>\n</body>\n</html>',
"styles.css": "/* styles.css */\nbody, html {\n height: 102%;\n padding: 0;\n}\n\n#scatter-plot {\n width: 100%;\n height: 100%;\n}",
"index.js": '// index.js\n\nd3.select("body")\n .append("div")\n .attr("id", "scatter-plot");\n\n// Load data\nconst data = d3.randomN(500, (x, y) => ({x, y}));\n\n// Create SVG container\nconst svg = d3.select("#scatter-plot")\n .append("svg")\n .attr("width", "100%")\n .attr("height", "100%");\n\n// Scales X and Y axes\nconst xInfo = d3.scaleLinear()\n .domain(d3.extent(data, d => d.x))\n .range([0, svg.node().width]);\nconst yInfo = d3.scaleLinear()\n .domain(d3.extent(data, d => d.y))\n .range([svg.node().height, 0]);\n\n// Create circles and color them based on their distances from the axes\nsvg.selectAll("circle")\n .data(data)\n .enter()\n .append("circle")\n .attr("cx", d => xInfo(d.x))\n .attr("cy", d => yInfo(d.y))\n .attr("r", 4)\n .attr("fill", "steelblue")\n .on("mousemove", function(event, d) {\n // Change color of circles based on their distances from the axes\n const xDistance = Math.abs(data.average(d => d.x) - d3.mouse(this).x);\n const yDistance = Math.abs(data.average(d => d.y) - d3.mouse(this).y);\n d3.select(this)\n .style("fill", `steelblue${yDistance > xDistance ? "20%" : ""}`);\n });',
});
});
// Test that parses correctly when the format is 'bold' and the input matches 'Bold Format'
(0, vitest_1.test)("parseMarkdownFiles parses Bold Format when format is specified as 'bold'", () => {
const markdownString = `
**index.html**
\`\`\`html
<!-- HTML content -->
\`\`\`
**script.js**
\`\`\`javascript
// JavaScript content
\`\`\`
**styles.css**
\`\`\`css
/* CSS content */
\`\`\`
`;
const { files, format } = (0, parseMarkdownFiles_1.parseMarkdownFiles)(markdownString, "bold");
(0, vitest_1.expect)(format).toBe("Bold Format");
(0, vitest_1.expect)(files).toEqual({
"index.html": "<!-- HTML content -->",
"script.js": "// JavaScript content",
"styles.css": "/* CSS content */",
});
});
// Test that returns empty files when format is 'bold' but the input does not match 'Bold Format'
(0, vitest_1.test)("parseMarkdownFiles returns empty files when format is 'bold' but input does not match", () => {
const markdownString = `
### \`index.html\`
\`\`\`html
<!-- HTML content -->
\`\`\`
### \`script.js\`
\`\`\`javascript
// JavaScript content
\`\`\`
### \`styles.css\`
\`\`\`css
/* CSS content */
\`\`\`
`;
const { files, format } = (0, parseMarkdownFiles_1.parseMarkdownFiles)(markdownString, "bold");
(0, vitest_1.expect)(format).toBe("Unknown Format");
(0, vitest_1.expect)(files).toEqual({});
});
// Test that throws an error when an unsupported format is specified
(0, vitest_1.test)("parseMarkdownFiles throws error when an unsupported format is specified", () => {
const markdownString = `
**index.html**
\`\`\`html
<!-- HTML content -->
\`\`\`
`;
(0, vitest_1.expect)(() => (0, parseMarkdownFiles_1.parseMarkdownFiles)(markdownString, "unsupported-format")).toThrow("Unsupported format: unsupported-format");
});
// Test that parses correctly when the format is 'bold' and there are duplicate file names
(0, vitest_1.test)("parseMarkdownFiles handles duplicate file names in Bold Format when format is specified", () => {
const markdownString = `
**index.html**
\`\`\`html
<!-- Old HTML content -->
\`\`\`
**index.html**
\`\`\`html
<!-- New HTML content -->
\`\`\`
`;
const { files, format } = (0, parseMarkdownFiles_1.parseMarkdownFiles)(markdownString, "bold");
(0, vitest_1.expect)(format).toBe("Bold Format");
(0, vitest_1.expect)(files).toEqual({
"index.html": "<!-- New HTML content -->",
});
});
// Test that parses correctly when additional text is present between code blocks in Bold Format
(0, vitest_1.test)("parseMarkdownFiles parses Bold Format with additional text when format is specified", () => {
const markdownString = `
**index.html**
\`\`\`html
<!-- HTML content -->
\`\`\`
Some additional description or instructions.
**script.js**
\`\`\`javascript
// JavaScript content
\`\`\`
`;
const { files, format } = (0, parseMarkdownFiles_1.parseMarkdownFiles)(markdownString, "bold");
(0, vitest_1.expect)(format).toBe("Bold Format");
(0, vitest_1.expect)(files).toEqual({
"index.html": "<!-- HTML content -->",
"script.js": "// JavaScript content",
});
});