Generate TypeScript typings from Stone specification for NPM distribu…

…tion Future publications of the dropbox NPM module will now include TypeScript typings generated using the new TypeScript stone generator. Typings contain TSDoc annotations for better IDE integration. Includes TypeScript versions of each JavaScript SDK example.
dropbox · Mar 16, 2017 · 5eab745 · 5eab745
1 parent 49060ea
commit 5eab745
Show file tree

Hide file tree

Showing 63 changed files with 13,018 additions and 8 deletions.
diff --git a/examples/typescript/README.md b/examples/typescript/README.md
@@ -0,0 +1,11 @@
+# Dropbox TypeScript SDK Examples
+
+To run the examples in your development environment:
+
+1. Clone this repo
+2. Run `npm install` in the root of the repository
+3. `cd` into this directory
+4. Run `npm install`
+3. From this directory, start the development server with
+   `npm start`
+4. Point your browser to <http://0.0.0.0:8080/>
diff --git a/examples/typescript/auth/auth.js b/examples/typescript/auth/auth.js
diff --git a/examples/typescript/auth/auth.js.map b/examples/typescript/auth/auth.js.map
diff --git a/examples/typescript/auth/auth.ts b/examples/typescript/auth/auth.ts
@@ -0,0 +1,92 @@
+var CLIENT_ID = '42zjexze6mfpf7x';
+
+function parseQueryString(str: string) {
+  var ret: {[k: string]: string[] | string} = Object.create(null);
+
+  if (typeof str !== 'string') {
+    return ret;
+  }
+
+  str = str.trim().replace(/^(\?|#|&)/, '');
+
+  if (!str) {
+    return ret;
+  }
+
+  str.split('&').forEach(function (param) {
+    var parts = param.replace(/\+/g, ' ').split('=');
+    // Firefox (pre 40) decodes `%3D` to `=`
+    // https://github.com/sindresorhus/query-string/pull/37
+    var key = parts.shift();
+    var val = parts.length > 0 ? parts.join('=') : undefined;
+
+    key = decodeURIComponent(key);
+
+    // missing `=` should be `null`:
+    // http://w3.org/TR/2012/WD-url-20120524/#collect-url-parameters
+    val = val === undefined ? null : decodeURIComponent(val);
+
+    var retVal = ret[key];
+    if (ret[key] === undefined) {
+      ret[key] = val;
+    } else if (Array.isArray(retVal)) {
+      retVal.push(val);
+    } else {
+      ret[key] = [<string> ret[key], val];
+    }
+  });
+
+  return ret;
+}
+
+// Parses the url and gets the access token if it is in the urls hash
+function getAccessTokenFromUrl() {
+  return <string> parseQueryString(window.location.hash)['access_token'];
+}
+
+// If the user was just redirected from authenticating, the urls hash will
+// contain the access token.
+function isAuthenticated() {
+  return !!getAccessTokenFromUrl();
+}
+
+// Render a list of items to #files
+function renderItems(items: DropboxTypes.files.MetadataReference[]) {
+  var filesContainer = document.getElementById('files');
+  items.forEach(function(item) {
+    var li = document.createElement('li');
+    li.innerHTML = item.name;
+    filesContainer.appendChild(li);
+  });
+}
+
+// This example keeps both the authenticate and non-authenticated setions
+// in the DOM and uses this function to show/hide the correct section.
+function showPageSection(elementId: string) {
+  document.getElementById(elementId).style.display = 'block';
+}
+
+if (isAuthenticated()) {
+  showPageSection('authed-section');
+
+  // Create an instance of Dropbox with the access token and use it to
+  // fetch and render the files in the users root directory.
+  var dbx = new Dropbox({ accessToken: getAccessTokenFromUrl() });
+  dbx.filesListFolder({path: '', recursive: false, include_media_info: false, include_deleted: false, include_has_explicit_shared_members: false})
+    .then(function(response) {
+      renderItems(response.entries);
+    })
+    // NOTE: Need to explicitly specify type of error here, since TypeScript cannot infer it.
+    // The type is mentioned in the TSDoc for filesListFolder, so hovering over filesListFolder
+    // in a TS-equipped editor (e.g., Visual Studio Code) will show you that documentation.
+    .catch(function(error: DropboxTypes.Error<DropboxTypes.files.ListFolderError>) {
+      console.error(error);
+    });
+} else {
+  showPageSection('pre-auth-section');
+
+  // Set the login anchors href using dbx.getAuthenticationUrl()
+  var dbx = new Dropbox({ clientId: CLIENT_ID });
+  var authUrl = dbx.getAuthenticationUrl('http://localhost:8080/auth');
+  (<HTMLAnchorElement> document.getElementById('authlink')).href = authUrl;
+}
diff --git a/examples/typescript/auth/index.html b/examples/typescript/auth/index.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html>
+<head>
+  <title>Dropbox TypeScript SDK</title>
+  <link rel="stylesheet" href="/styles.css">
+  <script src="/__build__/Dropbox-sdk.min.js"></script>
+</head>
+<body>
+  <!-- Example layout boilerplate -->
+  <header class="page-header">
+    <div class="container">
+      <nav>
+        <a href="/">
+          <h1>
+            <img src="https://cfl.dropboxstatic.com/static/images/brand/logotype_white-vflRG5Zd8.svg" class="logo" />
+            TypeScript SDK Examples
+          </h1>
+        </a>
+        <a href="https://github.com/dropbox/dropbox-sdk-js/tree/master/examples/typescript" class="view-source">View Source</a>
+      </nav>
+      <h2 class="code">
+        <a href="/">examples</a> / authentication
+      </h2>
+    </div>
+  </header>
+
+  <div class="container main">
+    <div id="pre-auth-section" style="display:none;">
+      <p>This example takes the user through Dropbox's API OAuth flow using <code>Dropbox.getAuthenticationUrl()</code> method [<a href="http://dropbox.github.io/dropbox-sdk-js/Dropbox.html#getAuthenticationUrl">docs</a>] and then uses the generated access token to list the contents of their root directory.</p>
+      <a href="" id="authlink" class="button">Authenticate</a>
+      <p class="info">Once authenticated, it will use the access token to list the files in your root directory.</p>
+    </div>
+
+    <div id="authed-section" style="display:none;">
+      <p>You have successfully authenticated. Below are the contents of your root directory. They were fetched using the SDK and access token.</p>
+      <ul id="files"></ul>
+    </div>
+  </div>
+
+  <script src="auth.js"></script>
+</body>
+</html>
diff --git a/examples/typescript/basic/basic.js b/examples/typescript/basic/basic.js
diff --git a/examples/typescript/basic/basic.js.map b/examples/typescript/basic/basic.js.map
diff --git a/examples/typescript/basic/basic.ts b/examples/typescript/basic/basic.ts
@@ -0,0 +1,23 @@
+function listFiles() {
+  var ACCESS_TOKEN = (<HTMLInputElement> document.getElementById('access-token')).value;
+  var dbx = new Dropbox({ accessToken: ACCESS_TOKEN });
+  dbx.filesListFolder({path: ''})
+    .then(function(response) {
+      displayFiles(response.entries);
+      console.log(response);
+    })
+    .catch(function(error: DropboxTypes.Error<DropboxTypes.files.ListFolderError>) {
+      console.error(error);
+    });
+  return false;
+}
+
+function displayFiles(files: DropboxTypes.files.MetadataReference[]) {
+  var filesList = document.getElementById('files');
+  var li: HTMLLIElement;
+  for (var i = 0; i < files.length; i++) {
+    li = document.createElement('li');
+    li.appendChild(document.createTextNode(files[i].name));
+    filesList.appendChild(li);
+  }
+}
diff --git a/examples/typescript/basic/index.html b/examples/typescript/basic/index.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html>
+<head>
+  <title>Dropbox TypeScript SDK</title>
+  <link rel="stylesheet" href="/styles.css">
+  <script src="/__build__/Dropbox-sdk.min.js"></script>
+</head>
+<body>
+  <!-- Example layout boilerplate -->
+  <header class="page-header">
+    <div class="container">
+      <nav>
+        <a href="/">
+          <h1>
+            <img src="https://cfl.dropboxstatic.com/static/images/brand/logotype_white-vflRG5Zd8.svg" class="logo" />
+            TypeScript SDK Examples
+          </h1>
+        </a>
+        <a href="https://github.com/dropbox/dropbox-sdk-js/tree/master/examples/typescript" class="view-source">View Source</a>
+      </nav>
+      <h2 class="code">
+        <a href="/">examples</a> / basic
+      </h2>
+    </div>
+  </header>
+
+  <!-- Example description and UI -->
+  <section class="container main">
+    <p>This example fetches the contents of your root Dropbox directory. It uses the <code>Dropbox.filesListFolder()</code> method [<a href="http://dropbox.github.io/dropbox-sdk-js/Dropbox.html#filesListFolder">docs</a>].</p>
+
+    <form onSubmit="return listFiles()">
+      <input type="text" id="access-token" placeholder="Access token" />
+      <button type="submit">Submit</button>
+    </form>
+
+    <!-- The files returned from the SDK will be added here -->
+    <ul id="files"></ul>
+
+    <p class="info">To obtain an access token for quick testing, you can go to <a href="https://dropbox.github.io/dropbox-api-v2-explorer/#files_list_folder" target="_blank">API Explorer</a> click the "Get Token" button on the top right, copy the token it creates and then paste it here.</p>
+  </section>
+
+  <!-- Scripts to run example -->
+  <script src="basic.js"></script>
+</body>
+</html>
diff --git a/examples/typescript/download/download.js b/examples/typescript/download/download.js
diff --git a/examples/typescript/download/download.js.map b/examples/typescript/download/download.js.map
diff --git a/examples/typescript/download/download.ts b/examples/typescript/download/download.ts
@@ -0,0 +1,22 @@
+function downloadFile() {
+  var ACCESS_TOKEN = (<HTMLInputElement> document.getElementById('access-token')).value;
+  var SHARED_LINK = (<HTMLInputElement> document.getElementById('shared-link')).value;
+  var dbx = new Dropbox({ accessToken: ACCESS_TOKEN });
+  dbx.sharingGetSharedLinkFile({url: SHARED_LINK})
+    .then(function(data) {
+      // NOTE: The Dropbox SDK specification does not include a fileBlob
+      // field on the FileLinkMetadataReference type, so it is missing from
+      // the TypeScript type. This field is injected by the Dropbox SDK.
+      var downloadUrl = URL.createObjectURL((<any> data).fileBlob);
+      var downloadButton = document.createElement('a');
+      downloadButton.setAttribute('href', downloadUrl);
+      downloadButton.setAttribute('download', data.name);
+      downloadButton.setAttribute('class', 'button');
+      downloadButton.innerText = 'Download: ' + data.name;
+      document.getElementById('results').appendChild(downloadButton);
+    })
+    .catch(function(error: DropboxTypes.Error<DropboxTypes.sharing.GetSharedLinkFileError>) {
+      console.error(error);
+    });
+  return false;
+}