@bookshop/hugo-engine 2.4.0-hugo.0

package/lib/engine.js

@@ -0,0 +1,134 @@
+import hugoWasm from "../hugo-renderer/hugo_renderer.wasm";
+import translateTextTemplate from './translateTextTemplate.js';
+import { IdentifierParser } from './hugoIdentifierParser.js';
+
+const sleep = (ms = 0) => {
+    return new Promise(r => setTimeout(r, ms));
+}
+
+const dig = (obj, path) => {
+    if (typeof path === 'string') path = path.replace(/\[(\d+)]/g, '.$1').split('.');
+    obj = obj[path.shift()];
+    if (obj && path.length) return dig(obj, path);
+    return obj;
+}
+
+export class Engine {
+    constructor(options) {
+        options = {
+            name: "Hugo",
+            files: {},
+            ...options,
+        };
+
+        this.key = 'hugo';
+        this.name = options.name;
+        this.files = options.files;
+
+        this.initializeHugo();
+    }
+
+    async initializeHugo() {
+        const scriptOrigin = document.currentScript?.src || `/bookshop.js`;
+        const wasmOrigin = scriptOrigin.replace(/\/[^\.\/]+\.js$/, hugoWasm.replace(/^\./, ''));
+        const go = new Go();
+        const response = await fetch(wasmOrigin);
+        const buffer = await response.arrayBuffer();
+        const result = await WebAssembly.instantiate(buffer, go.importObject);
+        go.run(result.instance)
+
+        // TODO: Tidy
+        const mappedFiles = {};
+        for (const file of Object.entries(this.files)) {
+            mappedFiles[file[0]] = {
+                contents: translateTextTemplate(file[1], {})
+            }
+        }
+
+        const success = window.loadHugoBookshopPartials(JSON.stringify(mappedFiles));
+    }
+
+    getShared(name) {
+        const key = `shared/hugo/${name}.hugo.html`
+        return this.files?.[key];
+    }
+
+    getComponentKey(name) {
+        const base = name.split("/").reverse()[0];
+        return `components/${name}/${base}.hugo.html`;
+    }
+
+    getComponent(name) {
+        const key = this.getComponentKey(name);
+        return this.files?.[key];
+    }
+
+    hasComponent(name) {
+        const key = this.getComponentKey(name);
+        return !!this.files?.[key];
+    }
+
+    resolveComponentType(name) {
+        if (this.getComponent(name)) return 'component';
+        if (this.getShared(name)) return 'shared';
+        return false;
+    }
+
+    transformData(data) {
+        return {
+            Params: data
+        };
+    }
+
+    async render(target, name, props, globals) {
+        while (!window.renderHugo) await sleep(10);
+
+        let source = this.getComponent(name);
+        // TODO: Remove the below check and update the live comments to denote shared
+        if (!source) source = this.getShared(name);
+        if (!source) {
+            console.warn(`[hugo-engine] No component found for ${name}`);
+            return "";
+        }
+        // TODO: this template already exists on the other side of the wasm bounary
+        source = translateTextTemplate(source, {});
+        if (!globals || typeof globals !== "object") globals = {};
+        props = { ...globals, ...props };
+        const output = window.renderHugo(source, JSON.stringify(props));
+        target.innerHTML = output;
+    }
+
+    async eval(str, props = [{}]) {
+        while (!window.renderHugo) await sleep(10);
+        const props_obj = props.reduce((a, b) => { return { ...b, ...a } });
+
+        // We're capable of looking up a simple variable
+        // (and it's hard to pass to wasm since we store variables on the context)
+        if (/^\$/.test(str)) {
+            return props_obj[str] ?? null;
+        }
+
+        // Rewrite array.0 into index array 0
+        str = str.replace(/(.*)\.(\d+)$/, (_, obj, index) => {
+            return `index (${obj}) ${index}`;
+        })
+
+        const eval_str = `{{ jsonify (${str}) }}`;
+        const output = window.renderHugo(eval_str, JSON.stringify(props_obj));
+
+        try {
+            return JSON.parse(output);
+        } catch (e) {
+            console.error(`Error evaluating \`${str}\` in the Hugo engine`, output);
+            return null;
+        }
+    }
+
+    normalize(str) {
+        return (new IdentifierParser(str)).build();
+    }
+
+    loader() {
+        // esbuild loader if required
+    }
+}

