implement typescript loaders and use example module

package.json

@@ -224,6 +224,7 @@
     "@kbn/eslint-plugin-license-header": "link:packages/kbn-eslint-plugin-license-header",
     "@kbn/plugin-generator": "link:packages/kbn-plugin-generator",
     "@kbn/test": "link:packages/kbn-test",
+    "@types/lodash": "3.10.1",
     "angular-mocks": "1.4.7",
     "babel-eslint": "8.1.2",
     "babel-jest": "^22.4.3",
@@ -300,6 +301,7 @@
     "supertest-as-promised": "2.0.2",
     "tree-kill": "1.1.0",
     "ts-jest": "^22.4.3",
+    "ts-loader": "^4.3.0",
     "typescript": "^2.8.1",
     "vinyl-fs": "^3.0.2",
     "xml2js": "0.4.19",

src/optimize/base_optimizer.js

@@ -261,6 +261,35 @@ export default class BaseOptimizer {
 
     if (this.uiBundles.isDevMode()) {
       return webpackMerge(commonConfig, {
+        module: {
+          rules: [
+            // transpile typescript in the optimizer in development
+            {
+              test: /\.tsx?$/,
+              include: [
+                fromRoot('src'),
+                fromRoot('node_modules/x-pack'),
+              ],
+              loader: 'ts-loader',
+              options: {
+                transpileOnly: true,
+                experimentalWatchApi: true,
+              }
+            }
+          ]
+        },
+
+        resolve: {
+          extensions: ['.ts', '.tsx'],
+        },
+
+        // plugins: [
+        //   new ForkTsCheckerWebpackPlugin({
+        //     tsconfig: fromRoot('tsconfig.json'),
+        //     async: false,
+        //   })
+        // ],
+
         // In the test env we need to add react-addons (and a few other bits) for the
         // enzyme tests to work.
         // https://github.com/airbnb/enzyme/blob/master/docs/guides/webpack.md

src/ui/ui_settings/public/send_request.d.ts

@@ -0,0 +1,15 @@
+type sendRequestParams = {
+  method: string,
+  path: string,
+  body: any
+}
+
+export function sendRequest(params: sendRequestParams): Promise<{
+  settings: {
+    [key: string]: {
+      userValue?: any
+      value?: any
+      type?: string
+    }
+  }
+}>

src/ui/ui_settings/public/ui_settings_api.ts

@@ -0,0 +1,82 @@
+import { sendRequest } from './send_request';
+
+type Changes = {
+  values: {
+    [name: string]: any
+  },
+  callback: (err: null, response?: any) => void
+}
+
+type UiSettingsApiResponse = {
+  settings: {
+    [key: string]: {
+      userValue?: any
+      value?: any
+      type?: string
+    }
+  }
+}
+
+const NOOP_CHANGES: Changes = {
+  values: {},
+  callback: () => {},
+};
+
+export class UiSettingsApi {
+  private pendingChanges: Changes | null = null;
+  private sendInProgress = false;
+
+  private async flushPendingChanges() {
+    if (!this.pendingChanges) {
+      return;
+    }
+
+    if (this.sendInProgress) {
+      return;
+    }
+
+    const changes = this.pendingChanges;
+    this.pendingChanges = null;
+
+    try {
+      this.sendInProgress = true;
+      changes.callback(null, await sendRequest({
+        method: 'POST',
+        path: '/api/kibana/settings',
+        body: {
+          changes: changes.values
+        },
+      }));
+    } catch (error) {
+      changes.callback(error);
+    } finally {
+      this.sendInProgress = false;
+      this.flushPendingChanges();
+    }
+  }
+
+  batchSet(key: string, value: any): Promise<UiSettingsApiResponse> {
+    return new Promise((resolve, reject) => {
+      const prev = this.pendingChanges || NOOP_CHANGES;
+
+      this.pendingChanges = {
+        values: {
+          ...prev.values,
+          [key]: value,
+        },
+
+        callback(error, resp) {
+          prev.callback(error, resp);
+
+          if (error) {
+            reject(error);
+          } else {
+            resolve(resp);
+          }
+        },
+      };
+
+      this.flushPendingChanges();
+    });
+  }
+}