@cloudbase/lowcode-builder 0.1.26 → 1.0.2

package/template/src/handlers/FieldMiddleware/renderer.jsx

@@ -1,331 +0,0 @@
-import * as React from 'react';
-import { useContext, useCallback, createContext, useRef } from 'react';
-import { observer } from 'mobx-react-lite';
-import { emitEvent } from '../actionHandler/utils';
-import { translateStyleToRem } from '@tcwd/weapps-core';
-import { get, set } from 'lodash';
-import { $page } from '../../app/global-api';
-import { getDom } from '../utils/widgets';
-import { checkVisible } from '../../utils/index';
-
-export const ForContext = createContext({});
-
-export const CompRenderer = observer(function (props) {
-  const {
-    id: compId,
-    xProps,
-    virtualFields,
-    slots = {},
-    codeContext,
-    scopeContext,
-    emitEvents = [],
-  } = props;
-
-  const isInComposite = !!props.codeContext;
-  // 判断 widgets 是从 page 来的，还是组件来的
-  const widgetsData = !isInComposite
-    ? $page.widgets[compId]
-    : codeContext.$WEAPPS_COMP.widgets[compId];
-
-  if (!xProps) {
-    return props.children;
-  }
-
-  const {
-    commonStyle = {},
-    sourceKey,
-    data = {},
-    dataBinds,
-    listenerInstances,
-    styleBind,
-    classNameList = [],
-    classNameListBind,
-    staticResourceAttribute = [],
-  } = xProps;
-  const Field = virtualFields[sourceKey];
-  const parentForItems = useContext(ForContext);
-
-  const emit = useCallback(
-    (trigger, event, forItems, scopeContext) => {
-      const listeners = listenerInstances;
-      event = { detail: event, name: trigger };
-      forItems = {
-        ...forItems,
-        forIndexes: getForIndexes(forItems, widgetsData),
-      };
-      emitEvent(
-        trigger,
-        listeners,
-        {
-          event,
-          customEventData: event,
-          forItems,
-        },
-        scopeContext
-      );
-    },
-    [props]
-  );
-
-  function getSafeComponentProps({
-    style,
-    classNameList,
-    staticResourceAttribute,
-  }) {
-    const componentProps = {};
-    if (classNameList.length) {
-      componentProps.className = classNameList.join(' ');
-    }
-
-    if (style && Object.keys(style).length) {
-      componentProps.style = style;
-    }
-    if (staticResourceAttribute && staticResourceAttribute.length > 0) {
-      componentProps.staticResourceAttribute = staticResourceAttribute;
-    }
-    return componentProps;
-  }
-
-  // For循环渲染
-  let forList;
-  try {
-    // 绑定了 for 变量，但计算值错误时，应当空数组兜底
-    forList =
-      dataBinds && dataBinds._waFor && (dataBinds._waFor(parentForItems) || []);
-  } catch (e) {
-    // 计算值出错则使用空数组兜底
-    forList = [];
-    console.warn('_waFor data', e);
-  }
-  if (forList) {
-    if (!Array.isArray(forList)) {
-      console.warn(`${compId}循环绑定非数组值：`, forList);
-      forList = [];
-    }
-    return forList.map((item, index) => {
-      const forItemsIndexes = (parentForItems.forIndexes || []).concat(index);
-      const forItems = {
-        ...parentForItems,
-        [compId]: item,
-        forIndexes: forItemsIndexes,
-      };
-      const {
-        fieldData: forItemData,
-        finalStyle: forItemStyle,
-        finalClassNameList: forItemClassNameList,
-      } = getBindData(forItems, scopeContext);
-      if (!checkVisible(forItemData)) {
-        return null;
-      }
-      // 多个组件的 slot 属性
-      Object.keys(slots).forEach((slotProp) => {
-        set(forItemData, slotProp, slots[slotProp]);
-      });
-      const emitWithForItems = (trigger, evt) =>
-        emit(trigger, evt, forItems, scopeContext);
-      delete forItemData.style;
-
-      // 获取当前元素的 ref
-      const currentWidget = Array.isArray(widgetsData)
-        ? get(widgetsData, forItemsIndexes)
-        : widgetsData;
-      const domRef = setGetDomApi(currentWidget, isInComposite);
-
-      const componentProps = getSafeComponentProps({
-        style: forItemStyle,
-        classNameList: forItemClassNameList,
-        staticResourceAttribute,
-      });
-      return (
-        <ForContext.Provider key={index} value={forItems}>
-          <Field
-            data={forItemData}
-            id={compId}
-            {...componentProps}
-            emit={emitWithForItems}
-            events={emitEvents}
-            compositeParent={codeContext}
-            forIndexes={forItemsIndexes}
-            $node={currentWidget}
-            domRef={domRef}
-          >
-            {props.children}
-          </Field>
-        </ForContext.Provider>
-      );
-    });
-  }
-
-  // 单节点渲染
-  const { fieldData, finalClassNameList, finalStyle } = getBindData(
-    parentForItems,
-    scopeContext
-  );
-  const emitWithForItems = (trigger, evt) =>
-    emit(trigger, evt, parentForItems, scopeContext);
-
-  // false 或空字符串时
-  if (!checkVisible(fieldData)) {
-    return null;
-  }
-
-  // 单个组件的 slot 属性
-  Object.keys(slots).forEach((slotProp) => {
-    set(fieldData, slotProp, slots[slotProp]);
-  });
-
-  // 防止渲染时 data 的 style 与实际的 style 冲突
-  delete fieldData.style;
-
-  // 修正 forIndexes
-  const forIndexes = getForIndexes(parentForItems, widgetsData);
-
-  // 获取 Element Ref
-  const currentWidget = Array.isArray(widgetsData)
-    ? get(widgetsData, forIndexes)
-    : widgetsData;
-  const domRef = setGetDomApi(currentWidget, props);
-
-  const componentProps = getSafeComponentProps({
-    style: finalStyle,
-    classNameList: finalClassNameList,
-    staticResourceAttribute,
-  });
-  return (
-    <Field
-      data={fieldData}
-      id={compId}
-      {...componentProps}
-      emit={emitWithForItems}
-      events={emitEvents}
-      compositeParent={codeContext}
-      forIndexes={forIndexes}
-      $node={currentWidget}
-      domRef={domRef}
-    >
-      {props.children}
-    </Field>
-  );
-
-  // TODO: 需要不断移除 dataBinds(style/classList)
-  function getBindData(forItems, scopeContext) {
-    // bindData
-    let wData = widgetsData;
-    if (Array.isArray(wData)) {
-      wData =
-        forItems.forIndexes === void 0 || wData.length === 0
-          ? {}
-          : get(wData, getForIndexes(forItems, wData));
-    }
-    wData = wData || {};
-    const fieldData = { ...wData };
-
-    // 再次计算 scope value
-    for (let key in fieldData) {
-      if (Object.prototype.hasOwnProperty.call(fieldData, key)) {
-        const value = fieldData[key];
-        if (value && value.__type === 'scopedValue') {
-          try {
-            fieldData[key] = value.getValue(scopeContext);
-          } catch (e) {
-            console.warn(`Error computing data bind '${key}' error:`, e);
-            fieldData[key] = '';
-          }
-        }
-      }
-    }
-
-    // bindStyle
-    let bindStyle = fieldData.style || {};
-    // 复合组件第一层需要将最外层样式 style 挂到节点上
-    let cssStyle = commonStyle;
-    if (isInComposite && wData && !wData.parent) {
-      cssStyle = {
-        ...cssStyle,
-        ...(codeContext.$WEAPPS_COMP.props?.style || {}),
-      };
-      bindStyle = {
-        ...bindStyle,
-        ...(codeContext.$WEAPPS_COMP.props?.style || {}),
-      };
-    }
-    const finalStyle = getFinalStyle(cssStyle, bindStyle);
-
-    // bindClassList
-    const bindClassList = fieldData.classList || [];
-    const finalClassNameList = getFinalClassNameList(
-      classNameList,
-      bindClassList
-    );
-
-    return { fieldData, finalStyle, finalClassNameList };
-  }
-});
-
-export function getFinalStyle(
-  commonStyle = {},
-  bindStyle = {},
-  widgetStyle = {}
-) {
-  const remBindStyle =
-    typeof bindStyle === 'object' ? translateStyleToRem(bindStyle) : {};
-
-  return {
-    ...(translateStyleToRem(commonStyle) || {}),
-    ...(translateStyleToRem(widgetStyle) || {}),
-    ...remBindStyle,
-  };
-}
-
-export function getFinalClassNameList(
-  classNameList = [],
-  bindClassList = [],
-  widgetClassList = []
-) {
-  return [].concat(classNameList, bindClassList, widgetClassList);
-}
-
-// HACK: 从后向前保证循环的深度与 forIndexes 一致
-// 后续需要将 For 循环迁移到外层
-function getForIndexes(parentForItems, widgetsData) {
-  return Array.isArray(widgetsData) && widgetsData.length > 0
-    ? (parentForItems.forIndexes || []).slice(0 - getDeepArrLen(widgetsData))
-    : undefined;
-}
-
-function getDeepArrLen(arr, len = 0) {
-  if (Array.isArray(arr)) {
-    return getDeepArrLen(arr[0], len + 1);
-  } else {
-    return len;
-  }
-}
-
-function setGetDomApi(currentWidget, props) {
-  if (!currentWidget) return React.createRef();
-  const isComposite = !currentWidget.widgetType.startsWith('gsd-h5-react');
-  const isInComposite = !!props.codeContext;
-
-  // 如果当前是复合组件，不做 getDom 的挂载
-  if (!isComposite) {
-    if (!currentWidget.domRef) {
-      currentWidget.domRef = React.createRef();
-    }
-    if (!currentWidget.getDom) {
-      currentWidget.getDom = (options) =>
-        getDom(currentWidget.domRef.current, options);
-    }
-
-    if (
-      isInComposite && // 当前在复合组件内
-      !currentWidget.parent && // 当前节点为复合组件的根节点
-      props.codeContext.node && // 复合组件的 node 已经创建
-      !props.codeContext.node.getDom // 复合组件的 node 未挂载 getDom 方法
-    ) {
-      props.codeContext.node.domRef = currentWidget.domRef;
-      props.codeContext.node.getDom = currentWidget.getDom;
-    }
-  }
-
-  return currentWidget.domRef;
-}

