Spectral 10.6 Upgrade Guide

Spectral 10.6 introduces a new way to reference existing component actions, data sources and connections in a code-native integration. New action, data source, and connection reference functions make it easier to build code-native integrations that leverage existing custom components, and provide better type safety and autocompletion in your IDE.

Existing reference syntax will continue to work, but we recommend updating your code-native integrations to use the new reference functions.

Generating new component manifests

Previously, all component type manifests were installed as npm dependencies. Now, you can install component manifests into your src/manifests/ directory. This lets you skip the step of generating manifests for your custom components and publishing them to npm - the manifest is generated from information in the Prismatic API.

New manifests can be generated for both public and private components, and contain new type wrappers.

To install a component manifest, run the following command:

# Public component
npx cni-component-manifest slack

# Private component
npx cni-component-manifest slack --private

Next, remove your component's npm dependency from package.json and run npm install or yarn install.

Finally, update your import statements to import from the manifest file instead of the npm package.

componentRegistry.ts

@@ -1,5 +1,5 @@
 import { componentManifests } from "@prismatic-io/spectral";
-import slack from "@component-manifests/slack";
+import slack from "./manifests/slack";

 export const componentRegistry = componentManifests({
   slack,

New component action functions

Actions can now be imported from a component manifest and invoked directly.

yourFlow.ts

@@ -8,6 +8,7 @@

 import { flow, util } from "@prismatic-io/spectral";
 import axios from "axios";
+import slackActions from "../manifests/slack/actions";

 interface TodoItem {
   id: number;
@@ -34,7 +35,7 @@ export const todoAlertsFlow = flow({
       } else {
         logger.info(`Sending message for item ${item.id}`);
         try {
-          await context.components.slack.postMessage({
+          await slackActions.postMessage.perform({
             channelName: util.types.toString(
               configVars["Select Slack Channel"]

New component connection functions

Connections can be imported from a component manifest, and are named <componentKey><connectionKey>. The first parameter of the connection function is the stable key of the connection config var.

configPages.ts

@@ -1,9 +1,9 @@
 import {
   configPage,
   configVar,
-  connectionConfigVar,
   dataSourceConfigVar,
 } from "@prismatic-io/spectral";
+import { slackOauth2 } from "./manifests/slack/connections/oauth2";
 import {
   SLACK_CLIENT_ID,
   SLACK_CLIENT_SECRET,
@@ -14,34 +14,26 @@ export const configPages = {
   Connections: configPage({
     tagline: "Authenticate with Slack",
     elements: {
-      "Slack OAuth Connection": connectionConfigVar({
-        stableKey: "slack-oauth-connection",
-        dataType: "connection",
-        connection: {
-          component: "slack",
-          key: "oauth2",
-          values: {
-            clientId: {
-              value: SLACK_CLIENT_ID,
-              permissionAndVisibilityType: "organization",
-              visibleToOrgDeployer: false,
-            },
-            clientSecret: {
-              value: SLACK_CLIENT_SECRET,
-              permissionAndVisibilityType: "organization",
-              visibleToOrgDeployer: false,
-            },
-            signingSecret: {
-              value: SLACK_SIGNING_SECRET,
-              permissionAndVisibilityType: "organization",
-              visibleToOrgDeployer: false,
-            },
-            scopes: {
-              value: "chat:write chat:write.public channels:read",
-              permissionAndVisibilityType: "organization",
-              visibleToOrgDeployer: false,
-            },
-          },
+      "Slack OAuth Connection": slackOauth2("slack-oauth-connection", {
+        clientId: {
+          value: SLACK_CLIENT_ID,
+          permissionAndVisibilityType: "organization",
+          visibleToOrgDeployer: false,
+        },
+        clientSecret: {
+          value: SLACK_CLIENT_SECRET,
+          permissionAndVisibilityType: "organization",
+          visibleToOrgDeployer: false,
+        },
+        signingSecret: {
+          value: SLACK_SIGNING_SECRET,
+          permissionAndVisibilityType: "organization",
+          visibleToOrgDeployer: false,
+        },
+        scopes: {
+          value: "chat:write chat:write.public channels:read",
+          permissionAndVisibilityType: "organization",
+          visibleToOrgDeployer: false,
         },
       }),
     },

New component data source functions

Similar to connections, data sources can be imported from a component manifest, and are named <componentKey><dataSourceKey>. The first parameter of the data source function is the stable key of the data source config var.

configPages.ts

@@ -1,9 +1,6 @@
import {
  configPage,
  configVar,
-  dataSourceConfigVar,
} from "@prismatic-io/spectral";
 import { slackOauth2 } from "./manifests/slack/connections/oauth2";
+import { slackSelectChannels } from "./manifests/slack/dataSources/selectChannels";
 import {
   SLACK_CLIENT_ID,
   SLACK_CLIENT_SECRET,
@@ -61,16 +58,9 @@ export const configPages = {
   "Slack Config": configPage({
     tagline: "Select a Slack channel from a dropdown menu",
     elements: {
-      "Select Slack Channel": dataSourceConfigVar({
-        stableKey: "select-slack-channel",
-        dataSource: {
-          component: "slack",
-          key: "selectChannels",
-          values: {
-            connection: { configVar: "Slack OAuth Connection" },
-            includePublicChannels: { value: true },
-          },
-        },
+      "Select Slack Channel": slackSelectChannels("select-slack-channel", {
+        connection: { configVar: "Slack OAuth Connection" },
+        includePublicChannels: { value: true },
       }),
     },
   }),