init-vb files

appsettings.json

{
  "Logging": {
    "IncludeScopes": false,
    "Debug": {
      "LogLevel": {
        "Default": "Warning"
      }
    },
    "Console": {
      "LogLevel": {
        "Default": "Warning"
      }
    }
  }
}

dtos.ts

/* Options:
Date: 2021-01-16 18:46:57
Version: 5.105
Tip: To override a DTO option, remove "//" prefix before updating
BaseUrl: https://localhost:5001

//GlobalNamespace: 
//MakePropertiesOptional: False
//AddServiceStackTypes: True
//AddResponseStatus: False
//AddImplicitVersion: 
//AddDescriptionAsComments: True
//IncludeTypes: 
//ExcludeTypes: 
//DefaultImports: 
*/


export interface IReturn<T>
{
    createResponse(): T;
}

export interface IReturnVoid
{
    createResponse(): void;
}

export class HelloResponse
{
    public result: string;

    public constructor(init?: Partial<HelloResponse>) { (Object as any).assign(this, init); }
}

// @Route("/hello")
// @Route("/hello/{Name}")
export class Hello implements IReturn<HelloResponse>
{
    public name: string;

    public constructor(init?: Partial<Hello>) { (Object as any).assign(this, init); }
    public createResponse() { return new HelloResponse(); }
    public getTypeName() { return 'Hello'; }
}

MyApp.vbproj

<Project Sdk="Microsoft.NET.Sdk.Web">
  
  <PropertyGroup>
    <TargetFramework>net5</TargetFramework>
    <TypeScriptToolsVersion>latest</TypeScriptToolsVersion>
    <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="ServiceStack" Version="5.*" />
  </ItemGroup>

</Project>

package.json

{
    "scripts": {
        "dtos": "x ts && tsc -m umd dtos.ts && x -e \"mv('dtos.js','wwwroot/dtos.js')\""
    }
}

Program.vb

Imports System
Imports System.Collections.Generic
Imports System.IO
Imports System.Linq
Imports System.Threading.Tasks
Imports Microsoft.AspNetCore
Imports Microsoft.AspNetCore.Hosting
Imports Microsoft.Extensions.Configuration
Imports Microsoft.Extensions.Logging
Imports ServiceStack

Module Program

    Sub Main(args As String())
        BuildWebHost(args).Run()
    End Sub

    Function BuildWebHost(args As String()) As IWebHost
        Return WebHost.CreateDefaultBuilder(args).UseModularStartup(Of Startup)().Build()
    End Function

End Module

Properties\launchSettings.json

{
    "iisSettings": {
      "windowsAuthentication": false,
      "anonymousAuthentication": true,
      "iisExpress": {
        "applicationUrl": "https://localhost:5001/",
        "sslPort": 0
      }
    },
    "profiles": {
      "IIS Express": {
        "commandName": "IISExpress",
        "launchBrowser": true,
        "environmentVariables": {
          "ASPNETCORE_ENVIRONMENT": "Development"
        }
      },
      "MyApp": {
        "commandName": "Project",
        "launchBrowser": true,
        "environmentVariables": {
          "ASPNETCORE_ENVIRONMENT": "Development"
        },
        "applicationUrl": "https://localhost:5001/"
      }
    }
  }

ServiceInterface\MyServices.vb

Imports System
Imports ServiceStack
Imports MyApp.ServiceModel

Namespace Global.MyApp.ServiceInterface

    Public Class MyServices 
        Inherits Service

        public Function Any(request AS Hello) AS Object
            Return new HelloResponse With { .Result = $"Hello, {request.Name}!" }
        End Function

    End Class

End Namespace

ServiceModel\Hello.vb

Imports ServiceStack

Namespace Global.MyApp.ServiceModel

    <Route("/hello")>
    <Route("/hello/{Name}")>
    Public Partial Class Hello
        Implements IReturn(Of HelloResponse)
        Public Overridable Property Name As String
    End Class

    Public Partial Class HelloResponse
        Public Overridable Property Result As String
    End Class