package/template/src/handlers/HotAreas.js

@@ -1,36 +0,0 @@
-import * as React from 'react';
-import { HotAreaActionHandler } from './actionHandler';
-
-function percent(p) {
-  return `${p}%`;
-}
-
-export function HotAreas({ instance, global, meta }) {
-  const { hotAreas } = instance.data;
-  if (!hotAreas || !hotAreas.length) {
-    return null;
-  }
-
-  return hotAreas.map((hotArea, index) => {
-    const { size, position } = hotArea;
-
-    return (
-      <HotAreaActionHandler
-        key={index}  // eslint-disable-line
-        instance={instance}
-        hotArea={hotArea}
-        meta={meta}
-        global={global}
-        style={{
-          width: percent(size.width),
-          height: percent(size.height),
-          left: percent(position.x),
-          top: percent(position.y),
-          cursor: 'pointer',
-          position: 'absolute',
-          zIndex: 20,
-        }}
-      />
-    );
-  });
-}

package/template/src/handlers/PositionHandler.jsx

@@ -1,8 +0,0 @@
-/*
-eslint-disable
- */
-import * as React from 'react';
-
-export function PositionHandler({ positionStyle, children }) {
-  return <div style={{ ...positionStyle, width: '100%', zIndex: 999 }}>{children}</div>;
-}

