You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@whimsical.apache.org by ru...@apache.org on 2017/09/03 18:24:51 UTC

[whimsy] branch roster_on_vue created (now a146f65)

This is an automated email from the ASF dual-hosted git repository.

rubys pushed a change to branch roster_on_vue
in repository https://gitbox.apache.org/repos/asf/whimsy.git.


      at a146f65  Convert Roster tool from React.js to Vue.js

This branch includes the following new commits:

     new a146f65  Convert Roster tool from React.js to Vue.js

The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.


-- 
To stop receiving notification emails like this one, please contact
['"commits@whimsical.apache.org" <co...@whimsical.apache.org>'].

[whimsy] 01/01: Convert Roster tool from React.js to Vue.js

Posted by ru...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

rubys pushed a commit to branch roster_on_vue
in repository https://gitbox.apache.org/repos/asf/whimsy.git

commit a146f65b6d83a630d2f3864ee6ca591c7b392c1f
Author: Sam Ruby <ru...@intertwingly.net>
AuthorDate: Sun Sep 3 14:22:43 2017 -0400

    Convert Roster tool from React.js to Vue.js
    
    Depends on new logic in wunderbar and ruby2js.
    
    Additionally:
    
      classes inherits from Vue instead of React
    
      lifecycle methods name changes, e.g.:
        componentWillReceiveProps => created
        componentDidMount => mounted
    
      React specific methods:
        self.forceUpdate => Vue.forceUpdate
    
      form changes
        onChange => onInput or onClick depending on the element type
        defaultValue => value
    
      logic changes:
        need to pass event as a separate property so that updates are propagated
    
        previous logic depended on react specific properties (state, props),
        for now, I've made a copy of Vue equivalents in these names.  This was
        only done in one place.
---
 www/roster/Gemfile                     |  2 +-
 www/roster/main.rb                     |  2 +-
 www/roster/views/committerSearch.js.rb |  7 +++---
 www/roster/views/confirm.js.rb         |  2 +-
 www/roster/views/group.js.rb           | 15 +++++--------
 www/roster/views/person.js.rb          | 41 +++++++++++++++-------------------
 www/roster/views/person/email.js.rb    |  2 +-
 www/roster/views/person/forms.js.rb    |  2 +-
 www/roster/views/person/fullname.js.rb | 10 ++++-----
 www/roster/views/person/github.js.rb   |  6 ++---
 www/roster/views/person/memstat.js.rb  |  4 ++--
 www/roster/views/person/memtext.rb     |  6 ++---
 www/roster/views/person/pgpkeys.js.rb  |  2 +-
 www/roster/views/person/sascore.js.rb  |  6 ++---
 www/roster/views/person/sshkeys.js.rb  |  3 +--
 www/roster/views/person/urls.js.rb     |  2 +-
 www/roster/views/pmc/add.js.rb         |  6 ++---
 www/roster/views/pmc/committers.js.rb  | 11 +++------
 www/roster/views/pmc/main.js.rb        | 13 ++++-------
 www/roster/views/pmc/mod.js.rb         |  4 ++--
 www/roster/views/pmc/pmc.js.rb         | 23 ++++---------------
 www/roster/views/pmc/roster.js.rb      |  2 +-
 www/roster/views/ppmc/add.js.rb        |  4 ++--
 www/roster/views/ppmc/committers.js.rb | 11 +++------
 www/roster/views/ppmc/graduate.js.rb   |  2 +-
 www/roster/views/ppmc/main.js.rb       | 13 ++++-------
 www/roster/views/ppmc/members.js.rb    | 11 +++------
 www/roster/views/ppmc/mentors.js.rb    | 11 +++------
 www/roster/views/ppmc/mod.js.rb        |  4 ++--
 www/roster/views/ppmc/roster.js.rb     |  2 +-
 30 files changed, 87 insertions(+), 142 deletions(-)

diff --git a/www/roster/Gemfile b/www/roster/Gemfile
index 2aa2dd3..1a6dd03 100644
--- a/www/roster/Gemfile
+++ b/www/roster/Gemfile
@@ -13,7 +13,7 @@ else
 end
 
 gem 'rake'
-gem 'wunderbar', '~> 1.1.1'
+gem 'wunderbar', '~> 1.2'
 gem 'ruby2js', '>= 2.0.0'
 gem 'sinatra', '~> 2.0'
 gem 'nokogumbo'
