@lcap/nasl 3.2.0-beta.4 → 3.3.0-alpha

package/src/generator/genBundleFiles.ts

@@ -1,258 +1,267 @@
+import * as JSON5 from 'json5';
+import * as UglifyJS from 'uglify-js-export';
 import { genBreakpoints, clearBreakpoints } from '../breakpoint';
 
 import { App, Module, View, Frontend, Connector } from '../concepts';
 import * as utils from '../utils';
 import { genHash, RawOptions } from '.';
 import { compileComponent } from './compileComponent';
-import * as JSON5 from 'json5';
-
-import * as UglifyJS from 'uglify-js-export';
 
 import { genMetaData } from './genMetaData';
 import { integrateMicroApp } from './microApp';
+
 export interface Route {
-    path?: string;
-    component?: RawOptions; // ExtendedVue<Vue, unknown, unknown, unknown, Record<never, any>>;
-    children?: Array<Route>;
-    redirect?: string;
+  path?: string;
+  component?: RawOptions; // ExtendedVue<Vue, unknown, unknown, unknown, Record<never, any>>;
+  children?: Array<Route>;
+  redirect?: string;
 }
 
 interface Config {
-    tenant: string;
-    env: string;
-    debug: boolean;
-    nuimsDomain: string;
-    STATIC_URL: string;
-    USER_STATIC_URL: string;
-    extendedConfig: string;
-    lowcodeDomain: string;
-    envLcpDomain: any,
-    envNuimsDomain: any,
-    tenantType: any,
-    tenantLevel: any,
-    appid: string;
-    devDnsAddr: string;
-    miniEnable: boolean
+  tenant: string;
+  env: string;
+  debug: boolean;
+  nuimsDomain: string;
+  STATIC_URL: string;
+  USER_STATIC_URL: string;
+  extendedConfig: string;
+  lowcodeDomain: string;
+  envLcpDomain: any;
+  envNuimsDomain: any;
+  tenantType: any;
+  tenantLevel: any;
+  appid: string;
+  devDnsAddr: string;
+  miniEnable: boolean;
 }
 
