-
-
Notifications
You must be signed in to change notification settings - Fork 2.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Resolve components by module ID during compilation (#3300)
* WIP: adding test coverage * test fixes * moving the shared lib up a directory to reproduce the bug * fix: transform with the module ID instead of parsing the filepath * adding the shared lib to the workspaces list * fix: client-only assets now get the full URL from vite * why is this needed for windows? * WIP: using /@fs to handle windows filepaths * fix: remove /@fs from hoisted script imports * nit: removing unused imports * fix: strip off the path root when mapping client:only styles * had to reverse the `/@fs` handling to work on windows and unix * chore: adding comments to explain the fix * chore: adding changeset
- Loading branch information
Tony Sullivan
authored
May 12, 2022
1 parent
2fed346
commit b463ddb
Showing
22 changed files
with
407 additions
and
41 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
'astro': patch | ||
--- | ||
|
||
Resolve .astro components by module ID to support the use of Astro + framework components in an NPM package |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,157 @@ | ||
import { expect } from 'chai'; | ||
import { load as cheerioLoad } from 'cheerio'; | ||
import { loadFixture } from './test-utils.js'; | ||
|
||
function addLeadingSlash(path) { | ||
return path.startsWith('/') ? path : '/' + path; | ||
} | ||
|
||
describe('Component Libraries', () => { | ||
/** @type {import('./test-utils').Fixture} */ | ||
let fixture; | ||
|
||
before(async () => { | ||
fixture = await loadFixture({ | ||
root: './fixtures/component-library/', | ||
}); | ||
}); | ||
|
||
describe('build', async () => { | ||
before(async () => { | ||
await fixture.build(); | ||
}); | ||
|
||
function createFindEvidence(expected, prefix) { | ||
return async function findEvidence(pathname) { | ||
const html = await fixture.readFile(pathname); | ||
const $ = cheerioLoad(html); | ||
const links = $('link[rel=stylesheet]'); | ||
for (const link of links) { | ||
const href = $(link).attr('href'); | ||
|
||
const data = await fixture.readFile(addLeadingSlash(href)); | ||
if (expected.test(data)) { | ||
return true; | ||
} | ||
} | ||
|
||
return false; | ||
}; | ||
} | ||
|
||
it('Built .astro pages', async () => { | ||
let html = await fixture.readFile('/with-astro/index.html'); | ||
expect(html).to.be.a('string'); | ||
|
||
html = await fixture.readFile('/with-react/index.html'); | ||
expect(html).to.be.a('string'); | ||
|
||
html = await fixture.readFile('/internal-hydration/index.html'); | ||
expect(html).to.be.a('string'); | ||
}); | ||
|
||
it('Works with .astro components', async () => { | ||
const html = await fixture.readFile('/with-astro/index.html'); | ||
const $ = cheerioLoad(html); | ||
|
||
expect($('button').text()).to.equal('Click me', "Rendered the component's slot"); | ||
|
||
const findEvidence = createFindEvidence(/border-radius:( )*1rem/); | ||
expect(await findEvidence('with-astro/index.html')).to.equal( | ||
true, | ||
"Included the .astro component's <style>" | ||
); | ||
}); | ||
|
||
it('Works with react components', async () => { | ||
const html = await fixture.readFile('/with-react/index.html'); | ||
const $ = cheerioLoad(html); | ||
|
||
expect($('#react-static').text()).to.equal('Hello static!', 'Rendered the static component'); | ||
|
||
expect($('#react-idle').text()).to.equal( | ||
'Hello idle!', | ||
'Rendered the client hydrated component' | ||
); | ||
|
||
expect($('astro-root[uid]')).to.have.lengthOf(1, 'Included one hydration island'); | ||
}); | ||
|
||
it('Works with components hydrated internally', async () => { | ||
const html = await fixture.readFile('/internal-hydration/index.html'); | ||
const $ = cheerioLoad(html); | ||
|
||
expect($('.counter').length).to.equal(1, 'Rendered the svelte counter'); | ||
expect($('.counter-message').text().trim()).to.equal('Hello, Svelte!', "rendered the counter's slot"); | ||
|
||
expect($('astro-root[uid]')).to.have.lengthOf(1, 'Included one hydration island'); | ||
}); | ||
}); | ||
|
||
describe('dev', async () => { | ||
let devServer; | ||
|
||
before(async () => { | ||
devServer = await fixture.startDevServer(); | ||
}); | ||
|
||
after(async () => { | ||
await devServer.stop(); | ||
}); | ||
|
||
function createFindEvidence(expected, prefix) { | ||
return async function findEvidence(pathname) { | ||
const html = await fixture.fetch(pathname).then((res) => res.text()); | ||
const $ = cheerioLoad(html); | ||
const links = $('link[rel=stylesheet]'); | ||
for (const link of links) { | ||
const href = $(link).attr('href'); | ||
|
||
const data = await fixture.fetch(addLeadingSlash(href)).then((res) => res.text()); | ||
if (expected.test(data)) { | ||
return true; | ||
} | ||
} | ||
|
||
return false; | ||
}; | ||
} | ||
|
||
it('Works with .astro components', async () => { | ||
const html = await fixture.fetch('/with-astro/').then((res) => res.text()); | ||
const $ = cheerioLoad(html); | ||
|
||
expect($('button').text()).to.equal('Click me', "Rendered the component's slot"); | ||
|
||
const findEvidence = createFindEvidence(/border-radius:( )*1rem/); | ||
expect(await findEvidence('/with-astro/')).to.equal( | ||
true, | ||
"Included the .astro component's <style>" | ||
); | ||
}); | ||
|
||
it('Works with react components', async () => { | ||
const html = await fixture.fetch('/with-react/').then((res) => res.text()); | ||
const $ = cheerioLoad(html); | ||
|
||
expect($('#react-static').text()).to.equal('Hello static!', 'Rendered the static component'); | ||
|
||
expect($('#react-idle').text()).to.equal( | ||
'Hello idle!', | ||
'Rendered the client hydrated component' | ||
); | ||
|
||
expect($('astro-root[uid]')).to.have.lengthOf(1, 'Included one hydration island'); | ||
}); | ||
|
||
it('Works with components hydrated internally', async () => { | ||
const html = await fixture.fetch('/internal-hydration/').then((res) => res.text()); | ||
const $ = cheerioLoad(html); | ||
|
||
expect($('.counter').length).to.equal(1, 'Rendered the svelte counter'); | ||
expect($('.counter-message').text().trim()).to.equal('Hello, Svelte!', "rendered the counter's slot"); | ||
|
||
expect($('astro-root[uid]')).to.have.lengthOf(1, 'Included one hydration island'); | ||
}); | ||
}); | ||
}); |
7 changes: 7 additions & 0 deletions
7
packages/astro/test/fixtures/component-library-shared/Button.astro
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
<button><slot /></button> | ||
|
||
<style> | ||
button { | ||
border-radius: 1rem; | ||
} | ||
</style> |
11 changes: 11 additions & 0 deletions
11
packages/astro/test/fixtures/component-library-shared/Counter.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
.counter { | ||
display: grid; | ||
font-size: 2em; | ||
grid-template-columns: repeat(3, minmax(0, 1fr)); | ||
margin-top: 2em; | ||
place-items: center; | ||
} | ||
|
||
.counter-message { | ||
text-align: center; | ||
} |
Oops, something went wrong.