diff --git a/www/roster/main.rb b/www/roster/main.rb
index 21d8faf..942f634 100755
--- a/www/roster/main.rb
+++ b/www/roster/main.rb
@@ -11,7 +11,7 @@ require 'tmpdir'
 
 require 'wunderbar/sinatra'
 require 'wunderbar/bootstrap/theme'
-require 'wunderbar/react'
+require 'wunderbar/vue'
 require 'wunderbar/underscore'
 require 'wunderbar/markdown'
 require 'wunderbar/jquery/stupidtable'
diff --git a/www/roster/views/committerSearch.js.rb b/www/roster/views/committerSearch.js.rb
index 7c0c17b..9a71cb3 100644
--- a/www/roster/views/committerSearch.js.rb
+++ b/www/roster/views/committerSearch.js.rb
@@ -1,4 +1,4 @@
-class CommitterSearch < React
+class CommitterSearch < Vue
   def initialize
     @list = []
     @ready = false
@@ -6,7 +6,7 @@ class CommitterSearch < React
     @committers = []
   end
 
-  def componentDidMount()
+  def mounted()
     # start with (possibly stale) data from local storage when available
     ls_committers = localStorage.getItem('roster-committers')
     if ls_committers
@@ -60,7 +60,8 @@ class CommitterSearch < React
       _label.control_label.col_sm_3 'Search for', for:  'search-text'
       _div.col_sm_9 do
         _div.input_group do
-          _input.form_control autofocus: true, value: @search, onChange: self.change
+          _input.form_control autofocus: true, value: @search, 
+            onInput: self.change
           _span.input_group_addon do
             _span.glyphicon.glyphicon_user aria_label: "Committer ID or name"
           end
diff --git a/www/roster/views/confirm.js.rb b/www/roster/views/confirm.js.rb
index 7d1f3ad..57baa8c 100644
--- a/www/roster/views/confirm.js.rb
+++ b/www/roster/views/confirm.js.rb
@@ -2,7 +2,7 @@
 # Confirmation dialog
 #
 
-class Confirm < React
+class Confirm < Vue
   def initialize
     @text = 'text'
     @color = 'btn-default'
diff --git a/www/roster/views/group.js.rb b/www/roster/views/group.js.rb
index 73b3668..f0aff78 100644
--- a/www/roster/views/group.js.rb
+++ b/www/roster/views/group.js.rb
@@ -2,7 +2,7 @@
 # Show a committee
 #
 
-class Group < React
+class Group < Vue
   def initialize
     @state = :closed
     @pending = {}
@@ -72,12 +72,7 @@ class Group < React
   end
 
   # capture group on initial load
-  def componentWillMount()
-    self.update(@@group)
-  end
-
-  # capture group on subsequent loads
-  def componentWillReceiveProps()
+  def created()
     self.update(@@group)
   end
 
@@ -109,7 +104,7 @@ end
 # Show a member of the Group
 #
 
-class GroupMember < React
+class GroupMember < Vue
   def initialize
     @state = :closed
   end
@@ -157,7 +152,7 @@ end
 # Confirmation dialog
 #
 
-class GroupConfirm < React
+class GroupConfirm < Vue
   def initialize
     @text = 'text'
     @color = 'btn-default'
@@ -194,7 +189,7 @@ class GroupConfirm < React
     end
   end
 
-  def componentDidMount()
+  def mounted()
     jQuery('#confirm').on('show.bs.modal') do |event|
       button = event.relatedTarget
       @id = button.parentNode.dataset.id
diff --git a/www/roster/views/person.js.rb b/www/roster/views/person.js.rb
index d63cf08..198aa7a 100644
--- a/www/roster/views/person.js.rb
+++ b/www/roster/views/person.js.rb
@@ -1,4 +1,4 @@
-class Person < React
+class Person < Vue
   def initialize
     @committer = {}
     @response = nil
@@ -13,7 +13,7 @@ class Person < React
     _h2 "#{@committer.id}@apache.org"
 
     # Name
-    _PersonName person: self
+    _PersonName person: self, edit: @edit
 
     _div.row do
       _div.name 'LDAP Create Date'
@@ -139,15 +139,15 @@ class Person < React
 
     # GitHub username
     if @committer.githubUsername
-      _PersonGitHub person: self
+      _PersonGitHub person: self, edit: @edit
     end
 
     if @committer.member
-      _PersonMemberStatus person: self
+      _PersonMemberStatus person: self, edit: @edit
 
       # Members.txt
       if @committer.member.info
-        _PersonMemberText person: self
+        _PersonMemberText person: self, edit: @edit
       end
 
       if @committer.member.nomination
@@ -164,7 +164,7 @@ class Person < React
     end
 
     # SpamAssassin score
-    _PersonSascore person: self
+    _PersonSascore person: self, edit: @edit
 
     # modal dialog for dry run results
     _div.modal.fade.wide_form tabindex: -1 do
@@ -185,24 +185,22 @@ class Person < React
     end
   end
 
-  # capture committer on initial load
-  def componentWillMount()
-    self.componentWillReceiveProps()
-  end
+  # initialize committer, determine if user is authorized to make
+  # changes, map Vue model to React model
+  def created()
+    @committer = @@committer
+    @auth = (@@auth.id == @@committer.id or @@auth.secretary or @@auth.root)
 
-  # replace committer on change, determine if user is authorized to make
-  # changes
-  def componentWillReceiveProps()
-    if @committer.id != @@committer.id
-      @committer = @@committer
-      @auth = (@@auth.id == @@committer.id or @@auth.secretary or @@auth.root)
-    end
+    # map Vue model to React model
+    self.state = self['$data']
+    self.props = self['$props']
   end
 
   # on initial display, look for add editable rows, highlight them,
   # and watch for double clicks on them
-  def componentDidMount()
+  def mounted()
     return unless @auth
+
     Array(document.querySelectorAll('div.row[data-edit]')).each do |div|
       div.addEventListener('dblclick', self.dblclick)
       div.querySelector('div.name').classList.add 'bg-success'
@@ -212,15 +210,12 @@ class Person < React
   # when a double click occurs, toggle the associated state
   def dblclick(event)
     tr = event.currentTarget
-    field = "edit_#{tr.dataset.edit}"
-    changes = {}
-    changes[field] = !self.state[field]
-    self.setState changes
+    @edit = tr.dataset.edit
     window.getSelection().removeAllRanges()
   end
 
   # after update, register event listeners on forms
-  def componentDidUpdate()
+  def updated()
     Array(document.querySelectorAll('div[data-edit]')).each do |tr|
       form = tr.querySelector('form')
       if form
diff --git a/www/roster/views/person/email.js.rb b/www/roster/views/person/email.js.rb
index ce8f6cf..ee3fd55 100644
--- a/www/roster/views/person/email.js.rb
+++ b/www/roster/views/person/email.js.rb
@@ -2,7 +2,7 @@
 # Render and edit a person's E-mail addresses
 #
 
-class PersonEmail < React
+class PersonEmail < Vue
   def render
     committer = @@person.state.committer
 
diff --git a/www/roster/views/person/forms.js.rb b/www/roster/views/person/forms.js.rb
index 4824c97..be7702a 100644
--- a/www/roster/views/person/forms.js.rb
+++ b/www/roster/views/person/forms.js.rb
@@ -2,7 +2,7 @@
 # Show a list of a person's forms on file
 #
 
-class PersonForms < React
+class PersonForms < Vue
   def render
     committer = @@person.state.committer
     documents = "https://svn.apache.org/repos/private/documents"
diff --git a/www/roster/views/person/fullname.js.rb b/www/roster/views/person/fullname.js.rb
index b4a5435..c75cd8a 100644
--- a/www/roster/views/person/fullname.js.rb
+++ b/www/roster/views/person/fullname.js.rb
@@ -2,7 +2,7 @@
 # Render and edit a person's name
 #
 
-class PersonName < React
+class PersonName < Vue
   def render
     committer = @@person.state.committer
 
@@ -12,25 +12,25 @@ class PersonName < React
       _div.value do
         name = committer.name
 
-        if @@person.state.edit_fullname
+        if @@edit == :fullname
 
           _form.inline method: 'post' do
             _div do
               _label 'public name', for: 'publicname'
               _input.publicname! name: 'publicname', required: true,
-                defaultValue: name.public_name
+                value: name.public_name
             end
 
             _div do
               _label 'legal name', for: 'legalname'
               _input.legalname! name: 'legalname', required: true,
-                defaultValue: name.legal_name
+                value: name.legal_name
             end
 
             _div do
               _label 'given name', for: 'givenname'
               _input.legalname! name: 'givenname', required: true,
-                defaultValue: name.given_name
+                value: name.given_name
             end
 
             _button.btn.btn_primary 'submit'
diff --git a/www/roster/views/person/github.js.rb b/www/roster/views/person/github.js.rb
index 7125db9..27a9195 100644
--- a/www/roster/views/person/github.js.rb
+++ b/www/roster/views/person/github.js.rb
@@ -2,7 +2,7 @@
 # Render and edit a person's GitHub user name
 #
 
-class PersonGitHub < React
+class PersonGitHub < Vue
   def render
     committer = @@person.state.committer
 
@@ -11,10 +11,10 @@ class PersonGitHub < React
 
       _div.value do
 
-        if @@person.state.edit_github
+        if @@edit == :github
 
           _form method: 'post' do
-            _input name: 'githubuser', defaultValue: committer.githubUsername
+            _input name: 'githubuser', value: committer.githubUsername
             _input type: 'submit', value: 'submit'
           end
 
diff --git a/www/roster/views/person/memstat.js.rb b/www/roster/views/person/memstat.js.rb
index d9db838..e108d16 100644
--- a/www/roster/views/person/memstat.js.rb
+++ b/www/roster/views/person/memstat.js.rb
@@ -2,7 +2,7 @@
 # Render and edit a person's member status
 #
 
-class PersonMemberStatus < React
+class PersonMemberStatus < Vue
   def render
     committer = @@person.state.committer
 
@@ -13,7 +13,7 @@ class PersonMemberStatus < React
         _div.value do
           _span committer.member.status
 
-         if @@person.state.edit_memstat
+         if @@edit == :memstat
            _form.inline method: 'post' do
              if committer.member.status.include? 'Active'
                _button.btn.btn_primary 'move to emeritus',
diff --git a/www/roster/views/person/memtext.rb b/www/roster/views/person/memtext.rb
index d1d0ca5..ad3b9b7 100644
--- a/www/roster/views/person/memtext.rb
+++ b/www/roster/views/person/memtext.rb
@@ -2,7 +2,7 @@
 # Render and edit a person's members.txt entry
 #
 
-class PersonMemberText < React
+class PersonMemberText < Vue
   def render
     committer = @@person.state.committer
 
@@ -10,11 +10,11 @@ class PersonMemberText < React
       _div.name 'Members.txt'
 
       _div.value do
-        if @@person.state.edit_memtext
+        if @@edit == :memtext
 
           _form.inline method: 'post' do
             _div do
-              _textarea name: 'entry', defaultValue: committer.member.info
+              _textarea committer.member.info, name: 'entry'
             end
             _button.btn.btn_primary 'submit'
           end
diff --git a/www/roster/views/person/pgpkeys.js.rb b/www/roster/views/person/pgpkeys.js.rb
index a700637..453fbd7 100644
--- a/www/roster/views/person/pgpkeys.js.rb
+++ b/www/roster/views/person/pgpkeys.js.rb
@@ -2,7 +2,7 @@
 # Render and edit a person's PGP keys
 #
 
-class PersonPgpKeys < React
+class PersonPgpKeys < Vue
   def render
     committer = @@person.state.committer
 
diff --git a/www/roster/views/person/sascore.js.rb b/www/roster/views/person/sascore.js.rb
index 65d2419..1cc17dc 100644
--- a/www/roster/views/person/sascore.js.rb
+++ b/www/roster/views/person/sascore.js.rb
@@ -2,7 +2,7 @@
 # Render and edit a person's SpamAssassin score
 #
 
-class PersonSascore < React
+class PersonSascore < Vue
   def render
     committer = @@person.state.committer
 
@@ -11,11 +11,11 @@ class PersonSascore < React
 
       _div.value do
 
-        if @@person.state.edit_sascore
+        if @@edit == :sascore
 
           _form method: 'post' do
             _input type: 'number', min: 0, max: 10, 
-              name: 'sascore', defaultValue: committer.sascore
+              name: 'sascore', value: committer.sascore
             _input type: 'submit', value: 'submit'
           end
 
diff --git a/www/roster/views/person/sshkeys.js.rb b/www/roster/views/person/sshkeys.js.rb
index 78014cd..6b4ecdf 100644
--- a/www/roster/views/person/sshkeys.js.rb
+++ b/www/roster/views/person/sshkeys.js.rb
@@ -2,14 +2,13 @@
 # Render and edit a person's SSH keys
 #
 
