feat: #4 upgrade 11ty v3 and adopt ESM (#17)

* feat: #4 upgrade 11ty v3

* docs: #4 update README

* update component definition

* feat: #4 update dev mode cache busting for ESM

* feat: upgrade v6 action checkout

Author: thescientist13

.eleventy.js

@@ -1,11 +1,9 @@
-const path = require('path');
-const { pathToFileURL } = require('url');
-const wccPlugin = require('./src/index');
+import { wccPlugin } from './src/index.js';
 
-module.exports = function(eleventyConfig) {
+export default function(eleventyConfig) {
   eleventyConfig.addPlugin(wccPlugin, {
     definitions: [
-      pathToFileURL(path.join(__dirname, './demo/components/greeting.js'))
+      new URL('./demo/components/greeting.js', import.meta.url)
     ]
   });
 

.github/workflows/ci-win.yml

@@ -5,16 +5,16 @@ on: [pull_request]
 jobs:
 
   build:
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node: [14, 16]
+        node: [22, 24]
 
     steps:
-    - uses: actions/checkout@v1
+    - uses: actions/checkout@v6
     - name: Use Node.js ${{ matrix.node }}
-      uses: actions/setup-node@v2
+      uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node }}
     - name: Installing project dependencies
@@ -23,9 +23,6 @@ jobs:
     - name: Lint
       run: |
         npm run lint
-    # - name: Test
-    #   run: |
-    #     yarn test
     - name: Build
       run: |
-        npm run clean && npm run build
+        npm run build

.github/workflows/ci.yml

@@ -5,16 +5,16 @@ on: [pull_request]
 jobs:
 
   build:
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node: [14, 16]
+        node: [22, 24]
 
     steps:
-    - uses: actions/checkout@v1
+    - uses: actions/checkout@v6
     - name: Use Node.js ${{ matrix.node }}
-      uses: actions/setup-node@v2
+      uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node }}
     - name: Installing project dependencies
@@ -23,9 +23,6 @@ jobs:
     - name: Lint
       run: |
         npm run lint
-    # - name: Test
-    #   run: |
-    #     yarn test
     - name: Build
       run: |
-        npm run clean && npm run build
+        npm run build

.github/workflows/master.yml

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

.nvmrc

@@ -11,21 +11,19 @@
 Install from NPM.
 
 ```sh
-$ npm install eleventy-plugin-wcc --save-dev
+$ npm i -D 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
-const path = require('path');
-const { pathToFileURL } = require('url');
-const wccPlugin = require('./src/index');
+import { wccPlugin } from './src/index.js';
 
 module.exports = function(eleventyConfig) {
   eleventyConfig.addPlugin(wccPlugin, {
     definitions: [
-      pathToFileURL(path.join(__dirname, './src/js/my-element.js'))
+      new URL('./src/js/my-element.js', import.meta.url)
     ]
   });
 };
@@ -34,16 +32,18 @@ module.exports = function(eleventyConfig) {
 ## 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/js/greeting.js
+// src/components/greeting.js
 const template = document.createElement('template');
 
 template.innerHTML = `
   <p>Hello from the greeting component!</p>
 `;
 
-class GreetingComponent extends HTMLElement {
+export default class GreetingComponent extends HTMLElement {
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
@@ -54,30 +54,27 @@ class GreetingComponent extends HTMLElement {
   }
 }
 
-module.exports = GreetingComponent; // using module.exports!
-
 customElements.define('x-greeting', GreetingComponent);
 ```
 
-> **Note**: Since [Eleventy does not support ESM yet](https://github.com/11ty/eleventy/issues/836), you will need to use `module.exports = XXX` instead of `export default XXX` for your definitions.
-
 ### 2. Update Configuration
+
 Add your custom element paths to your _.eleventy.js_ config
+
 ```js
-const path = require('path');
-const { pathToFileURL } = require('url');
-const wccPlugin = require('eleventy-plugin-wcc');
+import { wccPlugin } from './src/index.js';
 
 module.exports = function(eleventyConfig) {
   eleventyConfig.addPlugin(wccPlugin, {
     definitions: [
-      pathToFileURL(path.join(__dirname, './src/js/greeting.js'))
+      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 -->
@@ -91,13 +88,12 @@ Now in your content or layouts, use the custom element.
 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>
-<p>
-  <x-greeting>
-    <template shadowroot="open">
-      <p>Hello from the greeting component!</p>
-    </template>
-  </x-greeting>
-</p>
+
+<x-greeting>
+  <template shadowroot="open">
+    <p>Hello from the greeting component!</p>
+  </template>
+</x-greeting>
 ```
 
 ## Options

README.md

@@ -4,7 +4,7 @@ template.innerHTML = `
   <p>Hello from the greeting component!</p>
 `;
 
-class GreetingComponent extends HTMLElement {
+export default class GreetingComponent extends HTMLElement {
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
@@ -15,6 +15,4 @@ class GreetingComponent extends HTMLElement {
   }
 }
 
-module.exports = GreetingComponent;
-
 customElements.define('x-greeting', GreetingComponent);

demo/components/greeting.js

@@ -6,4 +6,4 @@
   skip_processing = true
 
 [build.environment]
-  NODE_VERSION = "14.16.0"
+  NODE_VERSION = "22.18.0"