Merge pull request #16 from KiwiKilian/feature/eleventy-3-esm

Upgrade to Eleventy v3, ESM and Vite v5
matthiasott · Aug 19, 2024 · 23e95b3 · 23e95b3
2 parents 68911ba + 7ffbe2b
commit 23e95b3
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 25 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -1,20 +1,19 @@
-const markdownIt = require('markdown-it')
-const markdownItAnchor = require('markdown-it-anchor')
+import markdownIt from 'markdown-it'
+import markdownItAnchor from 'markdown-it-anchor'
 
-const EleventyPluginNavigation = require('@11ty/eleventy-navigation')
-const EleventyPluginRss = require('@11ty/eleventy-plugin-rss')
-const EleventyPluginSyntaxhighlight = require('@11ty/eleventy-plugin-syntaxhighlight')
-const EleventyVitePlugin = require('@11ty/eleventy-plugin-vite')
+import EleventyPluginNavigation from '@11ty/eleventy-navigation';
+import EleventyPluginRss from '@11ty/eleventy-plugin-rss'
+import EleventyPluginSyntaxhighlight from '@11ty/eleventy-plugin-syntaxhighlight'
+import EleventyVitePlugin from '@11ty/eleventy-plugin-vite'
 
-const rollupPluginCritical = require('rollup-plugin-critical').default
+import rollupPluginCritical from 'rollup-plugin-critical'
 
-const filters = require('./utils/filters.js')
-const transforms = require('./utils/transforms.js')
-const shortcodes = require('./utils/shortcodes.js')
 
-const { resolve } = require('path')
+import filters from './utils/filters.js'
+import transforms from './utils/transforms.js'
+import shortcodes from './utils/shortcodes.js'
 
-module.exports = function (eleventyConfig) {
+export default function (eleventyConfig) {
 	eleventyConfig.setServerPassthroughCopyBehavior('copy');
 	eleventyConfig.addPassthroughCopy("public");
 

diff --git a/README.md b/README.md
@@ -5,9 +5,9 @@ A clean and fast Eleventy Starter Project with Vite.
 [![Netlify Status](https://api.netlify.com/api/v1/badges/ef99b4ea-199f-497b-84c1-48c34355da8a/deploy-status)](https://app.netlify.com/sites/eleventyplusvite/deploys)
 ## Features
 
-* Eleventy 2.0.1
-* New Eleventy 2.0 Dev Server with live reload
-* Vite 5.1
+* Eleventy v3
+* Eleventy Dev Server with live reload
+* Vite v5
 * Vite as Middleware in Eleventy Dev Server (uses [eleventy-plugin-vite](https://github.com/11ty/eleventy-plugin-vite/))
 * Eleventy build output is post-processed by [Vite](https://vitejs.dev) (with Rollup)
 * CSS/Sass post-processing with PostCSS incl. [Autoprefixer](https://github.com/postcss/autoprefixer) and cssnano
@@ -65,7 +65,7 @@ npx @11ty/eleventy
 [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/matthiasott/eleventy-plus-vite)
 
 ## CSS
-By default, this starter project uses Sass with an opinionated folder structure. Feel free to replace this structure with your own. If you prefer to write standards-compliant, good old plain CSS, this is also supported. Nesting is then possible via the [PostCSS Nesting plugin](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting), following the [CSS Nesting specification](https://drafts.csswg.org/css-nesting-1/). 
+By default, this starter project uses Sass with an opinionated folder structure. Feel free to replace this structure with your own. If you prefer to write standards-compliant, good old plain CSS, this is also supported. Nesting is then possible via the [PostCSS Nesting plugin](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting), following the [CSS Nesting specification](https://drafts.csswg.org/css-nesting-1/).
 
 [Autoprefixer](https://github.com/postcss/autoprefixer) adds necessary browser prefixes. The [browserslist](https://github.com/browserslist/browserslist) settings can be adjusted in `package.json`.
 

diff --git a/package.json b/package.json
@@ -1,6 +1,7 @@
 {
   "name": "eleventy-plus-vite",
   "version": "1.2.0",
+	"type": "module",
   "description": "A clean and simple Eleventy 2 Starter Kit with Vite",
   "browserslist": [
     "> 0.5%",
@@ -26,12 +27,12 @@
   },
   "homepage": "https://github.com/matthiasott/11ty22#readme",
   "devDependencies": {
-    "@11ty/eleventy": "^2.0.1",
+    "@11ty/eleventy": "^3.0.0-alpha.14",
     "@11ty/eleventy-img": "^4.0.2",
     "@11ty/eleventy-navigation": "^0.3.5",
     "@11ty/eleventy-plugin-rss": "^1.2.0",
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
-    "@11ty/eleventy-plugin-vite": "^4.0.0",
+    "@11ty/eleventy-plugin-vite": "^5.0.0-alpha.1",
     "autoprefixer": "^10.4.16",
     "cssnano": "^6.0.1",
     "cssremedy": "^0.1.0-beta.2",
@@ -49,6 +50,6 @@
     "postcss-nesting": "^12.0.1",
     "rollup-plugin-critical": "^1.0.13",
     "sass": "^1.69.5",
-    "vite": "^5.1.5"
+    "vite": "^5.3.3"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     'postcss-nesting': {},
     'autoprefixer': {},

diff --git a/src/_data/build.js b/src/_data/build.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
     env: process.env.ELEVENTY_ENV,
     timestamp: new Date()
 }
diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss
@@ -1,7 +1,7 @@
 /* 1. Settings */
-@use '../../../node_modules/cssremedy/css/remedy';
+@use 'cssremedy/css/remedy';
 @use "1-settings/global";
-  
+
 /* 2. Design Tokens */
 @use "2-design-tokens/colors";
 @use "2-design-tokens/fonts";

diff --git a/utils/filters.js b/utils/filters.js
@@ -1,6 +1,6 @@
-const { DateTime } = require('luxon')
+import { DateTime } from 'luxon'
 
-module.exports = {
+export default {
     dateToFormat: function (date, format) {
         return DateTime.fromJSDate(date, { zone: 'utc' }).toFormat(
             String(format)

diff --git a/utils/shortcodes.js b/utils/shortcodes.js
@@ -0,0 +1 @@
+export default {}
diff --git a/utils/transforms.js b/utils/transforms.js
@@ -0,0 +1 @@
+export default {}