Vue TypeScript Friendly Class API about rfcs HOT 13 CLOSED

There are inherent issues with using Class based componets in general. It's the motivation for why React came up with hooks.

Please read....https://reactjs.org/docs/hooks-intro.html#classes-confuse-both-people-and-machines

However, we found that class components can encourage unintentional patterns that make these optimizations fall back to a slower path. Classes present issues for today’s tools, too. For example, classes don’t minify very well, and they make hot reloading flaky and unreliable. We want to present an API that makes it more likely for code to stay on the optimizable path.

I'm sure this is also what Evan knows and understands and is trying to avoid. 😃

Scott

from rfcs.

I tried to create a sketch of the API design,

Demo available https://stackblitz.com/edit/vue-ts-class-api-0001

// A quick sketch of the API Design
// Not an actual Vue app
abstract class Component<TProps, TState>{  
  protected abstract data(): TState;    
  protected state: TState;
  abstract render();  
  
  constructor(protected props: TProps, protected onRefresh: (c: Component<TProps, TState>) => void) {
    this.constructProxyFromData();
    // This is to simulate Vue rendering logic
    this.onRefresh(this);
  }
  private constructProxyFromData(){
    const obj = this.data();
    this.state = new Proxy(obj as any, {
      set: (obj, prop, val) =>{
        obj[prop] = val;        
        this.onRefresh(this);        
        return true;
      }
    }) as any;    
  }
}

class Counter extends Component<{
  counter: number
}, {
  counter: number
}>{

  data(){
    return {
      counter: this.props.counter
    }
  }

  render(){
    // This would be the template in real Vue app
    return `<h1>Counter ${this.state.counter}</h1>`;
  }

  click(){
    // Simulates a button click
    this.state.counter++;
  }

}


const appDiv = document.getElementById("app");
// This would be written as <Counter counter="1" /> in template
const counter = new Counter({
  counter: 1
}, (c)=> { // simulates Vue rendering logic
  appDiv.innerHTML = c.render();
});

// Simulates click
setInterval(()=>counter.click(), 1000);

from rfcs.

I believe this is no longer relevant as we have better TypeScript support now. As the issue poster, I won't mind if this issue is closed. Thank you to everyone involved on this discussion.

cc @LinusBorg Please feel free to either close or keep this issue opens depending on your insight. Thank you!

from rfcs.

Hi, thanks for wanting to contribute with an RFC.

However, you posted this as an issue whereas RFC are done as Pull requests.

So please follow these steps:

1. fork this repository.
2. in your fork, write out our proposal in a markdown file in the /active-rfcsdirectory, preferably in its own branch
3. open a Pull request from your fork to this main repository.
4. In the PRs comment body, give short Summary of your PR, then link to the rendered version of the md file that you added.
5. Close this issue, as discussions should happen in the PR comments.

Please see existing RFCs for examples. If you have any more questions, feel free to ask here.

from rfcs.

Also, your RFC should address points from the abandoned class API RFC that we already had, and how your approach intends to solve them or why they don't apply etc.

#17

from rfcs.

Hi @LinusBorg and thank you for responding!

I am creating this as an issue because I wanted to have a discussion first about this with others, following:

Gathering feedback before submitting
It's often helpful to get feedback on your concept before diving into the level of API design detail required for an RFC. You may open an issue on this repo to start a high-level discussion, with the goal of eventually formulating an RFC pull request with the specific implementation design.

At the meantime, while gathering more feedback - I am currently trying to implement a PoC for this API.

If a discussion in a PR is preferred, I would close this issue and starts working on the PR.

Thank You!

from rfcs.

Ah, I see. Well, that's totally fine. It's just that you already wrote the issue in the formulaic way of the actual RFC, so I thought you wanted to submit it as an RFC directly.

It's fine to discuss here, just make sure to give some context at the beginning of your post that this is not yet meant as an RFC. Otherwise people might be confused, as evidenced by me :-P

from rfcs.

Oops, sorry for the confusion @LinusBorg - I edited the issue description, I hope it doesn't cause any more confusion. Sorry!

from rfcs.

Maybe TypeScript Transformer Plugin(typescript.CustomTransformers) is a possible way?

from rfcs.

Hi @lovetingyuan, what would be the use case for the transformer plugin as I never used it?

from rfcs.

Using mobx we can build a ui framework-independent data layer. You are free to choose to use vue or react.
And It has TypeScript Friendly Class API.

from rfcs.

Also, your RFC should address points from the abandoned class API RFC that we already had, and how your approach intends to solve them or why they don't apply etc.

#17

Now that class component is not support in Vue3, is there anyway to migrate vue2 class component to vue3 component? @LinusBorg

from rfcs.

The vue-class-component is still being supported and has seen a release that's compatible with Vue 3.

so just continue using this.

the class API just won't be integrated into Vue core, which the dropped RFC was about.

from rfcs.