Merge branch 'demo' into dev

www/_redirects

@@ -1,3 +1,4 @@
-/locality-of-behaviour                       /essays/locality-of-behaviour
-/posts/2020-6-19-htmx-0.0.5-is-released/     /posts/2020-6-20-htmx-0.0.6-is-released/
-/discord                                     https://discord.gg/Z6gPqAd
+/locality-of-behaviour                      /essays/locality-of-behaviour
+/posts/2020-6-19-htmx-0.0.5-is-released/    /posts/2020-6-20-htmx-0.0.6-is-released/
+/discord                                    https://discord.gg/Z6gPqAd
+https://demo.htmx.org/*                     /js/demo/it.js  200!

www/docs.md

@@ -1034,6 +1034,54 @@ point in the `issueAjaxRequest()` and `handleAjaxResponse()` methods to see what
 
 And always feel free to jump on the [Discord](https://htmx.org/discord) if you need help.
 
+### <a name="creating-demos">[Creating Demos](#creating-demos)
+
+Sometimes, in order to demonstrate a bug or clarify a usage, it is nice to be able to use a javascript snippet
+site like [jsfiddle](https://jsfiddle.net/).  To facilitate easy demo creation, htmx hosts a demo script
+site that will install:
+
+* htmx
+* hyperscript
+* a request mocking library
+
+Simply add the following script tag to your demo/fiddle/whatever:
+
+```html
+<script src="https://demo.htmx.org"></script>
+```
+
+This helper allows you to add mock responses by adding `template` tags with a `url` attribute to indicate which URL. 
+The response for that url will be the innerHTML of the template, making it easy to construct mock responses. 
+
+You may embed simple expressions in the template with the `${}` syntax.
+
+Note that this should only be used for demos and is in no way guaranteed to work for long periods of time
+as it will always be grabbing the latest versions htmx and hyperscript!
+
+#### Demo Example
+
+Here is an example of the code in action:
+
+```html
+<!-- load demo environment -->
+<script src="https://demo.htmx.org"></script>
+
+<!-- post to /foo -->
+<button hx-post="/foo" hx-target="#result">
+  Count Up
+</button> 
+<output id="result"></output>
+
+<!-- respond to /foo with some dynamic content in a template tag -->
+<script>
+    globalInt = 0;
+</script>
+<template url="/foo"> <!-- note the url attribute -->
+    ${globalInt++}
+</template>
+
+```
+
 ## <a name="hyperscript"></a>[hyperscript](#hyperscript)
 
 Hyperscript is an experimental front end scripting language designed to be expressive and easily embeddable directly in HTML

www/js/demo-helper.js → www/js/demo/it.js

@@ -4,24 +4,28 @@ function addScript(url) {
     document.head.appendChild(myScript);
 }
 
-function interpolate(str) {
+function interpolate(str, params) {
     var returnStr = "";
-    var charArray = Array.from(str);
-    while (charArray.length > 0) {
-        var current = charArray.shift();
-        if (current === "$" && charArray[0] === "{") {
-            var evalStr = "(function() { return "
-            charArray.shift();
-            while (charArray.length > 0 && charArray[0] !== "}") {
-                evalStr += charArray.shift()
+    try {
+        var charArray = Array.from(str);
+        while (charArray.length > 0) {
+            var current = charArray.shift();
+            if (current === "$" && charArray[0] === "{") {
+                var evalStr = "(function(env) { with(env) { return "
+                charArray.shift();
+                while (charArray.length > 0 && charArray[0] !== "}") {
+                    evalStr += charArray.shift()
+                }
+                charArray.shift();
+                evalStr += " } })";
+                // console.log("Evaling", evalStr);
+                returnStr += eval(evalStr)(params);
+            } else {
+                returnStr += current;
             }
-            charArray.shift();
-            evalStr += " })()";
-            // console.log("Evaling", evalStr);
-            returnStr += eval(evalStr);
-        } else {
-            returnStr += current;
         }
+    } catch (e) {
+        returnStr = e.message;
     }
     return returnStr;
 }
@@ -38,16 +42,17 @@ function initMockRequests() {
             if(elt.getAttribute("url")){
                 MockRequests.setDynamicMockUrlResponse(elt.getAttribute("url"),
                     {dynamicResponseModFn:
-                            function(request, response) {
-                                return interpolate(elt.innerHTML);
+                            function(request, response, parameters) {
+                                console.log(request, response, parameters)
+                                return interpolate(elt.innerHTML, parameters);
                             },
                     usePathnameForAllQueries: true});
             }
         });
     }
 }
 
-addScript("https://unpkg.com/htmx.org@1.6.1/dist/htmx.js");
-addScript("https://unpkg.com/hyperscript.org@0.9.4/dist/_hyperscript_w9y.min.js");
+addScript("https://unpkg.com/htmx.org");
+addScript("https://unpkg.com/hyperscript.org");
 addScript("https://unpkg.com/[email protected]/index.js");
 initMockRequests();

www/js/demo/scratch.html

@@ -0,0 +1,17 @@
+<html>
+<head>
+    <script src="it.js"></script>
+</head>
+<body>
+<!-- post to /foo -->
+<button hx-get="/foo?bar=10" hx-target="#result">Count Up</button> <output id="result"></output>
+<!-- respond to /foo -->
+<script>
+    globalInt = 0;
+</script>
+<template url="/foo">
+    ${bar + 5}
+</template>
+
+</body>
+</html>