The c‎wrapReference is a predefined JavaScript property used to store and pass reference information before the compilation process begins. It is configured in the cwrapConfig.js file and remains static throughout the build. This property allows developers to define key references ahead of time, ensuring consistency and predictability across the application. Unlike c‎wrapContext, which is created dynamically during compilation, c‎wrapReference is established before compilation and remains unchanged as the application is built.

{
  "element": "ul",
  "text": "{‎{return c‎wrapContext.get('asideRoutes')[0]}‎}",
  "style": "color: white; display: flex; flex-direction: column; font-weight: bold; gap: 1em; list-style: none; margin: 0; padding: 0;",
  "blueprint": {
    "count": "{‎{return c‎wrapReference.globals.const.documentation['getting started'].length}‎}",
    "element": "li",
    "children": [
      {
        "element": "a",
        "text": "c‎wrapArray[{‎{return c‎wrapReference.globals.const.documentation['getting started']}‎}]",
        "style": "position: relative; z-index: 1; transition: 300ms; padding: 0.2em 0.5em;",
        "extend": [
          {
            "extension": ":hover",
            "style": "color: rgba(150, 250, 250, 1);"
          },
          {
            "extension": ".focus",
            "style": "color: rgba(150, 250, 250, 1); background-color: rgba(20, 37, 61, 0.8); padding: 0.2em 0.5em; border-radius: 0.3em;"
          }
        ],
        "attributes": {
          "href": "c‎wrapProperty[prefixAside=./]c‎wrapGlobal[documentation.getting started.c‎wrapIndex]/",
          "class": "c‎wrapArray[{‎{return c‎wrapReference.globals.const.documentation['getting started'].map((x) => `c‎wrapProperty[${x}Focus=c‎wrapOmit]`)}‎}]"
        }
      }
    ]
  }
}