vue#shallowRef TypeScript Examples

export function artificialSlowdown (ms: number) {
  const isReady = shallowRef(false)
  let tmid: ReturnType<typeof setTimeout> | null = null
  let datakey: unknown = null

  return {
    reset (value: unknown = Symbol('unique value')) {
      if (datakey !== value) {
        datakey = value
        if (tmid !== null) {
          clearTimeout(tmid)
          tmid = null
        }
        isReady.value = false
        // force reactivity, even if isReady was `false`
        triggerRef(isReady)
      }
    },
    isReady: computed(() => {
      if (tmid === null) {
        tmid = setTimeout(() => {
          isReady.value = true
        }, ms)
      }

      return isReady.value
    })
  }
}

useExpose = (expose: (exposed?: Record<string, any>) => void) => {
  const s2Ref = shallowRef<SheetExpose>();

  expose({
    get instance() {
      return s2Ref.value?.instance;
    },
  });

  return s2Ref;
}

function useElementFocus() {
  const focusedElement = shallowRef<QuantumElement>()

  function watchElement(element: QuantumElement) {
    const stopHandle = watchImmediate(element.focused, (value: Boolean) => {
      if (value) {
        if (focusedElement.value?.focused) {
          focusedElement.value.setFocused(false)
        }
        focusedElement.value = element
      } else {
        if (focusedElement.value == element) {
          focusedElement.value = undefined
        }
      }
    })

    return () => {
      element.focused.value = false
      stopHandle()
    }
  }

  function setFocus(element?: QuantumElement) {
    if (element) {
      element.setFocused(true)
    } else {
      focusedElement.value?.setFocused(false)
    }
  }

  return {
    focusedElement,
    watchElement,
    setFocus,
  }
}

/*const imports = computed(() => {
    variables.forEach((value, key) => {
      if(value[0].getters.length > 0) {
        .push()
      }
    });
  })*/

  private createVariableArray(name: string): ScopedVariable[] {
    // First variable, used to import values from the scope above
    const importerVariable: ScopedVariable = reactive({
      position: computed(() => this.position.value),
      index: 0,
      data: shallowRef(),
      getters: [],
    })

    const newVariableArray = reactive([importerVariable])
    // Cleanup if unused
    watch([() => newVariableArray.length, () => importerVariable.getters.length], ([variableArrayLength, gettersLength]) => {
      if (variableArrayLength <= 1 && gettersLength == 0) {
        this._variableMap.delete(name)
      }
    })

    this._variableMap.set(name, newVariableArray)
    return newVariableArray
  }

_config = shallowRef<Config | null>(null)

updateInfo = shallowRef<IpcUpdateInfo['payload'] | null>(null)

chaosExaRate = shallowRef<number | undefined>(undefined)

queue = shallowRef(0)

export function useSpreadSheet(
  props: BaseSheetProps,
  emit: EmitFn<BaseSheetInitEmits>,
) {
  const {
    dataCfg,
    options,
    themeCfg,
    loading: loadingProps,
    sheetType,
    onSpreadsheet,
    onGetSpreadSheet,
  } = props;
  const wrapperRef = ref<HTMLDivElement>();
  const containerRef = ref<HTMLDivElement>();

  const s2Ref = shallowRef<SpreadSheet>();

  const { loading, setLoading } = useLoading(s2Ref, loadingProps);
  const pagination = usePagination(s2Ref, props);

  // TODO: 如果onSpreadsheet属性变更了怎么办？？？
  const renderSpreadSheet = (container: HTMLDivElement) => {
    const rawDataCfg = toRaw(dataCfg!);
    const rawOptions = toRaw(options);

    const s2Options = getSheetComponentOptions(rawOptions as S2Options);
    const s2Constructor: S2Constructor = [container, rawDataCfg, s2Options];
    if (onSpreadsheet) {
      return onSpreadsheet(...s2Constructor);
    }
    if (sheetType === 'table') {
      return new TableSheet(container, rawDataCfg, s2Options);
    }
    return new PivotSheet(container, rawDataCfg, s2Options);
  };

  const buildSpreadSheet = () => {
    setLoading(true);
    s2Ref.value = renderSpreadSheet(containerRef.value!);
    s2Ref.value.setThemeCfg(toRaw(themeCfg));
    s2Ref.value.render();
    setLoading(false);
    onGetSpreadSheet?.(s2Ref.value);
  };

  onMounted(buildSpreadSheet);
  useEvents(s2Ref, emit);
  useSheetUpdate(s2Ref, props);
  useResize(s2Ref, props, { wrapperRef, containerRef });

  onBeforeUnmount(() => {
    s2Ref.value?.destroy();
  });

  return {
    wrapperRef,
    containerRef,
    s2Ref,
    loading,
    setLoading,
    pagination,
  };
}