End Namespace

servicestack-client.d.ts

// from: https://unpkg.com/@servicestack/client/dist/index.d.ts

import 'fetch-everywhere';
export interface IReturnVoid {
    createResponse(): any;
}
export interface IReturn<T> {
    createResponse(): T;
}
export declare class ResponseStatus {
    constructor(init?: Partial<ResponseStatus>);
    errorCode: string;
    message: string;
    stackTrace: string;
    errors: ResponseError[];
    meta: {
        [index: string]: string;
    };
}
export declare class ResponseError {
    constructor(init?: Partial<ResponseError>);
    errorCode: string;
    fieldName: string;
    message: string;
    meta: {
        [index: string]: string;
    };
}
export declare class ErrorResponse {
    constructor(init?: Partial<ErrorResponse>);
    type: ErrorResponseType;
    responseStatus: ResponseStatus;
}
export declare class NavItem {
    label: string;
    href: string;
    exact: boolean;
    id: string;
    className: string;
    iconClass: string;
    show: string;
    hide: string;
    children: NavItem[];
    meta: {
        [index: string]: string;
    };
    constructor(init?: Partial<NavItem>);
}
export declare class GetNavItems {
    constructor(init?: Partial<GetNavItems>);
    createResponse(): GetNavItemsResponse;
    getTypeName(): string;
}
export declare class GetNavItemsResponse {
    baseUrl: string;
    results: NavItem[];
    navItemsMap: {
        [index: string]: NavItem[];
    };
    meta: {
        [index: string]: string;
    };
    responseStatus: ResponseStatus;
    constructor(init?: Partial<GetNavItemsResponse>);
}
export declare type ErrorResponseType = null | "RefreshTokenException";
export interface IAuthSession {
    userName: string;
    displayName: string;
    userId?: string;
    roles?: string[];
    permissions?: string[];
    profileUrl?: string;
}
export interface IResolver {
    tryResolve(Function: any): any;
}
export declare class NewInstanceResolver implements IResolver {
    tryResolve(ctor: ObjectConstructor): any;
}
export declare class SingletonInstanceResolver implements IResolver {
    tryResolve(ctor: ObjectConstructor): any;
}
export interface ServerEventMessage {
    type: "ServerEventConnect" | "ServerEventHeartbeat" | "ServerEventJoin" | "ServerEventLeave" | "ServerEventUpdate" | "ServerEventMessage";
    eventId: number;
    channel: string;
    data: string;
    selector: string;
    json: string;
    op: string;
    target: string;
    cssSelector: string;
    body: any;
    meta: {
        [index: string]: string;
    };
}
export interface ServerEventCommand extends ServerEventMessage {
    userId: string;
    displayName: string;
    channels: string;
    profileUrl: string;
}
export interface ServerEventConnect extends ServerEventCommand {
    id: string;
    unRegisterUrl: string;
    heartbeatUrl: string;
    updateSubscriberUrl: string;
    heartbeatIntervalMs: number;
    idleTimeoutMs: number;
}
export interface ServerEventHeartbeat extends ServerEventCommand {
}
export interface ServerEventJoin extends ServerEventCommand {
}
export interface ServerEventLeave extends ServerEventCommand {
}
export interface ServerEventUpdate extends ServerEventCommand {
}
export interface IReconnectServerEventsOptions {
    url?: string;
    onerror?: (...args: any[]) => void;
    onmessage?: (...args: any[]) => void;
    error?: Error;
}
/**
 * EventSource
 */
export declare enum ReadyState {
    CONNECTING = 0,
    OPEN = 1,
    CLOSED = 2,
}
export interface IEventSourceStatic extends EventTarget {
    new (url: string, eventSourceInitDict?: IEventSourceInit): IEventSourceStatic;
    url: string;
    withCredentials: boolean;
    CONNECTING: ReadyState;
    OPEN: ReadyState;
    CLOSED: ReadyState;
    readyState: ReadyState;
    onopen: Function;
    onmessage: (event: IOnMessageEvent) => void;
    onerror: Function;
    close: () => void;
}
export interface IEventSourceInit {
    withCredentials?: boolean;
}
export interface IOnMessageEvent {
    data: string;
}
export interface IEventSourceOptions {
    channels?: string;
    handlers?: any;
    receivers?: any;
    onException?: Function;
    onReconnect?: Function;
    onTick?: Function;
    resolver?: IResolver;
    validate?: (request: ServerEventMessage) => boolean;
    heartbeatUrl?: string;
    unRegisterUrl?: string;
    updateSubscriberUrl?: string;
    heartbeatIntervalMs?: number;
    heartbeat?: number;
    resolveStreamUrl?: (url: string) => string;
}
export declare class ServerEventsClient {
    channels: string[];
    options: IEventSourceOptions;
    eventSource: IEventSourceStatic;
    static UnknownChannel: string;
    eventStreamUri: string;
    updateSubscriberUrl: string;
    connectionInfo: ServerEventConnect;
    serviceClient: JsonServiceClient;
    stopped: boolean;
    resolver: IResolver;
    listeners: {
        [index: string]: ((e: ServerEventMessage) => void)[];
    };
    EventSource: IEventSourceStatic;
    withCredentials: boolean;
    constructor(baseUrl: string, channels: string[], options?: IEventSourceOptions, eventSource?: IEventSourceStatic);
    onMessage: (e: IOnMessageEvent) => void;
    onError: (error?: any) => void;
    getEventSourceOptions(): {
        withCredentials: boolean;
    };
    reconnectServerEvents(opt?: IReconnectServerEventsOptions): IEventSourceStatic;
    start(): this;
    stop(): Promise<void>;
    invokeReceiver(r: any, cmd: string, el: Element, request: ServerEventMessage, name: string): void;
    hasConnected(): boolean;
    registerHandler(name: string, fn: Function): this;
    setResolver(resolver: IResolver): this;
    registerReceiver(receiver: any): this;
    registerNamedReceiver(name: string, receiver: any): this;
    unregisterReceiver(name?: string): this;
    updateChannels(channels: string[]): void;
    update(subscribe: string | string[], unsubscribe: string | string[]): void;
    addListener(eventName: string, handler: ((e: ServerEventMessage) => void)): this;
    removeListener(eventName: string, handler: ((e: ServerEventMessage) => void)): this;
    raiseEvent(eventName: string, msg: ServerEventMessage): void;
    getConnectionInfo(): ServerEventConnect;
    getSubscriptionId(): string;
    updateSubscriber(request: UpdateEventSubscriber): Promise<void>;
    subscribeToChannels(...channels: string[]): Promise<void>;
    unsubscribeFromChannels(...channels: string[]): Promise<void>;
    getChannelSubscribers(): Promise<ServerEventUser[]>;
    toServerEventUser(map: {
        [id: string]: string;
    }): ServerEventUser;
}
export interface IReceiver {
    noSuchMethod(selector: string, message: any): any;
}
export declare class ServerEventReceiver implements IReceiver {
    client: ServerEventsClient;
    request: ServerEventMessage;
    noSuchMethod(selector: string, message: any): void;
}
export declare class UpdateEventSubscriber implements IReturn<UpdateEventSubscriberResponse> {
    id: string;
    subscribeChannels: string[];
    unsubscribeChannels: string[];
    createResponse(): UpdateEventSubscriberResponse;
    getTypeName(): string;
}
export declare class UpdateEventSubscriberResponse {
    responseStatus: ResponseStatus;
}
export declare class GetEventSubscribers implements IReturn<any[]> {
    channels: string[];
    createResponse(): any[];
    getTypeName(): string;
}
export declare class ServerEventUser {
    userId: string;
    displayName: string;
    profileUrl: string;
    channels: string[];
    meta: {
        [index: string]: string;
    };
}
export declare class HttpMethods {
    static Get: string;
    static Post: string;
    static Put: string;
    static Delete: string;
    static Patch: string;
    static Head: string;
    static Options: string;
    static hasRequestBody: (method: string) => boolean;
}
export interface IRequestFilterOptions {
    url: string;
}
export interface IRequestInit extends RequestInit {
    url?: string;
    compress?: boolean;
}
export interface Cookie {
    name: string;
    value: string;
    path: string;
    domain?: string;
    expires?: Date;
    httpOnly?: boolean;
    secure?: boolean;
    sameSite?: string;
}
export declare class GetAccessTokenResponse {
    accessToken: string;
    responseStatus: ResponseStatus;
}
export interface ISendRequest {
    method: string;
    request: any | null;
    body?: any | null;
    args?: any;
    url?: string;
    returns?: {
        createResponse: () => any;
    };
}
export declare class JsonServiceClient {
    baseUrl: string;
    replyBaseUrl: string;
    oneWayBaseUrl: string;
    mode: RequestMode;
    credentials: RequestCredentials;
    headers: Headers;
    userName: string;
    password: string;
    bearerToken: string;
    refreshToken: string;
    refreshTokenUri: string;
    useTokenCookie: boolean;
    requestFilter: (req: IRequestInit) => void;
    responseFilter: (res: Response) => void;
    exceptionFilter: (res: Response, error: any) => void;
    urlFilter: (url: string) => void;
    onAuthenticationRequired: () => Promise<any>;
    manageCookies: boolean;
    cookies: {
        [index: string]: Cookie;
    };
    parseJson: (res: Response) => Promise<any>;
    static toBase64: (rawString: string) => string;
    constructor(baseUrl?: string);
    setCredentials(userName: string, password: string): void;
    setBearerToken(token: string): void;
    get<T>(request: IReturn<T> | string, args?: any): Promise<T>;
    delete<T>(request: IReturn<T> | string, args?: any): Promise<T>;
    post<T>(request: IReturn<T>, args?: any): Promise<T>;
    postToUrl<T>(url: string, request: IReturn<T>, args?: any): Promise<T>;
    postBody<T>(request: IReturn<T>, body: string | any, args?: any): Promise<T>;
    put<T>(request: IReturn<T>, args?: any): Promise<T>;
    putToUrl<T>(url: string, request: IReturn<T>, args?: any): Promise<T>;
    putBody<T>(request: IReturn<T>, body: string | any, args?: any): Promise<T>;
    patch<T>(request: IReturn<T>, args?: any): Promise<T>;
    patchToUrl<T>(url: string, request: IReturn<T>, args?: any): Promise<T>;
    patchBody<T>(request: IReturn<T>, body: string | any, args?: any): Promise<T>;
    publish(request: IReturnVoid, args?: any): Promise<any>;
    sendOneWay<T>(request: IReturn<T> | IReturnVoid, args?: any): Promise<T>;
    sendAll<T>(requests: IReturn<T>[]): Promise<T[]>;
    sendAllOneWay<T>(requests: IReturn<T>[]): Promise<void>;
    createUrlFromDto<T>(method: string, request: IReturn<T>): string;
    toAbsoluteUrl(relativeOrAbsoluteUrl: string): string;
    deleteCookie(name: string): void;
    private createRequest({method, request, url, args, body});
    private json(res);
    private createResponse<T>(res, request);
    private handleError(holdRes, res, type?);
    send<T>(method: string, request: any | null, args?: any, url?: string): Promise<T>;
    private sendBody<T>(method, request, body, args?);
    sendRequest<T>(info: ISendRequest): Promise<T>;
    raiseError(res: Response, error: any): any;
}
export declare const isFormData: (body: any) => boolean;
export declare const toCamelCase: (s: string) => string;
export declare const toPascalCase: (s: string) => string;
export declare const sanitize: (status: any) => any;
export declare const nameOf: (o: any) => any;
export declare const css: (selector: string | NodeListOf<Element>, name: string, value: string) => void;
export declare const splitOnFirst: (s: string, c: string) => string[];
export declare const splitOnLast: (s: string, c: string) => string[];
export declare const humanize: (s: any) => any;
export declare const queryString: (url: string) => any;
export declare const combinePaths: (...paths: string[]) => string;
export declare const createPath: (route: string, args: any) => string;
export declare const createUrl: (route: string, args: any) => string;
export declare const appendQueryString: (url: string, args: any) => string;
export declare const bytesToBase64: (aBytes: Uint8Array) => string;
export declare const stripQuotes: (s: string) => string;
export declare const tryDecode: (s: string) => string;
export declare const parseCookie: (setCookie: string) => Cookie;
export declare const normalizeKey: (key: string) => string;
export declare const normalize: (dto: any, deep?: boolean) => any;
export declare const getField: (o: any, name: string) => any;
export declare const parseResponseStatus: (json: string, defaultMsg?: any) => any;
export declare function toFormData(o: any): FormData;
export declare function toObject(keys: any): {};
export declare function errorResponseSummary(): any;
export declare function errorResponseExcept(fieldNames: string[] | string): any;
export declare function errorResponse(fieldName: string): any;
export declare const toDate: (s: any) => Date;
export declare const toDateFmt: (s: string) => string;
export declare const padInt: (n: number) => string | number;
export declare const dateFmt: (d?: Date) => string;
export declare const dateFmtHM: (d?: Date) => string;
export declare const timeFmt12: (d?: Date) => string;
export declare const toLocalISOString: (d?: Date) => string;
export interface ICreateElementOptions {
    insertAfter?: Element | null;
}
export declare function createElement(tagName: string, options?: ICreateElementOptions, attrs?: any): HTMLElement;
export declare function bootstrap(el?: Element): void;
export interface IBindHandlersOptions {
    events: string[];
}
export declare function bindHandlers(handlers: any, el?: Document | Element, opt?: IBindHandlersOptions): void;
export interface IAjaxFormOptions {
    type?: string;
    url?: string;
    model?: any;
    credentials?: RequestCredentials;
    validate?: (this: HTMLFormElement) => boolean;
    onSubmitDisable?: string;
    submit?: (this: HTMLFormElement, options: IAjaxFormOptions) => Promise<any>;
    success?: (this: HTMLFormElement, result: any) => void;
    error?: (this: HTMLFormElement, e: any) => void;
    complete?: (this: HTMLFormElement) => void;
    requestFilter?: (req: IRequestInit) => void;
    responseFilter?: (res: Response) => void;
    errorFilter?: (this: IValidation, message: string, errorCode: string, type: string) => void;
    messages?: {
        [index: string]: string;
    };
}
export declare function bootstrapForm(form: HTMLFormElement | null, options: IAjaxFormOptions): void;
export interface IValidation {
    overrideMessages: boolean;
    messages: {
        [index: string]: string;
    };
    errorFilter?: (this: IValidation, message: string, errorCode: string, type: string) => void;
}
export declare const toVarNames: (names: string | string[]) => string[];
export declare function formSubmit(this: HTMLFormElement, options?: IAjaxFormOptions): Promise<any>;
export declare function ajaxSubmit(f: HTMLFormElement, options?: IAjaxFormOptions): any;
export declare function serializeForm(form: HTMLFormElement, contentType?: string | null): string | FormData;
export declare const serializeToObject: (form: HTMLFormElement) => any;
export declare function serializeToUrlEncoded(form: HTMLFormElement): string;
export declare const serializeToFormData: (form: HTMLFormElement) => FormData;
export declare function triggerEvent(el: Element, name: string, data?: any): void;
export declare function populateForm(form: HTMLFormElement, model: any): void;
export declare function trimEnd(s: string, c: string): string;
export declare function safeVarName(s: string): string;
export declare function pick(o: any, keys: string[]): {};
export declare function omit(o: any, keys: string[]): {};
export declare function activeClassNav(x: NavItem, activePath: string): string;
export declare function activeClass(href: string | null, activePath: string, exact?: boolean): string;
export declare const BootstrapColors: string[];
export declare function btnColorClass(props: any): string;
export declare const BootstrapSizes: string[];
export declare function btnSizeClass(props: any): string;
export declare function btnClasses(props: any): any[];
export declare class NavDefaults {
    static navClass: string;
    static navItemClass: string;
    static navLinkClass: string;
    static childNavItemClass: string;
    static childNavLinkClass: string;
    static childNavMenuClass: string;
    static childNavMenuItemClass: string;
    static create(): NavOptions;
    static forNav(options?: NavOptions | null): NavOptions;
    static overrideDefaults(targets: NavOptions | null | undefined, source: NavOptions): NavOptions;
    static showNav(navItem: NavItem, attributes: string[]): boolean;
}
export declare class NavLinkDefaults {
    static forNavLink(options?: NavOptions | null): NavOptions;
}
export declare class NavbarDefaults {
    static navClass: string;
    static create(): NavOptions;
    static forNavbar(options?: NavOptions | null): NavOptions;
}
export declare class NavButtonGroupDefaults {
    static navClass: string;
    static navItemClass: string;
    static create(): NavOptions;
    static forNavButtonGroup(options?: NavOptions | null): NavOptions;
}
export declare class LinkButtonDefaults {
    static navItemClass: string;
    static create(): NavOptions;
    static forLinkButton(options?: NavOptions | null): NavOptions;
}
export declare class UserAttributes {
    static fromSession(session: IAuthSession | null): string[];
}
export declare class NavOptions {
    static fromSession(session: IAuthSession | null, to?: NavOptions): NavOptions;
    attributes: string[];
    activePath?: string;
    baseHref?: string;
    navClass?: string;
    navItemClass?: string;
    navLinkClass?: string;
    childNavItemClass?: string;
    childNavLinkClass?: string;
    childNavMenuClass?: string;
    childNavMenuItemClass?: string;
    constructor(init?: Partial<NavOptions>);
}
export declare function classNames(...args: any[]): string;
export declare function fromXsdDuration(xsd: string): number;
export declare function toXsdDuration(time: number): string;
export declare function toTimeSpanFmt(time: number): string;

