2023 release notes

These are the Component Service release notes for 2023. They are arranged by month, with the relevant version number associated with each release.

If an update to your DXP CLI is needed after a release, you will see a message in your CLI informing you that you need to upgrade.

The command you use to upgrade is:

nmp i -g @squiz/dxp-cli-next

This image shows the message on the CLI that tells you to upgrade and contains the upgrade command.

July

Version 5.6.0

Improvements

When you use dxp cmp init, the command-line prompts you for the following manifest variables in order:

  • name

  • displayName

  • description

  • namespace

init prompts

These prompts are skipped if you supply these values using options.

April

Version 5.5.1

Improvements

New input types and formats have been introduced to add support for:

  • Formatted text with embedded links and images.

  • Individual image and link fields.

  • Fields that reference related Matrix assets.

Formatted text

  • Components can now use a new input type of FormattedText. This will render a new WYSIWYG editor that can be used to format text, add links, and add images.

  • The new WYSIWYG editor is not yet at feature parity with the Matrix WYSIWYG editor and will have additional formatting features added in future releases.

  • Links and images inside FormattedText can reference Matrix assets or external URLs.

  • The following code is a simple example of an input schema with a FormattedText field:

    "input": {
        "type": "object",
        "properties": {
            "formattedText": {
                "type": "FormattedText"
            }
        }
    }
  • The following image is an example of the result of using a FormattedText field within the Matrix Admin UI, within an array of news items:

    This image shows a component that contains formatted text. It says 'This is some formatted content'

SquizImage

  • Support for the SquizImage type in component manifests allows components to reference image assets in Matrix.

  • SquizImage is a new input type which will prompt an image editing tool in the Matrix Administration interface when editing a component. Images can be a Matrix asset or an external image.

  • SquizImage can be mocked in the preview model by providing several fields of data.

  • The following code is an example of an input schema with a SquizImage field:

    "input": {
        "type": "object",
        "properties": {
            "image": {
                "type": "SquizImage",
                "description": "Background image"
            }
        },
        "required": ["image"]
    }
  • The following code is an example of a SquizImage field mocked in the preview model:

    "previews": {
        "valid-inline-preview": {
            "functionData": {
                "main": {
                    "inputData": {
                        "type": "inline",
                        "value": {
                            "image": {
                                "name": "My Image",
                                "alt": "This is the image alt text",
                                "caption": "This is a caption",
                                "imageVariations": {
                                    "original": {
                                        "url": "http://example.com/image.jpg",
                                        "width": 100,
                                        "height": 100,
                                        "byteSize": 1000,
                                        "mimeType": "image/jpeg",
                                        "aspectRatio": "1:1",
                                        "sha1Hash": "1234567890abcdef1234567890abcdef12345678"
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

Matrix Asset URI format

  • The Matrix Asset URI format used in a component manifest has the equivalent functionality of a Matrix related asset field.

  • Input types in an input field can now have a format of matrix-asset-uri which will prompt the Matrix Administration interface to allow you to input a Matrix asset ID, as well as a relevant Matrix Identifier behind the scenes.

  • You can specify a list of matrixAssetTypes to determine which asset types are valid for fulfilling the field. The list of valid asset types is available in the schema within the local development server.

  • The following code is an example of an input schema with a related asset field from a manifest:

"input": {
    "type": "object",
    "properties": {
        "relatedImage": {
            "type": "string",
		 "title": "Related image",
            "format": "matrix-asset-uri",
            "matrixAssetTypes": ["image"]
        }
    },
    "required": []
}
  • In local preview, related assets can be mocked in a new mockedUris field within the manifest file. This is used to simulate the full data model of a returned asset from Matrix.

  • These asset types can then be resolved at runtime in your JavaScript using the resolveUri function to return the asset data, as shown in the following code:

const asset = await info.ctx.resolveUri(input.assetUri);

Matrix identifiers

  • Matrix Identifiers can now be configured in the Squiz Digital Experience Platform (DXP) Console, via the Matrix API Identifiers screen in the Components section.

  • Matrix Identifiers reference a Content API token, and are used to resolve asset references within the new component type fields such as FormattedText, SquizLink, SquizImage and the Matrix Asset URI format.

  • A Matrix Identifier must be configured for each site that uses the Component Service, however a single Matrix Identifier can be reused across multiple sites.

  • Content API tokens should be set up for read only access with least relevant privilege.

Other improvements

  • Node version updated from 16 to 18 LTS. Developers should use Node 18 when running their local development server for consistency with the production runtime.

  • Improved support for horizontal scaling.

Fixes

  • When there is a runtime error, components will send appropriate no-cache headers so that the error state is not cached.

  • The order of JSON fields used to determine the editing form is preserved

  • Improved local validation of components before deploying to the DXP Console, when deploying a component.

March

Version 5.5.0

Improvements

  • Updated CLI login command so that users no longer need to specify the tenant at login time. Select from a list of available DXP tenants when logging in.

February

Improvements

  • Added a command to the CLI to initialize starter components - both basic and advanced / bundled:

    npx @squiz/dxp-cli-next cmp init <path to create component at (should be empty)>

    Optional Flags:

    • -t/–type (basic or advanced (default basic))

    • -i/–install (install node modules)

  • Added support for type "module" attribute for script tags.

Fixes

  • Fixed bug to ensure preview file is in component directory

  • Fixed bug where Axios library was not working inside Component Server side JavaScript

  • Fixed bug where local dev server displays broken links to components that do not have any previews defined in the manifest.

  • Fixed bug where pointing the locationRoot for static files to an empty directory caused an internal server error.

  • Fixed bug where components would not load in local dev server on windows systems

  • Fixed bug where Component Service would return an error about unresolved asynchronous functions.

January

Improvements

  • Logging in and deploying from the CLI now is simpler, no longer requiring Component Service and render service URLs to be provided by the user.

  • Contextual functions (e.g. info.ctx.getFunctionUrl) now work in preview rendering mode.

  • Refactored component URL patterns to provide a simpler and more flexible structure.

  • Multi-line text fields can be defined in the manifest input schema using the format field for a string type property. This is rendered as a text box in the Matrix editing UI.

    { “functions”: [
     {
       “name:”main”’
       “entry”:”main.js”
       “input”:
         “type”:”object”’
         “properties”:{
             “text”:{
                 “type”:”string”,
                 “format”:”multi-line”
             }
         }
         “required”:[“text”]
       }
       “output”:{“responseType”:”html”}
      }
    ]
    }
  • Updated required to be a mandatory property. The manifest input field must have the “required” property, and any objects deeper in the structure must have the “required” property. The required property informs validation in the editing UI. If no fields are required, the value should be set as an empty array, for example:

    {
    "$schema": "http://localhost:3000/schemas/v1.json#",
    "name": "test-component",
    "version": "1.0.0",
    "mainFunction": "main",
    "functions": [
    {
    "name": "main",
    "entry": "main.js",
    "input": {
       "type": "object",
       "required": [],
    "properties": {
       "card": {
       "type": "object",
       "required": [],
    "properties": {
       "type": "text",
       "name": "Title"
             }
          }
       }
    },
    "output": {
       "responseType": "html"
          }
    }
    ]
  • Added min and max cache times to requests. Cache headers can be set for component sets in the DXP Console, however are limited to a minimum cache time - meaning all components are cached by default.

  • Content service ‘matrix identifier and url/key’ added to Content Service settings