profile
viewpoint
Reed Jones reed-jones @PDERAS Consulting Inc. Dunster, BC https://www.reedjones.com Using glorified string manipulation tactics to create things on the internet.

reed-jones/courant 2

Renderless Vue3 Components, to get up and running with WebRTC fast 🚀

reed-jones/DiscoverMovies 1

A Laravel based movie exploration site.

erinjhowe/trails 0

Started as a catalog project for a PHP class, this website aims to help outdoor enthusiasts find the information on hiking trails in the Robson Valley.

PDERAS/chronicle 0

A laravel package that provides the framework for a note sharing application.

PDERAS/dragon-drop 0

A simple to use Dragon Drop Library

startedtwitter/birdwatch

started time in 4 hours

issue commentvuejs/rfcs

Alternative idea to simplify reactive code

If anyone wants to play with this, I built a working prototype that you can use with Vite. Look here: https://github.com/jods4/vite-auto-ref

It should work in <script setup>, plain old SFC <script> or even any JS/TS file.

If you try it and have some feedback about the idea, here's a good place to post.

If the Vite plugin has bugs, open an issue in the linked repo and I'll see if I can fix it.

jods4

comment created time in 5 hours

startedShopify/preact-testing

started time in 8 hours

startedleanprover-community/mathlib

started time in 15 hours

pull request commentvuejs/rfcs

New `script setup` (without ref sugar)

@Knacktus

I wonder if we could get rid of the parameter then.

We can't because it's the event names that consumers will bind to: <Comp @saved="..."> so Vue needs to know it.

Unless your suggesting that the defineEmit is only usable in a variable assignment and that the transform reads the name of the target variable -- which I think is going a bit too far. Assignment target is not generally perceived as function input in JS.

yyx990803

comment created time in 21 hours

pull request commentvuejs/rfcs

New `script setup` (without ref sugar)

@duansheli there is a PR to fix this issue in vue-next https://github.com/vuejs/vue-next/pull/2729

As a workaround, you can change the order of imports, so that defineEmit and defineProps are trailing.

yyx990803

comment created time in a day

pull request commentvuejs/rfcs

New `script setup` (without ref sugar)

导入顺序不同会报错

image

<template>
  <h2>666</h2>
</template>

<script setup  lang="ts">
// bad
import { defineProps, defineEmit, useContext } from "vue";

// good
// import { defineProps,  useContext, defineEmit } from "vue";
</script>
yyx990803

comment created time in a day

startedkenwheeler/mcfly

started time in a day

pull request commentvuejs/rfcs

New `script setup` (without ref sugar)

@jods4

Great suggestions. I think the separation into single event definitions is the most readable. So, I'd prefer this one.

// Define emits one at a time:
const added = defineEmit<(what: string) => void>("added");
const moved = defineEmit<(what: string, where: number) => void>("moved");

I wonder if we could get rid of the parameter then.

// Define emits one at a time:
const added = defineEmit<(what: string) => void>();
const moved = defineEmit<(what: string, where: number) => void>();

