JSX(TSX)

Introduction

We can write your Alexa speech by using JSX.

Before

handlerInput.responseBuilder
  .speak("Hello! It's a nice development. How are you?")
  .reprompt("How are you?")
  .getResponse()

After

/** @jsx ssml */
import {
    ssml,
    SpeechScriptJSX,
} from '@ask-utils/speech-script'

export class HelloWorldIntentScript extends SpeechScriptJSX {
    speech() {
        return (
            <speak>
                <p>Hello! It's a nice development. How are you?</p>
            </speak>
        )
    }
    
    reprompt() {
        return (
            <speak>
                <p>How are you?</p>
            </speak>
        )
    }
    
}

Generate by CLI

We can easy to create a new route and handler file with using TSX from TalkyJS CLI.

$ talky g router HelloWorldIntent --ssml tsx
? What type do you handle the request? IntentRequest
CREATE src/HelloWorldIntent/HelloWorldIntent.router.ts (504 bytes)
CREATE src/HelloWorldIntent/HelloWorldIntent.speech.tsx (449 bytes)
CREATE src/HelloWorldIntent/tests/HelloWorldIntent.router.spec.ts (1246 bytes)
CREATE src/HelloWorldIntent/tests/HelloWorldIntent.speech.spec.tsx (518 bytes)
$ talky g handler HelloWorldIntent --ssml tsx
? What type do you handle the request? IntentRequest
CREATE src/HelloWorldIntent/HelloWorldIntent.handler.ts (504 bytes)
CREATE src/HelloWorldIntent/HelloWorldIntent.speech.tsx (449 bytes)
CREATE src/HelloWorldIntent/tests/HelloWorldIntent.handler.spec.ts (1246 bytes)
CREATE src/HelloWorldIntent/tests/HelloWorldIntent.speech.spec.tsx (518 bytes)

Request object type

We can set the request type using generics

/** @jsx ssml */
import {
    ssml,
    SpeechScriptJSX,
} from '@ask-utils/speech-script'
import { Request } from 'ask-sdk-model'

export class HelloWorldIntentScript extends SpeechScriptJSX<Request, {
    randomNumber: number
}> {
    speech() {
        return (
            <speak>
                <p>Hello! Your rucky number is {this.options.randomNumber}.How are you?</p>
            </speak>
        )
    }    
}

In this example, we can easy to write code for ConnectionsResponse.

/** @jsx ssml */
import {
    ssml,
    SpeechScriptJSX,
} from '@ask-utils/speech-script'
import { interfaces } from 'ask-sdk-model'

type ConnectionsResponse = interfaces.connections.ConnectionsResponse
export class ConnectionsResponseScript extends SpeechScriptJSX<ConnectionsResponse> {
    speech() {
        const {
            payload,
            status,
        } = this.props.request
        return (
            <speak>
                <p>Your connection result status is {status}. and payload {payload['key']}</p>
            </speak>
        )
    }    
}

Custom property

We can put any custom property from the request.

/** @jsx ssml */
import {
    ssml,
    SpeechScriptJSX,
} from '@ask-utils/speech-script'
import { Request } from 'ask-sdk-model'

export class HelloWorldIntentScript extends SpeechScriptJSX<Request, {
    randomNumber: number
}> {
    speech() {
        return (
            <speak>
                <p>Hello! Your rucky number is {this.options.randomNumber}.How are you?</p>
            </speak>
        )
    }    
}

And we can put the custom property like this example.

import { Router } from "@talkyjs/core";

import { HelloWorldIntentScript } from './HelloWorldIntent.speech'


export const HelloWorldIntentRouter: Router = {
    requestType: "IntentRequest",
    intentName: "HelloWorldIntent",
    handler: async (handlerInput) => {
        const script = new HelloWorldIntentScript(handlerInput, {
            randomNumber: Math.random()
        })
        return script
            .createResponseBuilder()
            .getResponse();
        
        
    }
}

export default HelpIntentRouter
Vote me on Product Hunt!

If you interested about the project, please vote me on Product Hunt!

TalkyJS - Alexa Custom Skill framework - A JavaScript framework for Amazon Alexa Skill development | Product Hunt Embed

©2020 Created by TalkyJS team