package/template/src/handlers/actionHandler/utils.js

@@ -1,149 +0,0 @@
-import { resolveDataBinds } from '../utils/common';
-import { set as lodashSet } from 'lodash';
-
-const DEFAULT_MAX_TIMEOUT = 10 * 1000;
-
-export function getMetaInfoBySourceKey(sourceKey) {
-  const [materialName, name] = sourceKey.split(':');
-  return {
-    materialName,
-    name,
-  };
-}
-
-export function emitEvent(trigger, listeners = [], args, scopeContext = {}) {
-  const targetListeners = listeners.filter((l) => l.trigger === trigger);
-  targetListeners.forEach(async (listener) => {
-    // 当前非捕获Event，再判断冒泡行为
-    if (
-      !args?.customEventData?.detail?.isCapturePhase &&
-      listener.noPropagation
-    ) {
-      args?.customEventData?.detail?.stopPropagation();
-    }
-
-    // 判断捕获的执行，只有执行的捕获与配置的捕获一致时。才会执行。
-    if (
-      (listener?.isCapturePhase || false) ===
-      (args?.customEventData?.detail?.isCapturePhase || false)
-    ) {
-      try {
-        const res = await invokeListener(listener, args, scopeContext);
-        const eventName = `${listener.key}.success`;
-        const event = {
-          detail: {
-            value: res,
-            origin: args.event,
-            isCapturePhase: !!args.event?.isCapturePhase,
-          },
-          name: eventName,
-        };
-        emitEvent(
-          eventName,
-          listeners,
-          {
-            ...args,
-            event,
-            customEventData: event,
-          },
-          scopeContext
-        );
-      } catch (e) {
-        const eventName = `${listener.key}.fail`;
-        const event = {
-          detail: {
-            value: e,
-            origin: args.event,
-            isCapturePhase: !!args.event?.isCapturePhase,
-          },
-          name: eventName,
-        };
-        emitEvent(
-          eventName,
-          listeners,
-          {
-            ...args,
-            event,
-            customEventData: event,
-          },
-          scopeContext
-        );
-        // 之前 invoke 内部catch 了错误，不会抛错
-        // throw e
-      }
-    }
-  });
-}
-
-async function invokeListener(
-  { instanceFunction, data = {}, dataBinds = {} },
-  args,
-  scopeContext
-) {
-  // ToDo resolve databinds
-  const action = instanceFunction;
-  let maxTimeout = DEFAULT_MAX_TIMEOUT;
-  // eslint-disable-next-line no-underscore-dangle
-  if (data._maxTimeout === 'Infinity') maxTimeout = data._maxTimeout;
-  const resolvedData = {
-    ...data,
-  };
-  const resolvedDataBinds = resolveDataBinds(
-    dataBinds,
-    args.forItems,
-    { event: args.event },
-    scopeContext,
-    true
-  );
-
-  // eslint-disable-next-line no-restricted-syntax
-  for (const key in resolvedDataBinds) {
-    if (
-      resolvedDataBinds[key] &&
-      resolvedDataBinds[key].__type === 'scopedValue'
-    ) {
-      try {
-        lodashSet(
-          resolvedData,
-          key,
-          resolvedDataBinds[key].getValue(scopeContext)
-        );
-      } catch (e) {
-        lodashSet(resolvedData, key, '');
-      }
-    } else {
-      lodashSet(resolvedData, key, resolvedDataBinds[key]);
-    }
-  }
-
-  const params = {
-    data: resolvedData,
-    ...args,
-  };
-
-  try {
-    if (maxTimeout === 'Infinity') {
-      return await action(params);
-    }
-    const p = action(params);
-    if (p instanceof Promise) {
-      let timeout = null;
-      const r = await Promise.race([
-        new Promise((resolve, reject) => {
-          timeout = setTimeout(() => {
-            reject(new Error(`timeout in ${maxTimeout}ms`));
-          }, maxTimeout);
-        }),
-        p,
-      ]);
-      if (timeout) {
-        clearTimeout(timeout);
-      }
-      return r;
-    }
-    return p;
-  } catch (e) {
-    console.error('Action error: ', e);
-    throw e;
-  }
-}

