vue#shallowReactive TypeScript Examples

The following examples show how to use vue#shallowReactive. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: common.ts    From awakened-poe-trade with MIT License 6 votes vote down vote up 
RATE_LIMIT_RULES = {
  SEARCH: shallowReactive(new Set([
    new RateLimiter(1, 5)
  ])),
  EXCHANGE: shallowReactive(new Set([
    new RateLimiter(1, 5)
  ])),
  FETCH: shallowReactive(new Set([
    new RateLimiter(1, 5)
  ]))
}
Example #2
Source File: document.ts    From quantum-sheet with GNU General Public License v3.0 6 votes vote down vote up 
function useElementSelection() {
  const selectedElements = shallowReactive<Set<QuantumElement>>(new Set())

  function watchElement(element: QuantumElement) {
    const stopHandle = watchImmediate(element.selected, (value: boolean) => {
      if (value) {
        selectedElements.add(element)
      } else {
        selectedElements.delete(element)
      }
    })

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

  function setSelection(...elements: QuantumElement[]) {
    selectedElements.forEach((e: QuantumElement) => e.setSelected(false))
    elements.forEach((e) => e.setSelected(true))
  }

  return {
    selectedElements,
    setSelection,
    watchElement,
  }
}
Example #3
Source File: RateLimiter.ts    From awakened-poe-trade with MIT License 5 votes vote down vote up 
stack = shallowReactive<ResourceHandle[]>([])
Example #4
Source File: document-storage.ts    From quantum-sheet with GNU General Public License v3.0 5 votes vote down vote up 
files = shallowReactive<Map<string, DatabaseFile>>(new Map<string, DatabaseFile>())
Example #5
Source File: document.ts    From quantum-sheet with GNU General Public License v3.0 5 votes vote down vote up 
/**
 * Keeps track of the element positions in an ordered list. Also takes care of setting the element-scopes.
 *
 * There is no "element-inserted" callback, instead elements can wait until their scope stops being `undefined`
 */
function useElementList() {
  const elements = shallowReactive<QuantumElement[]>([])

  /** Watches an element's position. Returns a function to stop the watcher. */
  function watchElement(element: QuantumElement) {
    const stopWatcher = watchImmediate(element.position, (value: Vector2) => {
      // New index
      let { index } = arrayUtils.getBinaryInsertIndex(elements, (a) => a.position.value.compareTo(value))

      // Element is still in the same position
      if (arrayUtils.at(elements, index) === element) {
        return
      }

      const prev = arrayUtils.at(elements, index - 1)
      if (prev?.typeName == ScopeElementType.typeName) {
        element.setScope(prev as ScopeElement)
      } else {
        element.setScope(prev?.scope.value)
      }

      // Move by remove-adding the element
      arrayUtils.remove(elements, element)
      elements.splice(index, 0, element)
    })

    return () => {
      stopWatcher()
      element.setScope(undefined)
      arrayUtils.remove(elements, element)
    }
  }

  /** Gets an element at a given position, useful for when the user clicks somewhere in the document. */
  function getElementAt(position: Vector2) {
    const posX = position.x
    const posY = position.y
    for (let i = elements.length - 1; i >= 0; i--) {
      let element = elements[i]
      let x = element.position.value.x
      let y = element.position.value.y
      if (y <= posY && posY <= y + element.size.value.y && x <= posX && posX <= x + element.size.value.x) {
        return element
      }
    }

    return undefined
  }

  return {
    elements,
    watchElement,
    getElementAt,
  }
}
Example #6
Source File: expression-element.ts    From quantum-sheet with GNU General Public License v3.0 5 votes vote down vote up 
readonly getters: Map<string, UseScopedGetter> = shallowReactive(new Map<string, UseScopedGetter>())
Example #7
Source File: expression-element.ts    From quantum-sheet with GNU General Public License v3.0 5 votes vote down vote up 
readonly variables: Map<string, UseScopedVariable> = shallowReactive(new Map<string, UseScopedVariable>())
Example #8
Source File: RouteLayoutSource.ts    From convue with MIT License 5 votes vote down vote up 
export function createRouterLayout(
  resolve: (layoutName: string) => Promise<Component | { default: Component }>,
) {
  return defineComponent({
    name: 'RouterLayout',

    async beforeRouteEnter(to, _from, next) {
      const name = to.meta.layout || 'default'
      const layoutComp = name
        ? ((await resolve(name)) as any).default
        : undefined

      next((vm: any) => {
        vm.layoutName = name
        if (name && layoutComp)
          vm.layouts[name] = layoutComp
      })
    },

    async beforeRouteUpdate(to, _from, next) {
      try {
        const name = to.meta.layout || 'default'
        if (name && !this.layouts[name])
          this.layouts[name] = ((await resolve(name)) as any).default

        this.layoutName = name
        next()
      }
      catch (error) {
        next(error)
      }
    },

    data() {
      return {
        layoutName: undefined as string | undefined,
        layouts: shallowReactive(
          Object.create(null) as Record<string, Component>,
        ),
      }
    },

    render(): VNode {
      const layout = this.layoutName && this.layouts[this.layoutName]
      if (!layout)
        return h('span')

      return h(layout as ConcreteComponent, {
        key: this.layoutName,
      })
    },
  })
}