-export function genBundleFiles(app: App, frontend: Frontend,
-    config: Config) {
-    const fnNuimsDomain = config?.envNuimsDomain?.[config?.env] || config?.nuimsDomain;
-    const fnLowcodeDomain = config?.envLcpDomain?.[config?.env]?.lcpDomain || config?.lowcodeDomain;
-    const modules: (Module | Connector)[] = [];
-    const views: View[] = [];
-    app.dependencies && modules.push(...app.dependencies);
-    app.interfaceDependencies && modules.push(...app.interfaceDependencies);
-    frontend.views && views.push(...frontend.views);
-    modules.forEach((module: Module) => {
-        module.views && views.push(...module.views);
-    });
-
-    const componentMap: {
-        [name: string]: RawOptions;
-    } = {};
-
-    config?.debug && genBreakpoints(app);
-
-    utils.traverse((current) => {
-        if (current.node.toVueOptions)
-            componentMap[current.node.id] = current.node.toVueOptions();
-    }, {
-        node: {
-            children: views,
-        } as View,
-    });
-
-    config?.debug && clearBreakpoints(app);
-
-    /**
-     * vue.config.js page options
-     */
-    const routes: Route[] = [];
-    // 开启了权限的页面
-    const authResourceViews: View[] = [];
-    const baseResourcePaths: string[] = [];
-    const rootViewData: any[] = [];
-    let defaultRoute = '';
-
-    // 遍历页面
-    const traverseViews = (view: View, isParentViewAuth?: boolean) => {
-        const parentNode: any = view.parentNode || {};
-        const isRootView = parentNode.concept !== 'View';
-        const viewName = view.name;
-        // 页面是否需要权限，如果父页面需要权限，子页面也一定需要
-        const isViewAuth = isParentViewAuth || view.auth;
-
-        // 路由地址
-        let routePath = viewName;
-        if (isRootView) {
-            rootViewData.push({ name: viewName, title: view.title || viewName, isIndex: view.isIndex });
-            routePath = `${frontend.prefixPath}/${viewName}`;
-            if (!isViewAuth) {
-                if (viewName === 'notFound') {
-                    defaultRoute = routePath;
-                }
-                if (view.isIndex) {
-                    if (!defaultRoute) {
-                        defaultRoute = routePath;
-                    }
-                }
-            }
-        }
-
-        const route: Route = {
-            path: routePath,
-            component: compileComponent(componentMap[view.id]),
-            children: [],
-        };
-        const viewChildren = view.children;
-        if (Array.isArray(viewChildren) && viewChildren.length) {
-            for (let i = 0; i < viewChildren.length; i++) {
-                const subView = viewChildren[i];
-                const { route: subViewRoute } = traverseViews(subView, isViewAuth);
-                route.children.push(subViewRoute);
-                if (subView.isIndex) {
-                    route.children.push({
-                        path: '',
-                        redirect: `'${subView.name}'`,
-                    });
-                }
-            }
-        }
-        const viewPath = view.path;
-        if (isViewAuth) {
-            authResourceViews.push(view);
+export function genBundleFiles(app: App, frontend: Frontend, config: Config) {
+  const fnNuimsDomain = config?.envNuimsDomain?.[config?.env] || config?.nuimsDomain;
+  const fnLowcodeDomain = config?.envLcpDomain?.[config?.env]?.lcpDomain || config?.lowcodeDomain;
+  const modules: (Module | Connector)[] = [];
+  const views: View[] = [];
+  app.dependencies && modules.push(...app.dependencies);
+  app.interfaceDependencies && modules.push(...app.interfaceDependencies);
+  frontend.views && views.push(...frontend.views);
+  modules.forEach((module: Module) => {
+    module.views && views.push(...module.views);
+  });
+
+  const componentMap: {
+    [name: string]: RawOptions;
+  } = {};
+
+  config?.debug && genBreakpoints(app);
+
+  utils.traverse(
+    (current) => {
+      if (current.node.toVueOptions) componentMap[current.node.id] = current.node.toVueOptions();
+    },
+    {
+      node: {
+        children: views,
+      } as View,
+    }
+  );
+
+  config?.debug && clearBreakpoints(app);
+
+  /**
+   * vue.config.js page options
+   */
+  const routes: Route[] = [];
+  // 开启了权限的页面
+  const authResourceViews: View[] = [];
+  const baseResourcePaths: string[] = [];
+  const rootViewData: any[] = [];
+  let defaultRoute = '';
+
+  // 遍历页面
+  const traverseViews = (view: View, isParentViewAuth?: boolean) => {
+    const parentNode: any = view.parentNode || {};
+    const isRootView = parentNode.concept !== 'View';
+    const viewName = view.name;
+    // 页面是否需要权限，如果父页面需要权限，子页面也一定需要
+    const isViewAuth = isParentViewAuth || view.auth;
+
+    // 路由地址
+    let routePath = viewName;
+    if (isRootView) {
+      rootViewData.push({ name: viewName, title: view.title || viewName, isIndex: view.isIndex });
+      routePath = `${frontend.prefixPath}/${viewName}`;
+      if (!isViewAuth) {
+        if (viewName === 'notFound') {
+          defaultRoute = routePath;
         }
-        if (!isViewAuth) {
-            baseResourcePaths.push(viewPath);
+        if (view.isIndex) {
+          if (!defaultRoute) {
+            defaultRoute = routePath;
+          }
         }
-        return {
-            route,
-            isViewAuth,
-        };
-    };
+      }
+    }
 
-    // 页面
-    views.forEach((view) => {
-        const { route } = traverseViews(view);
-        routes.push(route);
-        if (view.isIndex) {
-            routes.push({
-                path: frontend.prefixPath ? frontend.prefixPath : '/',
-                redirect: `'${frontend.prefixPath}/${view.name}'`,
-            });
+    const route: Route = {
+      path: routePath,
+      component: compileComponent(componentMap[view.id]),
+      children: [],
+    };
+    const viewChildren = view.children;
+    if (Array.isArray(viewChildren) && viewChildren.length) {
+      for (let i = 0; i < viewChildren.length; i++) {
+        const subView = viewChildren[i];
+        const { route: subViewRoute } = traverseViews(subView, isViewAuth);
+        route.children.push(subViewRoute);
+        if (subView.isIndex) {
+          route.children.push({
+            path: '',
+            redirect: `'${subView.name}'`,
+          });
         }
-    });
-    if (frontend.prefixPath) {
-        routes.push({
-            path: '/',
-            redirect: `'${frontend.prefixPath}'`,
-        });
+      }
     }
-    const authResourcePathMap: any = {};
-    // 默认跳转子页面开启权限的情况，需要把父页面也都加入权限校验列表
-    if (Array.isArray(authResourceViews)) {
-        authResourceViews.forEach((authResourceView) => {
-            if (authResourceView) {
-                authResourcePathMap[authResourceView.path] = true;
-                let viewNode: any = authResourceView;
-                while (viewNode.concept === 'View' && viewNode.isIndex) {
-                    const parentViewNode = viewNode.parentNode;
-                    if (parentViewNode.concept === 'View') {
-                        authResourcePathMap[parentViewNode.path] = true;
-                    } else { // viewNode是根页面
-                        if (frontend.prefixPath) {
-                            authResourcePathMap[frontend.prefixPath] = true;
-                        }
-                        authResourcePathMap['/'] = true;
-                    }
-                    viewNode = parentViewNode;
-                }
-            }
-        });
+    const viewPath = view.path;
+    if (isViewAuth) {
+      authResourceViews.push(view);
     }
-    const authResourcePaths: string[] = Object.keys(authResourcePathMap);
-    function routeToString(route: Route): string {
-        let content = `{
+    if (!isViewAuth) {
+      baseResourcePaths.push(viewPath);
+    }
+    return {
+      route,
+      isViewAuth,
+    };
+  };
+
+  // 页面
+  views.forEach((view) => {
+    const { route } = traverseViews(view);
+    routes.push(route);
+    if (view.isIndex) {
+      routes.push({
+        path: frontend.prefixPath ? frontend.prefixPath : '/',
+        redirect: `'${frontend.prefixPath}/${view.name}'`,
+      });
+    }
+  });
+  if (frontend.prefixPath) {
+    routes.push({
+      path: '/',
+      redirect: `'${frontend.prefixPath}'`,
+    });
+  }
+  const authResourcePathMap: any = {};
+  // 默认跳转子页面开启权限的情况，需要把父页面也都加入权限校验列表
+  if (Array.isArray(authResourceViews)) {
+    authResourceViews.forEach((authResourceView) => {
+      if (authResourceView) {
+        authResourcePathMap[authResourceView.path] = true;
+        let viewNode: any = authResourceView;
+        while (viewNode.concept === 'View' && viewNode.isIndex) {
+          const parentViewNode = viewNode.parentNode;
+          if (parentViewNode.concept === 'View') {
+            authResourcePathMap[parentViewNode.path] = true;
+          } else {
+            // viewNode是根页面
+            if (frontend.prefixPath) {
+              authResourcePathMap[frontend.prefixPath] = true;
+            }
+            authResourcePathMap['/'] = true;
+          }
+          viewNode = parentViewNode;
+        }
+      }
+    });
+  }
+  const authResourcePaths: string[] = Object.keys(authResourcePathMap);
+  function routeToString(route: Route): string {
+    let content = `{
             path: '${route.path}',\n`;
-        if (route?.component?.script) {
-            const template = route.component.template;
-            content += `component: (function(){
-                var componentOptions = ${route.component.script ? '(function(){\n' + route.component.script.trim().replace(/export default |module\.exports +=/, 'return ') + '\n})()' : '{}'};
+    if (route?.component?.script) {
+      const { template } = route.component;
+      content += `component: (function(){
+                var componentOptions = ${
+                  route.component.script
+                    ? `(function(){\n${route.component.script.trim().replace(/export default |module\.exports +=/, 'return ')}\n})()`
+                    : '{}'
+                };
                 Object.assign(componentOptions, {
-                    template: \`${template.replace(/[`$]/g, (m) => '\\' + m)}\`,
+                    template: \`${template.replace(/[`$]/g, (m) => `\\${m}`)}\`,
                 });
                 return componentOptions;
             })(),\n`;
-        }
-        if (route?.children?.length) {
-            content += `children: [
+    }
+    if (route?.children?.length) {
+      content += `children: [
                 ${route.children.map(routeToString).join(',\n')}
             ],\n`;
-        }
-        if (route?.redirect) {
-            content += `redirect: ${route?.redirect},\n`;
-        }
-        content += '}';
-        return content;
     }
-
-    let routesStr = '[';
-    routes.forEach((route) => {
-        routesStr += `${routeToString(route)},\n`;
-    });
-    if (defaultRoute) {
-        routesStr += `{
+    if (route?.redirect) {
+      content += `redirect: ${route?.redirect},\n`;
+    }
+    content += '}';
+    return content;
+  }
+
+  let routesStr = '[';
+  routes.forEach((route) => {
+    routesStr += `${routeToString(route)},\n`;
+  });
+  if (defaultRoute) {
+    routesStr += `{
             path: '*',
             redirect: '${defaultRoute}',
         }\n`;
-    }
-    routesStr += ']';
-
-    const platformConfig = JSON5.stringify({
-        appConfig: {
-            id: app.id,
-            project: app.name,
-            domainName: app.name,
-            nuimsDomain: fnNuimsDomain,
-            envNuimsDomain: config.envNuimsDomain,
-            tenantType: config.tenantType,
-            tenantLevel: config.tenantLevel,
-            extendedConfig: config.extendedConfig,
-            envConfig: {
-                lowcodeDomain: fnLowcodeDomain,
-            },
-            tenant: config.tenant,
-            documentTitle: frontend.documentTitle,
-            rootViewData,
-            basePath: frontend.prefixPath,
-            frontendName: frontend.name,
-            // 加上统一前缀
-            sysPrefixPath: app.sysPrefixPath,
-            // 应用时区
-            appTimeZone: app?.appTimeZone,
-
+  }
+  routesStr += ']';
+
+  const platformConfig = JSON5.stringify(
+    {
+      appConfig: {
+        id: app.id,
+        project: app.name,
+        domainName: app.name,
+        nuimsDomain: fnNuimsDomain,
+        envNuimsDomain: config.envNuimsDomain,
+        tenantType: config.tenantType,
+        tenantLevel: config.tenantLevel,
+        extendedConfig: config.extendedConfig,
+        envConfig: {
+          lowcodeDomain: fnLowcodeDomain,
         },
-        dnsAddr: app.dnsAddr,
-        devDnsAddr: config.devDnsAddr,
         tenant: config.tenant,
-        env: config.env,
-        hasUserCenter: app.hasUserCenter,
-        hasAuth: app.hasAuth,
-        authResourcePaths,
-        baseResourcePaths,
-        miniEnable: config.miniEnable,
-    }, null, 4);
-
-    const metaData = genMetaData(app, frontend);
-    const metaDataStr = JSON5.stringify(metaData);
-
-    const assetsInfo = app.genAllAssetsInfo(config.STATIC_URL, frontend.type);
-    const customNames = JSON5.stringify(assetsInfo.custom.names);
-    let content = `(function(){
+        documentTitle: frontend.documentTitle,
+        rootViewData,
+        basePath: frontend.prefixPath,
+        frontendName: frontend.name,
+        // 加上统一前缀
+        sysPrefixPath: app.sysPrefixPath,
+        // 应用时区
+        appTimeZone: app?.appTimeZone,
+      },
+      dnsAddr: app.dnsAddr,
+      devDnsAddr: config.devDnsAddr,
+      tenant: config.tenant,
+      env: config.env,
+      hasUserCenter: app.hasUserCenter,
+      hasAuth: app.hasAuth,
+      authResourcePaths,
+      baseResourcePaths,
+      miniEnable: config.miniEnable,
+    },
+    null,
+    4
+  );
+
+  const metaData = genMetaData(app, frontend);
+  const metaDataStr = JSON5.stringify(metaData);
+
+  const assetsInfo = app.genAllAssetsInfo(config.STATIC_URL, frontend.type);
+  const customNames = JSON5.stringify(assetsInfo.custom.names);
+  let content = `(function(){
         `;
-    if(frontend.globalScaleEnabled) {
-        content += `{
+  if (frontend.globalScaleEnabled) {
+    content += `{
             // 如果是顶层页面，才使用iframe缩放，否则会死循环
             if(window.parent === window){
                 // 顶层页面里有个iframe，用来缩放页面
@@ -269,6 +278,10 @@ export function genBundleFiles(app: App, frontend: Frontend,
                     // iframe 的宽高需要缩放回去，使其等于顶层宽高
                     iframe.style.width = baseWidth + 'px';
                     iframe.style.height = 100 / scale + 'vh';
+                    // 缩放后，iframe 会有多余的空白，需要去掉
+                    const margin = scale < 1 ? (scale - 1)/scale * 100 + '%' : '0px';
+                    iframe.style.marginRight = margin;
+                    iframe.style.marginBottom = margin;
                 }
                 // 监听窗口变化
                 window.addEventListener('resize', scalePage);
@@ -281,29 +294,29 @@ export function genBundleFiles(app: App, frontend: Frontend,
                 return;
             }
         }`;
-    }
+  }
 
-    const themeCSS = frontend.genThemeCSS();
-    if (themeCSS) {
-        content += `{
+  const themeCSS = frontend.genThemeCSS();
+  if (themeCSS) {
+    content += `{
                             const el = document.createElement('style');
                             el.id = 'theme';
                             el.innerHTML = \`${themeCSS}\`;
                             document.head.appendChild(el);
                         }
         `;
-    }
+  }
 
-    if (frontend.documentIcon) {
-        content += `{
+  if (frontend.documentIcon) {
+    content += `{
             const link = document.createElement('link');
             link.rel = 'shortcut icon';
             link.href = \`${frontend.documentIcon}\`;
             document.head.appendChild(link);
         }`;
-    }
+  }
 
-    content += `
+  content += `
     var customNames = ${customNames};
     for(var i=0;i<customNames.length;i++){
         var name = window.kebab2Camel(customNames[i]);
@@ -312,7 +325,7 @@ export function genBundleFiles(app: App, frontend: Frontend,
         }
     }`;
 
-    content += `
+  content += `
         var platformConfig = ${platformConfig};
         var metaData = ${metaDataStr};
         var routes = ${routesStr};
@@ -326,27 +339,27 @@ export function genBundleFiles(app: App, frontend: Frontend,
                     push.apply(this, [a, b, console.warn]);
                 };
             } catch (e) { console.error(e) }
-            
+
             return window.appVM = appVM;
         };
         window.createLcapApp();
     })();`;
 
-    if (config.env === 'dev') {
-        // 加载资源js
-        // const domain = fnLowcodeDomain.slice(fnLowcodeDomain.indexOf('.') + 1);
-        // const targetUrl = `${typeof location !== 'undefined' ? location.origin : `http://${config.tenant}.${fnLowcodeDomain}`}/empty?url=${domain}&appid=${config.appid}`;
-        // if(!document.querySelector("iframe[name='iframeEmpty']")){
-        // var el = document.createElement('iframe');
-        // el.setAttribute('src', "${targetUrl}");
-        // el.setAttribute('name', 'iframeEmpty');
-        // el.setAttribute('width', 0);
-        // el.setAttribute('height', 0);
-        // el.style.borderWidth = 0
-        // el.style.display= "block"
-        // document.getElementsByTagName('body')[0].appendChild(el);
-        // document.domain = '${domain}'
-        const str = `
+  if (config.env === 'dev') {
+    // 加载资源js
+    // const domain = fnLowcodeDomain.slice(fnLowcodeDomain.indexOf('.') + 1);
+    // const targetUrl = `${typeof location !== 'undefined' ? location.origin : `http://${config.tenant}.${fnLowcodeDomain}`}/empty?url=${domain}&appid=${config.appid}`;
+    // if(!document.querySelector("iframe[name='iframeEmpty']")){
+    // var el = document.createElement('iframe');
+    // el.setAttribute('src', "${targetUrl}");
+    // el.setAttribute('name', 'iframeEmpty');
+    // el.setAttribute('width', 0);
+    // el.setAttribute('height', 0);
+    // el.style.borderWidth = 0
+    // el.style.display= "block"
+    // document.getElementsByTagName('body')[0].appendChild(el);
+    // document.domain = '${domain}'
+    const str = `
             var _div = document.createElement('div');
             _div.classList = "div-load"
             _div.innerHTML = "<div class='loading-container'></div><div>正在更新最新发布内容...</div>"
@@ -397,7 +410,6 @@ export function genBundleFiles(app: App, frontend: Frontend,
            }\`
             document.getElementsByTagName('body')[0].appendChild(style);
             window.addEventListener('message', function (e) {
-                console.log('message:',e)
                 if(e.data ==="release-start"){
                     showLoading()
                 }
@@ -407,22 +419,22 @@ export function genBundleFiles(app: App, frontend: Frontend,
                 }
             })
          `;
-        content += str;
-    }
-    const baseUrl = `${config.USER_STATIC_URL}/${config.tenant}/${app.id}/${config.env}`;
-    let bundleMinPath = `${baseUrl}/bundle.${genHash(content)}.min.js`;
-    if (frontend.basePath) {
-        bundleMinPath = `${baseUrl}${frontend.basePath}/bundle.${genHash(content)}.min.js`;
-    }
-    const otherJsList = (frontend as any)?.appletsConfig?.enable ? ['//res.wx.qq.com/open/js/jweixin-1.3.2.js'] : [];
-
-    const microAppIntegration = integrateMicroApp(frontend);
-
-    if (config?.debug) {
-        otherJsList.push(`${config.STATIC_URL}/packages/@lcap/breakpoint-client@1.0.0/dist/index.js?time=${Date.now()}`);
-    }
-
-    const assetsContent = `(function() {
+    content += str;
+  }
+  const baseUrl = `${config.USER_STATIC_URL}/${config.tenant}/${app.id}/${config.env}`;
+  let bundleMinPath = `${baseUrl}/bundle.${genHash(content)}.min.js`;
+  if (frontend.basePath) {
+    bundleMinPath = `${baseUrl}${frontend.basePath}/bundle.${genHash(content)}.min.js`;
+  }
+  const otherJsList = (frontend as any)?.appletsConfig?.enable ? ['//res.wx.qq.com/open/js/jweixin-1.3.2.js'] : [];
+
+  const microAppIntegration = integrateMicroApp(frontend);
+
+  if (config?.debug) {
+    otherJsList.push(`${config.STATIC_URL}/packages/@lcap/breakpoint-client@1.0.0/dist/index.js?time=${Date.now()}`);
+  }
+
+  const assetsContent = `(function() {
     const loadAssets = () => {
         LazyLoad.js(${JSON5.stringify(assetsInfo.basic.js.concat(assetsInfo.custom.js, otherJsList).concat([bundleMinPath]))});
         LazyLoad.css(${JSON5.stringify(assetsInfo.basic.css.concat(assetsInfo.custom.css))});
@@ -431,34 +443,31 @@ export function genBundleFiles(app: App, frontend: Frontend,
     ${microAppIntegration || 'loadAssets();'}
 })()
 `;
-    let minifyObj = { code: '' };
-    // 开发环境加上sourceMap
-    if (config.env === 'dev') {
-        minifyObj.code = content;
-    } else {
-        minifyObj = UglifyJS.minify(content, {
-            compress: {
-                // @ts-ignore
-                awaits: false,
-            },
-        });
-    }
-    const outputs = [
-        {
-            name: bundleMinPath,
-            content: minifyObj.code,
-        },
-        {
-            name: frontend.basePath ? `${baseUrl}${frontend.basePath}/client.js` : `${baseUrl}/client.js`,
-            content: assetsContent,
-        },
-    ];
-    return outputs;
+  let minifyObj = { code: '' };
+  // 开发环境加上sourceMap
+  if (config.env === 'dev') {
+    minifyObj.code = content;
+  } else {
+    minifyObj = UglifyJS.minify(content, {
+      compress: {
+        // @ts-ignore
+        awaits: false,
+      },
+    });
+  }
+  const outputs = [
+    {
+      name: bundleMinPath,
+      content: minifyObj.code,
+    },
+    {
+      name: frontend.basePath ? `${baseUrl}${frontend.basePath}/client.js` : `${baseUrl}/client.js`,
+      content: assetsContent,
+    },
+  ];
+  return outputs;
 }
 
-export function genFrontendBundleFiles(app: App, frontends: Array<Frontend>,
-    config: Config) {
-    let outputs:any = [];
-    outputs = outputs.concat(...frontends.map((frontend) => genBundleFiles(app, frontend, config)));
-    return outputs;
+export function genFrontendBundleFiles(app: App, frontends: Array<Frontend>, config: Config) {
+  return frontends.map((frontend) => genBundleFiles(app, frontend, config)).reduce((ans, item) => (ans.push(...item), ans), []);
 }