Use Liquidjs instead of Liquid (github#16743)

* Install liquidjs, uninstall liquid

* Comment a bunch of stuff out to get going

* Fix invalid includes

* Fix all includes (path => 'path')

* Get the homepage to render

* Do link-in-list kinda

* Revert "Fix all includes (path => 'path')"

This reverts commit d6fead646353aa5041d9229470a62a1d487456b9.

* Support non-dynamic partials

* Extract getTemplate helper

* Do remaining custom Liquid tags

* Fix some custom tag bugs

* Moar bugs

* Re-add link tag

* Cleaner diff

* Actually fix extended markdown tags

* Fully comment out version matchers

* Smaller diff

* Rely only on Liquid internals for conditionals

* Use new operators option in Liquid engine

* Fix link.js

* Don't need options

* Updoot to the right doot

* Fix some bugs

* Fix another bug

* Pass a test

* Fix the translate bits

* Adjust a test

* Fix another invalid Liquid bug

* Two more borked translations

* Found some more

* Don't need this change

* Revert "Don't need this change"

This reverts commit a916d619747f0492865a69c3e237c97c4d4e7fad.

* This should fix the broken links

* Missed one

* Revert "This should fix the broken links"

This reverts commit e6c2cc0d9055d958706260d57edbe293281c150e.

* Revert "Missed one"

This reverts commit bbe1f23baf16e020f6f7931589decb1afc75dfbd.

* Updoot liquidjs

content/actions/index.md

@@ -66,7 +66,7 @@ versions:
   </div>
 
   <div class="d-flex flex-wrap gutter">
-    {% render 'code-example-card' for actionsCodeExamples as example %}
+    {% render code-example-card for actionsCodeExamples as example %}
   </div>
 
   <button class="js-filter-card-show-more btn btn-outline float-right" data-js-filter-card-max="6">Show more {% octicon "arrow-right" %}</button>

content/discussions/index.md

@@ -40,7 +40,7 @@ versions:
   <h2 class="mb-2 font-mktg h1">Communities using discussions</h2>
 
   <div class="d-flex flex-wrap gutter">
-    {% render 'discussions-community-card' for discussionsCommunityExamples as example %}
+    {% render discussions-community-card for discussionsCommunityExamples as example %}
   </div>
   {% if discussionsCommunityExamples.length > 6 %}
     <button class="js-filter-card-show-more btn btn-outline float-right" data-js-filter-card-max="6">Show more {% octicon "arrow-right" %}</button>

layouts/product-landing.html

@@ -120,7 +120,7 @@ <h2 class="font-mktg h1 mb-2">Guides</h2>
 
             <div class="d-lg-flex gutter-lg flex-items-stretch">
               {% assign guideCards = featuredLinks.guideCards %}
-              {% render "guide-card" for guideCards as guide %}
+              {% render guide-card for guideCards as guide %}
             </div>
 
             <a href="{{ currentPath }}/guides" class="btn btn-outline float-right">Explore guides {% octicon "arrow-right" %}</a>

lib/liquid-tags/data.js

@@ -1,23 +1,20 @@
-const Liquid = require('liquid')
+const { TokenizationError } = require('liquidjs')
 
 const Syntax = /([a-z0-9/\\_.\-[\]]+)/i
 const SyntaxHelp = "Syntax Error in 'data' - Valid syntax: data [path]"
 
-module.exports = class Data extends Liquid.Tag {
-  constructor (template, tagName, markup) {
-    super(template, tagName, markup)
-
-    const match = Syntax.exec(markup)
-    if (!match) {
-      throw new Liquid.SyntaxError(SyntaxHelp)
+module.exports = {
+  parse (tagToken) {
+    if (!tagToken || !Syntax.test(tagToken.args)) {
+      throw new TokenizationError(SyntaxHelp, tagToken)
     }
 
-    this.path = match[1]
-  }
+    this.path = tagToken.args
+  },
 
-  async render (context) {
-    const value = await context.get(`site.data.${this.path}`)
+  async render (scope) {
+    const value = await this.liquid.evalValue(`site.data.${this.path}`, scope)
     if (typeof value !== 'string') return value
-    return this.template.engine.parseAndRender(value, context)
+    return this.liquid.parseAndRender(value, scope.environments)
   }
 }

lib/liquid-tags/extended-markdown.js

@@ -1,5 +1,3 @@
-const Liquid = require('liquid')
-
 const tags = {
   mac: '',
   windows: '',
@@ -13,11 +11,26 @@ const tags = {
 
 const template = '<div class="extended-markdown {{ tagName }} {{ classes }}">{{ output }}</div>'
 
-class ExtendedMarkdown extends Liquid.Block {
-  async render (context) {
-    const chunks = await super.render(context)
-    const output = Liquid.Helpers.toFlatString(chunks)
-    return this.template.engine.parseAndRender(template, {
+const ExtendedMarkdown = {
+  type: 'block',
+
+  parse (tagToken, remainTokens) {
+    this.tagName = tagToken.name
+    this.templates = []
+
+    const stream = this.liquid.parser.parseStream(remainTokens)
+    stream
+      .on(`tag:end${this.tagName}`, () => stream.stop())
+      .on('template', tpl => this.templates.push(tpl))
+      .on('end', () => {
+        throw new Error(`tag ${tagToken.getText()} not closed`)
+      })
+    stream.start()
+  },
+
+  render: function * (scope) {
+    const output = yield this.liquid.renderer.renderTemplates(this.templates, scope)
+    return yield this.liquid.parseAndRender(template, {
       tagName: this.tagName,
       classes: tags[this.tagName],
       output

lib/liquid-tags/homepage-link-with-intro.js

@@ -1,4 +1,3 @@
-const Link = require('./link')
-
 // For details, see class method in lib/liquid-tags/link.js
-module.exports = class HomepageLinkWithIntro extends Link {}
+const link = require('./link')
+module.exports = link('homepage-link-with-intro')

lib/liquid-tags/indented-data-reference.js

@@ -1,4 +1,3 @@
-const Liquid = require('liquid')
 const assert = require('assert')
 
 // This class supports a tag that expects two parameters, a data reference and `spaces=NUMBER`:
@@ -10,11 +9,15 @@ const assert = require('assert')
 // reference is used inside a block element (like a list or nested list) without
 // affecting the formatting when the reference is used elsewhere via {{ site.data.foo.bar }}.
 
-module.exports = class IndentedDataReference extends Liquid.Tag {
+module.exports = {
+  parse (tagToken) {
+    this.markup = tagToken.args.trim()
+  },
+
   async render (context) {
     // obfuscate first legit space, remove all other spaces, then restore legit space
     // this way we can support spaces=NUMBER as well as spaces = NUMBER
-    const input = this.markup.trim()
+    const input = this.markup
       .replace(/\s/, 'REALSPACE')
       .replace(/\s/g, '')
       .replace('REALSPACE', ' ')
@@ -27,7 +30,7 @@ module.exports = class IndentedDataReference extends Liquid.Tag {
     assert(parseInt(numSpaces) || numSpaces === '0', '"spaces=NUMBER" must include a number')
 
     // Get the referenced value from the context
-    const value = await context.get(dataReference)
+    const value = await this.liquid.evalValue(dataReference, context)
 
     // If nothing is found in the context, exit with nothing; this may
     // feel weird and that we should throw an error, but this is "The Liquid Way TM"
@@ -36,6 +39,6 @@ module.exports = class IndentedDataReference extends Liquid.Tag {
     // add spaces to each line
     const renderedReferenceWithIndent = value.replace(/^/mg, ' '.repeat(numSpaces))
 
-    return this.template.engine.parseAndRender(renderedReferenceWithIndent, context)
+    return this.liquid.parseAndRender(renderedReferenceWithIndent, context)
   }
 }

lib/liquid-tags/link-as-article-card.js

@@ -1,15 +1,16 @@
-const Link = require('./link')
+const link = require('./link')
+const linkAsArticleCard = link('link-as-article-card')
 
 // For details, see class method in lib/liquid-tags/link.js
-module.exports = class LinkAsArticleCard extends Link {
-  async renderPageProps (page, ctx, props) {
-    const renderedProps = await super.renderPageProps(page, ctx, props)
-    const { type: typeKey, topics = [] } = page
-    const typeVal = typeKey ? ctx.site.data.ui.product_sublanding.guide_types[typeKey] : null
-    return {
-      ...renderedProps,
-      type: { key: typeKey, value: typeVal },
-      topics
-    }
+linkAsArticleCard.renderPageProps = async function renderPageProps (page, ctx, props) {
+  const renderedProps = await link().renderPageProps(page, ctx, props)
+  const { type: typeKey, topics = [] } = page
+  const typeVal = typeKey ? ctx.site.data.ui.product_sublanding.guide_types[typeKey] : null
+  return {
+    ...renderedProps,
+    type: { key: typeKey, value: typeVal },
+    topics
   }
 }
+
+module.exports = linkAsArticleCard

lib/liquid-tags/link-in-list.js

@@ -1,4 +1,2 @@
-const Link = require('./link')
-
-// For details, see class method in lib/liquid-tags/link.js
-module.exports = class LinkInList extends Link {}
+const link = require('./link')
+module.exports = link('link-in-list')

lib/liquid-tags/link-with-intro.js

@@ -1,4 +1,3 @@
-const Link = require('./link')
-
 // For details, see class method in lib/liquid-tags/link.js
-module.exports = class LinkWithIntro extends Link {}
+const link = require('./link')
+module.exports = link('link-with-intro')

lib/liquid-tags/link.js

@@ -1,12 +1,11 @@
+const fs = require('fs')
 const path = require('path')
 const assert = require('assert')
-const Liquid = require('liquid')
-const liquid = new Liquid.Engine()
-const LiquidTag = require('./liquid-tag')
 const findPage = require('../find-page')
 const { getPathWithoutLanguage, getPathWithoutVersion } = require('../path-utils')
 const getApplicableVersions = require('../get-applicable-versions')
 const removeFPTFromPath = require('../remove-fpt-from-path')
+const liquidVariableSyntax = /^{{\s*(.*)\s*}}/
 
 // This class supports a set of link tags. Each tag expects one parameter, a language-agnostic href:
 //
@@ -24,10 +23,16 @@ const removeFPTFromPath = require('../remove-fpt-from-path')
 //
 // Liquid Docs: https://github.com/liquid-lang/liquid-node#registering-new-tags
 
-module.exports = class Link extends LiquidTag {
-  constructor (template, tagName, href) {
-    super(template, tagName, href.trim())
-  }
+module.exports = (name) => ({
+  parse (tagToken) {
+    this.param = tagToken.args.trim()
+  },
+
+  async getTemplate () {
+    const pathToTemplate = path.join(__dirname, '../../includes/liquid-tags', `${name}.html`)
+    const template = await fs.promises.readFile(pathToTemplate, 'utf8')
+    return template.replace(/\r/g, '')
+  },
 
   async renderPageProps (page, ctx, props) {
     const renderedProps = {}
@@ -38,27 +43,24 @@ module.exports = class Link extends LiquidTag {
     }
 
     return renderedProps
-  }
+  },
 
-  async parseTemplate (context, opts = { shortTitle: false }) {
+  async render (scope) {
     const template = await this.getTemplate()
 
-    const ctx = context.environments[0]
+    const ctx = scope.environments
 
     assert(ctx.page, 'context.page is required')
     assert(ctx.page.relativePath, 'context.page.relativePath is required')
     assert(ctx.pages, 'context.pages is required')
     assert(ctx.currentLanguage, 'context.currentLanguage is required')
 
     // process any liquid in hrefs (e.g., /enterprise/{{ page.version }})
-    let href = await liquid.parseAndRender(this.param, ctx)
-
-    // process variable defined in page scope
+    let href = await this.liquid.parseAndRender(this.param, ctx)
     if (href === '') {
       const match = liquidVariableSyntax.exec(this.param)
       if (match) {
-        const variable = new Liquid.Variable(match[1])
-        href = await variable.render(context)
+        href = await this.liquid.evalValue(match[1], scope)
       }
     }
 
@@ -69,7 +71,8 @@ module.exports = class Link extends LiquidTag {
     // example: /site-policy (linked to from /github/index.md)
     // becomes: /github/site-policy
     // otherwise, assume it's already a full path and needs nothing further
-    if (href.match(/\//g).length < 2) {
+    const hrefMatch = href.match(/\//g)
+    if (hrefMatch && hrefMatch.length < 2) {
       fullPath = path.join(dirName, href)
     }
 
@@ -94,10 +97,8 @@ module.exports = class Link extends LiquidTag {
       intro: { opt: { unwrap: true } }
     })
 
-    const parsed = await liquid.parseAndRender(template, { fullPath, ...renderedProps })
+    const parsed = await this.liquid.parseAndRender(template, { fullPath, ...renderedProps })
 
     return parsed.trim()
   }
-}
-
-const liquidVariableSyntax = RegExp(`^${Liquid.VariableStart.source}\\s*(.*)\\s*${Liquid.VariableEnd.source}`)
+})

lib/liquid-tags/octicon.js

@@ -1,4 +1,4 @@
-const Liquid = require('liquid')
+const { TokenizationError } = require('liquidjs')
 const octicons = require('@primer/octicons')
 
 const OptionsSyntax = /([a-zA-Z-]+)="([a-zA-Z0-9\d-_\s]+)"*/g
@@ -12,12 +12,11 @@ const SyntaxHelp = 'Syntax Error in tag \'octicon\' - Valid syntax: octicon "<na
  * {% octicon "check" %}
  * {% octicon "check" width="64" aria-label="Example label" %}
  */
-module.exports = class Octicon extends Liquid.Tag {
-  constructor (template, tagName, markup) {
-    super(template, tagName, markup)
-    const match = markup.match(Syntax)
+module.exports = {
+  parse (tagToken) {
+    const match = tagToken.args.match(Syntax)
     if (!match) {
-      throw new Liquid.SyntaxError(SyntaxHelp)
+      throw new TokenizationError(SyntaxHelp, tagToken)
     }
 
     // Memoize the icon
@@ -38,9 +37,9 @@ module.exports = class Octicon extends Liquid.Tag {
         if (key === 'label') this.options['aria-label'] = value
       }
     }
-  }
+  },
 
-  async render () {
+  async render (scope) {
     // Throw an error if the requested octicon does not exist.
     if (!Object.prototype.hasOwnProperty.call(octicons, this.icon)) {
       throw new Error(`Octicon ${this.icon} does not exist`)

lib/liquid-tags/topic-link-in-list.js

@@ -1,4 +1,2 @@
-const Link = require('./link')
-
-// For details, see class method in lib/liquid-tags/link.js
-module.exports = class TopicLinkInList extends Link {}
+const link = require('./link')
+module.exports = link('topic-link-in-list')

lib/render-content/index.js

@@ -3,8 +3,7 @@ const renderContent = require('./renderContent')
 const { ExtendedMarkdown, tags } = require('../liquid-tags/extended-markdown')
 
 // Include custom tags like {% link_with_intro /article/foo %}
-renderContent.liquid.registerTag('liquid_tag', require('../liquid-tags/liquid-tag'))
-renderContent.liquid.registerTag('link', require('../liquid-tags/link'))
+renderContent.liquid.registerTag('link', require('../liquid-tags/link')('link'))
 renderContent.liquid.registerTag('link_with_intro', require('../liquid-tags/link-with-intro'))
 renderContent.liquid.registerTag('homepage_link_with_intro', require('../liquid-tags/homepage-link-with-intro'))
 renderContent.liquid.registerTag('link_in_list', require('../liquid-tags/link-in-list'))
@@ -19,29 +18,29 @@ for (const tag in tags) {
   renderContent.liquid.registerTag(tag, ExtendedMarkdown)
 }
 
-renderContent.liquid.registerFilters({
-  /**
-   * Like the `size` filter, but specifically for
-   * getting the number of keys in an object
-   */
-  obj_size: (input) => {
-    if (!input) return 0
-    return Object.keys(input).length
-  },
-  /**
-   * Returns the version number of a GHES version string
-   * ex: [email protected] => 2.22
-   */
-  version_num: (input) => {
-    return input.split('@')[1]
-  },
-  /**
-   * Convert the input to a slug
-   */
-  slugify: (input) => {
-    const slugger = new GithubSlugger()
-    return slugger.slug(input)
-  }
+/**
+ * Like the `size` filter, but specifically for
+ * getting the number of keys in an object
+ */
+renderContent.liquid.registerFilter('obj_size', input => {
+  if (!input) return 0
+  return Object.keys(input).length
+})
+
+/**
+ * Returns the version number of a GHES version string
+ * ex: [email protected] => 2.22
+ */
+renderContent.liquid.registerFilter('version_num', input => {
+  return input.split('@')[1]
+})
+
+/**
+ * Convert the input to a slug
+ */
+renderContent.liquid.registerFilter('slugify', input => {
+  const slugger = new GithubSlugger()
+  return slugger.slug(input)
 })
 
 module.exports = renderContent