feat(ui): lang/icon-set support for q/app-vite on SSR quasarframework#12790

Author: rstoenescu

ui/build/build.icon-sets.js

@@ -0,0 +1,207 @@
+const path = require('path')
+const fs = require('fs')
+const glob = require('glob')
+
+const { writeFile, convertToCjs, logError } = require('./build.utils')
+
+function resolve (_path) {
+  return path.resolve(__dirname, '..', _path)
+}
+
+const cjsBanner = setName => `/**
+ * DO NOT EDIT THIS FILE. It is automatically generated
+ * from its .mjs counterpart (same filename but with .mjs extension).
+ * Edit that file instead (${ setName }).
+ */
+`
+
+const svgIconSetBanner = setName => `
+/*
+ * DO NOT EDIT THIS FILE. It is automatically generated
+ * from its webfont counterpart (same filename without "svg-" prefix).
+ * Edit that file instead (${ setName }.mjs).
+ */`
+
+// generic conversion
+const convert = str => str.replace(/(-\w)/g, m => m[ 1 ].toUpperCase())
+const materialConvert = (str, old, prefix) => {
+  if (old !== '') {
+    str = str.substr(old.length)
+  }
+  return (prefix + str).replace(/(_\w)/g, m => m[ 1 ].toUpperCase())
+}
+
+const iconTypes = [
+  {
+    name: 'material-icons-outlined',
+    regex: /^o_/,
+    convert: str => materialConvert(str, 'o_', 'outlined_')
+  },
+  {
+    name: 'material-icons-round',
+    regex: /^r_/,
+    convert: str => materialConvert(str, 'r_', 'round_')
+  },
+  {
+    name: 'material-icons-sharp',
+    regex: /^s_/,
+    convert: str => materialConvert(str, 's_', 'sharp_')
+  },
+  {
+    name: 'mdi-v6',
+    regex: /^mdi-/,
+    convert
+  },
+  {
+    name: 'ionicons-v4',
+    regex: /^ion-/,
+    convert: str => convert(
+      /ion-(md|ios)-/.test(str) === true
+        ? str
+        : str.replace(/ion-/, 'ion-md-')
+    )
+  },
+  {
+    name: 'fontawesome-v6',
+    regex: /^fa[brs] fa-/,
+    convert: str => convert(str.replace(' fa-', '-'))
+  },
+  {
+    name: 'eva-icons',
+    regex: /^eva-/,
+    convert
+  },
+  {
+    name: 'themify',
+    regex: /^ti-/,
+    convert
+  },
+  {
+    name: 'line-awesome',
+    regex: /^la[brs] la-/,
+    convert: str => convert(
+      (str.startsWith('las la-') === true ? str + '-solid' : str)
+        .replace(/^la[brs] la-/, 'la-')
+    )
+  },
+  {
+    name: 'bootstrap-icons',
+    regex: /^bi-/,
+    convert
+  },
+  // must be last as it's a catch-all
+  {
+    name: 'material-icons',
+    regex: /./,
+    convert: str => materialConvert(str, '', 'mat_')
+  }
+]
+
+function convertWebfont (name) {
+  const type = iconTypes.find(type => type.regex.test(name)) || iconTypes[ 0 ]
+
+  return {
+    importName: type.name,
+    variableName: type.convert(name)
+  }
+}
+
+function toObject (arr) {
+  const obj = {}
+  arr.forEach(item => {
+    obj[ item ] = []
+  })
+  return obj
+}
+
+const iconNames = iconTypes.map(type => type.name)
+
+const splitDelimiter = 'export default {'
+
+function splitContent (str) {
+  const content = str.split(splitDelimiter)
+
+  return {
+    outsideOfExport: content[ 0 ],
+    insideOfExport: splitDelimiter + content[ 1 ]
+  }
+}
+
+function generateSvgFile (type) {
+  const original = fs.readFileSync(resolve(`icon-set/${ type.name }.mjs`), 'utf-8')
+  const { outsideOfExport, insideOfExport } = splitContent(original)
+
+  const importList = toObject(iconNames)
+
+  const contentString = insideOfExport
+    .replace(/name: '(.+)'/, 'name: ""')
+    .replace(/'(.+)'/g, m => {
+      const { importName, variableName } = convertWebfont(m.substring(1, m.length - 1))
+      if (!importList[ importName ].includes(variableName)) {
+        importList[ importName ].push(variableName)
+      }
+      return variableName
+    })
+    .replace(/name: ""/, `name: 'svg-${ type.name }'`)
+
+  const importString = Object.keys(importList)
+    .filter(listName => importList[ listName ].length > 0)
+    .map(listName => 'import {\n  ' + importList[ listName ].join(',\n  ') + `\n} from '@quasar/extras/${ listName }'`)
+    .join('\n\n')
+
+  const content = [
+    svgIconSetBanner(type.name),
+    importString,
+    outsideOfExport,
+    contentString
+  ].filter(str => str).join('\n\n')
+
+  const iconFile = resolve(`icon-set/svg-${ type.name }.mjs`)
+
+  let oldContent = ''
+
+  try {
+    oldContent = fs.readFileSync(iconFile, 'utf-8')
+  }
+  catch (e) {}
+
+  return content.split(/[\n\r]+/).join('\n') !== oldContent.split(/[\n\r]+/).join('\n')
+    ? writeFile(iconFile, content)
+    : Promise.resolve()
+}
+
+function generateCjsCounterparts () {
+  const promises = []
+
+  try {
+    glob.sync(resolve('icon-set/*.mjs'))
+      .forEach(file => {
+        const content = fs.readFileSync(file, 'utf-8')
+        const cjsFile = file.replace('.mjs', '.js')
+        const banner = file.indexOf('svg') !== -1
+          ? ''
+          : cjsBanner(path.basename(file))
+
+        promises.push(
+          writeFile(cjsFile, convertToCjs(content, banner))
+        )
+      })
+
+    return Promise.all(promises)
+  }
+  catch (err) {
+    logError('build.icon-sets.js: something went wrong...')
+    console.log()
+    console.error(err)
+    console.log()
+    process.exit(1)
+  }
+}
+
+module.exports.generate = async function () {
+  await Promise.all(
+    iconTypes.map(generateSvgFile)
+  )
+
+  await generateCjsCounterparts()
+}