-class PersonSshKeys < React
+class PersonSshKeys < Vue
   def render
     committer = @@person.state.committer
 
     _div.row do
       _div.name 'SSH keys'
 
-
       _div.value do
         _ul committer.ssh do |key|
           _li.ssh do
diff --git a/www/roster/views/person/urls.js.rb b/www/roster/views/person/urls.js.rb
index a449bf1..660e4c6 100644
--- a/www/roster/views/person/urls.js.rb
+++ b/www/roster/views/person/urls.js.rb
@@ -2,7 +2,7 @@
 # Render and edit a person's URLs
 #
 
-class PersonUrls < React
+class PersonUrls < Vue
   def render
     committer = @@person.state.committer
 
diff --git a/www/roster/views/pmc/add.js.rb b/www/roster/views/pmc/add.js.rb
index ee3537c..cb27e71 100644
--- a/www/roster/views/pmc/add.js.rb
+++ b/www/roster/views/pmc/add.js.rb
@@ -2,7 +2,7 @@
 # Add People to a project
 #
 
-class PMCAdd < React
+class PMCAdd < Vue
   def initialize
     @people = []
   end
@@ -67,7 +67,7 @@ class PMCAdd < React
     end
   end
 
-  def componentDidMount()
+  def mounted()
     jQuery('#pmcadd').on('show.bs.modal') do |event|
       button = event.relatedTarget
       setTimeout(500) { jQuery('#pmcadd input').focus() }
@@ -76,7 +76,7 @@ class PMCAdd < React
 
   def add(person)
     @people << person
-    self.forceUpdate()
+    Vue.forceUpdate()
     jQuery('#pmcadd input').focus()
   end
 
diff --git a/www/roster/views/pmc/committers.js.rb b/www/roster/views/pmc/committers.js.rb
index a108ad5..61b1548 100644
--- a/www/roster/views/pmc/committers.js.rb
+++ b/www/roster/views/pmc/committers.js.rb
@@ -2,7 +2,7 @@
 # Committers on the PMC
 #
 
-class PMCCommitters < React
+class PMCCommitters < Vue
   def render
     if
       @@committee.committers.all? do |id|
@@ -35,13 +35,8 @@ class PMCCommitters < React
     end
   end
 
-  # update props on initial load
-  def componentWillMount()
-    self.componentWillReceiveProps()
-  end
-
   # compute list of committers
-  def componentWillReceiveProps()
+  def created()
     committers = []
     
     @@committee.committers.each do |id|
@@ -58,7 +53,7 @@ end
 # Show a committer
 #
 
-class PMCCommitter < React
+class PMCCommitter < Vue
   def render
     _tr do
       if @@auth
diff --git a/www/roster/views/pmc/main.js.rb b/www/roster/views/pmc/main.js.rb
index b7f9288..c632e94 100644
--- a/www/roster/views/pmc/main.js.rb
+++ b/www/roster/views/pmc/main.js.rb
@@ -2,7 +2,7 @@
 # Show a PMC
 #
 
-class PMC < React
+class PMC < Vue
   def initialize
     @attic = nil
   end
@@ -192,21 +192,16 @@ class PMC < React
   end
 
   # capture committee on initial load
-  def componentWillMount()
-    self.update(@@committee)
-  end
-
-  # capture committee on subsequent loads
-  def componentWillReceiveProps()
+  def created()
     self.update(@@committee)
   end
 
   # refresh the current page
   def refresh()
-    self.forceUpdate()
+    Vue.forceUpdate()
   end
 
-  def componentDidMount()
+  def mounted()
     # export refesh method
     PMC.refresh = self.refresh
   end
diff --git a/www/roster/views/pmc/mod.js.rb b/www/roster/views/pmc/mod.js.rb
index 32ca7eb..fb5d8e7 100644
--- a/www/roster/views/pmc/mod.js.rb
+++ b/www/roster/views/pmc/mod.js.rb
@@ -2,7 +2,7 @@
 # Add People to a project
 #
 
-class PMCMod < React
+class PMCMod < Vue
   def initialize
     @people = []
   end
@@ -68,7 +68,7 @@ class PMCMod < React
     end
   end
 
-  def componentDidMount()
+  def mounted()
     jQuery('#pmcmod').on('show.bs.modal') do |event|
       button = event.relatedTarget
       setTimeout(500) { jQuery('#pmcmod input').focus() }
