michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: add react-component render benchmark

Browse source
This commit is contained in:
bholmesdev 2023-02-28 12:34:37 -05:00
parent 776782a93b
commit b6f752a3ee
24 changed files with 226 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
packages/astro/performance/content-benchmark.mjs
View file

@ -45,7 +45,7 @@ async function benchmark({ fixtures, templates }) {
? flags.test
: typeof flags.test === 'string'
? [flags.test]
: ['simple', 'with-components'];
: ['simple', 'with-astro-components', 'with-react-components'];
if (test.includes('simple')) {
console.log(`\n${bold('Simple')} ${dim(`${NUM_POSTS} posts (md, mdx, mdoc)`)}`);
@ -59,13 +59,24 @@ async function benchmark({ fixtures, templates }) {
});
}
if (test.includes('with-components')) {
console.log(`\n${bold('With components')} ${dim(`${NUM_POSTS} posts (mdx, mdoc)`)}`);
if (test.includes('with-astro-components')) {
console.log(`\n${bold('With Astro components')} ${dim(`${NUM_POSTS} posts (mdx, mdoc)`)}`);
await benchmark({
fixtures: ['mdx', 'mdoc'],
templates: {
mdx: 'with-components.mdx',
mdoc: 'with-components.mdoc',
mdx: 'with-astro-components.mdx',
mdoc: 'with-astro-components.mdoc',
},
});
}
if (test.includes('with-react-components')) {
console.log(`\n${bold('With React components')} ${dim(`${NUM_POSTS} posts (mdx, mdoc)`)}`);
await benchmark({
fixtures: ['mdx', 'mdoc'],
templates: {
mdx: 'with-react-components.mdx',
mdoc: 'with-react-components.mdoc',
},
});
}

7
packages/astro/performance/fixtures/md/astro.config.mjs Normal file
View file

@ -0,0 +1,7 @@
import { defineConfig } from 'astro/config';
import react from "@astrojs/react";
// https://astro.build/config
export default defineConfig({
integrations: [react()]
});

12
packages/astro/performance/fixtures/md/package.json
View file

@ -5,13 +5,21 @@
"main": "index.js",
"private": true,
"scripts": {
"build": "astro build"
"dev": "astro dev",
"start": "astro dev",
"build": "astro build",
"preview": "astro preview"
},
"keywords": [],
"author": "",
"license": "unlicensed",
"dependencies": {
"@astrojs/react": "^2.0.2",
"@performance/utils": "^0.0.0",
"astro": "^2.0.12"
"@types/react": "^18.0.21",
"@types/react-dom": "^18.0.6",
"astro": "^2.0.12",
"react": "^18.0.0",
"react-dom": "^18.0.0"
}
}

7
packages/astro/performance/fixtures/md/tsconfig.json Normal file
View file

@ -0,0 +1,7 @@
{
"extends": "astro/tsconfigs/base",
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "react"
}
}

3
packages/astro/performance/fixtures/mdoc/astro.config.mjs
View file

@ -1,7 +1,8 @@
import { defineConfig } from 'astro/config';
import markdoc from "@astrojs/markdoc";
import react from "@astrojs/react";
// https://astro.build/config
export default defineConfig({
integrations: [markdoc()]
integrations: [markdoc(), react()],
});

12
packages/astro/performance/fixtures/mdoc/package.json
View file

@ -5,14 +5,22 @@
"main": "index.js",
"private": true,
"scripts": {
"build": "astro build"
"dev": "astro dev",
"start": "astro dev",
"build": "astro build",
"preview": "astro preview"
},
"keywords": [],
"author": "",
"license": "unlicensed",
"dependencies": {
"@astrojs/markdoc": "^0.0.0",
"@astrojs/react": "^2.0.2",
"@performance/utils": "^0.0.0",
"@types/react": "^18.0.21",
"@types/react-dom": "^18.0.6",
"astro": "^2.0.12",
"@astrojs/markdoc": "^0.0.0"
"react": "^18.0.0",
"react-dom": "^18.0.0"
}
}

21
packages/astro/performance/fixtures/mdoc/src/ContentRenderer.astro
View file

