@tenphi/renderer 0.26.0 → 0.27.0

package/dist/components/Preview.astro

@@ -2,7 +2,7 @@
 import { messages, requestLanguage } from "../localization.js";
 import { buildPreview } from "../preview-document.js";
 import { content } from "virtual:cookbook/config";
-import { PreviewRoot } from "./Preview.styles.js";
+import { PreviewRoot, previewHeightStyles } from "./Preview.styles.js";
 
 import type { PreviewProps as Props } from "./props.js";
 
@@ -18,7 +18,12 @@ const ui = messages(
 );
 ---
 
-<PreviewRoot className="td-preview" data-not-content="" aria-label={title}>
+<PreviewRoot
+  className="td-preview"
+  data-not-content=""
+  aria-label={title}
+  styles={preview.height && previewHeightStyles(preview.height)}
+>
   <PreviewRoot.Caption><strong>{title}</strong></PreviewRoot.Caption>
   <PreviewRoot.Stage>
     <PreviewRoot.Frame

package/dist/components/Preview.styles.js

@@ -78,3 +78,8 @@ export const PreviewRoot = defineComponent("Preview", {
   },
   elements: previewElements,
 });
+
+/** Render-time styles for one preview's `height` prop, a validated CSS length. */
+export function previewHeightStyles(height) {
+  return { Frame: { height: `min ${height}` } };
+}

package/dist/components/props.d.ts

