@cloudbase/framework-plugin-low-code 0.6.31 → 0.6.34

package/template/generator/handlers/RenderWrapper.jsx

@@ -1,145 +0,0 @@
-import * as React from 'react';
-import { useRef } from 'react';
-import { CompRenderer } from './NodeRenderer';
-import lodashSet from 'lodash.set';
-import cloneDeep from 'lodash.clonedeep';
-import { isScopeSlot } from '../utils/common';
-
-function getComponentChildren(component) {
-  const { properties } = component;
-  if (!properties) {
-    return [];
-  }
-  return Object.values(properties).sort(
-    (a, b) => (a['x-index'] || 0) - (b['x-index'] || 0)
-  );
-}
-
-export function AppRender(props) {
-  const {
-    className,
-    virtualFields,
-    componentSchema,
-    renderSlot,
-    rootNode = true,
-    codeContext,
-    scopeContext = {},
-    context = {},
-    updateContext,
-  } = props;
-  const {
-    'x-props': xProps,
-    properties = {},
-    genericComp = {},
-  } = componentSchema;
-  // 判断是否为 slot
-  const isSlot = !xProps;
-  if (isSlot && !(renderSlot || rootNode)) {
-    return null;
-  }
-
-  const preClassName = useRef();
-
-  // wrapperClass
-  const containerEl = Object.values(properties)[0];
-  if (containerEl && containerEl['x-props'] && className) {
-    let { classNameList = [] } = containerEl['x-props'];
-
-    // 先替换掉先前计算出来的className部分
-    if (preClassName.current) {
-      if (preClassName.current !== className) {
-        classNameList = classNameList.filter(
-          (clsName) => clsName !== preClassName.current
-        );
-        preClassName.current = className;
-      }
-    } else {
-      preClassName.current = className;
-    }
-
-    containerEl['x-props'].classNameList = [className, ...classNameList];
-  }
-
-  if (xProps && xProps.sourceKey) {
-    const { sourceKey } = xProps;
-    const Field = virtualFields[sourceKey];
-    if (!Field) {
-      return (
-        <div style={{ color: 'red' }}>
-          组件<em>{sourceKey}</em>未找到
-        </div>
-      );
-    }
-  }
-  const children = getComponentChildren(componentSchema);
-  const slots = {};
-  // eslint-disable-next-line guard-for-in
-  for (const key in properties) {
-    const child = properties[key];
-    if (!child['x-props'] && child.properties) {
-      slots[key] = isScopeSlot(componentSchema, key) ? (
-        (props) => {
-          let clonedScopeContext = cloneDeep(scopeContext);
-          lodashSet(
-            clonedScopeContext,
-            `${componentSchema.key}.${child.key}`,
-            props
-          );
-          return (
-            <AppRender
-              key={child.key}
-              componentSchema={child}
-              renderSlot
-              virtualFields={virtualFields}
-              codeContext={codeContext}
-              scopeContext={clonedScopeContext}
-              context={context}
-              updateContext={updateContext}
-            />
-          );
-        }
-      ) : (
-        <AppRender
-          key={child.key}
-          componentSchema={child}
-          renderSlot
-          virtualFields={virtualFields}
-          codeContext={codeContext}
-          scopeContext={scopeContext}
-          context={context}
-          updateContext={updateContext}
-        />
-      );
-    }
-  }
-
-  return (
-    <CompRenderer
-      id={componentSchema.key}
-      xProps={xProps}
-      emitEvents={componentSchema.emitEvents || []}
-      componentSchema={componentSchema}
-      virtualFields={virtualFields}
-      slots={slots}
-      codeContext={codeContext}
-      scopeContext={scopeContext}
-      genericComp={genericComp}
-      context={context}
-      updateContext={updateContext}
-    >
-      {children.map((comp) => (
-        <AppRender
-          key={comp.key}
-          componentSchema={comp}
-          rootNode={false}
-          renderSlot={false}
-          virtualFields={virtualFields}
-          codeContext={codeContext}
-          scopeContext={scopeContext}
-          context={context}
-          updateContext={updateContext}
-        />
-      ))}
-    </CompRenderer>
-  );
-}

package/template/generator/index.jsx

