test: render into dsd with a serialized attribute

gracile-web · Jun 23, 2024 · 7b507d1 · 7b507d1
1 parent 7c04cb3
commit 7b507d1
Show file tree

Hide file tree

Showing 9 changed files with 177 additions and 3 deletions.
diff --git a/integration/__fixtures__/server-express/dist_expected/server/server.js b/integration/__fixtures__/server-express/dist_expected/server/server.js
diff --git a/integration/__fixtures__/server-express/dist_expected/server/server.js.map b/integration/__fixtures__/server-express/dist_expected/server/server.js.map
diff --git a/integration/__fixtures__/static-site/src/routes/01-assets/01-import-with-query-url.my-el.ts b/integration/__fixtures__/static-site/src/routes/01-assets/01-import-with-query-url.my-el.ts
@@ -0,0 +1,65 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+
+import styles from './_00-import-with-query-url.scss?url';
+
+@customElement('my-el')
+export class MyEl extends LitElement {
+	static styles = [
+		css`
+			:host {
+				display: block;
+			}
+		`,
+	];
+
+	@state() toggled = false;
+
+	@property({ type: Array, converter: (s) => s?.split(',') })
+	'extra-styles': string[] | string | null = null;
+
+	render() {
+		if (typeof this['extra-styles'] === 'string') throw new Error();
+
+		return html`
+			<!--  -->
+			<link rel="stylesheet" href=${styles} />
+
+			${this['extra-styles']?.join(' --- ')}
+			${this['extra-styles']?.map(
+				(styleSheet) => html`<link rel="stylesheet" href=${styleSheet} />`,
+			)}
+
+			<div class="color-me-red">RED</div>
+			<div class="color-me-green">GREEN</div>
+
+			${this.toggled
+				? html` <!--  -->
+						<h2>elephant</h2>
+						<div class="color-me-red">RED</div>
+						<div class="color-me-green">GREEN</div>
+
+						<button
+							@click=${() => {
+								this.toggled = false;
+								console.log('elephant');
+							}}
+						>
+							CLICK ME
+						</button>`
+				: html` <!--  -->
+						<h2>lion</h2>
+						<div class="color-me-red">RED</div>
+						<div class="color-me-green">GREEN</div>
+
+						<button
+							@click=${() => {
+								this.toggled = true;
+								console.log('lion');
+							}}
+						>
+							CLICK ME
+						</button>`}
+		`;
+	}
+}
diff --git a/integration/__fixtures__/static-site/src/routes/01-assets/01-import-with-query-url.ts b/integration/__fixtures__/static-site/src/routes/01-assets/01-import-with-query-url.ts
@@ -0,0 +1,20 @@
+import { defineRoute } from '@gracile/server/route';
+import { html } from 'lit';
+
+import { document } from '../../documents/document-with-assets.js';
+
+import customStylesheet from './_00-import-with-query-url--server-2.scss?url';
+import './01-import-with-query-url.my-el.js';
+
+export default defineRoute({
+	document: (context) => document(context),
+
+	template: (context) => html`
+		<h1>Hello world</h1>
+		<hr />
+		<code>${context.url.pathname}</code>
+
+		<!-- FIXME: Why it's putting /@fs/ and not /src/ ? -->
+		<my-el extra-styles=${[customStylesheet].toString()}></my-el>
+	`,
+});
diff --git a/integration/__fixtures__/static-site/src/routes/01-assets/_01-import-with-query-url-2.scss b/integration/__fixtures__/static-site/src/routes/01-assets/_01-import-with-query-url-2.scss
@@ -0,0 +1,3 @@
+.color-me-red {
+	background-color: red;
+}
diff --git a/integration/__fixtures__/static-site/src/routes/01-assets/_01-import-with-query-url.scss b/integration/__fixtures__/static-site/src/routes/01-assets/_01-import-with-query-url.scss
@@ -0,0 +1,3 @@
+.color-me-green {
+	background-color: green;
+}
diff --git a/...ion/__fixtures__/static-site/src/routes/01-assets/_01-import-with-query-url_expected.html b/...ion/__fixtures__/static-site/src/routes/01-assets/_01-import-with-query-url_expected.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="en" data-path="/01-assets/01-import-with-query-url/">
+  <head>
+    <script type="module" src="/@vite/client"></script>
+
+    <meta charset="UTF-8" />
+    <title>Document - With sibling assets</title>
+
+    <!-- PAGE ASSETS -->
+
+    <!-- /PAGE ASSETS -->
+  </head>
+
+  <body>
+    <!--lit-part bil8q8FGnEw=-->
+    <h1>Hello world</h1>
+    <hr />
+    <code
+      ><!--lit-part-->/01-assets/01-import-with-query-url/<!--/lit-part--></code
+    >
+
+    <!-- FIXME: Why it's putting /@fs/ and not /src/ ? -->
+    <!--lit-node 5--><my-el
+      extra-styles="/@fs/_00-import-with-query-url--server-2.scss"
+      ><template shadowroot="open" shadowrootmode="open"
+        ><style>
+          :host {
+            display: block;
+          }</style
+        ><!--lit-part +EMEfM/KnnU=-->
+        <!--  -->
+        <!--lit-node 1--><link
+          rel="stylesheet"
+          href="/@fs/_00-import-with-query-url.scss"
+        />
+
+        <!--lit-part-->/@fs/_00-import-with-query-url--server-2.scss<!--/lit-part-->
+        <!--lit-part--><!--lit-part F3m906AMGI4=--><!--lit-node 0--><link
+          rel="stylesheet"
+          href="/@fs/_00-import-with-query-url--server-2.scss"
+        /><!--/lit-part--><!--/lit-part-->
+
+        <div class="color-me-red">RED</div>
+        <div class="color-me-green">GREEN</div>
+
+        <!--lit-part lUxCii3QuuI=-->
+        <!--  -->
+        <h2>lion</h2>
+
+        <!--lit-node 2--><button>CLICK ME</button
+        ><!--/lit-part-->
+        <!--/lit-part--></template
+      ></my-el
+    >
+    <!--/lit-part-->
+  </body>
+</html>
diff --git a/integration/src/assets.test.ts b/integration/src/assets.test.ts
@@ -74,4 +74,23 @@ describe('sibling assets', async () => {
 	});
 });
 
+// TODO: This test need a bit more work, notably for hydration
+describe('assets with query url', async () => {
+	const route = '01-import-with-query-url';
+
+	await tryOrClose(async () => {
+		await it('render the route with links stylesheets', async () => {
+			await snapshotAssertEqual({
+				expectedPath: [
+					projectRoutes,
+					currentTestRoutes,
+					`_${route}_expected.html`,
+				],
+				actualContent: await fetchResource([address, currentTestRoutes, route]),
+				writeActual: false,
+			});
+		});
+	});
+});
+
 after(async () => close());
diff --git a/packages/engine/src/vite/build.ts b/packages/engine/src/vite/build.ts
@@ -144,7 +144,8 @@ export async function viteBuild(root = process.cwd()) {
 										);
 									}),
 								);
-								await rm(`${root}/dist/server/assets`, { recursive: true });
+								// NOTE: Disabled for now, because it conflict with test's folder comparer
+								// await rm(`${root}/dist/server/assets`, { recursive: true });
 							},
 						},
 					],