@projectevergreen/eleventy-plugin-wcc 0.3.0

package/.editorconfig

@@ -0,0 +1,10 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = false

package/.eleventy.js

@@ -0,0 +1,15 @@
+import { wccPlugin } from './src/index.js';
+
+export default function(eleventyConfig) {
+  eleventyConfig.addPlugin(wccPlugin, {
+    definitions: [
+      new URL('./demo/components/greeting.js', import.meta.url)
+    ]
+  });
+
+  return {
+    dir: {
+      input: './demo'
+    }
+  }
+};

package/.eslintignore

@@ -0,0 +1,2 @@
+!.eslintrc.cjs
+src/lib/wcc.dist.js

package/.eslintrc.js

@@ -0,0 +1,220 @@
+module.exports = {
+  parserOptions: {
+    ecmaVersion: 2022,
+    sourceType: 'module'
+  },
+  env: {
+    browser: false,
+    node: true
+  },
+  rules: {
+    'comma-dangle': [2, 'never'],
+    'no-cond-assign': 2,
+    'no-console': 0,
+    'no-constant-condition': 2,
+    'no-control-regex': 0,
+    'no-debugger': 0,
+    'no-dupe-args': 0,
+    'no-dupe-keys': 0,
+    'no-duplicate-case': 2,
+    'no-empty-character-class': 0,
+    'no-empty': 2,
+    'no-ex-assign': 2,
+    'no-extra-boolean-cast': 2,
+    'no-extra-parens': [2, 'all', {
+      'conditionalAssign': false,
+      'returnAssign': false,
+      'nestedBinaryExpressions': false
+    }],
+    'no-extra-semi': 2,
+    'no-func-assign': 2,
+    'no-inner-declarations': 2,
+    'no-invalid-regexp': 0,
+    'no-irregular-whitespace': 2,
+    'no-negated-in-lhs': 2,
+    'no-obj-calls': 0,
+    'no-regex-spaces': 0,
+    'no-sparse-arrays': 2,
+    'no-unreachable': 2,
+    'use-isnan': 2,
+    'valid-jsdoc': 0,
+    'valid-typeof': 0,
+    'no-unexpected-multiline': 0,
+    'accessor-pairs': 2,
+    'block-scoped-var': 2,
+    'complexity': 2,
+    'consistent-return': 0,
+    'curly': 2,
+    'default-case': 2,
+    'dot-notation': 2,
+    'dot-location': 0,
+    'eqeqeq': [2, 'allow-null'],
+    'guard-for-in': 0,
+    'no-alert': 0,
+    'no-caller': 0,
+    'no-div-regex': 0,
+    'no-else-return': 0,
+    'no-empty-label': 0,
+    'no-eq-null': 0,
+    'no-eval': 2,
+    'no-extend-native': 0,
+    'no-extra-bind': 2,
+    'no-fallthrough': 2,
+    'no-floating-decimal': 2,
+    'no-implicit-coercion': [2, {
+      'number': true,
+      'string': true,
+      'boolean': false
+    }],
+    'no-implied-eval': 2,
+    'no-invalid-this': 0,
+    'no-iterator': 2,
+    'no-labels': 0,
+    'no-lone-blocks': 0,
+    'no-loop-func': 2,
+    'no-multi-spaces': 2,
+    'no-multi-str': 0,
+    'no-native-reassign': 0,
+    'no-new-func': 0,
+    'no-new-wrappers': 2,
+    'no-new': 2,
+    'no-octal-escape': 0,
+    'no-octal': 0,
+    'no-param-reassign': 0,
+    'no-process-env': 0,
+    'no-proto': 0,
+    'no-redeclare': 2,
+    'no-return-assign': 0,
+    'no-script-url': 0,
+    'no-self-compare': 0,
+    'no-sequences': 0,
+    'no-throw-literal': 2,
+    'no-unused-expressions': 0,
+    'no-useless-call': 0,
+    'no-void': 0,
+    'no-warning-comments': [1, { 
+      'terms': [
+        'todo',
+        ' fixme',
+        ' TODO',
+        ' FIXME'
+      ],
+      'location': 'anywhere'
+    }],
+    'no-with': 0,
+    'radix': 2,
+    'vars-on-top': 2,
+    'wrap-iife': [2, 'inside'],
+    'yoda': 0,
+    'strict': [2, 'global'],
+    'init-declarations': 0,
+    'no-catch-shadow': 2,
+    'no-delete-var': 2,
+    'no-label-var': 0,
+    'no-shadow-restricted-names': 0,
+    'no-shadow': 0,
+    'no-undef-init': 0,
+    'no-undef': 0,
+    'no-undefined': 0,
+    'no-unused-vars': 2,
+    'no-use-before-define': 0,
+    'callback-return': 0,
+    'handle-callback-err': 2,
+    'no-mixed-requires': 0,
+    'no-new-require': 0,
+    'no-path-concat': 2,
+    'no-process-exit': 2,
+    'no-restricted-modules': 0,
+    'no-sync': 0,
+    'array-bracket-spacing': 2,
+    'brace-style': [2, '1tbs', {
+      'allowSingleLine': true
+    }],
+    'camelcase': 2,
+    'comma-spacing': 2,
+    'comma-style': [2, 'last'],
+    'computed-property-spacing': 0,
+    'consistent-this': [0, 'self', 'that'],
+    'eol-last': 0,
+    'func-names': 0,
+    'func-style': 0,
+    'id-length': 0,
+    'indent': [2, 2, {
+      'VariableDeclarator': 1,
+      'SwitchCase': 1,
+      'ignoredNodes': [
+        'TemplateLiteral'
+      ]
+    }],
+    'key-spacing': [2, {
+      'beforeColon': false,
+      'afterColon': true
+    }],
+    'lines-around-comment': 0,
+    'linebreak-style': 0,
+    'max-nested-callbacks': [2, { 'maximum': 8 }],
+    'new-cap': 2,
+    'new-parens': 2,
+    'no-array-constructor': 2,
+    'no-continue': 0,
+    'no-inline-comments': 0,
+    'no-lonely-if': 0,
+    'no-mixed-spaces-and-tabs': [2, 'smart-tabs'],
+    'no-multiple-empty-lines': [2, { 'max': 1 }],
+    'no-nested-ternary': 0,
+    'no-new-object': 2,
+    'no-spaced-func': 2,
+    'no-ternary': 0,
+    'no-trailing-spaces': 0,
+    'no-underscore-dangle': [2, { 'allowAfterThis': true }],
+    'no-unneeded-ternary': 2,
+    'object-curly-spacing': [2, 'always', {}],
+    'one-var': 0,
+    'operator-assignment': 0,
+    'operator-linebreak': 0,
+    'padded-blocks': [2, { 'switches': 'always' }],
+    'quote-props': [2, 'consistent'],
+    'quotes': [2, 'single', 'avoid-escape'],
+    'id-match': 0,
+    'semi-spacing': [2, { 'after': true }],
+    'semi': [2, 'always'],
+    'sort-vars': 0,
+    'keyword-spacing': 2,
+    'space-before-blocks': 2,
+    'space-before-function-paren': 0,
+    'space-in-parens': 2,
+    'space-infix-ops': 2,
+    'space-return-throw-case': 0,
+    'space-unary-ops': 0,
+    'spaced-comment': [2, 'always', {
+      'line': {
+        'markers': ['/'],
+        'exceptions': ['-', '+']
+      },
+      'block': {
+        'markers': ['!'],
+        'exceptions': ['*']
+      }
+    }],
+    'wrap-regex': 2,
+    'arrow-parens': 0,
+    'arrow-spacing': 0,
+    'constructor-super': 0,
+    'generator-star-spacing': 0,
+    'no-class-assign': 0,
+    'no-const-assign': 0,
+    'no-this-before-super': 0,
+    'no-var': 0,
+    'object-shorthand': 0,
+    'prefer-const': 0,
+    'prefer-spread': 0,
+    'prefer-reflect': 0,
+    'require-yield': 0,
+    'max-depth': [2, 4],
+    'max-len': [2, 200, 1, { 'ignorePattern': 'true' }],
+    'max-params': 0,
+    'max-statements': 0,
+    'no-bitwise': [2, { 'allow': ['~'] }],
+    'no-plusplus': 2
+  }
+};