@@ -1,116 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-import { setConfig } from '@cloudbase/weda-cloud-sdk/dist/h5'
-import App from './router'
-<% if(!isSandbox){ %>
-import './utils/monitor-jssdk.min'
-<% } %>
-import './lowcode/style.css'
-// 引入数据源管理器并进行初始化
-import './datasources'
-import './utils/initGlobalVar'
-// import i18nData from './i18n/index.js'
-import { initAppLifeCycle } from './utils/lifecycle'
-<% subAppDataList.forEach(subApp => { %>
-  import './packages/<%= subApp.rootPath %>/lowcode/style.css'
-<% }) %>
-
-<% if(!isSandbox){ %>
-import attachFastClick from 'fastclick'
-attachFastClick && attachFastClick.attach && attachFastClick.attach(document.body)
-<% } %>
-import { app } from './app/global-api'
-import { createStateDataSourceVar, generateParamsParser, EXTRA_API } from './datasources'
-
-
-// 初始化应用生命周期
-initAppLifeCycle(app,{
-  beforeCustomLaunch: (query)=>{
-    EXTRA_API.setParams('$global', query || {})
-    createStateDataSourceVar('$global',generateParamsParser({app}))
-  }
-})
-
-<% if(!isSandbox && isBuildApp){ %>
-// app 中注册配置页面以及app的全局配置miniprogram.config，h5里分app以及web页分别处理，使用process.env.isApp 区分判断
-import { initWebConfig } from './utils/lifecycle'
-import AppConfig from '../webpack/miniprogram.config'
-initWebConfig(app, AppConfig);
-<% } %>
-// 设置数据源请求的 loading 及 toast 处理
-setConfig({
-  beforeDSRequest: (cfg) => {
-    if (!cfg.options || !cfg.options.showLoading) return
-    app.showLoading()
-  },
-  afterDSRequest: (cfg, error, result) => {
-    if (!cfg.options) return
-    if (cfg.options.showLoading) app.hideLoading()
-    if (!cfg.options.showToast) return
-    const isSuccess = !error && result && !result.code
-    app.showToast({icon: isSuccess ? 'success' : 'error'})
-  }
-})
-
-
-<% if(!isSandbox){ %>
-if (yyptReport && typeof yyptReport.pgvMain == 'function') {
-  // report_url,appKey必填
-  yyptReport.pgvMain({
-    appKey: '<%= yyptAppKey %>', // 填入你申请的运营平台的应用key(必填)
-    report_url: '<%= reportUrl %><%= yyptAppKey %>', // 上报url（把后端上报接口需要先挂网关，该url填写网关地址）
-    autoReportPv: true, // 单页应用监听页面路径改变自动上报Pv，默认为false
-    stopReport: <%= stopReport %>, // 停止上报
-    // 其他参数说明
-    // customUserPrams: null, // 用户自定义的额外属性--对于小马的用户属性，比如用户的部门编码(customUserPrams: { deptno: 1100 })需要在小马系统事先配置好
-    //userKey: "user_id", // cookie里面用户的唯一标示
-    //autoWatchClick: true, // 默认开启自动监听hottag
-    //isWxEnv: false// 是否微信环境，微信环境会通过wx.getNetworkType获取网络环境
-    // 通过传入函数，可以让业务方写代码传入要上报的属性，比如返回自定义属性，这里主要也是自定义属性，让sdk获取并且进行上报，减少重复编码
-    //getCusParams: function () {
-    //  return {kv:{money:1}}; //kv:Key-Value,自定义事件Key-Value参数对	map	JSON格式，在报表页面的事件参数分析页和页面参数分析页中可以看到上报的kv值
-    //},
-  })
-}
-<% } %>
-
-;(function() {
-  function flex() {
-    try {
-      let htmlDom = document.documentElement
-      let width = window.innerWidth || htmlDom.clientWidth
-      let fontSize = width / (375 / 14)
-      if (
-        !navigator.userAgent.match(
-          /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i
-        ) &&
-        fontSize > 14
-      ) {
-        htmlDom.style.fontSize = `14px`
-      } else {
-        htmlDom.style.fontSize = fontSize + `px`
-      }
-    } catch (e) {
-      console.error(e)
-    }
-  }
-
-  flex()
-  window.addEventListener('resize', flex)
-})()
-ReactDOM.render(<App/>, document.getElementById('root'))
-
-<% if(!isSandbox){ %>
-// 使用HMR
-if(process.env.compileTool === 'vite') {
-  if (import.meta.hot) {
-    import.meta.hot.accept()
-  }
-} else {
-  if (process.env.NODE_ENV !== 'production') {
-    if (module.hot) {
-      module.hot.accept()
-    }
-  }
-}
-<% } %>

package/template/generator/index.less

