Refactor: Update Behavior of :class to Invert Classes

[jorenrui]

Description

Updates the :class attribute to invert classes based on conditional expressions using the ternary operator and/or if statements.

Pre-requisites

This branch uses the new and improved lexer which is more accurate than before and uses the AST traverser to easily traverse and update the code.

Please merge the following IN ORDER:

• Refactor: Lexer Variables #5
• Feat: Slider #6

Setting the Default State

You can now set default states like:

<div class="hidden" :class="shouldShow ? 'visible' : 'hidden'"></div>

The default would be hidden, then when when a shouldShow changes its value it will trigger the :class which will do:

nextClassNames = baseClasses + evaluatedClasses - invertedEvaluatedClasses

Multiple Conditionals

You can also include in multiple conditionals like:

1. Use multiple ternary operators enclosed in parentheses:

<div
  :class="(selectedTab === 'When' ? 'bg-white shadow-lg' : 'hover:bg-gray-300')
          (whenSelectedTab === 'Dates' ? 'hidden' : '')"
></div>

Lexer Code:

const expr = `(selectedTab === 'When' ? 'bg-white shadow-lg' : 'hover:bg-gray-300')
              (whenSelectedTab === 'Dates' ? ' hidden' : '')`;
const lexer = new Lexer(expr, { isClass: true });
console.log(lexer.output())

Lexer Output:

[ { test: 'selectedTab === \'When\'',
    consequent: '\'bg-white shadow-lg\'',
    alternate: '\'hover:bg-gray-300\'' },
  { test: 'whenSelectedTab === \'Dates\'',
    consequent: '\' hidden\'',
    alternate: '\'\'' } ]

2. Use if-else statements:

<div
  :class="if (selectedTab === 'When') {
            'bg-white shadow-lg'
          } else {
            'hover:bg-gray-300'
          }

          if (whenSelectedTab === 'Dates') {
            'hidden'
          } else {
            ''
          }"
></div>

Lexer Code:

const expr2 = `if (selectedTab === 'When') {
  const a = "232";
  \`bg-white shadow-lg \${a}\`;
} else {
  'hover:bg-gray-300';
}

if (value == "Test") {
  '2ndif'
} else {
  '2ndelse'
}
`
const lexer2 = new Lexer(expr2, { isClass: true });
console.log(lexer2.output());

Lexer Output:

[ { test: 'selectedTab === \'When\'',
    consequent: '{\n    const a = \'232\';\n    `bg-white shadow-lg ${ a }`;\n}',
    alternate: '{\n    \'hover:bg-gray-300\';\n}' },
  { test: 'value == \'Test\'',
    consequent: '{\n    \'2ndif\';\n}',
    alternate: '{\n    \'2ndelse\';\n}' } ]

📦 Published PR as canary version: 1.0.1-canary.7.0ded757.0

✨ Test out this PR locally via:

npm install [email protected]
# or 
yarn add [email protected]

[github-actions]

🚀 PR was released in v1.0.1 🚀