feat: support spec extension rendering for messages (#181)

Author: derberg

partials/extensions.html

@@ -0,0 +1,46 @@
+{% macro extension(obj, odd = false, indent = false) %}
+
+{% set extensions = obj | nonParserExtensions%} 
+{% if extensions.size > 0 %}
+    <p class="{% if indent %}pl-6{% endif %} mb-2 mt-4 text-sm font-bold text-gray-700">
+    Specification Extensions:
+    </p>
+
+    {% for extensionName, extensionValue in extensions %}
+        <div class="{% if odd %}bg-gray-100{% else %}bg-gray-200{% endif %} {% if indent %}pl-6{% endif %}">
+            {% if extensionValue | isObject %}
+                <div class="{% if open %}is-open{% endif %}">
+                    <div class="js-prop cursor-pointer py-2 property">
+                        <div class="pr-4" style="margin-top: -2px; min-width: 25%">
+                            <span class="text-sm" style="word-break: break-word">
+                                {{ extensionName }}
+                            </span>
+                            <svg
+                            class="expand inline align-baseline"
+                            version="1.1"
+                            viewBox="0 0 24 24"
+                            x="0"
+                            xmlns="http://www.w3.org/2000/svg"
+                            y="0"
+                            >
+                            <polygon
+                                points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "
+                            ></polygon>
+                            </svg>
+                        </div>
+                    </div>
+                <div class="children">
+                    <div class="{% if odd %}bg-gray-200{% else %}bg-gray-100{% endif %} {% if not root %}pl-8 pr-8{% endif %} rounded">
+                        <pre class="text-sm whitespace-pre-wrap">{{ extensionValue | dump(2) }}</pre>
+                    </div>
+                </div>
+        </div>
+            {% else %}
+                <div class="text-sm">{{ extensionName }}: {{ extensionValue }}</div>
+            {% endif %}
+        </div>
+    {% endfor %} 
+
+{% endif %}
+
+{% endmacro %}

partials/message.html

@@ -1,6 +1,7 @@
 {% from "./schema.html" import schema %}
 {% from "./tags.html" import tags %}
 {% from "./protocols.html" import bindings %}
+{% from "./extensions.html" import extension %}
 
 {% macro message(msg, showIndex=false, index=0, open=false) %}
 
@@ -42,6 +43,7 @@
   {% endif %}
 
   {{ bindings("Message", msg, odd=true) }}
+  {{ extension(msg) }}
 
 </div>
 

partials/schema-prop.html

@@ -1,4 +1,5 @@
-{% from "./type.html" import type %} {% from "./schema-item.html" import
+{% from "./extensions.html" import extension %}
+ {% from "./type.html" import type %} {% from "./schema-item.html" import
 schemaItem %} {% from "./description.html" import getDescription %} {% macro
 schemaProp(prop, propName, open=false, root=false, odd=false, specialName=false,
 required=false, altDescription=null, circularPropsParent) %}
@@ -156,47 +157,7 @@
       circularPropsParent | includes(pName) %} {% if isPropCircular === true %}
       {{ schemaItem(pName, odd) }} {% else %} {{ schemaProp(p, pName, odd=(not
       odd), required=(prop.required() | includes(pName)), circProps) }} {% endif
-      %} {% endfor %} {% endif %} {% set extensions = prop | nonParserExtensions
-      %} {% if extensions.size > 0 %}
-      <p class="pl-6 mb-2 mt-4 text-sm font-bold text-gray-700">
-        Specification Extensions:
-      </p>
-      {% for extensionName, extensionValue in extensions %}
-      <div class="{% if odd %}bg-gray-100{% else %}bg-gray-200{% endif %} pl-6">
-        {% if extensionValue | isObject %}
-        <div class="{% if open %}is-open{% endif %}">
-          <div class="js-prop cursor-pointer py-2 property">
-            <div class="pr-4" style="margin-top: -2px; min-width: 25%">
-              <span class="text-sm" style="word-break: break-word"
-                >{{ extensionName }}</span
-              >
-              <svg
-                class="expand inline align-baseline"
-                version="1.1"
-                viewBox="0 0 24 24"
-                x="0"
-                xmlns="http://www.w3.org/2000/svg"
-                y="0"
-              >
-                <polygon
-                  points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "
-                ></polygon>
-              </svg>
-            </div>
-          </div>
-          <div class="children">
-            <div
-              class="{% if odd %}bg-gray-200{% else %}bg-gray-100{% endif %} {% if not root %}pl-8 pr-8{% endif %} rounded"
-            >
-              <pre class="text-sm">{{ extensionValue | dump(2) }}</pre>
-            </div>
-          </div>
-        </div>
-        {% else %}
-        <div class="text-sm">{{ extensionName }}: {{ extensionValue }}</div>
-        {% endif %}
-      </div>
-      {% endfor %} {% endif %} {% if prop.type() === 'array' %} {% set
+      %} {% endfor %} {% endif %} {{ extension(prop, odd = true, indent = true) }} {% if prop.type() === 'array' %} {% set
       arrayItemsProps = prop.items().properties() if prop.items() and not
       prop.items() | isArray else null %} {% if prop.items() and arrayItemsProps
       | isEmpty %}

template/css/main.css

@@ -125,6 +125,8 @@ a:hover {
   transform: rotate(0deg);
 }
 
+pre > * { white-space: pre-wrap; }
+
 /* EXAMPLES */
 
 .examples-payload-tab:checked + label {

template/css/main.min.css

@@ -1083,6 +1083,10 @@ video {
   vertical-align: baseline;
 }
 
+.whitespace-pre-wrap {
+  white-space: pre-wrap;
+}
+
 .break-words {
   overflow-wrap: break-word;
 }
@@ -1287,6 +1291,9 @@ a:hover {
   transform: rotate(0deg);
 }
 
+pre > * { white-space: pre-wrap;
+}
+
 /* EXAMPLES */
 
 .examples-payload-tab:checked + label {