@prairielearn/html 1.0.0

package/.turbo/turbo-build.log

@@ -0,0 +1,3 @@
+@prairielearn/html:build: cache hit, replaying output c36dba0838eb5e15
+@prairielearn/html:build: warning package.json: No license field
+@prairielearn/html:build: $ tsc

package/README.md

@@ -0,0 +1,69 @@
+# `@prairielearn/html`
+
+Utilities for easily rendering HTML from within JavaScript.
+
+## Usage
+
+The `html` tagged template literal can be used to render HTML while ensuring that any interpolated values are properly escaped.
+
+By convention, HTML templates are located in `*.html.tmpl.js` files.
+
+```js
+// Hello.html.tmpl.js
+const { hmtl } = require('@prairielearn/html');
+
+module.exports.Hello = function Hello({ name }) {
+  return html`<div>Hello, ${name}!</div>`;
+};
+```
+
+This can then be used to render a string:
+
+```js
+const { Hello } = require('./Hello');
+
+console.log(Hello({ name: 'Anjali' }).toString());
+// Prints "<div>Hello, Anjali!</div>"
+```
+
+### Using escaped HTML
+
+If you want to pre-escape some HTML, you can wrap it in `escapeHtml` to avoid escaping it twice. This is useful if you want to inline some HTML into an attribute, for instance with a Bootstrap popover.
+
+```js
+const { html, escapeHtml } = require('@prairielearn/html');
+
+console.log(html`
+  <button data-bs-toggle="popover" data-bs-content="${escapeHtml(html`<div>Content here</div>`)}">
+    Open popover
+  </button>
+`);
+```
+
+### Using with EJS
+
+If you have an EJS partial that you'd like to use inside of an `html` tagged template literal, you can use the `renderEjs` helper:
+
+```html
+<!-- hello.ejs -->
+Hello, <%= name %>!
+```
+
+```js
+const { hmtl, renderEjs } = require('@prairielearn/html');
+
+console.log(
+  html`
+    <div>Hello, world!</div>
+    <div>${renderEjs(__filename, "<%- include('./hello'); %>", { name: 'Anjali' })}</div>
+  `.toString()
+);
+```
+
+## Why not EJS?
+
+PrairieLearn used (and still uses) EJS to render most views. However, using a tagged template literal and pure JavaScript to render views has a number of advantages:
+
+- Prettier will automatically format the content of any `html` tagged template literal; EJS does not have any automatic formatters.
+- Authoring views in pure JavaScript allows for easier and more explicit composition of components.
+- It's possible to use ESLint and TypeScript to type-check JavaScript views; EJS does not offer support for either.

package/dist/index.d.ts

@@ -0,0 +1,34 @@
+export declare class HtmlSafeString {
+    private readonly strings;
+    private readonly values;
+    constructor(strings: ReadonlyArray<string>, values: unknown[]);
+    toString(): string;
+}
+export declare function html(strings: TemplateStringsArray, ...values: any[]): HtmlSafeString;
+/**
+ * Pre-escpapes the rendered HTML. Useful for when you want to inline the HTML
+ * in something else, for instance in a `data-content` attribute for a Bootstrap
+ * popover.
+ */
+export declare function escapeHtml(html: HtmlSafeString): HtmlSafeString;
+/**
+ * Will render the provided value without any additional escaping. Use carefully
+ * with user-provided data.
+ *
+ * @param value The value to render.
+ * @returns An {@link HtmlSafeString} representing the provided value.
+ */
+export declare function unsafeHtml(value: string): HtmlSafeString;
+/**
+ * This is a shim to allow for the use of EJS templates inside of HTML tagged
+ * template literals.
+ *
+ * The resulting string is assumed to be appropriately escaped and will be used
+ * verbatim in the resulting HTML.
+ *
+ * @param filename The name of the file from which relative includes should be resolved.
+ * @param template The raw EJS template string.
+ * @param data Any data to be made available to the template.
+ * @returns The rendered EJS.
+ */
+export declare function renderEjs(filename: string, template: string, data?: any): HtmlSafeString;

package/dist/index.js

