New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Host botchat.d.ts on CDN #993

Open
rjamesnw opened this Issue May 28, 2018 · 5 comments

Comments

Projects
None yet
3 participants
@rjamesnw

rjamesnw commented May 28, 2018

Is there a definition file I can use with TypeScript for the types in the botchat.js file on the CDN, or will I have to convert my site to use React in order to get the needed types? (I don't want to use iframes).

@compulim

This comment has been minimized.

Collaborator

compulim commented Jun 7, 2018

We publish /built/*.d.ts on NPM, in addition to botchat.js.

I can do that, but I wonder, how *.d.ts on CDN will benefit in your scenario? We target CDN distribution channel for users who like to use Bot Chat like jQuery (one single import plus one JS call to instantiate).

Can you tell me more about it?

@compulim compulim assigned compulim and unassigned compulim Jun 7, 2018

@compulim compulim self-assigned this Jun 7, 2018

@rjamesnw

This comment has been minimized.

rjamesnw commented Jun 8, 2018

I didn’t say d.ts on CDN. I meant I don’t want to use react to access the TS types. I want to load the .js from the CDN (which is web packed) and just have a definition file representing the types in the .js file.

@compulim

This comment has been minimized.

Collaborator

compulim commented Jun 13, 2018

Can you point me to a project that did this? I am new to this idea and I have a few questions:

  • Where will we store the d.ts file? I prefer not to keep it on GitHub
  • Do you have pointers to generate the mono d.ts?
@rjamesnw

This comment has been minimized.

rjamesnw commented Jun 13, 2018

I’m not sure (I don’t use react) but you can start looking here: https://www.npmjs.com/package/dts-webpack-plugin

You can publish the d.ts file on DefinitelyTyped (https://github.com/DefinitelyTyped/DefinitelyTyped), which is used to find single declaration files for single .js files (typically). You shouldn’t force people to require react for this just to get types to use on a non-react website.

@billba

This comment has been minimized.

Member

billba commented Jun 16, 2018

I'm still trying to understand this scenario.

I think you are saying that you want to use TypeScript to build a client app using Web Chat. But instead of incorporating Web Chat directly into your app via npm package, you want to load it from the CDN, e.g.

index.html

...
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
...
<div id='bot'/>
...
<script src="clientCode.js"/></script> <!-- generated from clientCode.ts -->
...

I don't think DefinitelyTyped is the answer here. It exists to provide types for npm packages that lack their own. But here you don't want to use an npm package at all. You just want to apply types to an arbitrary object that's loaded into the window.

My first recommendation is just to include botframework-webchat as a devDependency in your client app. I think you can then use it like so:

clientCode.ts

import { App } from 'botframework-webchat';

const botChatApp = window["BotChat"].App as App;

botChatApp({ secret: 'your_secret_here' }, document.getElementById('bot'));

It may seem like overkill to install the whole package just to access its typings, but it shouldn't get bundled into your app.

If you don't like this idea, you could just copy the BotChat.d.ts file from the botframework-webchat package and include it in your app, then reference it directly:

/// <reference path="/path/to/BotChat.d.ts" />

If you don't like that idea, my recommendation is to just go without the typings. I say this as an extreme TypeScript enthusiast, but for most purposes the surface area of Web Chat is pretty small (see above.

And if you don't like that idea, consider actually bundling botframework-webchat into your app using npm instead of the CDN. Your bundle size will increase, but your performance will be better as now there will just be one .js file to download instead of two.

@compulim compulim changed the title from botchat.d.ts for CDN to Host botchat.d.ts on CDN Jun 18, 2018

@compulim compulim removed the Investigating label Oct 30, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment