Use Liquidjs instead of Liquid (#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

Author: JasonEtco

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')