feat: remove preview script deps from url (#1405)

designer-demo/src/preview.js

@@ -25,7 +25,11 @@ initPreview({
       id: 'engine.root',
       metas: [HttpService, GenerateCodeService]
     },
-    config: { id: 'engine.config', theme: 'light' },
+    config: {
+      id: 'engine.config',
+      theme: 'light',
+      material: ['/mock/bundle.json'],
+    },
     toolbars: [Breadcrumb, Media, Lang]
   },
   lifeCycles: {

packages/common/js/preview.js

@@ -35,7 +35,7 @@ const getScriptAndStyleDeps = () => {
   const utilsDeps = useResource().getUtilsDeps()
 
   const scriptsDeps = [...scripts, ...utilsDeps].reduce((res, item) => {
-    res[item.package] = item.script
+    res[item.package] = res[item.package] || item.script
 
     return res
   }, {})
@@ -238,11 +238,10 @@ const getQueryParams = (params = {}, isHistory = false) => {
   const theme = getMetaApi(META_SERVICE.ThemeSwitch)?.getThemeState()?.theme
   const framework = getMergeMeta('engine.config')?.dslMode
   const platform = getMergeMeta('engine.config')?.platformId
-  const { scripts, styles } = getScriptAndStyleDeps()
 
   let query = `tenant=${tenant}&id=${paramsMap.get('id')}&theme=${theme}&framework=${framework}`
 
-  query += `&platform=${platform}&scripts=${JSON.stringify(scripts)}&styles=${JSON.stringify(styles)}`
+  query += `&platform=${platform}`
 
   if (pageId) {
     query += `&pageid=${pageId}`

packages/design-core/src/preview/src/preview/Preview.vue

@@ -60,7 +60,7 @@ export default {
 
     let cleanupCommunicationAction = null
     const onSchemaReceivedAction = async (data) => {
-      updateUrl(data.currentPage, { scripts: data.scripts, styles: data.styles })
+      updateUrl(data.currentPage)
       const isHistory = new URLSearchParams(location.search).get('history')
       const previewHotReload = getMergeMeta('engine.config').previewHotReload
       // 如果是历史预览，则不需要实时预览，接收到消息之后直接取消监听(需要监听到第一次消息接受页面信息)

packages/design-core/src/preview/src/preview/usePreviewData.ts

@@ -3,7 +3,7 @@ import { transformSync } from '@babel/core'
 import vueJsx from '@vue/babel-plugin-jsx'
 import { constants } from '@opentiny/tiny-engine-utils'
 import { getImportMap as getInitImportMap } from './importMap'
-import { getMetaApi } from '@opentiny/tiny-engine-meta-register'
+import { getMetaApi, getMergeMeta, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
 import { fetchMetaData, fetchAppSchema, fetchBlockSchema, getPageById, getBlockById, fetchPageHistory } from './http'
 import { PanelType } from '../constant'
 import generateMetaFiles, { processAppJsCode } from './generate'
@@ -27,41 +27,24 @@ export const previewState: {
   currentPage: IPage | null
   ancestors: IPage[]
   importMap: Record<string, string>
+  appData: Record<string, any> | null
 } = reactive({
   currentPage: null,
   ancestors: [],
-  importMap: {}
+  importMap: {},
+  appData: null
 })
 
-interface IDeps {
+const updateUrl = (params: IPage) => {
-  scripts: Record<string, string>
-  styles: string[]
-}
-
-const updateUrl = (params: IPage, deps: IDeps) => {
   const searchParams = new URLSearchParams(location.search)
   const pageId = searchParams.get('pageid')
   const blockId = searchParams.get('blockid')
-  const scripts = searchParams.get('scripts')
-  const styles = searchParams.get('styles')
-  let shouldUpdate = false
-
-  if (deps.scripts && JSON.stringify(deps.scripts) !== scripts) {
-    searchParams.set('scripts', JSON.stringify(deps.scripts))
-    shouldUpdate = true
-  }
-
-  if (deps.styles && JSON.stringify(deps.styles) !== styles) {
-    searchParams.set('styles', JSON.stringify(deps.styles))
-    shouldUpdate = true
-  }
 
   if (
-    !shouldUpdate &&
     // 如果当前页面是区块，且没有pageid，且blockid与当前区块id相同，则不更新url
-    ((params.page_content.componentName === COMPONENT_NAME.Block && !pageId && Number(blockId) === params.id) ||
+    (params.page_content.componentName === COMPONENT_NAME.Block && !pageId && Number(blockId) === params.id) ||
     // 如果当前页面是页面，且没有blockid，且pageid与当前页面id相同，则不更新url
-      (params.page_content.componentName === COMPONENT_NAME.Page && !blockId && Number(pageId) === params.id))
+    (params.page_content.componentName === COMPONENT_NAME.Page && !blockId && Number(pageId) === params.id)
   ) {
     return
   }
@@ -222,7 +205,82 @@ const getPageAncestryFiles = (
   return familyPages
 }
 
-const getBasicData = async (basicFilesPromise: Promise<any>) => {
+const getAppData = async () => {
+  if (previewState.appData) {
+    return previewState.appData
+  }
+
+  const searchParams = new URLSearchParams(location.search)
+  const appData = await fetchAppSchema(searchParams.get('id'))
+  previewState.appData = appData
+
+  return appData
+}
+
+const addScriptAndStyle = (scripts: Map<string, string>, styles: Set<string>, pkg: Record<string, string>) => {
+  if (pkg.package && pkg.script) {
+    scripts.set(pkg.package, pkg.script)
+  }
+
+  if (Array.isArray(pkg.css)) {
+    pkg.css.forEach((style: string) => {
+      if (style) {
+        styles.add(style)
+      }
+    })
+  } else if (pkg.css) {
+    styles.add(pkg.css)
+  }
+}
+
+const getMaterialDeps = async () => {
+  const bundleUrls = getMergeMeta('engine.config')?.material || []
+  const materials = await Promise.allSettled(
+    bundleUrls.map((url: any) => (typeof url === 'string' ? getMetaApi(META_SERVICE.Http).get(url) : url))
+  )
+
+  const scripts = new Map<string, string>()
+  const styles = new Set<string>()
+  const appData = await getAppData()
+
+  if (Array.isArray(appData.utils)) {
+    appData.utils
+      .filter((item: Record<string, any>) => item.type === 'npm')
+      .forEach((item: Record<string, any>) => {
+        addScriptAndStyle(scripts, styles, {
+          package: item.content.package,
+          script: item.content.cdnLink,
+          css: item.content.cdnLink
+        })
+      })
+  }
+
+  materials
+    .filter((item) => item.status === 'fulfilled' && item.value.materials)
+    .map((item: any) => item.value.materials)
+    .forEach((item) => {
+      const { packages, components } = item
+
+      if (Array.isArray(packages)) {
+        packages.forEach((pkg) => {
+          addScriptAndStyle(scripts, styles, pkg)
+        })
+      }
+
+      if (Array.isArray(components)) {
+        components.forEach((component) => {
+          addScriptAndStyle(scripts, styles, component.npm)
+        })
+      }
+    })
+
+  return {
+    scripts: Object.fromEntries(scripts),
+    styles: Array.from(styles)
+  }
+}
+
+const getBasicData = async (basicFilesPromise: Promise<any>, scripts: Record<string, string>) => {
   const searchParams = new URLSearchParams(location.search)
   const pageId = searchParams.get('pageid')
   const blockId = searchParams.get('blockid')
@@ -239,15 +297,14 @@ const getBasicData = async (basicFilesPromise: Promise<any>) => {
     metaDataParams.history = searchParams.get('history') || ''
   }
 
-  const promises = [
+  const promises = [getAppData(), fetchMetaData(metaDataParams), getImportMap(scripts), basicFilesPromise]
-    fetchAppSchema(searchParams.get('id')),
-    fetchMetaData(metaDataParams),
-    getImportMap(JSON.parse(searchParams.get('scripts') || '{}')),
-    basicFilesPromise
-  ]
   const [appData, metaData, importMapData] = await Promise.all(promises)
 
-  return { appData, metaData, importMapData }
+  return {
+    appData,
+    metaData,
+    importMapData
+  }
 }
 
 // [@vue/repl] `Only lang="ts" is supported for <script> blocks.`
@@ -308,8 +365,13 @@ export const usePreviewData = ({ setFiles, store }: IUsePreviewData) => {
   }
 
   // 根据新的参数更新预览
-  const updatePreview = async (params: { currentPage: IPage; ancestors: IPage[] }) => {
+  const updatePreview = async (params: {
-    const { appData, metaData, importMapData } = await getBasicData(basicFiles)
+    currentPage: IPage
+    ancestors: IPage[]
+    scripts: Record<string, string>
+    styles: string[]
+  }) => {
+    const { appData, metaData, importMapData } = await getBasicData(basicFiles, params.scripts)
 
     previewState.currentPage = params.currentPage
     previewState.ancestors = params.ancestors
@@ -351,8 +413,7 @@ export const usePreviewData = ({ setFiles, store }: IUsePreviewData) => {
     ]
 
     const newFiles = store.getFiles()
-    const searchParams = new URLSearchParams(location.search)
+    const appJsCode = processAppJsCode(newFiles['app.js'], params.styles)
-    const appJsCode = processAppJsCode(newFiles['app.js'], JSON.parse(searchParams.get('styles') || '[]'))
 
     newFiles['app.js'] = appJsCode
 
@@ -369,8 +430,10 @@ export const usePreviewData = ({ setFiles, store }: IUsePreviewData) => {
     previewState.currentPage = currentPage
     previewState.ancestors = ancestors
 
+    const { scripts, styles } = await getMaterialDeps()
+
     if (currentPage) {
-      updatePreview({ currentPage, ancestors })
+      updatePreview({ currentPage, ancestors, scripts, styles })
     }
   }