readonly scope: Ref<ScopeElement | undefined> = shallowRef<ScopeElement>()

quantumDocument = shallowRef<UseQuantumDocument<any>>()

// TODO: Make the getters and expression readonly to the outside
  readonly expression = shallowRef<Expression>('')

private readonly runningCasCommand: Ref<CasCommand | undefined> = shallowRef()

addVariable(name: string, position: ComputedRef<Vector2>): UseScopedVariable {
    // Add variable
    const variable: ScopedVariable = reactive({
      position: position,
      index: -1,
      data: shallowRef<any>(null),
      getters: [],
    })

    const variableArray = this.variableMap.get(name) ?? this.createVariableArray(name)

    watchImmediate(
      () => variable.position,
      (value) => {
        // Remove (or bail out)
        if (variable.index >= 0) {
          assert(variableArray[variable.index] == variable, `Expected variable ${variable} to be in ${variableArray} at index ${variable.index}`)

          const prev = arrayUtils.at(variableArray, variable.index - 1)
          const next = arrayUtils.at(variableArray, variable.index + 1)

          if (isInRange(value, { start: prev?.position, end: next?.position })) {
            // TODO: Optimize?
            // Currently this doesn't account for moving a variable past its getters
            // return
          }

          removeVariable(variableArray, variable)
        }

        // Add
        const { index } = arrayUtils.getBinaryInsertIndex(variableArray, (v) => v.position.compareTo(value))

        const prev = arrayUtils.at(variableArray, index - 1)
        // Take some getters from prev
        if (prev?.getters) {
          // Warning: This has to be strictly less than 0. If they are on the same spot, the getter belongs to the previous variable
          variable.getters = prev.getters.filter((v) => value.compareTo(v.position) < 0)
          variable.getters.forEach((v) => {
            v.variable = variable
          })
          prev.getters = prev.getters.filter((v) => !(value.compareTo(v.position) < 0))
        }
        // Update variable indices
        for (let i = index; i < variableArray.length; i++) {
          variableArray[i].index = i + 1
        }
        variableArray.splice(index, 0, variable)
        variable.index = index
      }
    )

    function setData(data: Expression | null | undefined) {
      variable.data = data
    }

    function remove() {
      removeVariable(variableArray, variable)
    }

    return {
      setData,
      remove,
    }
  }

function useI18nForLegacy(
  instance: ComponentInternalInstance,
  scope: I18nScope,
  root: Composer,
  options: any = {} // eslint-disable-line @typescript-eslint/no-explicit-any
): Composer {
  type Message = VueMessageType

  const isLocale = scope === 'local'
  const _composer = shallowRef<Composer | null>(null)

  if (
    isLocale &&
    instance.proxy &&
    !(instance.proxy.$options.i18n || instance.proxy.$options.__i18n)
  ) {
    throw createI18nError(
      I18nErrorCodes.MUST_DEFINE_I18N_OPTION_IN_ALLOW_COMPOSITION
    )
  }

  const _inheritLocale = isBoolean(options.inheritLocale)
    ? options.inheritLocale
    : true

  const _locale = ref<Locale>(
    // prettier-ignore
    isLocale && _inheritLocale
    ? root.locale.value
    : isString(options.locale)
      ? options.locale
      : DEFAULT_LOCALE
  )

  const _fallbackLocale = ref<FallbackLocale>(
    // prettier-ignore
    isLocale && _inheritLocale
      ? root.fallbackLocale.value
      : isString(options.fallbackLocale) ||
        isArray(options.fallbackLocale) ||
        isPlainObject(options.fallbackLocale) ||
        options.fallbackLocale === false
        ? options.fallbackLocale
        : _locale.value
  )

  const _messages = ref<LocaleMessages<LocaleMessage<Message>>>(
    getLocaleMessages<LocaleMessages<LocaleMessage<Message>>>(
      _locale.value as Locale,
      options
    )
  )

  // prettier-ignore
  const _datetimeFormats = ref<DateTimeFormatsType>(
    isPlainObject(options.datetimeFormats)
      ? options.datetimeFormats
      : { [_locale.value]: {} }
  )

  // prettier-ignore
  const _numberFormats = ref<NumberFormatsType>(
    isPlainObject(options.numberFormats)
      ? options.numberFormats
      : { [_locale.value]: {} }
  )

  // prettier-ignore
  const _missingWarn = isLocale
    ? root.missingWarn
    : isBoolean(options.missingWarn) || isRegExp(options.missingWarn)
      ? options.missingWarn
      : true

  // prettier-ignore
  const _fallbackWarn = isLocale
    ? root.fallbackWarn
    : isBoolean(options.fallbackWarn) || isRegExp(options.fallbackWarn)
      ? options.fallbackWarn
      : true

  // prettier-ignore
  const _fallbackRoot = isLocale
    ? root.fallbackRoot
    : isBoolean(options.fallbackRoot)
      ? options.fallbackRoot
      : true

  // configure fall back to root
  const _fallbackFormat = !!options.fallbackFormat

  // runtime missing
  const _missing = isFunction(options.missing) ? options.missing : null

  // postTranslation handler
  const _postTranslation = isFunction(options.postTranslation)
    ? options.postTranslation
    : null

  // prettier-ignore
  const _warnHtmlMessage = isLocale
    ? root.warnHtmlMessage
    : isBoolean(options.warnHtmlMessage)
      ? options.warnHtmlMessage
      : true

  const _escapeParameter = !!options.escapeParameter

  // prettier-ignore
  const _modifiers = isLocale
    ? root.modifiers
    : isPlainObject(options.modifiers)
      ? options.modifiers
      : {}

  // pluralRules
  const _pluralRules = options.pluralRules || (isLocale && root.pluralRules)

  // track reactivity
  function trackReactivityValues() {
    return [
      _locale.value,
      _fallbackLocale.value,
      _messages.value,
      _datetimeFormats.value,
      _numberFormats.value
    ]
  }

  // locale
  const locale = computed({
    get: () => {
      return _composer.value ? _composer.value.locale.value : _locale.value
    },
    set: val => {
      if (_composer.value) {
        _composer.value.locale.value = val
      }
      _locale.value = val
    }
  })

  // fallbackLocale
  const fallbackLocale = computed({
    get: () => {
      return _composer.value
        ? _composer.value.fallbackLocale.value
        : _fallbackLocale.value
    },
    set: val => {
      if (_composer.value) {
        _composer.value.fallbackLocale.value = val
      }
      _fallbackLocale.value = val
    }
  })

  // messages
  const messages = computed<LocaleMessages<LocaleMessage<Message>, Message>>(
    () => {
      if (_composer.value) {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        return _composer.value.messages.value as any
      } else {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        return _messages.value as any
      }
    }
  )

  const datetimeFormats = computed<DateTimeFormatsType>(
    () => _datetimeFormats.value
  )

  const numberFormats = computed<NumberFormatsType>(() => _numberFormats.value)

  function getPostTranslationHandler(): PostTranslationHandler<Message> | null {
    return _composer.value
      ? _composer.value.getPostTranslationHandler()
      : _postTranslation
  }

  function setPostTranslationHandler(
    handler: PostTranslationHandler<Message> | null
  ): void {
    if (_composer.value) {
      _composer.value.setPostTranslationHandler(handler)
    }
  }

  function getMissingHandler(): MissingHandler | null {
    return _composer.value ? _composer.value.getMissingHandler() : _missing
  }

  function setMissingHandler(handler: MissingHandler | null): void {
    if (_composer.value) {
      _composer.value.setMissingHandler(handler)
    }
  }

  function warpWithDeps<R>(fn: () => unknown) {
    trackReactivityValues()
    return fn() as R
  }

  function t(...args: unknown[]): string {
    return _composer.value
      ? warpWithDeps<string>(
          () => Reflect.apply(_composer.value!.t, null, [...args]) as string
        )
      : warpWithDeps<string>(() => '')
  }

  function rt(...args: unknown[]): string {
    return _composer.value
      ? Reflect.apply(_composer.value.rt, null, [...args])
      : ''
  }

  function d(...args: unknown[]): string {
    return _composer.value
      ? warpWithDeps<string>(
          () => Reflect.apply(_composer.value!.d, null, [...args]) as string
        )
      : warpWithDeps<string>(() => '')
  }

  function n(...args: unknown[]): string {
    return _composer.value
      ? warpWithDeps<string>(
          () => Reflect.apply(_composer.value!.n, null, [...args]) as string
        )
      : warpWithDeps<string>(() => '')
  }

  function tm(key: Path): LocaleMessageValue<Message> | {} {
    return _composer.value ? _composer.value.tm(key) : {}
  }

  function te(key: Path, locale?: Locale): boolean {
    return _composer.value ? _composer.value.te(key, locale) : false
  }

  function getLocaleMessage(locale: Locale): LocaleMessage<Message> {
    return _composer.value ? _composer.value.getLocaleMessage(locale) : {}
  }

  function setLocaleMessage(locale: Locale, message: LocaleMessage<Message>) {
    if (_composer.value) {
      _composer.value.setLocaleMessage(locale, message)
      _messages.value[locale] = message
    }
  }

  function mergeLocaleMessage(
    locale: Locale,
    message: LocaleMessageDictionary<Message>
  ): void {
    if (_composer.value) {
      _composer.value.mergeLocaleMessage(locale, message)
    }
  }

  function getDateTimeFormat(locale: Locale): DateTimeFormat {
    return _composer.value ? _composer.value.getDateTimeFormat(locale) : {}
  }

  function setDateTimeFormat(locale: Locale, format: DateTimeFormat): void {
    if (_composer.value) {
      _composer.value.setDateTimeFormat(locale, format)
      _datetimeFormats.value[locale] = format
    }
  }

  function mergeDateTimeFormat(locale: Locale, format: DateTimeFormat): void {
    if (_composer.value) {
      _composer.value.mergeDateTimeFormat(locale, format)
    }
  }

  function getNumberFormat(locale: Locale): NumberFormat {
    return _composer.value ? _composer.value.getNumberFormat(locale) : {}
  }

  function setNumberFormat(locale: Locale, format: NumberFormat): void {
    if (_composer.value) {
      _composer.value.setNumberFormat(locale, format)
      _numberFormats.value[locale] = format
    }
  }

  function mergeNumberFormat(locale: Locale, format: NumberFormat): void {
    if (_composer.value) {
      _composer.value.mergeNumberFormat(locale, format)
    }
  }

  const wrapper = {
    get id(): number {
      return _composer.value ? _composer.value.id : -1
    },
    locale,
    fallbackLocale,
    messages,
    datetimeFormats,
    numberFormats,
    get inheritLocale(): boolean {
      return _composer.value ? _composer.value.inheritLocale : _inheritLocale
    },
    set inheritLocale(val: boolean) {
      if (_composer.value) {
        _composer.value.inheritLocale = val
      }
    },
    get availableLocales(): Locale[] {
      return _composer.value
        ? _composer.value.availableLocales
        : Object.keys(_messages.value)
    },
    get modifiers(): LinkedModifiers {
      return (
        _composer.value ? _composer.value.modifiers : _modifiers
      ) as LinkedModifiers
    },
    get pluralRules(): PluralizationRules {
      return (
        _composer.value ? _composer.value.pluralRules : _pluralRules
      ) as PluralizationRules
    },
    get isGlobal(): boolean {
      return _composer.value ? _composer.value.isGlobal : false
    },
    get missingWarn(): boolean | RegExp {
      return _composer.value ? _composer.value.missingWarn : _missingWarn
    },
    set missingWarn(val: boolean | RegExp) {
      if (_composer.value) {
        _composer.value.missingWarn = val
      }
    },
    get fallbackWarn(): boolean | RegExp {
      return _composer.value ? _composer.value.fallbackWarn : _fallbackWarn
    },
    set fallbackWarn(val: boolean | RegExp) {
      if (_composer.value) {
        _composer.value.missingWarn = val
      }
    },
    get fallbackRoot(): boolean {
      return _composer.value ? _composer.value.fallbackRoot : _fallbackRoot
    },
    set fallbackRoot(val: boolean) {
      if (_composer.value) {
        _composer.value.fallbackRoot = val
      }
    },
    get fallbackFormat(): boolean {
      return _composer.value ? _composer.value.fallbackFormat : _fallbackFormat
    },
    set fallbackFormat(val: boolean) {
      if (_composer.value) {
        _composer.value.fallbackFormat = val
      }
    },
    get warnHtmlMessage(): boolean {
      return _composer.value
        ? _composer.value.warnHtmlMessage
        : _warnHtmlMessage
    },
    set warnHtmlMessage(val: boolean) {
      if (_composer.value) {
        _composer.value.warnHtmlMessage = val
      }
    },
    get escapeParameter(): boolean {
      return _composer.value
        ? _composer.value.escapeParameter
        : _escapeParameter
    },
    set escapeParameter(val: boolean) {
      if (_composer.value) {
        _composer.value.escapeParameter = val
      }
    },
    t,
    getPostTranslationHandler,
    setPostTranslationHandler,
    getMissingHandler,
    setMissingHandler,
    rt,
    d,
    n,
    tm,
    te,
    getLocaleMessage,
    setLocaleMessage,
    mergeLocaleMessage,
    getDateTimeFormat,
    setDateTimeFormat,
    mergeDateTimeFormat,
    getNumberFormat,
    setNumberFormat,
    mergeNumberFormat
  }

  function sync(composer: Composer): void {
    composer.locale.value = _locale.value
    composer.fallbackLocale.value = _fallbackLocale.value
    Object.keys(_messages.value).forEach(locale => {
      composer.mergeLocaleMessage(locale, _messages.value[locale])
    })
    Object.keys(_datetimeFormats.value).forEach(locale => {
      composer.mergeDateTimeFormat(locale, _datetimeFormats.value[locale])
    })
    Object.keys(_numberFormats.value).forEach(locale => {
      composer.mergeNumberFormat(locale, _numberFormats.value[locale])
    })
    composer.escapeParameter = _escapeParameter
    composer.fallbackFormat = _fallbackFormat
    composer.fallbackRoot = _fallbackRoot
    composer.fallbackWarn = _fallbackWarn
    composer.missingWarn = _missingWarn
    composer.warnHtmlMessage = _warnHtmlMessage
  }

  onBeforeMount(() => {
    if (instance.proxy == null || instance.proxy.$i18n == null) {
      throw createI18nError(I18nErrorCodes.NOT_AVAILABLE_COMPOSITION_IN_LEGACY)
    }
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const composer = (_composer.value = (instance.proxy.$i18n as any)
      .__composer as Composer)
    if (scope === 'global') {
      _locale.value = composer.locale.value
      _fallbackLocale.value = composer.fallbackLocale.value
      _messages.value = composer.messages.value
      _datetimeFormats.value = composer.datetimeFormats.value
      _numberFormats.value = composer.numberFormats.value
    } else if (isLocale) {
      sync(composer)
    }
  })

  return wrapper as unknown as Composer
}

