From ec3c4a30d2c148d4483e64c3eab88603c528dec1 Mon Sep 17 00:00:00 2001 From: FredKSchott Date: Sun, 26 Jun 2022 12:02:11 +0000 Subject: [PATCH 1/4] [ci] collect stats --- scripts/stats/stats.csv | 1 + 1 file changed, 1 insertion(+) diff --git a/scripts/stats/stats.csv b/scripts/stats/stats.csv index 73b25c5a5..d7416adad 100644 --- a/scripts/stats/stats.csv +++ b/scripts/stats/stats.csv @@ -1,4 +1,5 @@ Date,Commits (24hr),Issues (24hr),Issues:BUG (24hr),Issues:RFC (24hr),Issues:DOC (24hr),PRs (24hr),Open PRs,Open Issues,Bugs: Needs Triage,Bugs: Accepted,RFC: In Progress,RFC: Accepted,Date (ISO) +"Sunday, June 26, 2022",2,2,2,0,0,3,21,78,54,16,0,0,"2022-06-26T12:02:05.156Z" "Saturday, June 25, 2022",13,4,4,0,0,8,20,76,52,16,0,0,"2022-06-25T12:02:03.060Z" "Friday, June 24, 2022",14,3,3,0,0,8,21,75,51,16,0,0,"2022-06-24T12:01:59.940Z" "Thursday, June 23, 2022",24,4,4,0,0,11,21,75,51,16,0,0,"2022-06-23T12:02:04.952Z" From a930aad5a77209c1986d2a2aeb12072ced97f772 Mon Sep 17 00:00:00 2001 From: FredKSchott Date: Mon, 27 Jun 2022 12:02:16 +0000 Subject: [PATCH 2/4] [ci] collect stats --- scripts/stats/stats.csv | 1 + 1 file changed, 1 insertion(+) diff --git a/scripts/stats/stats.csv b/scripts/stats/stats.csv index d7416adad..c56b92bad 100644 --- a/scripts/stats/stats.csv +++ b/scripts/stats/stats.csv @@ -1,4 +1,5 @@ Date,Commits (24hr),Issues (24hr),Issues:BUG (24hr),Issues:RFC (24hr),Issues:DOC (24hr),PRs (24hr),Open PRs,Open Issues,Bugs: Needs Triage,Bugs: Accepted,RFC: In Progress,RFC: Accepted,Date (ISO) +"Monday, June 27, 2022",1,4,4,0,0,3,24,82,58,16,0,0,"2022-06-27T12:02:10.213Z" "Sunday, June 26, 2022",2,2,2,0,0,3,21,78,54,16,0,0,"2022-06-26T12:02:05.156Z" "Saturday, June 25, 2022",13,4,4,0,0,8,20,76,52,16,0,0,"2022-06-25T12:02:03.060Z" "Friday, June 24, 2022",14,3,3,0,0,8,21,75,51,16,0,0,"2022-06-24T12:01:59.940Z" From 65e2b71b802ec0c8203cbe03bc86f087cab2a977 Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 27 Jun 2022 09:07:48 -0400 Subject: [PATCH 3/4] Inline define:var styles rendered after the head --- packages/astro/src/runtime/server/index.ts | 26 +++++++++++++++++-- packages/astro/test/astro-directives.test.js | 13 ++++++++-- .../src/components/Title.astro | 10 +++++++ .../src/pages/define-vars.astro | 3 +++ 4 files changed, 48 insertions(+), 4 deletions(-) create mode 100644 packages/astro/test/fixtures/astro-directives/src/components/Title.astro diff --git a/packages/astro/src/runtime/server/index.ts b/packages/astro/src/runtime/server/index.ts index e1ffd69e5..bfe095f52 100644 --- a/packages/astro/src/runtime/server/index.ts +++ b/packages/astro/src/runtime/server/index.ts @@ -183,7 +183,26 @@ export async function renderComponent( } if (Component && (Component as any).isAstroComponentFactory) { - return renderToIterable(result, Component as any, _props, slots); + async function * renderAstroComponentInline(): AsyncGenerator { + let iterable = await renderToIterable(result, Component as any, _props, slots); + // If this component added any define:vars styles and the head has already been + // sent out, we need to include those inline. + if(result.styles.size && alreadyHeadRenderedResults.has(result)) { + let styles = Array.from(result.styles); + result.styles.clear(); + for(const style of styles) { + if('define:vars' in style.props) { + // We only want to render the property value and not the full stylesheet + // which is bundled in the head. + style.children = ''; + yield markHTMLString(renderElement('style', style)); + } + } + } + yield * iterable; + } + + return renderAstroComponentInline(); } if (!Component && !_props['client:only']) { @@ -408,6 +427,7 @@ If you're still stuck, please open an issue on GitHub or join us at https://astr island.children = `${html ?? ''}${template}`; + // Scripts to prepend let prescriptType: PrescriptType = needsHydrationScript ? 'both' : needsDirectiveScript @@ -415,7 +435,7 @@ If you're still stuck, please open an issue on GitHub or join us at https://astr : null; let prescripts = getPrescripts(prescriptType, hydration.directive); - return markHTMLString(prescripts + renderElement('astro-island', island, false)); + return markHTMLString(prestyles + prescripts + renderElement('astro-island', island, false)); } /** Create the Astro.fetchContent() runtime function. */ @@ -719,6 +739,8 @@ export async function renderHead(result: SSRResult): Promise { const styles = Array.from(result.styles) .filter(uniqueElements) .map((style) => renderElement('style', style)); + // Clear result.styles so that any new styles added will be inlined. + result.styles.clear(); const scripts = Array.from(result.scripts) .filter(uniqueElements) .map((script, i) => { diff --git a/packages/astro/test/astro-directives.test.js b/packages/astro/test/astro-directives.test.js index 161063e97..0a4bab43b 100644 --- a/packages/astro/test/astro-directives.test.js +++ b/packages/astro/test/astro-directives.test.js @@ -22,7 +22,7 @@ describe('Directives', async () => { const html = await fixture.readFile('/define-vars/index.html'); const $ = cheerio.load(html); - expect($('style')).to.have.lengthOf(1); + expect($('style')).to.have.lengthOf(2); expect($('style').toString()).to.include('--bg: white;'); expect($('style').toString()).to.include('--fg: black;'); @@ -31,9 +31,18 @@ describe('Directives', async () => { .split(' ') .find((name) => /^astro-[A-Za-z0-9-]+/.test(name)); - expect($('style').toString().replace(/\s+/g, '')).to.equal( + expect($($('style').get(0)).toString().replace(/\s+/g, '')).to.equal( `` ); + + const scopedTitleClass = $('.title') + .attr('class') + .split(' ') + .find((name) => /^astro-[A-Za-z0-9-]+/.test(name)); + + expect($($('style').get(1)).toString().replace(/\s+/g, '')).to.equal( + `` + ); }); it('set:html', async () => { diff --git a/packages/astro/test/fixtures/astro-directives/src/components/Title.astro b/packages/astro/test/fixtures/astro-directives/src/components/Title.astro new file mode 100644 index 000000000..b59303ed6 --- /dev/null +++ b/packages/astro/test/fixtures/astro-directives/src/components/Title.astro @@ -0,0 +1,10 @@ +--- + const textColor = 'red' +--- +

hello there

+ + diff --git a/packages/astro/test/fixtures/astro-directives/src/pages/define-vars.astro b/packages/astro/test/fixtures/astro-directives/src/pages/define-vars.astro index db03705ad..3df42aea1 100644 --- a/packages/astro/test/fixtures/astro-directives/src/pages/define-vars.astro +++ b/packages/astro/test/fixtures/astro-directives/src/pages/define-vars.astro @@ -1,4 +1,5 @@ --- +import Title from "../components/Title.astro" let foo = 'bar' let bg = 'white' let fg = 'black' @@ -17,5 +18,7 @@ let fg = 'black' + + </body> </html> From c8dda941255bbb84da1b37240f6882c95c48e818 Mon Sep 17 00:00:00 2001 From: Matthew Phillips <matthew@skypack.dev> Date: Mon, 27 Jun 2022 09:08:40 -0400 Subject: [PATCH 4/4] Revert "Inline define:var styles rendered after the head" This reverts commit 65e2b71b802ec0c8203cbe03bc86f087cab2a977. --- packages/astro/src/runtime/server/index.ts | 26 ++----------------- packages/astro/test/astro-directives.test.js | 13 ++-------- .../src/components/Title.astro | 10 ------- .../src/pages/define-vars.astro | 3 --- 4 files changed, 4 insertions(+), 48 deletions(-) delete mode 100644 packages/astro/test/fixtures/astro-directives/src/components/Title.astro diff --git a/packages/astro/src/runtime/server/index.ts b/packages/astro/src/runtime/server/index.ts index bfe095f52..e1ffd69e5 100644 --- a/packages/astro/src/runtime/server/index.ts +++ b/packages/astro/src/runtime/server/index.ts @@ -183,26 +183,7 @@ export async function renderComponent( } if (Component && (Component as any).isAstroComponentFactory) { - async function * renderAstroComponentInline(): AsyncGenerator<string, void, undefined> { - let iterable = await renderToIterable(result, Component as any, _props, slots); - // If this component added any define:vars styles and the head has already been - // sent out, we need to include those inline. - if(result.styles.size && alreadyHeadRenderedResults.has(result)) { - let styles = Array.from(result.styles); - result.styles.clear(); - for(const style of styles) { - if('define:vars' in style.props) { - // We only want to render the property value and not the full stylesheet - // which is bundled in the head. - style.children = ''; - yield markHTMLString(renderElement('style', style)); - } - } - } - yield * iterable; - } - - return renderAstroComponentInline(); + return renderToIterable(result, Component as any, _props, slots); } if (!Component && !_props['client:only']) { @@ -427,7 +408,6 @@ If you're still stuck, please open an issue on GitHub or join us at https://astr island.children = `${html ?? ''}${template}`; - // Scripts to prepend let prescriptType: PrescriptType = needsHydrationScript ? 'both' : needsDirectiveScript @@ -435,7 +415,7 @@ If you're still stuck, please open an issue on GitHub or join us at https://astr : null; let prescripts = getPrescripts(prescriptType, hydration.directive); - return markHTMLString(prestyles + prescripts + renderElement('astro-island', island, false)); + return markHTMLString(prescripts + renderElement('astro-island', island, false)); } /** Create the Astro.fetchContent() runtime function. */ @@ -739,8 +719,6 @@ export async function renderHead(result: SSRResult): Promise<string> { const styles = Array.from(result.styles) .filter(uniqueElements) .map((style) => renderElement('style', style)); - // Clear result.styles so that any new styles added will be inlined. - result.styles.clear(); const scripts = Array.from(result.scripts) .filter(uniqueElements) .map((script, i) => { diff --git a/packages/astro/test/astro-directives.test.js b/packages/astro/test/astro-directives.test.js index 0a4bab43b..161063e97 100644 --- a/packages/astro/test/astro-directives.test.js +++ b/packages/astro/test/astro-directives.test.js @@ -22,7 +22,7 @@ describe('Directives', async () => { const html = await fixture.readFile('/define-vars/index.html'); const $ = cheerio.load(html); - expect($('style')).to.have.lengthOf(2); + expect($('style')).to.have.lengthOf(1); expect($('style').toString()).to.include('--bg: white;'); expect($('style').toString()).to.include('--fg: black;'); @@ -31,18 +31,9 @@ describe('Directives', async () => { .split(' ') .find((name) => /^astro-[A-Za-z0-9-]+/.test(name)); - expect($($('style').get(0)).toString().replace(/\s+/g, '')).to.equal( + expect($('style').toString().replace(/\s+/g, '')).to.equal( `<style>.${scopedClass}{--bg:white;--fg:black;}body{background:var(--bg);color:var(--fg)}</style>` ); - - const scopedTitleClass = $('.title') - .attr('class') - .split(' ') - .find((name) => /^astro-[A-Za-z0-9-]+/.test(name)); - - expect($($('style').get(1)).toString().replace(/\s+/g, '')).to.equal( - `<style>.${scopedTitleClass}{--textColor:red;}</style>` - ); }); it('set:html', async () => { diff --git a/packages/astro/test/fixtures/astro-directives/src/components/Title.astro b/packages/astro/test/fixtures/astro-directives/src/components/Title.astro deleted file mode 100644 index b59303ed6..000000000 --- a/packages/astro/test/fixtures/astro-directives/src/components/Title.astro +++ /dev/null @@ -1,10 +0,0 @@ ---- - const textColor = 'red' ---- -<h1 class="title">hello there</h1> - -<style define:vars={{textColor: textColor}}> - .title { - color: var(--textColor); - } -</style> diff --git a/packages/astro/test/fixtures/astro-directives/src/pages/define-vars.astro b/packages/astro/test/fixtures/astro-directives/src/pages/define-vars.astro index 3df42aea1..db03705ad 100644 --- a/packages/astro/test/fixtures/astro-directives/src/pages/define-vars.astro +++ b/packages/astro/test/fixtures/astro-directives/src/pages/define-vars.astro @@ -1,5 +1,4 @@ --- -import Title from "../components/Title.astro" let foo = 'bar' let bg = 'white' let fg = 'black' @@ -18,7 +17,5 @@ let fg = 'black' <script id="inline" define:vars={{ foo }}> console.log(foo); </script> - - <Title /> </body> </html>