Better know a framework #18: what processContent is and what it is used for

Framework Knowledge
21

I think we’d want to add a section to this document specifically: https://github.com/aurelia/documentation/blob/master/current/en-us/5.%20templating/4.%20custom-elements.md

You can see that there’s a section at the bottom that lists out all the decorators. @processContent is there but it’s clearly not enough information to be really useful. We could start by just expanding this section. The docs are mostly vanilla markdown. @Sayan751 If you want to make a PR to that document in the repo, I can work with you to get it in and published. Also, feel free to expand out any other sections of any of the docs. You’ll find that in that current folder all the site’s documentation is arranged the same as it is in the site ToC. Let me know if there’s any other way I can help!

2 Likes
22

My idea is to present some examples to showcase the utility of these decorators and detail succinctly. It will be difficult to have an example for all of these, so I intend to focus majorly on processContent.
Also I intend to embed some codesandbox, so that readers can easily play with that. However, I think it would be better if the Aurelia core team inherits those sandboxes (a link from official Aurelia team looks more trustworthy).
Anyway, I have already started with this (WIP). You can check it here: https://github.com/Sayan751/documentation/commit/7753c33d04b606046302465a40d6589837bb05c6

1 Like
23

If anyone interested, the PR is here https://github.com/aurelia/documentation/pull/381. It’s an awesome doc work. Hopefully our folks can collaborate more to have fun like this for Aurelia doc :rocket:

1 Like
24

Is there another customise point where I can touch the original html template itself?

For example, I have a my-field.js with my-field.html like this

<template>
  <input auto-complete="off">
</template>

I want a pre-processor at runtime to modify the html template only for chrome

<template>
  <input auto-complete="new-password">
</template>

Right now, I am able to it verbosely like this:

@useView(window.chrome ? 
  PLATFORM.moduleName('./my-field.chrome.html') :
  LATFORM.moduleName('./my-field.html'))
export class MyField {
1 Like
25

Did you try:

@processContent(el => {
  el
    .querySelectorAll('[auto-complete]')
    .forEach(input => input.setAttribute(window.chrome ? 'new-password' : 'off'));
  return true;
})

Edit:

I see that you want to touch the custom element template, then you can use beforeCompile hook as in this example https://codesandbox.io/s/1zjmrqlxl

2 Likes
26

Thx, is this considered an undocumented public API?

1 Like
27

I think it might best be described as “microscopically documented” :slight_smile:
https://aurelia.io/docs/api/templating/interface/ViewEngineHooks/property/beforeCompile

1 Like
28

Yes it’s documented as per @jsobell :smile:

29

I’ll be writing something for it soon. Or if someone wants to help and give it ago