@operato/scene-restful 1.1.23 → 1.1.27

package/helps/scene/component/restful.zh.md

@@ -1,13 +1,14 @@
 # restful
-提供URL且仅通过URL检索数据时使用的组件。
 
-## properties
+“restful”是利用浏览器的 Fetch API 提供 HTTP 请求功能的组件。
 
-- 访问地址 : 数据查询网址
-- 周期 : 数据查询周期
-- 数据格式 : Plain Text，JSON，JSONP数据格式
-   - Plain Text : 服务器以纯文本格式返回数据时使用。
-   - JSON : 当服务器以JSON形式提供数据时
-   - JSONP : 当以函数形式接收数据时，将接收并处理该函数。
+您可以参考下面链接的文档中的调用函数和每个属性值。
 
-- 允许跨网 : 是否允许跨网
+https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch
+
+例外）当 dataFormat 是 jsonp（带填充的 JSON）时，不使用 Fetch API。 在这种情况下，只有 URL 参数才有意义。
+
+## value property
+
+该组件的 value 属性用作 HTTP 请求过程中的正文或 URL。
+在 GET 方法中，它用作 URL，在其他方法中，它用作正文。

package/logs/.08636eb59927f12972f6774f5947c8507b3564c2-audit.json

@@ -0,0 +1,25 @@
+{
+    "keep": {
+        "days": true,
+        "amount": 2
+    },
+    "auditLog": "logs/.08636eb59927f12972f6774f5947c8507b3564c2-audit.json",
+    "files": [
+        {
+            "date": 1673384602553,
+            "name": "logs/application-2023-01-11-06.log",
+            "hash": "3d9686fbb35df488eba187acdab6ce4b720ff09f4f19a6539ad3638f99f2755f"
+        },
+        {
+            "date": 1673395277552,
+            "name": "logs/application-2023-01-11-09.log",
+            "hash": "5d6f40e1c646df1e5b0c7fcd23e354480f3d085cbab8885c5705262b2fcaf1f8"
+        },
+        {
+            "date": 1673401669078,
+            "name": "logs/application-2023-01-11-10.log",
+            "hash": "cc716e1d5c5e79d8c25baa01dfc2811672bd48bd2b3e26473718e3aa540a319a"
+        }
+    ],
+    "hashType": "sha256"
+}

package/logs/.5e5d741d8b7784a2fbad65eedc0fd46946aaf6f2-audit.json

@@ -0,0 +1,20 @@
+{
+    "keep": {
+        "days": true,
+        "amount": 14
+    },
+    "auditLog": "logs/.5e5d741d8b7784a2fbad65eedc0fd46946aaf6f2-audit.json",
+    "files": [
+        {
+            "date": 1673384603916,
+            "name": "logs/connections-2023-01-11-06.log",
+            "hash": "e4cd4d89cfbcf7a47f621cc7971532bc8b72e13820c79b04f9f131f20654aab7"
+        },
+        {
+            "date": 1673401670303,
+            "name": "logs/connections-2023-01-11-10.log",
+            "hash": "d8ddd2dc61ffaade0931e39aad31a38247ae670300778a1eb0437af9affe2d62"
+        }
+    ],
+    "hashType": "sha256"
+}

package/logs/application-2023-01-11-06.log

@@ -0,0 +1,12 @@
+2023-01-11T06:03:22+09:00 info: File Storage is Ready.
+2023-01-11T06:03:24+09:00 error: oracledb module loading failed
+2023-01-11T06:03:34+09:00 info: File Storage is Ready.
+2023-01-11T06:03:35+09:00 error: oracledb module loading failed
+2023-01-11T06:03:36+09:00 info: Default DataSource established
+2023-01-11T06:03:36+09:00 info: Transaction DataSource established
+2023-01-11T06:03:51+09:00 info: File Storage is Ready.
+2023-01-11T06:03:52+09:00 error: oracledb module loading failed
+2023-01-11T06:03:52+09:00 info: Default DataSource established
+2023-01-11T06:03:52+09:00 info: Transaction DataSource established
+2023-01-11T06:03:53+09:00 info: 🚀 Server ready at http://0.0.0.0:3000/graphql
+2023-01-11T06:03:53+09:00 info: 🚀 Subscriptions ready at ws://0.0.0.0:3000/graphql

package/logs/application-2023-01-11-09.log

@@ -0,0 +1 @@
+2023-01-11T09:01:17+09:00 error: Your license due date is 2023.01.18, please renewal your license!

package/logs/application-2023-01-11-10.log

@@ -0,0 +1,7 @@
+2023-01-11T10:47:49+09:00 info: File Storage is Ready.
+2023-01-11T10:47:50+09:00 error: oracledb module loading failed
+2023-01-11T10:47:51+09:00 info: Default DataSource established
+2023-01-11T10:47:51+09:00 info: Transaction DataSource established
+2023-01-11T10:47:52+09:00 info: 🚀 Server ready at http://0.0.0.0:3000/graphql
+2023-01-11T10:47:52+09:00 info: 🚀 Subscriptions ready at ws://0.0.0.0:3000/graphql
+2023-01-11T10:49:05+09:00 error: Your license due date is 2023.01.18, please renewal your license!

package/logs/connections-2023-01-11-06.log

@@ -0,0 +1,35 @@
+2023-01-11T06:03:53+09:00 info: Initializing ConnectionManager...
+2023-01-11T06:03:53+09:00 info: Connector 'echo-back-server' started to ready
+2023-01-11T06:03:53+09:00 info: Connector 'echo-back' started to ready
+2023-01-11T06:03:53+09:00 info: Connector 'http-connector' started to ready
+2023-01-11T06:03:53+09:00 info: Connector 'graphql-connector' started to ready
+2023-01-11T06:03:53+09:00 info: Connector 'sqlite-connector' started to ready
+2023-01-11T06:03:53+09:00 info: Connector 'postgresql-connector' started to ready
+2023-01-11T06:03:53+09:00 info: Connector 'mqtt-connector' started to ready
+2023-01-11T06:03:53+09:00 info: Connector 'mssql-connector' started to ready
+2023-01-11T06:03:53+09:00 info: Connector 'oracle-connector' started to ready
+2023-01-11T06:03:53+09:00 info: Connector 'mysql-connector' started to ready
+2023-01-11T06:03:53+09:00 info: Connector 'socket-server' started to ready
+2023-01-11T06:03:53+09:00 info: echo-back-servers are ready
+2023-01-11T06:03:53+09:00 info: echo-back connections are ready
+2023-01-11T06:03:53+09:00 info: http-connector connections are ready
+2023-01-11T06:03:53+09:00 info: graphql-connector connections are ready
+2023-01-11T06:03:53+09:00 info: sqlite-connector connections are ready
+2023-01-11T06:03:53+09:00 info: postgresql-connector connections are ready
+2023-01-11T06:03:53+09:00 info: mqtt-connector connections are ready
+2023-01-11T06:03:53+09:00 info: mssql-connector connections are ready
+2023-01-11T06:03:53+09:00 info: oracle-connector connections are ready
+2023-01-11T06:03:53+09:00 info: mysql-connector connections are ready
+2023-01-11T06:03:53+09:00 info: socket servers are ready
+2023-01-11T06:03:53+09:00 info: All connector for 'echo-back-server' ready
+2023-01-11T06:03:53+09:00 info: All connector for 'echo-back' ready
+2023-01-11T06:03:53+09:00 info: All connector for 'http-connector' ready
+2023-01-11T06:03:53+09:00 info: All connector for 'graphql-connector' ready
+2023-01-11T06:03:53+09:00 info: All connector for 'sqlite-connector' ready
+2023-01-11T06:03:53+09:00 info: All connector for 'postgresql-connector' ready
+2023-01-11T06:03:53+09:00 info: All connector for 'mqtt-connector' ready
+2023-01-11T06:03:53+09:00 info: All connector for 'mssql-connector' ready
+2023-01-11T06:03:53+09:00 info: All connector for 'oracle-connector' ready
+2023-01-11T06:03:53+09:00 info: All connector for 'mysql-connector' ready
+2023-01-11T06:03:53+09:00 info: All connector for 'socket-server' ready
+2023-01-11T06:03:53+09:00 info: ConnectionManager initialization done:

package/logs/connections-2023-01-11-10.log

@@ -0,0 +1,35 @@
+2023-01-11T10:47:52+09:00 info: Initializing ConnectionManager...
+2023-01-11T10:47:52+09:00 info: Connector 'echo-back-server' started to ready
+2023-01-11T10:47:52+09:00 info: Connector 'echo-back' started to ready
+2023-01-11T10:47:52+09:00 info: Connector 'http-connector' started to ready
+2023-01-11T10:47:52+09:00 info: Connector 'graphql-connector' started to ready
+2023-01-11T10:47:52+09:00 info: Connector 'sqlite-connector' started to ready
+2023-01-11T10:47:52+09:00 info: Connector 'postgresql-connector' started to ready
+2023-01-11T10:47:52+09:00 info: Connector 'mqtt-connector' started to ready
+2023-01-11T10:47:52+09:00 info: Connector 'mssql-connector' started to ready
+2023-01-11T10:47:52+09:00 info: Connector 'oracle-connector' started to ready
+2023-01-11T10:47:52+09:00 info: Connector 'mysql-connector' started to ready
+2023-01-11T10:47:52+09:00 info: Connector 'socket-server' started to ready
+2023-01-11T10:47:52+09:00 info: echo-back-servers are ready
+2023-01-11T10:47:52+09:00 info: echo-back connections are ready
+2023-01-11T10:47:52+09:00 info: http-connector connections are ready
+2023-01-11T10:47:52+09:00 info: graphql-connector connections are ready
+2023-01-11T10:47:52+09:00 info: sqlite-connector connections are ready
+2023-01-11T10:47:52+09:00 info: postgresql-connector connections are ready
+2023-01-11T10:47:52+09:00 info: mqtt-connector connections are ready
+2023-01-11T10:47:52+09:00 info: mssql-connector connections are ready
+2023-01-11T10:47:52+09:00 info: oracle-connector connections are ready
+2023-01-11T10:47:52+09:00 info: mysql-connector connections are ready
+2023-01-11T10:47:52+09:00 info: socket servers are ready
+2023-01-11T10:47:52+09:00 info: All connector for 'echo-back-server' ready
+2023-01-11T10:47:52+09:00 info: All connector for 'echo-back' ready
+2023-01-11T10:47:52+09:00 info: All connector for 'http-connector' ready
+2023-01-11T10:47:52+09:00 info: All connector for 'graphql-connector' ready
+2023-01-11T10:47:52+09:00 info: All connector for 'sqlite-connector' ready
+2023-01-11T10:47:52+09:00 info: All connector for 'postgresql-connector' ready
+2023-01-11T10:47:52+09:00 info: All connector for 'mqtt-connector' ready
+2023-01-11T10:47:52+09:00 info: All connector for 'mssql-connector' ready
+2023-01-11T10:47:52+09:00 info: All connector for 'oracle-connector' ready
+2023-01-11T10:47:52+09:00 info: All connector for 'mysql-connector' ready
+2023-01-11T10:47:52+09:00 info: All connector for 'socket-server' ready
+2023-01-11T10:47:52+09:00 info: ConnectionManager initialization done:

package/package.json

@@ -3,7 +3,7 @@
   "description": "Restful Client Component for Things Scene",
   "license": "MIT",
   "author": "heartyoh",
-  "version": "1.1.23",
+  "version": "1.1.27",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "things-scene": true,
@@ -57,5 +57,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "a495c0adb9adc44a1e55443307fc6340789f9cc8"
+  "gitHead": "e24dcf77b8d1506f3a645071cd8f0851a9524930"
 }

