diff options
| -rw-r--r-- | .changeset/rich-starfishes-begin.md | 2 | ||||
| -rw-r--r-- | docs/syntax.md | 1 | ||||
| -rw-r--r-- | packages/astro/src/compiler/codegen/index.ts | 14 |
3 files changed, 10 insertions, 7 deletions
diff --git a/.changeset/rich-starfishes-begin.md b/.changeset/rich-starfishes-begin.md index ad9edb09a..92bfd9e7c 100644 --- a/.changeset/rich-starfishes-begin.md +++ b/.changeset/rich-starfishes-begin.md @@ -6,7 +6,6 @@ Astro props are now accessed from the `Astro.props` global. This change is meant to make prop definitions more ergonomic, leaning into JavaScript patterns you already know (destructuring and defaults). Astro components previously used a prop syntax borrowed from [Svelte](https://svelte.dev/docs#1_export_creates_a_component_prop), but it became clear that this was pretty confusing for most users. - ```diff --- + const { text = 'Hello world!' } = Astro.props; @@ -60,4 +59,3 @@ const { text = 'Hello world!' } = Astro.props; if (typeof text !== 'string') throw new Error(`Expected "text" to be of type "string" but recieved "${typeof string}"!`); --- ``` - diff --git a/docs/syntax.md b/docs/syntax.md index 8476a2823..1a89e8901 100644 --- a/docs/syntax.md +++ b/docs/syntax.md @@ -99,6 +99,7 @@ const { greeting = 'Hello', name } = Astro.props; ``` To define the props which your component accepts, you may export a TypeScript interface or type named `Props`. + ```tsx --- export interface Props { diff --git a/packages/astro/src/compiler/codegen/index.ts b/packages/astro/src/compiler/codegen/index.ts index 6d4a96032..372cc5124 100644 --- a/packages/astro/src/compiler/codegen/index.ts +++ b/packages/astro/src/compiler/codegen/index.ts @@ -300,7 +300,7 @@ function compileModule(module: Script, state: CodegenState, compileOptions: Comp const node = body[i]; switch (node.type) { // case 'ExportAllDeclaration': - // case 'ExportDefaultDeclaration': + // case 'ExportDefaultDeclaration': case 'ExportNamedDeclaration': { if (!node.declaration) break; @@ -377,7 +377,7 @@ function compileModule(module: Script, state: CodegenState, compileOptions: Comp const { start, end } = componentImport; state.importStatements.add(module.content.slice(start || undefined, end || undefined)); } - + // TODO: actually expose componentExports other than __layout and __content for (const componentImport of componentExports) { const { start, end } = componentImport; @@ -386,12 +386,16 @@ function compileModule(module: Script, state: CodegenState, compileOptions: Comp if (componentProps.length > 0) { const shortname = path.posix.relative(compileOptions.astroConfig.projectRoot.pathname, state.filename); - const props = componentProps.map(prop => (prop.id as Identifier)?.name).filter(v => v); + const props = componentProps.map((prop) => (prop.id as Identifier)?.name).filter((v) => v); console.log(); - warn(compileOptions.logging, shortname, yellow(`\nDefining props with "export" has been removed! Please see https://github.com/snowpackjs/astro/blob/main/packages/astro/CHANGELOG.md#0150 + warn( + compileOptions.logging, + shortname, + yellow(`\nDefining props with "export" has been removed! Please see https://github.com/snowpackjs/astro/blob/main/packages/astro/CHANGELOG.md#0150 Please update your code to use: -const { ${props.join(', ')} } = Astro.props;\n`)); +const { ${props.join(', ')} } = Astro.props;\n`) + ); } // handle createCollection, if any |