@ -1,5 +1,5 @@
---
import { Title, Aside } from '@performance/utils';
import { Title, Aside, LikeButton, HydratedLikeButton } from '@performance/utils';
import type { CollectionEntry } from 'astro:content';
type Props = {
@ -10,7 +10,7 @@ const { entry } = Astro.props as Props;
const { Content } = await entry.render();
---
{entry.data.type === 'with-components'
{entry.data.type === 'with-astro-components'
? <Content config={{
tags: {
aside: {
@ -22,5 +22,22 @@ const { Content } = await entry.render();
}
}
}} components={{ h1: Title, Aside }} />
: entry.data.type === 'with-react-components'
? <Content config={{
tags: {
'like-button': {
render: 'LikeButton',
attributes: {
liked: { type: Boolean },
},
},
'hydrated-like-button': {
render: 'HydratedLikeButton',
attributes: {
liked: { type: Boolean },
},
},
}
}} components={{ LikeButton, HydratedLikeButton }} />
: <Content />
}

7
packages/astro/performance/fixtures/mdoc/tsconfig.json Normal file
View file

@ -0,0 +1,7 @@
{
"extends": "astro/tsconfigs/base",
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "react"
}
}

5
packages/astro/performance/fixtures/mdx/astro.config.mjs
View file

@ -1,7 +1,8 @@
import { defineConfig } from 'astro/config';
import mdx from "@astrojs/mdx";
import react from "@astrojs/react";
// https://astro.build/config
export default defineConfig({
integrations: [mdx()]
});
integrations: [mdx(), react()]
});

12
packages/astro/performance/fixtures/mdx/package.json
View file

@ -5,14 +5,22 @@
"main": "index.js",
"private": true,
"scripts": {
"build": "astro build"
"dev": "astro dev",
"start": "astro dev",
"build": "astro build",
"preview": "astro preview"
},
"keywords": [],
"author": "",
"license": "unlicensed",
"dependencies": {
"@astrojs/mdx": "^0.17.2",
"@astrojs/react": "^2.0.2",
"@performance/utils": "^0.0.0",
"astro": "^2.0.12"
"@types/react": "^18.0.21",
"@types/react-dom": "^18.0.6",
"astro": "^2.0.12",
"react": "^18.0.0",
"react-dom": "^18.0.0"
}
}

2
packages/astro/performance/fixtures/mdx/src/ContentRenderer.astro
View file

@ -10,7 +10,7 @@ const { entry } = Astro.props as Props;
const { Content } = await entry.render();
---
{entry.data.type === 'with-components'
{entry.data.type === 'with-astro-components'
? <Content components={{ h1: Title }} />
: <Content />
}

7
packages/astro/performance/fixtures/mdx/tsconfig.json Normal file
View file

@ -0,0 +1,7 @@
{
"extends": "astro/tsconfigs/base",
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "react"
}
}

12
packages/astro/performance/fixtures/utils/HydratedLikeButton.astro Normal file
View file

@ -0,0 +1,12 @@
---
import LikeButton from "./LikeButton";
type Props = {
liked: boolean;
}
---
<!-- Markdoc doesn't support `client:` directives -->
<!-- Use this Astro wrapper as a stand-in -->
<LikeButton client:load liked={Astro.props.liked} />

11
packages/astro/performance/fixtures/utils/LikeButton.tsx Normal file
View file

@ -0,0 +1,11 @@
/** @jsxImportSource react */
import { useState } from 'react';
export default function LikeButton({ liked: likedInitial }: {liked: boolean}) {
const [liked, setLiked] = useState(likedInitial);
return (
<button onClick={() => setLiked(!liked)}>
{!liked ? <span>Like ❤️</span> : <span>Unlike 💔</span>}
</button>
)
}

2
packages/astro/performance/fixtures/utils/index.ts
View file

@ -2,3 +2,5 @@
export { default as RenderContent } from './RenderContent.astro';
export { default as Aside } from './Aside.astro';
export { default as Title } from './Title.astro';
export { default as LikeButton } from './LikeButton';
export { default as HydratedLikeButton } from './HydratedLikeButton.astro';

4
packages/astro/performance/fixtures/utils/package.json
View file

@ -9,7 +9,9 @@
"author": "",
"license": "unlicensed",
"devDependencies": {
"astro": "^2.0.12"
"astro": "^2.0.12",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"exports": {
".": "./index.ts"

6
packages/astro/performance/fixtures/utils/tsconfig.json Normal file
View file

@ -0,0 +1,6 @@
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "react"
}
}

19
packages/astro/performance/scripts/templates/with-astro-components.mdoc Normal file
View file

@ -0,0 +1,19 @@
---
type: with-astro-components
title: Post with Astro components
---
# This should be rendered with a title component
{% aside type="tip" %}
This is a tip component
{% /aside %}
{% aside type="note" %}
This is a note component
{% /aside %}
{% aside type="caution" %}
This is a caution component
{% /aside %}
{% aside type="danger" %}
This is a danger component
{% /aside %}

13
packages/astro/performance/scripts/templates/with-astro-components.mdx Normal file
View file

