diff options
6 files changed, 33 insertions, 13 deletions
diff --git a/.changeset/blue-wombats-hammer.md b/.changeset/blue-wombats-hammer.md new file mode 100644 index 000000000..da9b1e3f0 --- /dev/null +++ b/.changeset/blue-wombats-hammer.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fixed props shadowing diff --git a/packages/astro/src/compiler/codegen/index.ts b/packages/astro/src/compiler/codegen/index.ts index dd83cdea5..e2d77a008 100644 --- a/packages/astro/src/compiler/codegen/index.ts +++ b/packages/astro/src/compiler/codegen/index.ts @@ -161,7 +161,7 @@ function generateAttributes(attrs: Record<string, string>): string { result += JSON.stringify(key) + ':' + val + ','; } } - result += `[__astroContext]:props[__astroContext]`; + result += `[__astroContext]:$$props[__astroContext]`; return result + '}'; } diff --git a/packages/astro/src/compiler/index.ts b/packages/astro/src/compiler/index.ts index 62809b285..a13d4afbf 100644 --- a/packages/astro/src/compiler/index.ts +++ b/packages/astro/src/compiler/index.ts @@ -159,10 +159,10 @@ const __astroScripts = __astro_hoisted_scripts([${result.components.map((n) => ` const __astroInternal = Symbol('astro.internal'); const __astroContext = Symbol.for('astro.context'); const __astroSlotted = Symbol.for('astro.slotted'); -async function __render(props, ...children) { +async function __render($$props, ...children) { const Astro = Object.create(__TopLevelAstro, { props: { - value: props, + value: $$props, enumerable: true }, slots: { @@ -178,19 +178,19 @@ async function __render(props, ...children) { enumerable: true }, pageCSS: { - value: (props[__astroContext] && props[__astroContext].pageCSS) || [], + value: ($$props[__astroContext] && $$props[__astroContext].pageCSS) || [], enumerable: true }, pageScripts: { - value: (props[__astroContext] && props[__astroContext].pageScripts) || [], + value: ($$props[__astroContext] && $$props[__astroContext].pageScripts) || [], enumerable: true }, isPage: { - value: (props[__astroInternal] && props[__astroInternal].isPage) || false, + value: ($$props[__astroInternal] && $$props[__astroInternal].isPage) || false, enumerable: true }, request: { - value: (props[__astroContext] && props[__astroContext].request) || {}, + value: ($$props[__astroContext] && $$props[__astroContext].request) || {}, enumerable: true }, }); @@ -202,7 +202,7 @@ export default { isAstroComponent: true, __render, [Symbol.for('astro.hoistedScr // \`__renderPage()\`: Render the contents of the Astro module as a page. This is a special flow, // triggered by loading a component directly by URL. -export async function __renderPage({request, children, props, css, scripts}) { +export async function __renderPage({request, children, props: $$props, css, scripts}) { const currentChild = { isAstroComponent: true, layout: typeof __layout === 'undefined' ? undefined : __layout, @@ -210,10 +210,10 @@ export async function __renderPage({request, children, props, css, scripts}) { __render, }; - const isLayout = (__astroContext in props); + const isLayout = (__astroContext in $$props); if(!isLayout) { let astroRootUIDCounter = 0; - Object.defineProperty(props, __astroContext, { + Object.defineProperty($$props, __astroContext, { value: { pageCSS: css, request, @@ -225,7 +225,7 @@ export async function __renderPage({request, children, props, css, scripts}) { }); } - Object.defineProperty(props, __astroInternal, { + Object.defineProperty($$props, __astroInternal, { value: { isPage: !isLayout }, @@ -233,13 +233,13 @@ export async function __renderPage({request, children, props, css, scripts}) { enumerable: false }); - const childBodyResult = await currentChild.__render(props, children); + const childBodyResult = await currentChild.__render($$props, children); // find layout, if one was given. if (currentChild.layout) { return currentChild.layout({ request, - props: {content: currentChild.content, [__astroContext]: props[__astroContext]}, + props: {content: currentChild.content, [__astroContext]: $$props[__astroContext]}, children: [childBodyResult], }); } diff --git a/packages/astro/test/astro-components.test.js b/packages/astro/test/astro-components.test.js index aae0598b7..cc1f6b759 100644 --- a/packages/astro/test/astro-components.test.js +++ b/packages/astro/test/astro-components.test.js @@ -34,6 +34,11 @@ Components('Allows Components defined in frontmatter', async ({ runtime }) => { assert.equal($('h1').length, 1); }); +Components('Allows variables named props', async ({ runtime }) => { + const result = await runtime.load('/props-shadowing'); + assert.equal(result.statusCode, 500); +}); + Components('Still throws an error for undefined components', async ({ runtime }) => { const result = await runtime.load('/undefined-component'); assert.equal(result.statusCode, 500); diff --git a/packages/astro/test/fixtures/astro-components/src/components/Props-Component.astro b/packages/astro/test/fixtures/astro-components/src/components/Props-Component.astro new file mode 100644 index 000000000..5c32430f0 --- /dev/null +++ b/packages/astro/test/fixtures/astro-components/src/components/Props-Component.astro @@ -0,0 +1,6 @@ +--- +export interface Props { + test: string; +} +--- +<h1 id="direct-props-h1">{props.test}</h1> diff --git a/packages/astro/test/fixtures/astro-components/src/pages/props-shadowing.astro b/packages/astro/test/fixtures/astro-components/src/pages/props-shadowing.astro new file mode 100644 index 000000000..3704933f2 --- /dev/null +++ b/packages/astro/test/fixtures/astro-components/src/pages/props-shadowing.astro @@ -0,0 +1,4 @@ +--- +import PropsComponent from "../components/Props-Component.astro" +--- +<PropsComponent test="test string"/> |