Make Astro.request available to all astro components (#960)

* Make Astro.request available to all astro components

* Adds a changeset

.changeset/red-falcons-brush.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Makes Astro.request available in Astro components

packages/astro/src/compiler/codegen/index.ts

@@ -163,6 +163,7 @@ function generateAttributes(attrs: Record<string, string>): string {
       result += JSON.stringify(key) + ':' + val + ',';
     }
   }
+  result += `[__astroContext]:props[__astroContext]`;
   return result + '}';
 }
 
@@ -648,7 +649,7 @@ async function compileHtml(enterNode: TemplateNode, state: CodegenState, compile
 
               if (node.type === 'Slot') {
                 state.importStatements.add(`import { __astro_slot } from 'astro/dist/internal/__astro_slot.js';`);
-                buffers[curr] += `h(__astro_slot, ${attributes ? generateAttributes(attributes) : 'null'}, children`;
+                buffers[curr] += `h(__astro_slot, ${generateAttributes(attributes)}, children`;
                 paren++;
                 return;
               }
@@ -661,11 +662,11 @@ async function compileHtml(enterNode: TemplateNode, state: CodegenState, compile
                   buffers[curr] += `h(__astro_slot_content, { name: ${attributes.slot} },`;
                   paren++;
                 }
-                buffers[curr] += `h("${name}", ${attributes ? generateAttributes(attributes) : 'null'}`;
+                buffers[curr] += `h("${name}", ${generateAttributes(attributes)}`;
                 paren++;
                 return;
               }
-              const [componentName, componentKind] = name.split(':');
+              const [componentName, _componentKind] = name.split(':');
               let componentInfo = components.get(componentName);
               if (/\./.test(componentName)) {
                 const [componentNamespace] = componentName.split('.');
@@ -691,7 +692,7 @@ async function compileHtml(enterNode: TemplateNode, state: CodegenState, compile
                   buffers[curr] += `h(__astro_slot_content, { name: ${attributes.slot} },`;
                   paren++;
                 }
-                buffers[curr] += `h(${componentName}, ${attributes ? generateAttributes(attributes) : 'null'}`;
+                buffers[curr] += `h(${componentName}, ${generateAttributes(attributes)}`;
                 paren++;
                 return;
               } else if (!componentInfo && !isCustomElementTag(componentName)) {
@@ -705,7 +706,7 @@ async function compileHtml(enterNode: TemplateNode, state: CodegenState, compile
                   if (curr === 'markdown') {
                     await pushMarkdownToBuffer();
                   }
-                  buffers[curr] += `,${componentName}.__render(${attributes ? generateAttributes(attributes) : 'null'}),`;
+                  buffers[curr] += `,${componentName}.__render(${generateAttributes(attributes)}),`;
                 }
                 curr = 'markdown';
                 return;
@@ -726,7 +727,7 @@ async function compileHtml(enterNode: TemplateNode, state: CodegenState, compile
                 paren++;
               }
               paren++;
-              buffers[curr] += `h(${wrapper}, ${attributes ? generateAttributes(attributes) : 'null'}`;
+              buffers[curr] += `h(${wrapper}, ${generateAttributes(attributes)}`;
             } catch (err) {
               paren--;
               // handle errors in scope with filename

packages/astro/src/compiler/index.ts

@@ -139,14 +139,26 @@ ${result.createCollection || ''}
 // \`__render()\`: Render the contents of the Astro module.
 import { h, Fragment } from 'astro/dist/internal/h.js';
 const __astroInternal = Symbol('astro.internal');
+const __astroContext = Symbol.for('astro.context');
 async function __render(props, ...children) {
-  const Astro = {
+  const Astro = Object.create(__TopLevelAstro, {
-    ...__TopLevelAstro,
+    props: {
-    props,
+      value: props,
-    css: (props[__astroInternal] && props[__astroInternal].css) || [],
+      enumerable: true
-    request: (props[__astroInternal] && props[__astroInternal].request) || {},
+    },
-    isPage: (props[__astroInternal] && props[__astroInternal].isPage) || false,
+    css: {
-  };
+      value: (props[__astroInternal] && props[__astroInternal].css) || [],
+      enumerable: true
+    },
+    isPage: {
+      value: (props[__astroInternal] && props[__astroInternal].isPage) || false,
+      enumerable: true
+    },
+    request: {
+      value: (props[__astroContext] && props[__astroContext].request) || {},
+      enumerable: true
+    }
+  });
 
   ${result.script}
   return h(Fragment, null, ${result.html});
@@ -163,15 +175,22 @@ export async function __renderPage({request, children, props, css}) {
     __render,
   };
 
+  Object.defineProperty(props, __astroContext, {
+    value: {
+      request
+    },
+    writable: false,
+    enumerable: false
+  });
+
   Object.defineProperty(props, __astroInternal, {
     value: {
-      request,
       css,
       isPage: true
     },
     writable: false,
     enumerable: false
-  })
+  });
 
   const childBodyResult = await currentChild.__render(props, children);
 

packages/astro/test/astro-global.test.js

@@ -13,6 +13,8 @@ Global('Astro.request.url', async (context) => {
 
   const $ = doc(result.contents);
   assert.equal($('#pathname').text(), '/');
+  assert.equal($('#child-pathname').text(), '/');
+  assert.equal($('#nested-child-pathname').text(), '/');
 });
 
 Global('Astro.request.canonicalURL', async (context) => {

packages/astro/test/fixtures/astro-global/src/components/Child.astro

@@ -0,0 +1,5 @@
+---
+import NestedChild from './NestedChild.astro';
+---
+<div id="child-pathname">{Astro.request.url.pathname}</div>
+<NestedChild />

packages/astro/test/fixtures/astro-global/src/components/NestedChild.astro

@@ -0,0 +1 @@
+<div id="nested-child-pathname">{Astro.request.url.pathname}</div>

packages/astro/test/fixtures/astro-global/src/pages/index.astro

@@ -1,3 +1,6 @@
+---
+import Child from '../components/Child.astro';
+---
 <html>
 <head>
   <title>Test</title>
@@ -6,5 +9,7 @@
 <body>
   <div id="pathname">{Astro.request.url.pathname}</div>
   <a id="site" href={Astro.site}>Home</a>
+
+  <Child />
 </body>
 </html>