Also preprocess site examples with babel

.gitignore

@@ -4,3 +4,4 @@ coverage/
 site/public
 site/resources
 site/static/js/bundle.js
+site/**/*.dist.js

site/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env"]
+}

site/Makefile

@@ -2,9 +2,7 @@
 
 all: js site
 
-js: static/js/bundle.js
-
-static/js/bundle.js: index.js node_modules
+js: node_modules
 	npm run build
 
 node_modules: package.json

site/layouts/partials/example-single.html

@@ -1,17 +1,23 @@
 {{ $id := .File.ContentBaseName }}
+{{ $dir := .File.Dir }}
 <div id="{{ $id }}">
   {{ .Content }}
 
   {{ range .Resources.Match "*.js" }}
     {{ $example := strings.TrimSuffix ".js" .Name }}
+    {{ $distFile := printf "%s/%s.dist.js" $dir $example }}
+    {{ if not (eq ".dist" (path.Ext $example)) }}
+
   <div id="{{ $example }}" class="mount"></div>
   {{ highlight .Content "javascript" "" }}
   <script type="text/javascript">
     {
       let mountPoint = document.createElement("div");
       document.querySelector("#{{ $id }} > #{{ $example }}.mount").appendChild(mountPoint);
-      {{ .Content | safeJS }}
+      {{ readFile $distFile | safeJS }}
     }
   </script>
+
+    {{ end }}
   {{ end }}
 </div>

site/rollup.config.js

@@ -3,21 +3,46 @@ import resolve from "rollup-plugin-node-resolve";
 import commonjs from "rollup-plugin-commonjs";
 import { terser } from "rollup-plugin-terser";
 
-let commonPlugins = [
-  resolve({
-    dedupe: ["flyps"],
-  }),
-  commonjs(),
-  babel({ exclude: "node_modules/**" }),
-  terser(),
-];
+import path from "path";
+import fs from "fs";
+
+let listFiles = dir =>
+  fs.readdirSync(dir).reduce((acc, filename) => {
+    let filepath = path.join(dir, filename);
+    if (fs.lstatSync(filepath).isDirectory()) {
+      return [...acc, ...listFiles(filepath)];
+    }
+    return [...acc, filepath];
+  }, []);
 
-export default [{
-  input: "index.js",
-  output: {
-    file: "static/js/bundle.js",
-    format: "umd",
-    name: "bundle",
+let examples = listFiles("content/example")
+  .filter(file => file.endsWith(".js") && !file.endsWith(".dist.js"))
+  .map(js => ({
+    input: js,
+    output: {
+      file: path.join(path.dirname(js), path.basename(js, ".js") + ".dist.js"),
+      format: "umd",
+      name: path.basename(js, ".js"),
+    },
+    plugins: [babel({ exclude: "node_modules/**" })],
+  }));
+
+export default [
+  {
+    input: "index.js",
+    output: {
+      file: "static/js/bundle.js",
+      format: "umd",
+      name: "bundle",
+    },
+    plugins: [
+      resolve({
+        dedupe: ["flyps"],
+      }),
+      commonjs(),
+      babel({ exclude: "node_modules/**" }),
+      terser(),
+    ],
   },
-  plugins: commonPlugins,
-}];
+  ...examples,
+];