package/template/src/handlers/componentEventActionEmitter.js

@@ -1,29 +0,0 @@
-const actionCallbackMap = new Map();
-
-export function onComponentEventAction({ key }, iEventName, callback) {
-  const eventName = `__weapps__component-event-${iEventName}`;
-  const map = getCallbackMap(key);
-  if (!map) {
-    return actionCallbackMap.set(key, new Map([[eventName, [callback]]]));
-  }
-
-  const callbacks = map.get(eventName);
-  if (!callbacks) {
-    return map.set(eventName, [callback]);
-  }
-
-  callbacks.push(callback);
-}
-
-function getCallbackMap(componentKey) {
-  return actionCallbackMap.get(componentKey);
-}
-
-export function getComponentEventActionCallbacks(componentKey, eventName) {
-  const map = getCallbackMap(componentKey);
-  if (!map) {
-    return null;
-  }
-
-  return map.get(eventName);
-}

package/template/src/handlers/componentNodeMap.js

@@ -1,24 +0,0 @@
-import { getComponentId } from './utils/common';
-
-export const componentNodeMap = new Map();
-
-export function setComponentNode(key, node) {
-  return componentNodeMap.set(key, node);
-}
-
-export function deleteComponentNode(key) {
-  return componentNodeMap.delete(key);
-}
-
-export function getComponentNode(key) {
-  return componentNodeMap.get(key) || document.getElementById(getComponentId(key));
-}
-
-if (typeof window !== 'undefined') {
-  Object.defineProperty(window, '__componentInstanceNodeMap', {
-    get() {
-      return componentNodeMap;
-    },
-  });
-}
-