package/.gitattributes

@@ -0,0 +1,16 @@
+*         text eol=lf
+
+*.bat     text eol=crlf
+*.sh      text eol=lf
+
+*.jpg     binary
+*.jpeg    binary
+*.png     binary
+*.avif    binary
+*.webp    binary
+*.gif     binary
+*.ico     binary
+*.woff    binary
+*.woff2   binary
+*.ttf     binary
+*.eot     binary

package/.github/workflows/ci-win.yml

@@ -0,0 +1,31 @@
+name: Continuous Integration (Windows)
+
+on: [pull_request]
+
+jobs:
+
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node: [22, 24]
+
+    steps:
+    - uses: actions/checkout@v6
+    - name: Use Node.js ${{ matrix.node }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ matrix.node }}
+    - name: Installing project dependencies
+      run: |
+        npm ci
+    - name: Lint
+      run: |
+        npm run lint
+    - name: Test
+      run: |
+        npm run test
+    - name: Build
+      run: |
+        npm run build

package/.github/workflows/ci.yml

@@ -0,0 +1,31 @@
+name: Continuous Integration
+
+on: [pull_request]
+
+jobs:
+
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node: [22, 24]
+
+    steps:
+    - uses: actions/checkout@v6
+    - name: Use Node.js ${{ matrix.node }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ matrix.node }}
+    - name: Installing project dependencies
+      run: |
+        npm ci
+    - name: Lint
+      run: |
+        npm run lint
+    - name: Test
+      run: |
+        npm run test
+    - name: Build
+      run: |
+        npm run build