@ -0,0 +1,13 @@
---
type: with-astro-components
title: Post with Astro components
---
import { Aside } from '@performance/utils';
# This should be rendered with a title component
<Aside type="tip">This is a tip component</Aside>
<Aside type="note">This is a note component</Aside>
<Aside type="caution">This is a caution component</Aside>
<Aside type="danger">This is a danger component</Aside>

25
packages/astro/performance/scripts/templates/with-components.mdoc
View file

@ -1,25 +0,0 @@
---
type: with-components
title: Post with components
---
# This should be rendered with a title component
{% aside type="tip" %}
This is a tip component
{% /aside %}
{% aside type="tip" %}
This is a tip component
{% /aside %}
{% aside type="tip" %}
This is a tip component
{% /aside %}
{% aside type="tip" %}
This is a tip component
{% /aside %}
{% aside type="tip" %}
This is a tip component
{% /aside %}
{% aside type="tip" %}
This is a tip component
{% /aside %}

15
packages/astro/performance/scripts/templates/with-components.mdx
View file

@ -1,15 +0,0 @@
---
type: with-components
title: Post with components
---
import { Aside } from '@performance/utils';
# This should be rendered with a title component
<Aside type="tip">This is a tip component</Aside>
<Aside type="tip">This is a tip component</Aside>
<Aside type="tip">This is a tip component</Aside>
<Aside type="tip">This is a tip component</Aside>
<Aside type="tip">This is a tip component</Aside>
<Aside type="tip">This is a tip component</Aside>

12
packages/astro/performance/scripts/templates/with-react-components.mdoc Normal file
View file

@ -0,0 +1,12 @@
---
type: with-react-components
title: Post with React components
---
# This render clickable like components
{% like-button liked=true /%}
{% like-button liked=false /%}
{% hydrated-like-button liked=true /%}
{% hydrated-like-button liked=false /%}

14
packages/astro/performance/scripts/templates/with-react-components.mdx Normal file
View file

@ -0,0 +1,14 @@
---
type: with-react-components
title: Post with React components
---
import { LikeButton, HydratedLikeButton } from '@performance/utils';
# This render clickable like components
<LikeButton liked={true} />
<LikeButton liked={false} />
<HydratedLikeButton liked={true} />
<HydratedLikeButton liked={false} />

36
pnpm-lock.yaml
View file

@ -1148,37 +1148,71 @@ importers:
packages/astro/performance/fixtures/md:
specifiers:
'@astrojs/react': ^2.0.2
'@performance/utils': ^0.0.0
'@types/react': ^18.0.21
'@types/react-dom': ^18.0.6
astro: ^2.0.12
react: ^18.0.0
react-dom: ^18.0.0
dependencies:
'@astrojs/react': link:../../../../integrations/react
'@performance/utils': link:../utils
'@types/react': 18.0.27
'@types/react-dom': 18.0.10
astro: link:../../..
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
packages/astro/performance/fixtures/mdoc:
specifiers:
'@astrojs/markdoc': ^0.0.0
'@astrojs/react': ^2.0.2
'@performance/utils': ^0.0.0
'@types/react': ^18.0.21
'@types/react-dom': ^18.0.6
astro: ^2.0.12
react: ^18.0.0
react-dom: ^18.0.0
dependencies:
'@astrojs/markdoc': link:../../../../integrations/markdoc
'@astrojs/react': link:../../../../integrations/react
'@performance/utils': link:../utils
'@types/react': 18.0.27
'@types/react-dom': 18.0.10
astro: link:../../..
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
packages/astro/performance/fixtures/mdx:
specifiers:
'@astrojs/mdx': ^0.17.2
'@astrojs/react': ^2.0.2
'@performance/utils': ^0.0.0
'@types/react': ^18.0.21
'@types/react-dom': ^18.0.6
astro: ^2.0.12
react: ^18.0.0
react-dom: ^18.0.0
dependencies:
'@astrojs/mdx': link:../../../../integrations/mdx
'@astrojs/react': link:../../../../integrations/react
'@performance/utils': link:../utils
'@types/react': 18.0.27
'@types/react-dom': 18.0.10
astro: link:../../..
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
packages/astro/performance/fixtures/utils:
specifiers:
astro: ^2.0.12
react: ^18.2.0
react-dom: ^18.2.0
devDependencies:
astro: link:../../..
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
packages/astro/test/fixtures/0-css:
specifiers:
@ -7497,7 +7531,7 @@ packages:
/@types/react-dom/18.0.10:
resolution: {integrity: sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg==}
dependencies:
'@types/react': 17.0.53
'@types/react': 18.0.27
dev: false
/@types/react/17.0.53: