refactor: add useDefinedNameSpace, remove ns param from useCEStates; …

…simplify useEdit
lejunyang · Nov 2, 2024 · 673726e · 673726e
1 parent 9576fa6
commit 673726e
Show file tree

Hide file tree

Showing 34 changed files with 111 additions and 104 deletions.
diff --git a/.github/actions/setup/action.yml b/.github/actions/setup/action.yml
@@ -26,14 +26,20 @@ runs:
       shell: bash # Must set shell for every step in composite action...
       run: pnpm install --frozen-lockfile
 
+    - name: Check inputs
+      shell: bash
+      run: |
+        echo "github.event.inputs: ${{ toJSON(github.event.inputs) }}"
+        echo "inputs: ${{ toJSON(inputs) }}"
+
     - name: Check if needs to init test
       shell: bash
-      if: ${{ github.event.inputs.init-test == true || github.event.inputs.init-test == 'true' }}
+      if: ${{ inputs.init-test == true || inputs.init-test == 'true' }}
       run: pnpm exec playwright install
 
     - name: Check if needs to download build
       uses: actions/download-artifact@v4
-      if: ${{ github.event.inputs.artifact-id }}
+      if: ${{ inputs.artifact-id }}
       with:
         name: package-builds
         path: ./packages

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -19,6 +19,7 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+
       - name: Setup
         uses: ./.github/actions/setup
         with:

