From 60e6d17df6a31ee11b80d88762ebaf7da7e77295 Mon Sep 17 00:00:00 2001 From: Reuben Tier Date: Sat, 21 Dec 2024 21:50:37 +0000 Subject: [PATCH 1/6] Reverse order of styles & scripts Co-authored-by: Louis Escher --- internal/transform/transform.go | 4 ++-- packages/compiler/test/scripts/order.ts | 17 +++++++++++++++++ packages/compiler/test/styles/sass.ts | 12 ++++++------ 3 files changed, 25 insertions(+), 8 deletions(-) create mode 100644 packages/compiler/test/scripts/order.ts diff --git a/internal/transform/transform.go b/internal/transform/transform.go index c411361b..8629129c 100644 --- a/internal/transform/transform.go +++ b/internal/transform/transform.go @@ -126,7 +126,7 @@ func ExtractStyles(doc *astro.Node) { return } // prepend node to maintain authored order - doc.Styles = append([]*astro.Node{n}, doc.Styles...) + doc.Styles = append(doc.Styles, n) } }) // Important! Remove styles from original location *after* walking the doc @@ -436,7 +436,7 @@ func ExtractScript(doc *astro.Node, n *astro.Node, opts *TransformOptions, h *ha // prepend node to maintain authored order if shouldAdd { - doc.Scripts = append([]*astro.Node{n}, doc.Scripts...) + doc.Scripts = append(doc.Scripts, n) n.HandledScript = true } } else { diff --git a/packages/compiler/test/scripts/order.ts b/packages/compiler/test/scripts/order.ts new file mode 100644 index 00000000..fbfaccbf --- /dev/null +++ b/packages/compiler/test/scripts/order.ts @@ -0,0 +1,17 @@ +import { transform } from '@astrojs/compiler'; +import { test } from 'uvu'; +import * as assert from 'uvu/assert'; + +test('outputs scripts in expected order', async () => { + const result = await transform(` + + `); + const matches = result.code.match(/console\.log\((\d)\)/g); + + if (!matches) throw new Error('No matches'); + + assert.match(matches[0], '1'); + assert.match(matches[1], '2'); +}); + +test.run(); diff --git a/packages/compiler/test/styles/sass.ts b/packages/compiler/test/styles/sass.ts index 3c0f6526..10f71599 100644 --- a/packages/compiler/test/styles/sass.ts +++ b/packages/compiler/test/styles/sass.ts @@ -37,15 +37,15 @@ test.before(async () => { }); test('transforms scss one', () => { - assert.match( - result.css[result.css.length - 1], - 'color:red', - 'Expected "color:red" to be present.' - ); + assert.match(result.css[0], 'color:red', 'Expected "color:red" to be present.'); }); test('transforms scss two', () => { - assert.match(result.css[0], 'color:green', 'Expected "color:green" to be present.'); + assert.match( + result.css[result.css.length - 1], + 'color:green', + 'Expected "color:green" to be present.' + ); }); test.run(); From c6b2287448a9fad8e1d8c7a86c057cb9c85dd300 Mon Sep 17 00:00:00 2001 From: Reuben Tier Date: Sat, 21 Dec 2024 22:04:25 +0000 Subject: [PATCH 2/6] Fix test snapshots Co-authored-by: Louis Escher --- .../printer/__printer_js__/multiple_define_vars_on_style.snap | 2 +- .../__printer_js__/script_multiple__renderScript__true_.snap | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/internal/printer/__printer_js__/multiple_define_vars_on_style.snap b/internal/printer/__printer_js__/multiple_define_vars_on_style.snap index 0c082c43..fdfc3907 100755 --- a/internal/printer/__printer_js__/multiple_define_vars_on_style.snap +++ b/internal/printer/__printer_js__/multiple_define_vars_on_style.snap @@ -34,7 +34,7 @@ export const $$metadata = $$createMetadata(import.meta.url, { modules: [], hydra const $$Component = $$createComponent(($$result, $$props, $$slots) => { -const $$definedVars = $$defineStyleVars([{color:'red'},{color:'green'}]); +const $$definedVars = $$defineStyleVars([{color:'green'},{color:'red'}]); return $$render`${$$maybeRenderHead($$result)}

foo

bar

`; }, undefined, undefined); export default $$Component; diff --git a/internal/printer/__printer_js__/script_multiple__renderScript__true_.snap b/internal/printer/__printer_js__/script_multiple__renderScript__true_.snap index 12b257be..8526ea48 100755 --- a/internal/printer/__printer_js__/script_multiple__renderScript__true_.snap +++ b/internal/printer/__printer_js__/script_multiple__renderScript__true_.snap @@ -30,7 +30,7 @@ import { createMetadata as $$createMetadata } from "http://localhost:3000/"; -export const $$metadata = $$createMetadata("/src/pages/index.astro", { modules: [], hydratedComponents: [], clientOnlyComponents: [], hydrationDirectives: new Set([]), hoisted: [{ type: 'inline', value: `console.log("World");` }, { type: 'inline', value: `console.log("Hello");` }] }); +export const $$metadata = $$createMetadata("/src/pages/index.astro", { modules: [], hydratedComponents: [], clientOnlyComponents: [], hydrationDirectives: new Set([]), hoisted: [{ type: 'inline', value: `console.log("Hello");` }, { type: 'inline', value: `console.log("World");` }] }); const $$Index = $$createComponent(($$result, $$props, $$slots) => { From 68e69b1022f1216cb934e6179f08273c3ece3284 Mon Sep 17 00:00:00 2001 From: Reuben Tier Date: Sat, 21 Dec 2024 22:55:15 +0000 Subject: [PATCH 3/6] Add changeset --- .changeset/olive-beds-happen.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/olive-beds-happen.md diff --git a/.changeset/olive-beds-happen.md b/.changeset/olive-beds-happen.md new file mode 100644 index 00000000..3888272f --- /dev/null +++ b/.changeset/olive-beds-happen.md @@ -0,0 +1,5 @@ +--- +"@astrojs/compiler": patch +--- + +Fix the order that styles & scripts are rendered From 88aa209b921f0587391be613ee0599273741fd9b Mon Sep 17 00:00:00 2001 From: Reuben Tier Date: Fri, 3 Jan 2025 12:20:35 +0000 Subject: [PATCH 4/6] Update test --- packages/compiler/test/scripts/order.ts | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/compiler/test/scripts/order.ts b/packages/compiler/test/scripts/order.ts index fbfaccbf..e0d24db8 100644 --- a/packages/compiler/test/scripts/order.ts +++ b/packages/compiler/test/scripts/order.ts @@ -4,14 +4,17 @@ import * as assert from 'uvu/assert'; test('outputs scripts in expected order', async () => { const result = await transform(` - - `); - const matches = result.code.match(/console\.log\((\d)\)/g); + + `); - if (!matches) throw new Error('No matches'); + const scripts = result.scripts - assert.match(matches[0], '1'); - assert.match(matches[1], '2'); + // for typescript + if (scripts[0].type === 'external') throw new Error("Script is external") + if (scripts[1].type === 'external') throw new Error("Script is external") + + assert.match(scripts[0].code, 'console.log(1)'); + assert.match(scripts[1].code, 'console.log(2)'); }); test.run(); From fc1bef9dd611689b3c09d22da5f96348288fec3f Mon Sep 17 00:00:00 2001 From: Reuben Tier Date: Fri, 3 Jan 2025 23:55:50 +0000 Subject: [PATCH 5/6] Fix js lint --- packages/compiler/test/scripts/order.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/compiler/test/scripts/order.ts b/packages/compiler/test/scripts/order.ts index e0d24db8..a8645d79 100644 --- a/packages/compiler/test/scripts/order.ts +++ b/packages/compiler/test/scripts/order.ts @@ -7,11 +7,11 @@ test('outputs scripts in expected order', async () => { `); - const scripts = result.scripts + const scripts = result.scripts; // for typescript - if (scripts[0].type === 'external') throw new Error("Script is external") - if (scripts[1].type === 'external') throw new Error("Script is external") + if (scripts[0].type === 'external') throw new Error('Script is external'); + if (scripts[1].type === 'external') throw new Error('Script is external'); assert.match(scripts[0].code, 'console.log(1)'); assert.match(scripts[1].code, 'console.log(2)'); From c30e5fd92ef7d2b49abeddd75a9deabab2fe4a2c Mon Sep 17 00:00:00 2001 From: Reuben Tier <64310361+TheOtterlord@users.noreply.github.com> Date: Fri, 10 Jan 2025 12:04:34 +0000 Subject: [PATCH 6/6] Apply suggestions from code review Co-authored-by: Bjorn Lu --- internal/transform/transform.go | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/internal/transform/transform.go b/internal/transform/transform.go index 8629129c..0c005c54 100644 --- a/internal/transform/transform.go +++ b/internal/transform/transform.go @@ -125,7 +125,7 @@ func ExtractStyles(doc *astro.Node) { if !IsHoistable(n) { return } - // prepend node to maintain authored order + // append node to maintain authored order doc.Styles = append(doc.Styles, n) } }) @@ -434,7 +434,7 @@ func ExtractScript(doc *astro.Node, n *astro.Node, opts *TransformOptions, h *ha } } - // prepend node to maintain authored order + // append node to maintain authored order if shouldAdd { doc.Scripts = append(doc.Scripts, n) n.HandledScript = true