Merge branch 'main' into chris/goodbye-afmd

withastro · Jan 9, 2023 · e4fcbc0 · e4fcbc0
2 parents ed6465d + 54076a4
commit e4fcbc0
Show file tree

Hide file tree

Showing 15 changed files with 425 additions and 347 deletions.
diff --git a/.changeset/kind-beers-give.md b/.changeset/kind-beers-give.md
@@ -0,0 +1,6 @@
+---
+'astro': patch
+'@astrojs/lit': patch
+---
+
+Fix Lit slotted content
diff --git a/examples/docs/src/config.ts b/examples/docs/src/config.ts
@@ -42,7 +42,7 @@ export const ALGOLIA = {
 };
 
 export type Sidebar = Record<
-	typeof KNOWN_LANGUAGE_CODES[number],
+	(typeof KNOWN_LANGUAGE_CODES)[number],
 	Record<string, { text: string; link: string }[]>
 >;
 export const SIDEBAR: Sidebar = {

diff --git a/examples/docs/src/languages.ts b/examples/docs/src/languages.ts
@@ -6,5 +6,5 @@ export const langPathRegex = /\/([a-z]{2}-?[A-Z]{0,2})\//;
 export function getLanguageFromURL(pathname: string) {
 	const langCodeMatch = pathname.match(langPathRegex);
 	const langCode = langCodeMatch ? langCodeMatch[1] : 'en';
-	return langCode as typeof KNOWN_LANGUAGE_CODES[number];
+	return langCode as (typeof KNOWN_LANGUAGE_CODES)[number];
 }
diff --git a/examples/with-content/src/content/types.generated.d.ts b/examples/with-content/src/content/types.generated.d.ts
@@ -1,7 +1,7 @@
 declare module 'astro:content' {
 	export { z } from 'astro/zod';
 	export type CollectionEntry<C extends keyof typeof entryMap> =
-		typeof entryMap[C][keyof typeof entryMap[C]] & Render;
+		(typeof entryMap)[C][keyof (typeof entryMap)[C]] & Render;
 
 	type BaseCollectionConfig<S extends import('astro/zod').ZodRawShape> = {
 		schema?: S;
@@ -17,17 +17,17 @@ declare module 'astro:content' {
 		input: BaseCollectionConfig<S>
 	): BaseCollectionConfig<S>;
 
-	export function getEntry<C extends keyof typeof entryMap, E extends keyof typeof entryMap[C]>(
+	export function getEntry<C extends keyof typeof entryMap, E extends keyof (typeof entryMap)[C]>(
 		collection: C,
 		entryKey: E
-	): Promise<typeof entryMap[C][E] & Render>;
+	): Promise<(typeof entryMap)[C][E] & Render>;
 	export function getCollection<
 		C extends keyof typeof entryMap,
-		E extends keyof typeof entryMap[C]
+		E extends keyof (typeof entryMap)[C]
 	>(
 		collection: C,
-		filter?: (data: typeof entryMap[C][E]) => boolean
-	): Promise<(typeof entryMap[C][E] & Render)[]>;
+		filter?: (data: (typeof entryMap)[C][E]) => boolean
+	): Promise<((typeof entryMap)[C][E] & Render)[]>;
 
 	type InferEntrySchema<C extends keyof typeof entryMap> = import('astro/zod').infer<
 		import('astro/zod').ZodObject<Required<ContentConfig['collections'][C]>['schema']>

diff --git a/packages/astro/env.d.ts b/packages/astro/env.d.ts
@@ -11,7 +11,7 @@ type Astro = import('./dist/@types/astro.js').AstroGlobal;
 /**
  * Astro global available in all contexts in .astro files
  *
- * [Astro documentation](https://docs.astro.build/reference/api-reference/#astro-global)
+ * [Astro documentation](https://docs.astro.build/en/reference/api-reference/#astro-global)
  */
 declare const Astro: Readonly<Astro>;
 

diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts
@@ -239,7 +239,7 @@ export interface AstroGlobal<Props extends Record<string, any> = Record<string,
 }
 
 /** Union type of supported markdown file extensions */
-type MarkdowFileExtension = typeof SUPPORTED_MARKDOWN_FILE_EXTENSIONS[number];
+type MarkdowFileExtension = (typeof SUPPORTED_MARKDOWN_FILE_EXTENSIONS)[number];
 
 export interface AstroGlobalPartial {
 	/**
@@ -773,6 +773,7 @@ export interface AstroUserConfig {
 		 * @name markdown.gfm
 		 * @type {boolean}
 		 * @default `true`
+		 * @version 2.0.0
 		 * @description
 		 * Astro uses [GitHub-flavored Markdown](https://github.com/remarkjs/remark-gfm) by default. To disable this, set the `gfm` flag to `false`:
 		 *
@@ -790,6 +791,7 @@ export interface AstroUserConfig {
 		 * @name markdown.smartypants
 		 * @type {boolean}
 		 * @default `true`
+		 * @version 2.0.0
 		 * @description
 		 * Astro uses the [SmartyPants formatter](https://daringfireball.net/projects/smartypants/) by default. To disable this, set the `smartypants` flag to `false`:
 		 *

diff --git a/packages/astro/src/content/template/types.generated.d.ts b/packages/astro/src/content/template/types.generated.d.ts
@@ -1,7 +1,7 @@
 declare module 'astro:content' {
 	export { z } from 'astro/zod';
 	export type CollectionEntry<C extends keyof typeof entryMap> =
-		typeof entryMap[C][keyof typeof entryMap[C]] & Render;
+		(typeof entryMap)[C][keyof (typeof entryMap)[C]] & Render;
 
 	type BaseCollectionConfig<S extends import('astro/zod').ZodRawShape> = {
 		schema?: S;
@@ -17,17 +17,17 @@ declare module 'astro:content' {
 		input: BaseCollectionConfig<S>
 	): BaseCollectionConfig<S>;
 
-	export function getEntry<C extends keyof typeof entryMap, E extends keyof typeof entryMap[C]>(
+	export function getEntry<C extends keyof typeof entryMap, E extends keyof (typeof entryMap)[C]>(
 		collection: C,
 		entryKey: E
-	): Promise<typeof entryMap[C][E] & Render>;
+	): Promise<(typeof entryMap)[C][E] & Render>;
 	export function getCollection<
 		C extends keyof typeof entryMap,
-		E extends keyof typeof entryMap[C]
+		E extends keyof (typeof entryMap)[C]
 	>(
 		collection: C,
-		filter?: (data: typeof entryMap[C][E]) => boolean
-	): Promise<(typeof entryMap[C][E] & Render)[]>;
+		filter?: (data: (typeof entryMap)[C][E]) => boolean
+	): Promise<((typeof entryMap)[C][E] & Render)[]>;
 
 	type InferEntrySchema<C extends keyof typeof entryMap> = import('astro/zod').infer<
 		import('astro/zod').ZodObject<Required<ContentConfig['collections'][C]>['schema']>

diff --git a/packages/astro/src/core/errors/errors-data.ts b/packages/astro/src/core/errors/errors-data.ts
@@ -613,5 +613,5 @@ See https://docs.astro.build/en/guides/server-side-rendering/ for more informati
 
 type ValueOf<T> = T[keyof T];
 export type AstroErrorCodes = ValueOf<{
-	[T in keyof typeof AstroErrorData]: typeof AstroErrorData[T]['code'];
+	[T in keyof typeof AstroErrorData]: (typeof AstroErrorData)[T]['code'];
 }>;
diff --git a/packages/astro/test/fixtures/lit-element/src/pages/slots.astro b/packages/astro/test/fixtures/lit-element/src/pages/slots.astro
@@ -7,9 +7,33 @@ import {MyElement} from '../components/my-element.js';
   <title>LitElement | Slot</title>
 </head>
 <body>
-  <MyElement>
-		<div>default</div>
-		<div slot="named">named</div>
+  <MyElement id="root">
+		<div class="default">my-element default 1</div>
+		<div class="default">my-element default 2</div>
+
+		<h1 slot="named">my-element named 1</h1>
+		<h2 slot="named">my-element named 2</h2>
+
+		<ul slot="named" id="list">
+			<li>Custom elements</li>
+			<li>Shadow DOM</li>
+			<li>HTML templates</li>
+		</ul>
+
+		<my-element id="slotted" slot="named">
+			<h3 class="default">slotted my-element default</h3>
+
+			<div slot="named">slotted my-element named 1</div>
+			<div slot="named">slotted my-element named 2</div>
+
+			<MyElement id="slotted-slotted" slot="named">
+				<h4 class="default">slotted slotted my-element default 1</h4>
+				<h5 class="default">slotted slotted my-element default 2</h5>
+
+				<div slot="named">slotted slotted my-element named 1</div>
+				<div slot="named">slotted slotted my-element named 2</div>
+			</MyElement>
+		</my-element>
 	</MyElement>
 </body>
 </html>
diff --git a/packages/astro/test/fixtures/lit-element/tsconfig.json b/packages/astro/test/fixtures/lit-element/tsconfig.json
@@ -1,3 +1,5 @@
 {
-  "experimentalDecorators": true
+  "compilerOptions": {
+    "experimentalDecorators": true
+  }
 }
diff --git a/packages/astro/test/lit-element.test.js b/packages/astro/test/lit-element.test.js
@@ -70,15 +70,45 @@ describe('LitElement test', function () {
 		const html = await fixture.readFile('/slots/index.html');
 		const $ = cheerio.load(html);
 
-		expect($('my-element').length).to.equal(1);
+		const $rootMyElement = $('#root');
+		const $slottedMyElement = $('#slotted');
+		const $slottedSlottedMyElement = $('#slotted-slotted');
 
-		const [defaultSlot, namedSlot] = $('template').siblings().toArray();
+		expect($('my-element').length).to.equal(3);
 
-		// has default slot content in lightdom
-		expect($(defaultSlot).text()).to.equal('default');
+		// Root my-element
+		expect($rootMyElement.children('.default').length).to.equal(2);
+		expect($rootMyElement.children('.default').eq(1).text()).to.equal('my-element default 2');
 
-		// has named slot content in lightdom
-		expect($(namedSlot).text()).to.equal('named');
+		expect($rootMyElement.children('[slot="named"]').length).to.equal(4);
+		expect($rootMyElement.children('[slot="named"]').eq(1).text()).to.equal('my-element named 2');
+		expect($rootMyElement.children('[slot="named"]').eq(2).attr('id')).to.equal('list');
+		expect($rootMyElement.children('[slot="named"]').eq(3).attr('id')).to.equal('slotted');
+
+		// Slotted my-element first level
+		expect($slottedMyElement.children('.default').length).to.equal(1);
+		expect($slottedMyElement.children('.default').eq(0).text()).to.equal(
+			'slotted my-element default'
+		);
+
+		expect($slottedMyElement.children('[slot="named"]').length).to.equal(3);
+		expect($slottedMyElement.children('[slot="named"]').eq(1).text()).to.equal(
+			'slotted my-element named 2'
+		);
+		expect($slottedMyElement.children('[slot="named"]').eq(2).attr('id')).to.equal(
+			'slotted-slotted'
+		);
+
+		// Slotted my-element second level
+		expect($slottedSlottedMyElement.children('.default').length).to.equal(2);
+		expect($slottedSlottedMyElement.children('.default').eq(1).text()).to.equal(
+			'slotted slotted my-element default 2'
+		);
+
+		expect($slottedSlottedMyElement.children('[slot="named"]').length).to.equal(2);
+		expect($slottedSlottedMyElement.children('[slot="named"]').eq(1).text()).to.equal(
+			'slotted slotted my-element named 2'
+		);
 	});
 
 	it('Is able to build when behind getStaticPaths', async () => {

diff --git a/packages/astro/test/ssr-lit.test.js b/packages/astro/test/ssr-lit.test.js
@@ -25,7 +25,7 @@ describe('Lit integration in SSR', () => {
 	}
 
 	it('Is able to load', async () => {
-		delete globalThis.window;
+		delete globalThis.window; // On Windows this results in `ReferenceError: window is not defined`
 		const html = await fetchHTML('/');
 		const $ = cheerioLoad(html);
 		expect($('#win').text()).to.equal('function');

diff --git a/packages/integrations/lit/package.json b/packages/integrations/lit/package.json
@@ -33,7 +33,8 @@
     "test": "mocha"
   },
   "dependencies": {
-    "@lit-labs/ssr": "^2.2.0"
+    "@lit-labs/ssr": "^2.2.0",
+    "parse5": "^7.1.2"
   },
   "devDependencies": {
     "astro": "workspace:*",

diff --git a/packages/integrations/lit/server.js b/packages/integrations/lit/server.js
@@ -1,6 +1,7 @@
 import './server-shim.js';
 import '@lit-labs/ssr/lib/render-lit-html.js';
 import { LitElementRenderer } from '@lit-labs/ssr/lib/lit-element-renderer.js';
+import * as parse5 from 'parse5';
 
 function isCustomElementTag(name) {
 	return typeof name === 'string' && /-/.test(name);
@@ -58,12 +59,22 @@ function* render(Component, attrs, slots) {
 		yield '</template>';
 	}
 	if (slots) {
-		for (const [slot, value] of Object.entries(slots)) {
-			if (slot === 'default') {
-				yield `<astro-slot>${value || ''}</astro-slot>`;
-			} else {
-				yield `<astro-slot slot="${slot}">${value || ''}</astro-slot>`;
+		for (let [slot, value = ''] of Object.entries(slots)) {
+			if (slot !== 'default' && value) {
+				// Parse the value as a concatenated string
+				const fragment = parse5.parseFragment(`${value}`);
+
+				// Add the missing slot attribute to child Element nodes
+				for (const node of fragment.childNodes) {
+					if (node.tagName && !node.attrs.some(({ name }) => name === 'slot')) {
+						node.attrs.push({ name: 'slot', value: slot });
+					}
+				}
+
+				value = parse5.serialize(fragment);
 			}
+
+			yield value;
 		}
 	}
 	yield `</${tagName}>`;