@@ -15,6 +15,8 @@ interface PreviewProps {
   javascript?: string;
   /** Public-directory paths, such as `/demo/button.js`, inlined as classic scripts before `javascript`. */
   scripts?: string[];
+  /** The frame's minimum height as a CSS length, such as `18rem`; defaults to `10rem`. */
+  height?: string;
 }
 type StepsProps = Record<string, never>;
 interface TabsProps {

package/dist/components/props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","names":[],"sources":["../../src/components/props.ts"],"mappings":";UAAiB;EACf;EACA;;UAEe;EACf;EACA;EACA;;UAEe;EACf;EACA;EACA;EACA;;EAEA;;KAEU,aAAa;UACR;EACf;;UAEe;EACf;;UAEe;EACf;EACA;;UAEe;EACf;EACA,OAAO;IAAQ;IAAe;IAAc"}
+{"version":3,"file":"props.d.ts","names":[],"sources":["../../src/components/props.ts"],"mappings":";UAAiB;EACf;EACA;;UAEe;EACf;EACA;EACA;;UAEe;EACf;EACA;EACA;EACA;;EAEA;;EAEA;;KAEU,aAAa;UACR;EACf;;UAEe;EACf;;UAEe;EACf;EACA;;UAEe;EACf;EACA,OAAO;IAAQ;IAAe;IAAc"}

package/dist/components/props.ts

@@ -14,6 +14,8 @@ export interface PreviewProps {
   javascript?: string;
   /** Public-directory paths, such as `/demo/button.js`, inlined as classic scripts before `javascript`. */
   scripts?: string[];
+  /** The frame's minimum height as a CSS length, such as `18rem`; defaults to `10rem`. */
+  height?: string;
 }
 export type StepsProps = Record<string, never>;
 export interface TabsProps {

package/dist/preview-document.d.ts

@@ -1,13 +1,15 @@
 import { PreviewProps } from "./components/props.js";
 //#region src/preview-document.d.ts
 /**
- * Build a Preview's frame document and its "View source" text. Public scripts
- * are inlined so they run in the opaque-origin sandbox without a request.
+ * Build a Preview's frame document, its "View source" text and the frame's
+ * settings. Public scripts are inlined so they run in the opaque-origin sandbox
+ * without a request.
  */
-declare function buildPreview({ html, css, javascript, scripts }: Omit<PreviewProps, "title">, publicDir: string, page: string): Promise<{
+declare function buildPreview({ html, css, javascript, scripts, height }: Omit<PreviewProps, "title">, publicDir: string, page: string): Promise<{
   document: string;
   source: string;
   sandbox: string;
+  height: string | undefined;
 }>;
 //#endregion
 export { buildPreview };

package/dist/preview-document.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preview-document.d.ts","names":[],"sources":["../src/preview-document.ts"],"mappings":";;;;;;iBAQsB,eAElB,MACA,KACA,YACA,WACC,KAAK,wBACR,mBACA,eAAY"}
+{"version":3,"file":"preview-document.d.ts","names":[],"sources":["../src/preview-document.ts"],"mappings":";;;;;;;iBAcsB,eAElB,MACA,KACA,YACA,SACA,UACC,KAAK,wBACR,mBACA,eAAY"}

package/dist/preview-document.js

@@ -1,18 +1,22 @@
 import { readFile } from "node:fs/promises";
 import { join } from "node:path";
 //#region src/preview-document.ts
+const CSS_LENGTH = /^(?:\d+|\d*\.\d+)(?:px|r?em|ch|ex|r?lh|[dls]?v(?:h|w|min|max)|cm|mm|in|pt|pc)$/;
 /**
-* Build a Preview's frame document and its "View source" text. Public scripts
-* are inlined so they run in the opaque-origin sandbox without a request.
+* Build a Preview's frame document, its "View source" text and the frame's
+* settings. Public scripts are inlined so they run in the opaque-origin sandbox
+* without a request.
 */
-async function buildPreview({ html = "", css = "", javascript, scripts = [] }, publicDir, page) {
+async function buildPreview({ html = "", css = "", javascript, scripts = [], height }, publicDir, page) {
+	if (height !== void 0 && !CSS_LENGTH.test(height)) throw Error(`Preview on ${page}: height ${height} must be a CSS length, such as 18rem or 320px.`);
 	const files = await Promise.all(scripts.map((src) => readPublicScript(src, publicDir, page)));
 	const markup = `<!doctype html><meta charset="utf-8"><style>${css}</style>${html}`;
 	const authored = javascript ? inlineScript(javascript) : "";
 	return {
 		document: markup + files.map(inlineScript).join("") + authored,
 		source: markup + scripts.map((src) => `<script src="${src}"><\/script>`).join("") + authored,
-		sandbox: scripts.length || javascript ? "allow-scripts" : ""
+		sandbox: scripts.length || javascript ? "allow-forms allow-scripts" : "allow-forms",
+		height
 	};
 }
 function inlineScript(code) {

package/dist/preview-document.js.map

@@ -1 +1 @@
-{"version":3,"file":"preview-document.js","names":[],"sources":["../src/preview-document.ts"],"sourcesContent":["import { readFile } from \"node:fs/promises\";\nimport { join } from \"node:path\";\nimport type { PreviewProps } from \"./components/props.js\";\n\n/**\n * Build a Preview's frame document and its \"View source\" text. Public scripts\n * are inlined so they run in the opaque-origin sandbox without a request.\n */\nexport async function buildPreview(\n  {\n    html = \"\",\n    css = \"\",\n    javascript,\n    scripts = [],\n  }: Omit<PreviewProps, \"title\">,\n  publicDir: string,\n  page: string,\n) {\n  const files = await Promise.all(\n    scripts.map((src) => readPublicScript(src, publicDir, page)),\n  );\n  const markup = `<!doctype html><meta charset=\"utf-8\"><style>${css}</style>${html}`;\n  const authored = javascript ? inlineScript(javascript) : \"\";\n  return {\n    document: markup + files.map(inlineScript).join(\"\") + authored,\n    source:\n      markup +\n      scripts.map((src) => `<script src=\"${src}\"></script>`).join(\"\") +\n      authored,\n    sandbox: scripts.length || javascript ? \"allow-scripts\" : \"\",\n  };\n}\n\n// The HTML parser ends a script at the first `</script`, even inside a string.\nfunction inlineScript(code: string) {\n  return `<script>${code.replace(/<\\/(script)/gi, \"<\\\\/$1\")}</script>`;\n}\n\nasync function readPublicScript(src: string, publicDir: string, page: string) {\n  const error = `Preview on ${page}: script ${src} must be a readable file in the site's public directory, such as /demo/button.js.`;\n  if (!/^\\/(?!\\/)/.test(src) || src.split(/[\\\\/]/).includes(\"..\"))\n    throw Error(error);\n  try {\n    return await readFile(join(publicDir, src), \"utf8\");\n  } catch {\n    throw Error(error);\n  }\n}\n"],"mappings":";;;;;;;AAQA,eAAsB,aACpB,EACE,OAAO,IACP,MAAM,IACN,YACA,UAAU,CAAC,KAEb,WACA,MACA;CACA,MAAM,QAAQ,MAAM,QAAQ,IAC1B,QAAQ,KAAK,QAAQ,iBAAiB,KAAK,WAAW,IAAI,CAAC,CAC7D;CACA,MAAM,SAAS,+CAA+C,IAAI,UAAU;CAC5E,MAAM,WAAW,aAAa,aAAa,UAAU,IAAI;CACzD,OAAO;EACL,UAAU,SAAS,MAAM,IAAI,YAAY,CAAC,CAAC,KAAK,EAAE,IAAI;EACtD,QACE,SACA,QAAQ,KAAK,QAAQ,gBAAgB,IAAI,aAAY,CAAC,CAAC,KAAK,EAAE,IAC9D;EACF,SAAS,QAAQ,UAAU,aAAa,kBAAkB;CAC5D;AACF;AAGA,SAAS,aAAa,MAAc;CAClC,OAAO,WAAW,KAAK,QAAQ,iBAAiB,QAAQ,EAAE;AAC5D;AAEA,eAAe,iBAAiB,KAAa,WAAmB,MAAc;CAC5E,MAAM,QAAQ,cAAc,KAAK,WAAW,IAAI;CAChD,IAAI,CAAC,YAAY,KAAK,GAAG,KAAK,IAAI,MAAM,OAAO,CAAC,CAAC,SAAS,IAAI,GAC5D,MAAM,MAAM,KAAK;CACnB,IAAI;EACF,OAAO,MAAM,SAAS,KAAK,WAAW,GAAG,GAAG,MAAM;CACpD,QAAQ;EACN,MAAM,MAAM,KAAK;CACnB;AACF"}
+{"version":3,"file":"preview-document.js","names":[],"sources":["../src/preview-document.ts"],"sourcesContent":["import { readFile } from \"node:fs/promises\";\nimport { join } from \"node:path\";\nimport type { PreviewProps } from \"./components/props.js\";\n\n// The frame's height becomes generated CSS, so accept only a plain length.\n// Percentages are rejected because the frame's container has no fixed height.\nconst CSS_LENGTH =\n  /^(?:\\d+|\\d*\\.\\d+)(?:px|r?em|ch|ex|r?lh|[dls]?v(?:h|w|min|max)|cm|mm|in|pt|pc)$/;\n\n/**\n * Build a Preview's frame document, its \"View source\" text and the frame's\n * settings. Public scripts are inlined so they run in the opaque-origin sandbox\n * without a request.\n */\nexport async function buildPreview(\n  {\n    html = \"\",\n    css = \"\",\n    javascript,\n    scripts = [],\n    height,\n  }: Omit<PreviewProps, \"title\">,\n  publicDir: string,\n  page: string,\n) {\n  if (height !== undefined && !CSS_LENGTH.test(height))\n    throw Error(\n      `Preview on ${page}: height ${height} must be a CSS length, such as 18rem or 320px.`,\n    );\n  const files = await Promise.all(\n    scripts.map((src) => readPublicScript(src, publicDir, page)),\n  );\n  const markup = `<!doctype html><meta charset=\"utf-8\"><style>${css}</style>${html}`;\n  const authored = javascript ? inlineScript(javascript) : \"\";\n  return {\n    document: markup + files.map(inlineScript).join(\"\") + authored,\n    source:\n      markup +\n      scripts.map((src) => `<script src=\"${src}\"></script>`).join(\"\") +\n      authored,\n    // A submitted form can navigate only the frame itself, as a link can.\n    sandbox:\n      scripts.length || javascript\n        ? \"allow-forms allow-scripts\"\n        : \"allow-forms\",\n    height,\n  };\n}\n\n// The HTML parser ends a script at the first `</script`, even inside a string.\nfunction inlineScript(code: string) {\n  return `<script>${code.replace(/<\\/(script)/gi, \"<\\\\/$1\")}</script>`;\n}\n\nasync function readPublicScript(src: string, publicDir: string, page: string) {\n  const error = `Preview on ${page}: script ${src} must be a readable file in the site's public directory, such as /demo/button.js.`;\n  if (!/^\\/(?!\\/)/.test(src) || src.split(/[\\\\/]/).includes(\"..\"))\n    throw Error(error);\n  try {\n    return await readFile(join(publicDir, src), \"utf8\");\n  } catch {\n    throw Error(error);\n  }\n}\n"],"mappings":";;;AAMA,MAAM,aACJ;;;;;;AAOF,eAAsB,aACpB,EACE,OAAO,IACP,MAAM,IACN,YACA,UAAU,CAAC,GACX,UAEF,WACA,MACA;CACA,IAAI,WAAW,KAAA,KAAa,CAAC,WAAW,KAAK,MAAM,GACjD,MAAM,MACJ,cAAc,KAAK,WAAW,OAAO,+CACvC;CACF,MAAM,QAAQ,MAAM,QAAQ,IAC1B,QAAQ,KAAK,QAAQ,iBAAiB,KAAK,WAAW,IAAI,CAAC,CAC7D;CACA,MAAM,SAAS,+CAA+C,IAAI,UAAU;CAC5E,MAAM,WAAW,aAAa,aAAa,UAAU,IAAI;CACzD,OAAO;EACL,UAAU,SAAS,MAAM,IAAI,YAAY,CAAC,CAAC,KAAK,EAAE,IAAI;EACtD,QACE,SACA,QAAQ,KAAK,QAAQ,gBAAgB,IAAI,aAAY,CAAC,CAAC,KAAK,EAAE,IAC9D;EAEF,SACE,QAAQ,UAAU,aACd,8BACA;EACN;CACF;AACF;AAGA,SAAS,aAAa,MAAc;CAClC,OAAO,WAAW,KAAK,QAAQ,iBAAiB,QAAQ,EAAE;AAC5D;AAEA,eAAe,iBAAiB,KAAa,WAAmB,MAAc;CAC5E,MAAM,QAAQ,cAAc,KAAK,WAAW,IAAI;CAChD,IAAI,CAAC,YAAY,KAAK,GAAG,KAAK,IAAI,MAAM,OAAO,CAAC,CAAC,SAAS,IAAI,GAC5D,MAAM,MAAM,KAAK;CACnB,IAAI;EACF,OAAO,MAAM,SAAS,KAAK,WAAW,GAAG,GAAG,MAAM;CACpD,QAAQ;EACN,MAAM,MAAM,KAAK;CACnB;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenphi/renderer",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "description": "Astro renderer and Tasty theme for Cookbook",
   "type": "module",
   "sideEffects": [
@@ -61,7 +61,7 @@
     "@fontsource-variable/jetbrains-mono": "^5.3.0",
     "@fontsource-variable/onest": "^5.3.0",
     "@pagefind/default-ui": "1.5.2",
-    "@tenphi/docs": "0.26.0",
+    "@tenphi/docs": "0.27.0",
     "@tenphi/eslint-plugin-tasty": "1.6.0",
     "@tenphi/glaze": "2.0.1",
     "@tenphi/tasty": "3.9.10",