Add prettier config

.babelrc

@@ -1,10 +1,5 @@
 {
     "sourceMaps": true,
-    "presets": [
-        "@babel/preset-env",
-        "@babel/preset-typescript"
-    ],
-    "plugins": [
-        "@babel/plugin-proposal-class-properties"
-    ]
+    "presets": ["@babel/preset-env", "@babel/preset-typescript"],
+    "plugins": ["@babel/plugin-proposal-class-properties"]
 }

.eslintrc.js

@@ -1,10 +1,6 @@
 module.exports = {
-    plugins: [
-        "matrix-org",
-    ],
-    extends: [
-        "plugin:matrix-org/babel",
-    ],
+    plugins: ["matrix-org"],
+    extends: ["plugin:matrix-org/babel"],
     parserOptions: {
         project: ["./tsconfig-dev.json"],
     },
@@ -18,33 +14,39 @@ module.exports = {
         "one-var": ["warn"],
         "padded-blocks": ["warn"],
         "no-extend-native": ["warn"],
-        "camelcase": ["warn"],
-        "no-multi-spaces": ["error", { "ignoreEOLComments": true }],
-        "space-before-function-paren": ["error", {
-            "anonymous": "never",
-            "named": "never",
-            "asyncArrow": "always",
-        }],
+        camelcase: ["warn"],
+        "no-multi-spaces": ["error", { ignoreEOLComments: true }],
+        "space-before-function-paren": [
+            "error",
+            {
+                anonymous: "never",
+                named: "never",
+                asyncArrow: "always",
+            },
+        ],
         "arrow-parens": "off",
         "prefer-promise-reject-errors": "off",
-        "quotes": "off",
-        "indent": "off",
+        quotes: "off",
+        indent: "off",
         "no-constant-condition": "off",
         "no-async-promise-executor": "off",
     },
-    overrides: [{
-        "files": ["src/**/*.ts", "test/**/*.ts"],
-        "extends": ["plugin:matrix-org/typescript"],
-        "rules": {
-            // TypeScript has its own version of this
-            "babel/no-invalid-this": "off",
+    overrides: [
+        {
+            files: ["src/**/*.ts", "test/**/*.ts"],
+            extends: ["plugin:matrix-org/typescript", "prettier"],
+            rules: {
+                // TypeScript has its own version of this
+                "babel/no-invalid-this": "off",
 
-            "quotes": "off",
+                quotes: "off",
+            },
         },
-    }, {
-        "files": ["src/interfaces/**/*.ts"],
-        "rules": {
-            "@typescript-eslint/no-empty-object-type": "off",
+        {
+            files: ["src/interfaces/**/*.ts"],
+            rules: {
+                "@typescript-eslint/no-empty-object-type": "off",
+            },
         },
-    }],
-};
+    ],
+}

.github/workflows/build.yaml

@@ -1,38 +1,38 @@
 name: Build and test
 
 on:
-  push:
-    branches:
-      - master
-  pull_request:
+    push:
+        branches:
+            - master
+    pull_request:
 
 jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          cache: 'yarn'
-
-      - name: Install NPM packages
-        run: yarn install --frozen-lockfile
-
-      - name: Check Linting Rules and Types
-        run: yarn lint
-
-      - name: test
-        run: yarn test --coverage
-
-      - name: Upload coverage
-        uses: actions/upload-artifact@v4
-        with:
-          name: coverage
-          path: |
-            coverage
-            !coverage/lcov-report
-
-      - name: build
-        run: yarn build
+    build:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+
+            - name: Setup Node.js
+              uses: actions/setup-node@v4
+              with:
+                  cache: "yarn"
+
+            - name: Install NPM packages
+              run: yarn install --frozen-lockfile
+
+            - name: Check Linting Rules and Types
+              run: yarn lint
+
+            - name: test
+              run: yarn test --coverage
+
+            - name: Upload coverage
+              uses: actions/upload-artifact@v4
+              with:
+                  name: coverage
+                  path: |
+                      coverage
+                      !coverage/lcov-report
+
+            - name: build
+              run: yarn build

.github/workflows/release.yaml

@@ -1,59 +1,59 @@
 name: Release Automation
 on:
-  workflow_dispatch:
-    inputs:
-      version-bump:
-        description: The scale of the version bump required for semver compatibility
-        required: true
-        default: patch
-        type: choice
-        options:
-          - patch
-          - minor
-          - major
+    workflow_dispatch:
+        inputs:
+            version-bump:
+                description: The scale of the version bump required for semver compatibility
+                required: true
+                default: patch
+                type: choice
+                options:
+                    - patch
+                    - minor
+                    - major
 concurrency: release
 permissions:
-  contents: write
+    contents: write
 jobs:
-  release:
-    name: "Release & Publish"
-    runs-on: ubuntu-latest
-    steps:
-      - name: 🧮 Checkout code
-        uses: actions/checkout@v4
-        with:
-          token: ${{ secrets.ELEMENT_BOT_TOKEN }}
+    release:
+        name: "Release & Publish"
+        runs-on: ubuntu-latest
+        steps:
+            - name: 🧮 Checkout code
+              uses: actions/checkout@v4
+              with:
+                  token: ${{ secrets.ELEMENT_BOT_TOKEN }}
 
-      - name: 🔧 Set up node environment
-        uses: actions/setup-node@v4
-        with:
-          cache: 'yarn'
+            - name: 🔧 Set up node environment
+              uses: actions/setup-node@v4
+              with:
+                  cache: "yarn"
 
-      - name: 🛠️ Setup
-        run: yarn install --pure-lockfile
+            - name: 🛠️ Setup
+              run: yarn install --pure-lockfile
 
-      - name: 👊 Bump version
-        run: |
-          yarn version --no-git-tag-version --${{ github.event.inputs.version-bump }}
-          git config --global user.name 'ElementRobot'
-          git config --global user.email '[email protected]'
-          git commit -am "${{ github.event.inputs.version-bump }} version bump"
-          git push
+            - name: 👊 Bump version
+              run: |
+                  yarn version --no-git-tag-version --${{ github.event.inputs.version-bump }}
+                  git config --global user.name 'ElementRobot'
+                  git config --global user.email '[email protected]'
+                  git commit -am "${{ github.event.inputs.version-bump }} version bump"
+                  git push
 
-      - name: 📖 Build lib
-        run: yarn build
+            - name: 📖 Build lib
+              run: yarn build
 
-      - name: 🚀 Publish to npm
-        id: npm-publish
-        uses: JS-DevTools/npm-publish@v3
-        with:
-          token: ${{ secrets.NPM_TOKEN }}
-          access: public
+            - name: 🚀 Publish to npm
+              id: npm-publish
+              uses: JS-DevTools/npm-publish@v3
+              with:
+                  token: ${{ secrets.NPM_TOKEN }}
+                  access: public
 
-      - name: 🧬 Create release
-        uses: softprops/action-gh-release@v2
-        with:
-          tag_name: v${{ steps.npm-publish.outputs.version }}
-          body: ${{ steps.npm-publish.outputs.version }} Release
-          draft: false
-          prerelease: false
+            - name: 🧬 Create release
+              uses: softprops/action-gh-release@v2
+              with:
+                  tag_name: v${{ steps.npm-publish.outputs.version }}
+                  body: ${{ steps.npm-publish.outputs.version }} Release
+                  draft: false
+                  prerelease: false

.prettierrc

@@ -0,0 +1,4 @@
+{
+    "tabWidth": 4,
+    "semi": false
+}

README.md

@@ -6,7 +6,7 @@ JavaScript/TypeScript SDK for widgets & clients to communicate.
 
 For help and support, visit [#matrix-widgets:matrix.org](https://matrix.to/#/#matrix-widgets:matrix.org) on Matrix.
 
-*Disclaimer: Widgets are not yet in the Matrix spec, so this library may not work with other implementations.*
+_Disclaimer: Widgets are not yet in the Matrix spec, so this library may not work with other implementations._
 
 ## Building
 
@@ -36,34 +36,40 @@ to instantiate the `WidgetApi` class.
 The general usage for this would be:
 
 ```typescript
-const widgetId = null; // if you know the widget ID, supply it.
-const api = new WidgetApi(widgetId);
+const widgetId = null // if you know the widget ID, supply it.
+const api = new WidgetApi(widgetId)
 
 // Before doing anything else, request capabilities:
-api.requestCapability(MatrixCapabilities.Screenshots);
-api.requestCapabilities(StickerpickerCapabilities);
+api.requestCapability(MatrixCapabilities.Screenshots)
+api.requestCapabilities(StickerpickerCapabilities)
 
 // Add custom action handlers (if needed)
-api.on(`action:${WidgetApiToWidgetAction.UpdateVisibility}`, (ev: CustomEvent<IVisibilityActionRequest>) => {
-    ev.preventDefault(); // we're handling it, so stop the widget API from doing something.
-    console.log(ev.detail); // custom handling here
-    api.transport.reply(ev.detail, <IWidgetApiRequestEmptyData>{});
-});
-api.on("action:com.example.my_action", (ev: CustomEvent<ICustomActionRequest>) => {
-    ev.preventDefault(); // we're handling it, so stop the widget API from doing something.
-    console.log(ev.detail); // custom handling here
-    api.transport.reply(ev.detail, {custom: "reply"});
-});
+api.on(
+    `action:${WidgetApiToWidgetAction.UpdateVisibility}`,
+    (ev: CustomEvent<IVisibilityActionRequest>) => {
+        ev.preventDefault() // we're handling it, so stop the widget API from doing something.
+        console.log(ev.detail) // custom handling here
+        api.transport.reply(ev.detail, <IWidgetApiRequestEmptyData>{})
+    },
+)
+api.on(
+    "action:com.example.my_action",
+    (ev: CustomEvent<ICustomActionRequest>) => {
+        ev.preventDefault() // we're handling it, so stop the widget API from doing something.
+        console.log(ev.detail) // custom handling here
+        api.transport.reply(ev.detail, { custom: "reply" })
+    },
+)
 
 // Start the messaging
-api.start();
+api.start()
 
 // If waitForIframeLoad is false, tell the client that we're good to go
-api.sendContentLoaded();
+api.sendContentLoaded()
 
 // Later, do something else (if needed)
-api.setAlwaysOnScreen(true);
-api.transport.send("com.example.my_action", {isExample: true});
+api.setAlwaysOnScreen(true)
+api.transport.send("com.example.my_action", { isExample: true })
 ```
 
 For a more complete example, see the `examples` directory of this repo.
@@ -77,15 +83,17 @@ SDK to provide an interface for other platforms.
 TODO: Improve this
 
 ```typescript
-const driver = new CustomDriver(); // an implementation of WidgetDriver
-const api = new ClientWidgetApi(widget, iframe, driver);
+const driver = new CustomDriver() // an implementation of WidgetDriver
+const api = new ClientWidgetApi(widget, iframe, driver)
 
 // The API is automatically started, so we just have to wait for a ready before doing something
 api.on("ready", () => {
-    api.updateVisibility(true).then(() => console.log("Widget knows it is visible now"));
-    api.transport.send("com.example.my_action", {isExample: true});
-});
+    api.updateVisibility(true).then(() =>
+        console.log("Widget knows it is visible now"),
+    )
+    api.transport.send("com.example.my_action", { isExample: true })
+})
 
 // Eventually, stop the API handling
-api.stop();
+api.stop()
 ```

examples/widget/index.css

@@ -14,10 +14,11 @@
  * limitations under the License.
  */
 
-html, body {
+html,
+body {
     background-color: #ffffff;
     color: #000000;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 }
 
 body {