@stencil/dev-server 5.0.0-alpha.3 → 5.0.0-alpha.5

package/dist/client/index.js

@@ -507,6 +507,7 @@ const hmrInlineStylesTraverse = (elm, versionId, trackers) => {
 	if (hasShadowRoot(elm)) hmrInlineStylesTraverse(elm.shadowRoot, versionId, trackers);
 	if (elm.children) for (let i = 0; i < elm.children.length; i++) hmrInlineStylesTraverse(elm.children[i], versionId, trackers);
 };
+const SLOT_FB_CSS = "slot-fb{display:contents}slot-fb[hidden]{display:none}";
 /**
 * Update or remove a style element based on the HMR update.
 * @param elm - the style element to update
@@ -517,7 +518,8 @@ const hmrInlineStylesTraverse = (elm, versionId, trackers) => {
 const hmrStyleElement = (elm, versionId, stylesUpdated) => {
 	if (elm.getAttribute(STYLE_ID_ATTR) === stylesUpdated.styleId) {
 		if (stylesUpdated.styleText) {
-			elm.innerHTML = stylesUpdated.styleText.replace(/\\n/g, "\n");
+			const slotFbSuffix = elm.hasAttribute("data-slot-fb") ? SLOT_FB_CSS : "";
+			elm.innerHTML = stylesUpdated.styleText.replace(/\\n/g, "\n") + slotFbSuffix;
 			elm.setAttribute("data-hmr", versionId);
 		} else elm.remove();
 		return true;

package/dist/index.mjs

@@ -519,10 +519,10 @@ async function ssrPageRequest(devServerConfig, serverCtx, req, res) {
 	try {
 		let status = 500;
 		let content = "";
-		const { hydrateApp, srcIndexHtml, diagnostics } = await setupHydrateApp(devServerConfig, serverCtx);
+		const { ssrApp, srcIndexHtml, diagnostics } = await setupHydrateApp(devServerConfig, serverCtx);
 		if (!diagnostics.some((diagnostic) => diagnostic.level === "error")) try {
 			const opts = getSsrHydrateOptions(devServerConfig, serverCtx, req.url);
-			const ssrResults = await hydrateApp.renderToString(srcIndexHtml, opts);
+			const ssrResults = await ssrApp.renderToString(srcIndexHtml, opts);
 			diagnostics.push(...ssrResults.diagnostics);
 			status = ssrResults.httpStatus ?? 500;
 			content = ssrResults.html ?? "";
@@ -549,11 +549,11 @@ async function ssrStaticDataRequest(devServerConfig, serverCtx, req, res) {
 	try {
 		const data = {};
 		let httpCache = false;
-		const { hydrateApp, srcIndexHtml, diagnostics } = await setupHydrateApp(devServerConfig, serverCtx);
+		const { ssrApp, srcIndexHtml, diagnostics } = await setupHydrateApp(devServerConfig, serverCtx);
 		if (!diagnostics.some((diagnostic) => diagnostic.level === "error")) try {
 			const { ssrPath, hasQueryString } = getSsrStaticDataPath(req);
 			const opts = getSsrHydrateOptions(devServerConfig, serverCtx, new URL(ssrPath, req.url));
-			const ssrResults = await hydrateApp.renderToString(srcIndexHtml, opts);
+			const ssrResults = await ssrApp.renderToString(srcIndexHtml, opts);
 			diagnostics.push(...ssrResults.diagnostics);
 			ssrResults.staticData.forEach((s) => {
 				if (s.type === "application/json") data[s.id] = JSON.parse(s.content);
@@ -580,7 +580,7 @@ async function ssrStaticDataRequest(devServerConfig, serverCtx, req, res) {
 }
 async function setupHydrateApp(devServerConfig, serverCtx) {
 	let srcIndexHtml = null;
-	let hydrateApp = null;
+	let ssrApp = null;
 	const buildResults = await serverCtx.getBuildResults();
 	const diagnostics = [];
 	if (serverCtx.prerenderConfig == null && isString(devServerConfig.prerenderConfig)) try {
@@ -590,8 +590,8 @@ async function setupHydrateApp(devServerConfig, serverCtx) {
 	} catch (e) {
 		catchError(diagnostics, e);
 	}
-	if (!isString(buildResults.hydrateAppFilePath)) diagnostics.push({
-		messageText: "Missing hydrateAppFilePath",
+	if (!isString(buildResults.ssrAppFilePath)) diagnostics.push({
+		messageText: "Missing ssrAppFilePath",
 		level: "error",
 		type: "ssr",
 		lines: []
@@ -611,19 +611,19 @@ async function setupHydrateApp(devServerConfig, serverCtx) {
 			type: "ssr"
 		});
 		else {
-			const hydrateAppFilePath = path.resolve(buildResults.hydrateAppFilePath);
+			const ssrAppFilePath = path.resolve(buildResults.ssrAppFilePath);
 			try {
-				const hydrateUrl = pathToFileURL(hydrateAppFilePath);
+				const hydrateUrl = pathToFileURL(ssrAppFilePath);
 				hydrateUrl.search = `?t=${Date.now()}`;
 				const hydrateModule = await import(hydrateUrl.href);
-				hydrateApp = hydrateModule.default || hydrateModule;
+				ssrApp = hydrateModule.default || hydrateModule;
 			} catch (e) {
 				catchError(diagnostics, e);
 			}
 		}
 	}
 	return {
-		hydrateApp,
+		ssrApp,
 		srcIndexHtml,
 		diagnostics
 	};
@@ -643,14 +643,14 @@ function getSsrHydrateOptions(devServerConfig, serverCtx, url) {
 		prettyHtml: true
 	};
 	const prerenderConfig = serverCtx?.prerenderConfig;
-	if (isFunction(prerenderConfig?.hydrateOptions)) {
-		const userOpts = prerenderConfig.hydrateOptions(url);
+	if (isFunction(prerenderConfig?.prerenderOptions)) {
+		const userOpts = prerenderConfig.prerenderOptions(url);
 		if (userOpts) Object.assign(opts, userOpts);
 	}
 	if (isFunction(serverCtx.sys.applyPrerenderGlobalPatch)) {
-		const orgBeforeHydrate = opts.beforeHydrate;
+		const orgBeforeHydrate = opts.beforeSsr;
 		const applyPatch = serverCtx.sys.applyPrerenderGlobalPatch;
-		opts.beforeHydrate = (document) => {
+		opts.beforeSsr = (document) => {
 			const devServerHostUrl = new URL(devServerConfig.browserUrl).origin;
 			applyPatch({
 				devServerHostUrl,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/dev-server",
-  "version": "5.0.0-alpha.3",
+  "version": "5.0.0-alpha.5",
   "description": "Development server for Stencil with DOM-based HMR",
   "keywords": [
     "dev server",
@@ -42,11 +42,11 @@
   "devDependencies": {
     "@tsdown/css": "^0.21.6",
     "@types/ws": "^8.0.0",
-    "tsdown": "^0.21.6",
-    "typescript": "~6.0.2",
+    "tsdown": "^0.21.7",
+    "typescript": ">4.0.0",
     "vitest": "^4.1.1",
-    "vitest-environment-stencil": "^1.10.0",
-    "@stencil/core": "5.0.0-alpha.3"
+    "vitest-environment-stencil": "^1.11.6",
+    "@stencil/core": "5.0.0-alpha.5"
   },
   "peerDependencies": {
     "@stencil/core": "^5.0.0-0"