package/lib/engine.test.js

@@ -0,0 +1,5 @@
+import test from 'ava';
+
+test("stub", async t => {
+    t.pass()
+});

package/lib/hugoIdentifierParser.js

@@ -0,0 +1,324 @@
+const TOKENS = {
+  DELIM: /"|'|`/,
+  ESCAPE: /\\/,
+  SPACE: /\s/,
+  INSCOPE: /\(/,
+  OUTSCOPE: /\)/,
+  SCOPE: /\./,
+}
+
+/**
+ * Takes in an identifier string and returns a Javascript-friendly version
+ * Usually, this is in the form of convering a dict to an object
+ */
+export class IdentifierParser {
+  constructor(input) {
+    this.input = input;
+    this.stream = [];
+    this.state = `START`;
+    this.deps = {};
+    this.output = this.input;
+  }
+
+  // Some short-circuits for easy to regex patterns to skip the parser
+  tryShortCircuit() {
+    // change the index function into Bookshop dot notation
+    const indexFunc = /^\s*\(\s*index\s+\(?\.?(.+?)\)?\s+(\d+)\s*\)\s*$/
+    if (indexFunc.test(this.input)) {
+      const [, variable, index] = this.input.match(indexFunc);
+      return `${variable}.${index}`;
+    }
+
+    // strip the leading . from basic variable references
+    const variableDot = /^\s*\.([^\.\s])/;
+    if (/^\s*\./.test(this.input)) {
+      return this.input.replace(/^\s*\.([^\.\s])/, '$1');
+    }
+
+    return null;
+  }
+
+  build() {
+    let transformedStr = this.tryShortCircuit();
+    if (transformedStr) return transformedStr;
+
+    this.stream = this.input.split('');
+    while (this.stream.length && this.state !== `BREAK`) {
+      this.process(this.stream.shift());
+    }
+    // Flush any lingering value
+    this.process(' ');
+
+    return this.output;
+  }
+
+  process(t) {
+    switch (this.state) {
+      case `START`:
+        return this.processSTART(t);
+      case `FUNC`:
+        return this.processFUNC(t);
+      case `DICT_IDENT`:
+        return this.processDICT_IDENT(t);
+      case `DICT_VALUE`:
+        return this.processDICT_VALUE(t);
+      case `SLICE`:
+        return this.processSLICE(t);
+    }
+  }
+
+  processSTART(t) {
+    if (TOKENS.SPACE.test(t)) { return };
+
+    if (!TOKENS.INSCOPE.test(t)) {
+      this.state = `BREAK`;
+      return;
+    };
+
+    this.state = `FUNC`;
+  }
+
+  processFUNC(t) {
+    if (TOKENS.SPACE.test(t) && !this.deps.started) { return };
+    this.deps.func = this.deps.func || '';
+    this.deps.started = true;
+
+    //      ↓
+    // (dict "a" "b")
+    if (TOKENS.SPACE.test(t)) {
+      switch (this.deps.func) {
+        case "dict":
+          this.state = `DICT_IDENT`;
+          this.output = {};
+          this.deps = {};
+          return;
+        case "slice":
+          this.state = `SLICE`;
+          this.output = [];
+          this.deps = {};
+          return;
+        default:
+          this.state = `BREAK`;
+          return;
+      }
+    }
+
+    //  ↓↓↓↓
+    // (dict "key" "value")
+    this.deps.func += t;
+  }
+
+  processDICT_IDENT(t) {
+    // skip leading whitespace
+    if (TOKENS.SPACE.test(t) && !this.deps.started) { return };
+    this.deps.identifier = this.deps.identifier || '';
+    this.deps.started = true;
+
+    //       ↓
+    // (dict "key" "value")
+    if (TOKENS.DELIM.test(t) && !this.deps.delim) {
+      return this.deps.delim = new RegExp(t);
+    }
+
+    if (TOKENS.OUTSCOPE.test(t)) {
+      if (this.deps.identifier.length) {
+        throw new Error(`Tried to parse a bad dict: ${this.input}`);
+      }
+      return this.state = 'BREAK';
+    }
+
+    //       ↓
+    // (dict key "value")
+    if (!this.deps.delim) {
+      throw new Error(`Tried to parse a bad dict: ${this.input}`);
+    }
+
+    //           ↓
+    // (dict "ke\"y" "value")
+    if (this.deps.escape) {
+      this.deps.identifier += t;
+      this.deps.escape = false;
+      return;
+    }
+
+    //           ↓
+    // (dict "key" "value")
+    if (this.deps.delim && this.deps.delim.test(t)) {
+      this.state = 'DICT_VALUE';
+      this.deps = { identifier: this.deps.identifier };
+      return;
+    }
+
+    //          ↓
+    // (dict "ke\"y" "value")
+    if (TOKENS.ESCAPE.test(t)) {
+      return this.deps.escape = true;
+    }
+
+    //        ↓↓↓
+    // (dict "key" "value")
+    this.deps.identifier += t;
+    this.deps.escape = false;
+  }
+
+  processDICT_VALUE(t) {
+    // skip leading whitespace
+    if (TOKENS.SPACE.test(t) && !this.deps.started) { return };
+    this.deps.value = this.deps.value || '';
+    this.deps.started = true;
+
+    //                 ↓
+    // (dict "key" "va\"lue")
+    if (this.deps.escape) {
+      this.deps.value += t;
+      this.deps.escape = false;
+      return;
+    }
+
+    //                ↓
+    // (dict "key" "va\"lue")
+    if (TOKENS.ESCAPE.test(t)) {
+      this.deps.escape = true;
+      return;
+    }
+
+    //             ↓↓↓↓↓↓↓
+    // (dict "key" "value")
+    this.deps.value += t;
+
+    if (!this.deps.delim) {
+      //             ↓
+      // (dict "key" "value")
+      if (TOKENS.DELIM.test(t)) {
+        return this.deps.delim = new RegExp(t);
+      }
+      //             ↓
+      // (dict "key" (slice 1 2 3))
+      if (TOKENS.INSCOPE.test(t)) {
+        return this.deps.delim = TOKENS.OUTSCOPE;
+      }
+
+      this.deps.delim = TOKENS.SPACE
+
+      //             ↓
+      // (dict "key" .variable)
+      if (!TOKENS.SPACE.test(t)) {
+        return;
+      }
+    }
+
+    //                         ↓
+    // (dict "key" (slice 1 2 3))
+    if (this.deps.delimDepth && this.deps.delim.test(t)) {
+      return this.deps.delimDepth -= 1;
+    }
+
+    //                 ↓
+    // (dict "key" .var)
+    if (!this.deps.delimDepth && this.deps.delim !== TOKENS.OUTSCOPE && TOKENS.OUTSCOPE.test(t)) {
+      if (this.deps.delim !== TOKENS.OUTSCOPE) this.deps.value = this.deps.value.replace(/.$/, '');
+      this.output[this.deps.identifier] = (new IdentifierParser(this.deps.value)).build();
+      this.state = 'BREAK';
+      this.deps = {};
+      return;
+    }
+
+    //                 ↓                ↓
+    // (dict "key" .var "key2" (len .arr))
+    if (this.deps.delim.test(t)) {
+      if (this.deps.delim === TOKENS.SPACE) this.deps.value = this.deps.value.replace(/.$/, '');
+      this.output[this.deps.identifier] = (new IdentifierParser(this.deps.value)).build();
+      this.state = 'DICT_IDENT';
+      this.deps = {};
+      return;
+    }
+
+    // Handed nested parentheses
+    //             ↓
+    // (dict "key" (slice 1 2 3))
+    if (this.deps.delim === TOKENS.OUTSCOPE && TOKENS.INSCOPE.test(t)) {
+      this.deps.delimDepth = this.deps.delimDepth || 0;
+      this.deps.delimDepth += 1;
+    }
+  }
+
+  processSLICE(t) {
+    // skip leading whitespace
+    if (TOKENS.SPACE.test(t) && !this.deps.started) { return };
+    this.deps.value = this.deps.value || '';
+    this.deps.started = true;
+
+    //                    ↓
+    // (slice "value" "va\"lue")
+    if (this.deps.escape) {
+      this.deps.value += t;
+      this.deps.escape = false;
+      return;
+    }
+
+    //                   ↓
+    // (slice "value" "va\"lue")
+    if (TOKENS.ESCAPE.test(t)) {
+      this.deps.escape = true;
+      return;
+    }
+
+    //        ↓↓↓↓↓↓↓ ↓↓↓↓↓↓
+    // (slice "value" .value)
+    this.deps.value += t;
+
+    if (!this.deps.delim) {
+      //        ↓
+      // (slice "value")
+      if (TOKENS.DELIM.test(t)) {
+        return this.deps.delim = new RegExp(t);
+      }
+      //                ↓
+      // (slice "value" (slice 1 2 3))
+      if (TOKENS.INSCOPE.test(t)) {
+        return this.deps.delim = TOKENS.OUTSCOPE;
+      }
+
+      this.deps.delim = TOKENS.SPACE
+
+      //                ↓
+      // (slice "value" .variable)
+      if (!TOKENS.SPACE.test(t)) {
+        return;
+      }
+    }
+
+    //                            ↓
+    // (slice "value" (slice 1 2 3))
+    if (this.deps.delimDepth && this.deps.delim.test(t)) {
+      return this.deps.delimDepth -= 1;
+    }
+
+    //                    ↓
+    // (slice "value" .var)
+    if (!this.deps.delimDepth && TOKENS.OUTSCOPE.test(t)) {
+      this.deps.value = this.deps.value.replace(/.$/, '')
+      this.output.push((new IdentifierParser(this.deps.value)).build());
+      this.state = 'BREAK';
+      this.deps = {};
+      return;
+    }
+
+    //              ↓      ↓
+    // (slice "value" .val2 3)
+    if (this.deps.delim.test(t)) {
+      if (this.deps.delim === TOKENS.SPACE) this.deps.value = this.deps.value.replace(/.$/, '');
+      this.output.push((new IdentifierParser(this.deps.value)).build());
+      this.deps = {};
+      return;
+    }
+
+    // Handed nested parentheses
+    //                ↓
+    // (slice "value" (slice 1 2 3))
+    if (this.deps.delim === TOKENS.OUTSCOPE && TOKENS.INSCOPE.test(t)) {
+      this.deps.delimDepth = this.deps.delimDepth || 0;
+      this.deps.delimDepth += 1;
+    }
+  }
+}

