ESM docs for WebC, Markdown 11ty/eleventy#836

eleventy.config.js

@@ -6,6 +6,7 @@ import commaNumber from "comma-number";
 import slugify from "slugify";
 import lodashGet from "lodash/get.js";
 import shortHash from "short-hash";
+import { ImportTransformer } from "esm-import-transformer";
 
 import syntaxHighlightPlugin from "@11ty/eleventy-plugin-syntaxhighlight";
 import navigationPlugin from "@11ty/eleventy-navigation";
@@ -414,6 +415,19 @@ export default async function (eleventyConfig) {
 		return `id-${++ref}`;
 	});
 
+	// TODO memoize
+	eleventyConfig.addFilter("esmToCjs", (sourceCode) => {
+		try {
+			let it = new ImportTransformer(sourceCode);
+
+			let outputCode = it.transformToRequire();
+			return outputCode.replace("export default ", "module.exports = ");
+		} catch(e) {
+			console.log( sourceCode );
+			throw e;
+		}
+	})
+
 	eleventyConfig.addShortcode("image", shortcodes.image);
 	eleventyConfig.addShortcode("avatarlocalcache", shortcodes.avatar);
 	eleventyConfig.addShortcode("communityavatar", shortcodes.communityAvatar);

package.json

@@ -56,6 +56,7 @@
     "degit": "^2.8.4",
     "dotenv": "^16.3.1",
     "entities": "^4.4.0",
+    "esm-import-transformer": "^3.0.2",
     "fast-glob": "^3.3.1",
     "fs-extra": "^11.1.0",
     "human-readable-numbers": "0.9.5",

src/_includes/snippets/configDefinition.njk

@@ -6,16 +6,12 @@
   {% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: tabid, only: "jsesm,jscjs"} %}
   <div id="{{ tabid }}-jsesm" role="tabpanel">
   {% highlight "js" %}
-export default function (eleventyConfig) {
 {{- configCodeContent | safe -}}
-};
   {% endhighlight %}
   </div>
   <div id="{{ tabid }}-jscjs" role="tabpanel">
   {% highlight "js" %}
-module.exports = function (eleventyConfig) {
-{{- configCodeContent | safe -}}
-};
+{{- configCodeContent | esmToCjs | safe -}}
   {% endhighlight %}
   </div>
 </seven-minute-tabs>

src/_includes/snippets/webc/render.njk

@@ -0,0 +1,57 @@
+<is-land on:visible import="/js/seven-minute-tabs.js">
+<seven-minute-tabs persist sync class="tabs-flush">
+{% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: "webc-render"} %}
+<div id="webc-render-liquid" role="tabpanel">
+
+{% raw %}
+```liquid
+{% renderTemplate "webc" %}
+<my-custom-component></my-custom-component>
+{% endrenderTemplate %}
+```
+{% endraw %}
+
+</div>
+<div id="webc-render-njk" role="tabpanel">
+
+{% raw %}
+```njk
+{% renderTemplate "webc" %}
+<my-custom-component></my-custom-component>
+{% endrenderTemplate %}
+```
+{% endraw %}
+
+</div>
+<div id="webc-render-js" role="tabpanel">
+
+{% raw %}
+```js
+export default async function () {
+	let content = await this.renderTemplate(
+		`<my-custom-component></my-custom-component>`,
+		"webc"
+	);
+	return content;
+};
+```
+{% endraw %}
+
+</div>
+<div id="webc-render-cjs" role="tabpanel">
+
+{% raw %}
+```js
+module.exports = async function () {
+	let content = await this.renderTemplate(
+		`<my-custom-component></my-custom-component>`,
+		"webc"
+	);
+	return content;
+};
+```
+{% endraw %}
+
+</div>
+</seven-minute-tabs>
+</is-land>

src/docs/dev-server.md

