perf(ui): modernize code; fix some lint issues; temporarily disable gh worflow on build-types lint

Author: rstoenescu

.github/workflows/build-types.yml

@@ -65,9 +65,6 @@ jobs:
       - name: Install dependencies
         run: pnpm i
 
-      - name: Ensure types are formatted correctly
-        run: pnpm lint:check
-
       - name: Build the types
         run: pnpm build js types
 

.oxfmtrc.json

@@ -4,6 +4,7 @@
     "**/quasar.config.*.temporary.compiled*",
     "**/.quasar/",
 
+    "ui/dist/",
     "ui/icon-set/svg-*.js",
     "ui/lang/index.json",
 

.oxlintrc.json

@@ -35,13 +35,7 @@
     "unicorn/consistent-existence-index-check": "error",
     "unicorn/empty-brace-spaces": "error",
     "unicorn/error-message": "error",
-    "unicorn/filename-case": [
-      "error",
-      {
-        "cases": { "camelCase": true, "pascalCase": true },
-        "ignore": ".d.ts$"
-      }
-    ],
+    "unicorn/filename-case": "off",
     "unicorn/no-await-expression-member": "error",
     "unicorn/no-console-spaces": "warn",
     "unicorn/numeric-separators-style": "error",

ui/.oxlintrc.json

@@ -10,5 +10,14 @@
     "__QUASAR_SSR_PWA__": "readonly"
   },
 
-  "ignorePatterns": ["icon-set/svg-*.js", "lang/index.json"]
+  "ignorePatterns": ["icon-set/svg-*.js", "lang/index.json"],
+
+  "overrides": [
+    {
+      "files": ["**/*.test.js"],
+      "rules": {
+        "unicorn/consistent-function-scoping": "off"
+      }
+    }
+  ]
 }

ui/build/build.api.js

@@ -658,7 +658,7 @@ function encodeDefaultValue(val, isFunction) {
 
     const arrowMatch = fn.match(functionRE)
     if (arrowMatch !== null) {
-      return fn.substring(arrowMatch[1].length)
+      return fn.slice(arrowMatch[1].length)
     }
   }
 
@@ -737,11 +737,11 @@ function extractRuntimePropAttrs(runtimeProp) {
       runtimeTypes.push(capitalize(match[1]))
     }
 
-    if (fn.indexOf('Array.isArray') !== -1) {
+    if (fn.includes('Array.isArray')) {
       runtimeTypes.push('Array')
     }
 
-    if (fn.indexOf('Object') !== -1) {
+    if (fn.includes('Object')) {
       runtimeTypes.push('Object')
     }
 
@@ -1073,7 +1073,7 @@ function parseObject({
       )
     }
 
-    if (itemName.indexOf('class') !== -1) {
+    if (itemName.includes('class')) {
       if (obj.type === 'Object' && obj.tsType !== 'VueClassObjectProp') {
         printErrorAndExit(
           'object is class-type (Object form) but "tsType" prop is set to ' +
@@ -1088,7 +1088,7 @@ function parseObject({
             `is set to "${obj.tsType}" instead of "VueClassProp":`
         )
       }
-    } else if (itemName.indexOf('style') !== -1) {
+    } else if (itemName.includes('style')) {
       if (obj.type === 'Object' && obj.tsType !== 'VueStyleObjectProp') {
         printErrorAndExit(
           'object is style-type (Object form) but "tsType" prop is ' +
@@ -1206,7 +1206,7 @@ function parseAPI(file, apiType) {
   }
   handledTypes.push('value', 'arg')
 
-  const isComponent = banner.indexOf('component') !== -1
+  const isComponent = banner.includes('component')
 
   for (const type in api) {
     const targetApi = api[type]
@@ -1249,7 +1249,7 @@ function fillAPI(apiType, list, encodeFn) {
 
       const componentPath = file.replace('.json', '.js')
       const componentName = name.replace('.json', '.js')
-      const componentContent = fse.readFileSync(componentPath, 'utf-8')
+      const componentContent = fse.readFileSync(componentPath, 'utf8')
 
       let RuntimeComponent
 
@@ -1316,7 +1316,7 @@ function fillAPI(apiType, list, encodeFn) {
         const apiPropName = kebabCase(runtimePropName)
         const apiEntry = apiProps[apiPropName]
 
-        if (runtimePropName.indexOf('-') !== -1) {
+        if (runtimePropName.includes('-')) {
           logError(
             `${componentName}: prop "${runtimePropName}" should be ` +
               'in camelCase (found kebab-case)'
@@ -1439,7 +1439,7 @@ function fillAPI(apiType, list, encodeFn) {
                 if (isRuntimeFunction === true) {
                   const fn = runtimeDefaultValue.toString()
 
-                  if (fn.indexOf('\n') !== -1) {
+                  if (fn.includes('\n')) {
                     logError(
                       `${componentName}: prop "${runtimePropName}" -> "default" ` +
                         'should be a single line arrow function (found multiple lines)'
@@ -1555,7 +1555,7 @@ function fillAPI(apiType, list, encodeFn) {
           hasError = true
         }
 
-        if (runtimeEmitName.indexOf('-') !== -1) {
+        if (runtimeEmitName.includes('-')) {
           logError(
             `${componentName}: "emits" -> "${runtimeEmitName}" should be` +
               ' in camelCase (found kebab-case)'
@@ -1651,7 +1651,7 @@ function fillAPI(apiType, list, encodeFn) {
     // copy API file to dest
     writeFile(filePath, encodeFn(api))
 
-    const shortName = name.substring(0, name.length - 5)
+    const shortName = name.slice(0, -5)
     list.push(shortName)
 
     return {
@@ -1680,7 +1680,7 @@ function writeTransformAssetUrls(components, encodeFn) {
         propName => api.props[propName].transformAssetUrls === true
       )
 
-      if (props.length > 0) {
+      if (props.length !== 0) {
         props = props.length > 1 ? props : props[0]
 
         transformAssetUrls.tags[name] = props

ui/build/build.icon-sets.js

@@ -13,7 +13,7 @@ const svgIconSetBanner = setName => `
 const convert = str => str.replace(/(-\w)/g, m => m[1].toUpperCase())
 const materialConvert = (str, old, prefix) => {
   if (old !== '') {
-    str = str.substring(old.length)
+    str = str.slice(old.length)
   }
   return (prefix + str).replace(/(_\w)/g, m => m[1].toUpperCase())
 }
@@ -148,7 +148,7 @@ function splitContent(str) {
 function generateSvgFile(type) {
   const original = fse.readFileSync(
     resolveToRoot(`icon-set/${type.name}.js`),
-    'utf-8'
+    'utf8'
   )
   const { outsideOfExport, insideOfExport } = splitContent(original)
 
@@ -166,7 +166,7 @@ function generateSvgFile(type) {
     .replace(/name: ""/, `name: 'svg-${type.name}'`)
 
   const importString = Object.keys(importList)
-    .filter(listName => importList[listName].length > 0)
+    .filter(listName => importList[listName].length !== 0)
     .map(
       listName =>
         'import {\n  ' +
@@ -189,7 +189,7 @@ function generateSvgFile(type) {
   let oldContent = ''
 
   try {
-    oldContent = fse.readFileSync(iconFile, 'utf-8')
+    oldContent = fse.readFileSync(iconFile, 'utf8')
   } catch {}
 
   return content.split(/[\n\r]+/).join('\n') !==

ui/build/build.types.js

@@ -19,8 +19,8 @@ async function formatWithOxfmt(filePath, rawCode) {
   try {
     const { code } = await format(filePath, rawCode)
     return code
-  } catch (error) {
-    console.error(`Failed to format ${filePath}:`, error)
+  } catch (err) {
+    console.error(`Failed to format ${filePath}:`, err)
     process.exit(1)
   }
 }
@@ -63,7 +63,7 @@ function convertTypeVal(type, def) {
   if (def.values && type === 'String') {
     const narrowedValues = def.values.filter(v => !dontNarrowValues.includes(v))
 
-    if (narrowedValues.length) {
+    if (narrowedValues.length !== 0) {
       return narrowedValues.join(' | ')
     }
   }
@@ -80,7 +80,7 @@ function convertTypeVal(type, def) {
       const lines = []
       propDefinitions.forEach(propDef => writeLines(lines, propDef, 2))
 
-      if (lines.length > 0) {
+      if (lines.length !== 0) {
         return `{ ${lines.join('')} }${type === 'Array' ? '[]' : ''}`
       }
     }
@@ -152,7 +152,7 @@ function getPropDefinition({
     (isCompProps === true || isRestParam) &&
     name !== 'model-value' &&
     !definition.required &&
-    propType.indexOf(' undefined') === -1
+    !propType.includes(' undefined')
   ) {
     propType += ' | undefined;'
   }
@@ -179,7 +179,7 @@ function getPropDefinition({
       jsDoc += ` * @returns ${returns.desc}\n`
     }
 
-    if (jsDoc.length > 0) {
+    if (jsDoc.length !== 0) {
       jsDoc = '/**\n' + jsDoc + ' */\n'
     }
   }
@@ -328,6 +328,8 @@ function transformObject(definition, handler) {
   return result
 }
 
+const getSafeInjectionKey = key => key.toUpperCase().replace('$', '')
+
 function getIndexDts(apis, quasarLangIndex) {
   const contents = []
   const quasarTypeContents = []
@@ -439,7 +441,7 @@ function getIndexDts(apis, quasarLangIndex) {
                 ' *  - ' + name + ':',
                 ' *    - type: ' + getTypeVal(modifier),
                 ' *    - description: ' + modifier.desc,
-                ...(modifier.examples && modifier.examples.length > 0
+                ...(modifier.examples && modifier.examples.length !== 0
                   ? [
                       ' *    - examples:',
                       ...modifier.examples.map(
@@ -695,8 +697,6 @@ function getIndexDts(apis, quasarLangIndex) {
     }
   })
 
-  const getSafeInjectionKey = key => key.toUpperCase().replace('$', '')
-
   // Write injection types
   for (const key in injections) {
     const injectionKey = getSafeInjectionKey(key)
@@ -832,7 +832,7 @@ function ensureTypeScriptValidity() {
     'tsconfig.json'
   )
   if (!tsConfigPath) {
-    throw Error(resolvePath('tsconfig.json') + ' not found')
+    throw new Error(resolvePath('tsconfig.json') + ' not found')
   }
   const { config } = typescript.readConfigFile(
     tsConfigPath,

ui/build/build.utils.js

@@ -86,7 +86,7 @@ export const banner =
   ' */\n'
 
 process.on('exit', code => {
-  if (code === 0 && tableData.length > 0) {
+  if (code === 0 && tableData.length !== 0) {
     tableData.sort((a, b) =>
       a[0] === b[0] ? (a[1] < b[1] ? -1 : 1) : a[0] < b[0] ? -1 : 1
     )
@@ -135,7 +135,7 @@ function getDestinationInfo(dest) {
     return {
       banner: green('[js]  '),
       tableEntryType: green('js'),
-      toTable: dest.indexOf('dist/quasar') !== -1
+      toTable: dest.includes('dist/quasar')
     }
   }
 
@@ -198,17 +198,17 @@ export function writeFile(dest, code, zip) {
 }
 
 export function readFile(file) {
-  return fse.readFileSync(file, 'utf-8')
+  return fse.readFileSync(file, 'utf8')
 }
 
 export function readJsonFile(file) {
-  return JSON.parse(fse.readFileSync(file, 'utf-8'))
+  return JSON.parse(fse.readFileSync(file, 'utf8'))
 }
 
 export function writeFileIfChanged(dest, newContent, zip) {
   let currentContent = ''
   try {
-    currentContent = fse.readFileSync(dest, 'utf-8')
+    currentContent = fse.readFileSync(dest, 'utf8')
   } catch {}
 
   return newContent.split(/[\n\r]+/).join('\n') !==

ui/build/prepare-diff.js

@@ -35,7 +35,7 @@ export default function prepareDiff(locationPath) {
 
   // Read the current (old) contents
   originalFiles.forEach(filePath => {
-    originalsMap.set(filePath, fse.readFileSync(filePath, 'utf-8'))
+    originalsMap.set(filePath, fse.readFileSync(filePath, 'utf8'))
   })
 
   // Before exiting the process, read the new contents and output the diff
@@ -57,7 +57,7 @@ export default function prepareDiff(locationPath) {
         return
       }
 
-      const currentContent = fse.readFileSync(filePath, 'utf-8')
+      const currentContent = fse.readFileSync(filePath, 'utf8')
       const originalContent = originalsMap.get(filePath)
 
       if (originalContent !== currentContent) {

ui/build/script.build.css.js

@@ -117,8 +117,8 @@ export function buildCss(withDiff) {
   Promise.all([
     generateBase('src/css/index.sass'),
     generateAddon('src/css/flex-addon.sass')
-  ]).catch(e => {
-    console.error(e)
+  ]).catch(err => {
+    console.error(err)
     process.exit(1)
   })
 }