diff --git a/www/roster/views/pmc/pmc.js.rb b/www/roster/views/pmc/pmc.js.rb
index ec14053..1c63fb8 100644
--- a/www/roster/views/pmc/pmc.js.rb
+++ b/www/roster/views/pmc/pmc.js.rb
@@ -2,7 +2,7 @@
 # Show PMC members
 #
 
-class PMCMembers < React
+class PMCMembers < Vue
   def initialize
     @committee = {}
   end
@@ -27,13 +27,8 @@ class PMCMembers < React
     end
   end
 
-  # update props on initial load
-  def componentWillMount()
-    self.componentWillReceiveProps()
-  end
-
   # compute roster
-  def componentWillReceiveProps()
+  def created()
     roster = []
     
     for id in @@committee.roster
@@ -52,7 +47,7 @@ end
 # Show a member of the PMC
 #
 
-class PMCMember < React
+class PMCMember < Vue
   def initialize
     @state = :closed
   end
@@ -62,7 +57,7 @@ class PMCMember < React
       if @@auth
         _td do
            _input type: 'checkbox', checked: @@person.selected || false,
-             onChange: -> {self.toggleSelect(@@person)}
+             onClick: -> {self.toggleSelect(@@person)}
         end
       end
 
@@ -145,16 +140,6 @@ class PMCMember < React
     end
   end
 
-  # update props on initial load
-  def componentWillMount()
-    self.componentWillReceiveProps()
-  end
-
-  # automatically close entries when id changes
-  def componentWillReceiveProps(newprops)
-    @state = :closed if newprops.person.id != self.props.person.id
-  end
-
   # toggle display of buttons
   def select()
     return unless @@auth
diff --git a/www/roster/views/pmc/roster.js.rb b/www/roster/views/pmc/roster.js.rb
index 572f92d..610e6c4 100644
--- a/www/roster/views/pmc/roster.js.rb
+++ b/www/roster/views/pmc/roster.js.rb
@@ -2,7 +2,7 @@
 # Searchable PMC roster
 #
 
-class PMCRoster < React
+class PMCRoster < Vue
   def render
     matches = []
     found = false
diff --git a/www/roster/views/ppmc/add.js.rb b/www/roster/views/ppmc/add.js.rb
index b6aaf61..d65cd26 100644
--- a/www/roster/views/ppmc/add.js.rb
+++ b/www/roster/views/ppmc/add.js.rb
@@ -2,7 +2,7 @@
 # Add People to a project
 #
 
-class PPMCAdd < React
+class PPMCAdd < Vue
   def initialize
     @people = []
   end
@@ -78,7 +78,7 @@ class PPMCAdd < React
     end
   end
 
-  def componentDidMount()
+  def mounted()
     jQuery('#ppmcadd').on('show.bs.modal') do |event|
       button = event.relatedTarget
       setTimeout(500) { jQuery('#ppmcadd input').focus() }
diff --git a/www/roster/views/ppmc/committers.js.rb b/www/roster/views/ppmc/committers.js.rb
index 3a07ca6..18811ef 100644
--- a/www/roster/views/ppmc/committers.js.rb
+++ b/www/roster/views/ppmc/committers.js.rb
@@ -2,7 +2,7 @@
 # Committers on the PPMC
 #
 
-class PPMCCommitters < React
+class PPMCCommitters < Vue
   def render
     pending = [] 
 
@@ -52,13 +52,8 @@ class PPMCCommitters < React
     end
   end
 
-  # update props on initial load
-  def componentWillMount()
-    self.componentWillReceiveProps()
-  end
-
   # compute list of committers
-  def componentWillReceiveProps()
+  def created()
     committers = []
     
     @@ppmc.committers.each do |id|
@@ -81,7 +76,7 @@ end
 # Show a committer
 #
 
-class PPMCCommitter < React
+class PPMCCommitter < Vue
   def render
     _tr do
 
diff --git a/www/roster/views/ppmc/graduate.js.rb b/www/roster/views/ppmc/graduate.js.rb
index 7e23942..6b64ffd 100644
--- a/www/roster/views/ppmc/graduate.js.rb
+++ b/www/roster/views/ppmc/graduate.js.rb
@@ -2,7 +2,7 @@
 # Draft an "Establish" resolution for a new PMC
 #
 
-class PPMCGraduate < React
+class PPMCGraduate < Vue
   def initialize
     @owners = []
   end
