Dump of tips and undocumented features I found while working.

Fusion will add properties, like a hash—most likely for caching—to the results of your content source—so the results of either your source, resolve or fetch, or your transform. Which means you’ll have errors if you return any kind of primitive, like a null.

Consider doing this and throwing a 404, since it makes it easier to deal with the resolvers.

e.g.: When set via the global content source, your property xxx is available in a PageBuilder field as {{content.xxx}}, or in a resolver content mapping as simply xxx.

The JSON format configuration in the docs is actually working fine in .js files as well, like the params format—more to follow—or the url mapping with the pattern property.

When setting a type to the parameters, either like this:

const params = { fieldName: "text", };

or like that:

const params = [{
  name: "fieldName",
  displayName: "Name shown in PB",
  type: "text",
}];

The type data here will only be used to configure the input in PB, but all parameters will be passed to the source as strings, that you may need to parse.

Schema shapes are currently no unforced, so you don’t have to set this. However this property is useful if you want to filter the available content source for a contentConfig custom field:

Example below: only sources with the ans-feed value will be shown in the PageBuilder dropdown.

feedConfig: PropTypes.contentConfig("ans-feed").tag({
  label: "Story feed configuration",
})

As noted in another entry, you can interpolate values from the global content in fields, using double curly brackets.

The data available for interpolation should correspond to this:

type GlobalContent = object;
interface Content {
  arcSite: string;
  contextPath: string;
  /** The two following keys have the same data */
  content: GlobalContent;
  globalContent: GlobalContent;

  globalContentConfig: object;
  isAdmin: boolean;
  layout: string;
  outputType: string;
  requestUri: string;
  siteProperties: object;
  template: string;
}

The environment variables can be overridden by files under the /environment folder for each environment but the naming of the files is not explicitly documented.

The filename should be {env}-{instance name} or, more easily, should correspond to the value of Fusion.environment.ENVIRONMENT (global variable accessible from the console on any page of your site).

useFusionContext just gets you an object merging the app context and the component context. If you’re looking for micro-optimizations, just call the context hook that you need.

You can import .sass or even .css files straight into your components since the underlying webpack config handles it.

Note: Uses node-sass (not dart-sass that comes with additional features).

Fusion actually handles styled-components, v4, with SSR setup. As it is completely undocumented, it’s unclear what the long-term support will be.

Due to the lack of control on the SSR setup, it is not possible to setup other solutions with SSR.

The meta tags that can be set from the PageBuilder Editor panel are not rendered as correct meta tags–they’re using the value attribute instead of content.

Consider fixing it in your html output types, like this:

props.metaValue.htmlTags().map(name =>
  <meta name={name} content={props.metaValue(name)} />
)