@p11-core/cli 0.0.17 → 0.0.18

package/dist/index.js

@@ -3524,6 +3524,7 @@ var P11_HISTORY_LOCK_TIMEOUT_MS = 5e3;
 var P11_HISTORY_DEFAULT_LIMIT = 20;
 var P11_RUNTIME_VERSION = "0.0.1";
 var P11_MANIFEST_FILE = "p11-manifest.json";
+var P11_SOCIAL_PREVIEW_IMAGE_EXTENSIONS = /* @__PURE__ */ new Set([".png", ".jpg", ".jpeg", ".webp"]);
 var cliPackageRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
 var docsTopics = /* @__PURE__ */ new Map([
   ["index", "docs/index.md"],
@@ -4416,7 +4417,12 @@ async function buildPageModule(inputFile, outDir) {
   const pageSource = await readFile(inputFile, "utf8");
   const pageAst = parsePageSource(pageSource);
   validatePageAst(pageAst, inputFile);
+  const pageMetadata = extractPageMetadata(pageAst, inputFile);
+  rewriteRelativeModuleSpecifiers(pageAst, path.dirname(inputFile));
+  await mkdir(tempDir, { recursive: true });
   await writeFile(pagePath, addSourceLineAttributes(pageAst, inputFile));
+  const metadataAssetTracker = createSocialPreviewAssetTracker(pageMetadata, tempDir);
+  const pageImport = pageMetadata ? 'import Page, { metadata as __p11PageMetadata } from "./Page";' : 'import Page from "./Page";';
   await writeFile(
     entryPath,
     [
@@ -4430,7 +4436,8 @@ async function buildPageModule(inputFile, outDir) {
       "  __P11_CREATE_TEXT_ANNOTATOR__: createTextAnnotator,",
       "  __P11_RANGE_TO_SELECTOR__: rangeToSelector",
       "});",
-      'import Page from "./Page";',
+      pageImport,
+      ...pageMetadata ? ["void __p11PageMetadata;"] : [],
       "",
       'createRoot(document.getElementById("root")!).render(',
       "  <React.StrictMode>",
@@ -4464,7 +4471,7 @@ async function buildPageModule(inputFile, outDir) {
       base: "./",
       configFile: false,
       logLevel: "warn",
-      plugins: [react(), tailwindcss()],
+      plugins: [react(), tailwindcss(), ...metadataAssetTracker.plugin ? [metadataAssetTracker.plugin] : []],
       resolve: {
         alias: {
           "@p11-core/components/styles.css": componentStyles,
@@ -4483,6 +4490,7 @@ async function buildPageModule(inputFile, outDir) {
         outDir: path.relative(tempDir, outDir),
         emptyOutDir: true,
         assetsDir: "assets",
+        assetsInlineLimit: 0,
         rollupOptions: {
           input: {
             index: "index.html"
@@ -4493,11 +4501,167 @@ async function buildPageModule(inputFile, outDir) {
   } finally {
     process.chdir(previousCwd);
   }
-  await writeFile(path.join(outDir, P11_MANIFEST_FILE), JSON.stringify({ runtimeVersion: P11_RUNTIME_VERSION }, null, 2));
+  const socialPreviewImage = pageMetadata?.imageSourcePath ? socialPreviewImageForMetadata(pageMetadata, metadataAssetTracker.fileName()) : await firstSocialPreviewImage(outDir);
+  await writeFile(
+    path.join(outDir, P11_MANIFEST_FILE),
+    JSON.stringify(
+      {
+        runtimeVersion: P11_RUNTIME_VERSION,
+        ...pageMetadata?.title ? { title: pageMetadata.title } : {},
+        ...pageMetadata?.description ? { description: pageMetadata.description } : {},
+        ...socialPreviewImage ? { socialPreviewImage } : {}
+      },
+      null,
+      2
+    )
+  );
+}
+function createSocialPreviewAssetTracker(metadata, buildRoot) {
+  let fileName;
+  return {
+    plugin: socialPreviewAssetPlugin(metadata, buildRoot, (nextFileName) => {
+      fileName = nextFileName;
+    }),
+    fileName: () => fileName
+  };
+}
+function socialPreviewAssetPlugin(metadata, buildRoot, onAssetPath) {
+  if (!metadata?.imageSourcePath) return null;
+  const metadataImagePath = normalizeFilePath(realpathSync(metadata.imageSourcePath));
+  return {
+    name: "p11-social-preview-asset",
+    generateBundle(_options, bundle) {
+      const matches = Object.values(bundle).filter((output) => {
+        if (output.type !== "asset") return false;
+        return (output.originalFileNames ?? []).some((fileName) => originalFileNameMatches(fileName, metadataImagePath, buildRoot));
+      });
+      if (matches.length === 1) {
+        onAssetPath(matches[0].fileName);
+        return;
+      }
+      if (matches.length > 1) {
+        throw new Error(`metadata.image matched multiple built assets for ${metadata.imageSourcePath}`);
+      }
+    }
+  };
+}
+function originalFileNameMatches(fileName, metadataImagePath, buildRoot) {
+  const candidate = path.isAbsolute(fileName) ? fileName : path.resolve(buildRoot, fileName);
+  try {
+    return normalizeFilePath(realpathSync(candidate)) === metadataImagePath;
+  } catch (_error) {
+    return false;
+  }
+}
+function normalizeFilePath(filePath) {
+  return path.normalize(filePath).split(path.sep).join("/");
+}
+function socialPreviewImageForMetadata(metadata, builtAssetPath) {
+  if (builtAssetPath) return builtAssetPath;
+  throw new Error(`metadata.image was not emitted as a built asset: ${metadata.imageSourcePath}`);
+}
+async function firstSocialPreviewImage(outDir) {
+  const imagePaths = await socialPreviewImagesInDir(outDir);
+  return imagePaths.sort()[0];
+}
+async function socialPreviewImagesInDir(dir, rootDir = dir) {
+  const entries = await readdir(dir, { withFileTypes: true }).catch(() => null);
+  if (!entries) return [];
+  const images = [];
+  for (const entry of entries) {
+    const entryPath = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      images.push(...await socialPreviewImagesInDir(entryPath, rootDir));
+      continue;
+    }
+    if (!entry.isFile() || !P11_SOCIAL_PREVIEW_IMAGE_EXTENSIONS.has(path.extname(entry.name).toLowerCase())) continue;
+    images.push(path.relative(rootDir, entryPath).split(path.sep).join("/"));
+  }
+  return images;
 }
 function resolveBuildParentDir(buildDir) {
   return path.resolve(buildDir || process.env.P11_BUILD_DIR || tmpdir());
 }
+function rewriteRelativeModuleSpecifiers(ast, sourceDir) {
+  for (const statement of ast.program.body) {
+    if (statement.type === "ImportDeclaration" || statement.type === "ExportNamedDeclaration" || statement.type === "ExportAllDeclaration") {
+      const source = statement.source;
+      if (!source || !isRelativeModuleSpecifier(source.value)) continue;
+      source.value = path.resolve(sourceDir, source.value);
+    }
+  }
+}
+function isRelativeModuleSpecifier(value) {
+  return value.startsWith("./") || value.startsWith("../");
+}
+function extractPageMetadata(ast, inputFile) {
+  const sourceDir = path.dirname(inputFile);
+  const importSources = importedDefaultSpecifiers(ast);
+  for (const statement of ast.program.body) {
+    if (statement.type !== "ExportNamedDeclaration") continue;
+    const declaration = statement.declaration;
+    if (!declaration || declaration.type !== "VariableDeclaration") continue;
+    for (const declarator of declaration.declarations) {
+      if (declarator.id.type !== "Identifier" || declarator.id.name !== "metadata") continue;
+      if (!declarator.init || declarator.init.type !== "ObjectExpression") {
+        throw new Error("metadata export must be an object literal.");
+      }
+      return metadataFromObjectExpression(declarator.init, importSources, sourceDir);
+    }
+  }
+  return null;
+}
+function importedDefaultSpecifiers(ast) {
+  const imports = /* @__PURE__ */ new Map();
+  for (const statement of ast.program.body) {
+    if (statement.type !== "ImportDeclaration") continue;
+    for (const specifier of statement.specifiers) {
+      if (specifier.type === "ImportDefaultSpecifier") {
+        imports.set(specifier.local.name, statement.source.value);
+      }
+    }
+  }
+  return imports;
+}
+function metadataFromObjectExpression(objectExpression, importSources, sourceDir) {
+  const metadata = {};
+  for (const property of objectExpression.properties) {
+    if (property.type !== "ObjectProperty" || property.computed) continue;
+    const key = objectPropertyName(property.key);
+    if (!key || !["title", "description", "image"].includes(key)) continue;
+    if (key === "title" || key === "description") {
+      metadata[key] = metadataStringValue(property.value, key);
+      continue;
+    }
+    metadata.imageSourcePath = metadataImageSourcePath(property.value, importSources, sourceDir);
+  }
+  return metadata;
+}
+function objectPropertyName(key) {
+  if (key.type === "Identifier") return key.name;
+  if (key.type === "StringLiteral") return key.value;
+  return null;
+}
+function metadataStringValue(value, key) {
+  if (value.type === "StringLiteral") return value.value.trim();
+  if (value.type === "TemplateLiteral" && value.expressions.length === 0) {
+    return value.quasis.map((quasi) => quasi.value.cooked ?? quasi.value.raw).join("").trim();
+  }
+  throw new Error(`metadata.${key} must be a string literal.`);
+}
+function metadataImageSourcePath(value, importSources, sourceDir) {
+  if (value.type !== "Identifier") {
+    throw new Error("metadata.image must reference a default-imported PNG, JPEG, or WebP asset.");
+  }
+  const importSource = importSources.get(value.name);
+  if (!importSource) {
+    throw new Error("metadata.image must reference a default-imported PNG, JPEG, or WebP asset.");
+  }
+  if (!P11_SOCIAL_PREVIEW_IMAGE_EXTENSIONS.has(path.extname(importSource).toLowerCase())) {
+    throw new Error("metadata.image must reference a PNG, JPEG, or WebP asset.");
+  }
+  return isRelativeModuleSpecifier(importSource) ? path.resolve(sourceDir, importSource) : importSource;
+}
 function validatePageSource(code, inputFile = "page.tsx") {
   validatePageAst(parsePageSource(code), inputFile);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@p11-core/cli",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "license": "UNLICENSED",
   "type": "module",
   "bin": {