@@ -0,0 +1,88 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.renderEjs = exports.unsafeHtml = exports.escapeHtml = exports.html = exports.HtmlSafeString = void 0;
+var ejs_1 = __importDefault(require("ejs"));
+var path_1 = __importDefault(require("path"));
+function escapeValue(value) {
+    if (value instanceof HtmlSafeString) {
+        // Already escaped!
+        return value.toString();
+    }
+    else if (Array.isArray(value)) {
+        return value.map(function (val) { return escapeValue(val); }).join('');
+    }
+    else if (typeof value === 'string' || typeof value === 'number') {
+        return ejs_1["default"].escapeXML(String(value));
+    }
+    else if (typeof value === 'object') {
+        throw new Error('Cannot interpolate object in template');
+    }
+    else {
+        // This is undefined, null, or a boolean - don't render anything here.
+        return '';
+    }
+}
+// Based on https://github.com/Janpot/escape-html-template-tag
+var HtmlSafeString = /** @class */ (function () {
+    function HtmlSafeString(strings, values) {
+        this.strings = strings;
+        this.values = values;
+    }
+    HtmlSafeString.prototype.toString = function () {
+        var _this = this;
+        return this.values.reduce(function (acc, val, i) {
+            return acc + escapeValue(val) + _this.strings[i + 1];
+        }, this.strings[0]);
+    };
+    return HtmlSafeString;
+}());
+exports.HtmlSafeString = HtmlSafeString;
+function html(strings) {
+    var values = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        values[_i - 1] = arguments[_i];
+    }
+    return new HtmlSafeString(strings, values);
+}
+exports.html = html;
+/**
+ * Pre-escpapes the rendered HTML. Useful for when you want to inline the HTML
+ * in something else, for instance in a `data-content` attribute for a Bootstrap
+ * popover.
+ */
+function escapeHtml(html) {
+    return unsafeHtml(ejs_1["default"].escapeXML(html.toString()));
+}
+exports.escapeHtml = escapeHtml;
+/**
+ * Will render the provided value without any additional escaping. Use carefully
+ * with user-provided data.
+ *
+ * @param value The value to render.
+ * @returns An {@link HtmlSafeString} representing the provided value.
+ */
+function unsafeHtml(value) {
+    return new HtmlSafeString([value], []);
+}
+exports.unsafeHtml = unsafeHtml;
+/**
+ * This is a shim to allow for the use of EJS templates inside of HTML tagged
+ * template literals.
+ *
+ * The resulting string is assumed to be appropriately escaped and will be used
+ * verbatim in the resulting HTML.
+ *
+ * @param filename The name of the file from which relative includes should be resolved.
+ * @param template The raw EJS template string.
+ * @param data Any data to be made available to the template.
+ * @returns The rendered EJS.
+ */
+function renderEjs(filename, template, data) {
+    if (data === void 0) { data = {}; }
+    return unsafeHtml(ejs_1["default"].render(template, data, { views: [path_1["default"].dirname(filename)] }));
+}
+exports.renderEjs = renderEjs;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,4CAAsB;AACtB,8CAAwB;AAExB,SAAS,WAAW,CAAC,KAAc;IACjC,IAAI,KAAK,YAAY,cAAc,EAAE;QACnC,mBAAmB;QACnB,OAAO,KAAK,CAAC,QAAQ,EAAE,CAAC;KACzB;SAAM,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;QAC/B,OAAO,KAAK,CAAC,GAAG,CAAC,UAAC,GAAG,IAAK,OAAA,WAAW,CAAC,GAAG,CAAC,EAAhB,CAAgB,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KACtD;SAAM,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QACjE,OAAO,gBAAG,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;KACrC;SAAM,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QACpC,MAAM,IAAI,KAAK,CAAC,uCAAuC,CAAC,CAAC;KAC1D;SAAM;QACL,sEAAsE;QACtE,OAAO,EAAE,CAAC;KACX;AACH,CAAC;AAED,8DAA8D;AAC9D;IAIE,wBAAY,OAA8B,EAAE,MAAiB;QAC3D,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IAED,iCAAQ,GAAR;QAAA,iBAIC;QAHC,OAAO,IAAI,CAAC,MAAM,CAAC,MAAM,CAAS,UAAC,GAAG,EAAE,GAAG,EAAE,CAAC;YAC5C,OAAO,GAAG,GAAG,WAAW,CAAC,GAAG,CAAC,GAAG,KAAI,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;QACtD,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;IACtB,CAAC;IACH,qBAAC;AAAD,CAAC,AAdD,IAcC;AAdY,wCAAc;AAgB3B,SAAgB,IAAI,CAAC,OAA6B;IAAE,gBAAgB;SAAhB,UAAgB,EAAhB,qBAAgB,EAAhB,IAAgB;QAAhB,+BAAgB;;IAClE,OAAO,IAAI,cAAc,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;AAC7C,CAAC;AAFD,oBAEC;AAED;;;;GAIG;AACH,SAAgB,UAAU,CAAC,IAAoB;IAC7C,OAAO,UAAU,CAAC,gBAAG,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;AACpD,CAAC;AAFD,gCAEC;AAED;;;;;;GAMG;AACH,SAAgB,UAAU,CAAC,KAAa;IACtC,OAAO,IAAI,cAAc,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;AACzC,CAAC;AAFD,gCAEC;AAED;;;;;;;;;;;GAWG;AACH,SAAgB,SAAS,CAAC,QAAgB,EAAE,QAAgB,EAAE,IAAc;IAAd,qBAAA,EAAA,SAAc;IAC1E,OAAO,UAAU,CAAC,gBAAG,CAAC,MAAM,CAAC,QAAQ,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,CAAC,iBAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AACrF,CAAC;AAFD,8BAEC"}