package/lib/hugoIdentifierParser.test.js

@@ -0,0 +1,72 @@
+import test from 'ava';
+import { IdentifierParser } from './hugoIdentifierParser.js';
+
+test(`Dict with parameter`, async t => {
+    const ident = `(dict "contents" .Params.contents)`;
+    const output = (new IdentifierParser(ident)).build();
+    t.deepEqual(output, {
+        "contents": "Params.contents"
+    });
+});
+
+test(`Dict with string`, async t => {
+    const ident = `(dict "title" "text")`;
+    const output = (new IdentifierParser(ident)).build();
+    t.deepEqual(output, {
+        "title": `"text"`
+    });
+});
+
+test(`Dict with parentheses`, async t => {
+    const ident = `(dict "length" (len .arr))`;
+    const output = (new IdentifierParser(ident)).build();
+    t.deepEqual(output, {
+        "length": "(len .arr)"
+    });
+});
+
+
+test(`Larger dict`, async t => {
+    const ident = `(dict "title" "text" "contents" .Params.contents "number" 5)`;
+    const output = (new IdentifierParser(ident)).build();
+    t.deepEqual(output, {
+        "title": `"text"`,
+        "contents": "Params.contents",
+        "number": "5"
+    });
+});
+
+test(`Slice`, async t => {
+    const ident = `(slice "text" .Params.contents 5)`;
+    const output = (new IdentifierParser(ident)).build();
+    t.deepEqual(output, [`"text"`, "Params.contents", "5"]);
+});
+
+test(`Unknown functions untouched`, async t => {
+    const ident = `(len .array)`;
+    const output = (new IdentifierParser(ident)).build();
+    t.deepEqual(output, `(len .array)`);
+});
+
+test(`Values untouched`, async t => {
+    const ident = `"Something"`;
+    const output = (new IdentifierParser(ident)).build();
+    t.deepEqual(output, `"Something"`);
+});
+
+test(`Nested dicts and slices`, async t => {
+    const ident = `(dict "contents" (slice 1 "2" (dict "a" .Params.b)) "len" (len .some_array))`;
+    const output = (new IdentifierParser(ident)).build();
+    t.deepEqual(output, {
+        "contents": ["1", `"2"`, {
+            "a": "Params.b"
+        }],
+        "len": "(len .some_array)"
+    });
+});
+
+test(`Converts an index into dot notation`, async t => {
+    const ident = `(index (.items) 5)`;
+    const output = (new IdentifierParser(ident)).build();
+    t.deepEqual(output, `items.5`);
+});

