be-parsing

Lazy parse html on demand.

With customizable dropdowns, it is worth taking a look at how to "customize" managing the data that drives the dropdown options.

I've always found it kind of annoying that the option tag only supports value and text.

I find myself often having to do lookups from the value (always a string) to the item that corresponded to that option (often the property that corresponds to the value being a number), because it contains much additional useful information.

Since customizable dropdowns can display a richer user interface, it is quite likely we will see more of the data fields that are relevant to the dropdown. This provides ample opportunity to embed the data used to generate the list of options in a way that can be easily reverse engineered from the HTML markup.

We solve this by tapping into microdata, and extending that long neglected standard, with some much needed updates. Yours truly has proposed these very extensions, so until the platform suggests / implements a better alternative, we're gonna go with it, without feeling a single pang of guilt.

So what this could look like is:

<script type=itempropmap id=animal-map>
    {
        "data-scientific-classification": {
            "mapsTo": "taxonomy", 
            "instanceOf": "Object"
        },
        "data-binomial-name": "species",
        "data-population": {
            "mapsTo": "totalCount",
            "instanceOf": "Number"
        },
        "value": "key"
    }
</script>
<select itemscope=animals id="pet-select"  
    >
    <button>
        <selectedcontent></selectedcontent>
    </button>

    <option  value="">Please select a pet</option>
    <option 
      itemprop=animal
      itempropmap=animal-map
      itemscope 
      value="cat" 
      data-scientific-classification='{
        "Kingdom": "Animalia", 
        "Phylum": "Chordata",
        "Class": "Mammalia",
        "Order": "Carnivora",
        "Family": "Felidae",
        "Genus":  "Felis",
        "Species":	"F. catus"
      }'
      data-binomial-name='Felis catus'
      data-population=600_000_000
    >
        <span class="icon" 
          aria-hidden="true"
        itemprop="emoji">🐱</span>
        <span itemprop="displayName" class="option-label">Cat</span>
    </option>
    <option 
        itemprop=animal
        itempropmap=animal-map
        itemscope
        value="dog"
        data-scientific-classification='{
            "Kingdom":	"Animalia",
            "Phylum":	"Chordata",
            "Class":	"Mammalia",
            "Order":	"Carnivora",
            "Family":	"Canidae",
            "Genus":	"Canis",    
            "Species":	"C. familiaris"
        }'
        data-binomial-name='Canis familiaris'
        >
        <span class="icon" 
            itemprop=emoji  
            aria-hidden="true">🐶</span>
        <span class="option-label" itemprop=displayName>Dog</span>
    </option>
    <option
        itemprop=animal
        itempropmap=animal-map
        itemscope 
        value="hamster"
        data-scientific-classification='{
            "Kingdom":	    "Animalia",
            "Phylum":	    "Chordata",
            "Class":	    "Mammalia",
            "Order":	    "Rodentia",
            "Family":	    "Cricetidae",
            "Subfamily":	"Cricetinae"
        }'
    >
        <span class="icon"  
            itemprop=emoji 
            aria-hidden="true">🐹</span>
        <span class="option-label" itemprop=displayName>Hamster</span>
        
    </option>
    <template be-parsing></template>
</select>

You can then access the selected item's full object via:

oSelect.selectedOptions[0].ism

which yields:

{
    "scope": {
        "animal": "\n                🐱\n                Cat\n            ",
        "taxonomy": {
            "Kingdom": "Animalia",
            "Phylum": "Chordata",
            "Class": "Mammalia",
            "Order": "Carnivora",
            "Family": "Felidae",
            "Genus": "Felis",
            "Species": "F. catus"
        },
        "species": "Felis catus",
        "totalCount": 600000000,
        "key": "cat",
        "emoji": "🐱",
        "displayName": "Cat"
    },
    "scopedLists": {}
}

"ism" stands for itemscope map.

[!NOTE] Editing JSON as shown above is error-prone. To enable JSON syntax highlighting, consider installing this vs-code plugin is using vscode.

[!NOTE] Even better, you can edit a .mjs/.mts file, and benefit from TypeScript, and use a combination of

1. A web server that translates such files into JSON on the fly as it serves it.
2. A build node process that generates the json file

Both utilities are used in this package.

What this does:

1. Goes through all the child elements (starting from the parent of the adorned element) to parse, looking for microdata attributes.
2. Assigns value to "ish" property of adorned element.

So the cat "option" would be assigned the following value:

oOption.ish = {
    animal: "Cat",
    key: 'cat',
    emoji: "🐱",
    displayName: "Cat",
    taxonomy: {
        Kingdom: "Animalia", 
        Phylum: "Chordata",
        Class: "Mammalia",
        Order: "Carnivora",
        Family: "Felidae",
        Genus:  "Felis",
        Species: "F. catus"
    },
    species: "Felis catus",
    totalCount: 600_000_000
}