Merge pull request #31 from pusher/vanilla

Vanilla
pusher · Mar 13, 2018 · 31e18b5 · 31e18b5
2 parents 36e524f + b77674a
commit 31e18b5
Show file tree

Hide file tree

Showing 75 changed files with 4,942 additions and 8,400 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,4 +4,6 @@ npm-debug.log
 yarn-error.log
 .DS_Store
 .vscode/
-tests/config.js
+tests/config/production.js
+tests/config/staging.js
+tests/config/development.js
diff --git a/.prettierrc b/.prettierrc
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,7 +4,95 @@ This project adheres to [Semantic Versioning Scheme](http://semver.org)
 
 ---
 
-## [Unreleased](https://github.com/pusher/chatkit-client-js/compare/0.6.2...HEAD)
+## [Unreleased](https://github.com/pusher/chatkit-client-js/compare/0.7.0...HEAD)
+
+## 0.7.0 -- 2018-03-13
+
+This version represents a radical departure from 0.6.X. The interface is very
+different, and there's a good chance we'll miss some of the changes in this
+log. If something isn't working after migration, the best place to look first
+is probably the
+[documentation](https://docs.pusher.com/chatkit/reference/javascript).
+
+### Changes
+
+- Methods with `onSuccess`, `onFailure` callbacks changed to return promises
+  instead. e.g.
+
+```javascript
+chatManager
+  .connect()
+  .then(currentUser => {})
+  .catch(err => {})
+```
+
+- All methods take a single object parameter (see the
+  [documentation](https://docs.pusher.com/chatkit/reference/javascript) for
+  details on each method's arguments)
+
+- Delegates renamed to `hooks` throughout. e.g.
+
+```javascript
+currentUser.subscribeToRoom({
+  roomId,
+  hooks: {
+    onNewMessage: m => {}
+  }
+})
+```
+
+- Hooks all prefixed with `on`. e.g. `onNewMessage`, `onStartedTyping`
+
+- `cursorSet` hook renamed to `onNewCursor`
+
+- `authContext.queryParams` and `authContext.headers` both moved to the root
+  options object in the token provider. e.g.
+
+```javascript
+const tokenProvider = new TokenProvider({
+  url: 'your.auth.url',
+  queryParams: {
+    someKey: someValue,
+    ...
+  },
+  headers: {
+    SomeHeader: 'some-value',
+    ...
+  }
+})
+```
+
+- `addUser` and `removeUser` renamed to `addUserToRoom` and `removeUserFromRoom`
+
+- methods that used to accept a `Room` object now accept a `roomId`. e.g.
+
+instead of
+
+```javascript
+currentUser.subscribeToRoom(myRoom, hooks) // WRONG
+```
+
+do
+
+```javascript
+currentUser.subscribeToRoom({ roomId: myRoom.id, hooks })
+```
+
+- The behaviour of read cursors has changed: in particular cursors are now
+  accessed via `currentUser.readCursor` and set with
+  `currentUser.setReadCursor`. See the [Read Cursors section of the
+  documentation](https://docs.pusher.com/chatkit/reference/javascript#read-cursors)
+  for details.
+
+- Presence data is now accessable on any user object under `user.presence`. e.g.
+
+```javascript
+const isOnline = user.presence.state === 'online'
+```
+
+- All users that share a common room membership are accesable under
+  `currentUser.users`, and all members of a room are accessable under
+  `room.users`.
 
 ## 0.6.2 -- 2018-02-05
 

diff --git a/README.md b/README.md
@@ -15,13 +15,13 @@ For more information on the Chatkit service, [see here](https://pusher.com/chatk
 [yarn](https://yarnpkg.com/):
 
 ```sh
-$ yarn add pusher-chatkit-client
+$ yarn add @pusher/chatkit
 ```
 
 ## Script tag
 
 ```html
-<script src="https://unpkg.com/pusher-chatkit-client"></script>
+<script src="https://unpkg.com/@pusher/chatkit"></script>
 ```
 
 ## Getting started

diff --git a/example/index.html b/example/index.html
@@ -1,10 +1,14 @@
+<!doctype html>
 <html>
-  <head></head>
+  <head>
+    <meta charset="utf-8">
+    <title>Chatkit Example</title>
+    <!-- <script src="https://unpkg.com/pusher-chatkit-client@next"></script> -->
+    <script src="../dist/web/chatkit.js"></script>
+    <link rel="stylesheet" href="style.css">
+  </head>
   <body>
-    <script type="text/javascript" src="../dist/web/chatkit.js"></script>
-
     <ul id="messages"></ul>
-
     <div id="compose-wrapper">
       <input name="messageText" type="text" id="text-input">
       <div class="choose-file">
@@ -13,205 +17,6 @@
       </div>
       <div id="send-button">SEND</div>
     </div>
-
-    <script type="text/javascript">
-      let currentUser;
-      let room;
-
-      const tokenProvider = new Chatkit.TokenProvider({
-        url: 'YOUR_TEST_TOKEN_PROVIDER_URL',
-      })
-
-      const chatManager = new Chatkit.ChatManager({
-        instanceLocator: 'YOUR_INSTANCE_LOCATOR',
-        tokenProvider: tokenProvider,
-        userId: 'YOUR_CREATED_USER_ID',
-      });
-
-      chatManager.connect({
-        delegate: {},
-        onSuccess: (cUser) => {
-          currentUser = cUser;
-          const roomToSubscribeTo = currentUser.rooms[0];
-
-          if (roomToSubscribeTo) {
-            room = roomToSubscribeTo;
-            console.log("Going to subscribe to", roomToSubscribeTo);
-            currentUser.subscribeToRoom(
-              roomToSubscribeTo,
-              {
-                newMessage: (message) => {
-                  const messagesList = document.getElementById('messages');
-                  const messageItem = document.createElement('li');
-                  messageItem.className = 'message';
-                  messagesList.append(messageItem);
-                  const textDiv = document.createElement('div');
-                  textDiv.innerHTML = `${message.sender.name}: ${message.text}`;
-                  messageItem.appendChild(textDiv);
-
-                  if (message.attachment) {
-                    let attachment;
-                    switch (message.attachment.type) {
-                      case 'image':
-                        attachment = document.createElement('img');
-                        break;
-                      case 'video':
-                        attachment = document.createElement('video');
-                        attachment.controls = 'controls';
-                        break;
-                      case 'audio':
-                        attachment = document.createElement('audio');
-                        attachment.controls = 'controls';
-                        break;
-                      default:
-                        break;
-                    }
-
-                    attachment.className += ' attachment';
-                    attachment.width = '400';
-
-                    if (message.attachment.fetchRequired) {
-                      currentUser.fetchAttachment(message.attachment.link)
-                        .then(fetchedAttachment => {
-                          attachment.src = fetchedAttachment.link;
-                          messageItem.appendChild(attachment);
-                        })
-                        .catch(error => {
-                          console.log("Error", error);
-                        })
-                    } else {
-                      attachment.src = message.attachment.link;
-                      messageItem.appendChild(attachment);
-                    }
-                  }
-                }
-              }
-            );
-          } else {
-            console.log("No room to subscribe to");
-          }
-          console.log("Successful connection", currentUser);
-        },
-        onError: (error) => {
-          console.log('Error on connection: ', error);
-        }
-      });
-
-      document.getElementById("send-button").addEventListener('click', (ev) => {
-        const fileInput = document.querySelector("input[name=testfile]");
-
-        currentUser.sendMessage(
-          {
-            text: document.getElementById("text-input").value,
-            roomId: room.id,
-            // attachment: {
-            //   link: 'https://assets.zeit.co/image/upload/front/api/deployment-state.png',
-            //   type: 'image',
-            // },
-            attachment: {
-              file: fileInput.files[0],
-              // Split on slashes, remove whitespace
-              name: fileInput.value.split(/(\\|\/)/g).pop().replace(/\s+/g, ''),
-            },
-          },
-          (messageId) => {
-            console.log("Success!", messageId);
-          },
-          (error) => {
-            console.log("Error", error);
-          }
-        )
-      });
-
-    </script>
-    <style>
-      body {
-        font-family: "Helvetica Neue", Helvetica, sans-serif;
-      }
-
-      #messages {
-        padding: 0;
-        margin: 0;
-        list-style: none;
-        width: 100%;
-        text-align: center;
-        padding-bottom: 50px;
-      }
-
-      .message {
-        margin: 8px 0;
-      }
-
-      .attachment {
-        margin-top: 4px;
-      }
-
-      .choose-file {
-        position: relative;
-        display: inline-block;
-        border-left: 1px solid #ebebeb;
-        border-right: 1px solid #ebebeb;
-        width: 40px;
-        height: 40px;
-        font-size: 30px;
-        color: #7f7f7f;
-        background: white;
-        text-align: center;
-        float: left;
-        overflow: hidden;
-      }
-
-      .choose-file:hover {
-        cursor: pointer;
-      }
-
-      .choose-file input[type="file"] {
-        -webkit-appearance: none;
-        position: absolute;
-        top: 0;
-        left: 0;
-        opacity: 0;
-        height: 0;
-        width: 0;
-      }
-
-      #compose-wrapper {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 40px;
-        border-top: 1px solid #ebebeb;
-      }
-
-      #text-input {
-        height: 100%;
-        width: calc(100% - 70px - 42px);
-        border: none;
-        font-size: 28px;
-        padding: 2px 4px;
-        float: left;
-      }
-
-      #text-input:focus {
-        outline: none;
-      }
-
-      #send-button {
-        height: 100%;
-        width: 70px;
-        font-weight: 500;
-        display: inline-block;
-        text-align: center;
-        transition: all 0.3s;
-        padding-top: 10px;
-        float: left;
-      }
-
-      #send-button:hover {
-        cursor: pointer;
-        color: red;
-      }
-    </style>
+    <script src="main.js"></script>
   </body>
 </html>