diff --git a/www/roster/views/ppmc/main.js.rb b/www/roster/views/ppmc/main.js.rb
index ce476c9..ce1a37e 100644
--- a/www/roster/views/ppmc/main.js.rb
+++ b/www/roster/views/ppmc/main.js.rb
@@ -2,7 +2,7 @@
 # Show a PPMC
 #
 
-class PPMC < React
+class PPMC < Vue
   def initialize
     @create_disabled = false
   end
@@ -207,12 +207,7 @@ class PPMC < React
   end
 
   # capture ppmc on initial load
-  def componentWillMount()
-    self.update(@@ppmc)
-  end
-
-  # capture ppmc on subsequent loads
-  def componentWillReceiveProps()
+  def created()
     self.update(@@ppmc)
   end
 
@@ -223,10 +218,10 @@ class PPMC < React
 
   # refresh the current page
   def refresh()
-    self.forceUpdate()
+    Vue.forceUpdate()
   end
 
-  def componentDidMount()
+  def mounted()
     # export refesh method
     PPMC.refresh = self.refresh
   end
diff --git a/www/roster/views/ppmc/members.js.rb b/www/roster/views/ppmc/members.js.rb
index c607020..b18e3a1 100644
--- a/www/roster/views/ppmc/members.js.rb
+++ b/www/roster/views/ppmc/members.js.rb
@@ -2,7 +2,7 @@
 # Show PPMC members
 #
 
-class PPMCMembers < React
+class PPMCMembers < Vue
   def render
     pending = [] 
 
@@ -48,13 +48,8 @@ class PPMCMembers < React
     end
   end
 
-  # update props on initial load
-  def componentWillMount()
-    self.componentWillReceiveProps()
-  end
-
   # compute roster
-  def componentWillReceiveProps()
+  def created()
     roster = []
     
     @@ppmc.owners.each do |id|
@@ -77,7 +72,7 @@ end
 # Show a member of the PPMC
 #
 
-class PPMCMember < React
+class PPMCMember < Vue
   def render
     _tr do
 
diff --git a/www/roster/views/ppmc/mentors.js.rb b/www/roster/views/ppmc/mentors.js.rb
index aa036f1..31d0fa7 100644
--- a/www/roster/views/ppmc/mentors.js.rb
+++ b/www/roster/views/ppmc/mentors.js.rb
@@ -2,7 +2,7 @@
 # Show PPMC mentors
 #
 
-class PPMCMentors < React
+class PPMCMentors < Vue
   def initialize
     @ipmc = []
   end
@@ -51,13 +51,8 @@ class PPMCMentors < React
     end
   end
 
-  # update props on initial load
-  def componentWillMount()
-    self.componentWillReceiveProps()
-  end
-
   # compute roster
-  def componentWillReceiveProps()
+  def created()
     roster = []
     
     @@ppmc.mentors.each do |id|
@@ -98,7 +93,7 @@ end
 # Show a mentor of the PPMC
 #
 
-class PPMCMentor < React
+class PPMCMentor < Vue
   def render
     _tr do
 
diff --git a/www/roster/views/ppmc/mod.js.rb b/www/roster/views/ppmc/mod.js.rb
index 28aaed4..eb42ac3 100644
--- a/www/roster/views/ppmc/mod.js.rb
+++ b/www/roster/views/ppmc/mod.js.rb
@@ -2,7 +2,7 @@
 # Add People to a project
 #
 
-class PPMCMod < React
+class PPMCMod < Vue
   def initialize
     @people = []
   end
@@ -86,7 +86,7 @@ class PPMCMod < React
     end
   end
 
-  def componentDidMount()
+  def mounted()
     jQuery('#ppmcmod').on('show.bs.modal') do |event|
       button = event.relatedTarget
       setTimeout(500) { jQuery('#ppmcmod input').focus() }
diff --git a/www/roster/views/ppmc/roster.js.rb b/www/roster/views/ppmc/roster.js.rb
index 3cf0fb7..bcbf226 100644
--- a/www/roster/views/ppmc/roster.js.rb
+++ b/www/roster/views/ppmc/roster.js.rb
@@ -2,7 +2,7 @@
 # Searchable PPMC roster
 #
 
-class PPMCRoster < React
+class PPMCRoster < Vue
   def render
     matches = []
     found = false

-- 
To stop receiving notification emails like this one, please contact
"commits@whimsical.apache.org" <co...@whimsical.apache.org>.