Fix sourcemaps by refactoring the build system

.buildkite/pipeline.yaml

@@ -1,57 +1,80 @@
 steps:
-  - label: ":eslint: Lint"
+  - label: ":eslint: JS Lint"
     command:
       - "echo '--- Install js-sdk'"
       - "./scripts/ci/install-deps.sh"
-      - "yarn lintwithexclusions"
-      - "yarn stylelint"
+      - "yarn lint:js"
     plugins:
       - docker#v3.0.1:
-          image: "node:10"
+          image: "node:12"
 
-  - label: ":chains: End-to-End Tests"
-    agents:
-      # We use a xlarge sized instance instead of the normal small ones because
-      # e2e tests otherwise take +-8min
-      queue: "xlarge"
+  - label: ":eslint: TS Lint"
     command:
-      # TODO: Remove hacky chmod for BuildKite
-      - "echo '--- Setup'"
-      - "chmod +x ./scripts/ci/*.sh"
-      - "chmod +x ./scripts/*"
       - "echo '--- Install js-sdk'"
       - "./scripts/ci/install-deps.sh"
-      - "./scripts/ci/end-to-end-tests.sh"
+      - "yarn lint:ts"
     plugins:
       - docker#v3.0.1:
-          image: "matrixdotorg/riotweb-ci-e2etests-env:latest"
-          propagate-environment: true
+          image: "node:12"
 
-  - label: ":karma: Tests"
+  - label: ":eslint: Types Lint"
+    command:
+      - "echo '--- Install js-sdk'"
+      - "./scripts/ci/install-deps.sh"
+      - "yarn lint:types"
+    plugins:
+      - docker#v3.0.1:
+          image: "node:12"
+
+  - label: ":jest: Tests"
     agents:
       # We use a medium sized instance instead of the normal small ones because
       # webpack loves to gorge itself on resources.
       queue: "medium"
     command:
-      # Install chrome
-      - "echo '--- Installing Chrome'"
-      - "wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -"
-      - "sh -c 'echo \"deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main\" >> /etc/apt/sources.list.d/google.list'"
-      - "apt-get update"
-      - "apt-get install -y google-chrome-stable"
-      # Run tests
+      - "echo '--- Install js-sdk'"
       # TODO: Remove hacky chmod for BuildKite
       - "chmod +x ./scripts/ci/*.sh"
       - "chmod +x ./scripts/*"
       - "echo '--- Installing Dependencies'"
       - "./scripts/ci/install-deps.sh"
+      - "echo '--- Running initial build steps'"
+      - "yarn build"
       - "echo '+++ Running Tests'"
-      - "./scripts/ci/unit-tests.sh"
-    env:
-      CHROME_BIN: "/usr/bin/google-chrome-stable"
+      - "yarn test"
     plugins:
       - docker#v3.0.1:
-          image: "node:10"
+          image: "node:12"
+
+  - label: "🛠 Build"
+    command:
+      - "echo '--- Install js-sdk'"
+      - "./scripts/ci/install-deps.sh"
+      - "echo '+++ Building Project'"
+      - "yarn build"
+    plugins:
+      - docker#v3.0.1:
+          image: "node:12"
+
+  - label: ":chains: End-to-End Tests"
+    agents:
+      # We use a xlarge sized instance instead of the normal small ones because
+      # e2e tests otherwise take +-8min
+      queue: "xlarge"
+    command:
+      # TODO: Remove hacky chmod for BuildKite
+      - "echo '--- Setup'"
+      - "chmod +x ./scripts/ci/*.sh"
+      - "chmod +x ./scripts/*"
+      - "echo '--- Install js-sdk'"
+      - "./scripts/ci/install-deps.sh"
+      - "echo '--- Running initial build steps'"
+      - "yarn build"
+      - "echo '+++ Running Tests'"
+      - "./scripts/ci/end-to-end-tests.sh"
+    plugins:
+      - docker#v3.0.1:
+          image: "matrixdotorg/riotweb-ci-e2etests-env:latest"
           propagate-environment: true
 
   - label: "🔧 Riot Tests"
@@ -66,12 +89,13 @@ steps:
       - "sh -c 'echo \"deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main\" >> /etc/apt/sources.list.d/google.list'"
       - "apt-get update"
       - "apt-get install -y google-chrome-stable"
-      # Run tests
       # TODO: Remove hacky chmod for BuildKite
       - "chmod +x ./scripts/ci/*.sh"
       - "chmod +x ./scripts/*"
       - "echo '--- Installing Dependencies'"
       - "./scripts/ci/install-deps.sh"
+      - "echo '--- Running initial build steps'"
+      - "yarn build"
       - "echo '+++ Running Tests'"
       - "./scripts/ci/riot-unit-tests.sh"
     env:

.eslintrc.js