Startup.vb

Imports System.Collections.Generic
Imports System.Linq
Imports Microsoft.AspNetCore.Builder
Imports Microsoft.AspNetCore.Hosting
Imports Microsoft.Extensions.Hosting
Imports Microsoft.Extensions.DependencyInjection
Imports Microsoft.Extensions.Configuration
Imports Funq
Imports ServiceStack
Imports ServiceStack.Configuration
Imports MyApp.ServiceInterface
Imports ServiceStack.Script
Imports ServiceStack.Web
Imports System
Imports ServiceStack.Text
Imports ServiceStack.Logging

Namespace Global.MyApp

    Class Startup 
        Inherits ModularStartup

        ' This method gets called by the runtime. Use this method to add services to the container.
        ' For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
        Overloads Sub ConfigureServices(Services as IServiceCollection)
        End Sub

        Overloads Sub Configure(app AS IApplicationBuilder, env AS IWebHostEnvironment)
            If env.IsDevelopment() 
                app.UseDeveloperExceptionPage()
            End If

            app.UseServiceStack(new AppHost With {
                .AppSettings = new NetCoreAppSettings(Configuration)
            })

        End Sub        
    End Class

    Class AppHost 
        Inherits AppHostBase

        Public Sub New()
            MyBase.New("My App", GetType(MyServices).Assembly)
        End Sub

        ' Configure your AppHost with the necessary configuration and dependencies your App needs
        Public Overrides Sub Configure(container AS Container)
            SetConfig(new HostConfig With {
                .UseSameSiteCookies = true,
                .DebugMode = HostingEnvironment.IsDevelopment()
            })
        End Sub
        
    End Class

