jsbox-cview 1.6.3 → 1.6.5

package/components/dialogs/dialog-sheet.ts

@@ -36,7 +36,7 @@ export class DialogSheet extends Sheet<ContentView, UIView, UiTypes.ViewOptions>
   constructor(props: {
     title: string;
     cview: Base<any, any>;
-    doneHandler?: () => void;
+    doneHandler?: () => any;
     presentMode?: number;
     bgcolor?: UIColor;
     doneButtonHidden?: boolean;

package/components/dialogs/list-dialog.ts

@@ -10,6 +10,32 @@ import { List } from "../single-views";
  * @param values 默认选中的选项, 配合multiSelectEnabled使用
  * @param title 标题
  */
+export function listDialog({
+  items,
+  multiSelectEnabled,
+  value,
+  values,
+  title,
+}: {
+  items: string[];
+  multiSelectEnabled: true;
+  value?: never;
+  values?: number[];
+  title: string;
+}): Promise<number[]>;
+export function listDialog({
+  items,
+  multiSelectEnabled,
+  value,
+  values,
+  title,
+}: {
+  items: string[];
+  multiSelectEnabled?: false | undefined;
+  value?: number;
+  values?: never;
+  title: string;
+}): Promise<number>;
 export function listDialog({
   items,
   multiSelectEnabled,

package/components/oc-webview.ts

@@ -29,11 +29,13 @@ import { Base } from "./base";
  * - goForward()
  * - stopLoading()
  * - reload()
+ * - evaluateJavaScript(script)
  *
  */
 export class OCWebView extends Base<UIView, UiTypes.RuntimeOptions> {
   _defineView: () => UiTypes.RuntimeOptions;
   webView: any; // 实际为WKWebView OC类型
+  private _originUrl: string;
   constructor({
     props,
     layout,
@@ -53,6 +55,7 @@ export class OCWebView extends Base<UIView, UiTypes.RuntimeOptions> {
     config.invoke("setWebsiteDataStore:", $objc("WKWebsiteDataStore").invoke("defaultDataStore"));
     const webView = $objc("WKWebView").invoke("alloc.initWithFrame:configuration:", $rect(0, 0, 0, 0), config);
     this.webView = webView;
+    this._originUrl = props.url;
 
     this._defineView = () => {
       return {
@@ -101,6 +104,17 @@ export class OCWebView extends Base<UIView, UiTypes.RuntimeOptions> {
     return nsurl ? nsurl.invoke("absoluteString").rawValue() : "";
   }
 
+  set url(urlStr: string) {
+    const url = $objc("NSURL").invoke("URLWithString:", urlStr);
+    const req = $objc("NSURLRequest").invoke("requestWithURL:", url);
+    this.webView.invoke("loadRequest:", req);
+  }
+
+  get title(): string {
+    const title = this.webView.invoke("title");
+    return title ? title.rawValue() : "";
+  }
+
   get canGoBack(): boolean {
     return this.webView.invoke("canGoBack");
   }
@@ -124,4 +138,40 @@ export class OCWebView extends Base<UIView, UiTypes.RuntimeOptions> {
   reload() {
     this.webView.invoke("reload");
   }
+
+  reloadFromOrigin() {
+    this.url = this._originUrl;
+  }
+
+  exec<T = any>(script: string): Promise<T> {
+    return new Promise((resolve, reject) => {
+      this.webView.invoke(
+        "evaluateJavaScript:completionHandler:",
+        script,
+        $block("void, id, NSError *", (result: any, error: any) => {
+          const jsError = error ? error.jsValue() : null;
+          if (jsError) {
+            reject(jsError);
+            return;
+          }
+          if (!result) {
+            resolve(result);
+            return;
+          }
+          if (typeof result.jsValue === "function") {
+            resolve(result.jsValue());
+            return;
+          }
+          resolve(result);
+        }),
+      );
+    });
+  }
+
+  eval({ script, handler }: { script: string; handler: (result: any, error?: NSError) => void }) {
+    this.exec(script).then(
+      (result) => handler(result),
+      (error) => handler(undefined, error),
+    );
+  }
 }

package/dist/components/dialogs/list-dialog.js

@@ -3,15 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.listDialog = void 0;
 const dialog_sheet_1 = require("./dialog-sheet");
 const single_views_1 = require("../single-views");
-/**
- * 显示一个列表以供选择
- *
- * @param items 选项
- * @param multiSelectEnabled 是否允许多选
- * @param value 默认选中的选项
- * @param values 默认选中的选项, 配合multiSelectEnabled使用
- * @param title 标题
- */
 function listDialog({ items, multiSelectEnabled, value, values = [], title, }) {
     if (value)
         values = [value];

package/dist/components/oc-webview.js

@@ -31,6 +31,7 @@ const base_1 = require("./base");
  * - goForward()
  * - stopLoading()
  * - reload()
+ * - evaluateJavaScript(script)
  *
  */
 class OCWebView extends base_1.Base {
@@ -84,6 +85,10 @@ class OCWebView extends base_1.Base {
         const nsurl = this.webView.invoke("URL");
         return nsurl ? nsurl.invoke("absoluteString").rawValue() : "";
     }
+    get title() {
+        const title = this.webView.invoke("title");
+        return title ? title.rawValue() : "";
+    }
     get canGoBack() {
         return this.webView.invoke("canGoBack");
     }
@@ -104,5 +109,29 @@ class OCWebView extends base_1.Base {
     reload() {
         this.webView.invoke("reload");
     }
+    evaluateJavaScript(script) {
+        return new Promise((resolve, reject) => {
+            this.webView.invoke("evaluateJavaScript:completionHandler:", script, $block("void, id, NSError *", (result, error) => {
+                const jsError = error ? error.jsValue() : null;
+                if (jsError) {
+                    reject(jsError);
+                    return;
+                }
+                if (!result) {
+                    resolve(result);
+                    return;
+                }
+                if (typeof result.jsValue === "function") {
+                    resolve(result.jsValue());
+                    return;
+                }
+                if (typeof result.rawValue === "function") {
+                    resolve(result.rawValue());
+                    return;
+                }
+                resolve(result);
+            }));
+        });
+    }
 }
 exports.OCWebView = OCWebView;

package/dist/components/spinners/loading-dual-ring.js

@@ -1,13 +1,4 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DualRing = void 0;
 const base_1 = require("../base");
@@ -72,15 +63,15 @@ class DualRing extends base_1.Base {
                 views: [canvas1.definition, canvas2.definition],
                 layout,
                 events: {
-                    ready: (sender) => __awaiter(this, void 0, void 0, function* () {
+                    ready: async (sender) => {
                         while (sender.super) {
                             canvas1.startAngle += Math.PI * interval * 2;
                             canvas1.redraw();
                             canvas2.startAngle += Math.PI * interval * 2;
                             canvas2.redraw();
-                            yield $wait(interval);
+                            await $wait(interval);
                         }
-                    }),
+                    },
                 },
             };
         };

package/dist/components/spinners/loading-wedges.js

@@ -1,13 +1,4 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Wedges = void 0;
 const base_1 = require("../base");
@@ -77,7 +68,7 @@ class Wedges extends base_1.Base {
                 views: [canvas1.definition, canvas2.definition, canvas3.definition, canvas4.definition],
                 layout,
                 events: {
-                    ready: (sender) => __awaiter(this, void 0, void 0, function* () {
+                    ready: async (sender) => {
                         while (sender.super) {
                             canvas1.startAngle += Math.PI * interval * 4;
                             canvas1.redraw();
@@ -87,9 +78,9 @@ class Wedges extends base_1.Base {
                             canvas3.redraw();
                             canvas4.startAngle += Math.PI * interval * 1;
                             canvas4.redraw();
-                            yield $wait(interval);
+                            await $wait(interval);
                         }
-                    }),
+                    },
                 },
             };
         };

package/dist/test/dialog-sheet.js

@@ -1,13 +1,4 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 const dialog_sheet_1 = require("../components/dialogs/dialog-sheet");
 const single_views_1 = require("../components/single-views");
@@ -26,7 +17,7 @@ $ui.render({
             },
             layout: $layout.center,
             events: {
-                tapped: () => __awaiter(void 0, void 0, void 0, function* () {
+                tapped: async () => {
                     const sheet = new dialog_sheet_1.DialogSheet({
                         title: "Dialog Sheet",
                         cview,
@@ -41,8 +32,8 @@ $ui.render({
                         },
                         doneButtonTitle: "完成",
                     });
-                    yield sheet.present();
-                }),
+                    await sheet.present();
+                },
             },
         },
     ],

package/dist/test/form-dialog.js

@@ -1,13 +1,4 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 const form_dialog_1 = require("../components/dialogs/form-dialog");
 $ui.render({
@@ -19,8 +10,8 @@ $ui.render({
             },
             layout: $layout.center,
             events: {
-                tapped: () => __awaiter(void 0, void 0, void 0, function* () {
-                    const values = yield (0, form_dialog_1.formDialog)({
+                tapped: async () => {
+                    const values = await (0, form_dialog_1.formDialog)({
                         sections: [
                             {
                                 title: "Section 1",
@@ -53,7 +44,7 @@ $ui.render({
                         title: "Values",
                         message: JSON.stringify(values, null, 2),
                     });
-                }),
+                },
             },
         },
     ],

package/dist/test/oc-webview.js

@@ -0,0 +1,195 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const oc_webview_1 = require("../components/oc-webview");
+const initialURL = "https://www.example.com";
+const normalizeURL = (value) => {
+    const url = value.trim();
+    if (!url)
+        return initialURL;
+    if (/^[a-z][a-z\d+\-.]*:\/\//i.test(url))
+        return url;
+    return `https://${url}`;
+};
+const currentURL = (sender) => {
+    const nsurl = sender.invoke("URL");
+    return nsurl ? nsurl.invoke("absoluteString").rawValue() : "";
+};
+const currentTitle = (sender) => {
+    const title = sender.invoke("title");
+    return title ? title.rawValue() : "";
+};
+const syncAddress = (sender) => {
+    const input = $("oc-webview-url");
+    if (!input)
+        return;
+    const url = currentURL(sender);
+    if (url)
+        input.text = url;
+};
+const logState = (event, sender, error) => {
+    const url = currentURL(sender);
+    const title = currentTitle(sender);
+    const message = error ? ` error=${error.localizedDescription}` : "";
+    console.log(`[${event}] url=${url} title=${title}${message}`);
+};
+const localStorageScript = `
+(() => {
+  const data = {};
+  for (let i = 0; i < localStorage.length; i++) {
+    const key = localStorage.key(i);
+    if (key !== null) data[key] = localStorage.getItem(key);
+  }
+  return JSON.stringify(data);
+})()
+`;
+const webView = new oc_webview_1.OCWebView({
+    props: {
+        url: initialURL,
+    },
+    layout: (make, view) => {
+        make.top.equalTo($("oc-webview-toolbar").bottom);
+        make.left.right.bottom.inset(0);
+    },
+    events: {
+        didStart: (sender) => {
+            syncAddress(sender);
+            logState("didStart", sender);
+        },
+        didFinish: async (sender) => {
+            syncAddress(sender);
+            logState("didFinish", sender);
+            try {
+                const localStorage = await webView.evaluateJavaScript(localStorageScript);
+                console.log(`[localStorage] ${localStorage || "{}"}`);
+            }
+            catch (error) {
+                console.log(`[localStorage] error=${(error === null || error === void 0 ? void 0 : error.localizedDescription) || error}`);
+            }
+        },
+        didFail: (sender, error) => {
+            syncAddress(sender);
+            logState("didFail", sender, error);
+        },
+    },
+});
+const loadURL = (value) => {
+    const url = normalizeURL(value);
+    const input = $("oc-webview-url");
+    if (input)
+        input.text = url;
+    const nsurl = $objc("NSURL").invoke("URLWithString:", url);
+    const request = $objc("NSURLRequest").invoke("requestWithURL:", nsurl);
+    webView.webView.invoke("loadRequest:", request);
+};
+$ui.render({
+    views: [
+        {
+            type: "view",
+            props: {
+                id: "oc-webview-toolbar",
+            },
+            layout: (make, view) => {
+                make.top.equalTo(view.super.safeAreaTop);
+                make.left.right.inset(0);
+                make.height.equalTo(88);
+            },
+            views: [
+                {
+                    type: "input",
+                    props: {
+                        id: "oc-webview-url",
+                        text: initialURL,
+                        type: $kbType.url,
+                        bgcolor: $color("secondarySurface"),
+                        radius: 8,
+                        placeholder: "输入网址后回车",
+                    },
+                    layout: (make, view) => {
+                        make.top.inset(12);
+                        make.left.right.inset(12);
+                        make.height.equalTo(36);
+                    },
+                    events: {
+                        returned: (sender) => {
+                            loadURL(sender.text);
+                        },
+                    },
+                },
+                {
+                    type: "view",
+                    props: {},
+                    layout: (make, view) => {
+                        make.top.equalTo(view.prev.bottom).offset(8);
+                        make.left.right.bottom.inset(12);
+                    },
+                    views: [
+                        {
+                            type: "button",
+                            props: {
+                                title: "后退",
+                            },
+                            layout: (make, view) => {
+                                make.left.top.bottom.inset(0);
+                                make.width.equalTo(72);
+                            },
+                            events: {
+                                tapped: () => {
+                                    webView.goBack();
+                                },
+                            },
+                        },
+                        {
+                            type: "button",
+                            props: {
+                                title: "前进",
+                            },
+                            layout: (make, view) => {
+                                make.left.equalTo(view.prev.right).offset(8);
+                                make.top.bottom.equalTo(view.prev);
+                                make.width.equalTo(72);
+                            },
+                            events: {
+                                tapped: () => {
+                                    webView.goForward();
+                                },
+                            },
+                        },
+                        {
+                            type: "button",
+                            props: {
+                                title: "刷新",
+                            },
+                            layout: (make, view) => {
+                                make.left.equalTo(view.prev.right).offset(8);
+                                make.top.bottom.equalTo(view.prev);
+                                make.width.equalTo(72);
+                            },
+                            events: {
+                                tapped: () => {
+                                    webView.reload();
+                                },
+                            },
+                        },
+                        {
+                            type: "button",
+                            props: {
+                                title: "分享",
+                            },
+                            layout: (make, view) => {
+                                make.left.equalTo(view.prev.right).offset(8);
+                                make.top.bottom.equalTo(view.prev);
+                                make.width.equalTo(72);
+                            },
+                            events: {
+                                tapped: () => {
+                                    $share.sheet(currentURL(webView.webView) || initialURL);
+                                },
+                            },
+                        },
+                    ],
+                },
+            ],
+        },
+        webView.definition,
+    ],
+});

package/dist/test/refresh-button.js

@@ -1,13 +1,4 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 const refresh_button_1 = require("../components/refresh-button");
 const refreshButton = new refresh_button_1.RefreshButton({
@@ -23,11 +14,11 @@ const refreshButton = new refresh_button_1.RefreshButton({
         make.centerX.equalTo(view.super);
     },
     events: {
-        tapped: () => __awaiter(void 0, void 0, void 0, function* () {
+        tapped: async () => {
             refreshButton.loading = true;
-            yield $wait(2);
+            await $wait(2);
             refreshButton.loading = false;
-        }),
+        },
     },
 });
 $ui.render({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jsbox-cview",
-  "version": "1.6.3",
+  "version": "1.6.5",
   "description": "为 JSBox 设计的微型框架",
   "repository": {
     "type": "git",

package/test/oc-webview.ts

@@ -0,0 +1,197 @@
+import { OCWebView } from "../components/oc-webview";
+
+const initialURL = "https://www.example.com";
+
+const normalizeURL = (value: string) => {
+  const url = value.trim();
+  if (!url) return initialURL;
+  if (/^[a-z][a-z\d+\-.]*:\/\//i.test(url)) return url;
+  return `https://${url}`;
+};
+
+const currentURL = (sender: any) => {
+  const nsurl = sender.invoke("URL");
+  return nsurl ? nsurl.invoke("absoluteString").rawValue() : "";
+};
+
+const currentTitle = (sender: any) => {
+  const title = sender.invoke("title");
+  return title ? title.rawValue() : "";
+};
+
+const syncAddress = (sender: any) => {
+  const input = $("oc-webview-url") as UIInputView | undefined;
+  if (!input) return;
+  const url = currentURL(sender);
+  if (url) input.text = url;
+};
+
+const logState = (event: string, sender: any, error?: NSError | null) => {
+  const url = currentURL(sender);
+  const title = currentTitle(sender);
+  const message = error ? ` error=${error.localizedDescription}` : "";
+  console.log(`[${event}] url=${url} title=${title}${message}`);
+};
+
+const localStorageScript = `
+(() => {
+  const data = {};
+  for (let i = 0; i < localStorage.length; i++) {
+    const key = localStorage.key(i);
+    if (key !== null) data[key] = localStorage.getItem(key);
+  }
+  return JSON.stringify(data);
+})()
+`;
+
+const webView = new OCWebView({
+  props: {
+    url: initialURL,
+  },
+  layout: (make, view) => {
+    make.top.equalTo($("oc-webview-toolbar").bottom);
+    make.left.right.bottom.inset(0);
+  },
+  events: {
+    didStart: (sender) => {
+      syncAddress(sender);
+      logState("didStart", sender);
+    },
+    didFinish: async (sender) => {
+      syncAddress(sender);
+      logState("didFinish", sender);
+      try {
+        const localStorage = await webView.exec<string>(localStorageScript);
+        console.log(`[localStorage] ${localStorage || "{}"}`);
+      } catch (error: any) {
+        console.log(`[localStorage] error=${error?.localizedDescription || error}`);
+      }
+    },
+    didFail: (sender, error) => {
+      syncAddress(sender);
+      logState("didFail", sender, error);
+    },
+  },
+});
+
+const loadURL = (value: string) => {
+  const url = normalizeURL(value);
+  const input = $("oc-webview-url") as UIInputView | undefined;
+  if (input) input.text = url;
+  const nsurl = $objc("NSURL").invoke("URLWithString:", url);
+  const request = $objc("NSURLRequest").invoke("requestWithURL:", nsurl);
+  webView.webView.invoke("loadRequest:", request);
+};
+
+$ui.render({
+  views: [
+    {
+      type: "view",
+      props: {
+        id: "oc-webview-toolbar",
+      },
+      layout: (make, view) => {
+        make.top.equalTo(view.super.safeAreaTop);
+        make.left.right.inset(0);
+        make.height.equalTo(88);
+      },
+      views: [
+        {
+          type: "input",
+          props: {
+            id: "oc-webview-url",
+            text: initialURL,
+            type: $kbType.url,
+            bgcolor: $color("secondarySurface"),
+            radius: 8,
+            placeholder: "输入网址后回车",
+          },
+          layout: (make, view) => {
+            make.top.inset(12);
+            make.left.right.inset(12);
+            make.height.equalTo(36);
+          },
+          events: {
+            returned: (sender) => {
+              loadURL(sender.text);
+            },
+          },
+        },
+        {
+          type: "view",
+          props: {},
+          layout: (make, view) => {
+            make.top.equalTo(view.prev.bottom).offset(8);
+            make.left.right.bottom.inset(12);
+          },
+          views: [
+            {
+              type: "button",
+              props: {
+                title: "后退",
+              },
+              layout: (make, view) => {
+                make.left.top.bottom.inset(0);
+                make.width.equalTo(72);
+              },
+              events: {
+                tapped: () => {
+                  webView.goBack();
+                },
+              },
+            },
+            {
+              type: "button",
+              props: {
+                title: "前进",
+              },
+              layout: (make, view) => {
+                make.left.equalTo(view.prev.right).offset(8);
+                make.top.bottom.equalTo(view.prev);
+                make.width.equalTo(72);
+              },
+              events: {
+                tapped: () => {
+                  webView.goForward();
+                },
+              },
+            },
+            {
+              type: "button",
+              props: {
+                title: "刷新",
+              },
+              layout: (make, view) => {
+                make.left.equalTo(view.prev.right).offset(8);
+                make.top.bottom.equalTo(view.prev);
+                make.width.equalTo(72);
+              },
+              events: {
+                tapped: () => {
+                  webView.reload();
+                },
+              },
+            },
+            {
+              type: "button",
+              props: {
+                title: "分享",
+              },
+              layout: (make, view) => {
+                make.left.equalTo(view.prev.right).offset(8);
+                make.top.bottom.equalTo(view.prev);
+                make.width.equalTo(72);
+              },
+              events: {
+                tapped: () => {
+                  $share.sheet(currentURL(webView.webView) || initialURL);
+                },
+              },
+            },
+          ],
+        },
+      ],
+    },
+    webView.definition,
+  ],
+});

package/tsconfig.json

@@ -11,7 +11,7 @@
     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
 
     /* Language and Environment */
-    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "target": "es2017",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
     // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
     // "jsx": "preserve",                                /* Specify what JSX code is generated. */
     // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */