Last active
January 12, 2024 02:01
-
-
Save jessehattabaugh/b39295107c8433409e8d44439db67345 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"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>"}]} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"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}]} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"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