feat(sdk): Implement Chitchatter SDK (#183)

* feat(sdk): render iframe in chat-room component
* fix(ci): install optional dependencies
* feat(sdk): allow subset of attributes
* feat(sdk): accept root-domain attribute
* feat(sdk): accept custom room name or use sane default
* feat(sdk): set allowed features
* feat(sdk): add sdk instructions to embed code dialog
* fix(sdk): use dynamic rootUrl
* fix(sdk): use static defaultRoot
* feat(sdk): send config from SDK to chat
* fix(sdk): expire poller
* fix(sdk): pass parent domain to iframe via query param
* refactor(sdk): type message event data
* feat(sdk): send user id to chat frame
* feat(sdk): handle some attribute updates
* chore(package): add build:sdk:watch script
* refactor(sdk): move more code to updateIframeAttributes
* feat(sdk): support changing rooms
* feat(sdk): support more user settings
* docs(sdk): add SDK section to README
* feat(sdk): render root-url in embed code if necessary
* refactor(sdk): use map for chat room attributes
* fix(sdk): unbind event listener when chat-room is disconnected
* fix(sdk): properly tear down receipt listener
* fix(sdk): send config when frame reloads
* feat(sdk): listen for config updates
* feat(sdk): request config from sdk instead of sending it repeatedly
* refactor(sdk): use type guard for config message
* fix(sdk): use settings from SDK when there is no preexisting persisted data
* fix(sdk): observe all iframe attributes
* refactor(sdk): simplify bootup logic
* feat(sdk): improve embed code display

.github/workflows/ci.yml

@@ -14,7 +14,7 @@ jobs:
       - uses: actions/setup-node@v1
         with:
           node-version: 18
-      - run: npm ci --no-optional
+      - run: npm ci
       - run: npm test
 
       - name: 'Build web app artifacts'

.gitignore

@@ -17,6 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.parcel-cache
 
 npm-debug.log*
 yarn-debug.log*

README.md

@@ -124,6 +124,33 @@ See the full ticket backlog [here](https://github.com/users/jeremyckahn/projects
   - Mirror: https://chitchatter.vercel.app/ (note that peers cannot connect across domains)
 - Staging: https://chitchatter-git-develop-jeremyckahn.vercel.app/
 
+## SDK
+
+You can use the official Chitchatter SDK to embed the app as a [Web Component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) called `<chat-room />`.
+
+```html
+<script src="https://chitchatter.im/sdk.js"></script>
+
+<chat-room />
+```
+
+The `<chat-room />` component supports the following optional attributes:
+
+- `room`: The name of the Chitchatter room the user should join. The default value is the URL of the embedding page.
+- `user-name`: The friendly name of the user (which they can change).
+- `user-id`: The static ID of the user. The default value is a random UUID.
+- `root-url`: The URL of the Chitchatter instance to use. The default value is `https://chitchatter.im/`.
+- `color-mode`: `light` or `dark`. The default value is `dark`.
+- `play-message-sound`: Whether or not to play a sound when a user receives a message while the window is not in focus. The default value is `false`.
+
+As well as the following [standard `<iframe />` attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attributes):
+
+- `height`
+- `width`
+- `style`
+- `referrerpolicy`
+- `sandbox`
+
 ## Available Scripts
 
 In the project directory, you can run:

nodemon.json

@@ -0,0 +1,4 @@
+{
+  "watch": ["sdk/"],
+  "ext": "ts"
+}