added("abc);
moved("xyz", 4);
yyx990803

comment created time in a day

startedsindresorhus/execa

started time in a day

startedlukejacksonn/servor

started time in a day

pull request commentvuejs/rfcs

New `script setup` (without ref sugar)

@duansheli Do this:

<script setup lang="ts">
import { defineProps } from "vue";
import type { PropType } from "vue";
</script>
yyx990803

comment created time in a day

created repositoryMar4elius/f1-app

Vue 3 app

created time in a day

created repositoryAnalogJ/bitnami-docker-mediawiki

Modified version of bitnami-docker-mediawiki to remove MyISAM

created time in a day

pull request commentvuejs/rfcs

New `script setup` (without ref sugar)

How can I import typescript types with the script setup sugar?

This

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { get } from '../plugins/fetch';
import { Movie } from '../types/radarr';
import { RADARR_MOVIES } from '../plugins/fetch/routes/radarr';

const movies = ref([] as Movie[]);

onMounted(async (): Promise<void> => {
    movies.value = await get<Movie[]>(RADARR_MOVIES);
});
</script>

gives me an "Uncaught SyntaxError: import not found: Movie".

I've tried moving the type import to the non setup script tag, but it has the same effect. Any tips for this?

yyx990803

comment created time in a day

issue openedvuejs/rfcs

Add forwardRef API to make it possible let component handle ref itself

When we pass ref to a component or DOM element, the ref will point to component instance or DOM element which handled by Vue internally.

In some case we may want to handle ref ourself. For example, if I want wrapper a Input component but just want to handle some logic when use input. I maight do:

const Input = defineComponent({
  setup() {

    const localHandleInput = () => {}
    return () => <input onInput={localHandleInput} />
  }
})

At this case I don't want the ref passed to the component just point to the component instance because it's nothing there. I want to point the ref to the real input DOM element, by now I did not find any way to implement this.

Maybe we need to add some api like forwardRef in React, or add an forwardRef option when defineComponent. Then Vue pass the ref handler into the setup method, so that we can handle ref ourself.

const Input = defineComponent({
  forwardFef: true,
  setup(props, { ref }) {

    const localHandleInput = () => {}
    return () => <input onInput={localHandleInput} ref={ref} />
  }
})

created time in 2 days

PR closed vuejs/rfcs

vue-router Data Store

Summary

Maintain a store by history state key. Can be used to save something.

Links

<!-- Link to a GitHub-rendered version of your RFC, e.g. https://github.com/<USERNAME>/rfcs/blob/<BRANCH>/active-rfcs/0000-my-proposal.md You can find this link by navigating to this file on your branch. -->

  • Full Rendered Proposal <!-- Please open and link to a corresponding discussion thread (under "Discussion" tab of the repo). After submitting the PR, make sure to edit the discussion to link to this PR. -->

  • Related issue

<!-- include additional links to related issues if applicable -->

+41 -0

1 comment

1 changed file

hezedu

pr closed time in 2 days

pull request commentvuejs/rfcs

vue-router Data Store

Thank you but as I already said, this is not something the router needs, even less expose it as a public api

hezedu

comment created time in 2 days

pull request commentvuejs/rfcs

New `script setup` (without ref sugar)

两句报错信息:

Uncaught (in promise) TypeError: Cannot destructure property 'default' of 'undefined' as it is undefined.

does not provide an export named 'PropType'

组件代码

<template>
  <h2>666</h2>
</template>

<script setup  lang="ts">
import { defineProps, PropType } from "vue";

// defineProps({
//   abc: { type: Array as PropType<Person[]> },
// });
</script>

<style scoped>
</style>

触发条件

导出了 PropType

yyx990803

comment created time in 2 days

startedhjvedvik/tasks

started time in 2 days

fork developit/AutonomousControl

Reverse engineering the controller that comes with the autonomous smart desks

fork in 2 days

startedpinterest/esprint

started time in 2 days

startedtedeh/jayson

started time in 2 days

startedamasad/sane

started time in 2 days

PullRequestEvent

PR closed vuejs/rfcs

vue-router Data store

Summary

<!-- Short summary on what problem this RFC solves, and concise example usage of the feature -->

Links

<!-- Link to a GitHub-rendered version of your RFC, e.g. https://github.com/<USERNAME>/rfcs/blob/<BRANCH>/active-rfcs/0000-my-proposal.md You can find this link by navigating to this file on your branch. -->

<!-- Please open and link to a corresponding discussion thread (under "Discussion" tab of the repo). After submitting the PR, make sure to edit the discussion to link to this PR. -->

<!-- include additional links to related issues if applicable -->


Important: Do NOT comment on this PR. Please use the discussion thread linked above to provide feedback, as it provides branched discussions that are easier to follow. This also makes the edit history of the PR clearer.

+41 -0

0 comment

1 changed file

hezedu

pr closed time in 2 days

PR opened vuejs/rfcs

vue-router Data store

Summary

<!-- Short summary on what problem this RFC solves, and concise example usage of the feature -->

Links

<!-- Link to a GitHub-rendered version of your RFC, e.g. https://github.com/<USERNAME>/rfcs/blob/<BRANCH>/active-rfcs/0000-my-proposal.md You can find this link by navigating to this file on your branch. -->

<!-- Please open and link to a corresponding discussion thread (under "Discussion" tab of the repo). After submitting the PR, make sure to edit the discussion to link to this PR. -->

<!-- include additional links to related issues if applicable -->


Important: Do NOT comment on this PR. Please use the discussion thread linked above to provide feedback, as it provides branched discussions that are easier to follow. This also makes the edit history of the PR clearer.

+41 -0

0 comment

1 changed file

pr created time in 2 days

startedHarringayMakerSpace/ESP-Now

started time in 2 days

startedForbesLindesay/throat

started time in 2 days

startedAnidetrix/rollup-plugin-styles

started time in 2 days

more