astro 1.0.0-beta.72 → 1.0.0-beta.73

package/astro-jsx.d.ts

@@ -10,7 +10,6 @@
  * @see https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts
  */
 declare namespace astroHTML.JSX {
-	/* html jsx */
 	export type Child = Node | Node[] | string | number | boolean | null | undefined | unknown;
 	export type Children = Child | Child[];
 
@@ -24,17 +23,18 @@ declare namespace astroHTML.JSX {
 		children?: Children;
 	}
 
-	type AstroBuiltinProps = import('astro').AstroBuiltinProps;
-	type AstroBuiltinAttributes = import('astro').AstroBuiltinAttributes;
-	type AstroDefineVarsAttribute = import('astro').AstroDefineVarsAttribute;
-	type AstroScriptAttributes = import('astro').AstroScriptAttributes & AstroDefineVarsAttribute;
-	type AstroStyleAttributes = import('astro').AstroStyleAttributes & AstroDefineVarsAttribute;
-
-	// Certain Astro methods returns AstroComponent using AstroComponentFactory
-	// The language-server does not really like this because it expects Elements to
-	// all be compatible with HTMLElement so we'll add AstroComponentFactory as a valid element type
-	type AstroComponent = import('astro').AstroComponentFactory;
-	type Element = HTMLElement | AstroComponent;
+	type AstroBuiltinProps = import('./dist/types/@types/astro').AstroBuiltinProps;
+	type AstroBuiltinAttributes = import('./dist/types/@types/astro').AstroBuiltinAttributes;
+	type AstroDefineVarsAttribute = import('./dist/types/@types/astro').AstroDefineVarsAttribute;
+	type AstroScriptAttributes = import('./dist/types/@types/astro').AstroScriptAttributes &
+		AstroDefineVarsAttribute;
+	type AstroStyleAttributes = import('./dist/types/@types/astro').AstroStyleAttributes &
+		AstroDefineVarsAttribute;
+
+	// This is an unfortunate use of `any`, but unfortunately we can't make a type that works for every framework
+	// without importing every single framework's types (which comes with its own set of problems).
+	// Using any isn't that bad here however as in Astro files the return type of a component isn't relevant in most cases
+	type Element = HTMLElement | any;
 
 	interface DOMAttributes {
 		children?: Children;

package/astro.js

@@ -50,7 +50,7 @@ async function main() {
 	// it's okay to hard-code the valid Node versions here since they will not change over time.
 	if (typeof require === 'undefined') {
 		console.error(`\nNode.js v${version} is not supported by Astro!
-Please upgrade to a version of Node.js with complete ESM support: "^14.20.0 || >=16.14.0"\n`);
+Please upgrade to a version of Node.js with complete ESM support: "^14.18.0 || >=16.12.0"\n`);
 	}
 
 	// Not supported: Report the most helpful error message possible.

package/components/Code.astro

@@ -36,8 +36,8 @@ const { code, lang = 'plaintext', theme = 'github-dark', wrap = false } = Astro.
 
 /** Replace the shiki class name with a custom astro class name. */
 function repairShikiTheme(html: string): string {
-	// Replace "shiki" class naming with "astro" and add "is:raw".
-	html = html.replace('<pre class="shiki"', '<pre is:raw class="astro-code"');
+	// Replace "shiki" class naming with "astro"
+	html = html.replace('<pre class="shiki"', '<pre class="astro-code"');
 	// Replace "shiki" css variable naming with "astro".
 	html = html.replace(/style="(background-)?color: var\(--shiki-/g, 'style="$1color: var(--astro-code-');
 	// Handle code wrapping

package/components/Debug.astro

@@ -5,48 +5,48 @@ const key = Object.keys(Astro.props)[0];
 const value = Astro.props[key];
 ---
 
-<div class="debug">
-	<div class="debug-header">
-		<h2 class="debug-title"><span class="debug-label">Debug</span> <span class="debug-name">"{key}"</span></h2>
+<div class="astro-debug">
+	<div class="astro-debug-header">
+		<h2 class="astro-debug-title"><span class="astro-debug-label">Debug</span> <span class="astro-debug-name">"{key}"</span></h2>
 	</div>
 
 	<Code code={JSON.stringify(value, null, 2)} />
 </div>
 
-<style>
-	.debug {
+<style is:inline>
+	.astro-debug {
 		font-size: 14px;
 		padding: 1rem 1.5rem;
 		background: white;
 		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 	}
 
-	.debug-header,
-	pre {
+	.astro-debug-header,
+	pre.astro-code {
 		margin: -1rem -1.5rem 1rem;
 		padding: 0.25rem 0.75rem;
 	}
 
-	.debug-header {
+	.astro-debug-header {
 		background: #ff1639;
 		border-radius: 4px;
 		border-bottom-left-radius: 0;
 		border-bottom-right-radius: 0;
 	}
 
-	.debug-title {
+	.astro-debug-title {
 		font-size: 1em;
 		color: white;
 		margin: 0.5em 0;
 	}
 
-	.debug-label {
+	.astro-debug-label {
 		font-weight: bold;
 		text-transform: uppercase;
 		margin-right: 0.75em;
 	}
 
-	pre {
+	pre.astro-code {
 		border: 1px solid #eee;
 		padding: 1rem 0.75rem;
 		border-radius: 4px;

package/dist/cli/check/index.js

@@ -0,0 +1,68 @@
+import { AstroCheck, DiagnosticSeverity } from "@astrojs/language-server";
+import glob from "fast-glob";
+import * as fs from "fs";
+import { bold, dim, red, yellow } from "kleur/colors";
+import ora from "ora";
+import { fileURLToPath, pathToFileURL } from "url";
+import { printDiagnostic } from "./print.js";
+async function check(astroConfig) {
+  console.log(bold("astro check"));
+  const root = astroConfig.root;
+  const spinner = ora(` Getting diagnostics for Astro files in ${fileURLToPath(root)}\u2026`).start();
+  let checker = new AstroCheck(root.toString());
+  const filesCount = await openAllDocuments(root, [], checker);
+  let diagnostics = await checker.getDiagnostics();
+  spinner.succeed();
+  let result = {
+    errors: 0,
+    warnings: 0,
+    hints: 0
+  };
+  diagnostics.forEach((diag) => {
+    diag.diagnostics.forEach((d) => {
+      console.log(printDiagnostic(diag.filePath, diag.text, d));
+      switch (d.severity) {
+        case DiagnosticSeverity.Error: {
+          result.errors++;
+          break;
+        }
+        case DiagnosticSeverity.Warning: {
+          result.warnings++;
+          break;
+        }
+        case DiagnosticSeverity.Hint: {
+          result.hints++;
+          break;
+        }
+      }
+    });
+  });
+  console.log([
+    bold(`Result (${filesCount} file${filesCount === 1 ? "" : "s"}): `),
+    bold(red(`${result.errors} ${result.errors === 1 ? "error" : "errors"}`)),
+    bold(yellow(`${result.warnings} ${result.warnings === 1 ? "warning" : "warnings"}`)),
+    dim(`${result.hints} ${result.hints === 1 ? "hint" : "hints"}
+`)
+  ].join(`
+${dim("-")} `));
+  const exitCode = result.errors ? 1 : 0;
+  return exitCode;
+}
+async function openAllDocuments(workspaceUri, filePathsToIgnore, checker) {
+  const files = await glob("**/*.astro", {
+    cwd: fileURLToPath(workspaceUri),
+    ignore: ["node_modules/**"].concat(filePathsToIgnore.map((ignore) => `${ignore}/**`)),
+    absolute: true
+  });
+  for (const file of files) {
+    const text = fs.readFileSync(file, "utf-8");
+    checker.upsertDocument({
+      uri: pathToFileURL(file).toString(),
+      text
+    });
+  }
+  return files.length;
+}
+export {
+  check
+};

package/dist/cli/check/print.js

@@ -0,0 +1,87 @@
+import { DiagnosticSeverity, offsetAt } from "@astrojs/language-server";
+import {
+  bgRed,
+  bgWhite,
+  bgYellow,
+  black,
+  bold,
+  cyan,
+  gray,
+  red,
+  white,
+  yellow
+} from "kleur/colors";
+import stringWidth from "string-width";
+function printDiagnostic(filePath, text, diag) {
+  let result = [];
+  const realStartLine = diag.range.start.line + 1;
+  const realStartCharacter = diag.range.start.character + 1;
+  const IDEFilePath = `${bold(cyan(filePath))}:${bold(yellow(realStartLine))}:${bold(yellow(realStartCharacter))}`;
+  result.push(`${IDEFilePath} ${bold(getColorForSeverity(diag, getStringForSeverity(diag)))}: ${diag.message}`);
+  const previousLine = getLine(diag.range.start.line - 1, text);
+  if (previousLine) {
+    result.push(`${getPrintableLineNumber(realStartLine - 1)}  ${gray(previousLine)}`);
+  }
+  const str = getLine(diag.range.start.line, text);
+  const lineNumStr = realStartLine.toString().padStart(2, "0");
+  const lineNumLen = lineNumStr.length;
+  result.push(`${getBackgroundForSeverity(diag, lineNumStr)}  ${str}`);
+  const tildes = generateString("~", diag.range.end.character - diag.range.start.character);
+  const beforeChars = stringWidth(str.substring(0, diag.range.start.character));
+  const spaces = generateString(" ", beforeChars + lineNumLen - 1);
+  result.push(`   ${spaces}${bold(getColorForSeverity(diag, tildes))}`);
+  const nextLine = getLine(diag.range.start.line + 1, text);
+  if (nextLine) {
+    result.push(`${getPrintableLineNumber(realStartLine + 1)}  ${gray(nextLine)}`);
+  }
+  result.push("");
+  return result.join("\n");
+}
+function generateString(str, len) {
+  return Array.from({ length: len }, () => str).join("");
+}
+function getStringForSeverity(diag) {
+  switch (diag.severity) {
+    case DiagnosticSeverity.Error:
+      return "Error";
+    case DiagnosticSeverity.Warning:
+      return "Warning";
+    case DiagnosticSeverity.Hint:
+      return "Hint";
+    default:
+      return "Unknown";
+  }
+}
+function getColorForSeverity(diag, text) {
+  switch (diag.severity) {
+    case DiagnosticSeverity.Error:
+      return red(text);
+    case DiagnosticSeverity.Warning:
+      return yellow(text);
+    case DiagnosticSeverity.Hint:
+      return gray(text);
+    default:
+      return text;
+  }
+}
+function getBackgroundForSeverity(diag, text) {
+  switch (diag.severity) {
+    case DiagnosticSeverity.Error:
+      return bgRed(white(text));
+    case DiagnosticSeverity.Warning:
+      return bgYellow(white(text));
+    case DiagnosticSeverity.Hint:
+      return bgWhite(black(text));
+    default:
+      return text;
+  }
+}
+function getPrintableLineNumber(line) {
+  return bgWhite(black(line.toString().padStart(2, "0")));
+}
+function getLine(line, text) {
+  return text.substring(offsetAt({ line, character: 0 }, text), offsetAt({ line, character: Number.MAX_SAFE_INTEGER }, text)).replace(/\t/g, " ").trimEnd();
+}
+export {
+  printDiagnostic
+};

package/dist/cli/index.js

@@ -13,7 +13,7 @@ import preview from "../core/preview/index.js";
 import { ASTRO_VERSION, createSafeError } from "../core/util.js";
 import * as event from "../events/index.js";
 import { eventConfigError, eventError, telemetry } from "../events/index.js";
-import { check } from "./check.js";
+import { check } from "./check/index.js";
 import { openInBrowser } from "./open.js";
 import * as telemetryHandler from "./telemetry.js";
 function printAstroHelp() {

package/dist/core/dev/index.js

@@ -47,7 +47,7 @@ async function dev(config, options) {
     site,
     https: !!((_a = viteConfig.server) == null ? void 0 : _a.https)
   }));
-  const currentVersion = "1.0.0-beta.72";
+  const currentVersion = "1.0.0-beta.73";
   if (currentVersion.includes("-")) {
     warn(options.logging, null, msg.prerelease({ currentVersion }));
   }

package/dist/core/messages.js

@@ -47,7 +47,7 @@ function devStart({
   https,
   site
 }) {
-  const version = "1.0.0-beta.72";
+  const version = "1.0.0-beta.73";
   const rootPath = site ? site.pathname : "/";
   const localPrefix = `${dim("\u2503")} Local    `;
   const networkPrefix = `${dim("\u2503")} Network  `;
@@ -206,7 +206,7 @@ function printHelp({
   };
   let message = [];
   if (headline) {
-    message.push(linebreak(), `  ${bgGreen(black(` ${commandName} `))} ${green(`v${"1.0.0-beta.72"}`)} ${headline}`);
+    message.push(linebreak(), `  ${bgGreen(black(` ${commandName} `))} ${green(`v${"1.0.0-beta.73"}`)} ${headline}`);
   }
   if (usage) {
     message.push(linebreak(), `  ${green(commandName)} ${bold(usage)}`);

package/dist/core/render/dev/css.js

@@ -1,48 +1,21 @@
 import path from "path";
-import { unwrapId, viteID } from "../../util.js";
+import { viteID } from "../../util.js";
 import { STYLE_EXTENSIONS } from "../util.js";
-const fileExtensionsToSSR = /* @__PURE__ */ new Set([".md"]);
+import { crawlGraph } from "./vite.js";
 async function getStylesForURL(filePath, viteServer, mode) {
+  var _a;
   const importedCssUrls = /* @__PURE__ */ new Set();
   const importedStylesMap = /* @__PURE__ */ new Map();
-  async function crawlCSS(_id, isFile, scanned = /* @__PURE__ */ new Set()) {
-    var _a;
-    const id = unwrapId(_id);
-    const importedModules = /* @__PURE__ */ new Set();
-    const moduleEntriesForId = isFile ? viteServer.moduleGraph.getModulesByFile(id) ?? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([viteServer.moduleGraph.getModuleById(id)]);
-    for (const entry of moduleEntriesForId) {
-      if (!entry) {
-        continue;
+  for await (const importedModule of crawlGraph(viteServer, viteID(filePath), true)) {
+    const ext = path.extname(importedModule.url).toLowerCase();
+    if (STYLE_EXTENSIONS.has(ext)) {
+      if (mode === "development" && typeof ((_a = importedModule.ssrModule) == null ? void 0 : _a.default) === "string") {
+        importedStylesMap.set(importedModule.url, importedModule.ssrModule.default);
+      } else {
+        importedCssUrls.add(importedModule.url);
       }
-      if (id === entry.id) {
-        scanned.add(id);
-        for (const importedModule of entry.importedModules) {
-          if (importedModule.id) {
-            const { pathname } = new URL(`file://${importedModule.id}`);
-            if (fileExtensionsToSSR.has(path.extname(pathname))) {
-              await viteServer.ssrLoadModule(importedModule.id);
-            }
-          }
-          importedModules.add(importedModule);
-        }
-      }
-    }
-    for (const importedModule of importedModules) {
-      if (!importedModule.id || scanned.has(importedModule.id)) {
-        continue;
-      }
-      const ext = path.extname(importedModule.url).toLowerCase();
-      if (STYLE_EXTENSIONS.has(ext)) {
-        if (mode === "development" && typeof ((_a = importedModule.ssrModule) == null ? void 0 : _a.default) === "string") {
-          importedStylesMap.set(importedModule.url, importedModule.ssrModule.default);
-        } else {
-          importedCssUrls.add(importedModule.url);
-        }
-      }
-      await crawlCSS(importedModule.id, false, scanned);
     }
   }
-  await crawlCSS(viteID(filePath), true);
   return {
     urls: importedCssUrls,
     stylesMap: importedStylesMap

package/dist/core/render/dev/index.js

@@ -2,10 +2,10 @@ import { fileURLToPath } from "url";
 import { prependForwardSlash } from "../../../core/path.js";
 import { isBuildingToSSR, isPage } from "../../util.js";
 import { render as coreRender } from "../core.js";
-import { createModuleScriptElementWithSrcSet } from "../ssr-element.js";
 import { collectMdMetadata } from "../util.js";
 import { getStylesForURL } from "./css.js";
 import { resolveClientDevPath } from "./resolve.js";
+import { getScriptsForURL } from "./scripts.js";
 const svelteStylesRE = /svelte\?svelte&type=style/;
 async function loadRenderer(viteServer, renderer) {
   var _a;
@@ -45,7 +45,7 @@ async function render(renderers, mod, ssrOpts) {
     routeCache,
     viteServer
   } = ssrOpts;
-  const scripts = createModuleScriptElementWithSrcSet(mod.hasOwnProperty("$$metadata") ? Array.from(mod.$$metadata.hoistedScriptPaths()) : []);
+  const scripts = await getScriptsForURL(filePath, astroConfig, viteServer);
   if (isPage(filePath, astroConfig) && mode === "development") {
     scripts.add({
       props: { type: "module", src: "/@vite/client" },

package/dist/core/render/dev/scripts.js

@@ -0,0 +1,36 @@
+import slash from "slash";
+import { fileURLToPath } from "url";
+import { viteID } from "../../util.js";
+import { createModuleScriptElementWithSrc } from "../ssr-element.js";
+import { crawlGraph } from "./vite.js";
+async function getScriptsForURL(filePath, astroConfig, viteServer) {
+  const elements = /* @__PURE__ */ new Set();
+  const rootID = viteID(filePath);
+  let rootProjectFolder = slash(fileURLToPath(astroConfig.root));
+  const modInfo = viteServer.pluginContainer.getModuleInfo(rootID);
+  addHoistedScripts(elements, modInfo, rootProjectFolder);
+  for await (const moduleNode of crawlGraph(viteServer, rootID, true)) {
+    const id = moduleNode.id;
+    if (id) {
+      const info = viteServer.pluginContainer.getModuleInfo(id);
+      addHoistedScripts(elements, info, rootProjectFolder);
+    }
+  }
+  return elements;
+}
+function addHoistedScripts(set, info, rootProjectFolder) {
+  var _a, _b;
+  if (!((_a = info == null ? void 0 : info.meta) == null ? void 0 : _a.astro)) {
+    return;
+  }
+  let id = info.id;
+  const astro = (_b = info == null ? void 0 : info.meta) == null ? void 0 : _b.astro;
+  for (let i = 0; i < astro.scripts.length; i++) {
+    const scriptId = `${id}?astro&type=script&index=${i}&lang.ts`;
+    const element = createModuleScriptElementWithSrc(scriptId);
+    set.add(element);
+  }
+}
+export {
+  getScriptsForURL
+};

package/dist/core/render/dev/vite.js

@@ -0,0 +1,38 @@
+import npath from "path";
+import { unwrapId } from "../../util.js";
+const fileExtensionsToSSR = /* @__PURE__ */ new Set([".astro", ".md"]);
+async function* crawlGraph(viteServer, _id, isFile, scanned = /* @__PURE__ */ new Set()) {
+  const id = unwrapId(_id);
+  const importedModules = /* @__PURE__ */ new Set();
+  const moduleEntriesForId = isFile ? viteServer.moduleGraph.getModulesByFile(id) ?? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([viteServer.moduleGraph.getModuleById(id)]);
+  for (const entry of moduleEntriesForId) {
+    if (!entry) {
+      continue;
+    }
+    if (id === entry.id) {
+      scanned.add(id);
+      for (const importedModule of entry.importedModules) {
+        if (importedModule.id) {
+          const { pathname } = new URL(`file://${importedModule.id}`);
+          if (fileExtensionsToSSR.has(npath.extname(pathname))) {
+            const mod = viteServer.moduleGraph.getModuleById(importedModule.id);
+            if (!(mod == null ? void 0 : mod.ssrModule)) {
+              await viteServer.ssrLoadModule(importedModule.id);
+            }
+          }
+        }
+        importedModules.add(importedModule);
+      }
+    }
+  }
+  for (const importedModule of importedModules) {
+    if (!importedModule.id || scanned.has(importedModule.id)) {
+      continue;
+    }
+    yield importedModule;
+    yield* crawlGraph(viteServer, importedModule.id, false, scanned);
+  }
+}
+export {
+  crawlGraph
+};

package/dist/core/util.js

@@ -5,7 +5,7 @@ import resolve from "resolve";
 import slash from "slash";
 import { fileURLToPath, pathToFileURL } from "url";
 import { removeTrailingForwardSlash } from "./path.js";
-const ASTRO_VERSION = "1.0.0-beta.72";
+const ASTRO_VERSION = "1.0.0-beta.73";
 function isObject(value) {
   return typeof value === "object" && value != null;
 }

package/dist/jsx/babel.js

@@ -1,4 +1,6 @@
 import * as t from "@babel/types";
+import { pathToFileURL } from "node:url";
+import { ClientOnlyPlaceholder } from "../runtime/server/index.js";
 function isComponent(tagName) {
   return tagName[0] && tagName[0].toLowerCase() !== tagName[0] || tagName.includes(".") || /[^a-zA-Z]/.test(tagName[0]);
 }
@@ -10,6 +12,14 @@ function hasClientDirective(node) {
   }
   return false;
 }
+function isClientOnlyComponent(node) {
+  for (const attr of node.openingElement.attributes) {
+    if (attr.type === "JSXAttribute" && attr.name.type === "JSXNamespacedName") {
+      return jsxAttributeToString(attr) === "client:only";
+    }
+  }
+  return false;
+}
 function getTagName(tag) {
   const jsxName = tag.openingElement.name;
   return jsxElementNameToString(jsxName);
@@ -32,10 +42,34 @@ function jsxAttributeToString(attr) {
 function addClientMetadata(node, meta) {
   const existingAttributes = node.openingElement.attributes.map((attr) => t.isJSXAttribute(attr) ? jsxAttributeToString(attr) : null);
   if (!existingAttributes.find((attr) => attr === "client:component-path")) {
-    const componentPath = t.jsxAttribute(t.jsxNamespacedName(t.jsxIdentifier("client"), t.jsxIdentifier("component-path")), !meta.path.startsWith(".") ? t.stringLiteral(meta.path) : t.jsxExpressionContainer(t.binaryExpression("+", t.stringLiteral("/@fs"), t.memberExpression(t.newExpression(t.identifier("URL"), [
-      t.stringLiteral(meta.path),
-      t.identifier("import.meta.url")
-    ]), t.identifier("pathname")))));
+    const componentPath = t.jsxAttribute(t.jsxNamespacedName(t.jsxIdentifier("client"), t.jsxIdentifier("component-path")), t.stringLiteral(meta.resolvedPath));
+    node.openingElement.attributes.push(componentPath);
+  }
+  if (!existingAttributes.find((attr) => attr === "client:component-export")) {
+    if (meta.name === "*") {
+      meta.name = getTagName(node).split(".").at(1);
+    }
+    const componentExport = t.jsxAttribute(t.jsxNamespacedName(t.jsxIdentifier("client"), t.jsxIdentifier("component-export")), t.stringLiteral(meta.name));
+    node.openingElement.attributes.push(componentExport);
+  }
+  if (!existingAttributes.find((attr) => attr === "client:component-hydration")) {
+    const staticMarker = t.jsxAttribute(t.jsxNamespacedName(t.jsxIdentifier("client"), t.jsxIdentifier("component-hydration")));
+    node.openingElement.attributes.push(staticMarker);
+  }
+}
+function addClientOnlyMetadata(node, meta) {
+  const tagName = getTagName(node);
+  node.openingElement = t.jsxOpeningElement(t.jsxIdentifier(ClientOnlyPlaceholder), node.openingElement.attributes);
+  if (node.closingElement) {
+    node.closingElement = t.jsxClosingElement(t.jsxIdentifier(ClientOnlyPlaceholder));
+  }
+  const existingAttributes = node.openingElement.attributes.map((attr) => t.isJSXAttribute(attr) ? jsxAttributeToString(attr) : null);
+  if (!existingAttributes.find((attr) => attr === "client:display-name")) {
+    const displayName = t.jsxAttribute(t.jsxNamespacedName(t.jsxIdentifier("client"), t.jsxIdentifier("display-name")), t.stringLiteral(tagName));
+    node.openingElement.attributes.push(displayName);
+  }
+  if (!existingAttributes.find((attr) => attr === "client:component-path")) {
+    const componentPath = t.jsxAttribute(t.jsxNamespacedName(t.jsxIdentifier("client"), t.jsxIdentifier("component-path")), t.stringLiteral(meta.resolvedPath));
     node.openingElement.attributes.push(componentPath);
   }
   if (!existingAttributes.find((attr) => attr === "client:component-export")) {
@@ -53,8 +87,17 @@ function addClientMetadata(node, meta) {
 function astroJSX() {
   return {
     visitor: {
-      Program(path) {
-        path.node.body.splice(0, 0, t.importDeclaration([t.importSpecifier(t.identifier("Fragment"), t.identifier("Fragment"))], t.stringLiteral("astro/jsx-runtime")));
+      Program: {
+        enter(path, state) {
+          if (!state.file.metadata.astro) {
+            state.file.metadata.astro = {
+              clientOnlyComponents: [],
+              hydratedComponents: [],
+              scripts: []
+            };
+          }
+          path.node.body.splice(0, 0, t.importDeclaration([t.importSpecifier(t.identifier("Fragment"), t.identifier("Fragment"))], t.stringLiteral("astro/jsx-runtime")));
+        }
       },
       ImportDeclaration(path, state) {
         const source = path.node.source.value;
@@ -92,8 +135,11 @@ function astroJSX() {
           return;
         if (!hasClientDirective(parentNode))
           return;
+        const isClientOnly = isClientOnlyComponent(parentNode);
+        if (tagName === ClientOnlyPlaceholder)
+          return;
         const imports = state.get("imports") ?? /* @__PURE__ */ new Map();
-        const namespace = getTagName(parentNode).split(".");
+        const namespace = tagName.split(".");
         for (const [source, specs] of imports) {
           for (const { imported, local } of specs) {
             const reference = path.referencesImport(source, imported);
@@ -109,7 +155,33 @@ function astroJSX() {
         }
         const meta = path.getData("import");
         if (meta) {
-          addClientMetadata(parentNode, meta);
+          let resolvedPath;
+          if (meta.path.startsWith(".")) {
+            const fileURL = pathToFileURL(state.filename);
+            resolvedPath = `/@fs${new URL(meta.path, fileURL).pathname}`;
+            if (resolvedPath.endsWith(".jsx")) {
+              resolvedPath = resolvedPath.slice(0, -4);
+            }
+          } else {
+            resolvedPath = meta.path;
+          }
+          if (isClientOnly) {
+            state.file.metadata.astro.clientOnlyComponents.push({
+              exportName: meta.name,
+              specifier: meta.name,
+              resolvedPath
+            });
+            meta.resolvedPath = resolvedPath;
+            addClientOnlyMetadata(parentNode, meta);
+          } else {
+            state.file.metadata.astro.hydratedComponents.push({
+              exportName: meta.name,
+              specifier: meta.name,
+              resolvedPath
+            });
+            meta.resolvedPath = resolvedPath;
+            addClientMetadata(parentNode, meta);
+          }
         } else {
           throw new Error(`Unable to match <${getTagName(parentNode)}> with client:* directive to an import statement!`);
         }

package/dist/jsx/server.js

@@ -23,11 +23,8 @@ async function renderToStaticMarkup(Component, props = {}, { default: children =
     slots[name] = value;
   }
   const { result } = this;
-  try {
-    const html = await renderJSX(result, jsx(Component, { ...props, ...slots, children }));
-    return { html };
-  } catch (e) {
-  }
+  const html = await renderJSX(result, jsx(Component, { ...props, ...slots, children }));
+  return { html };
 }
 var server_default = {
   check,

package/dist/runtime/server/hydration.js

@@ -35,6 +35,9 @@ function extractDirectives(inputProps) {
         case "client:component-hydration": {
           break;
         }
+        case "client:display-name": {
+          break;
+        }
         default: {
           extracted.hydration.directive = key.split(":")[1];
           extracted.hydration.value = value;

package/dist/runtime/server/index.js

@@ -93,7 +93,8 @@ function mergeSlots(...slotted) {
   }
   return slots;
 }
-const Fragment = Symbol("Astro.Fragment");
+const Fragment = Symbol.for("astro:fragment");
+const ClientOnlyPlaceholder = "astro-client-only";
 function guessRenderers(componentUrl) {
   const extname = componentUrl == null ? void 0 : componentUrl.split(".").pop();
   switch (extname) {
@@ -546,7 +547,7 @@ function renderHead(result) {
   const styles = Array.from(result.styles).filter(uniqueElements).map((style) => renderElement("style", style));
   result.styles.clear();
   const scripts = Array.from(result.scripts).filter(uniqueElements).map((script, i) => {
-    return renderElement("script", script);
+    return renderElement("script", script, false);
   });
   const links = Array.from(result.links).filter(uniqueElements).map((link) => renderElement("link", link, false));
   return markHTMLString(links.join("\n") + styles.join("\n") + scripts.join("\n"));
@@ -608,6 +609,7 @@ function renderElement(name, { props: _props, children = "" }, shouldEscape = tr
 }
 export {
   AstroComponent,
+  ClientOnlyPlaceholder,
   Fragment,
   HTMLString2 as HTMLString,
   addAttribute,

package/dist/runtime/server/jsx.js

@@ -1,7 +1,7 @@
 import { AstroJSX, isVNode } from "../../jsx-runtime/index.js";
 import {
+  ClientOnlyPlaceholder,
   escapeHTML,
-  Fragment,
   HTMLString,
   markHTMLString,
   renderComponent,
@@ -9,6 +9,9 @@ import {
   spreadAttributes,
   voidElementNames
 } from "./index.js";
+const skipAstroJSXCheck = /* @__PURE__ */ new WeakSet();
+let originalConsoleError;
+let consoleFilterRefs = 0;
 async function renderJSX(result, vnode) {
   switch (true) {
     case vnode instanceof HTMLString:
@@ -17,30 +20,31 @@ async function renderJSX(result, vnode) {
       return markHTMLString(escapeHTML(vnode));
     case (!vnode && vnode !== 0):
       return "";
-    case vnode.type === Fragment:
-      return renderJSX(result, vnode.props.children);
     case Array.isArray(vnode):
       return markHTMLString((await Promise.all(vnode.map((v) => renderJSX(result, v)))).join(""));
-    case vnode.type.isAstroComponentFactory: {
-      let props = {};
-      let slots = {};
-      for (const [key, value] of Object.entries(vnode.props ?? {})) {
-        if (key === "children" || value && typeof value === "object" && value["$$slot"]) {
-          slots[key === "children" ? "default" : key] = () => renderJSX(result, value);
-        } else {
-          props[key] = value;
+  }
+  if (isVNode(vnode)) {
+    switch (true) {
+      case vnode.type === Symbol.for("astro:fragment"):
+        return renderJSX(result, vnode.props.children);
+      case vnode.type.isAstroComponentFactory: {
+        let props = {};
+        let slots = {};
+        for (const [key, value] of Object.entries(vnode.props ?? {})) {
+          if (key === "children" || value && typeof value === "object" && value["$$slot"]) {
+            slots[key === "children" ? "default" : key] = () => renderJSX(result, value);
+          } else {
+            props[key] = value;
+          }
         }
+        return await renderToString(result, vnode.type, props, slots);
       }
-      return await renderToString(result, vnode.type, props, slots);
-    }
-  }
-  if (vnode[AstroJSX]) {
-    if (!vnode.type && vnode.type !== 0)
-      return "";
-    if (typeof vnode.type === "string") {
-      return await renderElement(result, vnode.type, vnode.props ?? {});
+      case (!vnode.type && vnode.type !== 0):
+        return "";
+      case (typeof vnode.type === "string" && vnode.type !== ClientOnlyPlaceholder):
+        return await renderElement(result, vnode.type, vnode.props ?? {});
     }
-    if (!!vnode.type) {
+    if (vnode.type) {
       let extractSlots2 = function(child) {
         if (Array.isArray(child)) {
           return child.map((c) => extractSlots2(c));
@@ -56,14 +60,24 @@ async function renderJSX(result, vnode) {
         slots.default.push(child);
       };
       var extractSlots = extractSlots2;
-      try {
-        const output = await vnode.type(vnode.props ?? {});
-        if (output && output[AstroJSX]) {
-          return await renderJSX(result, output);
-        } else if (!output) {
-          return await renderJSX(result, output);
+      if (typeof vnode.type === "function" && vnode.props["server:root"]) {
+        const output2 = await vnode.type(vnode.props ?? {});
+        return await renderJSX(result, output2);
+      }
+      if (typeof vnode.type === "function" && !skipAstroJSXCheck.has(vnode.type)) {
+        useConsoleFilter();
+        try {
+          const output2 = await vnode.type(vnode.props ?? {});
+          if (output2 && output2[AstroJSX]) {
+            return await renderJSX(result, output2);
+          } else if (!output2) {
+            return await renderJSX(result, output2);
+          }
+        } catch (e) {
+          skipAstroJSXCheck.add(vnode.type);
+        } finally {
+          finishUsingConsoleFilter();
         }
-      } catch (e) {
       }
       const { children = null, ...props } = vnode.props ?? {};
       const slots = {
@@ -73,7 +87,13 @@ async function renderJSX(result, vnode) {
       for (const [key, value] of Object.entries(slots)) {
         slots[key] = () => renderJSX(result, value);
       }
-      return markHTMLString(await renderComponent(result, vnode.type.name, vnode.type, props, slots));
+      let output;
+      if (vnode.type === ClientOnlyPlaceholder && vnode.props["client:only"]) {
+        output = await renderComponent(result, vnode.props["client:display-name"] ?? "", null, props, slots);
+      } else {
+        output = await renderComponent(result, typeof vnode.type === "function" ? vnode.type.name : vnode.type, vnode.type, props, slots);
+      }
+      return markHTMLString(output);
     }
   }
   return markHTMLString(`${vnode}`);
@@ -81,6 +101,26 @@ async function renderJSX(result, vnode) {
 async function renderElement(result, tag, { children, ...props }) {
   return markHTMLString(`<${tag}${spreadAttributes(props)}${markHTMLString((children == null || children == "") && voidElementNames.test(tag) ? `/>` : `>${children == null ? "" : await renderJSX(result, children)}</${tag}>`)}`);
 }
+function useConsoleFilter() {
+  consoleFilterRefs++;
+  if (!originalConsoleError) {
+    originalConsoleError = console.error;
+    try {
+      console.error = filteredConsoleError;
+    } catch (error) {
+    }
+  }
+}
+function finishUsingConsoleFilter() {
+  consoleFilterRefs--;
+}
+function filteredConsoleError(msg, ...rest) {
+  if (consoleFilterRefs > 0 && typeof msg === "string") {
+    const isKnownReactHookError = msg.includes("Warning: Invalid hook call.") && msg.includes("https://reactjs.org/link/invalid-hook-call");
+    if (isKnownReactHookError)
+      return;
+  }
+}
 export {
   renderJSX
 };

package/dist/runtime/server/metadata.js

@@ -26,30 +26,6 @@ class Metadata {
     const metadata = this.getComponentMetadata(Component);
     return (metadata == null ? void 0 : metadata.componentExport) || null;
   }
-  *hoistedScriptPaths() {
-    for (const metadata of this.deepMetadata()) {
-      let i = 0, pathname = metadata.mockURL.pathname;
-      while (i < metadata.hoisted.length) {
-        yield `${pathname.replace("/@fs", "")}?astro&type=script&index=${i}&lang.ts`;
-        i++;
-      }
-    }
-  }
-  *deepMetadata() {
-    yield this;
-    const seen = /* @__PURE__ */ new Set();
-    for (const { module: mod } of this.modules) {
-      if (typeof mod.$$metadata !== "undefined") {
-        const md = mod.$$metadata;
-        for (const childMetdata of md.deepMetadata()) {
-          if (!seen.has(childMetdata)) {
-            seen.add(childMetdata);
-            yield childMetdata;
-          }
-        }
-      }
-    }
-  }
   getComponentMetadata(Component) {
     if (this.metadataCache.has(Component)) {
       return this.metadataCache.get(Component);

package/dist/runtime/server/serialize.js

@@ -26,10 +26,10 @@ function convertToSerializedForm(value) {
       return [PROP_TYPE.RegExp, value.source];
     }
     case "[object Map]": {
-      return [PROP_TYPE.Map, Array.from(value)];
+      return [PROP_TYPE.Map, JSON.stringify(serializeArray(Array.from(value)))];
     }
     case "[object Set]": {
-      return [PROP_TYPE.Set, Array.from(value)];
+      return [PROP_TYPE.Set, JSON.stringify(serializeArray(Array.from(value)))];
     }
     case "[object BigInt]": {
       return [PROP_TYPE.BigInt, value.toString()];

package/dist/types/@types/astro.d.ts

@@ -10,7 +10,6 @@ import type { AstroConfigSchema } from '../core/config';
 import type { ViteConfigWithSSR } from '../core/create-vite';
 import type { AstroComponentFactory, Metadata } from '../runtime/server';
 export type { SSRManifest } from '../core/app/types';
-export type { AstroComponentFactory } from '../runtime/server';
 export interface AstroBuiltinProps {
     'client:load'?: boolean;
     'client:idle'?: boolean;

package/dist/types/cli/check/index.d.ts

@@ -0,0 +1,2 @@
+import type { AstroConfig } from '../../@types/astro';
+export declare function check(astroConfig: AstroConfig): Promise<0 | 1>;

package/dist/types/cli/check/print.d.ts

@@ -0,0 +1,2 @@
+import { Diagnostic } from '@astrojs/language-server';
+export declare function printDiagnostic(filePath: string, text: string, diag: Diagnostic): string;

package/dist/types/core/render/dev/scripts.d.ts

@@ -0,0 +1,3 @@
+import vite from 'vite';
+import type { AstroConfig, SSRElement } from '../../../@types/astro';
+export declare function getScriptsForURL(filePath: URL, astroConfig: AstroConfig, viteServer: vite.ViteDevServer): Promise<Set<SSRElement>>;

package/dist/types/core/render/dev/vite.d.ts

@@ -0,0 +1,3 @@
+import vite from 'vite';
+/** recursively crawl the module graph to get all style files imported by parent id */
+export declare function crawlGraph(viteServer: vite.ViteDevServer, _id: string, isFile: boolean, scanned?: Set<string>): AsyncGenerator<vite.ModuleNode, void, unknown>;

package/dist/types/jsx/server.d.ts

@@ -5,7 +5,7 @@ export declare function renderToStaticMarkup(this: any, Component: any, props?:
     default?: null | undefined;
 }): Promise<{
     html: any;
-} | undefined>;
+}>;
 declare const _default: {
     check: typeof check;
     renderToStaticMarkup: typeof renderToStaticMarkup;

package/dist/types/jsx-runtime/index.d.ts

@@ -1,8 +1,8 @@
 import { Fragment } from '../runtime/server/index.js';
 declare const AstroJSX = "astro:jsx";
-interface AstroVNode {
+export interface AstroVNode {
     [AstroJSX]: boolean;
-    type: string | ((...args: any) => any) | typeof Fragment;
+    type: string | ((...args: any) => any);
     props: Record<string, any>;
 }
 export declare function isVNode(vnode: any): vnode is AstroVNode;

package/dist/types/runtime/server/index.d.ts

@@ -19,6 +19,7 @@ export declare function createComponent(cb: AstroComponentFactory): AstroCompone
 export declare function renderSlot(_result: any, slotted: string, fallback?: any): Promise<string>;
 export declare function mergeSlots(...slotted: unknown[]): Record<string, () => any>;
 export declare const Fragment: unique symbol;
+export declare const ClientOnlyPlaceholder = "astro-client-only";
 export declare function renderComponent(result: SSRResult, displayName: string, Component: unknown, _props: Record<string | number, any>, slots?: any): Promise<string | AsyncIterable<string>>;
 export declare function createAstro(filePathname: string, _site: string, projectRootStr: string): AstroGlobalPartial;
 export declare function addAttribute(value: any, key: string, shouldEscape?: boolean): any;

package/dist/types/runtime/server/jsx.d.ts

@@ -1 +1,2 @@
-export declare function renderJSX(result: any, vnode: any): Promise<any>;
+import { SSRResult } from '../../@types/astro.js';
+export declare function renderJSX(result: SSRResult, vnode: any): Promise<any>;

package/dist/types/runtime/server/metadata.d.ts

@@ -21,8 +21,6 @@ export declare class Metadata {
     resolvePath(specifier: string): string;
     getPath(Component: any): string | null;
     getExport(Component: any): string | null;
-    hoistedScriptPaths(): Generator<string, void, unknown>;
-    private deepMetadata;
     private getComponentMetadata;
     private findComponentMetadata;
 }

package/dist/vite-plugin-env/index.js

@@ -58,6 +58,7 @@ function envVitePlugin({
         if (privateEnv) {
           privateEnv.SITE = astroConfig.site ? `'${astroConfig.site}'` : "undefined";
           privateEnv.SSR = JSON.stringify(true);
+          privateEnv.BASE_URL = astroConfig.base ? `'${astroConfig.base}'` : void 0;
           const entries = Object.entries(privateEnv).map(([key, value]) => [
             `import.meta.env.${key}`,
             value
@@ -66,6 +67,7 @@ function envVitePlugin({
           replacements = Object.assign(replacements, {
             "import.meta.env.SITE": astroConfig.site ? `'${astroConfig.site}'` : "undefined",
             "import.meta.env.SSR": JSON.stringify(true),
+            "import.meta.env.BASE_URL": astroConfig.base ? `'${astroConfig.base}'` : void 0,
             "import.meta.env": `({})`
           });
           pattern = new RegExp("(?<!(?<!\\.\\.)\\.)\\b(" + Object.keys(replacements).map((str) => {

package/dist/vite-plugin-jsx/index.js

@@ -47,6 +47,19 @@ async function transformJSX({
   });
   if (!result)
     return null;
+  if (renderer.name === "astro:jsx") {
+    const { astro } = result.metadata;
+    return {
+      code: result.code || "",
+      map: result.map,
+      meta: {
+        astro,
+        vite: {
+          lang: "ts"
+        }
+      }
+    };
+  }
   return {
     code: result.code || "",
     map: result.map

package/dist/vite-plugin-markdown/index.js

@@ -83,7 +83,7 @@ function markdown({ config }) {
 						export function $$loadMetadata() {
 							return load().then((m) => m.$$metadata);
 						}
-						
+
 						// Deferred
 						export default async function load() {
 							return (await import(${JSON.stringify(fileId + MARKDOWN_CONTENT_FLAG)}));
@@ -116,6 +116,8 @@ function markdown({ config }) {
         let { code: astroResult, metadata } = renderResult;
         const { layout = "", components = "", setup = "", ...content } = frontmatter;
         content.astro = metadata;
+        content.url = getFileInfo(id, config).fileUrl;
+        content.file = filename;
         const prelude = `---
 import Slugger from 'github-slugger';
 ${layout ? `import Layout from '${layout}';` : ""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro",
-  "version": "1.0.0-beta.72",
+  "version": "1.0.0-beta.73",
   "description": "Astro is a modern site builder with web best practices, performance, and DX front-of-mind.",
   "type": "module",
   "author": "withastro",
@@ -71,10 +71,10 @@
   ],
   "dependencies": {
     "@astrojs/compiler": "^0.19.0",
-    "@astrojs/language-server": "^0.13.4",
-    "@astrojs/markdown-remark": "^0.11.7",
-    "@astrojs/prism": "0.6.0",
-    "@astrojs/telemetry": "^0.4.0",
+    "@astrojs/language-server": "^0.20.0",
+    "@astrojs/markdown-remark": "^0.12.0",
+    "@astrojs/prism": "0.6.1",
+    "@astrojs/telemetry": "^0.4.1",
     "@astrojs/webapi": "^0.12.0",
     "@babel/core": "^7.18.2",
     "@babel/generator": "^7.18.2",
@@ -158,7 +158,7 @@
     "srcset-parse": "^1.1.0"
   },
   "engines": {
-    "node": "^14.20.0 || >=16.14.0",
+    "node": "^14.18.0 || >=16.12.0",
     "npm": ">=6.14.0"
   },
   "scripts": {

package/dist/cli/check.js

@@ -1,93 +0,0 @@
-import { AstroCheck, DiagnosticSeverity } from "@astrojs/language-server";
-import glob from "fast-glob";
-import * as fs from "fs";
-import { bgWhite, black, bold, cyan, red, yellow } from "kleur/colors";
-import * as path from "path";
-import { pathToFileURL } from "url";
-async function openAllDocuments(workspaceUri, filePathsToIgnore, checker) {
-  const files = await glob("**/*.astro", {
-    cwd: workspaceUri.pathname,
-    ignore: ["node_modules/**"].concat(filePathsToIgnore.map((ignore) => `${ignore}/**`))
-  });
-  const absFilePaths = files.map((f) => path.resolve(workspaceUri.pathname, f));
-  for (const absFilePath of absFilePaths) {
-    const text = fs.readFileSync(absFilePath, "utf-8");
-    checker.upsertDocument({
-      uri: pathToFileURL(absFilePath).toString(),
-      text
-    });
-  }
-}
-function offsetAt({ line, character }, text) {
-  let i = 0;
-  let l = 0;
-  let c = 0;
-  while (i < text.length) {
-    if (l === line && c === character) {
-      break;
-    }
-    let char = text[i];
-    switch (char) {
-      case "\n": {
-        l++;
-        c = 0;
-        break;
-      }
-      default: {
-        c++;
-        break;
-      }
-    }
-    i++;
-  }
-  return i;
-}
-function generateString(str, len) {
-  return Array.from({ length: len }, () => str).join("");
-}
-async function run() {
-}
-async function check(astroConfig) {
-  const root = astroConfig.root;
-  let checker = new AstroCheck(root.toString());
-  await openAllDocuments(root, [], checker);
-  let diagnostics = await checker.getDiagnostics();
-  let result = {
-    errors: 0,
-    warnings: 0
-  };
-  diagnostics.forEach((diag) => {
-    diag.diagnostics.forEach((d) => {
-      switch (d.severity) {
-        case DiagnosticSeverity.Error: {
-          console.error(`${bold(cyan(path.relative(root.pathname, diag.filePath)))}:${bold(yellow(d.range.start.line))}:${bold(yellow(d.range.start.character))} - ${d.message}`);
-          let startOffset = offsetAt({ line: d.range.start.line, character: 0 }, diag.text);
-          let endOffset = offsetAt({ line: d.range.start.line + 1, character: 0 }, diag.text);
-          let str = diag.text.substring(startOffset, endOffset - 1);
-          const lineNumStr = d.range.start.line.toString();
-          const lineNumLen = lineNumStr.length;
-          console.error(`${bgWhite(black(lineNumStr))}  ${str}`);
-          let tildes = generateString("~", d.range.end.character - d.range.start.character);
-          let spaces = generateString(" ", d.range.start.character + lineNumLen - 1);
-          console.error(`   ${spaces}${bold(red(tildes))}
-`);
-          result.errors++;
-          break;
-        }
-        case DiagnosticSeverity.Warning: {
-          result.warnings++;
-          break;
-        }
-      }
-    });
-  });
-  if (result.errors) {
-    console.error(`Found ${result.errors} errors.`);
-  }
-  const exitCode = result.errors ? 1 : 0;
-  return exitCode;
-}
-export {
-  check,
-  run
-};

package/dist/types/cli/check.d.ts

@@ -1,3 +0,0 @@
-import type { AstroConfig } from '../@types/astro';
-export declare function run(): Promise<void>;
-export declare function check(astroConfig: AstroConfig): Promise<0 | 1>;