package/lib/translateTextTemplate.js

@@ -0,0 +1,58 @@
+import { Tokenizer } from 'liquidjs';
+
+const tokens = {
+    END: /{{\s*end\s*}}/,
+    LOOP: /{{\s*range\s+(.+?)\s*}}/,
+    ASSIGN: /{{\s*(\$\S+)\s+:=\s+(.+?)\s*}}/,
+    BOOKSHOP: /{{\s*partial\s+"bookshop(?:_partial)?"\s+\(\s*slice\s+"(.+?)" (.+?)\s*\)\s*}}/,
+}
+
+/**
+ * Parse a go text/template using the liquidjs parser
+ * that we already have in the bundle.
+ * All go templating tags will come through as value tokens.
+ */
+const rewriteTag = function (token, src, liveMarkup) {
+    let raw = token.getText();
+
+    // Skip non-value tags
+    if (token.kind !== 8) return src;
+    if (tokens.END.test(raw)) return src;
+
+    if (liveMarkup && tokens.LOOP.test(raw)) {
+        let [, iterator] = raw.match(tokens.LOOP);
+        raw = [`{{ $bookshop__live__iterator := 0 }}`,
+            `${raw}`,
+            `{{ (printf \`<!--bookshop-live context(.: (index (${iterator}) %d))-->\` $bookshop__live__iterator) | safeHTML }}`,
+            `{{ $bookshop__live__iterator = (add $bookshop__live__iterator 1) }}`
+        ].join('')
+    } else if (liveMarkup && tokens.ASSIGN.test(raw)) {
+        let [, identifier, value] = raw.match(tokens.ASSIGN);
+        raw = `${raw}{{ \`<!--bookshop-live context(${identifier}: ${value})-->\` | safeHTML }}`
+    } else if (liveMarkup && tokens.BOOKSHOP.test(raw)) {
+        let [, name, params] = raw.match(tokens.BOOKSHOP);
+        raw = `{{ \`<!--bookshop-live name(${name}) params(.: ${params})-->\` | safeHTML }}${raw}{{ \`<!--bookshop-live end-->\` | safeHTML }}`
+    }
+
+    return [
+        src.substr(0, token.begin),
+        raw,
+        src.substr(token.end)
+    ].join('');
+}
+
+export default function (text, opts) {
+    opts = {
+        liveMarkup: true,
+        ...opts
+    }
+    text = text.toString();
+    const tokenizer = new Tokenizer(text);
+    const output = tokenizer.readTopLevelTokens();
+
+    output.reverse().forEach(tag => {
+        text = rewriteTag(tag, text, opts.liveMarkup);
+    });
+
+    return text;
+};