End Namespace

wwwroot\dtos.js

/* Options:
Date: 2021-01-16 18:46:57
Version: 5.105
Tip: To override a DTO option, remove "//" prefix before updating
BaseUrl: https://localhost:5001

//GlobalNamespace:
//MakePropertiesOptional: False
//AddServiceStackTypes: True
//AddResponseStatus: False
//AddImplicitVersion:
//AddDescriptionAsComments: True
//IncludeTypes:
//ExcludeTypes:
//DefaultImports:
*/
(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports"], factory);
    }
})(function (require, exports) {
    "use strict";
    exports.__esModule = true;
    exports.Hello = exports.HelloResponse = void 0;
    var HelloResponse = /** @class */ (function () {
        function HelloResponse(init) {
            Object.assign(this, init);
        }
        return HelloResponse;
    }());
    exports.HelloResponse = HelloResponse;
    // @Route("/hello")
    // @Route("/hello/{Name}")
    var Hello = /** @class */ (function () {
        function Hello(init) {
            Object.assign(this, init);
        }
        Hello.prototype.createResponse = function () { return new HelloResponse(); };
        Hello.prototype.getTypeName = function () { return 'Hello'; };
        return Hello;
    }());
    exports.Hello = Hello;
});

wwwroot\index.html

<html>
<head>
    <title>My App</title>
    <style>
        body { padding: 1em 1em 0 1em; }
        body, input[type=text] { font: 32px/36px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif }
        input { padding:.25em .5em; margin-right:.5em; }
        a { color: #007bff }
        #result { display:inline-block;color:#28a745; }
        pre { background: #f1f1f1; padding: 1em; }
    </style>
</head>
<body>
    
    <h2><a href="/json/metadata?op=Hello">Hello</a> API</h2>
    <input type="text" id="txtName" onkeyup="callHello(this.value)">
    <div id="result"></div>

    <script>
        var exports = { __esModule:true }, module = { exports:exports }
        function require(name) { return exports[name] || window[name] }
    </script>
    <script src="/js/servicestack-client.js"></script>
    <script src="/dtos.js"></script>
    <script>
        Object.assign(window, exports); //import

        var client = new JsonServiceClient();
        function callHello(val) {
            client.get(new Hello({ name: val }))
                .then(function(r) {
                    document.getElementById('result').innerHTML = r.result;
                });
        }

        callHello(document.querySelector('#txtName').value = 'World')
    </script>

    <div style="font-size:20px;line-height:26px">
        <h3>Using JsonServiceClient in Web Pages</h3>

        <p>
            Update your App's 
            <a href="https://docs.servicestack.net/typescript-add-servicestack-reference">TypeScript DTOs</a> and 
            compile to JS (requires <a href="https://www.typescriptlang.org/download">TypeScript</a>):
        </p>

        <pre>$ x scripts dtos</pre>

        <h3>Including @servicestack/client &amp; Typed DTOs</h3>

        <p>
            Create a basic UMD loader then include the UMD <b>@servicestack/client</b> library and <b>dtos.js</b>:
        </p>

        <pre>&lt;script&gt;
  var exports = { __esModule:true }, module = { exports:exports }
  function require(name) { return exports[name] || window[name] }
&lt;/script&gt;
&lt;script src="/js/servicestack-client.js"&gt;&lt;/script&gt;
&lt;script src="/dtos.js"&gt;&lt;/script&gt;</pre>

    <p>
        We can then import the library and DTO types in the global namespace to use them directly:
    </p>

<pre>Object.assign(window, exports) //import

var client = new JsonServiceClient()
client.get(new Hello({ name: name }))
    .then(function(r) {
        console.log(r.result)
    })
</pre>

    <h3>Using @servicestack/client in npm projects</h3>
    <pre>$ npm install @servicestack/client</pre>
    <pre>import { JsonServiceClient } from '@servicestack/client'

let client = new JsonServiceClient()
let response = await client.get(new Hello({ name }))
</pre>

        <p>
            Typed DTOs generated using 
            <a href="https://docs.servicestack.net/typescript-add-servicestack-reference">TypeScript Add ServiceStack Reference</a> 
        </p>
    </div>

</body>
</html>