@weborigami/origami 0.0.38 → 0.0.40

package/src/common/utilities.js

@@ -3,6 +3,13 @@ import { Tree, isPlainObject, isStringLike } from "@weborigami/async-tree";
 const textDecoder = new TextDecoder();
 const TypedArray = Object.getPrototypeOf(Uint8Array);
 
+// Return true if the text appears to contain non-printable binary characters;
+// used to infer whether a file is binary or text.
+export function hasNonPrintableCharacters(text) {
+  // https://stackoverflow.com/a/1677660/76472
+  return /[\x00-\x08\x0E-\x1F]/.test(text);
+}
+
 export function isTransformApplied(Transform, obj) {
   let transformName = Transform.name;
   if (!transformName) {
@@ -25,6 +32,22 @@ export const keySymbol = Symbol("key");
 
 export const parentSymbol = Symbol("parent");
 
+/**
+ * If the given key ends in the source extension (which will generally include a
+ * period), replace that extension with the result extension (which again should
+ * generally include a period). Otherwise, return the key as is.
+ *
+ * @param {string} key
+ * @param {string} sourceExtension
+ * @param {string} resultExtension
+ */
+export function replaceExtension(key, sourceExtension, resultExtension) {
+  if (!key.endsWith(sourceExtension)) {
+    return key;
+  }
+  return key.slice(0, -sourceExtension.length) + resultExtension;
+}
+
 /**
  * Convert the given object to a function.
  *
@@ -80,7 +103,9 @@ export function toString(object) {
     return object["@text"];
   } else if (object instanceof ArrayBuffer || object instanceof TypedArray) {
     // Serialize data as UTF-8.
-    return textDecoder.decode(object);
+    const decoded = textDecoder.decode(object);
+    // If the result has non-printable characters, it's probably not a string.
+    return hasNonPrintableCharacters(decoded) ? null : decoded;
   } else if (isStringLike(object)) {
     return String(object);
   } else {

package/src/misc/OriCommandTransform.js

@@ -33,7 +33,7 @@ export default function OriCommandTransform(Base) {
         ambientsTree[keySymbol] = "ori command";
         const extendedScope = new Scope(ambientsTree, Scope.getScope(this));
         const source = key.slice(1).trim();
-        value = await ori.call(extendedScope, source);
+        value = await ori.call(extendedScope, source, { formatResult: false });
 
         // Ensure this transform is applied to any subtree.
         if (Tree.isAsyncTree(value)) {

package/src/misc/explore.css

@@ -0,0 +1,88 @@
+* {
+  box-sizing: border-box;
+}
+
+html {
+  height: 100%;
+}
+
+body {
+  background: #333;
+  color: #eee;
+  display: grid;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 13px;
+  grid-template-columns: 200px 1fr;
+  grid-template-rows: minMax(0, 1fr);
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+}
+
+nav {
+  display: grid;
+  gap: 1em;
+  grid-auto-rows: min-content;
+  grid-template-columns: minmax(0, 1fr);
+  overflow: auto;
+  padding: 1em 0.5em;
+}
+
+#label {
+  font-weight: bold;
+}
+
+#scopeToolbar {
+  display: grid;
+  grid-template-columns: repeat(4, auto);        
+}
+
+button {
+  background: transparent;
+  border: solid 1px #555;
+  color: inherit;
+  font-size: smaller;
+  font-family: inherit;
+  font-weight: inherit;
+  padding: 0.25em;
+}
+button:hover {
+  border-color: #999;
+}
+button:active {
+  border-color: #eee;
+}
+button[aria-pressed="true"] {
+  background: #555;
+}
+
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+h2 {
+  color: #999;
+  font-size: inherit;
+  margin: 0.25em 0;
+  padding-left: 0.25em;
+}
+
+li {
+  padding: 0.25em;
+  padding-left: 1em;
+  text-indent: -0.75em;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+iframe {
+  background: white;
+  border: none;
+  height: 100%;
+  width: 100%;
+}

package/src/misc/explore.js.inline

@@ -0,0 +1,119 @@
+let defaultPath;
+let frame;
+
+const modes = {
+  Content: "",
+  Index: "!@index",
+  YAML: "!@yaml",
+  SVG: "!@svg",
+};
+
+// Extract the path from the URL hash.
+function getPathFromHash() {
+  return window.location.hash.slice(1); // Remove `#`
+}
+
+function getModeFromLocation() {
+  const href = document.location.href;
+  const match = /[\/](?<command>\!(?:@index|@yaml|@svg))$/.exec(href);
+  const command = match?.groups?.command ?? "";
+  const mode =
+    Object.keys(modes).find((key) => modes[key] === command) ?? "Content";
+  return mode;
+}
+
+function removeDocumentPath(path) {
+  const documentPath = document.location.pathname;
+  if (path.startsWith(documentPath)) {
+    // Remove the document path prefix.
+    path = path.slice(documentPath.length);
+  }
+  if (path.startsWith("/")) {
+    // Remove the leading slash.
+    path = path.slice(1);
+  }
+  return path;
+}
+
+function selectMode(newMode) {
+  const currentMode = getModeFromLocation();
+  if (newMode !== currentMode) {
+    let newPath = removeDocumentPath(frame.contentDocument.location.pathname);
+    const currentExtension = modes[currentMode];
+    if (currentExtension && newPath.endsWith(currentExtension)) {
+      // Remove the current extension.
+      newPath = newPath.slice(0, -currentExtension.length);
+    }
+    const newExtension = modes[newMode];
+    const separator = newPath.endsWith("/") ? "" : "/";
+    const newFullPath = `${newPath}${separator}${newExtension}`;
+    setPath(newFullPath);
+  }
+}
+
+function setPath(path) {
+  // Show the indicated page in the frame.
+  const abbreviatedPath = `/${path}`;
+  const fullPath = `${document.location.pathname}/${path}`;
+  const framePathname = frame.contentDocument.location.pathname;
+  if (framePathname !== abbreviatedPath && framePathname !== fullPath) {
+    // Use `replace` to avoid affecting browser history.
+    frame.contentWindow.location.replace(fullPath);
+  }
+
+  // If the path ends with a file name corresponding to a mode, select
+  // the corresponding mode button.
+  const mode = getModeFromLocation();
+  const selectedButtonId = `button${mode}`;
+  scopeToolbar.querySelectorAll("button").forEach((button) => {
+    const pressed = button.id === selectedButtonId ? "true" : "false";
+    button.setAttribute("aria-pressed", pressed);
+  });
+}
+
+// When hash changes, load the indicated page.
+window.addEventListener("hashchange", () => {
+  const hashPath = getPathFromHash();
+  const newPath = hashPath !== undefined ? hashPath : defaultPath;
+  if (newPath) {
+    setPath(newPath);
+  }
+});
+
+// Initialize
+window.addEventListener("load", () => {
+  // Refresh title on page load.
+  frame = document.getElementById("frame");
+  frame.addEventListener("load", () => {
+    if (frame.contentDocument.location.href !== "about:blank") {
+      document.title = frame.contentDocument.title;
+      const newPath = removeDocumentPath(
+        frame.contentDocument.location.pathname
+      );
+      const hash = `#${newPath}`;
+      if (window.location.hash !== hash) {
+        // Use `replace` to avoid affecting browser history.
+        window.location.replace(hash);
+      }
+    }
+  });
+
+  buttonContent.addEventListener("click", () => {
+    selectMode("Content");
+  });
+  buttonIndex.addEventListener("click", () => {
+    selectMode("Index");
+  });
+  buttonYAML.addEventListener("click", () => {
+    selectMode("YAML");
+  });
+  buttonSVG.addEventListener("click", () => {
+    selectMode("SVG");
+  });
+
+  // Navigate to any path already in the hash.
+  defaultPath = getPathFromHash();
+  if (defaultPath) {
+    setPath(defaultPath);
+  }
+});

package/src/misc/explore.ori

@@ -0,0 +1,33 @@
+=`<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Web Origami Explorer</title>
+    <style>{{ explore.css }}</style>
+    <script>{{ explore.js.inline }}</script>
+  </head>
+  <body>
+    <nav>
+    <div id="label">Web Origami Explorer</div>
+    <div id="scopeToolbar">
+      <button id="buttonContent">Content</button>
+      <button id="buttonIndex">Index</button>
+      <button id="buttonSVG">SVG</button>
+      <button id="buttonYAML">YAML</button>
+    </div>
+    {{ @map(=`
+      <ul>
+        <h2>{{ _/name }}</h2>
+        {{ @map(=`
+        <li>
+          <a href="./!@explore/{{ _ }}" target="frame">{{ _ }}</a>
+        </li>
+        `)(_/keys) }}
+      </ul>
+    `)(_) }}
+    </nav>
+    <iframe id="frame" name="frame"></iframe>
+  </body>
+</html>
+`

package/src/server/server.js

@@ -7,6 +7,7 @@ import {
 } from "@weborigami/async-tree";
 import { Scope, extname } from "@weborigami/language";
 import * as serialize from "../common/serialize.js";
+import { toString } from "../common/utilities.js";
 import { mediaTypeForExtension, mediaTypeIsText } from "./mediaTypes.js";
 
 const TypedArray = Object.getPrototypeOf(Uint8Array);
@@ -52,18 +53,7 @@ export function treeRouter(tree) {
 export async function handleRequest(request, response, tree) {
   // For parsing purposes, we assume HTTPS -- it doesn't affect parsing.
   const url = new URL(request.url, `https://${request.headers.host}`);
-
-  // We allow the use of %2F in paths as a way to insert a slash into a key, so
-  // we parse the path into keys first, then decode them.
-  const keys = keysFromPath(url.pathname).map((key) =>
-    typeof key === "string" ? decodeURIComponent(key) : key
-  );
-
-  // If the path ends with a trailing slash, the final key will be an empty
-  // string. Change that to "index.html".
-  if (keys[keys.length - 1] === "") {
-    keys[keys.length - 1] = "index.html";
-  }
+  const keys = keysFromUrl(url);
 
   const extendedTree =
     url.searchParams && "parent" in tree
@@ -131,7 +121,7 @@ export async function handleRequest(request, response, tree) {
 
   let data;
   if (mediaType) {
-    data = mediaTypeIsText[mediaType] ? String(resource) : resource;
+    data = mediaTypeIsText[mediaType] ? toString(resource) : resource;
   } else {
     data = textOrObject(resource);
   }
@@ -152,7 +142,7 @@ export async function handleRequest(request, response, tree) {
   const validResponse = typeof data === "string" || data instanceof TypedArray;
 
   if (!validResponse) {
-    const typeName = data.constructor?.name ?? typeof data;
+    const typeName = data?.constructor?.name ?? typeof data;
     console.error(
       `A served tree must return a string or a TypedArray (such as a Buffer) but returned an instance of ${typeName}.`
     );
@@ -172,6 +162,28 @@ export async function handleRequest(request, response, tree) {
   return true;
 }
 
+function keysFromUrl(url) {
+  // Split on occurrences of `/!`, which represent Origami debug commands.
+  // Command arguments can contain slashes; don't treat those as path keys.
+  const parts = url.pathname.split(/\/!/);
+
+  // Split everything before the first command by slashes and decode those.
+  const path = parts.shift();
+  const pathKeys = keysFromPath(path).map((key) => decodeURIComponent(key));
+
+  // If there are no commands, and the path ends with a trailing slash, the
+  // final key will be an empty string. Change that to "index.html".
+  if (parts.length === 0 && pathKeys[pathKeys.length - 1] === "") {
+    pathKeys[pathKeys.length - 1] = "index.html";
+  }
+
+  // Add back the `!` to commands.
+  const commandKeys = parts.map((command) => `!${command}`);
+
+  const keys = [...pathKeys, ...commandKeys];
+  return keys;
+}
+
 /**
  * A request listener for use with the node http.createServer and
  * https.createServer calls, letting you serve an async tree as a set of pages.
@@ -233,26 +245,12 @@ ${message}
  * Convert to a string if we can, but leave objects that convert to something
  * like "[object Object]" alone.
  *
- * @param {any} obj
+ * @param {any} object
  */
-function textOrObject(obj) {
-  if (typeof obj === "string") {
-    // Return string as is.
-    return obj;
-  }
-
-  // See if we can convert the object to a string.
-  const text = String(obj);
-
-  // See if we ended up with a default string.
-  const constructor = obj.constructor;
-  const name = constructor.name || "Object";
-  if (text === `[object Object]` || text === `[object ${name}]`) {
-    // Got a default string, so probably not what we wanted.
-    // Return original object.
-    return obj;
-  } else {
-    // We appear to have cast the object to a string; return that.
-    return text;
+function textOrObject(object) {
+  // Return buffers and typed arrays as is.
+  if (object instanceof ArrayBuffer || object instanceof TypedArray) {
+    return object;
   }
+  return toString(object);
 }

package/src/builtins/@loaders/orit.js

@@ -1,48 +0,0 @@
-import { Scope } from "@weborigami/language";
-import * as compile from "../../../../language/src/compiler/compile.js";
-import processUnpackedContent from "../../common/processUnpackedContent.js";
-import * as utilities from "../../common/utilities.js";
-import builtins from "../@builtins.js";
-import unpackText from "./txt.js";
-
-/**
- * Load and evaluate an Origami template from a file.
- *
- * @typedef {import("@weborigami/types").AsyncTree} AsyncTree
- * @type {import("@weborigami/language").FileUnpackFunction}
- */
-export default async function unpackOrigamiTemplate(input, options = {}) {
-  const parent =
-    options.parent ??
-    /** @type {any} */ (input).parent ??
-    /** @type {any} */ (input)[utilities.parentSymbol];
-
-  // Get the input text and any attached front matter.
-  let inputDocument;
-  if (input["@text"]) {
-    inputDocument = input;
-  } else {
-    // Unpack the input as a text document with possible front matter.
-    inputDocument = await unpackText(input, options);
-  }
-  const text = utilities.toString(inputDocument);
-
-  // Compile the body text as an Origami expression and evaluate it.
-  const expression = compile.templateDocument(text);
-  const parentScope = parent ? Scope.getScope(parent) : builtins;
-  const lambda = await expression.call(parentScope);
-
-  // Wrap the lambda with a function that will attach the input data to the
-  // result.
-  /** @this {AsyncTree|null} */
-  const fn = async function createTemplateResult(templateInput) {
-    const text = await lambda.call(this, templateInput);
-    /** @type {any} */
-    const result = new String(text);
-    result.unpack = () => templateInput;
-    return result;
-  };
-  fn.code = lambda.code;
-
-  return processUnpackedContent(fn, parent, inputDocument);
-}

package/src/misc/explore.orit

@@ -1,241 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <title>Web Origami Explorer</title>
-    <style>
-      * {
-        box-sizing: border-box;
-      }
-
-      html {
-        height: 100%;
-      }
-
-      body {
-        background: #333;
-        color: #eee;
-        display: grid;
-        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-        font-size: 13px;
-        grid-template-columns: 200px 1fr;
-        grid-template-rows: minMax(0, 1fr);
-        height: 100%;
-        margin: 0;
-        overflow: hidden;
-      }
-
-      nav {
-        display: grid;
-        gap: 1em;
-        grid-auto-rows: min-content;
-        grid-template-columns: minmax(0, 1fr);
-        overflow: auto;
-        padding: 1em 0.5em;
-      }
-
-      #label {
-        font-weight: bold;
-      }
-
-      #scopeToolbar {
-        display: grid;
-        grid-template-columns: repeat(4, auto);        
-      }
-
-      button {
-        background: transparent;
-        border: solid 1px #555;
-        color: inherit;
-        font-size: smaller;
-        font-family: inherit;
-        font-weight: inherit;
-        padding: 0.25em;
-      }
-      button:hover {
-        border-color: #999;
-      }
-      button:active {
-        border-color: #eee;
-      }
-      button[aria-pressed="true"] {
-        background: #555;
-      }
-
-      ul {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-      }
-
-      h2 {
-        color: #999;
-        font-size: inherit;
-        margin: 0.25em 0;
-        padding-left: 0.25em;
-      }
-
-      li {
-        padding: 0.25em;
-        padding-left: 1em;
-        text-indent: -0.75em;
-      }
-
-      a {
-        color: inherit;
-        text-decoration: none;
-      }
-
-      iframe {
-        background: white;
-        border: none;
-        height: 100%;
-        width: 100%;
-      }
-    </style>
-    <script>
-      let defaultPath;
-      let path;
-      let frame;
-
-      const modes = {
-        Content: "",
-        Index: "!@index",
-        YAML: "!@yaml",
-        SVG: "!@svg",
-      };
-
-      // Extract the path from the URL hash.
-      function getPathFromHash() {
-        return window.location.hash.slice(1); // Remove `#`
-      }
-
-      function getModeFromLocation() {
-        const href = document.location.href;
-        const match = /[\/](?<command>\!(?:@index|@yaml|@svg))$/.exec(href);
-        const command = match?.groups.command ?? "";
-        const mode = Object.keys(modes).find(key => modes[key] === command) ?? "Content";
-        return mode;
-      }
-
-      function removeDocumentPath(path) {
-        const documentPath = document.location.pathname;
-        if (path.startsWith(documentPath)) {
-          // Remove the document path prefix.
-          path = path.slice(documentPath.length);
-        }
-        if (path.startsWith("/")) {
-          // Remove the leading slash.
-          path = path.slice(1);
-        }
-        return path;
-      }
-
-      function selectMode(newMode) {
-        const currentMode = getModeFromLocation();
-        if (newMode !== currentMode) {
-          let newPath = removeDocumentPath(frame.contentDocument.location.pathname);
-          const currentExtension = modes[currentMode];
-          if (currentExtension && newPath.endsWith(currentExtension)) {
-            // Remove the current extension.
-            newPath = newPath.slice(0, -currentExtension.length);
-          }
-          const newExtension = modes[newMode];
-          const separator = newPath.endsWith("/") ? "" : "/";
-          const newFullPath = `${newPath}${separator}${newExtension}`;
-          setPath(newFullPath);
-        }
-      }
-
-      function setPath(path) {
-        currentPath = path;
-
-        // Show the indicated page in the frame.
-        const abbreviatedPath = `/${path}`;
-        const fullPath = `${document.location.pathname}/${path}`;
-        const framePathname = frame.contentDocument.location.pathname;
-        if (framePathname !== abbreviatedPath && framePathname !== fullPath) {
-          // Use `replace` to avoid affecting browser history.
-          frame.contentWindow.location.replace(fullPath);
-        }
-
-        // If the path ends with a file name corresponding to a mode, select
-        // the corresponding mode button.
-        const mode = getModeFromLocation();
-        const selectedButtonId = `button${mode}`;
-        scopeToolbar.querySelectorAll("button").forEach(button => {
-          const pressed = button.id === selectedButtonId ? "true" : "false";
-          button.setAttribute("aria-pressed", pressed);
-        });
-      }
-
-      // When hash changes, load the indicated page.
-      window.addEventListener("hashchange", () => {
-        const hashPath = getPathFromHash();
-        const newPath = hashPath !== undefined ? hashPath : defaultPath;
-        if (newPath) {
-          setPath(newPath);
-        }
-      });
-
-      // Initialize
-      window.addEventListener("load", () => {
-        // Refresh title on page load.
-        frame = document.getElementById("frame");
-        frame.addEventListener("load", () => {
-          if (frame.contentDocument.location.href !== "about:blank") {
-            document.title = frame.contentDocument.title;
-            const newPath = removeDocumentPath(frame.contentDocument.location.pathname);
-            const hash = `#${newPath}`;
-            if (window.location.hash !== hash) {
-              // Use `replace` to avoid affecting browser history.
-              window.location.replace(hash);
-            }
-          }
-        });
-
-        buttonContent.addEventListener("click", () => {
-          selectMode("Content");
-        });
-        buttonIndex.addEventListener("click", () => {
-          selectMode("Index");
-        });
-        buttonYAML.addEventListener("click", () => {
-          selectMode("YAML");
-        });
-        buttonSVG.addEventListener("click", () => {
-          selectMode("SVG");
-        });
-
-        // Navigate to any path already in the hash.
-        defaultPath = getPathFromHash();
-        if (defaultPath) {
-          setPath(defaultPath);
-        }
-      })
-    </script>
-  </head>
-  <body>
-    <nav>
-    <div id="label">Web Origami Explorer</div>
-    <div id="scopeToolbar">
-      <button id="buttonContent">Content</button>
-      <button id="buttonIndex">Index</button>
-      <button id="buttonSVG">SVG</button>
-      <button id="buttonYAML">YAML</button>
-    </div>
-    {{ @map(=`
-      <ul>
-        <h2>{{ _/name }}</h2>
-        {{ @map(=`
-        <li>
-          <a href="./!@explore/{{ _ }}" target="frame">{{ _ }}</a>
-        </li>
-        `)(_/keys) }}
-      </ul>
-    `)(_) }}
-    </nav>
-    <iframe id="frame" name="frame"></iframe>
-  </body>
-</html>