feat: Configurable Markup parsing and transformatin #7
Conversation
renoirb
force-pushed
the
renoirb/un-markup
branch
from
e27fc48 to
1359165
Compare
|
I've adjusted so the example works almost the same. Just the code colouring missing now. |
renoirb
force-pushed
the
renoirb/un-markup
branch
from
1359165 to
6480188
Compare
| <bt-time | ||
| class="published" | ||
| datetime="${resultDetails[result.ref].date}" | ||
| data-date-human-format="MMM D, YYYY" |
| _applyTransformedMarkup = (html = '') => { | ||
| const transformed = html !== '' | ||
| const elMarkupViewer = this.shadowRoot.querySelector('#markup-viewer') | ||
| const elTransformed = this.shadowRoot.querySelector( | ||
| '#markup-transformed', | ||
| ) | ||
| if (transformed) { | ||
| elTransformed.innerHTML = html | ||
| elMarkupViewer.classList.remove('is-not-transformed') | ||
| elMarkupViewer.classList.add('is-transformed') | ||
| } else { | ||
| elTransformed.innerHTML = '' | ||
| elMarkupViewer.classList.add('is-not-transformed') | ||
| elMarkupViewer.classList.remove('is-transformed') |
There was a problem hiding this comment.
Apply replacing contents with parsed markdown without doing it. Let the component handle what to do, trust that the something else calling us back did do the markdown to HTML conversion.
| ['bt-time', './bt-date-time.js'], | ||
| ['bt-un-markup', './bt-un-markup.js'], | ||
| ] |
There was a problem hiding this comment.
Provide default implementation of components to be registered (do not register them right away, allow people using us the ability to give us their implementation.
| import { init } from './js/blogtini.js' | ||
|
|
||
| init(window, { | ||
| // Where we'll add customizations |
There was a problem hiding this comment.
(as if it was another site importing snd using blogtini)
That's where you define the components. Override bligtini's, and add your own that you plan on using in your markdown pages.
| export const assertIsValidCustomElementName = ( | ||
| elementName /*: string */ = '', | ||
| ) /*: assert is ... */ => { | ||
| if (/^[a-z]([\w\d-])+$/.test(elementName) === false) { | ||
| const message = `Invalid element name "${elementName}", it must only contain letters and dash.` | ||
| throw new Error(message) | ||
| } | ||
| } |
There was a problem hiding this comment.
There should be more component "interface" contract check. Done before registering. Or check in a different window realm. Check things like presence of slot names, attributes. So that if someone wants to override, we can check early if the component's compatible
TODO
| // TODO Make this configurable(?) | ||
| realm.document.addEventListener('context-request', (event) => { | ||
| // ... and others. | ||
| handleContextRequest_DateConversion(event) | ||
| handleContextRequest_TransformMarkup(event) | ||
| }) |
There was a problem hiding this comment.
Define our implementation of context request response handler, but allow who's using us to override our fallback (TODO)
No description provided.