package/template/src/handlers/controller.js

@@ -1,5 +0,0 @@
-import * as React from 'react'
-
-export const FormActionsContext = React.createContext(null);
-
-export const StoreNameContext = React.createContext(null);

package/template/src/handlers/emitComponentEvent.js

@@ -1,8 +0,0 @@
-import { getComponentEventActionCallbacks } from './componentEventActionEmitter';
-
-export function emitComponentEvent({ data: { actionName }, target }) {
-  const callbacks = getComponentEventActionCallbacks(target.key, actionName);
-  if (callbacks) {
-    callbacks.forEach(callback => callback());
-  }
-}

package/template/src/handlers/eventListener/componentEventListener.js

@@ -1,15 +0,0 @@
-import { EventProxy } from '../utils/eventProxy';
-
-const componentEvents = new EventProxy();
-
-export function onComponent(eventType, callback) {
-  componentEvents.on(eventType, callback);
-}
-
-export function emitComponent(eventType, schema) {
-  componentEvents.emit(eventType, {
-    key: schema.key,
-    sourceKey: schema['x-component']
-  });
-}
-

package/template/src/handlers/eventListener/hotAreaEventListener.js

@@ -1,32 +0,0 @@
-import { EventProxy } from '../utils/eventProxy';
-
-const hotAreaEventListeners = new EventProxy();
-
-export function onHotArea(eventType, callback) {
-  hotAreaEventListeners.on(eventType, callback);
-}
-
-export function emitHotArea(eventType, hotArea, instance, meta, global) {
-  // eslint-disable-next-line
-  const params = getHotAreaEventListenerCallbackParams(hotArea, instance, global, meta);
-  hotAreaEventListeners.emit(eventType, params);
-}
-
-function getHotAreaEventListenerCallbackParams(
-  { key, position, size },
-  { key: componentKey, sourceKey },
-  global,
-  meta
-) {
-  return {
-    global,
-    meta,
-    hotArea: {
-      key,
-      position,
-      size,
-    },
-    sourceKey,
-    componentKey
-  };
-}

package/template/src/handlers/eventListener/index.js

@@ -1,29 +0,0 @@
-import { EventListenerTarget } from './types';
-import { onComponent } from './componentEventListener';
-import { onPage } from './pageEventListener';
-import { onHotArea } from './hotAreaEventListener';
-
-export function on(target, eventType, callback) {
-  switch (target) {
-    case EventListenerTarget.PAGE: {
-      return onPage(eventType, callback);
-    }
-    case EventListenerTarget.COMPONENT: {
-      return onComponent(eventType, callback);
-    }
-    case EventListenerTarget.HOT_AREA: {
-      return onHotArea(eventType, callback);
-    }
-    default: {
-      // eslint-disable-next-line
-      throw `Invalid [target], must one of '${EventListenerTarget.PAGE}', '${
-        EventListenerTarget.COMPONENT
-      }', '${EventListenerTarget.HOT_AREA}'`;
-    }
-  }
-}
-
-export * from './pageEventListener';
-export * from './componentEventListener';
-export * from './hotAreaEventListener';
-export * from './types';

package/template/src/handlers/eventListener/pageEventListener.js

@@ -1,11 +0,0 @@
-import { EventProxy } from '../utils/eventProxy';
-
-const pageEvents = new EventProxy();
-
-export function onPage(eventType, callback) {
-  pageEvents.on(eventType, callback);
-}
-
-export function emitPage(eventType, params) {
-  pageEvents.emit(eventType, params);
-}