Add Arrow Source Inside Malibu Advance and Refactor Arrow Integration

Arrow Integration (with source) includes following steps

1. Adding Arrow Source code

2. Import the Arrow Component

3. Render the Component Server side

4. Injecting the arrowCSS

Pull latest arrow source into Malibu Adv Repository

Until now, MalibuAdv was integrated with our internal design library called Arrow as a package(ie by adding @quintype/Arrow entry in package.json ) which gives the look and feel of a fully functional website. Now In order to improve the performance we moved the Arrow source code inside the MalibuAdv app itself.

We need to copy the contents of Quintype-Node-Arrow > src folder into Malibu-Advanced > app > isomorphic > arrow folder. If you are cloning MalibuAdv after Nov 2022, then there is no need of @quintype/Arrow entry in package.json, as it will be part of MalibuAdv repository itself.

Other Integration part remains same , just need to refactor the imports . Refactor the imports of the Arrow Components from app > isomorphic > arrow instead of @quintype/arrow

Ex. 
  import { ElevenStories } from  app > isomorphic > arrow 
    **instead of **
  import { ElevenStories } from @quintype/arrow

---

Steps to add a new Arrow component to your app

• Please find the directory structure in the screenshot shown below:

• The Higher-order component is there to make the component more configurable.
• The above component should be made available in the BOLD CMS to be applied to a collection.
• If the black-knight is not having a template-options.yml, please add the file with path as /app/config/template-options.yml and value as shown below:

collection-layouts:
  - name: ArrowElevenStories
    display: Arrow Eleven Stories
    options: []

---

Export the collection templates

• Make the collection template exportable in the app/isomorphic/components/collection-templates/index.js file, so that when the component is selected in Bold the corresponding component has to be rendered.

import React from "react";
import { wrapCollectionLayout, EagerLoadImages } from "@quintype/components";
import { ArrowElevenStories } from "./arrow-rows";

function wrapEager(f) {
  ...
  ...
}

export default {
  ...
  ...
  ArrowElevenStories: wrapEager(wrapCollectionLayout(ArrowElevenStories)),
  ...
  ...
  defaultTemplate: wrapEager(wrapCollectionLayout(ArrowElevenStories))
};

---

Server-side rendering The Component

• If the component is rendered above the fold or is intended to be rendered server-side, then there are a couple of ways to get that running.

  • Using Loadable Components: In quintype-build.config.js:

  const quintypeBuildConfig = require("@quintype/build/config/quintype-build");
  
  const loadableConfigObj = {
    loadableConfig: {
      entryFiles: {
        ...
        ...
        arrowElevenStoriesCssChunk: "./app/isomorphic/arrow/components/Rows/ElevenStories",
        ...
        ...
      }
    }
  };
  const modifiedBuildConfig = { ...quintypeBuildConfig, ...loadableConfigObj };
  
  module.exports = modifiedBuildConfig;

  To know more on how this works, please check here

  • Without Loadable Components: In quintype-build.config.js:

  const quintypeBuildConfig = require("@quintype/build/config/quintype-build");
  
  const loadableConfigObj = {
    ...
    ...
  };
  const modifiedBuildConfig = { ...quintypeBuildConfig, ...loadableConfigObj, entryFiles: {
    arrowElevenStoriesCssChunk: "./app/isomorphic/arrow/components/Rows/ElevenStories"
  }};
  
  module.exports = modifiedBuildConfig;

---

Inject the arrowCSS to head

• After adding the chunks to be rendered serverside, to inject the css to the head, please follow the below snippets:

  1. In render-layout.js:

  ...
  ...
  import { getArrowCss } from "../helpers";
  
  export async function renderLayout(res, params) {
    ...
    const arrowCss = await getArrowCss(params.store.getState());
    ...
  
    res.render(
      "pages/layout",
      Object.assign(
        {
          ...,
          ...,
          arrowCss,
          ...
        },
        params
      )
    );
  }

  2. In app/server/helpers/index.js:

     • Returns css of 1st arrow row. If 1st row isn't arrow, returns empty string.
     • This can be used to add styles while server-side rendering.
     • For this to work, separate CSS chunks need to be created for every arrow row that will be used in the app.
     • Layout names here should match those in template-options.yml.

   export async function getArrowCss(state, { qtAssetHelpers = require("@quintype/framework/server/asset-helper") } = {}) {
  
    const layout = get(state, ["qt", "data", "collection", "items", 0, "associated-metadata", "layout"], null);
  
    const pageType = get(state, ["qt", "pageType"], "");
  
    const extractor = entryPoint => {
      const getExtractor = new ChunkExtractor({ statsFile, entrypoints: [entryPoint] });
      return getExtractor.getCssString();
    };
  
    switch (layout) {
      case "ArrowElevenStories":
        return getAsset("arrowElevenStoriesCssChunk.css", qtAssetHelpers);
      ...
      ...
      default:
        return "";
    }
  }
  
  function getAsset(asset, qtAssetHelpers) {
    const { assetPath, readAsset } = qtAssetHelpers;
    return assetPath(asset) ? readAsset(asset) : "";
  }