package/src/restful.ts

@@ -7,16 +7,40 @@ const NATURE: ComponentNature = {
   resizable: true,
   rotatable: true,
   properties: [
+    {
+      type: 'select',
+      label: 'method',
+      name: 'method',
+      property: {
+        options: [
+          {
+            display: 'GET',
+            value: 'GET'
+          },
+          {
+            display: 'POST',
+            value: 'POST'
+          },
+          {
+            display: 'PUT',
+            value: 'PUT'
+          },
+          {
+            display: 'DELETE',
+            value: 'DELETE'
+          }
+        ]
+      }
+    },
     {
       type: 'string',
       label: 'url',
       name: 'url'
     },
     {
-      type: 'number',
-      label: 'period',
-      name: 'period',
-      placeholder: 'SECONDS'
+      type: 'string',
+      label: 'authorization',
+      name: 'authorization'
     },
     {
       type: 'select',
@@ -25,27 +49,194 @@ const NATURE: ComponentNature = {
       property: {
         options: [
           {
-            display: 'Plain Text',
+            display: 'json',
+            value: 'json'
+          },
+          {
+            display: 'jsonp',
+            value: 'jsonp'
+          },
+          {
+            display: 'text',
             value: 'text'
+          }
+        ]
+      }
+    },
+    {
+      type: 'select',
+      label: 'content-type',
+      name: 'contentType',
+      property: {
+        options: [
+          {
+            display: 'application/json',
+            value: 'application/json'
           },
           {
-            display: 'JSON',
-            value: 'json'
+            display: 'application/x-www-form-urlencoded',
+            value: 'application/x-www-form-urlencoded'
           },
           {
-            display: 'JSONP',
-            value: 'jsonp'
+            display: 'text/plain',
+            value: 'text/plain'
+          }
+        ]
+      }
+    },
+    {
+      type: 'select',
+      label: 'mode',
+      name: 'mode',
+      property: {
+        options: [
+          {
+            display: 'cors',
+            value: 'cors'
+          },
+          {
+            display: 'no-cors',
+            value: 'no-cors'
+          },
+          {
+            display: 'same-origin',
+            value: 'same-origin'
+          }
+        ]
+      }
+    },
+    {
+      type: 'select',
+      label: 'credentials',
+      name: 'credentials',
+      property: {
+        options: [
+          {
+            display: 'same-origin',
+            value: 'same-origin'
+          },
+          {
+            display: 'include',
+            value: 'include'
+          },
+          {
+            display: 'omit',
+            value: 'omit'
+          }
+        ]
+      }
+    },
+    {
+      type: 'select',
+      label: 'cache',
+      name: 'cache',
+      property: {
+        options: [
+          {
+            display: 'default',
+            value: 'default'
+          },
+          {
+            display: 'no-cache',
+            value: 'no-cache'
+          },
+          {
+            display: 'reload',
+            value: 'reload'
+          },
+          {
+            display: 'force-cache',
+            value: 'force-cache'
+          },
+          {
+            display: 'only-if-cached',
+            value: 'only-if-cached'
+          }
+        ]
+      }
+    },
+    {
+      type: 'select',
+      label: 'redirect',
+      name: 'redirect',
+      property: {
+        options: [
+          {
+            display: 'follow',
+            value: 'follow'
+          },
+          {
+            display: 'manual',
+            value: 'manual'
+          },
+          {
+            display: 'error',
+            value: 'error'
           }
         ]
       }
     },
+    {
+      type: 'select',
+      label: 'referrer-policy',
+      name: 'referrerPolicy',
+      property: {
+        options: [
+          {
+            display: 'no-referrer-when-downgrade',
+            value: 'no-referrer-when-downgrade'
+          },
+          {
+            display: 'no-referrer',
+            value: 'no-referrer'
+          },
+          {
+            display: 'origin',
+            value: 'origin'
+          },
+          {
+            display: 'origin-when-cross-origin',
+            value: 'origin-when-cross-origin'
+          },
+          {
+            display: 'same-origin',
+            value: 'same-origin'
+          },
+          {
+            display: 'strict-origin',
+            value: 'strict-origin'
+          },
+          {
+            display: 'strict-origin-when-cross-origin',
+            value: 'strict-origin-when-cross-origin'
+          },
+          {
+            display: 'unsafe-url',
+            value: 'unsafe-url'
+          }
+        ]
+      }
+    },
+    {
+      type: 'select',
+      label: 'value-usage',
+      name: 'valueUsage',
+      property: {
+        options: ['body', 'url']
+      }
+    },
+    {
+      type: 'number',
+      label: 'period',
+      name: 'period',
+      placeholder: 'SECONDS'
+    },
     {
       type: 'checkbox',
-      label: 'with-credentials',
-      name: 'withCredentials'
+      label: 'fetch-on-load',
+      name: 'fetchOnLoad'
     }
   ],
-  'value-property': 'url',
   help: 'scene/component/restful'
 }
 
@@ -66,6 +257,9 @@ export default class Restful extends DataSource(RectPath(Shape)) {
     return Restful._image
   }
 
+  private _repeatTimer!: NodeJS.Timeout
+  private _isStarted = false
+
   get url() {
     return this.getState('url')
   }
@@ -76,14 +270,23 @@ export default class Restful extends DataSource(RectPath(Shape)) {
   }
 
   get period() {
-    return this.state.period * 1000
+    return Number(this.state.period) * 1000
   }
 
   set period(period) {
-    this.setState('period', period)
+    this.setState('period', Number(period))
     this._initRestful()
   }
 
+  get value() {
+    return this.state.value
+  }
+
+  set value(value) {
+    this.setState('value', value)
+    this._initRestful(true)
+  }
+
   get withCredentials() {
     return !!this.getState('withCredentials')
   }
@@ -93,10 +296,6 @@ export default class Restful extends DataSource(RectPath(Shape)) {
     this._initRestful()
   }
 
-  _repeatTimer!: NodeJS.Timeout
-  _httpRequest?: any
-  _isStarted = false
-
   get repeatTimer() {
     return this._repeatTimer
   }
@@ -106,19 +305,11 @@ export default class Restful extends DataSource(RectPath(Shape)) {
     this._repeatTimer = repeatTimer
   }
 
-  get httpRequest() {
-    return this._httpRequest
-  }
-
-  set httpRequest(httpRequest) {
-    this._httpRequest = httpRequest
-  }
-
   ready() {
-    this._initRestful()
+    this._initRestful(this.state.fetchOnLoad)
   }
 
-  _initRestful() {
+  _initRestful(force: boolean = false) {
     if (!this.app.isViewMode) return
 
     if (!this.url) {
@@ -127,7 +318,11 @@ export default class Restful extends DataSource(RectPath(Shape)) {
     }
 
     this._stopRepeater()
-    this._startRepeater()
+    if (this.period > 0) {
+      this._startRepeater()
+    } else {
+      force && this.fetch()
+    }
   }
 
   dispose() {
@@ -140,12 +335,11 @@ export default class Restful extends DataSource(RectPath(Shape)) {
 
     var self = this
 
-    // requestAnimationFrame 이 호출되지 않을 때는 ajax 호출도 하지 않도록 함.
     function _() {
       if (!self._isStarted) {
         return
       }
-      self.callAjax()
+      self.fetch()
 
       if (!self.period) {
         self._stopRepeater()
@@ -161,78 +355,74 @@ export default class Restful extends DataSource(RectPath(Shape)) {
   }
 
   _stopRepeater() {
-    this._abortRequest()
-
-    if (this.repeatTimer) clearTimeout(this._repeatTimer)
     this._isStarted = false
-  }
-
-  _makeRequest(url: string) {
-    if (window.XMLHttpRequest) {
-      // Mozilla, Safari, ...
-      this.httpRequest = new XMLHttpRequest()
-      // @ts-ignore
-    } else if (window.ActiveXObject) {
-      // IE
-      try {
-        // @ts-ignore
-        this.httpRequest = new ActiveXObject('Msxml2.XMLHTTP')
-      } catch (e) {
-        try {
-          // @ts-ignore
-          this.httpRequest = new ActiveXObject('Microsoft.XMLHTTP')
-        } catch (e) {}
-      }
+    if (this.repeatTimer) {
+      clearTimeout(this._repeatTimer)
     }
-
-    if (!this.httpRequest) {
-      warn('Giving up :( Cannot create an XMLHTTP instance')
-      return false
-    }
-    this.httpRequest.withCredentials = this.withCredentials
-    this.httpRequest.open('GET', url)
-    this.httpRequest.onreadystatechange = this.onDataReceived.bind(this)
-
-    return true
   }
 
-  _makeRequestJsonp(url: string) {
-    jsonp(url, {}, (self, data) => {
-      if (!data) return
+  async fetch() {
+    var {
+      url,
+      method = 'GET',
+      mode = 'cors',
+      cache = 'default',
+      credentials = 'same-origin',
+      redirect = 'follow',
+      referrerPolicy = 'no-referrer-when-downgrade',
+      contentType = 'application/json',
+      dataFormat = 'json',
+      value
+    } = this.state
 
-      this.data = data
-    })
-  }
-
-  _abortRequest() {
-    if (this.httpRequest) this.httpRequest.abort()
-  }
+    if (dataFormat == 'jsonp') {
+      if (value && typeof value == 'string') {
+        url = value
+      }
 
-  onDataReceived() {
-    var { dataFormat = 'text' } = this.state
+      jsonp(url, {}, (self, data) => {
+        if (this._isStarted && data) {
+          this.data = data
+        }
+      })
 
-    if (this.httpRequest.readyState === 4) {
-      if (this.httpRequest.status === 200) {
-        var data = this.httpRequest.responseText
+      return
+    }
 
-        if (!data) return
+    var options: any = {
+      method,
+      mode,
+      cache,
+      credentials,
+      headers: {
+        'Content-Type': contentType
+      },
+      redirect,
+      referrerPolicy
+    }
 
-        this.data = this._convertDataFormat(data, dataFormat)
+    if (method != 'GET' && method != 'HEAD') {
+      if (contentType == 'application/json') {
+        options.body = JSON.stringify(value)
+      } else {
+        options.body = value
+      }
+    } else {
+      if (value && typeof value == 'string') {
+        options.url = value
       }
     }
-  }
 
-  callAjax() {
-    var { dataFormat = 'text' } = this.state
+    const response = await fetch(url, options)
 
-    if (dataFormat == 'jsonp') {
-      // @ts-ignore TODO add substitute property to things-scene.d.ts
-      this._makeRequestJsonp(this.substitute(this.url, this))
-    } else {
-      // @ts-ignore TODO add substitute property to things-scene.d.ts
-      if (!this._makeRequest(this.substitute(this.url, this))) return
+    if (!this._isStarted) {
+      return
+    }
 
-      this.httpRequest.send()
+    if (dataFormat === 'json') {
+      this.data = response.json()
+    } else if (dataFormat === 'text') {
+      this.data = response.text()
     }
   }
 
@@ -249,7 +439,7 @@ export default class Restful extends DataSource(RectPath(Shape)) {
       return
     }
 
-    this.callAjax()
+    this.fetch()
   }
 
   get controls() {

package/translations/en.json

@@ -2,5 +2,12 @@
   "label.url": "url",
   "label.period": "period",
   "label.data-format": "data format",
-  "label.with-credentials": "with credentials"
+  "label.with-credentials": "with credentials",
+  "label.content-type": "content type",
+  "label.mode": "mode",
+  "label.credentials": "credentials",
+  "label.cache": "cache",
+  "label.redirect": "redirect",
+  "label.referrer-policy": "referrer policy",
+  "label.fetch-on-load": "fetch on load"
 }