Skip to content

Instantly share code, notes, and snippets.

@jessehattabaugh
Last active January 12, 2024 02:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jessehattabaugh/b39295107c8433409e8d44439db67345 to your computer and use it in GitHub Desktop.
Save jessehattabaugh/b39295107c8433409e8d44439db67345 to your computer and use it in GitHub Desktop.
{"name":"Welcome!","method":"url","files":[{"location":"./playgrounds/welcome/server.js","filename":"server.js","builtin":true,"contents":"\non.get(\"/\", (request) => {\n return render(request, 'index.html')\n})"},{"location":"./playgrounds/welcome/.playground.json","filename":".playground.json","builtin":true,"contents":"{\n \"name\": \"Welcome!\",\n \"method\": \"url\",\n \"files\": [\n {\n \"location\": \"./playgrounds/welcome/server.js\",\n \"filename\": \"server.js\",\n \"builtin\": true\n },\n {\n \"location\": \"./playgrounds/welcome/.playground.json\",\n \"filename\": \".playground.json\",\n \"builtin\": true\n },\n {\n \"location\": \"./playgrounds/.loader.html\",\n \"filename\": \".loader.html\",\n \"builtin\": true\n },\n {\n \"location\": \"./playgrounds/welcome/index.html\",\n \"filename\": \"index.html\"\n },\n {\n \"location\": \"./playgrounds/welcome/button.html\",\n \"filename\": \"button.html\"\n }\n ]\n}"},{"location":"./playgrounds/.loader.html","filename":".loader.html","builtin":true,"contents":"<script src=\"./js/nunjucks.js\"></script>\n<script src=\"./js/pollyjs-core.js\"></script>\n<script src=\"./js/pollyjs-adapter-fetch.js\"></script>\n<script src=\"./js/pollyjs-adapter-xhr.js\"></script>\n<script>\n\n document.addEventListener('htmx:configRequest', function(evt) {\n evt.detail.path = window.location.href + evt.detail.path;\n });\n\n const fileContents = {};\n files.forEach(file => fileContents[file.filename] = file.contents);\n\n function readFile(filename) {\n return fileContents[filename]\n }\n\n let TemplateLoader = {\n getSource: (name) => ({\n src: readFile(name),\n path: name\n })\n }\n var templates = new nunjucks.Environment(TemplateLoader, {\n autoescape: false\n })\n\n function render(request, template, context) {\n let out = templates.render(template, {...context, request});\n \n return new Response(out, {\n headers: {\n 'content-type': 'text/html'\n }\n })\n }\n\n const { Polly } = window['@pollyjs/core'];\n\n Polly.register(window['@pollyjs/adapter-fetch']);\n Polly.register(window['@pollyjs/adapter-xhr']);\n\n const polly = new Polly('sandbox-server', {\n adapters: ['fetch', 'xhr'],\n mode: \"passthrough\",\n logging: true,\n });\n\n const server = polly.server;\n \n const on = {};\n \n ['get','put','post','patch','delete','merge','head','options'].forEach((method) => {\n on[method] = (route, handler) => {\n \n let parsedRoute = window.location.href + route.replaceAll(/\\/<([^>]+)>/gm, (_, m) => \"/:\"+m)\n\n server[method](parsedRoute).intercept(async (req, res) => {\n\n var requestHeaders = Object.assign({}, req.headers)\n var request = new Request(req.url, {\n body: req.body,\n headers: requestHeaders,\n method: req.method,\n })\n\n var response = await handler(request, ...Object.values(req.params), ...new URL(req.url).searchParams.values())\n\n if (!response) throw new Error(\"Handler returned no response!\") // Return 404?\n\n let responseHeaders = {}\n\n for (const [k,v] of response.headers.entries()) {\n res.setHeader(k,v);\n responseHeaders[k] = v\n }\n\n let text = await response.text()\n\n \n res.status(response.status).send(text);\n \n window.parent.postMessage({\n type: \"network_log\",\n request: {\n url: req.url.replace(window.location.href, ''),\n body: req.body,\n method: req.method,\n headers: requestHeaders,\n },\n response: {\n headers: responseHeaders,\n status: response.status,\n body: text,\n },\n }, \"*\")\n });\n }\n })\n \n const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))\n</script>\n<script type=\"module\">\n ///server.js\n</script>"},{"location":"./playgrounds/welcome/index.html","filename":"index.html","contents":"<html>\n<head>\n <script src=\"https://unpkg.com/htmx.org@<2/dist/htmx.js\" defer></script>\n</head>\n<body>\n <button onclick=\"navigator.geolocation.getCurrentPosition((pos) => console.log(pos))\">get location</button>\n</body>\n</html>"}]}
{"name":"Welcome!","method":"url","files":[{"location":"./playgrounds/welcome/server.js","filename":"server.js","builtin":true,"contents":"const options = {\n 11: 'Testing',\n 18: 'World',\n 19: 'Hello'\n}\n\non.get(\"/\", (request) => {\n return render(request, 'index.html', {options});\n});\n\non.post(\"/\", async (request) => {\n const data = await request.formData();\n const keyToDelete = data.get('keyToDelete');\n delete options[keyToDelete];\n return render(request, 'index.html', {options});\n});"},{"location":"./playgrounds/welcome/.playground.json","filename":".playground.json","builtin":true,"contents":"{\n \"name\": \"Welcome!\",\n \"method\": \"url\",\n \"files\": [\n {\n \"location\": \"./playgrounds/welcome/server.js\",\n \"filename\": \"server.js\",\n \"builtin\": true\n },\n {\n \"location\": \"./playgrounds/welcome/.playground.json\",\n \"filename\": \".playground.json\",\n \"builtin\": true\n },\n {\n \"location\": \"./playgrounds/.loader.html\",\n \"filename\": \".loader.html\",\n \"builtin\": true\n },\n {\n \"location\": \"./playgrounds/welcome/index.html\",\n \"filename\": \"index.html\"\n },\n {\n \"location\": \"./playgrounds/welcome/button.html\",\n \"filename\": \"button.html\"\n }\n ]\n}"},{"location":"./playgrounds/.loader.html","filename":".loader.html","builtin":true,"contents":"<script src=\"./js/nunjucks.js\"></script>\n<script src=\"./js/pollyjs-core.js\"></script>\n<script src=\"./js/pollyjs-adapter-fetch.js\"></script>\n<script src=\"./js/pollyjs-adapter-xhr.js\"></script>\n<script>\n\n document.addEventListener('htmx:configRequest', function(evt) {\n evt.detail.path = window.location.href + evt.detail.path;\n });\n\n const fileContents = {};\n files.forEach(file => fileContents[file.filename] = file.contents);\n\n function readFile(filename) {\n return fileContents[filename]\n }\n\n let TemplateLoader = {\n getSource: (name) => ({\n src: readFile(name),\n path: name\n })\n }\n var templates = new nunjucks.Environment(TemplateLoader, {\n autoescape: false\n })\n\n function render(request, template, context) {\n let out = templates.render(template, {...context, request});\n \n return new Response(out, {\n headers: {\n 'content-type': 'text/html'\n }\n })\n }\n\n const { Polly } = window['@pollyjs/core'];\n\n Polly.register(window['@pollyjs/adapter-fetch']);\n Polly.register(window['@pollyjs/adapter-xhr']);\n\n const polly = new Polly('sandbox-server', {\n adapters: ['fetch', 'xhr'],\n mode: \"passthrough\",\n logging: true,\n });\n\n const server = polly.server;\n \n const on = {};\n \n ['get','put','post','patch','delete','merge','head','options'].forEach((method) => {\n on[method] = (route, handler) => {\n \n let parsedRoute = window.location.href + route.replaceAll(/\\/<([^>]+)>/gm, (_, m) => \"/:\"+m)\n\n server[method](parsedRoute).intercept(async (req, res) => {\n\n var requestHeaders = Object.assign({}, req.headers)\n var request = new Request(req.url, {\n body: req.body,\n headers: requestHeaders,\n method: req.method,\n })\n\n var response = await handler(request, ...Object.values(req.params), ...new URL(req.url).searchParams.values())\n\n if (!response) throw new Error(\"Handler returned no response!\") // Return 404?\n\n let responseHeaders = {}\n\n for (const [k,v] of response.headers.entries()) {\n res.setHeader(k,v);\n responseHeaders[k] = v\n }\n\n let text = await response.text()\n\n \n res.status(response.status).send(text);\n \n window.parent.postMessage({\n type: \"network_log\",\n request: {\n url: req.url.replace(window.location.href, ''),\n body: req.body,\n method: req.method,\n headers: requestHeaders,\n },\n response: {\n headers: responseHeaders,\n status: response.status,\n body: text,\n },\n }, \"*\")\n });\n }\n })\n \n const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))\n</script>\n<script type=\"module\">\n ///server.js\n</script>"},{"location":"./playgrounds/welcome/index.html","filename":"index.html","contents":"<html>\n<head>\n <script src=\"https://unpkg.com/htmx.org/dist/htmx.js\"></script>\n</head>\n<body hx-target=\"this\">\n\n <form hx-post=\"/\" hx-trigger=\"input\">\n <select name=\"keyToDelete\">\n {% include \"options.html\" %}\n </select>\n </form>\n \n <select>\n {% include \"options.html\" %}\n </select>\n</body>\n</html>"},{"filename":"options.html","contents":"<option value=\"\">-</option>\n{% for value, option in options %}\n <option value=\"{{ value }}\">{{ option }}</option>\n{% endfor %}","builtin":false}]}
{"name":"Welcome!","method":"url","files":[{"location":"./playgrounds/welcome/server.js","filename":"server.js","builtin":true,"contents":"const options = {\n 11: 'Testing',\n 18: 'World',\n 19: 'Hello'\n}\n\non.get(\"/\", (request) => {\n return render(request, 'index.html', {options});\n});\n\non.post(\"/\", async (request) => {\n const data = await request.formData();\n const keyToDelete = data.get('keyToDelete');\n delete options[keyToDelete];\n return render(request, 'index.html', {options});\n});"},{"location":"./playgrounds/welcome/.playground.json","filename":".playground.json","builtin":true,"contents":"{\n \"name\": \"Welcome!\",\n \"method\": \"url\",\n \"files\": [\n {\n \"location\": \"./playgrounds/welcome/server.js\",\n \"filename\": \"server.js\",\n \"builtin\": true\n },\n {\n \"location\": \"./playgrounds/welcome/.playground.json\",\n \"filename\": \".playground.json\",\n \"builtin\": true\n },\n {\n \"location\": \"./playgrounds/.loader.html\",\n \"filename\": \".loader.html\",\n \"builtin\": true\n },\n {\n \"location\": \"./playgrounds/welcome/index.html\",\n \"filename\": \"index.html\"\n },\n {\n \"location\": \"./playgrounds/welcome/button.html\",\n \"filename\": \"button.html\"\n }\n ]\n}"},{"location":"./playgrounds/.loader.html","filename":".loader.html","builtin":true,"contents":"<script src=\"./js/nunjucks.js\"></script>\n<script src=\"./js/pollyjs-core.js\"></script>\n<script src=\"./js/pollyjs-adapter-fetch.js\"></script>\n<script src=\"./js/pollyjs-adapter-xhr.js\"></script>\n<script>\n\n document.addEventListener('htmx:configRequest', function(evt) {\n evt.detail.path = window.location.href + evt.detail.path;\n });\n\n const fileContents = {};\n files.forEach(file => fileContents[file.filename] = file.contents);\n\n function readFile(filename) {\n return fileContents[filename]\n }\n\n let TemplateLoader = {\n getSource: (name) => ({\n src: readFile(name),\n path: name\n })\n }\n var templates = new nunjucks.Environment(TemplateLoader, {\n autoescape: false\n })\n\n function render(request, template, context) {\n let out = templates.render(template, {...context, request});\n \n return new Response(out, {\n headers: {\n 'content-type': 'text/html'\n }\n })\n }\n\n const { Polly } = window['@pollyjs/core'];\n\n Polly.register(window['@pollyjs/adapter-fetch']);\n Polly.register(window['@pollyjs/adapter-xhr']);\n\n const polly = new Polly('sandbox-server', {\n adapters: ['fetch', 'xhr'],\n mode: \"passthrough\",\n logging: true,\n });\n\n const server = polly.server;\n \n const on = {};\n \n ['get','put','post','patch','delete','merge','head','options'].forEach((method) => {\n on[method] = (route, handler) => {\n \n let parsedRoute = window.location.href + route.replaceAll(/\\/<([^>]+)>/gm, (_, m) => \"/:\"+m)\n\n server[method](parsedRoute).intercept(async (req, res) => {\n\n var requestHeaders = Object.assign({}, req.headers)\n var request = new Request(req.url, {\n body: req.body,\n headers: requestHeaders,\n method: req.method,\n })\n\n var response = await handler(request, ...Object.values(req.params), ...new URL(req.url).searchParams.values())\n\n if (!response) throw new Error(\"Handler returned no response!\") // Return 404?\n\n let responseHeaders = {}\n\n for (const [k,v] of response.headers.entries()) {\n res.setHeader(k,v);\n responseHeaders[k] = v\n }\n\n let text = await response.text()\n\n \n res.status(response.status).send(text);\n \n window.parent.postMessage({\n type: \"network_log\",\n request: {\n url: req.url.replace(window.location.href, ''),\n body: req.body,\n method: req.method,\n headers: requestHeaders,\n },\n response: {\n headers: responseHeaders,\n status: response.status,\n body: text,\n },\n }, \"*\")\n });\n }\n })\n \n const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))\n</script>\n<script type=\"module\">\n ///server.js\n</script>"},{"location":"./playgrounds/welcome/index.html","filename":"index.html","contents":"<html>\n<head>\n <script src=\"https://unpkg.com/htmx.org/dist/htmx.js\"></script>\n <script src=\"https://unpkg.com/htmx.org/dist/ext/multi-swap.js\"></script>\n <script src=\"https://unpkg.com/htmx.org/dist/ext/morphdom-swap.js\"></script>\n</head>\n<body hx-target=\"this\" hx-ext=\"multi-swap\" hx-ext=\"morphdom-swap\">\n\n <form hx-post=\"/\" hx-trigger=\"input\" hx-swap=\"multi:#id1,#id2\">\n <select id=\"id1\" name=\"keyToDelete\">\n {% include \"options.html\" %}\n </select>\n </form>\n \n <select id=\"id2\">\n {% include \"options.html\" %}\n </select>\n</body>\n</html>"},{"filename":"options.html","contents":"<option value=\"\">-</option>\n{% for value, option in options %}\n <option value=\"{{ value }}\">{{ option }}</option>\n{% endfor %}","builtin":false}]}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment