feat(h5): add loader

packages/uni-components/src/components/editor/index.tsx

@@ -257,163 +257,167 @@ function useQuill(
     })
   })
   const id = useContextInfo()
-  useSubscribe((type: string, data: any) => {
-    const { options, callbackId } = data
-    let res
-    let range: RangeStatic | undefined
-    let errMsg
-    if (quillReady) {
-      const Quill = (window as WindowExt).Quill as typeof QuillClass
-      switch (type) {
-        case 'format':
-          {
-            let { name = '', value = false } = options
-            range = quill.getSelection(true)
-            let format = quill.getFormat(range)[name] || false
-            if (
-              ['bold', 'italic', 'underline', 'strike', 'ins'].includes(name)
-            ) {
-              value = !format
-            } else if (name === 'direction') {
-              value = value === 'rtl' && format ? false : value
-              const align = quill.getFormat(range).align
-              if (value === 'rtl' && !align) {
-                quill.format('align', 'right', 'user')
-              } else if (!value && align === 'right') {
-                quill.format('align', false, 'user')
-              }
-            } else if (name === 'indent') {
-              const rtl = quill.getFormat(range).direction === 'rtl'
-              value = value === '+1'
-              if (rtl) {
-                value = !value
-              }
-              value = value ? '+1' : '-1'
-            } else {
-              if (name === 'list') {
-                value = value === 'check' ? 'unchecked' : value
-                format = format === 'checked' ? 'unchecked' : format
+  useSubscribe(
+    (type: string, data: any) => {
+      const { options, callbackId } = data
+      let res
+      let range: RangeStatic | undefined
+      let errMsg
+      if (quillReady) {
+        const Quill = (window as WindowExt).Quill as typeof QuillClass
+        switch (type) {
+          case 'format':
+            {
+              let { name = '', value = false } = options
+              range = quill.getSelection(true)
+              let format = quill.getFormat(range)[name] || false
+              if (
+                ['bold', 'italic', 'underline', 'strike', 'ins'].includes(name)
+              ) {
+                value = !format
+              } else if (name === 'direction') {
+                value = value === 'rtl' && format ? false : value
+                const align = quill.getFormat(range).align
+                if (value === 'rtl' && !align) {
+                  quill.format('align', 'right', 'user')
+                } else if (!value && align === 'right') {
+                  quill.format('align', false, 'user')
+                }
+              } else if (name === 'indent') {
+                const rtl = quill.getFormat(range).direction === 'rtl'
+                value = value === '+1'
+                if (rtl) {
+                  value = !value
+                }
+                value = value ? '+1' : '-1'
+              } else {
+                if (name === 'list') {
+                  value = value === 'check' ? 'unchecked' : value
+                  format = format === 'checked' ? 'unchecked' : format
+                }
+                value =
+                  (format && format !== (value || false)) || (!format && value)
+                    ? value
+                    : !format
               }
-              value =
-                (format && format !== (value || false)) || (!format && value)
-                  ? value
-                  : !format
+              quill.format(name, value, 'user')
             }
-            quill.format(name, value, 'user')
-          }
-          break
-        case 'insertDivider':
-          range = quill.getSelection(true)
-          quill.insertText(range.index, '\n', 'user')
-          quill.insertEmbed(range.index + 1, 'divider', true, 'user')
-          quill.setSelection(range.index + 2, 0, 'silent')
-          break
-        case 'insertImage':
-          {
+            break
+          case 'insertDivider':
             range = quill.getSelection(true)
-            const {
-              src = '',
-              alt = '',
-              width = '',
-              height = '',
-              extClass = '',
-              data = {},
-            } = options
-            const path = getRealPath(src)
-            quill.insertEmbed(range.index, 'image', path, 'user')
-            const local = /^(file|blob):/.test(path) ? path : false
-            quill.formatText(range.index, 1, 'data-local', local)
-            quill.formatText(range.index, 1, 'alt', alt)
-            quill.formatText(range.index, 1, 'width', width)
-            quill.formatText(range.index, 1, 'height', height)
-            quill.formatText(range.index, 1, 'class', extClass)
-            quill.formatText(
-              range.index,
-              1,
-              'data-custom',
-              Object.keys(data)
-                .map((key) => `${key}=${data[key]}`)
-                .join('&')
-            )
-            quill.setSelection(range.index + 1, 0, 'silent')
-          }
-          break
-        case 'insertText':
-          {
-            range = quill.getSelection(true)
-            const { text = '' } = options
-            quill.insertText(range.index, text, 'user')
-            quill.setSelection(range.index + text.length, 0, 'silent')
-          }
-          break
-        case 'setContents':
-          {
-            const { delta, html } = options
-            if (typeof delta === 'object') {
-              quill.setContents(delta, 'silent')
-            } else if (typeof html === 'string') {
-              quill.setContents(html2delta(html), 'silent')
-            } else {
-              errMsg = 'contents is missing'
+            quill.insertText(range.index, '\n', 'user')
+            quill.insertEmbed(range.index + 1, 'divider', true, 'user')
+            quill.setSelection(range.index + 2, 0, 'silent')
+            break
+          case 'insertImage':
+            {
+              range = quill.getSelection(true)
+              const {
+                src = '',
+                alt = '',
+                width = '',
+                height = '',
+                extClass = '',
+                data = {},
+              } = options
+              const path = getRealPath(src)
+              quill.insertEmbed(range.index, 'image', path, 'user')
+              const local = /^(file|blob):/.test(path) ? path : false
+              quill.formatText(range.index, 1, 'data-local', local)
+              quill.formatText(range.index, 1, 'alt', alt)
+              quill.formatText(range.index, 1, 'width', width)
+              quill.formatText(range.index, 1, 'height', height)
+              quill.formatText(range.index, 1, 'class', extClass)
+              quill.formatText(
+                range.index,
+                1,
+                'data-custom',
+                Object.keys(data)
+                  .map((key) => `${key}=${data[key]}`)
+                  .join('&')
+              )
+              quill.setSelection(range.index + 1, 0, 'silent')
             }
-          }
-          break
-        case 'getContents':
-          res = getContents()
-          break
-        case 'clear':
-          quill.setText('')
-          break
-        case 'removeFormat':
-          {
-            range = quill.getSelection(true)
-            const parchment = Quill.import('parchment')
-            if (range.length) {
-              quill.removeFormat(range.index, range.length, 'user')
-            } else {
-              Object.keys(quill.getFormat(range)).forEach((key) => {
-                if (parchment.query(key, parchment.Scope.INLINE)) {
-                  quill.format(key, false)
-                }
-              })
+            break
+          case 'insertText':
+            {
+              range = quill.getSelection(true)
+              const { text = '' } = options
+              quill.insertText(range.index, text, 'user')
+              quill.setSelection(range.index + text.length, 0, 'silent')
             }
-          }
-          break
-        case 'undo':
-          quill.history.undo()
-          break
-        case 'redo':
-          quill.history.redo()
-          break
-        case 'blur':
-          quill.blur()
-          break
-        case 'getSelectionText':
-          range = quill.selection.savedRange
-          res = { text: '' }
-          if (range && range.length !== 0) {
-            res.text = quill.getText(range.index, range.length)
-          }
-          break
-        case 'scrollIntoView':
-          quill.scrollIntoView()
-          break
-        default:
-          break
+            break
+          case 'setContents':
+            {
+              const { delta, html } = options
+              if (typeof delta === 'object') {
+                quill.setContents(delta, 'silent')
+              } else if (typeof html === 'string') {
+                quill.setContents(html2delta(html), 'silent')
+              } else {
+                errMsg = 'contents is missing'
+              }
+            }
+            break
+          case 'getContents':
+            res = getContents()
+            break
+          case 'clear':
+            quill.setText('')
+            break
+          case 'removeFormat':
+            {
+              range = quill.getSelection(true)
+              const parchment = Quill.import('parchment')
+              if (range.length) {
+                quill.removeFormat(range.index, range.length, 'user')
+              } else {
+                Object.keys(quill.getFormat(range)).forEach((key) => {
+                  if (parchment.query(key, parchment.Scope.INLINE)) {
+                    quill.format(key, false)
+                  }
+                })
+              }
+            }
+            break
+          case 'undo':
+            quill.history.undo()
+            break
+          case 'redo':
+            quill.history.redo()
+            break
+          case 'blur':
+            quill.blur()
+            break
+          case 'getSelectionText':
+            range = quill.selection.savedRange
+            res = { text: '' }
+            if (range && range.length !== 0) {
+              res.text = quill.getText(range.index, range.length)
+            }
+            break
+          case 'scrollIntoView':
+            quill.scrollIntoView()
+            break
+          default:
+            break
+        }
+        updateStatus(range)
+      } else {
+        errMsg = 'not ready'
       }
-      updateStatus(range)
-    } else {
-      errMsg = 'not ready'
-    }
-    if (callbackId) {
-      UniViewJSBridge.publishHandler('onEditorMethodCallback', {
-        callbackId,
-        data: Object.assign({}, res, {
-          errMsg: `${type}:${errMsg ? 'fail ' + errMsg : 'ok'}`,
-        }),
-      })
-    }
-  }, id, true)
+      if (callbackId) {
+        UniViewJSBridge.publishHandler('onEditorMethodCallback', {
+          callbackId,
+          data: Object.assign({}, res, {
+            errMsg: `${type}:${errMsg ? 'fail ' + errMsg : 'ok'}`,
+          }),
+        })
+      }
+    },
+    id,
+    true
+  )
 }
 
 const props = /*#__PURE__*/ Object.assign({}, keyboardProps, {

packages/uni-components/src/helpers/useContextInfo.ts

-import {
-  onMounted,
-  getCurrentInstance,
-} from 'vue'
+import { onMounted, getCurrentInstance } from 'vue'
 import { useCurrentPageId } from '@dcloudio/uni-core'
 
 type ContextType = 'canvas' | 'map' | 'video' | 'editor'
 
 export interface ContextInfo {
-  id: string,
+  id: string
   type: ContextType
   page: number
 }
@@ -27,11 +24,11 @@ export function useContextInfo() {
     el.__uniContextInfo = {
       id,
       type,
-      page
+      page,
     }
   })
   return `${page}.${type}.${id}`
 }
 export function getContextInfo(el: HTMLElement | HTMLElementWithContextInfo) {
   return (el as HTMLElementWithContextInfo).__uniContextInfo
-}
\ No newline at end of file
+}

packages/uni-h5/dist/uni-h5.es.js

@@ -594,7 +594,7 @@ var safeAreaInsets = {
   onChange,
   offChange
 };
-var D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out = safeAreaInsets;
+var out = safeAreaInsets;
 const onEventPrevent = /* @__PURE__ */ withModifiers(() => {
 }, ["prevent"]);
 const onEventStop = /* @__PURE__ */ withModifiers(() => {
@@ -606,10 +606,10 @@ function getWindowOffset() {
   const left = parseInt(style.getPropertyValue("--window-left"));
   const right = parseInt(style.getPropertyValue("--window-right"));
   return {
-    top: top ? top + D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top : 0,
-    bottom: bottom ? bottom + D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.bottom : 0,
-    left: left ? left + D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.left : 0,
-    right: right ? right + D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.right : 0
+    top: top ? top + out.top : 0,
+    bottom: bottom ? bottom + out.bottom : 0,
+    left: left ? left + out.left : 0,
+    right: right ? right + out.right : 0
   };
 }
 function updateCssVar(cssVars) {
@@ -1292,7 +1292,7 @@ function normalizePageMeta(pageMeta) {
       let offset = rpx2px(refreshOptions.offset);
       const {type} = navigationBar;
       if (type !== "transparent" && type !== "none") {
-        offset += NAVBAR_HEIGHT + D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top;
+        offset += NAVBAR_HEIGHT + out.top;
       }
       refreshOptions.offset = offset;
       refreshOptions.height = rpx2px(refreshOptions.height);
@@ -14870,7 +14870,7 @@ const getSystemInfoSync = /* @__PURE__ */ defineSyncApi("getSystemInfoSync", ()
   const windowWidth = getWindowWidth(screenWidth);
   let windowHeight = window.innerHeight;
   const language = navigator.language;
-  const statusBarHeight = D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top;
+  const statusBarHeight = out.top;
   let osname;
   let osversion;
   let model;
@@ -14983,12 +14983,12 @@ const getSystemInfoSync = /* @__PURE__ */ defineSyncApi("getSystemInfoSync", ()
   const system = `${osname} ${osversion}`;
   const platform = osname.toLocaleLowerCase();
   const safeArea = {
-    left: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.left,
-    right: windowWidth - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.right,
-    top: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top,
-    bottom: windowHeight - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.bottom,
-    width: windowWidth - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.left - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.right,
-    height: windowHeight - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.bottom
+    left: out.left,
+    right: windowWidth - out.right,
+    top: out.top,
+    bottom: windowHeight - out.bottom,
+    width: windowWidth - out.left - out.right,
+    height: windowHeight - out.top - out.bottom
   };
   const {top: windowTop, bottom: windowBottom} = getWindowOffset();
   windowHeight -= windowTop;
@@ -15008,10 +15008,10 @@ const getSystemInfoSync = /* @__PURE__ */ defineSyncApi("getSystemInfoSync", ()
     model,
     safeArea,
     safeAreaInsets: {
-      top: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top,
-      right: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.right,
-      bottom: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.bottom,
-      left: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.left
+      top: out.top,
+      right: out.right,
+      bottom: out.bottom,
+      left: out.left
     }
   };
 });

packages/uni-h5/src/view/components/video/index.tsx

@@ -685,23 +685,27 @@ function useContext(
     exitFullScreen,
   }
   const id = useContextInfo()
-  useSubscribe((type: string, data: any) => {
-    let options
-    switch (type) {
-      case 'seek':
-        options = data.position
-        break
-      case 'sendDanmu':
-        options = data
-        break
-      case 'playbackRate':
-        options = data.rate
-        break
-    }
-    if (type in methods) {
-      methods[type as keyof typeof methods](options)
-    }
-  }, id, true)
+  useSubscribe(
+    (type: string, data: any) => {
+      let options
+      switch (type) {
+        case 'seek':
+          options = data.position
+          break
+        case 'sendDanmu':
+          options = data
+          break
+        case 'playbackRate':
+          options = data.rate
+          break
+      }
+      if (type in methods) {
+        methods[type as keyof typeof methods](options)
+      }
+    },
+    id,
+    true
+  )
 }
 
 const props = {

packages/vite-plugin-uni/src/configResolved/plugins/pagesJson.ts

@@ -160,11 +160,9 @@ function generateCssCode(
 }
 
 function generatePageDefineCode(pageOptions: UniApp.PagesJsonPageOptions) {
-  return `const ${normalizePageIdentifier(
-    pageOptions.path
-  )} = defineAsyncComponent(extend({loader:()=>import('./${
-    pageOptions.path
-  }?mpType=page')},AsyncComponentOptions))`
+  const pageIdent = normalizePageIdentifier(pageOptions.path)
+  return `const ${pageIdent}Loader = ()=>import('./${pageOptions.path}?mpType=page')
+const ${pageIdent} = defineAsyncComponent(extend({loader:${pageIdent}Loader},AsyncComponentOptions))`
 }
 
 function generatePagesDefineCode(
@@ -230,6 +228,7 @@ function generatePageRoute({ name, path, meta }: PageRouteOptions) {
   return `{
   path:'/${isEntry ? '' : path}',${alias}
   component:{render(){return renderPage(${name})}},
+  loader: ${normalizePageIdentifier(path)}Loader,
   meta: ${JSON.stringify(meta)}
 }`
 }