Razor by Pug

The tools for the transpiling of a XML-compatible code originally from a Pug code to a Razor code. Includes:

• The Pug mixins for the writing of an initial code
• The normalizer of interim XML compatible code to valid Razor code.

In that way, to get the output Razor code from the Pug code, it is required:

1. Write the initial Pug code according the following conventions
2. Compile it to the interim XML-compatible code. The plain Pug compiler is enough.
3. Compile the interim XML-compatible code to final Razor code. That is what this package does (see Node.js API)

The @yamato-daiwa/automation can do second and third steps at once since version 0.9.

The output code is formatted.

Writing of the Initial Code

Including of the Pug Mixins

Include the following file to each yor razor.pug file:

include [RELATIVE_PATH_TO]/node_modules/razor-by-pug/Mixins.pug

[RELATIVE_PATH_TO] will be depends on a position of parent directory of target .pug-file in relation to node_modules directory, usually [RELATIVE_PATH_TO] is something like ../../.

Attributes

Dynamic Values

All dynamic values must be wrapped with double quotations to be correctly processed.

//- Do
<button aria-label="@buttonScreenreaderGuidance">✓</button>

//- Don't: is is the invalid Pug syntax
<button aria-label=@buttonScreenreaderGuidance>✓</button>

At-attributes

The at-attributes like @ref are not XML-compatable. Specify at- prefix instead of @:

// Do
button(
  type="submit"
  at-ref="@submittingButton"
)

// Don't: `@ref` is the invalid Pug syntax 
button(
  type="submit"
  @ref="@submittingButton"
)

Mixins

Body

Corresponding to @Body directive. No parameters, children nodes or usage variations.

inherits

Corresponding to @inherits directive. Must be specified with either fully qualified name of target class or a path to this class relative to project root (/ separators and .razor or razor.cs filename extensions will be correctly processed).

layout

Corresponding to @layout directive. Must be specified with either fully qualified name of target class or a path to this class relative to project root (/ separators and .razor or razor.cs filename extensions will be correctly processed).

page

Corresponding to @page directive. Must be specific with a valid route.

StyleSheetsFromAssets

Used to generate the link with referencec to assets like:

<link rel="stylesheet" href="@Assets["_content/MainApplication.Shared/layouts/AccessControlLayout.css"]" />
<link rel="stylesheet" href="@Assets["_content/MainApplication.Shared/pages/AccessControl/SigningInPage.css"]" />

Such syntax is not XML-compatible because including the nested quotes thus can not be retrieved from the pure Pug. Ever blazorfmt can't handle it. At the same time, the external quotations are optional.

Instead, this mixin output rbp-stylesheet syntetic tag with asset attribute.

using

The @using directive. Accepts either string with a single fully qualified name or the array of such names.

Node.js API

InterimXML_CompatibleCodeNormalizer class

Has just one public member – the public static method which doing all work. Accepting the XML-compatable code and, optionally, the options, and returns the output Razor code.

normalize static method

(
  XML_CompatibleCode: string,
  options: Readonly<{ defaultEmptyLinesDirectives?: ReadonlyMap<string, number>; }>
): string