# Spectral 10.6 Upgrade Guide

Spectral 10.6 introduces a new way for you to reference existing component actions, data sources and connections in a code-native integration. You can now use new action, data source, and connection reference functions to build code-native integrations more easily, with 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[​](#generating-new-component-manifests "Direct link to Generating new component manifests")

Previously, you had to install all component type manifests 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.

You can now generate new manifests for both public and private components, which include new type wrappers.

To install a component manifest, run the following command:

```bash
# 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

```diff
@@ -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[​](#new-component-action-functions "Direct link to New component action functions")

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

yourFlow\.ts

```diff
@@ -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 trigger functions[​](#new-component-trigger-functions "Direct link to New component trigger functions")

Similar to actions, triggers can be imported from a component manifest and invoked directly.

```ts
import { flow } from "@prismatic-io/spectral";
import { salesforceFlowOutboundMessageTrigger } from "./manifests/salesforce/triggers/flowOutboundMessageTrigger";

export const salesforceAccountNotifications = flow({
  name: "Listen for Salesforce Account Notifications",
  stableKey: "salesforce-account-notifications",
  description:
    "This flow uses an existing component trigger to listen for Account notifications from Salesforce.",
  onTrigger: salesforceFlowOutboundMessageTrigger({
    connection: { configVar: "Salesforce Connection" },
    prefix: { value: "acme" },
    triggerObject: { value: "Account" },
    fields: { value: ["Id", "Name"] },
  }),
  onExecution: async (context, params) => {
    // ...
  },
});

```

## New component connection functions[​](#new-component-connection-functions "Direct link to 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

```diff
@@ -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[​](#new-component-data-source-functions "Direct link to 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

```diff
@@ -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 },
       }),
     },
   }),

```