@@ -1,120 +0,0 @@
-// 针对小程序样式做适配
-// 请注意与weapps/src/pages/editor/components/Main/EditAndPreview/index.iframe.scss的一致性，以确保小程序端样式与
-
-body {
-  margin: 0;
-  padding: 0;
-}
-
-#weapp-scancode-video {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.weapp-scancode {
-  &-close-button {
-    background: white;
-    color: black;
-    display: flex;
-    position: absolute;
-    top: 14px;
-    left: 14px;
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    cursor: pointer;
-    justify-content: center;
-    align-items: center;
-    z-index: 500;
-  }
-  &-modal {
-    position: fixed;
-    background-color: black;
-    left: 0px;
-    right: 0px;
-    top: 0px;
-    bottom: 0px;
-    &-main {
-      height: 100%;
-      position: relative;
-    }
-  }
-  &-scan {
-    &-wrapper {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      height: 100%;
-      width: 100%;
-      position: absolute;
-      top: 0;
-      left: 0;
-    }
-    &-square {
-      --square-size: 16rem;
-      width: var(--square-size);
-      height: var(--square-size);
-      position: relative;
-    }
-    &-bar {
-      position: absolute;
-      height: 10px;
-      width: 100%;
-      background: linear-gradient(90deg, transparent, #07c160 50%, transparent);
-      top: 0%;
-      border-top-left-radius: 50%;
-      border-top-right-radius: 50%;
-      animation: slideinout-top-down 2s;
-      animation-direction: normal;
-      animation-timing-function: linear;
-      animation-iteration-count: infinite;
-    }
-    &-tip {
-      margin-top: 10rem;
-      color: white;
-    }
-    &-not-found {
-      color: white;
-    }
-    &-not-found + p {
-      color: #999;
-    }
-  }
-
-  &-img-selector {
-    position: absolute;
-    bottom: 32px;
-    right: 32px;
-    z-index: 500;
-  }
-  &-img-picker {
-    z-index: 500;
-    padding: 5px;
-    display: block;
-    cursor: pointer;
-  }
-}
-
-@keyframes slideinout-top-down {
-  // use transform to prevent relayout
-  0% {
-    transform: translateY(0px);
-    opacity: 0;
-  }
-  50% {
-    transform: translateY(calc(var(--square-size) / 2));
-    opacity: 0.5;
-  }
-  100% {
-    transform: translateY(var(--square-size));
-    opacity: 0;
-  }
-}
-
-@media (min-width: 1024px) {
-  .weda-responsive_flex_flow {
-    flex-flow: row !important;
-  }
-}

package/template/generator/pages/app.tpl

