add fetch support

5 files changed, 19 insertions, 5 deletions

diff --git a/examples/snowpack/astro/pages/news.hmx b/examples/snowpack/astro/pages/news.hmx
index cdccace95..f1350ed3f 100644
--- a/examples/snowpack/astro/pages/news.hmx
+++ b/examples/snowpack/astro/pages/news.hmx
@@ -9,7 +9,8 @@
   import news from '../data/news.json';
   import users from '../data/users.json';
 
-  export function setup({ context, request }) {
+  export async function setup({ context, request, fetch }) {
+    const pokemonData = await fetch(`https://pokeapi.co/api/v2/pokemon/ditto`);
     return {
       context: {
         title: 'Community & News',
@@ -18,6 +19,7 @@
         // Add your project, organization, or company to the end of this list!
         news,
         users,
+        pokemonData: await pokemonData.json(),
       }
     }
   }
@@ -37,6 +39,10 @@
     <a href="https://github.com/snowpackjs/snowpack/edit/main/www/_data/news.js">Submit it!</a>
   </p>
 
+  <p>
+    In case you're curious, the best pokemon is <strong>{context.pokemonData.name}.</strong>
+  </p>
+
   <div class="card-grid card-grid-3">
     <article class="discord-banner">
       <a href="https://discord.gg/snowpack" style="flex-shrink: 0; height: 48px;"><img alt="Join us on Discord!"
diff --git a/examples/snowpack/snowpack.config.js b/examples/snowpack/snowpack.config.js
index 5cab1aaa0..b67784ba1 100644
--- a/examples/snowpack/snowpack.config.js
+++ b/examples/snowpack/snowpack.config.js
@@ -1,5 +1,6 @@
 /** @type {import("snowpack").SnowpackUserConfig } */
 module.exports = {
+  
   mount: {
     public: '/',
     //src: '/_dist_',
@@ -12,9 +13,9 @@ module.exports = {
     '@snowpack/plugin-vue'
   ],
   packageOptions: {
-    // Blocked by CSS asset support
-    // source: 'remote',
-    // types: true,
+    external: [
+      'node-fetch'
+    ]
   },
   devOptions: {
     // Eleventy updates multiple files at once, so add a 1000ms delay before we trigger a browser update
diff --git a/package-lock.json b/package-lock.json
index 3e3ac71ac..cd01bf26f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2267,6 +2267,11 @@
       "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
       "dev": true
     },
+    "node-fetch": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+      "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw=="
+    },
     "node-releases": {
       "version": "1.1.71",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.71.tgz",
diff --git a/package.json b/package.json
index 9681b06f1..de8682f1f 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "magic-string": "^0.25.3",
     "micromark": "^2.11.4",
     "micromark-extension-gfm": "^0.3.3",
+    "node-fetch": "^2.6.1",
     "postcss": "^8.2.8",
     "postcss-modules": "^4.0.0",
     "react": "^17.0.1",
diff --git a/src/transform2.ts b/src/transform2.ts
index fcbb6e14f..ea95b0f32 100644
--- a/src/transform2.ts
+++ b/src/transform2.ts
@@ -152,11 +152,12 @@ export async function __renderPage({request, children}) {
   
   const isRoot = true;
   const merge = (await import('deepmerge')).default;
+  const fetch = (await import('node-fetch')).default;
 
   // call all children setup scripts, in order, and return.
   let mergedContext = {};
   for (const child of [currentChild, ...children]) {
-    const childSetupResult = await child.setup({request, context: mergedContext});
+    const childSetupResult = await child.setup({request, fetch, context: mergedContext});
     mergedContext = childSetupResult.context ? merge(mergedContext, childSetupResult.context) : mergedContext;
   }