JSPM

  • Created
  • Published
  • Downloads 396
  • Score
    100M100P100Q77064F

ServiceStack's TypeScript library providing a number of convenience utilities in developing web apps. Integrates with ServiceStack's Server features including Error Handling, Validation and Server Events

Package Exports

  • servicestack-client

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (servicestack-client) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

servicestack-client

This library contains the Typed ServiceStack Client library that is an idiomatic port of ServiceStack's ss-utils.js JavaScript Client in native TypeScript. It provides integration with many ServiceStack features including TypeScript Add ServiceStack Reference and Server Events.

Isomorphic Fetch

It contains a clean "jQuery-free" implementation based on JavaScript's new Fetch API standard, utilizing the isomorphic-fetch implementation so it can be used in both JavaScript client web apps as well as node.js server projects.

Install

This package is pre-configured in all ServiceStackVS TypeScript VS.NET Templates

Other TypeScript or ES6 projects can install servicestack-client with:

jspm install servicestack-client

node server projects can instead install it with:

npm install servicestack-client --save

Then fetch the Type Definitions for either project type with:

typings install servicestack-client --save
typings install dt~isomorphic-fetch --global --save

Ideal Typed Message-based API

The TypeScript JsonServiceClient enables the same productive, typed API development experience available in ServiceStack's other 1st-class supported client platforms.

The JsonServiceClient leverages the additional type hints ServiceStack embeds in each TypeScript Request DTO to achieve the ideal typed, message-based API - so all API requests benefit from a succinct, boilerplate-free Typed API.

Here's a quick look at what it looks like. The example below shows how to create a C# Gist in Gislyn after adding a TypeScript ServiceStack Reference to gistlyn.com and installing the servicestack-client npm package:

import { JsonServiceClient } from 'servicestack-client';
import { StoreGist, GithubFile } from './Gistlyn.dtos';

var client = new JsonServiceClient("http://gistlyn.com");

var request = new StoreGist();
var file = new GithubFile();
file.filename = "main.cs";
file.content = 'var greeting = "Hi, from TypeScript!";';
request.files = { [file.filename]: file };

client.post(request)
    .then(r => { // r:StoreGistResponse
        console.log(`New C# Gist was created with id: ${r.gist}`);
        location.href = `http://gistlyn.com?gist=${r.gist}`;
    })
    .catch(e => {
        console.log("Failed to create Gist: ", e.responseStatus);
    });

Where the r param in the returned then() Promise callback is typed to StoreGistResponse DTO Type.

ServerEventsClient

In addition to JsonServiceClient this package contains most of the JavaScript utils in ss-utils.js, including the new ServerEventsClient which gistlyn.com uses to process real-time Server Events from the executing C# Gist with:

const channels = ["gist"];
const sse = new ServerEventsClient("/", channels, {
    handlers: {
        onConnect(activeSub:ISseConnect) {                       // Successful SSE connection
            store.dispatch({ type: 'SSE_CONNECT', activeSub });  // Tell Redux Store we're connected 
            fetch("/session-to-token", {                         // Convert Session to JWT
                method:"POST", credentials:"include" 
            }); 
        },
        ConsoleMessage(m, e) {                                   // C# Gist Console Logs
            batchLogs.queue({ msg: m.message });
        },
        ScriptExecutionResult(m:ScriptExecutionResult, e) {      // Script Status Updates
            //...
        }
    }
});