@@ -1,181 +0,0 @@
-// Import Libs and Handlers
-import * as React from 'react'
-import { observable, autorun, reaction } from 'mobx'
-import { observer } from "mobx-react-lite";
-import get from 'lodash.get'
-import { app } from '../../app/global-api' // 取对应子包app
-import '../../utils/initGlobalVar'
-import { AppRender } from '/src/handlers/RenderWrapper'
-import { createDataset, createStateDataSourceVar, generateParamsParser, EXTRA_API } from '../../datasources'
-import { createComputed, createWidgets, retryDataBinds, bindFuncObj, resolveComponentProps } from '/src/utils/index'
-import { pageLifeCycleMount } from '/src/utils/lifecycle'
-import { useScrollTop } from '/src/utils/hooks'
-import PageLifeCycle from '../../lowcode/<%= pageName %>/lifecycle'
-import initPageState from '../../lowcode/<%= pageName %>/state'
-import computed from '../../lowcode/<%= pageName %>/computed'
-import pageAPI from '../../lowcode/<%= pageName %>/index';
-import { $$_<%= pageName %> as handler } from '../../app/handlers'
-import { createPageApi } from '/src/app/global-api' // 取主包app
-
-import '../../lowcode/<%= pageName %>/style.css'
-
-// Import Components
-<% useComponents.forEach(compItem => {%>
-<% if(isSandbox) { %>
-const <%= upperFirst(compItem.variableName) %> = window["@weapps-materials-main-<%= compItem.materialName %>"].components["<%= compItem.name %>"];
-<% } else if(!isSandbox) { %>
-import <%= upperFirst(compItem.variableName) %> from "/src/libraries/<%= compItem.materialName %>@<%= compItem.materialVersion %>/components/<%= compItem.name %>";
-<% }}) %>
-
-// Import Actions
-<% useActions.forEach(action => {%>
-<% if(isSandbox) { %>
-const <%= action.variableName %> = window["@weapps-materials-main-<%= action.materialName %>"].actions["<%= action.name %>"];
-<% } else { %>
-import <%= action.variableName %> from "/src/libraries/<%= action.materialName %>@<%= action.materialVersion %>/actions/<%= action.name %>";
-<% }}) %>
-
-const virtualFields = {
-  <% useComponents.forEach(compItem => {%>
-  <% if(compItem.isPlainProps) { %>
-  '<%= compItem.materialName %>:<%= compItem.name %>': (props) => <<%= upperFirst(compItem.variableName) %> {...resolveComponentProps(props, 1)} pageVirtualFields={virtualFields}/>,
-  <% } else { %>
-  '<%= compItem.materialName %>:<%= compItem.name %>': (props) => <<%= upperFirst(compItem.variableName) %> {...resolveComponentProps(props, 0)} pageVirtualFields={virtualFields}/>,
-  <% }}) %>
-};
-
-// Init
-export default function App() {
-  // 检查权限
-  // const [weDaHasLogin, setWeDaHasLogin] = React.useState(false);
-  const [context, setContext] = React.useState({});
-  // 兼容 this.state / $page.state 两种模式
-  const pageCodeContext = createPageApi()
-  const $page = pageCodeContext
-  Object.defineProperty(pageCodeContext, '$page', {
-    get() {
-      return pageCodeContext
-    }
-  })
-
-  const widgetsContext = <%= widgets %>;
-  const dataBinds = $page._dataBinds = <%= dataBinds %>;
-  const componentSchema = <%= componentSchema %>;
-
-  /**
-   * 更新数据容器的上下文的方法
-   * 会传递到事件emit的地方，将从组件获取到的数据data赋值给上下文
-   * 当组件卸载时，传过来的data为undefined即可
-   * {
-   *   id1: [{...}],
-   *   id2: {...},
-   *   id3: undefined,
-   *   id4: null,
-   *   ...
-   * }
-   * @param id
-   * @param data
-   */
-  const updateContext = (id, data) => {
-    if(id) {
-      context[id] = { data };
-    }
-    setContext({ ...context });
-  }
-
-  Object.assign($page, {
-    id:'<%= pageName %>',
-    state: observable(initPageState),
-    computed: createComputed(computed, pageCodeContext),
-    handler: bindFuncObj(handler, pageCodeContext)
-  })
-  let dataset = createDataset('<%= pageName %>', {app, $page: pageCodeContext})
-  $page.dataset = dataset
-  $page.state.dataset = dataset
-  $page.setState = (userSetState) => {
-    Object.keys(userSetState).forEach((keyPath) => {
-      app.utils.set($page.dataset.state, keyPath, userSetState[keyPath]);
-    });
-  };
-
-  $page.widgets = createWidgets(widgetsContext, dataBinds, context)
-  // widgets 内的 dataBinds 可能需要关联 widgets，需要重新执行 dataBinds
-  retryDataBinds()
-
-  // Web 环境页面级别生命周期
-  React.useEffect(() => {
-    document.title = "<%= title %>";
-    initWatchMethods(pageCodeContext)
-    /*checkAuth(app, app.id, '<%= pageName %>').then((checkAuthResult) =>
-      setWeDaHasLogin(checkAuthResult)
-    );*/
-  }, [])
-
-  pageLifeCycleMount(
-    React.useEffect,
-    {
-      ...PageLifeCycle,
-      beforePageCustomLaunch: (query) => {
-        EXTRA_API.setParams('<%= pageName %>', query || {})
-        createStateDataSourceVar('<%= pageName %>', generateParamsParser({ app, $page: pageCodeContext }))
-      },
-    },
-    app,
-    pageCodeContext
-  )
-  // 切换页面滚动到顶部
-  useScrollTop()
-  return (
-    <div className="weapps-page weapps-page-<%= pageClass %>">
-      <style
-        type="text/css"
-        dangerouslySetInnerHTML={{
-          __html: `<%= pageStyleText %>`,
-        }}
-      />
-      <AppRender
-        virtualFields={virtualFields}
-        componentSchema={componentSchema}
-        codeContext={pageCodeContext}
-        context={context}
-        updateContext={updateContext}
-      />
-    </div>
-  );
-
-  function initWatchMethods(pageContext) {
-    const { watch = {}, watchState = {}, watchWidget = {}, watchEffects = {}} = pageAPI
-
-
-    // # watch effect
-    const watchEffectDisposers = Object.keys(watchEffects).map(fnName => {
-      return autorun(watchEffects[fnName].bind(pageContext))
-    })
-    const disposers = watchEffectDisposers
-
-    // # watch state
-    Object.keys(watchState).map(key => runWatcher(parseWatcher(watchState[key]), pageContext.state, key, 'watchState'))
-
-    // # watch widgets
-    Object.keys(watchWidget).map(key => runWatcher(parseWatcher(watchWidget[key]), pageContext.widgets, key, 'watchWidgets'))
-
-    function runWatcher({ handler, immediate } = {}, target, key, label) {
-      if (!handler) {
-        console.error(`Invalid ${label}(${key}) of ${pageContext.node.widgetType}, watch must a function or {handler: function}`)
-        return
-      }
-      const disposer = reaction(() => get(target, key), handler.bind(pageContext), { fireImmediately: immediate })
-      disposers.push(disposer)
-    }
-  }
-}
-
-function parseWatcher(watcher) {
-  if (!watcher) return
-  if (watcher instanceof Function) {
-    return { handler: watcher, immediate: false }
-  }
-  const { handler, immediate = false } = watcher
-  if (!(handler instanceof Function)) return
-  return { handler, immediate }
-}