@@ -25,6 +25,7 @@ module.exports = {
     parserOptions: {
         ecmaFeatures: {
             jsx: true,
+            legacyDecorators: true,
         }
     },
     rules: {

README.md

@@ -67,6 +67,7 @@ practices that anyone working with the SDK needs to be be aware of and uphold:
 
   * After creating a new component you must run `yarn reskindex` to regenerate
     the `component-index.js` for the SDK (used in future for skinning)
+    <!-- TODO: Remove this once this approach to skinning is replaced -->
 
   * The view's CSS file MUST have the same name (e.g. view/rooms/MessageTile.css).
     CSS for matrix-react-sdk currently resides in

__mocks__/browser-request.js

@@ -0,0 +1,16 @@
+const en = require("../src/i18n/strings/en_EN");
+
+module.exports = jest.fn((opts, cb) => {
+    if (opts.url.endsWith("languages.json")) {
+        cb(undefined, {status: 200}, JSON.stringify({
+            "en": {
+                "fileName": "en_EN.json",
+                "label": "English",
+            },
+        }));
+    } else if (opts.url.endsWith("en_EN.json")) {
+        cb(undefined, {status: 200}, JSON.stringify(en));
+    } else {
+        cb(undefined, {status: 404}, "");
+    }
+});

__mocks__/imageMock.js

@@ -0,0 +1 @@
+module.exports = "image-file-stub";

__mocks__/languages.json

@@ -0,0 +1,10 @@
+{
+  "en": {
+    "fileName": "en_EN.json",
+    "label": "English"
+  },
+  "en-us": {
+    "fileName": "en_US.json",
+    "label": "English (US)"
+  }
+}

babel.config.js

@@ -0,0 +1,26 @@
+module.exports = {
+    "sourceMaps": "inline",
+    "presets": [
+        ["@babel/preset-env", {
+            "targets": {
+                "browsers": [
+                    "last 2 versions"
+                ]
+            },
+            "modules": "commonjs"
+        }],
+        "@babel/preset-typescript",
+        "@babel/preset-flow",
+        "@babel/preset-react"
+    ],
+    "plugins": [
+        ["@babel/plugin-proposal-decorators", { "legacy": true }],
+        "@babel/plugin-proposal-export-default-from",
+        "@babel/plugin-proposal-numeric-separator",
+        "@babel/plugin-proposal-class-properties",
+        "@babel/plugin-proposal-object-rest-spread",
+        "@babel/plugin-transform-flow-comments",
+        "@babel/plugin-syntax-dynamic-import",
+        "@babel/plugin-transform-runtime"
+    ]
+};

docs/skinning.md

@@ -0,0 +1,71 @@
+# Skinning
+
+The react-sdk can be skinned to replace presentation components, CSS, or
+other relevant parts of the SDK. Typically consumers will replace entire
+components and get the ability for custom CSS as a result.
+
+This doc isn't exhaustive on how skinning works, though it should cover
+some of the more complicated parts such as component replacement.
+
+## Loading a skin
+
+1. Generate a `component-index.js` (preferably using the tools that the react-sdk
+exposes). This can typically be done with a npm script like `"reskindex -h src/header"`.
+2. In your app's entry point, add something like this code:
+   ```javascript
+   import {loadSkin} from "matrix-react-sdk";
+   loadSkin(import("component-index").components);
+   // The rest of your imports go under this.
+   ```
+3. Import the remainder of the SDK and bootstrap your app.
+
+It is extremely important that you **do not** import anything else from the
+SDK prior to loading your skin as otherwise the skin might not work. Loading
+the skin should be one of the first things your app does, if not the very
+first thing.
+
+Additionally, **do not** provide `loadSkin` with the react-sdk components
+themselves otherwise the app might explode. The SDK is already aware of its
+components and doesn't need to be told.
+
+## Replacing components
+
+Components that replace the react-sdk ones MUST have a `replaces` static
+key on the component's class to describe which component it overrides. For
+example, if your `VectorAuthPage` component is meant to replace the react-sdk
+`AuthPage` component then you'd add `static replaces = 'views.auth.AuthPage';`
+to the `VectorAuthPage` class.
+
+Other than that, the skin just needs to be loaded normally as mentioned above.
+Consumers of the SDK likely will not be interested in the rest of this section.
+
+### SDK developer notes
+
+Components in the react-sdk MUST be decorated with the `@replaceableComponent`
+function. For components that can't use the decorator, they must use a
+variation that provides similar functionality. The decorator gives consumers
+an opportunity to load skinned components by abusing import ordering and 
+behaviour.
+
+Decorators are executed at import time which is why we can abuse the import
+ordering behaviour: importing `loadSkin` doesn't trigger any components to
+be imported, allowing the consumer to specify a skin. When the consumer does
+import a component (for example, `MatrixChat`), it starts to pull in all the
+components via `import` statements. When the components get pulled in the
+decorator checks with the skinned components to see if it should be replacing
+the component being imported. The decorator then effectively replaces the
+components when needed by specifying the skinned component as an override for
+the SDK's component, which should in theory override critical functions like
+`render()` and lifecycle event handlers. 
+
+The decorator also means that older usage of `getComponent()` is no longer
+required because components should be replaced by the decorator. Eventually
+the react-sdk should only have one usage of `getComponent()`: the decorator.
+
+The decorator assumes that if `getComponent()` returns null that there is
+no skinned version of the component and continues on using the SDK's component.
+In previous versions of the SDK, the function would throw an error instead
+because it also expected the skin to list the SDK's components as well, however
+that is no longer possible due to the above.
+
+In short, components should always be `import`ed.