profile
viewpoint
Eduardo San Martin Morote posva Freelance Paris https://esm.dev Member of the @vuejs core team Speaker, trainer. From 🇪🇸, lives in 🇫🇷

posva/catimg 846

🦦 Insanely fast image printing in your terminal

Gozala/selfish 159

Class-free, pure prototypal inheritance

brillout/awesome-vue-refactor 28

A curated list of awesome things related to Vue.js

ArthurSonzogni/CppBot 16

Portable C++ tools for bot creations : keyboard and mouse event generations, screen capture !

posva/clipboard-text 11

Simple and small copy-text-to-the-clipboard-utility with IE11 support

posva/configure-script 2

:zap: Simple script to generate Makefiles for your project. It's mainly aimed for C/C++ but can be adapted to other languages

bemug/spark-make 1

A Spark implementation of distributed Makefile

posva/2d-collisions 1

Collision for 2D using the SAT theorem with Rectangles

issue commentvuejs/rfcs

async setup usability

Then someone might have published a sync useWhatever on npm, which uses onUnmounted from the global export. I want to write useFrobAsync, which needs to call useWhatever. Without me even noticing I wrote code that doesn't work. Worse: I can't fix it, because the fix has to be done in useWhatever and that's someone else's code.

You have fragmented the ecosystem into those that are async-compatible and those that aren't. Worse: because global import is much more convenient and existed since v3.0, that's what everyone will do by default -- and not work in async code.

Also, there's now two ways to do the same thing, which is always confusing. And not only is it two ways to author a composable, it's also two ways consume it.

jods4

comment created time in 21 minutes

startedantfu/p5i

started time in an hour

issue commentvuejs/rfcs

async setup usability

Nothing has to change about existing code.

jods4

comment created time in an hour

Pull request review commentvuejs/vue-next