ui/build/build.lang-index.js ui/build/build.lang.jsui/build/build.lang-index.js renamed to ui/build/build.lang.js

@@ -2,12 +2,19 @@ const glob = require('glob')
 const path = require('path')
 const fs = require('fs')
 
-const { logError, writeFile } = require('./build.utils')
+const { logError, writeFileIfChanged, convertToCjs } = require('./build.utils')
 
 const
   root = path.resolve(__dirname, '..'),
   resolve = file => path.resolve(root, file)
 
+const cjsBanner = setName => `/**
+ * DO NOT EDIT THIS FILE. It is automatically generated
+ * from its .mjs counterpart (same filename but with .mjs extension).
+ * Edit that file instead (${ setName }).
+ */
+`
+
 function parse (prop, txt) {
   const
     propIndex = txt.indexOf(prop),
@@ -24,34 +31,35 @@ function parse (prop, txt) {
 
 module.exports.generate = function () {
   const languages = []
+  const promises = []
 
   try {
-    glob.sync(resolve('lang/*.js'))
-      .filter(file => file.endsWith('.js'))
+    glob.sync(resolve('lang/*.mjs'))
       .forEach(file => {
         const content = fs.readFileSync(file, 'utf-8')
         const isoName = parse('isoName', content)
         const nativeName = parse('nativeName', content)
         languages.push({ isoName, nativeName })
+
+        const cjsFile = file.replace('.mjs', '.js')
+        const banner = cjsBanner(path.basename(file))
+        promises.push(
+          writeFileIfChanged(cjsFile, convertToCjs(content, banner))
+        )
       })
 
     const
       langFile = resolve('lang/index.json'),
       newLangJson = JSON.stringify(languages, null, 2)
 
-    let oldLangJson = ''
-
-    try {
-      oldLangJson = fs.readFileSync(langFile, 'utf-8')
-    }
-    catch (e) {}
+    promises.push(
+      writeFileIfChanged(langFile, newLangJson)
+    )
 
-    return newLangJson.split(/[\n\r]+/).join('\n') !== oldLangJson.split(/[\n\r]+/).join('\n')
-      ? writeFile(langFile, newLangJson)
-      : Promise.resolve()
+    return Promise.all(promises)
   }
   catch (err) {
-    logError('build.lang-index.js: something went wrong...')
+    logError('build.lang.js: something went wrong...')
     console.log()
     console.error(err)
     console.log()