template-compiler/TEMPLATE_PATCHES.md

Template patches

These patches have 3 main runtime stages:

1. Scrape File called scrape.js is ran to scrape the original part of the webpage that will then be completly replaced. For example here you will scrape your posts section for the current posts displayed. This scrape function has to return object that is then passed into your handlebars template
2. Template rendering For template I used Handlebars. You build your Handlebars template and all of your scraped data are injected directly into it
3. Replacement Then the whole old component is removed and replaced with the new rendered template

Scoped CSS

Here you can also use style.css file that is scoped to only that specific section.

Post JS

This is JavaScript file that is then ran after the 3 stages are completed and the section is successfully rendered. This file should be used for subscribing event or custom JS animations.

Configuration

You can configure the replacement in the config.yaml file

Hiding original element instead of replacing

If other scripts or original webpage scripts heavily rely on the original component to work, you can hide it instead of replace it.

You can configure it using this config in your config.yaml file:

template_replacer:
  replace_type: "hide"

replace_type is either hide or replace

Rerending component

If you set replace_type to hide you can then rerender your new component if the old component changes. This is used for refreshing state data that was scraped by the scraper.

First you will have to register a rerender key for that specific patch:

scraper:
  rerender_key: "HEADER"

Then anywhere in your website (even other compoennt) you can run this function to rerender that specific patch:

window.Rerender.rerenderComponent("HEADER") // This will rerender the new header component