package/dist/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.test.js

@@ -0,0 +1,52 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+exports.__esModule = true;
+var chai_1 = require("chai");
+var index_1 = require("./index");
+describe('html', function () {
+    it('escapes string value', function () {
+        chai_1.assert.equal((0, index_1.html)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["<p>", "</p>"], ["<p>", "</p>"])), '<script>').toString(), '<p>&lt;script&gt;</p>');
+    });
+    it('interpolates multiple values', function () {
+        chai_1.assert.equal((0, index_1.html)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["<p>", " and ", "</p>"], ["<p>", " and ", "</p>"])), 'cats', 'dogs').toString(), '<p>cats and dogs</p>');
+    });
+    it('escapes values when rendering array', function () {
+        var arr = ['cats>', '<dogs'];
+        chai_1.assert.equal(
+        // prettier-ignore
+        (0, index_1.html)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["<ul>", "</ul>"], ["<ul>", "</ul>"])), arr).toString(), '<ul>cats&gt;&lt;dogs</ul>');
+    });
+    it('does not double-escape values when rendering array', function () {
+        var arr = ['cats', 'dogs'];
+        chai_1.assert.equal(
+        // prettier-ignore
+        (0, index_1.html)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["<ul>", "</ul>"], ["<ul>", "</ul>"])), arr.map(function (e) { return (0, index_1.html)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["<li>", "</li>"], ["<li>", "</li>"])), e); })).toString(), '<ul><li>cats</li><li>dogs</li></ul>');
+    });
+    it('errors when interpolating object', function () {
+        chai_1.assert.throws(function () { return (0, index_1.html)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["<p>", "</p>"], ["<p>", "</p>"])), { foo: 'bar' }).toString(); }, 'Cannot interpolate object in template');
+    });
+    it('omits boolean values from template', function () {
+        chai_1.assert.equal((0, index_1.html)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["<p>", "", "</p>"], ["<p>", "", "</p>"])), true, false).toString(), '<p></p>');
+    });
+});
+describe('escapeHtml', function () {
+    it('escapes rendered HTML', function () {
+        chai_1.assert.equal((0, index_1.escapeHtml)((0, index_1.html)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["<p>Hello</p>"], ["<p>Hello</p>"])))).toString(), '&lt;p&gt;Hello&lt;/p&gt;');
+    });
+    it('works when nested inside html tag', function () {
+        chai_1.assert.equal((0, index_1.html)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["a", "b"], ["a", "b"])), (0, index_1.escapeHtml)((0, index_1.html)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["<p></p>"], ["<p></p>"]))))).toString(), 'a&lt;p&gt;&lt;/p&gt;b');
+    });
+});
+describe('renderEjs', function () {
+    it('renders EJS template without data', function () {
+        chai_1.assert.equal((0, index_1.renderEjs)(__filename, '<p>Hello</p>', {}).toString(), '<p>Hello</p>');
+    });
+    it('renders EJS template with data', function () {
+        chai_1.assert.equal((0, index_1.renderEjs)(__filename, '<p>Hello <%= name %></p>', { name: 'Divya' }).toString(), '<p>Hello Divya</p>');
+    });
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
+//# sourceMappingURL=index.test.js.map

package/dist/index.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.js","sourceRoot":"","sources":["../src/index.test.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@prairielearn/html",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch --preserveWatchOutput",
+    "test": "mocha --require ts-node/register src/index.test.ts"
+  },
+  "dependencies": {
+    "ejs": "^3.1.6"
+  },
+  "devDependencies": {
+    "@types/ejs": "^3.1.0",
+    "mocha": "^9.2.0",
+    "ts-node": "^10.5.0",
+    "typescript": "^4.5.5"
+  }
+}

package/src/index.test.ts

