Upgrade to Vue v3 or move back to React.js
Nobody has claimed this yet.
Assessment
- Difficulty
- 5/5
- Estimated time
- Over a week
- Newbie friendliness
- 20/100
- Issue type
- Refactor
- Clarity
- Needs clarification
- Activity status
- Stale
- Tech stack
- javascript, react, ruby
- Domain
- frontend
Research direction
Start by reading the existing requires for ruby2js/filter/vue and the classes defined in .js.rb files. Compare the current Vue-generated JavaScript with the documented Vue 3 API, or investigate replacing those requires and Vue inheritance with ruby2js/filter/react and React. Done means the agenda, secretary workbench, and roster applications work consistently after the chosen migration.
Written by the indexing model from the issue text.
Description
Not urgent, but this work should be planned for. Summary
- Vue.js version 3 was released in September of 2020. It is not exaggerating much to say that pretty much every API we used has changed. Details below.
- Previously the agenda, secretary workbench, and roster apps were built using React, but we moved away from that when React changed to a non-open source license. React changed their license back shortly after this work was completed. They were aware of our moving away due to licensing issues, and this may have contributed to their change of heart, but at that point it didn't seem worth spending the effort to migrate back.
In Ruby syntax, a minimal application looks like the following:
class C < Vue
def render
_span "hi"
end
end
Vue.render '#greetings' do
_C
end
The above currently compiles to the following JavaScript:
var C = Vue.component(
"c-",
{render: function($h) {return $h("span", "hi")}}
);
new Vue({el: "#foo", render: function($h) {return $h(C)}})
With V3:
componentis no longer a method onVue. Instead one needs to callcreateApp, andcomponentis a method on the app.rendermethods no longer are passed an argument. Instead, one is expected to callVue.h.new Vueno longer works; instead one needs to callmounton the app.
After a day's worth of effort, I've gotten close, but I still haven't found a combination of calls that is equivalent to the above. Once that is done, I don't know what else has changed.
To be fair, Vue discourages the use of these APIs; they recommend creating HTML templates and mounting data onto the templates instead.
During this same time, the React API has remained stable, mostly with some additions that don't much matter to us.
If the requires for ruby2js/filter/vue were replaced with requires for ruby2js/filter/react and each of the classes defined in .js.rb files were changed to inherit from React instead of Vue, the code would nearly work.
- Vue lifecyle methods are a bit different than React lifecycle methods. Some of the mappings are straightforward Vue's
createdis roughly the same as React'scomponentDidMount. Others are subtly different and need to be investigated on a case by case basis. - React event handler names are a bit different. If you want to have a method called every time someone enters a character in an input field, you would define this with
onChangeinstead ofonInput.
I really don't think that there was much more to it than that. This would not be a particularly difficult task, but it does represent a non-trivial amount of effort given the number of source files involved.
In case it isn't obvious, my recommendation is to move back to React.
- Dominant language
- Ruby
- Stars
- 126
- Forks
- 101
- Avg merge
- 4h 37m
- Merged PRs (30d)
- 3
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from apache/whimsy
-
Difficulty 3/5 1-2 days Newbie friendliness 35/100
-
Difficulty 3/5 1-2 days Newbie friendliness 30/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 48/100
-
How to file ICLAs Open
Difficulty 5/5 Over a week Newbie friendliness 25/100
Similar issues
-
user-reported
Difficulty 2/5 1-3 hours Newbie friendliness 85/100
Kong/developer.konghq.com#7316 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
TheOdinProject/curriculum#31408 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
bensheldon/good_job#1816 · 5 comments ·
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
notch8/utk_knapsack#148 ·
-
Difficulty 1/5 Under an hour Newbie friendliness 78/100
Homebrew/homebrew-cask#288729 · 1 comment ·