@@ -30,6 +30,7 @@ _Read more detail on the [Eleventy Dev Server 1.0 release notes](https://github.
 You can configure the server with the new `setServerOptions` Configuration API method.
 
 {% set configCodeContent %}
+export default function(eleventyConfig) {
 	eleventyConfig.setServerOptions({
 		// Default values are shown:
 
@@ -73,13 +74,15 @@ You can configure the server with the new `setServerOptions` Configuration API m
 		// for on-request processing (read more below).
 		onRequest: {},
 	});
+};
 {% endset %}
 {% include "snippets/configDefinition.njk" %}
 
 <details>
 <summary><strong>Expand to see the Full options list</strong></summary>
 
 {% set configCodeContent %}
+export default function(eleventyConfig) {
 	eleventyConfig.setServerOptions({
 		// Change the name of the folder name used for injected scripts
 		injectedScriptsFolder: ".11ty",
@@ -96,6 +99,7 @@ You can configure the server with the new `setServerOptions` Configuration API m
 		// Alias for backwards compatibility, renamed to `domDiff` in Dev Server 1.0+
 		domdiff: true,
 	});
+};
 {% endset %}
 {% include "snippets/configDefinition.njk" %}
 
@@ -120,6 +124,7 @@ Try out the [`devcert-cli`](https://github.com/davewasmer/devcert-cli) package t
 {% addedin "3.0.0-alpha.7" %}{% addedin "Dev Server 2.0.0" %} Use the new `onRequest` object to configure some of your project to use on-request-time processing. The keys in this object represent strings from the [URL Pattern API](https://developer.mozilla.org/en-US/docs/Web/API/URL_Pattern_API).
 
 {% set configCodeContent %}
+export default function(eleventyConfig) {
 	eleventyConfig.setServerOptions({
 		onRequest: {
 			"/": function({ url }) {
@@ -141,12 +146,14 @@ Try out the [`devcert-cli`](https://github.com/davewasmer/devcert-cli) package t
 			}
 		}
 	});
+};
 {% endset %}
 {% include "snippets/configDefinition.njk" %}
 
 Works great with the [`process.env.ELEVENTY_RUN_MODE` environment variable](/docs/environment-vars/#eleventy-supplied) to change how your server operates during`--serve` mode.
 
 {% set configCodeContent %}
+export default function(eleventyConfig) {
 	// Intercept all requests during --serve mode.
 	if(process.env.ELEVENTY_RUN_MODE === "serve") {
 		eleventyConfig.setServerOptions({
@@ -158,6 +165,7 @@ Works great with the [`process.env.ELEVENTY_RUN_MODE` environment variable](/doc
 			}
 		});
 	}
+};
 {% endset %}
 {% include "snippets/configDefinition.njk" %}
 
@@ -178,6 +186,7 @@ npm install @11ty/eleventy-server-browsersync
 Then, enable it in your configuration file:
 
 {% set configCodeContent %}
+export default function(eleventyConfig) {
 	eleventyConfig.setServerOptions({
 		module: "@11ty/eleventy-server-browsersync",
 
@@ -191,6 +200,7 @@ Then, enable it in your configuration file:
 		// Opt-out of the Browsersync snippet
 		// snippet: false,
 	});
+};
 {% endset %}
 {% include "snippets/configDefinition.njk" %}
 

src/docs/events.md

@@ -24,11 +24,13 @@ Asynchronous callback function support added in v1.0.
 The `eleventy.before` event runs every time Eleventy starts building, so it will run before the start of each stand-alone build, as well as each time building starts as either part of `--watch` or `--serve`. To use it, attach the event handler to your Eleventy config:
 
 {% set configCodeContent %}
+export default function(eleventyConfig) {
 	// Async-friendly in 1.0+
 	// Arguments added in 2.0+
 	eleventyConfig.on("eleventy.before", async ({ dir, runMode, outputMode }) => {
 		// Run me before the build starts
 	});
+}
 {% endset %}
 {% include "snippets/configDefinition.njk" %}
 
@@ -39,6 +41,7 @@ The `eleventy.before` event runs every time Eleventy starts building, so it will
 The `eleventy.after` event runs every time Eleventy finishes building, so it will run after the end of each stand-alone build, as well as each time building ends as either part of `--watch` or `--serve`. To use it, attach the event handler to your Eleventy config:
 
 {% set configCodeContent %}
+export default function(eleventyConfig) {
 	// Async-friendly in 1.0+
 	// Arguments added in 2.0+
 	eleventyConfig.on(
@@ -47,6 +50,7 @@ The `eleventy.after` event runs every time Eleventy finishes building, so it wil
 			// Run me after the build ends
 		}
 	);
+};
 {% endset %}
 {% include "snippets/configDefinition.njk" %}
 
@@ -55,6 +59,7 @@ The `eleventy.after` event runs every time Eleventy finishes building, so it wil
 Eleventy now provides an object with metadata on the build as an argument to the `eleventy.before` and `eleventy.after` event callbacks.
 
 {% set configCodeContent %}
+export default function(eleventyConfig) {
 	eleventyConfig.on("eleventy.before", async ({ dir, runMode, outputMode }) => {
 		// Read more below
 	});
@@ -65,6 +70,7 @@ Eleventy now provides an object with metadata on the build as an argument to the
 			// Read more below
 		}
 	);
+};
 {% endset %}
 {% include "snippets/configDefinition.njk" %}
 
@@ -96,12 +102,14 @@ Eleventy now provides an object with metadata on the build as an argument to the
 The `eleventy.beforeWatch` event runs before a build is run _only_ if it's a re-run during `--watch` or `--serve`. This means it will neither run during the initial build nor during stand-alone builds. To use it, attach the event handler to your Eleventy config:
 
 {% set configCodeContent %}
+export default function(eleventyConfig) {
 	// Async-friendly in 1.0+
 	eleventyConfig.on("eleventy.beforeWatch", async (changedFiles) => {
 		// Run me before --watch or --serve re-runs
 		// changedFiles is an array of files that changed
 		// to trigger the watch/serve build
 	});
+};
 {% endset %}
 {% include "snippets/configDefinition.njk" %}
 
@@ -112,10 +120,12 @@ The `changedFiles` parameter was {% addedin "0.11.1" %}.
 This event facilitates the [i18n plugin](/docs/plugins/i18n/) (but is available independent of it).
 
 {% set configCodeContent %}
+export default function(eleventyConfig) {
 	// Async-friendly
 	eleventyConfig.on("eleventy.contentMap", async ({ inputPathToUrl, urlToInputPath }) => {
 		// inputPathToUrl is an object mapping input file paths to output URLs
 		// urlToInputPath is an object mapping output URLs to input file paths
 	});
+};
 {% endset %}
 {% include "snippets/configDefinition.njk" %}