Separate concern date formatting outside of component #6
Conversation
theme/future-imperfect.js
Outdated
| date="${post.date /* xxx 2022-01-23T04:44:06.937Z */}" | ||
| > | ||
| ${/*datetime(post.date)*/''} | ||
| </time> |
theme/future-imperfect.js
Outdated
| class="published" | ||
| date="${post.date /* xxx 2022-01-23T04:44:06.937Z */}" | ||
| > | ||
| ${/*datetime(post.date)*/''} |
There was a problem hiding this comment.
We no longer have to do this over and over again.
js/context-date.js
Outdated
| } | ||
| } | ||
|
|
||
| export const getPropertiesFrom_DateConversion = (event) => { |
There was a problem hiding this comment.
Maybe a better name be getFromContext_DateConversion.
I had colleagues who would have better sounding names.
js/context-date.js
Outdated
| const dateHumanFormat = 'MMM D, YYYY' // TODO Make configurable from event.target | ||
| return Object.freeze({ | ||
| date, | ||
| dateHumanFormat, |
There was a problem hiding this comment.
To allow specifying own format. Maybe we want more than one formats configurable.
js/context-date.js
Outdated
| }) | ||
| } | ||
|
|
||
| export const isValidObject_DateConversion = (payload) => { |
There was a problem hiding this comment.
A better name here be isValidContextResponse_DateConversion.
Probably rename DateConversion to Date<uhm...>
js/context-date.js
Outdated
| export const isValidObject_DateConversion = (payload) => { | ||
| const _keys = Object.keys(payload) | ||
| const found = _keys.filter((currentValue) => | ||
| KEYS_DateConversion.includes(currentValue), |
There was a problem hiding this comment.
Probably want to check which ones cannot be empty.
js/init.js
Outdated
| const dateIsoString = data.toISOString() | ||
| const dateHuman = data.format(dateHumanFormat) | ||
| const payload = { date, dateIsoString, dateUnix, dateHuman } | ||
| isValidObject_DateConversion(payload) && event.callback(payload) |
There was a problem hiding this comment.
Only callback IF validation passed. Hence &&
Probably we'd want also such a validator per component "contract". Checking if has slot and attributes before customElements.define. In the same way we want to make sure a context object is valid before passing it back
| for (const [name, path] of selectedComponents) { | ||
| const imported = await import(path) | ||
| const classObj = imported?.default | ||
| const isHtmlElement = isValidCustomElement(classObj) |
There was a problem hiding this comment.
This might be better named isHtmlElement.
renoirb
force-pushed
the
renoirb/20230616
branch
from
257d41d to
9fdbe37
Compare
| <bt-time | ||
| class="published" | ||
| datetime="${post.date /* xxx 2022-01-23T04:44:06.937Z */}" | ||
| data-date-human-format="ddd MMM DD, YYYY" |
renoirb
force-pushed
the
renoirb/20230616
branch
from
9fdbe37 to
a8cb010
Compare
Hi Tracey, here's what I had been talking about separating where we format date to be from only one place.