diff --git a/packages/components/src/components/accordion/Accordion.tsx b/packages/components/src/components/accordion/Accordion.tsx
@@ -37,7 +37,7 @@ export const Accordion = defineSSRCustomElement({
       else return isOpen.value ? val?.open ?? defaultV : val?.close ?? defaultV;
     };
 
-    const [stateClass] = useCEStates(() => ({ open: isOpen }), ns);
+    const [stateClass] = useCEStates(() => ({ open: isOpen }));
     return () => {
       const { iconPosition = 'end', iconName, iconLibrary } = props;
       const icon = renderElement('icon', {

diff --git a/packages/components/src/components/accordion/AccordionGroup.tsx b/packages/components/src/components/accordion/AccordionGroup.tsx
@@ -41,7 +41,7 @@ export const AccordionGroup = defineSSRCustomElement({
     });
 
     useCEExpose(methods);
-    const [stateClass] = useCEStates(() => null, ns);
+    const [stateClass] = useCEStates(() => null);
 
     return () => {
       return (

diff --git a/packages/components/src/components/button/Button.tsx b/packages/components/src/components/button/Button.tsx
@@ -74,7 +74,7 @@ export const Button = defineSSRCustomElement({
       },
     };
 
-    const [stateClass] = useCEStates(() => ({ holdShow }), ns);
+    const [stateClass] = useCEStates(() => ({ holdShow }));
 
     let timer: ReturnType<typeof setInterval>,
       countdownTxt = ref<string | null>();

diff --git a/packages/components/src/components/calendar/Calendar.tsx b/packages/components/src/components/calendar/Calendar.tsx
@@ -163,7 +163,7 @@ export const Calendar = defineSSRCustomElement({
 
     const { getShortWeekDays, getWeekFirstDay } = createDateLocaleMethods(lang);
 
-    const [stateClass] = useCEStates(() => ({ [pickingType.value]: 1 }), ns);
+    const [stateClass] = useCEStates(() => ({ [pickingType.value]: 1 }));
     useCEExpose({ ...methods, ...expose }, toGetterDescriptors(state));
 
     const getCellNodes = ({ value }: ComputedRef<UseDatePanelCells>, bodyClass?: string) => {

diff --git a/packages/components/src/components/checkbox/Checkbox.tsx b/packages/components/src/components/checkbox/Checkbox.tsx
@@ -74,15 +74,12 @@ export const Checkbox = defineSSRCustomElement({
 
     const type = computed(() => props.type || checkboxContext?.parent!.props.type);
 
-    const [stateClass] = useCEStates(
-      () => ({
-        card: type.value === 'card',
-        checked,
-        intermediate,
-        on: [checked, intermediate],
-      }),
-      ns,
-    );
+    const [stateClass] = useCEStates(() => ({
+      card: type.value === 'card',
+      checked,
+      intermediate,
+      on: [checked, intermediate],
+    }));
 
     useExpose(refLikesToGetters({ disabled: () => editComputed.disabled }));
     return () => {

diff --git a/packages/components/src/components/checkbox/CheckboxGroup.tsx b/packages/components/src/components/checkbox/CheckboxGroup.tsx
@@ -81,12 +81,9 @@ export const CheckboxGroup = defineSSRCustomElement({
     });
     const children = CheckboxCollector.parent({ extraProvide: { radioState } });
 
-    const [stateClass] = useCEStates(
-      () => ({
-        vertical: props.vertical,
-      }),
-      ns,
-    );
+    const [stateClass] = useCEStates(() => ({
+      vertical: props.vertical,
+    }));
 
     const { render } = useOptions(props, 'checkbox');
     return () => (

diff --git a/packages/components/src/components/color-picker/ColorPicker.tsx b/packages/components/src/components/color-picker/ColorPicker.tsx
@@ -146,7 +146,7 @@ export const ColorPicker = defineSSRCustomElement({
       },
     };
 
-    const [stateClass] = useCEStates(() => pick(props, ['panelOnly']), ns);
+    const [stateClass] = useCEStates(() => pick(props, ['panelOnly']));
 
     const triggers = ['click', 'focus'];
     return () => {

diff --git a/packages/components/src/components/custom-renderer/CustomRenderer.tsx b/packages/components/src/components/custom-renderer/CustomRenderer.tsx
@@ -6,7 +6,7 @@ import { createDefineElement } from 'utils';
 import { customRendererProps } from './type';
 import { isArray, isHTMLTemplateElement, isNode, isObject, runIfFn } from '@lun-web/utils';
 import { generateWithTemplate } from './utils';
-import { useCE } from 'hooks';
+import { useCE } from '../../hooks/shadowDom';
 
 const name = 'custom-renderer';
 

diff --git a/packages/components/src/components/date-picker/DatePicker.tsx b/packages/components/src/components/date-picker/DatePicker.tsx
@@ -65,7 +65,7 @@ export const DatePicker = defineSSRCustomElement({
 
     const getValue = createGetterForHasRawModel(valueModel);
 
-    const [stateClass] = useCEStates(() => null, ns);
+    const [stateClass] = useCEStates(() => null);
     // TODO expose
     return () => {
       const { popoverProps, inputProps, multiple, ...rest } = props;

diff --git a/packages/components/src/components/dialog/Dialog.tsx b/packages/components/src/components/dialog/Dialog.tsx
@@ -218,8 +218,7 @@ export const Dialog = Object.assign(
           noTopLayer: props.noTopLayer || !supportDialog,
           confirm: props.isConfirm,
           noMask: props.noMask,
-        }),
-        ns,
+        })
       );
 
       const [renderHeader] = useSlot('header', () => props.header);

diff --git a/packages/components/src/components/form-item/FormItem.tsx b/packages/components/src/components/form-item/FormItem.tsx
@@ -132,13 +132,10 @@ export const FormItem = defineSSRCustomElement({
         ),
       };
     });
-    const [stateClass, states] = useCEStates(
-      () => ({
-        required: formContext ? validateProps.value.required : props.value.required,
-        ...layoutInfo?.value.itemState,
-      }),
-      ns,
-    );
+    const [stateClass, states] = useCEStates(() => ({
+      required: formContext ? validateProps.value.required : props.value.required,
+      ...layoutInfo?.value.itemState,
+    }));
 
     const [elementRef, errorActiveTarget] = useErrorTooltip(() => tips.tooltip, {
       isDisabled: () => !tips.hasTooltip,

diff --git a/packages/components/src/components/form/Form.tsx b/packages/components/src/components/form/Form.tsx
@@ -178,7 +178,7 @@ export const Form = defineSSRCustomElement({
       extraProvide: provide,
     });
 
-    const [stateClass] = useCEStates(() => ({}), ns);
+    const [stateClass] = useCEStates(() => ({}));
 
     const renderErrorTooltip = provideErrorTooltip({
       class: [ns.e('tooltip'), ns.m('error')],

diff --git a/packages/components/src/components/input/Input.tsx b/packages/components/src/components/input/Input.tsx
@@ -124,17 +124,14 @@ export const Input = defineSSRCustomElement({
       } else valueModel.value = null;
     };
 
-    const [stateClass, states] = useCEStates(
-      () => ({
-        empty: isEmpty(valueModel.value) && !valueForMultiple.value,
-        multiple: props.multiple,
-        required: validateProps.value.required,
-        withPrepend: !prependEmpty.value,
-        withAppend: !appendEmpty.value,
-        withRenderer: !rendererEmpty.value,
-      }),
-      ns,
-    );
+    const [stateClass, states] = useCEStates(() => ({
+      empty: isEmpty(valueModel.value) && !valueForMultiple.value,
+      multiple: props.multiple,
+      required: validateProps.value.required,
+      withPrepend: !prependEmpty.value,
+      withAppend: !appendEmpty.value,
+      withRenderer: !rendererEmpty.value,
+    }));
 
     const lengthInfo = computed(() => {
       const valueLength = props.multiple ? valueForMultiple.value.length : String(valueModel.value ?? '').length;

diff --git a/packages/components/src/components/mentions/Mentions.tsx b/packages/components/src/components/mentions/Mentions.tsx
@@ -1,5 +1,12 @@
 import { computed, ref, watchEffect } from 'vue';
-import { useSetupEdit, useMentions, VirtualElement, MentionSpan, MentionsTriggerParam, useSetupEvent } from '@lun-web/core';
+import {
+  useSetupEdit,
+  useMentions,
+  VirtualElement,
+  MentionSpan,
+  MentionsTriggerParam,
+  useSetupEvent,
+} from '@lun-web/core';
 import { defineSSRCustomElement } from 'custom';
 import { createDefineElement, renderElement } from 'utils';
 import { useCEStates, useNamespace, useOptions, usePropsFromFormItem, useValueModel } from 'hooks';
@@ -108,14 +115,11 @@ export const Mentions = defineSSRCustomElement({
       valueModel.value = null as any;
     };
 
-    const [stateClass, states] = useCEStates(
-      () => ({
-        empty: isEmpty(valueModel.value),
-        required: validateProps.value.required,
-        withClearIcon: props.showClearIcon && editComputed.editable,
-      }),
-      ns,
-    );
+    const [stateClass, states] = useCEStates(() => ({
+      empty: isEmpty(valueModel.value),
+      required: validateProps.value.required,
+      withClearIcon: props.showClearIcon && editComputed.editable,
+    }));
 
     const lengthInfo = computed(() => {
       const { maxLength, showLengthInfo } = props;

diff --git a/packages/components/src/components/radio/Radio.tsx b/packages/components/src/components/radio/Radio.tsx
@@ -45,7 +45,7 @@ export const Radio = defineSSRCustomElement({
         start: button && (props.start || radioContext?.isStart),
         end: button && (props.end || radioContext?.isEnd),
       };
-    }, ns);
+    });
 
     return () => {
       const { labelPosition, noIndicator } = mergedProps;

diff --git a/packages/components/src/components/radio/RadioGroup.tsx b/packages/components/src/components/radio/RadioGroup.tsx
@@ -27,7 +27,7 @@ export const RadioGroup = defineSSRCustomElement({
 
     const { render } = useOptions(props, 'radio');
 
-    const [stateClass] = useCEStates(() => ({}), ns);
+    const [stateClass] = useCEStates(() => ({}));
 
     // TODO arrow move to check prev/next active radio
     return () => (

diff --git a/packages/components/src/components/range/Range.tsx b/packages/components/src/components/range/Range.tsx
@@ -248,7 +248,7 @@ export const Range = defineSSRCustomElement({
     });
     onUpdated(updateLabelSize);
 
-    const [stateClass] = useCEStates(() => null, ns);
+    const [stateClass] = useCEStates(() => null);
 
     return () => {
       const { value } = processedValues,

diff --git a/packages/components/src/components/select/Select.tsx b/packages/components/src/components/select/Select.tsx
@@ -82,7 +82,7 @@ export const Select = defineSSRCustomElement({
         popover: popoverRef,
       }),
     );
-    const [stateClass] = useCEStates(() => null, ns);
+    const [stateClass] = useCEStates(() => null);
 
     const { render, loading, options, renderOptions, renderOption } = useOptions(props, 'select-option', {
       groupOptionName: 'select-optgroup',

diff --git a/packages/components/src/components/select/SelectOptgroup.tsx b/packages/components/src/components/select/SelectOptgroup.tsx
@@ -18,7 +18,7 @@ export const SelectOptgroup = defineSSRCustomElement({
     const ns = useNamespace(name, { parent: selectContext?.parent });
     SelectOptgroupContext.provide();
     const [_editComputed] = useSetupEdit();
-    const [stateClass] = useCEStates(() => null, ns);
+    const [stateClass] = useCEStates(() => null);
 
     return () => (
       <div part={compParts[0]} class={stateClass.value}>

diff --git a/packages/components/src/components/select/SelectOption.tsx b/packages/components/src/components/select/SelectOption.tsx
@@ -38,7 +38,7 @@ export const SelectOption = defineSSRCustomElement({
 
     const disabled = () => editComputed.disabled;
     useExpose(refLikesToGetters({ hidden, selected, disabled })); // expose it to Select
-    const [stateClass] = useCEStates(() => ({ selected, active, underGroup: optgroup }), ns);
+    const [stateClass] = useCEStates(() => ({ selected, active, underGroup: optgroup }));
 
     const handlers = {
       onClick() {

diff --git a/packages/components/src/components/switch/Switch.tsx b/packages/components/src/components/switch/Switch.tsx
@@ -41,7 +41,7 @@ export const Switch = defineSSRCustomElement({
       },
     };
 
-    const [stateClass] = useCEStates(() => ({ checked: checkedModel.value }), ns);
+    const [stateClass] = useCEStates(() => ({ checked: checkedModel.value }));
 
     return () => {
       const checked = checkedModel.value;

diff --git a/packages/components/src/components/textarea/Textarea.tsx b/packages/components/src/components/textarea/Textarea.tsx
@@ -84,14 +84,11 @@ export const Textarea = defineSSRCustomElement({
 
     useCEExpose(methods, refLikeToDescriptors({ textarea: textareaRef }));
 
-    const [stateClass, states] = useCEStates(
-      () => ({
-        empty: isEmpty(valueModel.value),
-        required: validateProps.value.required,
-        withClearIcon: props.showClearIcon && editComputed.editable,
-      }),
-      ns,
-    );
+    const [stateClass, states] = useCEStates(() => ({
+      empty: isEmpty(valueModel.value),
+      required: validateProps.value.required,
+      withClearIcon: props.showClearIcon && editComputed.editable,
+    }));
 
     const lengthInfo = computed(() => {
       const { maxLength, showLengthInfo } = props;

diff --git a/packages/components/src/components/tour/Tour.tsx b/packages/components/src/components/tour/Tour.tsx
@@ -85,13 +85,10 @@ export const Tour = defineSSRCustomElement({
       }
     });
 
-    const [stateClass] = useCEStates(
-      () => ({
-        [`placement-${placement.value}`]: 1,
-        [`side-${placementInfo.value[0]}`]: 1,
-      }),
-      ns,
-    );
+    const [stateClass] = useCEStates(() => ({
+      [`placement-${placement.value}`]: 1,
+      [`side-${placementInfo.value[0]}`]: 1,
+    }));
     const nextStep = () => updateStep(1),
       prevStep = () => updateStep(-1);
 

diff --git a/packages/components/src/components/tree/TreeItem.tsx b/packages/components/src/components/tree/TreeItem.tsx
@@ -80,8 +80,7 @@ export const TreeItem = defineSSRCustomElement({
         checked,
         lineSelectable,
         labelSelectable,
-      }),
-      ns,
+      })
     );
 
     const [renderLabel] = useSlot('label', () => props.label);

diff --git a/packages/components/src/hooks/index.ts b/packages/components/src/hooks/index.ts
@@ -1,5 +1,3 @@
-import { getCurrentInstance } from 'vue';
-
 export * from './shadowDom';
 export * from './transition';
 export * from './useBreakpoint';
@@ -10,11 +8,4 @@ export * from './useSlot';
 export * from './useStyles';
 export * from './useTooltip';
 export * from './useValue';
-
-// vue setup expose can only be used once. But we have manual expose in useNameSpace, need to expose multiple times.
-export function useExpose(obj: Record<string, any>, properties?: PropertyDescriptorMap) {
-  const vm = getCurrentInstance()!;
-  if (!vm.exposed) vm.exposed = obj;
-  else Object.defineProperties(vm.exposed, Object.getOwnPropertyDescriptors(obj));
-  if (properties) Object.defineProperties(vm.exposed, properties);
-}
+export * from './vue';
diff --git a/packages/components/src/hooks/shadowDom.ts b/packages/components/src/hooks/shadowDom.ts
@@ -11,9 +11,9 @@ import {
   onMounted,
   watchEffect,
 } from 'vue';
-import { useNamespace } from './useNameSpace';
+import { useDefinedNameSpace } from './useNameSpace';
 import { GlobalStaticConfig } from '../components/config/config.static';
-import { VueElement } from 'custom';
+import type { VueElement } from 'custom';
 
 /** get current host custom element */
 export const useCE = () => getCurrentInstance()!.ce! as VueElement;
@@ -44,9 +44,10 @@ export function useCEStates<
     editable?: boolean | undefined;
     interactive?: boolean | undefined;
   },
->(statesGetter?: () => T, ns?: ReturnType<typeof useNamespace>) {
+>(statesGetter?: () => T) {
   let stop: ReturnType<typeof watchEffect>;
-  const editComputed = useEdit();
+  const editComputed = useEdit()!;
+  const ns = useDefinedNameSpace();
   const states = objectComputed(() => ({
     ...statesGetter?.(),
     ...pick(editComputed, ['disabled', 'editable', 'interactive', 'loading', 'readonly']),