be-metamorphic

be-metamorphic lets us party like it's 1999, and take advantage of the increasingly popular XSLT, to turn a caterpillar of native HTML markup into a butterfly of web components-filled goodness.

Problem Statements

1. Progressively enhance a web page by converting swaths of native HTML, or tag names that are meaningful to the business into web components once component dependencies are downloaded.
2. Generate table of contents from large document. This will be handled by be-restated.

<ul be-metamorphic='{
    "whenDefined": ["ui5-li", "ui5-list"],
    "xslt": "./ui5-list.xslt"
}'>
    <li>
    Pineapple
    <span slot=description>Occurs between red and yellow</span>
    <span slot=additional-text>Expires</span>
    <span slot=additional-text-state>Warning</span>
  </li>
  <li>
    Banana
    <span slot=description>The yellow lengthy fruit</span>
    <span slot=additional-text>Re-stock</span>
    <span slot=additional-text-state>Error</span>   
  </li>
  <template be-a-beacon></template>
</ul>

When combined with xslt file:

<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
    <xsl:for-each select="ul">
        <ui5-list style="height: 300px" growing="Scroll">
            <xsl:for-each select="li">
                <ui5-li 
                    icon="nutrition-activity" 
                    description="{span[@slot='description']}" 
                    additional-text="{span[@slot='additional-text']}"
                    additional-text-state="{span[@slot='additional-text-state']}"
                >
                    <xsl:value-of select="node()"/>
                </ui5-li>
            </xsl:for-each>
        </ui5-list>
    </xsl:for-each>
</xsl:template>

</xsl:stylesheet>

generates:

<ui5-list style="height: 300px" growing="Scroll">
  <ui5-li icon="nutrition-activity" description="Occurs between red and yellow" additional-text="Expires" additional-text-state="Warning">
      Pineapple
      </ui5-li>
  <ui5-li icon="nutrition-activity" description="The yellow lengthy fruit" additional-text="Re-stock" additional-text-state="Error">
      Banana
  </ui5-li>
</ui5-list>

The presence of the template at the bottom is needed to let be-metamorphic know it can proceed with the transformation.

Shared template

<ul  be-metamorphic>
    <li>
    Pineapple
    <span slot=description>Occurs between red and yellow</span>
    <span slot=additional-text>Expires</span>
    <span slot=additional-text-state>Warning</span>
  </li>
  <li>
    Banana
    <span slot=description>The yellow lengthy fruit</span>
    <span slot=additional-text>Re-stock</span>
    <span slot=additional-text-state>Error</span>   
  </li>
  <template be-metamorphic>
</ul>

<table be-metamorphic>
</table>
<be-hive>
  <be-metamorphic proxy-prop-defaults='{
    "whenDefined": ["ui5-li", "ui5-list"],
    "xslt": "./ui5-list.xslt"
  }'>
</be-hive>

If no settings are specified (like with the table), share the same settings for all the elements in the ShadowDOM realm.

Delayed Satisfaction / Conditional Template [TODO]

Oftentimes we don't want to transform the original native html into the more robust markup until the needed downloads have finished.

And/or we want to apply a conditional transformation based on the presence of the dependencies, allowing us to decide which design library to use via import maps (or some other approach).

<ul be-metamorphic='{
  "./ui5.xslt": {
    "isUpSearch": false,
    "when-defined": ["ui5-list", "ui5-li"],
    "mode": "replace"
  }
}'
>
</ul>

Specifying Target

By default, the output of the xslt replaces the element that the be-metamorphic attribute is attached to.

However, other "modes" are also supported:

export interface BeMetamorphicVirtualProps{
  mode: 'replace' | 'append' | 'prepend' | 'adjacentAfterEnd'
}