package/lib/translateTextTemplate.test.js

@@ -0,0 +1,39 @@
+import test from 'ava';
+import translateTextTemplate from './translateTextTemplate.js';
+
+test("add live markup to bookshop tags", t => {
+    const input = `{{ partial "bookshop" (slice "content" (dict "content_html" .Params.note_html "type" "note")) }}`;
+    const expected = [
+        `{{ \`<!--bookshop-live name(content) params(.: (dict "content_html" .Params.note_html "type" "note"))-->\` | safeHTML }}`,
+        `{{ partial "bookshop" (slice "content" (dict "content_html" .Params.note_html "type" "note")) }}`,
+        `{{ \`<!--bookshop-live end-->\` | safeHTML }}`
+    ].join('');
+    t.is(translateTextTemplate(input, {}), expected);
+});
+
+test("add live markup to bookshop_partial tags", t => {
+    const input = `{{ partial "bookshop_partial" (slice "helper" (dict "text" "input")) }}`;
+    const expected = [
+        `{{ \`<!--bookshop-live name(helper) params(.: (dict "text" "input"))-->\` | safeHTML }}`,
+        `{{ partial "bookshop_partial" (slice "helper" (dict "text" "input")) }}`,
+        `{{ \`<!--bookshop-live end-->\` | safeHTML }}`
+    ].join('');
+    t.is(translateTextTemplate(input, {}), expected);
+});
+
+test("add live markup to assigns", t => {
+    const input = `{{ $a := .b }}`;
+    const expected = `{{ $a := .b }}{{ \`<!--bookshop-live context($a: .b)-->\` | safeHTML }}`;
+    t.is(translateTextTemplate(input, {}), expected);
+});
+
+test("add live markup to loops", t => {
+    const input = `{{ range .items }}<p>{{ . }}</p>{{ end }}`;
+    const expected = [`{{ $bookshop__live__iterator := 0 }}`,
+        `{{ range .items }}`,
+        `{{ (printf \`<!--bookshop-live context(.: (index (.items) %d))-->\` $bookshop__live__iterator) | safeHTML }}`,
+        `{{ $bookshop__live__iterator = (add $bookshop__live__iterator 1) }}`,
+        `<p>{{ . }}</p>{{ end }}`
+    ].join('');
+    t.is(translateTextTemplate(input, {}), expected);
+});

package/main.js

@@ -0,0 +1 @@
+export {Engine} from './lib/engine.js';

package/main.test.js

@@ -0,0 +1,5 @@
+import test from 'ava';
+
+test("stub", async t => {
+    t.pass()
+});

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@bookshop/hugo-engine",
+  "packageManager": "yarn@3.0.0",
+  "version": "2.4.0-hugo.0",
+  "description": "Bookshop frontend Hugo renderer",
+  "type": "module",
+  "sideEffects": false,
+  "main": "main.js",
+  "exports": {
+    ".": "./main.js",
+    "./build": "./build.js"
+  },
+  "scripts": {
+    "test": "nyc ava -v"
+  },
+  "author": "@bglw",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "ava": "^3.15.0",
+    "nyc": "^15.1.0"
+  },
+  "dependencies": {
+    "@bookshop/helpers": "2.4.0-hugo.0",
+    "esbuild": "^0.13.10"
+  },
+  "engines": {
+    "node": ">=14.16"
+  }
+}