Working with PUG (Jade) and PHP to generate HTML with PHP (Pug2PHP)

precompile pug with normal php - pug file src

//-
  using the PUGjs pre-compiler,   ($ npm i -g pug )
  HTML with included PHP will be generated as .php -
  then served using the webserver as any other PHP file
  
  note:
    lines starting with `<` will be handled as if they were prefixed
    with `|` (pipe) == that is: as text.
    indented lines are not inheriting the text-content-mode.

  about nesting: https://gist.github.com/BananaAcid/d80fb9dde601b5d786e54376769727a2#file-test_sub_items-pug
  
  @this: https://gist.github.com/BananaAcid/5f197206effa72af58fa9df5b341e462


//- ------------------------------------------------------------------------------------
    php code blocks and php variables in pug attributes

//- php code block
| <?php
|     $title = "some title";
|     $description = "some description";
| ?>

head
    //- php variable used here
    title <?=$title?>

    //- mind the  !=
    //- mind: for completly generated attributes, they must be enclosed by quotes
    
    meta(name="description", content!="<?=$description?>", "<?='testAttribute'?>" )


//- ------------------------------------------------------------------------------------
    mixin param usage

mixin makeTagHTML(param1, param2 = "test", optionalParam3)
    - var xOptionalParam3 = optionalParam3 || "is none";
    <!{param1}> !{param2} =&gt; !{xOptionalParam3} </!{param1}>

//- to take the default value, supply undefined
+makeTagHTML("abc", undefined, "123")


mixin makeTagPHP(param1, param2)
    <?="!{param1}"?> and <?php print "!{param2}"?>

+makeTagPHP("foo", "bar")


//- ------------------------------------------------------------------------------------
    use another mixin within. no php is visible; all php stays within a mixin.
    we do not use brackets with the mixin here to show the difference to the other mixins.
    
    
//- does not work with attributes.
mixin somevar
  | <?=$phpsomevar?>

span is #[+somevar]
//- RESULT:   <span>is <?=$phpsomevar?></span>


//- works with attributes and content
- var somevar = "<?=$phpsomevar?>";

//- mind the `!=` to use it unescaped
span(attr!=somevar) text
//- RESULT:   <span attr="<?=$phpsomevar?>">text</span>

span text !{somevar}
//- RESULT:   <span><?=$phpsomevar?></span>


//- ------------------------------------------------------------------------------------
    collect the PUG-block into a function to be called anytime later

mixin snippetFn(i)
    | <?php
    |   // initialize on first use: array of functions (callables)
    |   if (!isset($x)) $x = [];
    |
    |   /* collect the PUG-block into a function to be called anytime later
    |      (alternative: ob_start() & ob_end() & HEREDOC but problematic)
    |   */
    |   $x["!{i}"] = function(){ ?>
    |     /* PUGjs bug: does not expand: `| #[block]` - but putting it on its own line does work. https://github.com/pugjs/pug/issues/3004 */
    block
    |   <?php };
    | ?>

mixin callSnippetFn(i)
    | <?php
    |   // execute function
    |   !empty($x["!{i}"]) && $x["!{i}"]();
    | ?>

//- prepare content
+snippetFn("a")
    | generate some html here,
    | to be triggered #[b later]

//- test
div
    span some other output
    div
        +callSnippetFn("a")

//- ------------------------------------------------------------------------------------
    alternative form:  using a dot, everything indented after, will be seen as is and be escaped (like using pipe)
    
mixin callSnippetFn(i)
    .
        <?php
            // execute function
           !empty($x["!{i}"]) && $x["!{i}"]();
        ?>