Skip to content

Commit 27eb649

Browse files
author
Jake Champion
committed
docs: capture the fiddle data immutably in the host page as it makes it simpler to update the version of @fastly/js-compute used in the fiddles
1 parent 9874e61 commit 27eb649

File tree

5 files changed

+181
-8
lines changed

5 files changed

+181
-8
lines changed

‎types/fastly:backend.d.ts

Lines changed: 59 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -120,10 +120,37 @@ declare module 'fastly:backend' {
120120
* **Note**: Can only be used when processing requests, not during build-time initialization.
121121
*
122122
* @example
123+
* <script async defer src="https://fiddle.fastly.dev/embed.js"></script>
123124
* In this example an implicit Dynamic Backend is created when making the fetch request to https://www.fastly.com/ and the response is then returned to the client.
124125
*
125-
* View this example on [Fiddle](https://fiddle.fastly.dev/fiddle/e5b6fa0e).
126-
*
126+
* <script type="application/json+fiddle">
127+
* {
128+
* "type": "javascript",
129+
* "title": "Implicit Dynamic Backend Example",
130+
* "origins": [
131+
* "https://http-me.glitch.me"
132+
* ],
133+
* "src": {
134+
* "deps": "{\n \"@fastly/js-compute\": \"^0.5.15\"\n}",
135+
* "main": "/// <reference types=\"@fastly/js-compute\" />\nimport { allowDynamicBackends } from \"fastly:experimental\";\nallowDynamicBackends(true);\nasync function app() {\n // For any request, return the fastly homepage -- without defining a backend!\n return fetch('https://www.fastly.com/');\n}\naddEventListener(\"fetch\", event => event.respondWith(app(event)));\n"
136+
* },
137+
* "requests": [
138+
* {
139+
* "enableCluster": true,
140+
* "enableShield": false,
141+
* "enableWAF": false,
142+
* "method": "GET",
143+
* "path": "/status=200",
144+
* "useFreshCache": false,
145+
* "followRedirects": false,
146+
* "tests": "",
147+
* "delay": 0
148+
* }
149+
* ],
150+
* "srcVersion": 26
151+
* }
152+
* </script>
153+
* <noscript>
127154
* ```js
128155
* /// <reference types="@fastly/js-compute" />
129156
* import { allowDynamicBackends } from "fastly:experimental";
@@ -134,12 +161,39 @@ declare module 'fastly:backend' {
134161
* }
135162
* addEventListener("fetch", event => event.respondWith(app(event)));
136163
* ```
164+
* </noscript>
137165
*
138166
* @example
139167
* In this example an explicit Dynamic Backend is created and supplied to the fetch request, the response is then returned to the client.
140168
*
141-
* View this example on [Fiddle](https://fiddle.fastly.dev/fiddle/e0c26a33).
142-
*
169+
* <script type="application/json+fiddle">
170+
* {
171+
* "type": "javascript",
172+
* "title": "Explicit Dynamic Backend Example",
173+
* "origins": [
174+
* "https://http-me.glitch.me"
175+
* ],
176+
* "src": {
177+
* "deps": "{\n \"@fastly/js-compute\": \"^0.5.15\"\n}",
178+
* "main": "/// <reference types=\"@fastly/js-compute\" />\nimport { allowDynamicBackends } from \"fastly:experimental\";\nimport { Backend } from \"fastly:backend\";\nallowDynamicBackends(true);\nasync function app() {\n // For any request, return the fastly homepage -- without defining a backend!\n const backend = new Backend({\n name: 'fastly',\n target: 'fastly.com',\n hostOverride: \"www.fastly.com\",\n connectTimeout: 1000,\n firstByteTimeout: 15000,\n betweenBytesTimeout: 10000,\n useSSL: true,\n sslMinVersion: 1.3,\n sslMaxVersion: 1.3,\n });\n return fetch('https://www.fastly.com/', {\n backend // Here we are configuring this request to use the backend from above.\n });\n}\naddEventListener(\"fetch\", event => event.respondWith(app(event)));\n"
179+
* },
180+
* "requests": [
181+
* {
182+
* "enableCluster": true,
183+
* "enableShield": false,
184+
* "enableWAF": false,
185+
* "method": "GET",
186+
* "path": "/status=200",
187+
* "useFreshCache": false,
188+
* "followRedirects": false,
189+
* "tests": "",
190+
* "delay": 0
191+
* }
192+
* ],
193+
* "srcVersion": 26
194+
* }
195+
* </script>
196+
* <noscript>
143197
* ```js
144198
* /// <reference types="@fastly/js-compute" />
145199
* import { allowDynamicBackends } from "fastly:experimental";
@@ -164,6 +218,7 @@ declare module 'fastly:backend' {
164218
* }
165219
* addEventListener("fetch", event => event.respondWith(app(event)));
166220
* ```
221+
* </noscript>
167222
*/
168223
class Backend {
169224
/**

‎types/fastly:cache-override.d.ts

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,33 @@ declare module "fastly:cache-override" {
1111
* In this example we override the cache for all the requests prefixed /static/ to have a long TTL (Time To Live),
1212
* and the home page to have a short TTL and a long SWR (Stale While Revalidate).
1313
*
14-
* <a href='https://fiddle.fastly.dev/fiddle/af5031f3/embedded'>View this example on Fastly Fiddle</a>
14+
* <script type="application/json+fiddle">
15+
* {
16+
* "type": "javascript",
17+
* "title": "CacheOverride Example",
18+
* "origins": [
19+
* "https://http-me.glitch.me"
20+
* ],
21+
* "src": {
22+
* "deps": "{\n \"@fastly/js-compute\": \"^0.5.15\"\n}",
23+
* "main": "/// <reference types=\"@fastly/js-compute\" />\nimport { CacheOverride } from \"fastly:cache-override\";\n\n// In this example we override the cache for all the requests prefixed /static/ \n// to have a long TTL (Time To Live), and the home page to have a short TTL and \n// a long SWR (Stale While Revalidate).\nasync function app (event) {\n const path = (new URL(event.request.url)).pathname;\n let cacheOverride;\n if (path == '/') {\n cacheOverride = new CacheOverride('override', {ttl: 10, swr: 86_400});\n } else if (path.startsWith('/static/')) {\n cacheOverride = new CacheOverride('override', {ttl: 86_400});\n } else {\n cacheOverride = new CacheOverride('none')\n }\n return fetch(event.request.url, {\n cacheOverride,\n backend: 'origin_0'\n });\n}\naddEventListener(\"fetch\", event => event.respondWith(app(event)));\n"
24+
* },
25+
* "requests": [
26+
* {
27+
* "enableCluster": true,
28+
* "enableShield": false,
29+
* "enableWAF": false,
30+
* "method": "GET",
31+
* "path": "/status=200",
32+
* "useFreshCache": false,
33+
* "followRedirects": false,
34+
* "tests": "",
35+
* "delay": 0
36+
* }
37+
* ],
38+
* "srcVersion": 26
39+
* }
40+
* </script>
1541
* <noscript>
1642
* ```js
1743
* /// <reference types="@fastly/js-compute" />

‎types/fastly:config-store.d.ts

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,40 @@ declare module "fastly:config-store" {
1010
* In this example we have an Edge Dictionary named 'animals' and we return the 'cat'
1111
* entry as the response body to the client.
1212
*
13-
* <a href='https://fiddle.fastly.dev/fiddle/045e1ffe/embedded'>View this example on Fastly Fiddle</a>
13+
* <script type="application/json+fiddle">
14+
* {
15+
* "type": "javascript",
16+
* "title": "ConfigStore Example",
17+
* "origins": [
18+
* "https://http-me.glitch.me"
19+
* ],
20+
* "src": {
21+
* "deps": "{\n \"@fastly/js-compute\": \"^0.5.15\"\n}",
22+
* "main": "/// <reference types=\"@fastly/js-compute\" />\nimport { ConfigStore } from \"fastly:config-store\";\n\nasync function app (event) {\n const config = new ConfigStore('animals');\n return new Response(config.get('cat'));\n}\n\naddEventListener(\"fetch\", event => event.respondWith(app(event)));\n"
23+
* },
24+
* "requests": [
25+
* {
26+
* "enableCluster": true,
27+
* "enableShield": false,
28+
* "enableWAF": false,
29+
* "data": {
30+
* "dictionaries": {
31+
* "animals": {
32+
* "cat": "meow"
33+
* }
34+
* }
35+
* },
36+
* "method": "GET",
37+
* "path": "/status=200",
38+
* "useFreshCache": false,
39+
* "followRedirects": false,
40+
* "tests": "",
41+
* "delay": 0
42+
* }
43+
* ],
44+
* "srcVersion": 26
45+
* }
46+
* </script>
1447
* <noscript>
1548
* ```js
1649
* /// <reference types="@fastly/js-compute" />

‎types/fastly:dictionary.d.ts

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,40 @@ declare module "fastly:dictionary" {
99
* In this example we have an Edge Dictionary named 'animals' and we return the 'cat'
1010
* entry as the response body to the client.
1111
*
12-
* <a href='https://fiddle.fastly.dev/fiddle/8f5a5052/embedded'>View this example on Fastly Fiddle</a>
12+
* <script type="application/json+fiddle">
13+
* {
14+
* "title": "Dictionary Example",
15+
* "type": "javascript",
16+
* "origins": [
17+
* "https://http-me.glitch.me"
18+
* ],
19+
* "src": {
20+
* "deps": "{\n \"@fastly/js-compute\": \"^0.5.15\"\n}",
21+
* "main": "/// <reference types=\"@fastly/js-compute\" />\nimport { Dictionary } from \"fastly:dictionary\";\n\nasync function app (event) {\n const animals = new Dictionary('animals');\n return new Response(animals.get('cat'));\n}\n\naddEventListener(\"fetch\", event => event.respondWith(app(event)));\n"
22+
* },
23+
* "srcVersion": 7,
24+
* "requests": [
25+
* {
26+
* "enableCluster": true,
27+
* "enableShield": false,
28+
* "enableWAF": false,
29+
* "data": {
30+
* "dictionaries": {
31+
* "animals": {
32+
* "cat": "meow"
33+
* }
34+
* }
35+
* },
36+
* "method": "GET",
37+
* "path": "/status=200",
38+
* "useFreshCache": false,
39+
* "followRedirects": false,
40+
* "tests": "",
41+
* "delay": 0
42+
* }
43+
* ]
44+
* }
45+
* </script>
1346
* <noscript>
1447
* ```js
1548
* /// <reference types="@fastly/js-compute" />

‎types/fastly:env.d.ts

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,33 @@ declare module "fastly:env" {
1212
* <script async defer src="https://fiddle.fastly.dev/embed.js"></script>
1313
* In this example we log to stdout the environment variables `FASTLY_HOSTNAME` and `FASTLY_TRACE_ID`.
1414
*
15-
* <a href='https://fiddle.fastly.dev/fiddle/276f3cdd/embedded'>View this example on Fastly Fiddle</a>
15+
* <script type="application/json+fiddle">
16+
* {
17+
* "type": "javascript",
18+
* "title": "Environment Variable Example",
19+
* "origins": [
20+
* "https://http-me.glitch.me"
21+
* ],
22+
* "src": {
23+
* "deps": "{\n \"@fastly/js-compute\": \"^0.5.15\"\n}",
24+
* "main": "/// <reference types=\"@fastly/js-compute\" />\nimport { env } from \"fastly:env\";\n\nfunction app(event) {\n console.log(\"FASTLY_HOSTNAME:\", env(\"FASTLY_HOSTNAME\"));\n console.log(\"FASTLY_TRACE_ID:\", env(\"FASTLY_TRACE_ID\"));\n\n return new Response(\"\", {\n status: 200\n });\n}\n\naddEventListener(\"fetch\", event => event.respondWith(app(event)));\n"
25+
* },
26+
* "requests": [
27+
* {
28+
* "enableCluster": true,
29+
* "enableShield": false,
30+
* "enableWAF": false,
31+
* "method": "GET",
32+
* "path": "/status=200",
33+
* "useFreshCache": false,
34+
* "followRedirects": false,
35+
* "tests": "",
36+
* "delay": 0
37+
* }
38+
* ],
39+
* "srcVersion": 26
40+
* }
41+
* </script>
1642
* <noscript>
1743
* ```js
1844
* /// <reference types="@fastly/js-compute" />

0 commit comments

Comments
 (0)