Add support for pug nested syntax

[freemember007]

function Counter(props) {
  const [count, setCount] = useState(0)
  useEffect(() => {
    document.title = `You clicked ${count} times`
  })
  return pug`
    div.red.f1
      if props.showGreeting
        p.greeting Hello #{props.name}!
      button(
        onClick=()=>setCount(count + 1)
      ) #{count} Click Me
`}

[bathos]

Sounds good. I would guess this can be added following the pattern @blake-regalia has established for other tagged template cases if a sublime syntax def for pug already exists. Otherwise we’d have to add new rules just for pug (which is okay, but it’d be nice to just be able to reuse what’s out there).

@freemember007 is there an existing pug sublime syntax package?

[freemember007]

@bathos yes, exists pug sublime syntax package, and I have achieved it by modifying the ecmascript.sublime-syntax source file:

%YAML 1.2
---
name: Ecmascript
file_extensions: [ js, jsx, es, es6, mjs ]
scope: source.es
...
...
variables:
...
...
  syntaxDirective_PUG:   '[Pp](?:UG|ug){{syntaxDirectiveTail}}'
...
...
  syntaxDirective: >-
...
...
        | {{syntaxDirective_PUG}}
...
...
contexts:

# MAIN, META & PROTOTYPE #######################################################

  main:
...
...

  syntax_DIRECTIVE:
...
...
    - match: '{{syntaxDirective_PUG}}'
      captures:
        1: punctuation.definition.comment.end.es
        2: entity.quasi.tag.name.js # ^BS
        3: variable.other.readwrite.tag.es
      set: [ syntax_meta_PUG, syntax_PUG_OPEN ]
...
...

# PUG SYNTAX ###################################################################

  syntax_meta_PUG:
    - meta_content_scope: meta.interpolation.syntax.pug
    - meta_include_prototype: false
    - match: '{{PLA_anything}}'
      pop: true

  syntax_PUG_OPEN:
    - meta_include_prototype: false
    - match: '`'
      scope: string.interpolated.es punctuation.definition.string.interpolated.begin.es
      set: scope:text.pug
      with_prototype:
        - include: syntax_AFTER_OPEN
...
...

this is the appearance:

thank you for write so awesome plugin!

[bathos]

Nice.

I wonder if we should allow just recognizing certain “well-known” tags like “pug” without the hint comment? It seems sufficiently unlikely to me that the name “pug” would appear for other tags.

In any case, having added it @freemember007, please feel free to open a PR with your changes if you believe this is working right and will be useful to others.

[blake-regalia]

Thanks @freemember007 . I will take care of PR -- I have a local branch which adds pug following the same build process as HTML and Markdown because these syntaxes push or embed source.js, so we have special handling to prevent infinite recursion / exceeding stack limit in ST3.

However, it seems that pug-tmbundle might be slightly incompatibility with our syntax as is since it is not so straightforward to simply push into our syntax without context and assume it will recover, e.g.

[blake-regalia]

After spending a bit of time working on this, it's clear that the existing pug syntax requires somewhat substantial modifications to be compatible within ours. It also leaves something to be desired since it is does not always follow conventional scope naming. The repo has gone stale some time ago and I personally use pug wherever I can so I may just end up forking or rewriting the pug syntax from scratch 🤨