@@ -0,0 +1,65 @@
+import { assert } from 'chai';
+
+import { escapeHtml, html, renderEjs } from './index';
+
+describe('html', () => {
+  it('escapes string value', () => {
+    assert.equal(html`<p>${'<script>'}</p>`.toString(), '<p>&lt;script&gt;</p>');
+  });
+
+  it('interpolates multiple values', () => {
+    assert.equal(html`<p>${'cats'} and ${'dogs'}</p>`.toString(), '<p>cats and dogs</p>');
+  });
+
+  it('escapes values when rendering array', () => {
+    const arr = ['cats>', '<dogs'];
+    assert.equal(
+      // prettier-ignore
+      html`<ul>${arr}</ul>`.toString(),
+      '<ul>cats&gt;&lt;dogs</ul>'
+    );
+  });
+
+  it('does not double-escape values when rendering array', () => {
+    const arr = ['cats', 'dogs'];
+    assert.equal(
+      // prettier-ignore
+      html`<ul>${arr.map((e) => html`<li>${e}</li>`)}</ul>`.toString(),
+      '<ul><li>cats</li><li>dogs</li></ul>'
+    );
+  });
+
+  it('errors when interpolating object', () => {
+    assert.throws(
+      () => html`<p>${{ foo: 'bar' }}</p>`.toString(),
+      'Cannot interpolate object in template'
+    );
+  });
+
+  it('omits boolean values from template', () => {
+    assert.equal(html`<p>${true}${false}</p>`.toString(), '<p></p>');
+  });
+});
+
+describe('escapeHtml', () => {
+  it('escapes rendered HTML', () => {
+    assert.equal(escapeHtml(html`<p>Hello</p>`).toString(), '&lt;p&gt;Hello&lt;/p&gt;');
+  });
+
+  it('works when nested inside html tag', () => {
+    assert.equal(html`a${escapeHtml(html`<p></p>`)}b`.toString(), 'a&lt;p&gt;&lt;/p&gt;b');
+  });
+});
+
+describe('renderEjs', () => {
+  it('renders EJS template without data', () => {
+    assert.equal(renderEjs(__filename, '<p>Hello</p>', {}).toString(), '<p>Hello</p>');
+  });
+
+  it('renders EJS template with data', () => {
+    assert.equal(
+      renderEjs(__filename, '<p>Hello <%= name %></p>', { name: 'Divya' }).toString(),
+      '<p>Hello Divya</p>'
+    );
+  });
+});

package/src/index.ts

@@ -0,0 +1,75 @@
+import ejs from 'ejs';
+import path from 'path';
+
+function escapeValue(value: unknown): string {
+  if (value instanceof HtmlSafeString) {
+    // Already escaped!
+    return value.toString();
+  } else if (Array.isArray(value)) {
+    return value.map((val) => escapeValue(val)).join('');
+  } else if (typeof value === 'string' || typeof value === 'number') {
+    return ejs.escapeXML(String(value));
+  } else if (typeof value === 'object') {
+    throw new Error('Cannot interpolate object in template');
+  } else {
+    // This is undefined, null, or a boolean - don't render anything here.
+    return '';
+  }
+}
+
+// Based on https://github.com/Janpot/escape-html-template-tag
+export class HtmlSafeString {
+  private readonly strings: ReadonlyArray<string>;
+  private readonly values: unknown[];
+
+  constructor(strings: ReadonlyArray<string>, values: unknown[]) {
+    this.strings = strings;
+    this.values = values;
+  }
+
+  toString(): string {
+    return this.values.reduce<string>((acc, val, i) => {
+      return acc + escapeValue(val) + this.strings[i + 1];
+    }, this.strings[0]);
+  }
+}
+
+export function html(strings: TemplateStringsArray, ...values: any[]): HtmlSafeString {
+  return new HtmlSafeString(strings, values);
+}
+
+/**
+ * Pre-escpapes the rendered HTML. Useful for when you want to inline the HTML
+ * in something else, for instance in a `data-content` attribute for a Bootstrap
+ * popover.
+ */
+export function escapeHtml(html: HtmlSafeString): HtmlSafeString {
+  return unsafeHtml(ejs.escapeXML(html.toString()));
+}
+
+/**
+ * Will render the provided value without any additional escaping. Use carefully
+ * with user-provided data.
+ *
+ * @param value The value to render.
+ * @returns An {@link HtmlSafeString} representing the provided value.
+ */
+export function unsafeHtml(value: string): HtmlSafeString {
+  return new HtmlSafeString([value], []);
+}
+
+/**
+ * This is a shim to allow for the use of EJS templates inside of HTML tagged
+ * template literals.
+ *
+ * The resulting string is assumed to be appropriately escaped and will be used
+ * verbatim in the resulting HTML.
+ *
+ * @param filename The name of the file from which relative includes should be resolved.
+ * @param template The raw EJS template string.
+ * @param data Any data to be made available to the template.
+ * @returns The rendered EJS.
+ */
+export function renderEjs(filename: string, template: string, data: any = {}): HtmlSafeString {
+  return unsafeHtml(ejs.render(template, data, { views: [path.dirname(filename)] }));
+}

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "declaration": true,
+    "esModuleInterop": true,
+    "outDir": "./dist",
+    "rootDir": "src/",
+    "sourceMap": true
+  }
+}