← Home

Elder.js Hook: stacks

stacks : Executed just before processing all of the stacks into strings.

Elder.js uses 'stacks' to manage it's string concatenation. If you are unfamiliar, stacks are basically an array of strings, with a priority, and some meta data. This hook let's you manipulate or view the stacks before they are written to the page and is designed for use by plugins.

This hook will mainly be used when you need to add arbitrary strings to the footer. In most cases, users should be using <svelte:head></svelte:head> to add content to the head.

  • headStack: Internally all content used in are added to the head stack. If you were looking to add ld+json to the page, you could do it here. If you're looking to write <title> tags, we recommend doing it within Svelte templates unless you are writing a plugin in which case you may want to also look at the 'head' hook.
  • cssStack: The 'cssStack' represents all of the css strings added by hooks and plugins. Plugins can add css here (our in the head stack if you need to add CSS before the Elder.js CSS file), but we recommend users add them directly in Svelte files. Note: Do not wrap strings added to the stack in <style></style>.
  • beforeHydrateStack: Polyfills for hydration could be added here. This stack is not run unless there are Svelte components to be hydrated.
  • hydrateStack: the hydrateStack contains strings which represent all of the root svelte components which will be hydrated.
  • customJsStack: Used to add custom JS to the site. This is done after the Svelte components are written to the page.
  • footerStack: the footerStack which is an array of html or html friendly strings that will be written to the footer. This is generally the ideal place for plugins to add Analytics scripts as it fires after all other JS.
Props :
perf
helpers
data
settings
request
query
errors
cssStack
htmlAttributesStack
bodyAttributesStack
headStack
beforeHydrateStack
hydrateStack
customJsStack
footerStack
Mutable :
errors
cssStack
htmlAttributesStack
bodyAttributesStack
headStack
beforeHydrateStack
hydrateStack
customJsStack
footerStack
This hook is an 'advanced' hook meaning it geared towards advanced users or plugins.
Stable · Location: Page.ts
Elder.js hook Lifecycle