export function mount(
  targetComponent: Parameters<typeof createApp>[0],
  i18n: I18n,
  options: Partial<MountOptions> = {}
): Promise<Wrapper> {
  const TargetComponent = targetComponent
  const installI18n = isBoolean(options.installI18n)
    ? options.installI18n
    : true
  return new Promise((resolve, reject) => {
    // NOTE: only supports props as an object
    const propsData = reactive(
      assign(
        // @ts-ignore
        initialProps(TargetComponent.props || {}),
        options.propsData
      )
    )

    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    function setProps(partialProps: Record<string, any>) {
      assign(propsData, partialProps)
      return nextTick()
    }

    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const slots: Record<string, (propsData: any) => VNode> = {}

    const Wrapper = defineComponent({
      emits: ['ready'],
      setup(_props, { emit }) {
        const componentInstanceRef = shallowRef<ComponentPublicInstance>()
        onErrorCaptured(err => {
          reject(err)
          return true
        })
        return () => {
          return h(
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            TargetComponent as any,
            {
              ref: componentInstanceRef,
              onVnodeMounted() {
                emit('ready', componentInstanceRef.value)
              },
              ...propsData
            },
            slots
          )
        }
      }
    })

    const app = createApp(Wrapper, {
      onReady: (instance: ComponentPublicInstance) => {
        resolve({ app, vm: instance, rootEl, setProps, html, find })
      }
    })

    if (options.provide) {
      const keys = getKeys(options.provide)

      for (const key of keys) {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        app.provide(key, options.provide[key as any])
      }
    }

    if (options.components) {
      for (const key in options.components) {
        app.component(key, options.components[key])
      }
    }

    if (options.slots) {
      for (const key in options.slots) {
        slots[key] = compileSlot(options.slots[key])
      }
    }

    installI18n && app.use(i18n)

    const rootEl = document.createElement('div')
    document.body.appendChild(rootEl)

    try {
      app.mount(rootEl)
    } catch (e) {
      return reject(e)
    }

    function html() {
      return rootEl.innerHTML
    }

    function find(selector: string) {
      return rootEl.querySelector(selector)
    }

    activeWrapperRemovers.push(() => {
      app.unmount()
      rootEl.remove()
    })
  })
}