Allow renaming on: prefix for conditions

[drevantonder]

The prefix for conditions on: is currently "hardcoded" in the Conditions.getConditions method:

class Conditions {
  /* ... */
 static getConditions(node) {
    let map = {};
    for(let key of Object.keys(Conditions.map)) {
      if(node.hasAttribute(`on:${key}`)) {
        map[key] = node.getAttribute(`on:${key}`);
      }
    }
 }
 /* ... */
}

Would it be possible for <is-land> to allow renaming that prefix?

---

A use-case for this is when other frameworks interpret on: as something else. For example (and in our case), Vue when specifying listeners using render functions interprets on followed by a capital letter (in this case :) as a listener:

h(
  'is-land',
  {
    'on:visible' : ''
  }
)

Will render:

<is-land></is-land>

---

Happy to work on this and create a pull request. See main...cmiteam:is-land:main for what I've already done.

Thanks for creating <is-land>!

[JoshTheDerf]

Thanks @drevantonder! Yep, this would be particularly useful when embedding is-land inside of SSR'd page using Vue (or similar framework).

[zachleat]

Sorry for the late reply here, what would the app usage look like if something like main...cmiteam:is-land:main were implemented?

I think I’m supportive, I’d love to see the : colon wrapped into the prefix too so that folks wouldn’t have to use that if they didn’t want

[drevantonder]

I wasn't sure how <is-land> was intended to be initialized/configured, but what worked for me was to export an initIslands function that would allow users to set both the tag and prefix of <is-land> like so:

import { initIslands } from '@11ty/is-land'

initIslands({
 tag: 'awesome-is-land',
 conditionsPrefix: 'when:'
])

<awesome-is-land when:idle>...</awesome-is-land>

---

I've moved the colon : into Conditions.prefix in 68da03c. 👍

---

Feel free to pick, choose, or throw out the changes I've made at cmiteam/is-land. I'm also happy to open a pull request for what we have there (not much 😅).