From c6cf847bd0b6bef3c51a5710fba5ca43b11e46f9 Mon Sep 17 00:00:00 2001 From: Chris Swithinbank Date: Tue, 31 Jan 2023 15:41:22 +0100 Subject: [PATCH 01/23] Revert MDX README changes (#6062) --- .changeset/cuddly-donkeys-warn.md | 5 + packages/integrations/mdx/README.md | 287 +++------------------------- 2 files changed, 32 insertions(+), 260 deletions(-) create mode 100644 .changeset/cuddly-donkeys-warn.md diff --git a/.changeset/cuddly-donkeys-warn.md b/.changeset/cuddly-donkeys-warn.md new file mode 100644 index 000000000..b3980fb2d --- /dev/null +++ b/.changeset/cuddly-donkeys-warn.md @@ -0,0 +1,5 @@ +--- +'@astrojs/mdx': patch +--- + +Update MDX README diff --git a/packages/integrations/mdx/README.md b/packages/integrations/mdx/README.md index 30f3e4c54..53c3c9be9 100644 --- a/packages/integrations/mdx/README.md +++ b/packages/integrations/mdx/README.md @@ -103,47 +103,19 @@ import rehypeMinifyHtml from 'rehype-minify-html'; export default defineConfig({ integrations: [ mdx({ - remarkPlugins: [exampleRemarkPlugin], - }), - ], -}); + syntaxHighlight: 'shiki', + shikiConfig: { theme: 'dracula' }, + remarkPlugins: [remarkToc], + rehypePlugins: [rehypeMinifyHtml], + remarkRehype: { footnoteLabel: 'Footnotes' }, + gfm: false, + }) + ] +}) ``` -…every MDX file will have `customProperty` in its frontmatter! See [our Markdown documentation](https://docs.astro.build/en/guides/markdown-content/#example-injecting-frontmatter) for more usage instructions and a [reading time plugin example](https://docs.astro.build/en/guides/markdown-content/#example-calculate-reading-time). - -### Layouts -Layouts can be applied [in the same way as standard Astro Markdown](https://docs.astro.build/en/guides/markdown-content/#frontmatter-layout). You can add a `layout` to [your frontmatter](#frontmatter) like so: - -```yaml ---- -layout: '../layouts/BaseLayout.astro' -title: 'My Blog Post' ---- -``` - -Then, you can retrieve all other frontmatter properties from your layout via the `frontmatter` property, and render your MDX using the default [``](https://docs.astro.build/en/core-concepts/astro-components/#slots). See [layout props](#layout-props) for a complete list of props available. - -```astro title="src/layouts/BaseLayout.astro" ---- -const { frontmatter, url } = Astro.props; ---- - - - - {frontmatter.title} - - -

{frontmatter.title}

- - - - -``` - -You can set a layout’s [`Props` type](/en/guides/typescript/#component-props) with the `MDXLayoutProps` helper. - -:::note -`MDXLayoutProps` is the same as the `MarkdownLayoutProps` utility type with `rawContent()` and `compiledContent()` removed (since these are not available for `.mdx` files). Feel free to **use `MarkdownLayoutProps` instead** when sharing a layout across `.md` and `.mdx` files. +:::caution +MDX does not support passing remark and rehype plugins as a string. You should install, import, and apply the plugin function instead. ::: 📚 See the [Markdown Options reference](https://docs.astro.build/en/reference/configuration-reference/#markdown-options) for a complete list of options. @@ -157,77 +129,6 @@ MDX will extend [your project's existing Markdown configuration](https://docs.as For example, say you need to disable GitHub-Flavored Markdown and apply a different set of remark plugins for MDX files. You can apply these options like so, with `extendMarkdownConfig` enabled by default: -```html -
-

A blockquote with some emphasis.

-
-``` - -But what if you want to specify your own markup for these blockquotes? In the above example, you could create a custom `
` component (in any language) that either has a `` component or accepts a `children` prop. - -```astro title="src/components/Blockquote.astro" ---- -const props = Astro.props; ---- - -
- “ - -
-``` - -Then in the MDX file you import the component and export it to the `components` export. - -```mdx title="src/pages/posts/post-1.mdx" {2} -import Blockquote from '../components/Blockquote.astro'; -export const components = { blockquote: Blockquote }; -``` - -Now, writing the standard Markdown blockquote syntax (`>`) will use your custom `
` component instead. No need to use a component in Markdown, or write a remark/rehype plugin! Visit the [MDX website](https://mdxjs.com/table-of-components/) for a full list of HTML elements that can be overwritten as custom components. - -#### Custom components with imported `mdx` - -When rendering imported MDX content, custom components can be passed via the `components` prop. - -Note: An MDX file's exported components will _not_ be used unless you manually import and pass them via the `components` property. See the example below: - -```astro title="src/pages/page.astro" "components={{...components, h1: Heading }}" ---- -import { Content, components } from '../content.mdx'; -import Heading from '../Heading.astro'; ---- - - -``` - -### Syntax highlighting - -The MDX integration respects [your project's `markdown.syntaxHighlight` configuration](https://docs.astro.build/en/guides/markdown-content/#syntax-highlighting). - -We will highlight your code blocks with [Shiki](https://github.com/shikijs/shiki) by default. You can customize this highlighter using the `markdown.shikiConfig` option in your `astro.config`. For example, you can apply a different built-in theme like so: - -__`astro.config.mjs`__ - -```js -import { defineConfig } from 'astro/config'; -import mdx from '@astrojs/mdx'; - -export default defineConfig({ - markdown: { - shikiConfig: { - theme: 'dracula', - }, - }, - integrations: [mdx()], -}); -``` - -Visit [our Shiki configuration docs](https://docs.astro.build/en/guides/markdown-content/#shiki-configuration) for more on using Shiki with Astro. - -#### Switch to Prism - -You can also use the [Prism](https://prismjs.com/) syntax highlighter by setting `markdown.syntaxHighlight` to `'prism'` in your `astro.config` like so: - __`astro.config.mjs`__ ```js @@ -240,108 +141,17 @@ export default defineConfig({ remarkPlugins: [remarkPlugin1], gfm: true, }, - integrations: [mdx()], -}); -``` - -This applies a minimal Prism renderer with added support for `astro` code blocks. Visit [our "Prism configuration" docs](https://docs.astro.build/en/guides/markdown-content/#prism-configuration) for more on using Prism with Astro. - -#### Switch to a custom syntax highlighter - -You may want to apply your own syntax highlighter too. If your highlighter offers a remark or rehype plugin, you can flip off our syntax highlighting by setting `markdown.syntaxHighlight: false` and wiring up your plugin. For example, say you want to apply [Shiki Twoslash's remark plugin](https://www.npmjs.com/package/remark-shiki-twoslash): - -__`astro.config.mjs`__ - -```js -import { defineConfig } from 'astro/config'; -import mdx from '@astrojs/mdx'; -import shikiTwoslash from 'remark-shiki-twoslash'; - -export default defineConfig({ - markdown: { - syntaxHighlight: false, - }, integrations: [ mdx({ - remarkPlugins: [shikiTwoslash, { /* Shiki Twoslash config */ }], + // `syntaxHighlight` inherited from Markdown + + // Markdown `remarkPlugins` ignored, + // only `remarkPlugin2` applied. + remarkPlugins: [remarkPlugin2], + // `gfm` overridden to `false` + gfm: false, }) - ], -}); -``` - -## Configuration - -### remarkPlugins - -[Remark plugins](https://github.com/remarkjs/remark/blob/main/doc/plugins.md) allow you to extend your Markdown with new capabilities. This includes [auto-generating a table of contents](https://github.com/remarkjs/remark-toc), [applying accessible emoji labels](https://github.com/florianeckerstorfer/remark-a11y-emoji), and more. We encourage you to browse [awesome-remark](https://github.com/remarkjs/awesome-remark) for a full curated list! - -This example applies the [`remark-toc`](https://github.com/remarkjs/remark-toc) plugin to `.mdx` files. To customize plugin inheritance from your Markdown config or Astro's defaults, [see the `extendPlugins` option](#extendplugins). - -__`astro.config.mjs`__ - -```js -import { defineConfig } from 'astro/config'; -import mdx from '@astrojs/mdx'; -import remarkToc from 'remark-toc'; - -export default defineConfig({ - integrations: [mdx({ - remarkPlugins: [remarkToc], - })], -}); -``` - -### rehypePlugins - -[Rehype plugins](https://github.com/rehypejs/rehype/blob/main/doc/plugins.md) allow you to transform the HTML that your Markdown generates. We encourage you to browse [awesome-rehype](https://github.com/rehypejs/awesome-rehype) for a full curated list of plugins! - -We apply our own (non-removable) [`collect-headings`](https://github.com/withastro/astro/blob/main/packages/integrations/mdx/src/rehype-collect-headings.ts) plugin. This applies IDs to all headings (i.e. `h1 -> h6`) in your MDX files to [link to headings via anchor tags](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#linking_to_an_element_on_the_same_page). - -This example applies the [`rehype-minify`](https://github.com/rehypejs/rehype-minify) plugin to `.mdx` files. To customize plugin inheritance from your Markdown config or Astro's defaults, [see the `extendPlugins` option](#extendplugins). - -__`astro.config.mjs`__ - -```js -import { defineConfig } from 'astro/config'; -import mdx from '@astrojs/mdx'; -import rehypeMinifyHtml from 'rehype-minify'; - -export default defineConfig({ - integrations: [mdx({ - rehypePlugins: [rehypeMinifyHtml], - })], -}); -``` - -### extendPlugins - -**Type:** `'markdown' | 'astroDefaults' | false` - -**Default:** `'markdown'` - -#### `markdown` (default) - -By default, Astro inherits all [remark](#remarkplugins) and [rehype](#rehypeplugins) plugins from [the `markdown` option in your Astro config](https://docs.astro.build/en/guides/markdown-content/#markdown-plugins). This also respects the [`markdown.extendDefaultPlugins`](https://docs.astro.build/en/reference/configuration-reference/#markdownextenddefaultplugins) option to extend Astro's defaults. Any additional plugins you apply in your MDX config will be applied _after_ your configured Markdown plugins. - -This example applies [`remark-toc`](https://github.com/remarkjs/remark-toc) to Markdown _and_ MDX, and [`rehype-minify`](https://github.com/rehypejs/rehype-minify) to MDX alone: - -__`astro.config.mjs`__ - -```js -import { defineConfig } from 'astro/config'; -import mdx from '@astrojs/mdx'; -import remarkToc from 'remark-toc'; -import rehypeMinify from 'rehype-minify'; - -export default defineConfig({ - markdown: { - // Applied to .md and .mdx files - remarkPlugins: [remarkToc], - }, - integrations: [mdx({ - // Applied to .mdx files only - rehypePlugins: [rehypeMinify], - })], + ] }); ``` @@ -349,40 +159,21 @@ You may also need to disable `markdown` config extension in MDX. For this, set ` __`astro.config.mjs`__ -```js "extendPlugins: 'astroDefaults'" +```js import { defineConfig } from 'astro/config'; import mdx from '@astrojs/mdx'; -import remarkToc from 'remark-toc'; export default defineConfig({ markdown: { remarkPlugins: [remarkPlugin1], }, - integrations: [mdx({ - remarkPlugins: [remarkToc], - // Astro defaults applied - extendPlugins: 'astroDefaults', - })], -}); -``` - -#### `false` - -If you don't want to extend any plugins, set `extendPlugins` to `false`: - -__`astro.config.mjs`__ - -```js "extendPlugins: false" -import { defineConfig } from 'astro/config'; -import mdx from '@astrojs/mdx'; -import remarkToc from 'remark-toc'; - -export default defineConfig({ - integrations: [mdx({ - remarkPlugins: [remarkToc], - // Astro defaults not applied - extendPlugins: false, - })], + integrations: [ + mdx({ + // Markdown config now ignored + extendMarkdownConfig: false, + // No `remarkPlugins` applied + }) + ] }); ``` @@ -392,30 +183,6 @@ These are plugins that modify the output [estree](https://github.com/estree/estr We suggest [using AST Explorer](https://astexplorer.net/) to play with estree outputs, and trying [`estree-util-visit`](https://unifiedjs.com/explore/package/estree-util-visit/) for searching across JavaScript nodes. -### remarkRehype - -Markdown content is transformed into HTML through remark-rehype which has [a number of options](https://github.com/remarkjs/remark-rehype#options). - -You can use remark-rehype options in your MDX integration config file like so: - -__`astro.config.mjs`__ - -```js -import { defineConfig } from 'astro/config'; -import mdx from '@astrojs/mdx'; - -export default defineConfig({ - integrations: [mdx({ - remarkRehype: { - footnoteLabel: 'Catatan kaki', - footnoteBackLabel: 'Kembali ke konten', - }, - })], -}); -``` - -This inherits the configuration of `markdown.remarkRehype`. This behavior can be changed by configuring `extendPlugins`. - ## Examples * The [Astro MDX starter template](https://github.com/withastro/astro/tree/latest/examples/with-mdx) shows how to use MDX files in your Astro project. From e88e799615844dda43219110376bac91793091bf Mon Sep 17 00:00:00 2001 From: Chris Swithinbank Date: Tue, 31 Jan 2023 16:09:02 +0100 Subject: [PATCH 02/23] Wrap tag in example error message in code backticks (#6063) --- packages/astro/src/core/errors/errors-data.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/astro/src/core/errors/errors-data.ts b/packages/astro/src/core/errors/errors-data.ts index 5a2b75cab..da9f3c1a0 100644 --- a/packages/astro/src/core/errors/errors-data.ts +++ b/packages/astro/src/core/errors/errors-data.ts @@ -419,7 +419,7 @@ See https://docs.astro.build/en/guides/server-side-rendering/ for more informati * @docs * @message * **Example error messages:**
- * InvalidComponentArgs: Invalid arguments passed to component. + * InvalidComponentArgs: Invalid arguments passed to `` component. * @description * Astro components cannot be rendered manually via a function call, such as `Component()` or `{items.map(Component)}`. Prefer the component syntax `` or `{items.map(item => )}`. */ From 474ecc7be625a0ff2e9bc145af948e75826de025 Mon Sep 17 00:00:00 2001 From: Happydev <81974850+MoustaphaDev@users.noreply.github.com> Date: Tue, 31 Jan 2023 17:50:17 +0100 Subject: [PATCH 03/23] Correct usage of `getImage` function (#6068) --- packages/integrations/image/README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/integrations/image/README.md b/packages/integrations/image/README.md index 213d9d3bb..e33520239 100644 --- a/packages/integrations/image/README.md +++ b/packages/integrations/image/README.md @@ -422,7 +422,10 @@ This can be helpful if you need to add preload links to a page's ``. --- import { getImage } from '@astrojs/image'; -const { src } = await getImage({src: '../assets/hero.png'}); +const { src } = await getImage({ + src: import('../assets/hero.png'), + alt: "My hero image" + }); --- From 2ab32b59ef0a28d34757f2c2adb9cf2baa86855e Mon Sep 17 00:00:00 2001 From: Ben Holmes Date: Tue, 31 Jan 2023 17:46:59 -0500 Subject: [PATCH 04/23] [MDX] Syntax highlighting after user plugins (#6050) * fix: load MDX syntax highlighting after user plugins * chore: changeset --- .changeset/orange-carpets-greet.md | 5 +++++ packages/integrations/mdx/src/plugins.ts | 15 +++++++++------ 2 files changed, 14 insertions(+), 6 deletions(-) create mode 100644 .changeset/orange-carpets-greet.md diff --git a/.changeset/orange-carpets-greet.md b/.changeset/orange-carpets-greet.md new file mode 100644 index 000000000..f862cf784 --- /dev/null +++ b/.changeset/orange-carpets-greet.md @@ -0,0 +1,5 @@ +--- +'@astrojs/mdx': minor +--- + +Fix: load syntax highlighters after MDX remark plugins. This keeps MDX consistent with Astro's markdown behavior. diff --git a/packages/integrations/mdx/src/plugins.ts b/packages/integrations/mdx/src/plugins.ts index 8c98e0016..cf30566c4 100644 --- a/packages/integrations/mdx/src/plugins.ts +++ b/packages/integrations/mdx/src/plugins.ts @@ -129,12 +129,7 @@ export async function getRemarkPlugins( config: AstroConfig ): Promise { let remarkPlugins: PluggableList = []; - if (mdxOptions.syntaxHighlight === 'shiki') { - remarkPlugins.push([await remarkShiki(mdxOptions.shikiConfig)]); - } - if (mdxOptions.syntaxHighlight === 'prism') { - remarkPlugins.push(remarkPrism); - } + if (mdxOptions.gfm) { remarkPlugins.push(remarkGfm); } @@ -144,6 +139,14 @@ export async function getRemarkPlugins( remarkPlugins = [...remarkPlugins, ...ignoreStringPlugins(mdxOptions.remarkPlugins)]; + // Apply syntax highlighters after user plugins to match `markdown/remark` behavior + if (mdxOptions.syntaxHighlight === 'shiki') { + remarkPlugins.push([await remarkShiki(mdxOptions.shikiConfig)]); + } + if (mdxOptions.syntaxHighlight === 'prism') { + remarkPlugins.push(remarkPrism); + } + // Apply last in case user plugins resolve relative image paths remarkPlugins.push(toRemarkContentRelImageError(config)); From 15f4d96b08caf3fd5db54aaef6255c8af7cbffd1 Mon Sep 17 00:00:00 2001 From: "Nick Buk[0vec]" Date: Tue, 31 Jan 2023 17:21:28 -0800 Subject: [PATCH 05/23] Add links to sharp docs in @astro/image README (#6017) Co-authored-by: Sarah Rainsberger --- packages/integrations/image/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/integrations/image/README.md b/packages/integrations/image/README.md index e33520239..9b369f631 100644 --- a/packages/integrations/image/README.md +++ b/packages/integrations/image/README.md @@ -259,7 +259,7 @@ color representation with 3 or 6 hexadecimal characters in the form `#123[abc]`, **Default:** `'cover'`

-> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. +> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. Read more about [how `sharp` resizes images](https://sharp.pixelplumbing.com/api-resize). How the image should be resized to fit both `height` and `width`. @@ -271,7 +271,7 @@ How the image should be resized to fit both `height` and `width`. **Default:** `'centre'`

-> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. +> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. Read more about [how `sharp` resizes images](https://sharp.pixelplumbing.com/api-resize). Position of the crop when fit is `cover` or `contain`. @@ -392,7 +392,7 @@ color representation with 3 or 6 hexadecimal characters in the form `#123[abc]`, **Default:** `'cover'`

-> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. +> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. Read more about [how `sharp` resizes images](https://sharp.pixelplumbing.com/api-resize). How the image should be resized to fit both `height` and `width`. @@ -406,7 +406,7 @@ How the image should be resized to fit both `height` and `width`. **Default:** `'centre'`

-> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. +> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. Read more about [how `sharp` resizes images](https://sharp.pixelplumbing.com/api-resize). Position of the crop when fit is `cover` or `contain`. From e3e2498248386169e5b56405f7d19d380cbeb72d Mon Sep 17 00:00:00 2001 From: Bryce Russell Date: Tue, 31 Jan 2023 19:28:14 -0600 Subject: [PATCH 06/23] Add required `alt` to Picture example (#6074) Co-authored-by: BryceRussell <19967622+BryceRussell@users.noreply.github.com> --- packages/integrations/image/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/integrations/image/README.md b/packages/integrations/image/README.md index 9b369f631..89fdbaba8 100644 --- a/packages/integrations/image/README.md +++ b/packages/integrations/image/README.md @@ -333,7 +333,7 @@ The list of sizes that should be built for responsive images. This is combined w ```astro // Builds three images: 400x400, 800x800, and 1200x1200 - + ``` #### aspectRatio From e193dfad1ec0d9bf857f0cce314c0127234c8bea Mon Sep 17 00:00:00 2001 From: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com> Date: Wed, 1 Feb 2023 09:29:34 -0300 Subject: [PATCH 07/23] Add JSDOC `@message` to fix docs error pages (#6076) --- packages/astro/src/core/errors/errors-data.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/astro/src/core/errors/errors-data.ts b/packages/astro/src/core/errors/errors-data.ts index da9f3c1a0..ad71c4e0f 100644 --- a/packages/astro/src/core/errors/errors-data.ts +++ b/packages/astro/src/core/errors/errors-data.ts @@ -629,6 +629,7 @@ See https://docs.astro.build/en/guides/server-side-rendering/ for more informati }, /** * @docs + * @message `COLLECTION_NAME` → `ENTRY_ID` has an invalid slug. `slug` must be a string. * @see * - [The reserved entry `slug` field](https://docs.astro.build/en/guides/content-collections/) * @description @@ -646,6 +647,7 @@ See https://docs.astro.build/en/guides/server-side-rendering/ for more informati }, /** * @docs + * @message A content collection schema should not contain `slug` since it is reserved for slug generation. Remove this from your `COLLECTION_NAME` collection schema. * @see * - [The reserved entry `slug` field](https://docs.astro.build/en/guides/content-collections/) * @description From 0db22041531d981a813a07f4c4e00cfb7ebddd51 Mon Sep 17 00:00:00 2001 From: Elliott Marquez <5981958+e111077@users.noreply.github.com> Date: Wed, 1 Feb 2023 05:18:37 -0800 Subject: [PATCH 08/23] [Lit] Fix hydration not having the same reactive values as server (#6080) * Fix lit hydration not having the same reactive values * add changeset * add clientEntrypoint to package exports * update tests * add changeset * only add defer-hydration when strictly necessary * remove second changest * fix test typos --- .changeset/dry-sloths-flash.md | 5 ++ .../src/components/NonDeferredCounter.js | 35 ++++++++++++++ .../lit-component/src/pages/index.astro | 6 ++- .../lit-component/src/pages/media.astro | 2 +- .../lit-component/src/pages/solo.astro | 2 +- packages/astro/e2e/lit-component.test.js | 31 ++++++++---- .../src/components/non-deferred-element.ts | 23 +++++++++ .../lit-element/src/pages/index.astro | 23 +++++---- packages/astro/test/lit-element.test.js | 47 ++++++++++++++----- packages/integrations/lit/package.json | 1 + packages/integrations/lit/server.js | 14 ++++-- packages/integrations/lit/src/client.ts | 25 ++++++++++ packages/integrations/lit/src/index.ts | 2 + 13 files changed, 181 insertions(+), 35 deletions(-) create mode 100644 .changeset/dry-sloths-flash.md create mode 100644 packages/astro/e2e/fixtures/lit-component/src/components/NonDeferredCounter.js create mode 100644 packages/astro/test/fixtures/lit-element/src/components/non-deferred-element.ts create mode 100644 packages/integrations/lit/src/client.ts diff --git a/.changeset/dry-sloths-flash.md b/.changeset/dry-sloths-flash.md new file mode 100644 index 000000000..9e8564cf9 --- /dev/null +++ b/.changeset/dry-sloths-flash.md @@ -0,0 +1,5 @@ +--- +'@astrojs/lit': patch +--- + +Fixes Lit hydration not having the same reactive values as server (losing state upon hydration) diff --git a/packages/astro/e2e/fixtures/lit-component/src/components/NonDeferredCounter.js b/packages/astro/e2e/fixtures/lit-component/src/components/NonDeferredCounter.js new file mode 100644 index 000000000..283d4063c --- /dev/null +++ b/packages/astro/e2e/fixtures/lit-component/src/components/NonDeferredCounter.js @@ -0,0 +1,35 @@ +import { LitElement, html } from 'lit'; + +export default class NonDeferredCounter extends LitElement { + static get properties() { + return { + count: { + type: Number, + // All set properties are reflected to attributes so its hydration is + // not deferred. + reflect: true, + }, + }; + } + + constructor() { + super(); + this.count = 0; + } + + increment() { + this.count++; + } + + render() { + return html` +
+

Count: ${this.count}

+ + +
+ `; + } +} + +customElements.define('non-deferred-counter', NonDeferredCounter); diff --git a/packages/astro/e2e/fixtures/lit-component/src/pages/index.astro b/packages/astro/e2e/fixtures/lit-component/src/pages/index.astro index ef86839d6..f15e832dc 100644 --- a/packages/astro/e2e/fixtures/lit-component/src/pages/index.astro +++ b/packages/astro/e2e/fixtures/lit-component/src/pages/index.astro @@ -1,8 +1,9 @@ --- import MyCounter from '../components/Counter.js'; +import NonDeferredCounter from '../components/NonDeferredCounter.js'; const someProps = { - count: 0, + count: 10, }; --- @@ -15,6 +16,9 @@ const someProps = {

Hello, client:idle!

+ + +

Hello, client:load!

 diff --git a/packages/astro/e2e/fixtures/lit-component/src/pages/media.astro b/packages/astro/e2e/fixtures/lit-component/src/pages/media.astro index a05d52863..69e1d7005 100644 --- a/packages/astro/e2e/fixtures/lit-component/src/pages/media.astro +++ b/packages/astro/e2e/fixtures/lit-component/src/pages/media.astro @@ -2,7 +2,7 @@ import MyCounter from '../components/Counter.js'; const someProps = { - count: 0, + count: 10, }; --- diff --git a/packages/astro/e2e/fixtures/lit-component/src/pages/solo.astro b/packages/astro/e2e/fixtures/lit-component/src/pages/solo.astro index 1d2745e47..c9dfe0ba0 100644 --- a/packages/astro/e2e/fixtures/lit-component/src/pages/solo.astro +++ b/packages/astro/e2e/fixtures/lit-component/src/pages/solo.astro @@ -2,7 +2,7 @@ import MyCounter from '../components/Counter.js'; const someProps = { - count: 0, + count: 10, }; --- diff --git a/packages/astro/e2e/lit-component.test.js b/packages/astro/e2e/lit-component.test.js index 6603d5b80..85af631b9 100644 --- a/packages/astro/e2e/lit-component.test.js +++ b/packages/astro/e2e/lit-component.test.js @@ -32,12 +32,25 @@ test.describe('Lit components', () => { await expect(counter).toHaveCount(1); const count = counter.locator('p'); - await expect(count, 'initial count is 0').toHaveText('Count: 0'); + await expect(count, 'initial count is 10').toHaveText('Count: 10'); const inc = counter.locator('button'); await inc.click(); - await expect(count, 'count incremented by 1').toHaveText('Count: 1'); + await expect(count, 'count incremented by 1').toHaveText('Count: 11'); + }); + + t('non-deferred attribute serialization', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + + const counter = page.locator('#non-deferred'); + const count = counter.locator('p'); + await expect(count, 'initial count is 10').toHaveText('Count: 10'); + + const inc = counter.locator('button'); + await inc.click(); + + await expect(count, 'count incremented by 1').toHaveText('Count: 11'); }); t('client:load', async ({ page, astro }) => { @@ -47,12 +60,12 @@ test.describe('Lit components', () => { await expect(counter, 'component is visible').toBeVisible(); const count = counter.locator('p'); - await expect(count, 'initial count is 0').toHaveText('Count: 0'); + await expect(count, 'initial count is 10').toHaveText('Count: 10'); const inc = counter.locator('button'); await inc.click(); - await expect(count, 'count incremented by 1').toHaveText('Count: 1'); + await expect(count, 'count incremented by 1').toHaveText('Count: 11'); }); t('client:visible', async ({ page, astro }) => { @@ -64,12 +77,12 @@ test.describe('Lit components', () => { await expect(counter, 'component is visible').toBeVisible(); const count = counter.locator('p'); - await expect(count, 'initial count is 0').toHaveText('Count: 0'); + await expect(count, 'initial count is 10').toHaveText('Count: 10'); const inc = counter.locator('button'); await inc.click(); - await expect(count, 'count incremented by 1').toHaveText('Count: 1'); + await expect(count, 'count incremented by 1').toHaveText('Count: 11'); }); t('client:media', async ({ page, astro }) => { @@ -79,18 +92,18 @@ test.describe('Lit components', () => { await expect(counter, 'component is visible').toBeVisible(); const count = counter.locator('p'); - await expect(count, 'initial count is 0').toHaveText('Count: 0'); + await expect(count, 'initial count is 10').toHaveText('Count: 10'); const inc = counter.locator('button'); await inc.click(); - await expect(count, 'component not hydrated yet').toHaveText('Count: 0'); + await expect(count, 'component not hydrated yet').toHaveText('Count: 10'); // Reset the viewport to hydrate the component (max-width: 50rem) await page.setViewportSize({ width: 414, height: 1124 }); await inc.click(); - await expect(count, 'count incremented by 1').toHaveText('Count: 1'); + await expect(count, 'count incremented by 1').toHaveText('Count: 11'); }); t.skip('HMR', async ({ page, astro }) => { diff --git a/packages/astro/test/fixtures/lit-element/src/components/non-deferred-element.ts b/packages/astro/test/fixtures/lit-element/src/components/non-deferred-element.ts new file mode 100644 index 000000000..0cd36576b --- /dev/null +++ b/packages/astro/test/fixtures/lit-element/src/components/non-deferred-element.ts @@ -0,0 +1,23 @@ +import { LitElement, html } from 'lit'; +import { property, customElement } from 'lit/decorators.js'; + +@customElement('non-deferred-counter') +export class NonDeferredCounter extends LitElement { + // All set properties are reflected to attributes so its hydration is not + // hydration-deferred should always be set. + @property({ type: Number, reflect: true }) count = 0; + + increment() { + this.count++; + } + + render() { + return html` +
+

Count: ${this.count}

+ + +
+ `; + } +} diff --git a/packages/astro/test/fixtures/lit-element/src/pages/index.astro b/packages/astro/test/fixtures/lit-element/src/pages/index.astro index 408360157..394885fca 100644 --- a/packages/astro/test/fixtures/lit-element/src/pages/index.astro +++ b/packages/astro/test/fixtures/lit-element/src/pages/index.astro @@ -1,18 +1,25 @@ --- import {MyElement} from '../components/my-element.js'; +import {NonDeferredCounter} from '../components/non-deferred-element.js'; --- - LitElements + LitElements - - + + + + diff --git a/packages/astro/test/lit-element.test.js b/packages/astro/test/lit-element.test.js index a74fb0fc5..0b42c5699 100644 --- a/packages/astro/test/lit-element.test.js +++ b/packages/astro/test/lit-element.test.js @@ -30,36 +30,59 @@ describe('LitElement test', function () { const $ = cheerio.load(html); // test 1: attributes rendered – non reactive properties - expect($('my-element').attr('foo')).to.equal('bar'); + expect($('#default').attr('foo')).to.equal('bar'); // test 2: shadow rendered - expect($('my-element').html()).to.include(`
Testing...
`); + expect($('#default').html()).to.include(`
Testing...
`); // test 3: string reactive property set - expect(stripExpressionMarkers($('my-element').html())).to.include( + expect(stripExpressionMarkers($('#default').html())).to.include( `
initialized
` ); // test 4: boolean reactive property correctly set // Lit will equate to true because it uses // this.hasAttribute to determine its value - expect(stripExpressionMarkers($('my-element').html())).to.include(`
B
`); + expect(stripExpressionMarkers($('#default').html())).to.include(`
B
`); // test 5: object reactive property set // by default objects will be stringified to [object Object] - expect(stripExpressionMarkers($('my-element').html())).to.include( + expect(stripExpressionMarkers($('#default').html())).to.include( `
data: 1
` ); // test 6: reactive properties are not rendered as attributes - expect($('my-element').attr('obj')).to.equal(undefined); - expect($('my-element').attr('bool')).to.equal(undefined); - expect($('my-element').attr('str')).to.equal(undefined); + expect($('#default').attr('obj')).to.equal(undefined); + expect($('#default').attr('bool')).to.equal(undefined); + expect($('#default').attr('str')).to.equal(undefined); // test 7: reflected reactive props are rendered as attributes - expect($('my-element').attr('reflectedbool')).to.equal(''); - expect($('my-element').attr('reflected-str')).to.equal('default reflected string'); - expect($('my-element').attr('reflected-str-prop')).to.equal('initialized reflected'); + expect($('#default').attr('reflectedbool')).to.equal(''); + expect($('#default').attr('reflected-str')).to.equal('default reflected string'); + expect($('#default').attr('reflected-str-prop')).to.equal('initialized reflected'); + }); + + it('Sets defer-hydration on element only when necessary', async () => { + // @lit-labs/ssr/ requires Node 13.9 or higher + if (NODE_VERSION < 13.9) { + return; + } + const html = await fixture.readFile('/index.html'); + const $ = cheerio.load(html); + + // test 1: reflected reactive props are rendered as attributes + expect($('#non-deferred').attr('count')).to.equal('10'); + + // test 2: non-reactive props are set as attributes + expect($('#non-deferred').attr('foo')).to.equal('bar'); + + // test 3: components with only reflected reactive props set are not + // deferred because their state can be completely serialized via attributes + expect($('#non-deferred').attr('defer-hydration')).to.equal(undefined); + + // test 4: components with non-reflected reactive props set are deferred because + // their state needs to be synced with the server on the client. + expect($('#default').attr('defer-hydration')).to.equal(''); }); it('Correctly passes child slots', async () => { @@ -74,7 +97,7 @@ describe('LitElement test', function () { const $slottedMyElement = $('#slotted'); const $slottedSlottedMyElement = $('#slotted-slotted'); - expect($('my-element').length).to.equal(3); + expect($('#default').length).to.equal(3); // Root my-element expect($rootMyElement.children('.default').length).to.equal(2); diff --git a/packages/integrations/lit/package.json b/packages/integrations/lit/package.json index ac0a8608c..1136570ee 100644 --- a/packages/integrations/lit/package.json +++ b/packages/integrations/lit/package.json @@ -23,6 +23,7 @@ ".": "./dist/index.js", "./server.js": "./server.js", "./client-shim.js": "./client-shim.js", + "./dist/client.js": "./dist/client.js", "./hydration-support.js": "./hydration-support.js", "./package.json": "./package.json" }, diff --git a/packages/integrations/lit/server.js b/packages/integrations/lit/server.js index 83737c183..48a3c646f 100644 --- a/packages/integrations/lit/server.js +++ b/packages/integrations/lit/server.js @@ -36,10 +36,18 @@ function* render(Component, attrs, slots) { // LitElementRenderer creates a new element instance, so copy over. const Ctr = getCustomElementConstructor(tagName); + let shouldDeferHydration = false; + if (attrs) { for (let [name, value] of Object.entries(attrs)) { - // check if this is a reactive property - if (name in Ctr.prototype) { + const isReactiveProperty = name in Ctr.prototype; + const isReflectedReactiveProperty = Ctr.elementProperties.get(name)?.reflect; + + // Only defer hydration if we are setting a reactive property that cannot + // be reflected / serialized as a property. + shouldDeferHydration ||= isReactiveProperty && !isReflectedReactiveProperty; + + if (isReactiveProperty) { instance.setProperty(name, value); } else { instance.setAttribute(name, value); @@ -49,7 +57,7 @@ function* render(Component, attrs, slots) { instance.connectedCallback(); - yield `<${tagName}`; + yield `<${tagName}${shouldDeferHydration ? ' defer-hydration' : ''}`; yield* instance.renderAttributes(); yield `>`; const shadowContents = instance.renderShadow({}); diff --git a/packages/integrations/lit/src/client.ts b/packages/integrations/lit/src/client.ts new file mode 100644 index 000000000..00f126e34 --- /dev/null +++ b/packages/integrations/lit/src/client.ts @@ -0,0 +1,25 @@ +export default (element: HTMLElement) => + async ( + Component: any, + props: Record, + ) => { + // Get the LitElement element instance (may or may not be upgraded). + const component = element.children[0] as HTMLElement; + + // If there is no deferral of hydration, then all reactive properties are + // already serialzied as reflected attributes, or no reactive props were set + if (!component || !component.hasAttribute('defer-hydration')) { + return; + } + + // Set properties on the LitElement instance for resuming hydration. + for (let [name, value] of Object.entries(props)) { + // Check if reactive property or class property. + if (name in Component.prototype) { + (component as any)[name] = value; + } + } + + // Tell LitElement to resume hydration. + component.removeAttribute('defer-hydration'); + }; diff --git a/packages/integrations/lit/src/index.ts b/packages/integrations/lit/src/index.ts index 5b428ef8d..de6d5b0f9 100644 --- a/packages/integrations/lit/src/index.ts +++ b/packages/integrations/lit/src/index.ts @@ -5,6 +5,7 @@ function getViteConfiguration() { return { optimizeDeps: { include: [ + '@astrojs/lit/dist/client.js', '@astrojs/lit/client-shim.js', '@astrojs/lit/hydration-support.js', '@webcomponents/template-shadowroot/template-shadowroot.js', @@ -34,6 +35,7 @@ export default function (): AstroIntegration { addRenderer({ name: '@astrojs/lit', serverEntrypoint: '@astrojs/lit/server.js', + clientEntrypoint: '@astrojs/lit/dist/client.js', }); // Update the vite configuration. updateConfig({ From 94bcf24e45ab95f108433fe28fab4570ccfb8905 Mon Sep 17 00:00:00 2001 From: matthewp Date: Wed, 1 Feb 2023 13:20:23 +0000 Subject: [PATCH 09/23] [ci] format --- packages/astro/test/lit-element.test.js | 4 +-- packages/integrations/lit/src/client.ts | 40 +++++++++++-------------- 2 files changed, 19 insertions(+), 25 deletions(-) diff --git a/packages/astro/test/lit-element.test.js b/packages/astro/test/lit-element.test.js index 0b42c5699..9512909d8 100644 --- a/packages/astro/test/lit-element.test.js +++ b/packages/astro/test/lit-element.test.js @@ -47,9 +47,7 @@ describe('LitElement test', function () { // test 5: object reactive property set // by default objects will be stringified to [object Object] - expect(stripExpressionMarkers($('#default').html())).to.include( - `
data: 1
` - ); + expect(stripExpressionMarkers($('#default').html())).to.include(`
data: 1
`); // test 6: reactive properties are not rendered as attributes expect($('#default').attr('obj')).to.equal(undefined); diff --git a/packages/integrations/lit/src/client.ts b/packages/integrations/lit/src/client.ts index 00f126e34..fb92ac3df 100644 --- a/packages/integrations/lit/src/client.ts +++ b/packages/integrations/lit/src/client.ts @@ -1,25 +1,21 @@ -export default (element: HTMLElement) => - async ( - Component: any, - props: Record, - ) => { - // Get the LitElement element instance (may or may not be upgraded). - const component = element.children[0] as HTMLElement; +export default (element: HTMLElement) => async (Component: any, props: Record) => { + // Get the LitElement element instance (may or may not be upgraded). + const component = element.children[0] as HTMLElement; - // If there is no deferral of hydration, then all reactive properties are - // already serialzied as reflected attributes, or no reactive props were set - if (!component || !component.hasAttribute('defer-hydration')) { - return; + // If there is no deferral of hydration, then all reactive properties are + // already serialzied as reflected attributes, or no reactive props were set + if (!component || !component.hasAttribute('defer-hydration')) { + return; + } + + // Set properties on the LitElement instance for resuming hydration. + for (let [name, value] of Object.entries(props)) { + // Check if reactive property or class property. + if (name in Component.prototype) { + (component as any)[name] = value; } + } - // Set properties on the LitElement instance for resuming hydration. - for (let [name, value] of Object.entries(props)) { - // Check if reactive property or class property. - if (name in Component.prototype) { - (component as any)[name] = value; - } - } - - // Tell LitElement to resume hydration. - component.removeAttribute('defer-hydration'); - }; + // Tell LitElement to resume hydration. + component.removeAttribute('defer-hydration'); +}; From f91615f5c04fde36f115dad9110dd75254efd61d Mon Sep 17 00:00:00 2001 From: Daniel Date: Wed, 1 Feb 2023 14:26:45 +0100 Subject: [PATCH 10/23] fix: Failed to execute 'encode' on 'TextEncoder': parameter 1 is not of type 'String' in Edge Runtime SSR (#6070) * minor fixes for errors related to vercel SSR in core * yielding empty string instead of nothing, to not exit the iterator --------- Co-authored-by: AirBorne04 <> --- .changeset/curvy-owls-grow.md | 6 ++++++ packages/astro/src/runtime/server/render/common.ts | 4 +++- packages/astro/src/runtime/server/render/component.ts | 6 ++++-- 3 files changed, 13 insertions(+), 3 deletions(-) create mode 100644 .changeset/curvy-owls-grow.md diff --git a/.changeset/curvy-owls-grow.md b/.changeset/curvy-owls-grow.md new file mode 100644 index 000000000..8a5434f3f --- /dev/null +++ b/.changeset/curvy-owls-grow.md @@ -0,0 +1,6 @@ +--- +'astro': patch +--- + +* safe guard against TextEncode.encode(HTMLString) [errors on vercel edge] +* safe guard against html.replace when html is undefined \ No newline at end of file diff --git a/packages/astro/src/runtime/server/render/common.ts b/packages/astro/src/runtime/server/render/common.ts index 9b1aa1453..dbb9a6ec5 100644 --- a/packages/astro/src/runtime/server/render/common.ts +++ b/packages/astro/src/runtime/server/render/common.ts @@ -93,5 +93,7 @@ export function chunkToByteArray( if (chunk instanceof Uint8Array) { return chunk as Uint8Array; } - return encoder.encode(stringifyChunk(result, chunk)); + // stringify chunk might return a HTMLString + let stringified = stringifyChunk(result, chunk); + return encoder.encode(stringified.toString()); } diff --git a/packages/astro/src/runtime/server/render/component.ts b/packages/astro/src/runtime/server/render/component.ts index b6a6576f1..a2ab2e327 100644 --- a/packages/astro/src/runtime/server/render/component.ts +++ b/packages/astro/src/runtime/server/render/component.ts @@ -261,9 +261,11 @@ If you're still stuck, please open an issue on GitHub or join us at https://astr if (isPage || renderer?.name === 'astro:jsx') { yield html; - } else { + } else if(html && html.length > 0) { yield markHTMLString(html.replace(/\<\/?astro-slot\>/g, '')); - } + } else { + yield ''; + } })(); } From 01ef1e565b45615f0015437c346a9c8465cc34dd Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Wed, 1 Feb 2023 13:29:00 +0000 Subject: [PATCH 11/23] [ci] format --- packages/astro/src/runtime/server/render/common.ts | 4 ++-- packages/astro/src/runtime/server/render/component.ts | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/astro/src/runtime/server/render/common.ts b/packages/astro/src/runtime/server/render/common.ts index dbb9a6ec5..def7dedd3 100644 --- a/packages/astro/src/runtime/server/render/common.ts +++ b/packages/astro/src/runtime/server/render/common.ts @@ -93,7 +93,7 @@ export function chunkToByteArray( if (chunk instanceof Uint8Array) { return chunk as Uint8Array; } - // stringify chunk might return a HTMLString - let stringified = stringifyChunk(result, chunk); + // stringify chunk might return a HTMLString + let stringified = stringifyChunk(result, chunk); return encoder.encode(stringified.toString()); } diff --git a/packages/astro/src/runtime/server/render/component.ts b/packages/astro/src/runtime/server/render/component.ts index a2ab2e327..034e79667 100644 --- a/packages/astro/src/runtime/server/render/component.ts +++ b/packages/astro/src/runtime/server/render/component.ts @@ -261,11 +261,11 @@ If you're still stuck, please open an issue on GitHub or join us at https://astr if (isPage || renderer?.name === 'astro:jsx') { yield html; - } else if(html && html.length > 0) { + } else if (html && html.length > 0) { yield markHTMLString(html.replace(/\<\/?astro-slot\>/g, '')); } else { - yield ''; - } + yield ''; + } })(); } From 2fb72c887f71c0a69ab512870d65b8c867774766 Mon Sep 17 00:00:00 2001 From: Ben Holmes Date: Wed, 1 Feb 2023 08:33:18 -0500 Subject: [PATCH 12/23] [Content collections] Apply MDX components on render (#6064) * fix: apply MDX components during render() * test: MDX components export in SSG and SSR * chore: changeset --- .changeset/heavy-tomatoes-know.md | 5 +++ packages/astro/src/content/internal.ts | 41 ++++++++++++++----- .../src/content/vite-plugin-content-assets.ts | 4 +- .../test/content-collections-render.test.js | 33 +++++++++++++++ .../fixtures/content/src/components/H2.astro | 4 ++ .../promo/launch-week-components-export.mdx | 18 ++++++++ .../pages/launch-week-components-export.astro | 14 +++++++ 7 files changed, 108 insertions(+), 11 deletions(-) create mode 100644 .changeset/heavy-tomatoes-know.md create mode 100644 packages/astro/test/fixtures/content/src/components/H2.astro create mode 100644 packages/astro/test/fixtures/content/src/content/blog/promo/launch-week-components-export.mdx create mode 100644 packages/astro/test/fixtures/content/src/pages/launch-week-components-export.astro diff --git a/.changeset/heavy-tomatoes-know.md b/.changeset/heavy-tomatoes-know.md new file mode 100644 index 000000000..ae8fd2dac --- /dev/null +++ b/.changeset/heavy-tomatoes-know.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Apply MDX `components` export when rendering as a content collection entry diff --git a/packages/astro/src/content/internal.ts b/packages/astro/src/content/internal.ts index 2b8f8ba6f..04280166f 100644 --- a/packages/astro/src/content/internal.ts +++ b/packages/astro/src/content/internal.ts @@ -1,3 +1,4 @@ +import { AstroError, AstroErrorData } from '../core/errors/index.js'; import { prependForwardSlash } from '../core/path.js'; import { @@ -120,21 +121,32 @@ async function render({ id: string; collectionToRenderEntryMap: CollectionToEntryMap; }) { - const lazyImport = collectionToRenderEntryMap[collection]?.[id]; - if (!lazyImport) throw new Error(`${String(collection)} → ${String(id)} does not exist.`); + const UnexpectedRenderError = new AstroError({ + ...AstroErrorData.UnknownContentCollectionError, + message: `Unexpected error while rendering ${String(collection)} → ${String(id)}.`, + }); - const mod = await lazyImport(); + const lazyImport = collectionToRenderEntryMap[collection]?.[id]; + if (typeof lazyImport !== 'function') throw UnexpectedRenderError; + + const baseMod = await lazyImport(); + if (baseMod == null || typeof baseMod !== 'object') throw UnexpectedRenderError; + + const { collectedStyles, collectedLinks, collectedScripts, getMod } = baseMod; + if (typeof getMod !== 'function') throw UnexpectedRenderError; + const mod = await getMod(); + if (mod == null || typeof mod !== 'object') throw UnexpectedRenderError; const Content = createComponent({ - factory(result, props, slots) { + factory(result, baseProps, slots) { let styles = '', links = '', scripts = ''; - if (Array.isArray(mod?.collectedStyles)) { - styles = mod.collectedStyles.map((style: any) => renderStyleElement(style)).join(''); + if (Array.isArray(collectedStyles)) { + styles = collectedStyles.map((style: any) => renderStyleElement(style)).join(''); } - if (Array.isArray(mod?.collectedLinks)) { - links = mod.collectedLinks + if (Array.isArray(collectedLinks)) { + links = collectedLinks .map((link: any) => { return renderUniqueStylesheet(result, { href: prependForwardSlash(link), @@ -142,8 +154,17 @@ async function render({ }) .join(''); } - if (Array.isArray(mod?.collectedScripts)) { - scripts = mod.collectedScripts.map((script: any) => renderScriptElement(script)).join(''); + if (Array.isArray(collectedScripts)) { + scripts = collectedScripts.map((script: any) => renderScriptElement(script)).join(''); + } + + let props = baseProps; + // Auto-apply MDX components export + if (id.endsWith('mdx')) { + props = { + components: mod.components ?? {}, + ...baseProps, + }; } return createHeadAndContent( diff --git a/packages/astro/src/content/vite-plugin-content-assets.ts b/packages/astro/src/content/vite-plugin-content-assets.ts index 54b84380d..fd73caf47 100644 --- a/packages/astro/src/content/vite-plugin-content-assets.ts +++ b/packages/astro/src/content/vite-plugin-content-assets.ts @@ -36,7 +36,9 @@ export function astroContentAssetPropagationPlugin({ mode }: { mode: string }): if (isPropagatedAsset(id)) { const basePath = id.split('?')[0]; const code = ` - export { Content, getHeadings, frontmatter } from ${JSON.stringify(basePath)}; + export async function getMod() { + return import(${JSON.stringify(basePath)}); + } export const collectedLinks = ${JSON.stringify(LINKS_PLACEHOLDER)}; export const collectedStyles = ${JSON.stringify(STYLES_PLACEHOLDER)}; export const collectedScripts = ${JSON.stringify(SCRIPTS_PLACEHOLDER)}; diff --git a/packages/astro/test/content-collections-render.test.js b/packages/astro/test/content-collections-render.test.js index 92015393c..da14a4765 100644 --- a/packages/astro/test/content-collections-render.test.js +++ b/packages/astro/test/content-collections-render.test.js @@ -71,6 +71,15 @@ describe('Content Collections - render()', () => { '`WithScripts.astro` hoisted script included unexpectedly.' ).to.be.undefined; }); + + it('Applies MDX components export', async () => { + const html = await fixture.readFile('/launch-week-components-export/index.html'); + const $ = cheerio.load(html); + + const h2 = $('h2'); + expect(h2).to.have.a.lengthOf(1); + expect(h2.attr('data-components-export-applied')).to.equal('true'); + }); }); describe('Build - SSR', () => { @@ -110,6 +119,18 @@ describe('Content Collections - render()', () => { // Includes styles expect($('link[rel=stylesheet]')).to.have.a.lengthOf(0); }); + + it('Applies MDX components export', async () => { + const app = await fixture.loadTestAdapterApp(); + const request = new Request('http://example.com/launch-week-components-export'); + const response = await app.render(request); + const html = await response.text(); + const $ = cheerio.load(html); + + const h2 = $('h2'); + expect(h2).to.have.a.lengthOf(1); + expect(h2.attr('data-components-export-applied')).to.equal('true'); + }); }); describe('Dev - SSG', () => { @@ -162,5 +183,17 @@ describe('Content Collections - render()', () => { // Includes inline script expect($('script[data-is-inline]')).to.have.a.lengthOf(1); }); + + it('Applies MDX components export', async () => { + const response = await fixture.fetch('/launch-week-components-export', { method: 'GET' }); + expect(response.status).to.equal(200); + + const html = await response.text(); + const $ = cheerio.load(html); + + const h2 = $('h2'); + expect(h2).to.have.a.lengthOf(1); + expect(h2.attr('data-components-export-applied')).to.equal('true'); + }); }); }); diff --git a/packages/astro/test/fixtures/content/src/components/H2.astro b/packages/astro/test/fixtures/content/src/components/H2.astro new file mode 100644 index 000000000..d1ad359c2 --- /dev/null +++ b/packages/astro/test/fixtures/content/src/components/H2.astro @@ -0,0 +1,4 @@ +--- +--- + +

diff --git a/packages/astro/test/fixtures/content/src/content/blog/promo/launch-week-components-export.mdx b/packages/astro/test/fixtures/content/src/content/blog/promo/launch-week-components-export.mdx new file mode 100644 index 000000000..40012b8ef --- /dev/null +++ b/packages/astro/test/fixtures/content/src/content/blog/promo/launch-week-components-export.mdx @@ -0,0 +1,18 @@ +--- +title: 'Launch week!' +description: 'Join us for the exciting launch of SPACE BLOG' +publishedDate: 'Sat May 21 2022 00:00:00 GMT-0400 (Eastern Daylight Time)' +tags: ['announcement'] +--- + +import H2 from '../../../components/H2.astro'; + +export const components = { h2: H2 }; + +Join us for the space blog launch! + +## Details + +- THIS THURSDAY +- Houston, TX +- Dress code: **interstellar casual** ✨ diff --git a/packages/astro/test/fixtures/content/src/pages/launch-week-components-export.astro b/packages/astro/test/fixtures/content/src/pages/launch-week-components-export.astro new file mode 100644 index 000000000..463e65191 --- /dev/null +++ b/packages/astro/test/fixtures/content/src/pages/launch-week-components-export.astro @@ -0,0 +1,14 @@ +--- +import { getEntryBySlug } from 'astro:content'; + +const entry = await getEntryBySlug('blog', 'promo/launch-week-components-export'); +const { Content } = await entry.render(); +--- + + + Launch Week + + + + + From 724f9dc2d61eba616a822042e2061feabd5f489c Mon Sep 17 00:00:00 2001 From: "Houston (Bot)" <108291165+astrobot-houston@users.noreply.github.com> Date: Wed, 1 Feb 2023 05:35:03 -0800 Subject: [PATCH 13/23] [ci] update lockfile (#6060) Co-authored-by: FredKSchott --- pnpm-lock.yaml | 302 +++++++++++++++++++++++++------------------------ 1 file changed, 152 insertions(+), 150 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c800e4641..947e9eeca 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -43,8 +43,8 @@ importers: '@changesets/cli': 2.23.0_kcozqtpxuwjzskw6zg5royevn4 '@octokit/action': 3.18.1 '@types/node': 18.11.18 - '@typescript-eslint/eslint-plugin': 5.49.0_uymdhlntwytpctrrgoyjmlajou - '@typescript-eslint/parser': 5.49.0_l36yidrw337hwf2rtnamh77lgq + '@typescript-eslint/eslint-plugin': 5.50.0_7ng24j2y7m7ooe4h5dv7wjycke + '@typescript-eslint/parser': 5.50.0_l36yidrw337hwf2rtnamh77lgq del: 7.0.0 esbuild: 0.15.18 eslint: 8.33.0 @@ -173,7 +173,7 @@ importers: preact: 10.11.3 react: 18.2.0 react-dom: 18.2.0_react@18.2.0 - solid-js: 1.6.9 + solid-js: 1.6.10 svelte: 3.55.1 vue: 3.2.45 @@ -213,7 +213,7 @@ importers: dependencies: '@astrojs/solid-js': link:../../packages/integrations/solid astro: link:../../packages/astro - solid-js: 1.6.9 + solid-js: 1.6.10 examples/framework-svelte: specifiers: @@ -283,7 +283,7 @@ importers: concurrently: 7.6.0 svelte: 3.55.1 unocss: 0.15.6 - vite-imagetools: 4.0.17 + vite-imagetools: 4.0.18 examples/with-markdown-plugins: specifiers: @@ -485,7 +485,7 @@ importers: cookie: 0.5.0 debug: 4.3.4 deepmerge-ts: 4.2.2 - devalue: 4.2.2 + devalue: 4.2.3 diff: 5.1.0 es-module-lexer: 1.1.0 estree-walker: 3.0.3 @@ -510,10 +510,10 @@ importers: strip-ansi: 7.0.1 supports-esm: 1.0.0 tsconfig-resolver: 3.0.1 - typescript: 4.9.4 + typescript: 4.9.5 unist-util-visit: 4.1.2 vfile: 5.3.6 - vite: 4.0.4_sass@1.57.1 + vite: 4.0.4_sass@1.58.0 vitefu: 0.2.4_vite@4.0.4 yargs-parser: 21.1.1 zod: 3.20.2 @@ -550,8 +550,8 @@ importers: rehype-slug: 5.1.0 rehype-toc: 3.0.2 remark-code-titles: 0.1.2 - rollup: 3.12.0 - sass: 1.57.1 + rollup: 3.12.1 + sass: 1.58.0 srcset-parse: 1.1.0 undici: 5.16.0 unified: 10.1.2 @@ -640,7 +640,7 @@ importers: preact: 10.11.3 react: 18.2.0 react-dom: 18.2.0_react@18.2.0 - solid-js: 1.6.9 + solid-js: 1.6.10 svelte: 3.55.1 vue: 3.2.45 devDependencies: @@ -679,7 +679,7 @@ importers: sass: ^1.52.2 dependencies: astro: link:../../.. - sass: 1.57.1 + sass: 1.58.0 packages/astro/e2e/fixtures/errors: specifiers: @@ -705,7 +705,7 @@ importers: preact: 10.11.3 react: 18.2.0 react-dom: 18.2.0_react@18.2.0 - solid-js: 1.6.9 + solid-js: 1.6.10 svelte: 3.55.1 vue: 3.2.45 @@ -760,7 +760,7 @@ importers: preact: 10.11.3 react: 18.2.0 react-dom: 18.2.0_react@18.2.0 - solid-js: 1.6.9 + solid-js: 1.6.10 svelte: 3.55.1 vue: 3.2.45 devDependencies: @@ -803,7 +803,7 @@ importers: preact: 10.11.3 react: 18.2.0 react-dom: 18.2.0_react@18.2.0 - solid-js: 1.6.9 + solid-js: 1.6.10 svelte: 3.55.1 vue: 3.2.45 devDependencies: @@ -832,7 +832,7 @@ importers: preact: 10.11.3 react: 18.2.0 react-dom: 18.2.0_react@18.2.0 - solid-js: 1.6.9 + solid-js: 1.6.10 svelte: 3.55.1 vue: 3.2.45 devDependencies: @@ -861,7 +861,7 @@ importers: preact: 10.11.3 react: 18.2.0 react-dom: 18.2.0_react@18.2.0 - solid-js: 1.6.9 + solid-js: 1.6.10 svelte: 3.55.1 vue: 3.2.45 devDependencies: @@ -890,7 +890,7 @@ importers: preact: 10.11.3 react: 18.2.0 react-dom: 18.2.0_react@18.2.0 - solid-js: 1.6.9 + solid-js: 1.6.10 svelte: 3.55.1 vue: 3.2.45 devDependencies: @@ -919,7 +919,7 @@ importers: preact: 10.11.3 react: 18.2.0 react-dom: 18.2.0_react@18.2.0 - solid-js: 1.6.9 + solid-js: 1.6.10 svelte: 3.55.1 vue: 3.2.45 devDependencies: @@ -948,7 +948,7 @@ importers: preact: 10.11.3 react: 18.2.0 react-dom: 18.2.0_react@18.2.0 - solid-js: 1.6.9 + solid-js: 1.6.10 svelte: 3.55.1 vue: 3.2.45 devDependencies: @@ -1024,7 +1024,7 @@ importers: '@astrojs/mdx': link:../../../../integrations/mdx '@astrojs/solid-js': link:../../../../integrations/solid astro: link:../../.. - solid-js: 1.6.9 + solid-js: 1.6.10 packages/astro/e2e/fixtures/solid-recurse: specifiers: @@ -1035,7 +1035,7 @@ importers: '@astrojs/solid-js': link:../../../../integrations/solid astro: link:../../.. devDependencies: - solid-js: 1.6.9 + solid-js: 1.6.10 packages/astro/e2e/fixtures/svelte-component: specifiers: @@ -1911,7 +1911,7 @@ importers: preact: 10.11.3 react: 18.2.0 react-dom: 18.2.0_react@18.2.0 - solid-js: 1.6.9 + solid-js: 1.6.10 svelte: 3.55.1 vue: 3.2.45 devDependencies: @@ -1930,7 +1930,7 @@ importers: dependencies: '@astrojs/solid-js': link:../../../../integrations/solid astro: link:../../.. - solid-js: 1.6.9 + solid-js: 1.6.10 packages/astro/test/fixtures/lazy-layout: specifiers: @@ -2017,7 +2017,7 @@ importers: astro: link:../../.. autoprefixer: 10.4.13_postcss@8.4.21 postcss: 8.4.21 - solid-js: 1.6.9 + solid-js: 1.6.10 svelte: 3.55.1 vue: 3.2.45 devDependencies: @@ -2073,7 +2073,7 @@ importers: astro: link:../../.. react: 18.2.0 react-dom: 18.2.0_react@18.2.0 - solid-js: 1.6.9 + solid-js: 1.6.10 packages/astro/test/fixtures/react-component: specifiers: @@ -2180,7 +2180,7 @@ importers: '@astrojs/mdx': link:../../../../integrations/mdx '@astrojs/solid-js': link:../../../../integrations/solid astro: link:../../.. - solid-js: 1.6.9 + solid-js: 1.6.10 packages/astro/test/fixtures/slots-svelte: specifiers: @@ -2215,16 +2215,16 @@ importers: solid-js: ^1.5.6 dependencies: '@astrojs/solid-js': link:../../../../integrations/solid - '@solidjs/router': 0.5.1_solid-js@1.6.9 + '@solidjs/router': 0.5.1_solid-js@1.6.10 '@test/solid-jsx-component': file:packages/astro/test/fixtures/solid-component/deps/solid-jsx-component astro: link:../../.. - solid-js: 1.6.9 + solid-js: 1.6.10 packages/astro/test/fixtures/solid-component/deps/solid-jsx-component: specifiers: solid-js: ^1.5.6 dependencies: - solid-js: 1.6.9 + solid-js: 1.6.10 packages/astro/test/fixtures/sourcemap: specifiers: @@ -2627,7 +2627,7 @@ importers: chai: 4.3.7 cheerio: 1.0.0-rc.12 mocha: 9.2.2 - wrangler: 2.8.1 + wrangler: 2.9.0 packages/integrations/cloudflare/test/fixtures/basics: specifiers: @@ -2854,7 +2854,7 @@ importers: cheerio: 1.0.0-rc.12 lit: 2.6.1 mocha: 9.2.2 - sass: 1.57.1 + sass: 1.58.0 packages/integrations/mdx: specifiers: @@ -3258,12 +3258,12 @@ importers: solid-js: ^1.5.1 vitefu: ^0.2.1 dependencies: - babel-preset-solid: 1.6.9 + babel-preset-solid: 1.6.10 vitefu: 0.2.4 devDependencies: astro: link:../../astro astro-scripts: link:../../../scripts - solid-js: 1.6.9 + solid-js: 1.6.10 packages/integrations/svelte: specifiers: @@ -3552,7 +3552,7 @@ importers: '@types/unist': 2.0.6 astro-scripts: link:../../../scripts chai: 4.3.7 - mdast-util-mdx-expression: 1.3.1 + mdast-util-mdx-expression: 1.3.2 mocha: 9.2.2 packages/telemetry: @@ -3983,7 +3983,7 @@ packages: '@babel/compat-data': 7.20.14 '@babel/core': 7.20.12 '@babel/helper-validator-option': 7.18.6 - browserslist: 4.21.4 + browserslist: 4.21.5 lru-cache: 5.1.1 semver: 6.3.0 dev: false @@ -5454,7 +5454,7 @@ packages: resolution: {integrity: sha512-JppheLu7S114aEs157fOZDjFqUDpm7eHdq5E8SSR0gUBTEK0cNSHsrSR5a66xs0z3RWuo46QvA3vawp8BxDHvg==} dependencies: dataloader: 1.4.0 - node-fetch: 2.6.8 + node-fetch: 2.6.9 transitivePeerDependencies: - encoding dev: true @@ -6145,7 +6145,7 @@ packages: detect-libc: 2.0.1 https-proxy-agent: 5.0.1 make-dir: 3.1.0 - node-fetch: 2.6.8 + node-fetch: 2.6.9 nopt: 5.0.0 npmlog: 5.0.1 rimraf: 3.0.2 @@ -6517,7 +6517,7 @@ packages: '@octokit/request-error': 2.1.0 '@octokit/types': 6.41.0 is-plain-object: 5.0.0 - node-fetch: 2.6.8 + node-fetch: 2.6.9 universal-user-agent: 6.0.0 transitivePeerDependencies: - encoding @@ -6672,7 +6672,7 @@ packages: '@rollup/pluginutils': 3.1.0_rollup@2.79.1 '@types/resolve': 1.17.1 deepmerge: 4.3.0 - is-builtin-module: 3.2.0 + is-builtin-module: 3.2.1 is-module: 1.0.0 resolve: 1.22.1 rollup: 2.79.1 @@ -6747,12 +6747,12 @@ packages: picomatch: 2.3.1 dev: false - /@solidjs/router/0.5.1_solid-js@1.6.9: + /@solidjs/router/0.5.1_solid-js@1.6.10: resolution: {integrity: sha512-igyrwUqm/9T26Lb6l7oXwpc4lLUVqbhbN92wOL3NgLoLVmkQlUNTZciuAe+Su8XeJXlrWjl6oxDJDLt+6pws/g==} peerDependencies: solid-js: ^1.5.3 dependencies: - solid-js: 1.6.9 + solid-js: 1.6.10 dev: false /@surma/rollup-plugin-off-main-thread/2.2.3: @@ -7159,8 +7159,8 @@ packages: /@types/yargs-parser/21.0.0: resolution: {integrity: sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==} - /@typescript-eslint/eslint-plugin/5.49.0_uymdhlntwytpctrrgoyjmlajou: - resolution: {integrity: sha512-IhxabIpcf++TBaBa1h7jtOWyon80SXPRLDq0dVz5SLFC/eW6tofkw/O7Ar3lkx5z5U6wzbKDrl2larprp5kk5Q==} + /@typescript-eslint/eslint-plugin/5.50.0_7ng24j2y7m7ooe4h5dv7wjycke: + resolution: {integrity: sha512-vwksQWSFZiUhgq3Kv7o1Jcj0DUNylwnIlGvKvLLYsq8pAWha6/WCnXUeaSoNNha/K7QSf2+jvmkxggC1u3pIwQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: '@typescript-eslint/parser': ^5.0.0 @@ -7170,12 +7170,13 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/parser': 5.49.0_l36yidrw337hwf2rtnamh77lgq - '@typescript-eslint/scope-manager': 5.49.0 - '@typescript-eslint/type-utils': 5.49.0_l36yidrw337hwf2rtnamh77lgq - '@typescript-eslint/utils': 5.49.0_l36yidrw337hwf2rtnamh77lgq + '@typescript-eslint/parser': 5.50.0_l36yidrw337hwf2rtnamh77lgq + '@typescript-eslint/scope-manager': 5.50.0 + '@typescript-eslint/type-utils': 5.50.0_l36yidrw337hwf2rtnamh77lgq + '@typescript-eslint/utils': 5.50.0_l36yidrw337hwf2rtnamh77lgq debug: 4.3.4 eslint: 8.33.0 + grapheme-splitter: 1.0.4 ignore: 5.2.4 natural-compare-lite: 1.4.0 regexpp: 3.2.0 @@ -7186,8 +7187,8 @@ packages: - supports-color dev: true - /@typescript-eslint/parser/5.49.0_l36yidrw337hwf2rtnamh77lgq: - resolution: {integrity: sha512-veDlZN9mUhGqU31Qiv2qEp+XrJj5fgZpJ8PW30sHU+j/8/e5ruAhLaVDAeznS7A7i4ucb/s8IozpDtt9NqCkZg==} + /@typescript-eslint/parser/5.50.0_l36yidrw337hwf2rtnamh77lgq: + resolution: {integrity: sha512-KCcSyNaogUDftK2G9RXfQyOCt51uB5yqC6pkUYqhYh8Kgt+DwR5M0EwEAxGPy/+DH6hnmKeGsNhiZRQxjH71uQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 @@ -7196,9 +7197,9 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/scope-manager': 5.49.0 - '@typescript-eslint/types': 5.49.0 - '@typescript-eslint/typescript-estree': 5.49.0_typescript@4.7.4 + '@typescript-eslint/scope-manager': 5.50.0 + '@typescript-eslint/types': 5.50.0 + '@typescript-eslint/typescript-estree': 5.50.0_typescript@4.7.4 debug: 4.3.4 eslint: 8.33.0 typescript: 4.7.4 @@ -7206,16 +7207,16 @@ packages: - supports-color dev: true - /@typescript-eslint/scope-manager/5.49.0: - resolution: {integrity: sha512-clpROBOiMIzpbWNxCe1xDK14uPZh35u4QaZO1GddilEzoCLAEz4szb51rBpdgurs5k2YzPtJeTEN3qVbG+LRUQ==} + /@typescript-eslint/scope-manager/5.50.0: + resolution: {integrity: sha512-rt03kaX+iZrhssaT974BCmoUikYtZI24Vp/kwTSy841XhiYShlqoshRFDvN1FKKvU2S3gK+kcBW1EA7kNUrogg==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dependencies: - '@typescript-eslint/types': 5.49.0 - '@typescript-eslint/visitor-keys': 5.49.0 + '@typescript-eslint/types': 5.50.0 + '@typescript-eslint/visitor-keys': 5.50.0 dev: true - /@typescript-eslint/type-utils/5.49.0_l36yidrw337hwf2rtnamh77lgq: - resolution: {integrity: sha512-eUgLTYq0tR0FGU5g1YHm4rt5H/+V2IPVkP0cBmbhRyEmyGe4XvJ2YJ6sYTmONfjmdMqyMLad7SB8GvblbeESZA==} + /@typescript-eslint/type-utils/5.50.0_l36yidrw337hwf2rtnamh77lgq: + resolution: {integrity: sha512-dcnXfZ6OGrNCO7E5UY/i0ktHb7Yx1fV6fnQGGrlnfDhilcs6n19eIRcvLBqx6OQkrPaFlDPk3OJ0WlzQfrV0bQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: '*' @@ -7224,8 +7225,8 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/typescript-estree': 5.49.0_typescript@4.7.4 - '@typescript-eslint/utils': 5.49.0_l36yidrw337hwf2rtnamh77lgq + '@typescript-eslint/typescript-estree': 5.50.0_typescript@4.7.4 + '@typescript-eslint/utils': 5.50.0_l36yidrw337hwf2rtnamh77lgq debug: 4.3.4 eslint: 8.33.0 tsutils: 3.21.0_typescript@4.7.4 @@ -7234,13 +7235,13 @@ packages: - supports-color dev: true - /@typescript-eslint/types/5.49.0: - resolution: {integrity: sha512-7If46kusG+sSnEpu0yOz2xFv5nRz158nzEXnJFCGVEHWnuzolXKwrH5Bsf9zsNlOQkyZuk0BZKKoJQI+1JPBBg==} + /@typescript-eslint/types/5.50.0: + resolution: {integrity: sha512-atruOuJpir4OtyNdKahiHZobPKFvZnBnfDiyEaBf6d9vy9visE7gDjlmhl+y29uxZ2ZDgvXijcungGFjGGex7w==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: true - /@typescript-eslint/typescript-estree/5.49.0_typescript@4.7.4: - resolution: {integrity: sha512-PBdx+V7deZT/3GjNYPVQv1Nc0U46dAHbIuOG8AZ3on3vuEKiPDwFE/lG1snN2eUB9IhF7EyF7K1hmTcLztNIsA==} + /@typescript-eslint/typescript-estree/5.50.0_typescript@4.7.4: + resolution: {integrity: sha512-Gq4zapso+OtIZlv8YNAStFtT6d05zyVCK7Fx3h5inlLBx2hWuc/0465C2mg/EQDDU2LKe52+/jN4f0g9bd+kow==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: typescript: '*' @@ -7248,8 +7249,8 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/types': 5.49.0 - '@typescript-eslint/visitor-keys': 5.49.0 + '@typescript-eslint/types': 5.50.0 + '@typescript-eslint/visitor-keys': 5.50.0 debug: 4.3.4 globby: 11.1.0 is-glob: 4.0.3 @@ -7260,17 +7261,17 @@ packages: - supports-color dev: true - /@typescript-eslint/utils/5.49.0_l36yidrw337hwf2rtnamh77lgq: - resolution: {integrity: sha512-cPJue/4Si25FViIb74sHCLtM4nTSBXtLx1d3/QT6mirQ/c65bV8arBEebBJJizfq8W2YyMoPI/WWPFWitmNqnQ==} + /@typescript-eslint/utils/5.50.0_l36yidrw337hwf2rtnamh77lgq: + resolution: {integrity: sha512-v/AnUFImmh8G4PH0NDkf6wA8hujNNcrwtecqW4vtQ1UOSNBaZl49zP1SHoZ/06e+UiwzHpgb5zP5+hwlYYWYAw==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 dependencies: '@types/json-schema': 7.0.11 '@types/semver': 7.3.13 - '@typescript-eslint/scope-manager': 5.49.0 - '@typescript-eslint/types': 5.49.0 - '@typescript-eslint/typescript-estree': 5.49.0_typescript@4.7.4 + '@typescript-eslint/scope-manager': 5.50.0 + '@typescript-eslint/types': 5.50.0 + '@typescript-eslint/typescript-estree': 5.50.0_typescript@4.7.4 eslint: 8.33.0 eslint-scope: 5.1.1 eslint-utils: 3.0.0_eslint@8.33.0 @@ -7280,11 +7281,11 @@ packages: - typescript dev: true - /@typescript-eslint/visitor-keys/5.49.0: - resolution: {integrity: sha512-v9jBMjpNWyn8B6k/Mjt6VbUS4J1GvUlR4x3Y+ibnP1z7y7V4n0WRz+50DY6+Myj0UaXVSuUlHohO+eZ8IJEnkg==} + /@typescript-eslint/visitor-keys/5.50.0: + resolution: {integrity: sha512-cdMeD9HGu6EXIeGOh2yVW6oGf9wq8asBgZx7nsR/D36gTfQ0odE5kcRYe5M81vjEFAcPeugXrHg78Imu55F6gg==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dependencies: - '@typescript-eslint/types': 5.49.0 + '@typescript-eslint/types': 5.50.0 eslint-visitor-keys: 3.3.0 dev: true @@ -7873,8 +7874,8 @@ packages: peerDependencies: postcss: ^8.1.0 dependencies: - browserslist: 4.21.4 - caniuse-lite: 1.0.30001449 + browserslist: 4.21.5 + caniuse-lite: 1.0.30001450 fraction.js: 4.2.0 normalize-range: 0.1.2 picocolors: 1.0.0 @@ -7885,8 +7886,8 @@ packages: resolution: {integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==} engines: {node: '>= 0.4'} - /babel-plugin-jsx-dom-expressions/0.35.14: - resolution: {integrity: sha512-Eywfw/7cNbBsStTgj46JRvyGTb+RLyF2EJ0AV3/W2cUwbw3R3syOBqdzFLdHN2MPOs4nJA80XtGl9kSMjEekhA==} + /babel-plugin-jsx-dom-expressions/0.35.15: + resolution: {integrity: sha512-33GQnanjYKefOTO2lQK6EaKXPJ1W8vtzvBneGfhKaOZHQJLqe61P93jP0TLTz67sqsA0m1ph1cNdGpLc/Nx2Xg==} peerDependencies: '@babel/core': ^7.20.12 peerDependenciesMeta: @@ -7897,7 +7898,7 @@ packages: '@babel/plugin-syntax-jsx': 7.18.6 '@babel/types': 7.20.7 html-entities: 2.3.3 - validate-html-nesting: 1.2.0 + validate-html-nesting: 1.2.1 dev: false /babel-plugin-module-resolver/4.1.0: @@ -7956,15 +7957,15 @@ packages: - supports-color dev: false - /babel-preset-solid/1.6.9: - resolution: {integrity: sha512-Dz4xROTGtAZ2B9+79KYUzi/bhjNGsx+8c+AD3VO/Cg1CisM1qq29XsnkWrRJeTMMn3XZkAI/Bf5Rz37d/gvPVQ==} + /babel-preset-solid/1.6.10: + resolution: {integrity: sha512-qBLjzeWmgY5jX11sJg/lriXABYdClfJrJJrIHaT6G5EuGhxhm6jn7XjqXjLBZHBgy5n/Z+iqJ5YfQj8KG2jKTA==} peerDependencies: '@babel/core': ^7.0.0 peerDependenciesMeta: '@babel/core': optional: true dependencies: - babel-plugin-jsx-dom-expressions: 0.35.14 + babel-plugin-jsx-dom-expressions: 0.35.15 dev: false /bail/2.0.2: @@ -8082,15 +8083,15 @@ packages: resolution: {integrity: sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==} dev: true - /browserslist/4.21.4: - resolution: {integrity: sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==} + /browserslist/4.21.5: + resolution: {integrity: sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==} engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} hasBin: true dependencies: - caniuse-lite: 1.0.30001449 + caniuse-lite: 1.0.30001450 electron-to-chromium: 1.4.284 - node-releases: 2.0.8 - update-browserslist-db: 1.0.10_browserslist@4.21.4 + node-releases: 2.0.9 + update-browserslist-db: 1.0.10_browserslist@4.21.5 /buffer-from/1.1.2: resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==} @@ -8167,8 +8168,8 @@ packages: resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==} engines: {node: '>=10'} - /caniuse-lite/1.0.30001449: - resolution: {integrity: sha512-CPB+UL9XMT/Av+pJxCKGhdx+yg1hzplvFJQlJ2n68PyQGMz9L/E2zCyLdOL8uasbouTUgnPl+y0tccI/se+BEw==} + /caniuse-lite/1.0.30001450: + resolution: {integrity: sha512-qMBmvmQmFXaSxexkjjfMvD5rnDL0+m+dUMZKoDYsGG8iZN29RuYh9eRoMvKsT6uMAWlyUUGDEQGJJYjzCIO9ew==} /canvas-confetti/1.6.0: resolution: {integrity: sha512-ej+w/m8Jzpv9Z7W7uJZer14Ke8P2ogsjg4ZMGIuq4iqUOqY2Jq8BNW42iGmNfRwREaaEfFIczLuZZiEVSYNHAA==} @@ -8448,7 +8449,7 @@ packages: date-fns: 2.29.3 lodash: 4.17.21 rxjs: 7.8.0 - shell-quote: 1.7.4 + shell-quote: 1.8.0 spawn-command: 0.0.2-1 supports-color: 8.1.1 tree-kill: 1.2.2 @@ -8487,7 +8488,7 @@ packages: /core-js-compat/3.27.2: resolution: {integrity: sha512-welaYuF7ZtbYKGrIy7y3eb40d37rG1FvzEOfe7hSLd2iD6duMDqUhRfSvCGyC46HhR6Y8JXXdZ2lnRUMkPBpvg==} dependencies: - browserslist: 4.21.4 + browserslist: 4.21.5 dev: false /core-util-is/1.0.3: @@ -8819,8 +8820,8 @@ packages: defined: 1.0.1 minimist: 1.2.7 - /devalue/4.2.2: - resolution: {integrity: sha512-Pkwd8qrI9O20VJ14fBNHu+on99toTNZFbgWRpZbC0zbDXpnE2WHYcrC1fHhMsF/3Ee+2yaW7vEujAT7fCYgqrA==} + /devalue/4.2.3: + resolution: {integrity: sha512-JG6Q248aN0pgFL57e3zqTVeFraBe+5W2ugvv1mLXsJP6YYIYJhRZhAl7QP8haJrqob6X10F9NEkuCvNILZTPeQ==} dev: false /didyoumean/1.2.2: @@ -10419,8 +10420,8 @@ packages: estree-util-attach-comments: 2.1.1 estree-util-is-identifier-name: 2.1.0 hast-util-whitespace: 2.0.1 - mdast-util-mdx-expression: 1.3.1 - mdast-util-mdxjs-esm: 1.3.0 + mdast-util-mdx-expression: 1.3.2 + mdast-util-mdxjs-esm: 1.3.1 property-information: 6.2.0 space-separated-tokens: 2.0.2 style-to-object: 0.4.1 @@ -10700,8 +10701,8 @@ packages: resolution: {integrity: sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==} engines: {node: '>=4'} - /is-builtin-module/3.2.0: - resolution: {integrity: sha512-phDA4oSGt7vl1n5tJvTWooWWAsXLY+2xCnxNqvKhGEzujg+A43wPlPOyDg3C8XQHN+6k/JTQWJ/j0dQh/qr+Hw==} + /is-builtin-module/3.2.1: + resolution: {integrity: sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==} engines: {node: '>=6'} dependencies: builtin-modules: 3.3.0 @@ -11359,8 +11360,8 @@ packages: micromark-util-normalize-identifier: 1.0.0 dev: false - /mdast-util-gfm-strikethrough/1.0.2: - resolution: {integrity: sha512-T/4DVHXcujH6jx1yqpcAYYwd+z5lAYMw4Ls6yhTfbMMtCt0PHY4gEfhW9+lKsLBtyhUGKRIzcUA2FATVqnvPDA==} + /mdast-util-gfm-strikethrough/1.0.3: + resolution: {integrity: sha512-DAPhYzTYrRcXdMjUtUjKvW9z/FNAMTdU0ORyMcbmkwYNbKocDpdk+PX1L1dQgOID/+vVs1uBQ7ElrBQfZ0cuiQ==} dependencies: '@types/mdast': 3.0.10 mdast-util-to-markdown: 1.5.0 @@ -11390,7 +11391,7 @@ packages: mdast-util-from-markdown: 1.3.0 mdast-util-gfm-autolink-literal: 1.0.3 mdast-util-gfm-footnote: 1.0.2 - mdast-util-gfm-strikethrough: 1.0.2 + mdast-util-gfm-strikethrough: 1.0.3 mdast-util-gfm-table: 1.0.7 mdast-util-gfm-task-list-item: 1.0.2 mdast-util-to-markdown: 1.5.0 @@ -11398,8 +11399,8 @@ packages: - supports-color dev: false - /mdast-util-mdx-expression/1.3.1: - resolution: {integrity: sha512-TTb6cKyTA1RD+1su1iStZ5PAv3rFfOUKcoU5EstUpv/IZo63uDX03R8+jXjMEhcobXnNOiG6/ccekvVl4eV1zQ==} + /mdast-util-mdx-expression/1.3.2: + resolution: {integrity: sha512-xIPmR5ReJDu/DHH1OoIT1HkuybIfRGYRywC+gJtI7qHjCJp/M9jrmBEJW22O8lskDWm562BX2W8TiAwRTb0rKA==} dependencies: '@types/estree-jsx': 1.0.0 '@types/hast': 2.3.4 @@ -11409,31 +11410,34 @@ packages: transitivePeerDependencies: - supports-color - /mdast-util-mdx-jsx/2.1.0: - resolution: {integrity: sha512-KzgzfWMhdteDkrY4mQtyvTU5bc/W4ppxhe9SzelO6QUUiwLAM+Et2Dnjjprik74a336kHdo0zKm7Tp+n6FFeRg==} + /mdast-util-mdx-jsx/2.1.1: + resolution: {integrity: sha512-dV398twlcAKiqQfj3BkC4PWinVlG1YSL/qs71M7z8xmSksqp3lATH+qrmWUJBOIjOYcD5xuIu6k1ld2btB3EqQ==} dependencies: '@types/estree-jsx': 1.0.0 '@types/hast': 2.3.4 '@types/mdast': 3.0.10 ccount: 2.0.1 + mdast-util-from-markdown: 1.3.0 mdast-util-to-markdown: 1.5.0 parse-entities: 4.0.0 stringify-entities: 4.0.3 unist-util-remove-position: 4.0.2 unist-util-stringify-position: 3.0.3 vfile-message: 3.1.3 + transitivePeerDependencies: + - supports-color /mdast-util-mdx/2.0.0: resolution: {integrity: sha512-M09lW0CcBT1VrJUaF/PYxemxxHa7SLDHdSn94Q9FhxjCQfuW7nMAWKWimTmA3OyDMSTH981NN1csW1X+HPSluw==} dependencies: - mdast-util-mdx-expression: 1.3.1 - mdast-util-mdx-jsx: 2.1.0 - mdast-util-mdxjs-esm: 1.3.0 + mdast-util-mdx-expression: 1.3.2 + mdast-util-mdx-jsx: 2.1.1 + mdast-util-mdxjs-esm: 1.3.1 transitivePeerDependencies: - supports-color - /mdast-util-mdxjs-esm/1.3.0: - resolution: {integrity: sha512-7N5ihsOkAEGjFotIX9p/YPdl4TqUoMxL4ajNz7PbT89BqsdWJuBC9rvgt6wpbwTZqWWR0jKWqQbwsOWDBUZv4g==} + /mdast-util-mdxjs-esm/1.3.1: + resolution: {integrity: sha512-SXqglS0HrEvSdUEfoXFtcg7DRl7S2cwOXc7jkuusG472Mmjag34DUDeOJUZtl+BVnyeO1frIgVpHlNRWc2gk/w==} dependencies: '@types/estree-jsx': 1.0.0 '@types/hast': 2.3.4 @@ -11981,11 +11985,9 @@ packages: yallist: 4.0.0 dev: false - /minipass/4.0.0: - resolution: {integrity: sha512-g2Uuh2jEKoht+zvO6vJqXmYpflPqzRBT+Th2h01DKh5z7wbY/AZ2gCQ78cP70YoHPyFdY30YBV5WxgLOEwOykw==} + /minipass/4.0.1: + resolution: {integrity: sha512-V9esFpNbK0arbN3fm2sxDKqMYgIp7XtVdE4Esj+PE4Qaaxdg1wIw48ITQIOn1sc8xXSmUviVL3cyjMqPlrVkiA==} engines: {node: '>=8'} - dependencies: - yallist: 4.0.0 dev: false /minizlib/2.1.2: @@ -12131,8 +12133,8 @@ packages: resolution: {integrity: sha512-VzW+TAk2wE4X9maiKMlT+GsPU4OMmR1U9CrHSmd3DFLn2IcZ9VJ6M6BBugGfYUnPCLSYxXdZy17M0BEJyhUTwg==} dev: false - /node-fetch/2.6.8: - resolution: {integrity: sha512-RZ6dBYuj8dRSfxpUSu+NsdF1dpPpluJxwOp+6IoDp/sH2QNDSvurYsAa+F1WxY2RjA1iP93xhcsUoYbF2XBqVg==} + /node-fetch/2.6.9: + resolution: {integrity: sha512-DJm/CJkZkRjKKj4Zi4BsKVZh3ValV5IR5s7LVZnW+6YMh0W1BfNA8XSs6DLMGYlId5F3KnA70uu2qepcR08Qqg==} engines: {node: 4.x || >=6.0.0} peerDependencies: encoding: ^0.1.0 @@ -12177,8 +12179,8 @@ packages: type-is: 1.6.18 dev: true - /node-releases/2.0.8: - resolution: {integrity: sha512-dFSmB8fFHEH/s81Xi+Y/15DQY6VHW81nXRj86EMSL3lmuTmK1e+aT4wrFCkTbm+gSwkw4KpX+rT/pMM2c1mF+A==} + /node-releases/2.0.9: + resolution: {integrity: sha512-2xfmOrRkGogbTK9R6Leda0DGiXeY3p2NJpy4+gNCffdUvV6mdEJnaDEic1i3Ec2djAo8jWYoJMR5PB0MSMpxUA==} /nopt/5.0.0: resolution: {integrity: sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==} @@ -12945,7 +12947,7 @@ packages: '@csstools/postcss-trigonometric-functions': 1.0.2_postcss@8.4.21 '@csstools/postcss-unset-value': 1.0.2_postcss@8.4.21 autoprefixer: 10.4.13_postcss@8.4.21 - browserslist: 4.21.4 + browserslist: 4.21.5 css-blank-pseudo: 3.0.3_postcss@8.4.21 css-has-pseudo: 3.0.4_postcss@8.4.21 css-prefers-color-scheme: 6.0.3_postcss@8.4.21 @@ -13491,7 +13493,7 @@ packages: shiki: 0.10.1 shiki-twoslash: 3.1.0 tslib: 2.1.0 - typescript: 4.9.4 + typescript: 4.9.5 unist-util-visit: 2.0.3 transitivePeerDependencies: - supports-color @@ -13657,7 +13659,7 @@ packages: jest-worker: 26.6.2 rollup: 2.79.1 serialize-javascript: 4.0.0 - terser: 5.16.1 + terser: 5.16.2 dev: false /rollup-pluginutils/2.8.2: @@ -13673,8 +13675,8 @@ packages: optionalDependencies: fsevents: 2.3.2 - /rollup/3.12.0: - resolution: {integrity: sha512-4MZ8kA2HNYahIjz63rzrMMRvDqQDeS9LoriJvMuV0V6zIGysP36e9t4yObUfwdT9h/szXoHQideICftcdZklWg==} + /rollup/3.12.1: + resolution: {integrity: sha512-t9elERrz2i4UU9z7AwISj3CQcXP39cWxgRWLdf4Tm6aKm1eYrqHIgjzXBgb67GNY1sZckTFFi0oMozh3/S++Ig==} engines: {node: '>=14.18.0', npm: '>=8.0.0'} hasBin: true optionalDependencies: @@ -13719,8 +13721,8 @@ packages: dependencies: suf-log: 2.5.3 - /sass/1.57.1: - resolution: {integrity: sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==} + /sass/1.58.0: + resolution: {integrity: sha512-PiMJcP33DdKtZ/1jSjjqVIKihoDc6yWmYr9K/4r3fVVIEDAluD0q7XZiRKrNJcPK3qkLRF/79DND1H5q1LBjgg==} engines: {node: '>=12.0.0'} hasBin: true dependencies: @@ -13866,8 +13868,8 @@ packages: resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==} engines: {node: '>=8'} - /shell-quote/1.7.4: - resolution: {integrity: sha512-8o/QEhSSRb1a5i7TFR0iM4G16Z0vYB2OQVs4G3aAFXjn3T6yEx8AZxy1PgDF7I00LZHYA3WxaSYIf5e5sAX8Rw==} + /shell-quote/1.8.0: + resolution: {integrity: sha512-QHsz8GgQIGKlRi24yFc6a6lN69Idnx634w49ay6+jA5yFh7a1UY+4Rp6HPx/L/1zcEDPEij8cIsiqR6bQsE5VQ==} dev: false /shiki-twoslash/3.1.0: @@ -13876,7 +13878,7 @@ packages: '@typescript/twoslash': 3.1.0 '@typescript/vfs': 1.3.4 shiki: 0.10.1 - typescript: 4.9.4 + typescript: 4.9.5 transitivePeerDependencies: - supports-color dev: true @@ -14003,8 +14005,8 @@ packages: smart-buffer: 4.2.0 dev: true - /solid-js/1.6.9: - resolution: {integrity: sha512-kV3fMmm+1C2J95c8eDOPKGfZHnuAkHUBLG4hX1Xu08bXeAIPqmxuz/QdH3B8SIdTp3EatBVIyA6RCes3hrGzpg==} + /solid-js/1.6.10: + resolution: {integrity: sha512-Sf0e6PQCEFkFtbPq0L+93Ua81YQOefBEbvDJ0YXT92b6Lzw0k7UvzSd2l1BbYM+yzE3UmepU1tyMDc/3nIByjA==} dependencies: csstype: 3.1.1 @@ -14370,7 +14372,7 @@ packages: dependencies: chownr: 2.0.0 fs-minipass: 2.1.0 - minipass: 4.0.0 + minipass: 4.0.1 minizlib: 2.1.2 mkdirp: 1.0.4 yallist: 4.0.0 @@ -14396,8 +14398,8 @@ packages: engines: {node: '>=8'} dev: true - /terser/5.16.1: - resolution: {integrity: sha512-xvQfyfA1ayT0qdK47zskQgRZeWLoOQ8JQ6mIgRGVNwZKdQMU+5FkCBjmv4QjcrTzyZquRw2FVtlJSRUmMKQslw==} + /terser/5.16.2: + resolution: {integrity: sha512-JKuM+KvvWVqT7muHVyrwv7FVRPnmHDwF6XwoIxdbF5Witi0vu99RYpxDexpJndXt3jbZZmmWr2/mQa6HvSNdSg==} engines: {node: '>=10'} hasBin: true dependencies: @@ -14745,8 +14747,8 @@ packages: hasBin: true dev: true - /typescript/4.9.4: - resolution: {integrity: sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==} + /typescript/4.9.5: + resolution: {integrity: sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==} engines: {node: '>=4.2.0'} hasBin: true @@ -14965,13 +14967,13 @@ packages: engines: {node: '>=4'} dev: false - /update-browserslist-db/1.0.10_browserslist@4.21.4: + /update-browserslist-db/1.0.10_browserslist@4.21.5: resolution: {integrity: sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==} hasBin: true peerDependencies: browserslist: '>= 4.21.0' dependencies: - browserslist: 4.21.4 + browserslist: 4.21.5 escalade: 3.1.1 picocolors: 1.0.0 @@ -15001,8 +15003,8 @@ packages: kleur: 4.1.5 sade: 1.8.1 - /validate-html-nesting/1.2.0: - resolution: {integrity: sha512-sI65QUd3T/e5wbQkdPKjikFsIVLPIaOQK+9uowPp6/k609SN8hs5eqBLrnN5DeW9Kd932Q4Imo0fzK2dxoOsCA==} + /validate-html-nesting/1.2.1: + resolution: {integrity: sha512-T1ab131NkP3BfXB7KUSgV7Rhu81R2id+L6NaJ7NypAAG5iV6gXnPpQE5RK1fvb+3JYsPTL+ihWna5sr5RN9gaQ==} dev: false /validate-npm-package-license/3.0.4: @@ -15040,8 +15042,8 @@ packages: unist-util-stringify-position: 3.0.3 vfile-message: 3.1.3 - /vite-imagetools/4.0.17: - resolution: {integrity: sha512-Nwe9zYrQBcIsmb21ABgr18WXycIa0CPnXpwJ6CmCHBZq0iies5PiYg2J45hQFmuEVNErX6ixARmNZILXxeJUXw==} + /vite-imagetools/4.0.18: + resolution: {integrity: sha512-PpvOy7eDQadfuJNarwPU9X8nK0AjtRsyxhfMjqg/wrAyssNgeaZWMGlWQK/U3YhV9+wpdV5Mep8FZvGa31IY1Q==} engines: {node: '>=12.0.0'} dependencies: '@rollup/pluginutils': 5.0.2 @@ -15132,7 +15134,7 @@ packages: esbuild: 0.16.17 postcss: 8.4.21 resolve: 1.22.1 - rollup: 3.12.0 + rollup: 3.12.1 optionalDependencies: fsevents: 2.3.2 @@ -15165,12 +15167,12 @@ packages: esbuild: 0.16.17 postcss: 8.4.21 resolve: 1.22.1 - rollup: 3.12.0 + rollup: 3.12.1 optionalDependencies: fsevents: 2.3.2 dev: true - /vite/4.0.4_sass@1.57.1: + /vite/4.0.4_sass@1.58.0: resolution: {integrity: sha512-xevPU7M8FU0i/80DMR+YhgrzR5KS2ORy1B4xcX/cXLsvnUWvfHuqMmVU6N0YiJ4JWGRJJsLCgjEzKjG9/GKoSw==} engines: {node: ^14.18.0 || >=16.0.0} hasBin: true @@ -15198,8 +15200,8 @@ packages: esbuild: 0.16.17 postcss: 8.4.21 resolve: 1.22.1 - rollup: 3.12.0 - sass: 1.57.1 + rollup: 3.12.1 + sass: 1.58.0 optionalDependencies: fsevents: 2.3.2 dev: false @@ -15221,7 +15223,7 @@ packages: vite: optional: true dependencies: - vite: 4.0.4_sass@1.57.1 + vite: 4.0.4_sass@1.58.0 dev: false /vitest/0.20.3: @@ -15606,8 +15608,8 @@ packages: resolution: {integrity: sha512-Rsk5qQHJ9eowMH28Jwhe8HEbmdYDX4lwoMWshiCXugjtHqMD9ZbiqSDLxcsfdqsETPzVUtX5s1Z5kStiIM6l4A==} dev: true - /wrangler/2.8.1: - resolution: {integrity: sha512-O4wUr6/FUpk9KVstOUVYbiiZcWc1jKo7q0FfdwEjnMB3oN7Ofs6cIiX++Lzj1ldFSCOw2/aW3UYgixch6B2WCA==} + /wrangler/2.9.0: + resolution: {integrity: sha512-5nyyR4bXKG/Rwz0dH+nOx4SWvJWmTZVSbceLyTV+ZOH1sd2vvPnnW14NUzTNEjY3XaT93XH+28mc5+UNSYsFHw==} engines: {node: '>=16.13.0'} hasBin: true dependencies: @@ -15847,5 +15849,5 @@ packages: name: '@test/solid-jsx-component' version: 0.0.0 dependencies: - solid-js: 1.6.9 + solid-js: 1.6.10 dev: false From 2567aa48bba8751cf7e10429555f1e85830c9169 Mon Sep 17 00:00:00 2001 From: Elliott Marquez <5981958+e111077@users.noreply.github.com> Date: Wed, 1 Feb 2023 05:44:56 -0800 Subject: [PATCH 14/23] [Lit] Forwards compatiblity for streaming Declarative Shadow DOM (#6055) * Forwards compatiblity for streaming DSD * add shadowrootmode * update tests * add changeset --- .changeset/hip-pots-push.md | 5 +++++ packages/astro/test/custom-elements.test.js | 6 +++--- .../fixtures/custom-elements/my-component-lib/server.js | 2 +- packages/integrations/lit/client-shim.js | 2 +- packages/integrations/lit/client-shim.min.js | 4 ++-- packages/integrations/lit/server.js | 2 +- packages/integrations/lit/test/server.test.js | 2 +- 7 files changed, 14 insertions(+), 9 deletions(-) create mode 100644 .changeset/hip-pots-push.md diff --git a/.changeset/hip-pots-push.md b/.changeset/hip-pots-push.md new file mode 100644 index 000000000..b8707541c --- /dev/null +++ b/.changeset/hip-pots-push.md @@ -0,0 +1,5 @@ +--- +'@astrojs/lit': patch +--- + +Add forwards compatibility for streaming Declarative Shadow DOM diff --git a/packages/astro/test/custom-elements.test.js b/packages/astro/test/custom-elements.test.js index b66c648a4..51e8ece34 100644 --- a/packages/astro/test/custom-elements.test.js +++ b/packages/astro/test/custom-elements.test.js @@ -23,7 +23,7 @@ describe('Custom Elements', () => { expect($('my-element')).to.have.lengthOf(1); // test 2: shadow rendered - expect($('my-element template[shadowroot=open]')).to.have.lengthOf(1); + expect($('my-element template[shadowroot=open][shadowrootmode=open]')).to.have.lengthOf(1); }); it('Works with exported tagName', async () => { @@ -34,7 +34,7 @@ describe('Custom Elements', () => { expect($('my-element')).to.have.lengthOf(1); // test 2: shadow rendered - expect($('my-element template[shadowroot=open]')).to.have.lengthOf(1); + expect($('my-element template[shadowroot=open][shadowrootmode=open]')).to.have.lengthOf(1); }); it.skip('Hydration works with exported tagName', async () => { @@ -46,7 +46,7 @@ describe('Custom Elements', () => { expect($('my-element')).to.have.lengthOf(1); // test 2: shadow rendered - expect($('my-element template[shadowroot=open]')).to.have.lengthOf(1); + expect($('my-element template[shadowroot=open][shadowrootmode=open]')).to.have.lengthOf(1); // Hydration // test 3: Component and polyfill scripts bundled separately diff --git a/packages/astro/test/fixtures/custom-elements/my-component-lib/server.js b/packages/astro/test/fixtures/custom-elements/my-component-lib/server.js index 7e36a26fd..688923159 100644 --- a/packages/astro/test/fixtures/custom-elements/my-component-lib/server.js +++ b/packages/astro/test/fixtures/custom-elements/my-component-lib/server.js @@ -18,7 +18,7 @@ function renderToStaticMarkup(component, props, innerHTML) { const Component = getConstructor(component); const el = new Component(); el.connectedCallback(); - const html = `<${el.localName}>${el.innerHTML}` + const html = `<${el.localName}>${el.innerHTML}` return { html }; diff --git a/packages/integrations/lit/client-shim.js b/packages/integrations/lit/client-shim.js index ca97b92cc..c457710b7 100644 --- a/packages/integrations/lit/client-shim.js +++ b/packages/integrations/lit/client-shim.js @@ -8,7 +8,7 @@ async function polyfill() { } const polyfillCheckEl = new DOMParser() - .parseFromString(`

`, 'text/html', { + .parseFromString(`

`, 'text/html', { includeShadowRoots: true, }) .querySelector('p'); diff --git a/packages/integrations/lit/client-shim.min.js b/packages/integrations/lit/client-shim.min.js index afae053ac..0965e6a78 100644 --- a/packages/integrations/lit/client-shim.min.js +++ b/packages/integrations/lit/client-shim.min.js @@ -8,7 +8,7 @@ var b = (t, n) => { function s() { if (d === void 0) { let t = document.createElement('div'); - (t.innerHTML = '
'), + (t.innerHTML = '
'), (d = !!t.firstElementChild.shadowRoot); } return d; @@ -80,7 +80,7 @@ async function g() { window.addEventListener('DOMContentLoaded', () => t(document.body), { once: true }); } var x = new DOMParser() - .parseFromString('

', 'text/html', { + .parseFromString('

', 'text/html', { includeShadowRoots: !0, }) .querySelector('p'); diff --git a/packages/integrations/lit/server.js b/packages/integrations/lit/server.js index 48a3c646f..da571466f 100644 --- a/packages/integrations/lit/server.js +++ b/packages/integrations/lit/server.js @@ -62,7 +62,7 @@ function* render(Component, attrs, slots) { yield `>`; const shadowContents = instance.renderShadow({}); if (shadowContents !== undefined) { - yield '