fix(runtime-dom): skip set transitionProperty if has no cachedTransition

 export function resolveTransitionProps(       // the transition starts. This is applied for enter transition as well       // so that it accounts for `visibility: hidden` cases.       const cachedTransition = (el as HTMLElement).style.transitionProperty-      ;(el as HTMLElement).style.transitionProperty = 'none'+      if (cachedTransition) {

This way will reopen #2593, maybe a better way is needed to fixed both of issues.

edison1105

comment created time in 2 hours

issue commentvuejs/vue-next

Cannot use v-for in the slot

Then provide a valid reproduction, it's still the same code:

Screen Shot 2020-12-03 at 10 15 40

Sorry, just debugging the code. I have updated the code https://codesandbox.io/s/hungry-feynman-fxs6i on this link

dkkfk

comment created time in an hour

issue commentvuejs/rfcs

async setup usability

That is an interesting take on the problem. It is breaking all code written against the already released v3.0, so I'm not sure if it's something we can consider.

Vue 3 exposed all its hooks as globally imported functions. To be effective, this idea requires that the only way to get them is passed into parameters by Vue, so the global imports need to be removed. That's a massive API change after release.

jods4

comment created time in an hour

issue commentvuejs/vue-next

FLIP Animation not applied when first item spliced

It happend because transition-property: none will be added to el as inline style on the first frame, so a workaround way is using transition-property: all !important; to cover it.

crutchcorn

comment created time in 2 hours

issue commentvuejs/vue-next

Cannot use v-for in the slot

I don't get an error (could be a cache problem of Codesandbox) but you are using the same key for all of your todos, they must be different.

Thanks, updated the new code is not a problem with keys

dkkfk

comment created time in 2 hours

issue closedvuejs/composition-api

How to pass a ref to a method/function argument without unwrapping?

We're using the Vue Composition API and would like to pass a ref object, not just the value, as an argument to a function. Some code to clarify:

import { defineComponent, ref } from '@vue/composition-api'

export default defineComponent({
  setup() {
    const driverId = ref()
    const truckId = ref()

    const clearDriverId = () => {
      driverId.value = null
    }

The code above works fine, but we need to duplicate the function clearDriverId for the truckId too. That's why we would like to create something like this:

    const clearField = (field: Ref) => {
      field.value = null
    }

Accessed from the template:

<q-input
  label="Driver ID"
  v-model="driverId"
>
  <template v-slot:append>
    <q-icon
      name="close"
      @click.stop="clearField(driverId)"
    />
  </template>
</q-input>

Of course, this does not work because the ref driverId gets unwrapped when passed from the template to the function. What is the correct way to pass a complete ref object to a function?

We already asked this question on StackOverflow and in the Vue forum.

closed time in 2 hours

DarkLite1

issue commentvuejs/composition-api

How to pass a ref to a method/function argument without unwrapping?

You can send the object in a nested object, that will guarantee that the object will not be unwrapped by the template.

There's also a request to create an API for that https://github.com/vuejs/vue-next/issues/1691

We already asked this question on StackOverflow and in the Vue forum.

On the stackoverflow the answer should work.

Here's a cleaner way to do it.

export default defineComponent({
  setup() {
    const driverId = ref()
    const truckId = ref()

    const clearDriverId = () => {
      driverId.value = null
    }
   
    return {
      //driverId, // it will unwrap 
      selected: {
        driverId, // it does not unwrap
      }
  }
})

For questions please wait a bit longer before opening an issue on github, you can also ask on discord

DarkLite1

comment created time in 2 hours

issue commentvuejs/composition-api

Provides functionality common to all JavaScript objects.

Sorry and thanks @danielroe , problem solved , parserOptions.parser:'babel-eslint' -> parserOptions.parser:'@typescript-eslint/parser'

likeswinds

comment created time in 2 hours

startedSamVerschueren/tsd

started time in 2 hours

issue openedvuejs/vue-next

Cannot use v-for in the slot

Version

3.0.4

Reproduction link

https://codesandbox.io/s/9y5ox

Steps to reproduce

When using v-for in the slot, if the initial list object = [], an error will be reported directly in the subsequent push

What is expected?

Correctly perform responsive rendering

What is actually happening?

Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next


Found this problem in 3.0.4

<!-- generated by vue-issues. DO NOT REMOVE -->

created time in 2 hours

issue commentvuejs/composition-api

Provides functionality common to all JavaScript objects.

@likeswinds Yes, that is an eslint issue, nothing to do with the composition API. Make sure your eslint understands TypeScript - see https://github.com/typescript-eslint/typescript-eslint

likeswinds

comment created time in 2 hours

issue closedvuejs/composition-api

Provides functionality common to all JavaScript objects.


import { defineComponent, PropType } from '@vue/composition-api'
import { ComponentOption } from '@dx/shared'

export default defineComponent({
  props: {
    component: {
      type: Object as PropType<ComponentOption>
    }
  }
}

eslint error ?

image

closed time in 2 hours

likeswinds

issue commentvuejs/composition-api

Provides functionality common to all JavaScript objects.

Make sure you are using TypeScript and your issue does not relate to this project. Ask questions on Stackoverflow, Discord or forum next time.

likeswinds

comment created time in 2 hours

issue commentvuejs/composition-api

How to pass a ref to a method/function argument without unwrapping?

I am not very sure about this, but AFAIK, you can get the reference in template without markRaw or some kind of hack. I'd suggest you create functions with the refs in their closure or create a factory to do that in order to be resued.

DarkLite1

comment created time in 2 hours

issue openedvuejs/composition-api

Provides functionality common to all JavaScript objects.


import { defineComponent, PropType } from '@vue/composition-api'
import { ComponentOption } from '@dx/shared'

export default defineComponent({
  props: {
    component: {
      type: Object as PropType<ComponentOption>
    }
  }
}

eslint error ?

image

created time in 2 hours

startedposva/vue-promised

started time in 2 hours

startedposva/catimg

started time in 2 hours

PR opened vuejs/vue-next

fix(runtime-dom): skip set transitionProperty if has no cachedTransition

close #2712

+6 -2

0 comment

1 changed file

pr created time in 3 hours

issue commentvuejs/vue-next

RenderToString does not support ref type teleport

I understand your kind answer, but I still have some questions.

  • Based on the result code of renderToString using id or ref, Does not the server-side rendering code expose the teleport template?
  • If made source using ref and v-if (<a href="https://github.com/vuejs/vue-next/blob/master/packages/runtime-core/tests/components/Teleport.spec.ts#L38-L54">Like an example link</a>), where would the reference be kept and processed after mounted?
hoiheart

comment created time in 3 hours

issue commentvuejs/vue-next

FLIP Animation not applied when first item spliced

caused by this commit e2618a632d4add2819ffb8b575af0da189dc3204

crutchcorn

comment created time in 3 hours

issue commentwhatwg/url

IPv4 number parser: "If input is the empty string, then return 0. "

Nice! The number parser should say

return (0, validationError)

or even

return (0, true)

as it will always be true.

Let's see if someone is interested in taking this on. (Note that you'll need to sign https://participate.whatwg.org/agreement in order to do so.)

smilingthax

comment created time in 3 hours

issue openedvuejs/composition-api

How to pass a ref to a method/function argument without unwrapping?

We're using the Vue Composition API and would like to pass a ref object, not just the value, as an argument to a function. Some code to clarify:

import { defineComponent, ref } from '@vue/composition-api'

export default defineComponent({
  setup() {
    const driverId = ref()
    const truckId = ref()

    const clearDriverId = () => {
      driverId.value = null
    }

The code above works fine, but we need to duplicate the function clearDriverId for the truckId too. That's why we would like to create something like this:

    const clearField = (field: Ref) => {
      field.value = null
    }

Accessed from the template:

<q-input
  label="Driver ID"
  v-model="driverId"
>
  <template v-slot:append>
    <q-icon
      name="close"
      @click.stop="clearField(driverId)"
    />
  </template>
</q-input>

Of course, this does not work because the ref driverId gets unwrapped when passed from the template to the function. What is the correct way to pass a complete ref object to a function?

We already asked this question on StackOverflow and in the Vue forum.

created time in 3 hours

issue commentvuejs/vue-next

没有中文文档

加载的巨慢......跟vue2官网天壤之别

ryan0562

comment created time in 3 hours

issue closedvuejs/vue-next

没有中文文档

What problem does this feature solve?

vue3发布这么久了,啥时候能出一份中文文档呀

What does the proposed API look like?

中文文档的必要性以及CDN

<!-- generated by vue-issues. DO NOT REMOVE -->

closed time in 3 hours

ryan0562

issue commentvuejs/vue-next

没有中文文档

https://v3.cn.vuejs.org/

ryan0562

comment created time in 3 hours

issue openedvuejs/vue-next

没有中文文档

What problem does this feature solve?

vue3发布这么久了,啥时候能出一份中文文档呀

What does the proposed API look like?

中文文档的必要性以及CDN

<!-- generated by vue-issues. DO NOT REMOVE -->

created time in 3 hours

issue commentvuejs/vue-next

RenderToString does not support ref type teleport

My previous comment was wrong.

If we remove the v-if="svg", the bug might be more clear.

hoiheart

comment created time in 4 hours

more