package/.nvmrc

@@ -0,0 +1 @@
+22.18.0

package/README.md

@@ -0,0 +1,103 @@
+# eleventy-plugin-wcc
+
+## Overview
+
+[**Eleventy**](https://www.11ty.dev/) plugin for rendering native Web Components using [**Web Components Compiler (WCC)**](https://github.com/ProjectEvergreen/wcc).
+
+> _A [starter kit](https://github.com/thescientist13/eleventy-starter-wcc/) for 11ty + WCC is also available._
+
+## Installation
+
+Install from NPM.
+
+```sh
+$ npm i -D @projectevergreen/eleventy-plugin-wcc
+```
+
+## Configuration
+
+Add the plugin to your _eleventy.js_ config and provide a [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) for all _top level_ custom element definitions you use.
+```js
+import { wccPlugin } from '@projectevergreen/eleventy-plugin-wcc';
+
+module.exports = function(eleventyConfig) {
+  eleventyConfig.addPlugin(wccPlugin, {
+    definitions: [
+      new URL('./src/js/my-element.js', import.meta.url)
+    ]
+  });
+};
+```
+
+## Usage
+
+### 1. Create a Custom Element
+
+Write a custom element like below.  In this case, we are using [Declarative Shadow DOM](https://web.dev/declarative-shadow-dom/).
+
+```js
+// src/components/greeting.js
+const template = document.createElement('template');
+
+template.innerHTML = `
+  <p>Hello from the greeting component!</p>
+`;
+
+export default class GreetingComponent extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  async connectedCallback() {
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+}
+
+customElements.define('x-greeting', GreetingComponent);
+```
+
+### 2. Update Configuration
+
+Add your custom element paths to your _.eleventy.js_ config
+
+```js
+import { wccPlugin } from '@projectevergreen/eleventy-plugin-wcc';
+
+module.exports = function(eleventyConfig) {
+  eleventyConfig.addPlugin(wccPlugin, {
+    definitions: [
+      new URL('./src/components/my-element.js', import.meta.url)
+    ]
+  });
+};
+```
+
+### 3. Use It!
+
+Now in your content or layouts, use the custom element.
+```md
+<!-- src/index.md -->
+# Hello From 11ty + WCC! 👋
+
+<x-greeting></x-greeting>
+```
+
+----
+
+Now if you run `eleventy`, you should get an _index.html_ in your _site/_ directory with the custom element content pre-rendered!  🎈
+```html
+<h2>Hello From 11ty + WCC!</h2>
+
+<x-greeting>
+  <template shadowroot="open">
+    <p>Hello from the greeting component!</p>
+  </template>
+</x-greeting>
+```
+
+## Options
+
+`trimParagraphTagsInMd` (bool, default true) - Trims unexpected `<p>` tags that markdown puts around custom elements [more details](https://github.com/ProjectEvergreen/eleventy-plugin-wcc/issues/8).
+
+> _Please follow along in our [issue tracker](https://github.com/ProjectEvergreen/eleventy-plugin-wcc/issues) or make a suggestion!_

package/TODO.md

@@ -0,0 +1,7 @@
+1. [ ] deps upgrade
+1. [ ] min node version 
+1. [ ] ESM
+1. [ ] github actions
+1. [ ] README
+1. [ ] reload breaks on `require.cache`
+1. [ ] downstream test

package/demo/components/greeting.js

@@ -0,0 +1,18 @@
+const template = document.createElement('template');
+
+template.innerHTML = `
+  <p>Hello from the greeting component!</p>
+`;
+
+export default class GreetingComponent extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  async connectedCallback() {
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+}
+
+customElements.define('x-greeting', GreetingComponent);

package/demo/index.md

@@ -0,0 +1,3 @@
+## 11ty + WCC Demo
+
+<x-greeting></x-greeting>

package/netlify.toml

@@ -0,0 +1,9 @@
+[build]
+  publish = "_site/"
+  command = "npm run build"
+
+[build.processing]
+  skip_processing = true
+
+[build.environment]
+  NODE_VERSION = "22.18.0"

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@projectevergreen/eleventy-plugin-wcc",
+  "version": "0.3.0",
+  "description": "An Eleventy plugin for rendering Web Components with WCC.",
+  "repository": "https://github.com/ProjectEvergreen/eleventy-plugin-wcc",
+  "main": "src/index.js",
+  "author": "Owen Buckley <owen@thegreenhouse.io>",
+  "type": "module",
+  "license": "MIT",
+  "keywords": [
+    "Eleventy",
+    "WCC",
+    "Web Components"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "rimraf ./_site",
+    "lint": "eslint \"src/**/*.js\" \"demo/**/*.js\"",
+    "test": "node --test",
+    "build": "npm run clean && eleventy",
+    "demo": "npm run build -- --serve"
+  },
+  "peerDependencies": {
+    "@11ty/eleventy": "^3.1.0"
+  },
+  "dependencies": {
+    "parse5": "^8.0.0",
+    "wc-compiler": "~0.18.0"
+  },
+  "devDependencies": {
+    "@11ty/eleventy": "^3.1.0",
+    "eslint": "^8.18.0",
+    "rimraf": "^3.0.2"
+  }
+}

package/src/index.js

@@ -0,0 +1,37 @@
+import { renderFromHTML } from 'wc-compiler';
+import { stripWrappingParagraphs } from './utils.js';
+
+export const wccPlugin = {
+  configFunction: function (eleventyConfig, options = {}) {
+    const { definitions = [], trimParagraphTagsInMd = true } = options;
+    const definitionPathnames = definitions.map(definition => definition.pathname);
+
+    for (const definition of definitions) {
+      eleventyConfig.addWatchTarget(definition.pathname);
+    }
+
+    eleventyConfig.addTransform('wcc', async function (content, outputPath) {
+      if (!outputPath.endsWith('.html')) {
+        return;
+      }
+
+      const processedContent =
+        trimParagraphTagsInMd && this.inputPath.endsWith('.md')
+          ? stripWrappingParagraphs(content)
+          : content;
+
+      const { html } = await renderFromHTML(processedContent, definitions);
+      return html;
+    });
+
+    eleventyConfig.on('eleventy.beforeWatch', async (changedFiles) => {
+      for (const file of changedFiles) {
+        if (definitionPathnames.includes(file)) {
+          // naive cache busting solution for ESM
+          // https://github.com/nodejs/help/issues/2806
+          await import(`${file}?t=${Date.now()}`); 
+        }
+      }
+    });
+  }
+};

package/src/utils.js

@@ -0,0 +1,61 @@
+import * as parse5 from 'parse5';
+
+function isWhitespaceTextNode(node) {
+  return node.nodeName === '#text' && (/^[\t\n\r ]*$/).test(node.value);
+}
+
+export const stripWrappingParagraphs = (html) => {
+  const isFullHtmlDoc = (/^<(!DOCTYPE )?html>/i).test(html);
+  const parsedHtml = isFullHtmlDoc ? parse5.parse(html) : parse5.parseFragment(html);
+
+  const rootNode = chooseRootNode(parsedHtml);
+  rootNode.childNodes = rootNode.childNodes.map(traverseNodes);
+
+  return parse5.serialize(parsedHtml);
+};
+
+function chooseRootNode(parsedHtml, isFullHtmlDoc) {
+  if (isFullHtmlDoc) {
+    const rootNode = parsedHtml.childNodes
+      .find((x) => x.nodeName === 'html')
+      ?.childNodes?.find((x) => x.nodeName === 'body');
+
+    if (!rootNode) {
+      throw new Error('html output is missing the body tag');
+    }
+
+    return rootNode;
+  } else {
+    return parsedHtml;
+  }
+}
+
+function traverseNodes(node) {
+  node = stripWrappingParagraph(node);
+
+  // Don't traverse children of custom elements
+  if (node.childNodes && !node.nodeName.includes('-')) {
+    node.childNodes = node.childNodes.map(traverseNodes);
+  }
+
+  return node;
+}
+
+function stripWrappingParagraph(node) {
+  if (node.nodeName !== 'p') {
+    return node;
+  }
+
+  // Ignore whitespace-only text nodes
+  const meaningfulChildren = node.childNodes.filter(
+    (child) => !isWhitespaceTextNode(child)
+  );
+
+  if (meaningfulChildren.length === 1 &&
+    meaningfulChildren[0].nodeName.includes('-')) {
+    return meaningfulChildren[0];
+  }
+
+  return node;
+}
+

package/test/plugin.test.js

@@ -0,0 +1,80 @@
+import Eleventy from '@11ty/eleventy';
+import { wccPlugin } from '../src/index.js';
+import assert from 'node:assert/strict';
+import { describe, it, before } from 'node:test';
+
+describe('WCC plugin', () => {
+  describe('Default options', () => {
+    let indexMdFile;
+
+    before(async () => {
+      const templates = await setUpTemplates();
+      ({ indexMdFile } = templates);
+    });
+
+    it('prints the header', () => {
+      const expected = '<h2>11ty + WCC Demo</h2>';
+
+      assert.ok(indexMdFile.content.includes(expected), 'Header not found');
+    });
+
+    it('prints the greeting component', () => {
+      const contentNormalized = indexMdFile.content
+        .replaceAll(/\s+/g, ' ')
+        .trim();
+      const expected =
+        '<x-greeting><template shadowrootmode="open"> <p>Hello from the greeting component!</p> </template></x-greeting>';
+
+      assert.ok(
+        contentNormalized.includes(expected),
+        'x-greeting component not found'
+      );
+    });
+
+    it('removes wrapping p tags', () => {
+      const regexp = new RegExp('<p><x-greeting>(.|\\s)*</x-greeting></p>');
+
+      assert.doesNotMatch(indexMdFile.content, regexp);
+    });
+  });
+
+  describe('trimParagraphTagsInMd: false', () => {
+    it('leaves wrapping p tags', async () => {
+      const eleventy = setUpEleventy({ trimParagraphTagsInMd: false });
+      const { indexMdFile } = await setUpTemplates(eleventy);
+      const regexp = new RegExp('<p><x-greeting>(.|\\s)*</x-greeting></p>');
+
+      assert.match(indexMdFile.content, regexp);
+    });
+  });
+});
+
+function setUpEleventy(pluginOptions = {}) {
+  return new Eleventy('test-fixtures', 'test/output', {
+    configPath: null,
+    config: function (eleventyConfig) {
+      eleventyConfig.addPlugin(wccPlugin, {
+        definitions: [
+          new URL('../test-fixtures/components/greeting.js', import.meta.url)
+        ],
+        ...pluginOptions
+      });
+    }
+  });
+}
+
+async function setUpTemplates(eleventy = null) {
+  eleventy ??= setUpEleventy();
+
+  await eleventy.init();
+  const elevOutput = await eleventy.toJSON();
+
+  const indexMdFile = elevOutput.find(
+    (template) => template.inputPath === './test-fixtures/index.md'
+  );
+
+  assert.ok(indexMdFile, 'Precondition failed: demo/index.md not found');
+
+  return { indexMdFile };
+}
+

package/test/utils.test.js

@@ -0,0 +1,98 @@
+import { stripWrappingParagraphs } from '../src/utils.js';
+import assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
+
+describe('stripWrappingParagraphs', () => {
+  describe('Html fragment', () => {
+    it('removes wrapping p tags', async () => {
+      const input = '<p><x-greeting></x-greeting></p>';
+      const expected = '<x-greeting></x-greeting>';
+
+      const result = stripWrappingParagraphs(input);
+
+      assert.equal(result, expected);
+    });
+
+    it('removes wrapping p tags (inner content)', async () => {
+      const input = '<p><x-greeting>inner content</x-greeting></p>';
+      const expected = '<x-greeting>inner content</x-greeting>';
+
+      const result = stripWrappingParagraphs(input);
+
+      assert.equal(result, expected);
+    });
+
+    it('removes wrapping p tags (inner content, newlines)', async () => {
+      const input = '<p><x-greeting>inner\ncontent</x-greeting></p>';
+      const expected = '<x-greeting>inner\ncontent</x-greeting>';
+
+      const result = stripWrappingParagraphs(input);
+
+      assert.equal(result, expected);
+    });
+
+    it('removes wrapping p tags (whitespace)', async () => {
+      const input = '<p> \n\t<x-greeting></x-greeting> \n</p>';
+      const expected = '<x-greeting></x-greeting>';
+
+      const result = stripWrappingParagraphs(input);
+
+      assert.equal(result, expected);
+    });
+
+    it('does not remove wrapping p tags if it includes other content', async () => {
+      const input = '<p>Hello <x-greeting></x-greeting></p>';
+
+      const result = stripWrappingParagraphs(input);
+
+      assert.equal(result, input);
+    });
+
+    it('removes wrapping p tags (multiple)', async () => {
+      const input =
+        '<p><x-greeting></x-greeting></p>\n<p><x-test></x-test></p>';
+      const expected = '<x-greeting></x-greeting>\n<x-test></x-test>';
+
+      const result = stripWrappingParagraphs(input);
+
+      assert.equal(result, expected);
+    });
+
+    it('removes nested wrapping p tags', async () => {
+      const input = '<main><p><x-greeting></x-greeting></p></main>';
+      const expected = '<main><x-greeting></x-greeting></main>';
+
+      const result = stripWrappingParagraphs(input);
+
+      assert.equal(result, expected);
+    });
+
+    it('removes double nested wrapping p tags', async () => {
+      const input = '<main><div><p><x-greeting></x-greeting></p></div></main>';
+      const expected = '<main><div><x-greeting></x-greeting></div></main>';
+
+      const result = stripWrappingParagraphs(input);
+
+      assert.equal(result, expected);
+    });
+  });
+
+  describe('Html document', () => {
+    it('preserves html, head, and body tags', () => {
+      const input = '<!DOCTYPE html><html lang="en"><head></head><body><p>Hello</p></body></html>';
+
+      const result = stripWrappingParagraphs(input);
+
+      assert.equal(result, input);
+    });
+
+    it('strips p tags in body', () => {
+      const input = '<!DOCTYPE html><html lang="en"><head></head><body><p><x-greeting></x-greeting></p></body></html>';
+      const expected = '<!DOCTYPE html><html lang="en"><head></head><body><x-greeting></x-greeting></body></html>';
+
+      const result = stripWrappingParagraphs(input);
+
+      assert.equal(result, expected);
+    });
+  });
+});

package/test-fixtures/components/greeting.js

@@ -0,0 +1,18 @@
+const template = document.createElement('template');
+
+template.innerHTML = `
+  <p>Hello from the greeting component!</p>
+`;
+
+export default class GreetingComponent extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  async connectedCallback() {
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+}
+
+customElements.define('x-greeting', GreetingComponent);

package/test-fixtures/index.md

@@ -0,0 +1,3 @@
+## 11ty + WCC Demo
+
+<x-greeting></x-greeting>