Add support for ordered variables

src/mixins/parser.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 
 const regexes = {
   simpleBlock: /\[\[([A-Z_]*)\]\]/,
-  simpleVariable: /\[~([A-Z_]+)\]/,
+  simpleVariable: /\[~((?:[0-9]+_)?[A-Z_]+)\]/,
   blockReplacement: blockName => new RegExp(`\\[\\[${blockName}\\]\\]`),
   variableReplacement: variableName => new RegExp(`\\[~${variableName}\\]`),
 }
@@ -83,7 +83,7 @@ const parser = {
   extractVariables (source) {
     const varRegexpStart = '(^|[^[])\\[(?:(STRING|TEXT|NUMBER) )?'
     const varRegexpEnd = ' ?(.*?)\\]([^\\]]|$)'
-    const varRegexp = new RegExp(`${varRegexpStart}([A-Z_]+)${varRegexpEnd}`)
+    const varRegexp = new RegExp(`${varRegexpStart}((?:[0-9]+_)?[A-Z_]+)${varRegexpEnd}`)
     const variables = []
     let matches
 
@@ -114,6 +114,11 @@ const parser = {
       }
     } while (matches)
 
+    // Order vars if required:
+    if (variables.findIndex(v => /[\d]+_/.exec(v.name) !== null) > -1) {
+      variables.sort((a, b) => a.name.localeCompare(b.name))
+    }
+
     return { source, variables }
   },
 }

src/views/Help.vue

@@ -79,10 +79,20 @@
         </li>
       </ul>
 
+      <p>
+        By default, variables are shown in the edition panel in the same order as they are defined. Sometimes, you will
+        need them variables to be ordered in a custom order; you can achieve this by prefixing them with a number. Note
+        that if you prefix one variable, they all will be displayed sorted:
+      </p>
+
+      <!-- eslint-disable vue/no-v-html -->
+      <pre v-html="`${codeVar('02_A_VAR', 'The second var in the list')} ${codeVar('01_MY_FIRST_VAR', 'The first var in the list')}`" />
+      <!-- eslint-enable vue/no-v-html -->
+
       <i-alert variant="info">
-        If you define the same variable multiple times, the last definition with a description
-        will override the others.
+        If you define the same variable multiple times, they will be overridden only if there is no description.
       </i-alert>
+
       <i-alert variant="info">
         If you don't like defining variable in the template flow, you can add an HTML comment at the beginning of
         it with all the definitions:

tests/unit/parser.spec.js

@@ -111,6 +111,17 @@ describe('Parser mixin - Variables', () => {
     parser.parse(source)
     expect(parser.render()).to.eq(`${emptyContent} ${emptyContent}`)
   })
+  it('keeps declaration order when none of the names starts with a number', () => {
+    const source = '[STRING VAR The var] [STRING OTHER The other var]'
+    parser.parse(source)
+    expect(parser.variables[0].name).to.eq('VAR')
+  })
+
+  it('orders variables if one of the names starts with a number', () => {
+    const source = '[STRING VAR The var] [STRING 1_OTHER The other var]'
+    parser.parse(source)
+    expect(parser.variables[0].name).to.eq('1_OTHER')
+  })
 })
 
 describe('Parser mixin - Blocks', () => {