@anydigital/11ty-bricks 1.0.0-alpha.7 → 1.0.0-alpha.8

package/README.md

@@ -22,7 +22,7 @@ import eleventyBricks from "@anydigital/11ty-bricks";
 
 export default function(eleventyConfig) {
   eleventyConfig.addPlugin(eleventyBricks, {
-    autoRawPreprocessor: true  // Enable autoRaw preprocessor (default: false)
+    mdAutoRawTags: true  // Enable mdAutoRawTags preprocessor (default: false)
   });
   
   // Your other configuration...
@@ -35,7 +35,7 @@ const eleventyBricks = require("@anydigital/11ty-bricks");
 
 module.exports = function(eleventyConfig) {
   eleventyConfig.addPlugin(eleventyBricks, {
-    autoRawPreprocessor: true  // Enable autoRaw preprocessor (default: false)
+    mdAutoRawTags: true  // Enable mdAutoRawTags preprocessor (default: false)
   });
   
   // Your other configuration...
@@ -48,11 +48,11 @@ Import only the specific helpers you need without using the plugin:
 
 **ES Modules:**
 ```javascript
-import { bricksRegistry, autoRaw } from "@anydigital/11ty-bricks";
+import { bricks, mdAutoRawTags } from "@anydigital/11ty-bricks";
 
 export default function(eleventyConfig) {
-  bricksRegistry(eleventyConfig);
-  autoRaw(eleventyConfig);
+  bricks(eleventyConfig);
+  mdAutoRawTags(eleventyConfig);
   
   // Your other configuration...
 }
@@ -60,11 +60,11 @@ export default function(eleventyConfig) {
 
 **CommonJS:**
 ```javascript
-const { bricksRegistry, autoRaw } = require("@anydigital/11ty-bricks");
+const { bricks, mdAutoRawTags } = require("@anydigital/11ty-bricks");
 
 module.exports = function(eleventyConfig) {
-  bricksRegistry(eleventyConfig);
-  autoRaw(eleventyConfig);
+  bricks(eleventyConfig);
+  mdAutoRawTags(eleventyConfig);
   
   // Your other configuration...
 };
@@ -77,7 +77,8 @@ When using the plugin (Option 1), you can configure which helpers to enable:
 | Option | Type | Default | Description |
 |--------|------|---------|-------------|
 | `bricks` | boolean | `false` | Enable the bricks system for dependency management |
-| `autoRawPreprocessor` | boolean | `false` | Enable the autoRaw preprocessor for Markdown files |
+| `mdAutoRawTags` | boolean | `false` | Enable the mdAutoRawTags preprocessor for Markdown files |
+| `mdAutoNl2br` | boolean | `false` | Enable the mdAutoNl2br preprocessor to convert \n to `<br>` tags |
 | `fragments` | boolean | `false` | Enable the fragment shortcode for including content from fragments |
 | `setAttrFilter` | boolean | `false` | Enable the setAttr filter for overriding object attributes |
 | `byAttrFilter` | boolean | `false` | Enable the byAttr filter for filtering collections by attribute values |
@@ -86,41 +87,41 @@ When using the plugin (Option 1), you can configure which helpers to enable:
 ```javascript
 eleventyConfig.addPlugin(eleventyBricks, {
   bricks: true,
-  autoRawPreprocessor: true,
+  mdAutoRawTags: true,
   byAttrFilter: true
 });
 ```
 
 ## Available 11ty Helpers
 
-### bricksRegistry
+### bricks
 
 A dependency management system for Eleventy that automatically collects and injects CSS and JavaScript dependencies (both external and inline) per page. This allows brick components to declare their dependencies, and the system will inject them in the correct location in your HTML.
 
 **Why use this?**
 
-When building reusable components (bricks) in Eleventy, you often need to include CSS and JavaScript dependencies. Instead of manually adding these to every page, `bricksRegistry` automatically:
+When building reusable components (bricks) in Eleventy, you often need to include CSS and JavaScript dependencies. Instead of manually adding these to every page, `bricks` automatically:
 - Collects dependencies from all bricks used on a page
 - Categorizes them (external CSS, external JS, inline styles, inline scripts)
 - Injects them in the correct location in your HTML output
 
 **How it works:**
 
-1. Use the `bricksRegistry` shortcode in your base template to mark where dependencies should be injected
+1. Use the `bricksDependencies` shortcode in your base template to mark where dependencies should be injected
 2. Use the `brick` shortcode to register and render brick components that declare their dependencies
 3. The system automatically collects all dependencies and injects them when the page is built
 
 **Usage:**
 
-1. Enable `bricksRegistry` in your Eleventy config:
+1. Enable `bricks` in your Eleventy config:
 
 ```javascript
-import { bricksRegistry } from "@anydigital/11ty-bricks";
+import { bricks } from "@anydigital/11ty-bricks";
 
 export default function(eleventyConfig) {
-  bricksRegistry(eleventyConfig);
+  bricks(eleventyConfig);
   // Or use as plugin:
-  // eleventyConfig.addPlugin(eleventyBricks, { bricksRegistry: true });
+  // eleventyConfig.addPlugin(eleventyBricks, { bricks: true });
 }
 ```
 
@@ -198,22 +199,75 @@ The system will automatically inject all dependencies in the order they were reg
 - Works with both external URLs and inline code
 - Clears registry before each build to prevent stale data
 
-### autoRaw
+### mdAutoRawTags
 
 Prevents Nunjucks syntax from being processed in Markdown files by automatically wrapping `{{`, `}}`, `{%`, and `%}` with `{% raw %}` tags.
 
 **Why use this?**
 
-When writing documentation or tutorials about templating in Markdown files, you often want to show Nunjucks/Liquid syntax as literal text. This helper automatically escapes these special characters so they display as-is instead of being processed by the template engine.
+When writing documentation or tutorials about templating in Markdown files, you often want to show Nunjucks/Liquid syntax as literal text. This preprocessor automatically escapes these special characters so they display as-is instead of being processed by the template engine.
+
+**Usage:**
+
+1. Enable `mdAutoRawTags` in your Eleventy config:
+
+```javascript
+import { mdAutoRawTags } from "@anydigital/11ty-bricks";
+
+export default function(eleventyConfig) {
+  mdAutoRawTags(eleventyConfig);
+  // Or use as plugin:
+  // eleventyConfig.addPlugin(eleventyBricks, { mdAutoRawTags: true });
+}
+```
 
 **Example:**
 
-Before `autoRaw`, writing this in Markdown:
+Before `mdAutoRawTags`, writing this in Markdown:
 ```markdown
 Use {{ variable }} to output variables.
 ```
 
-Would try to process `{{ variable }}` as a template variable. With `autoRaw`, it displays exactly as written.
+Would try to process `{{ variable }}` as a template variable. With `mdAutoRawTags`, it displays exactly as written.
+
+### mdAutoNl2br
+
+Automatically converts `\n` sequences to `<br>` tags in Markdown content. This is particularly useful for adding line breaks inside Markdown tables where standard newlines don't work.
+
+**Why use this?**
+
+Markdown tables don't support multi-line content in cells. By using `\n` in your content, this preprocessor will convert it to `<br>` tags, allowing you to display line breaks within table cells and other content.
+
+**Usage:**
+
+1. Enable `mdAutoNl2br` in your Eleventy config:
+
+```javascript
+import { mdAutoNl2br } from "@anydigital/11ty-bricks";
+
+export default function(eleventyConfig) {
+  mdAutoNl2br(eleventyConfig);
+  // Or use as plugin:
+  // eleventyConfig.addPlugin(eleventyBricks, { mdAutoNl2br: true });
+}
+```
+
+**Example:**
+
+In your Markdown file:
+```markdown
+| Column 1 | Column 2 |
+|----------|----------|
+| Line 1\nLine 2\nLine 3 | Another cell\nWith multiple lines |
+```
+
+Will render as:
+```html
+<td>Line 1<br>Line 2<br>Line 3</td>
+<td>Another cell<br>With multiple lines</td>
+```
+
+**Note:** This processes literal `\n` sequences (backslash followed by 'n'), not actual newline characters. Type `\n` in your source files where you want line breaks.
 
 ### fragment
 
@@ -446,7 +500,8 @@ Template usage:
 
 The plugin also exports the following for advanced usage:
 
-- `transformAutoRaw(content)`: The transform function used by `autoRaw` preprocessor. Can be used programmatically to wrap Nunjucks syntax with raw tags.
+- `transformAutoRaw(content)`: The transform function used by `mdAutoRawTags` preprocessor. Can be used programmatically to wrap Nunjucks syntax with raw tags.
+- `transformNl2br(content)`: The transform function used by `mdAutoNl2br` preprocessor. Can be used programmatically to convert `\n` sequences to `<br>` tags.
 
 ## CLI Helper Commands
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anydigital/11ty-bricks",
-  "version": "1.0.0-alpha.7",
+  "version": "1.0.0-alpha.8",
   "description": "A collection of helpful utilities and filters for Eleventy (11ty)",
   "type": "module",
   "main": "./src/index.js",

package/src/{bricksRegistry.js → bricks.js}

@@ -1,4 +1,4 @@
-export function bricksRegistry(eleventyConfig) {
+export function bricks(eleventyConfig) {
 
   // Brick Registry System
   // Global registry to track dependencies per page

package/src/{byAttr.js → byAttrFilter.js}

@@ -7,7 +7,7 @@
  * 
  * @param {Object} eleventyConfig - The Eleventy configuration object
  */
-export function byAttr(eleventyConfig) {
+export function byAttrFilter(eleventyConfig) {
   eleventyConfig.addFilter("byAttr", function(collection, attrName, targetValue) {
     if (!collection || !Array.isArray(collection)) {
       return [];

package/src/{byAttr.test.js → byAttrFilter.test.js}

@@ -1,6 +1,6 @@
 import { describe, it } from 'node:test';
 import assert from 'node:assert';
-import { byAttr } from './byAttr.js';
+import { byAttrFilter } from './byAttrFilter.js';
 
 describe('byAttr filter', () => {
   let filterFn;
@@ -15,7 +15,7 @@ describe('byAttr filter', () => {
   };
 
   // Register the filter
-  byAttr(mockEleventyConfig);
+  byAttrFilter(mockEleventyConfig);
 
   it('should filter items by exact attribute match', () => {
     const collection = [

package/src/{fragment.js → fragments.js}

@@ -9,7 +9,7 @@ import { join } from "path";
  * 
  * @param {Object} eleventyConfig - The Eleventy configuration object
  */
-export function fragment(eleventyConfig) {
+export function fragments(eleventyConfig) {
   eleventyConfig.addShortcode("fragment", function(path) {
     // Get the input directory from Eleventy's context
     const inputDir = this.page?.inputPath 

package/src/index.cjs

@@ -9,24 +9,18 @@ module.exports = async function eleventyBricksPlugin(eleventyConfig, options) {
   return plugin(eleventyConfig, options);
 };
 
-// Export individual helpers
-module.exports.bricksRegistry = async function(eleventyConfig) {
-  const { bricksRegistry } = await import('./index.js');
-  return bricksRegistry(eleventyConfig);
-};
-module.exports.autoRaw = async function(eleventyConfig) {
-  const { autoRaw } = await import('./index.js');
-  return autoRaw(eleventyConfig);
-};
-module.exports.fragment = async function(eleventyConfig) {
-  const { fragment } = await import('./index.js');
-  return fragment(eleventyConfig);
-};
-module.exports.setAttr = async function(eleventyConfig) {
-  const { setAttr } = await import('./index.js');
-  return setAttr(eleventyConfig);
-};
-module.exports.byAttr = async function(eleventyConfig) {
-  const { byAttr } = await import('./index.js');
-  return byAttr(eleventyConfig);
-};
+// Export individual helpers for granular usage
+['bricks', 'mdAutoRawTags', 'mdAutoNl2br', 'fragments', 'setAttrFilter', 'byAttrFilter'].forEach(name => {
+  module.exports[name] = async (eleventyConfig) => {
+    const module = await import('./index.js');
+    return module[name](eleventyConfig);
+  };
+});
+
+// Export transform functions for advanced usage
+['transformAutoRaw', 'transformNl2br'].forEach(name => {
+  module.exports[name] = async (content) => {
+    const module = await import('./index.js');
+    return module[name](content);
+  };
+});

package/src/index.js

@@ -1,8 +1,8 @@
-import { bricksRegistry } from "./bricksRegistry.js";
-import { autoRaw } from "./autoRaw.js";
-import { fragment } from "./fragment.js";
-import { setAttr } from "./setAttr.js";
-import { byAttr } from "./byAttr.js";
+import { bricks } from "./bricks.js";
+import { mdAutoRawTags, mdAutoNl2br, transformAutoRaw, transformNl2br } from "./markdown.js";
+import { fragments } from "./fragments.js";
+import { setAttrFilter } from "./setAttrFilter.js";
+import { byAttrFilter } from "./byAttrFilter.js";
 
 /**
  * 11ty Bricks Plugin
@@ -13,32 +13,19 @@ import { byAttr } from "./byAttr.js";
  * @param {Object} eleventyConfig - The Eleventy configuration object
  * @param {Object} options - Plugin options
  * @param {boolean} options.bricks - Enable bricks system with dependencies injection (default: false)
- * @param {boolean} options.autoRawPreprocessor - Enable autoRaw preprocessor (default: false)
+ * @param {boolean} options.mdAutoRawTags - Enable mdAutoRawTags preprocessor (default: false)
+ * @param {boolean} options.mdAutoNl2br - Enable mdAutoNl2br for \n to <br> conversion (default: false)
  * @param {boolean} options.fragments - Enable fragment shortcode (default: false)
  * @param {boolean} options.setAttrFilter - Enable setAttr filter (default: false)
  * @param {boolean} options.byAttrFilter - Enable byAttr filter (default: false)
  */
 export default function eleventyBricksPlugin(eleventyConfig, options = {}) {
-  if (options.bricks) {
-    bricksRegistry(eleventyConfig);
-  }
-  if (options.autoRawPreprocessor) {
-    autoRaw(eleventyConfig);
-  }
-  if (options.fragments) {
-    fragment(eleventyConfig);
-  }
-  if (options.setAttrFilter) {
-    setAttr(eleventyConfig);
-  }
-  if (options.byAttrFilter) {
-    byAttr(eleventyConfig);
-  }
+  const plugins = { bricks, mdAutoRawTags, mdAutoNl2br, fragments, setAttrFilter, byAttrFilter };
+  Object.entries(options).forEach(([key, enabled]) => enabled && plugins[key]?.(eleventyConfig));
 }
 
 // Export individual helpers for granular usage
-export { bricksRegistry };
-export { autoRaw };
-export { fragment };
-export { setAttr };
-export { byAttr };
+export { bricks, mdAutoRawTags, mdAutoNl2br, fragments, setAttrFilter, byAttrFilter };
+
+// Export transform functions for advanced usage
+export { transformAutoRaw, transformNl2br };

package/src/markdown.js

@@ -0,0 +1,58 @@
+/**
+ * Transform Nunjucks syntax in content by wrapping it with raw tags
+ * 
+ * This function wraps Nunjucks syntax ({{, }}, {%, %}) with {% raw %} tags
+ * to prevent them from being processed by the template engine.
+ * 
+ * @param {string} content - The content to transform
+ * @returns {string} The transformed content with Nunjucks syntax wrapped
+ */
+export function transformAutoRaw(content) {
+  // This regex looks for {{, }}, {%, or %} individually and wraps them
+  return content.replace(/({{|}}|{%|%})/g, "{% raw %}$1{% endraw %}");
+}
+
+/**
+ * mdAutoRawTags - Forbid Nunjucks processing in Markdown files
+ * 
+ * This preprocessor wraps Nunjucks syntax ({{, }}, {%, %}) with {% raw %} tags
+ * to prevent them from being processed by the template engine in Markdown files.
+ * 
+ * @param {Object} eleventyConfig - The Eleventy configuration object
+ */
+export function mdAutoRawTags(eleventyConfig) {
+  eleventyConfig.addPreprocessor("mdAutoRawTags", "md", (data, content) => {
+    return transformAutoRaw(content);
+  });
+}
+
+/**
+ * Transform \n sequences to <br> tags
+ * 
+ * This function converts literal \n sequences (double backslash + n) to HTML <br> tags.
+ * It handles both double \n\n and single \n sequences, processing double ones first.
+ * 
+ * @param {string} content - The content to transform
+ * @returns {string} The transformed content with \n converted to <br>
+ */
+export function transformNl2br(content) {
+  // Replace double \n\n first, then single \n to avoid double conversion
+  return content.replace(/\\n\\n/g, '<br>').replace(/\\n/g, '<br>');
+}
+
+/**
+ * mdAutoNl2br - Auto convert \n to <br> in markdown (especially tables)
+ * 
+ * This function amends the markdown library to automatically convert \n
+ * to <br> tags in text content, which is particularly useful for line breaks
+ * inside markdown tables where standard newlines don't work.
+ * 
+ * @param {Object} eleventyConfig - The Eleventy configuration object
+ */
+export function mdAutoNl2br(eleventyConfig) {
+  eleventyConfig.amendLibrary("md", mdLib => {
+    mdLib.renderer.rules.text = (tokens, idx) => {
+      return transformNl2br(tokens[idx].content);
+    };
+  });
+}

package/src/{autoRaw.test.js → markdown.test.js}

@@ -1,6 +1,6 @@
 import { describe, it } from "node:test";
 import assert from "node:assert/strict";
-import { transformAutoRaw } from "./autoRaw.js";
+import { transformAutoRaw, transformNl2br } from "./markdown.js";
 
 describe("transformAutoRaw", () => {
   it("should wrap opening double curly braces with raw tags", () => {
@@ -85,3 +85,68 @@ Some text
   });
 });
 
+describe("transformNl2br", () => {
+  it("should convert single \\n to <br>", () => {
+    const input = "Line 1\\nLine 2";
+    const expected = "Line 1<br>Line 2";
+    assert.equal(transformNl2br(input), expected);
+  });
+
+  it("should convert double \\n\\n to <br>", () => {
+    const input = "Line 1\\n\\nLine 2";
+    const expected = "Line 1<br>Line 2";
+    assert.equal(transformNl2br(input), expected);
+  });
+
+  it("should convert multiple \\n sequences", () => {
+    const input = "Line 1\\nLine 2\\nLine 3";
+    const expected = "Line 1<br>Line 2<br>Line 3";
+    assert.equal(transformNl2br(input), expected);
+  });
+
+  it("should handle mixed single and double \\n", () => {
+    const input = "Line 1\\n\\nLine 2\\nLine 3";
+    const expected = "Line 1<br>Line 2<br>Line 3";
+    assert.equal(transformNl2br(input), expected);
+  });
+
+  it("should handle text without \\n", () => {
+    const input = "Just plain text";
+    assert.equal(transformNl2br(input), input);
+  });
+
+  it("should handle empty content", () => {
+    assert.equal(transformNl2br(""), "");
+  });
+
+  it("should handle content with only \\n", () => {
+    const input = "\\n\\n\\n";
+    const expected = "<br><br>";
+    assert.equal(transformNl2br(input), expected);
+  });
+
+  it("should handle markdown table cell content with \\n", () => {
+    const input = "Cell 1\\nCell 1 Line 2\\n\\nCell 1 Line 3";
+    const expected = "Cell 1<br>Cell 1 Line 2<br>Cell 1 Line 3";
+    assert.equal(transformNl2br(input), expected);
+  });
+
+  it("should handle multiple consecutive double \\n\\n", () => {
+    const input = "Line 1\\n\\n\\n\\nLine 2";
+    const expected = "Line 1<br><br>Line 2";
+    assert.equal(transformNl2br(input), expected);
+  });
+
+  it("should preserve actual newlines (not literal \\n)", () => {
+    const input = "Line 1\nLine 2";
+    const expected = "Line 1\nLine 2";
+    assert.equal(transformNl2br(input), expected);
+  });
+
+  it("should only convert literal backslash-n sequences", () => {
+    const input = "Text with\\nbackslash-n and\nreal newline";
+    const expected = "Text with<br>backslash-n and\nreal newline";
+    assert.equal(transformNl2br(input), expected);
+  });
+});
+

package/src/{setAttr.js → setAttrFilter.js}

@@ -6,7 +6,7 @@
  * 
  * @param {Object} eleventyConfig - The Eleventy configuration object
  */
-export function setAttr(eleventyConfig) {
+export function setAttrFilter(eleventyConfig) {
   eleventyConfig.addFilter("setAttr", function(obj, key, value) {
     return {
       ...obj,

package/src/autoRaw.js

@@ -1,28 +0,0 @@
-/**
- * Transform Nunjucks syntax in content by wrapping it with raw tags
- * 
- * This function wraps Nunjucks syntax ({{, }}, {%, %}) with {% raw %} tags
- * to prevent them from being processed by the template engine.
- * 
- * @param {string} content - The content to transform
- * @returns {string} The transformed content with Nunjucks syntax wrapped
- */
-export function transformAutoRaw(content) {
-  // This regex looks for {{, }}, {%, or %} individually and wraps them
-  return content.replace(/({{|}}|{%|%})/g, "{% raw %}$1{% endraw %}");
-}
-
-/**
- * autoRaw - Forbid Nunjucks processing in Markdown files
- * 
- * This preprocessor wraps Nunjucks syntax ({{, }}, {%, %}) with {% raw %} tags
- * to prevent them from being processed by the template engine in Markdown files.
- * 
- * @param {Object} eleventyConfig - The Eleventy configuration object
- */
-export function autoRaw(eleventyConfig) {
-  eleventyConfig.addPreprocessor("autoRaw", "md", (data, content) => {
-    return transformAutoRaw(content);
-  });
-}
-