Merge pull request #9 from 2214962083/dev

更新基础包，新增内置 EndAwait 函数以支持末尾顶部 await

Author: 2214962083

docs/questions.md

@@ -40,9 +40,7 @@
 
 这种状况是因为 `Scriptable` 内部处理多个小部件异步渲染时没处理好。导致部分小部件渲染为空。([在此可以看到相关讨论](https://talk.automators.fm/t/hellp-call-script-setwidget-to-set-the-content-of-the-widget-run-in-widget/9615/7))
 
-解决方法也很简单，在渲染时最外层加个 await。由于打包器不支持 `top-level-await`，建议在编译好后手动添加上去。
-
-开发时不用加，毕竟是偶尔情况，在生产环境打包发布给别人用时，再手动加。
+解决方法也很简单，在渲染时最外层加个 await。由于打包器不支持 `top-level-await`，所以本框架内置了一个末尾底部等待的函数 `EndAwait` ，使用方法见下
 
 ```tsx
 Class HelloWorld {
@@ -54,17 +52,29 @@ Class HelloWorld {
  }
 }
 
-// 在这加，手动往打包后的文件加，因为打包器不会把 await 打包进去，而且 tsconfig 原因，编辑器也会报错
-await new HelloWorld().init()
-```
+// 使用前
+// new HelloWorld().init()
 
-如果有更好的解决方法可以 `issues` 提案。
+// 使用后，这样就不会出现以上状况了
+EndAwait(() => new HelloWorld().init())
+```
 
 <br/>
 
 <br/>
 
 **E、为什么 jsx widget 是异步渲染？**
 
-为了方便引入网络资源，比如图片，实现 `wimage` 的 src 填写网络连接就能自动加载图片，是需要异步等待的。所以渲染小部件，返回 ListWidget 实例也是异步。
+为了方便引入网络资源，比如图片，实现 `wimage` 的 src 填写网络连接就能自动加载图片，是需要异步等待的。所以渲染小部件，返回 ListWidget 实例也是异步。
+
+<br/>
+
+<br/>
+
+**F、基础包同步运行时报错，而同步后，直接运行所同步的脚本却没报错？**
+
+可能是基础包版本过旧原因，再扫二维码进引导页重新安装一下基础包即可。
+
+<br/>
 
+<br/>

src/lib/basic.ts

@@ -246,7 +246,9 @@ class Basic {
  */
  async runCode(syncScriptName: string, scriptText: string) {
  try {
- const runRemoteCode = new Function(`${scriptText}`)
+ const runRemoteCode = new Function(`(async () => {
+ ${scriptText}
+ })()`)
  // 执行远程代码
  runRemoteCode()
  } catch (err) {

src/lib/compile.ts

@@ -165,7 +165,14 @@ async function compile(options: CompileOptions) {
  banner: `${header}
 // @编译时间 ${Date.now()}
 const MODULE = module;
+let __topLevelAwait__ = () => Promise.resolve();
+function EndAwait(promiseFunc) {
+ __topLevelAwait__ = promiseFunc
+};
  `,
+ footer: `
+await __topLevelAwait__();
+`,
  jsxFactory: 'h',
  jsxFragment: 'Fragment',
  define,

src/lib/static/基础包.js

@@ -1,12 +1,16 @@
 /**
  * 作者: 小明
  * 版本: 1.0.0
- * 更新时间：2020-12-11
- * github: https://github.com/2214962083/scriptable.git
+ * 更新时间：2020-12-14
+ * github: https://github.com/2214962083/ios-scriptable-tsx
  */
 
-// @编译时间 1607657751861
+// @编译时间 1607924203272
 const MODULE = module
+let __topLevelAwait__ = () => Promise.resolve()
+function EndAwait(promiseFunc) {
+ __topLevelAwait__ = promiseFunc
+}
 
 // src/lib/constants.ts
 var URLSchemeFrom
@@ -187,7 +191,7 @@ async function showNotification(args2) {
  notification.subtitle = subtitle
  notification.body = body
  openURL && (notification.openURL = openURL)
- sound && notification.sound
+ sound && (notification.sound = sound)
  notification = Object.assign(notification, others)
  return await notification.schedule()
 }
@@ -516,7 +520,7 @@ function runOnClick(instance, onClick) {
  }
 }
 
-// src/lib/baisc.ts
+// src/lib/basic.ts
 var {setStorage: setStorage2, getStorage: getStorage2} = useStorage('basic-storage')
 var runScriptDate = Date.now()
 setStorage2('runScriptDate', runScriptDate)
@@ -678,7 +682,9 @@ ${scriptText}`
  }
  async runCode(syncScriptName, scriptText) {
  try {
- const runRemoteCode = new Function(`${scriptText}`)
+ const runRemoteCode = new Function(`(async () => {
+ ${scriptText}
+ })()`)
  runRemoteCode()
  } catch (err) {
  console.log('同步的代码执行失败')
@@ -736,3 +742,5 @@ console.__rewrite__ = true;
  }
 }
 new Basic().init()
+
+await __topLevelAwait__()

src/scripts/tsx-bili.tsx src/scripts/bili.tsxsrc/scripts/tsx-bili.tsx renamed to src/scripts/bili.tsx

@@ -159,4 +159,4 @@ class BiliFans {
  }
 }
 
-new BiliFans().init()
+EndAwait(() => new BiliFans().init())

src/scripts/funds.tsx

@@ -228,4 +228,4 @@ class Funds {
  }
 }
 
-new Funds().init()
+EndAwait(() => new Funds().init())

src/scripts/music163.tsx

@@ -314,4 +314,4 @@ class Music163 {
  }
 }
 
-new Music163().init()
+EndAwait(() => new Music163().init())

src/scripts/tsx-yiyan.tsx src/scripts/yiyan.tsxsrc/scripts/tsx-yiyan.tsx renamed to src/scripts/yiyan.tsx

@@ -80,4 +80,4 @@ class YiyanWidget {
  }
 }
 
-new YiyanWidget().init()
+EndAwait(() => new YiyanWidget().init())

src/types/index.d.ts

@@ -15,3 +15,9 @@ declare const MODULE: Module
 declare namespace Scriptable {
  class Widget {}
 }
+
+/**
+ * 结尾生成顶部等待（top-level-await）渲染
+ * @param promiseFunc 渲染函数，如: () => render()
+ */
+declare const EndAwait: <T>(promiseFunc: () => Promise<T>) => Promise<T>

打包好的成品/一言.js

@@ -1,5 +1,9 @@
-// @编译时间 1607657381586
+// @编译时间 1607924347523
 const MODULE = module
+let __topLevelAwait__ = () => Promise.resolve()
+function EndAwait(promiseFunc) {
+ __topLevelAwait__ = promiseFunc
+}
 
 // src/lib/constants.ts
 var URLSchemeFrom
@@ -174,26 +178,32 @@ function hash(string) {
 function isLaunchInsideApp() {
  return !config.runsInWidget && args.queryParameters.from !== URLSchemeFrom.WIDGET
 }
-async function showPreviewOptions(widget) {
+async function showPreviewOptions(render) {
  const selectIndex = await showActionSheet({
  title: '预览组件',
  desc: '测试桌面组件在各种尺寸下的显示效果',
  itemList: ['小尺寸', '中尺寸', '大尺寸', '全部尺寸'],
  })
  switch (selectIndex) {
  case 0:
- await widget.presentSmall()
+ config.widgetFamily = 'small'
+ await (await render()).presentSmall()
  break
  case 1:
- await widget.presentMedium()
+ config.widgetFamily = 'medium'
+ await (await render()).presentMedium()
  break
  case 2:
- await widget.presentLarge()
+ config.widgetFamily = 'large'
+ await (await render()).presentLarge()
  break
  case 3:
- await widget.presentSmall()
- await widget.presentMedium()
- await widget.presentLarge()
+ config.widgetFamily = 'small'
+ await (await render()).presentSmall()
+ config.widgetFamily = 'medium'
+ await (await render()).presentMedium()
+ config.widgetFamily = 'large'
+ await (await render()).presentLarge()
  break
  }
  return selectIndex
@@ -419,7 +429,7 @@ var listWidget = new ListWidget()
 GenrateView.setListWidget(listWidget)
 function h(type, props, ...children) {
  props = props || {}
- const _children = [].concat(...children)
+ const _children = flatteningArr(children)
  switch (type) {
  case 'wbox':
  return GenrateView.wbox(props, ..._children)
@@ -444,6 +454,13 @@ function h(type, props, ...children) {
  break
  }
 }
+function flatteningArr(arr) {
+ return [].concat(
+ ...arr.map(item => {
+ return Array.isArray(item) ? flatteningArr(item) : item
+ }),
+ )
+}
 function getColor(color) {
  return typeof color === 'string' ? new Color(color, 1) : color
 }
@@ -495,10 +512,10 @@ function runOnClick(instance, onClick) {
 // src/scripts/tsx-yiyan.tsx
 var YiyanWidget = class {
  async init() {
- this.widget = await this.render()
  if (isLaunchInsideApp()) {
- return await showPreviewOptions(this.widget)
+ return await showPreviewOptions(this.render.bind(this))
  }
+ this.widget = await this.render()
  Script.setWidget(this.widget)
  Script.complete()
  }
@@ -560,7 +577,6 @@ var YiyanWidget = class {
  })
  }
  async menu() {
- const optionFunc = [this.selectPreviewSize]
  const selectIndex = await showActionSheet({
  title: '菜单',
  itemList: [
@@ -569,34 +585,13 @@ var YiyanWidget = class {
  },
  ],
  })
- optionFunc[selectIndex].apply(this)
- }
- async selectPreviewSize() {
- const selectIndex = await showActionSheet({
- title: '选择预览尺寸',
- itemList: [
- {
- text: '小组件',
- },
- {
- text: '中组件',
- },
- {
- text: '大组件',
- },
- ],
- })
  switch (selectIndex) {
  case 0:
- await this.widget.presentSmall()
- break
- case 1:
- await this.widget.presentMedium()
- break
- case 2:
- await this.widget.presentLarge()
+ await showPreviewOptions(this.render.bind(this))
  break
  }
  }
 }
-new YiyanWidget().init()
+EndAwait(() => new YiyanWidget().init())
+
+await __topLevelAwait__()