@mythpe/quasar-app-extension-qui 0.0.23 → 0.0.25

package/.eslintrc.cjs

@@ -0,0 +1,109 @@
+module.exports = {
+  // https://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy
+  // This option interrupts the configuration hierarchy at this file
+  // Remove this if you have an higher level ESLint config file (it usually happens into a monorepos)
+  root: true,
+
+  // https://eslint.vuejs.org/user-guide/#how-to-use-a-custom-parser
+  // Must use parserOptions instead of "parser" to allow vue-eslint-parser to keep working
+  // `parser: 'vue-eslint-parser'` is already included with any 'plugin:vue/**' config and should be omitted
+  parserOptions: {
+    parser: require.resolve('@typescript-eslint/parser'),
+    extraFileExtensions: ['.vue']
+  },
+
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+    'vue/setup-compiler-macros': true
+  },
+
+  // Rules order is important, please avoid shuffling them
+  extends: [
+    // Base ESLint recommended rules
+    // 'eslint:recommended',
+
+    // https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#usage
+    // ESLint typescript rules
+    'plugin:@typescript-eslint/recommended',
+
+    // Uncomment any of the lines below to choose desired strictness,
+    // but leave only one uncommented!
+    // See https://eslint.vuejs.org/rules/#available-rules
+    // 'plugin:vue/vue3-essential', // Priority A: Essential (Error Prevention)
+    'plugin:vue/vue3-strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
+    // 'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
+
+    'standard'
+
+  ],
+
+  plugins: [
+    // required to apply rules which need type information
+    '@typescript-eslint',
+
+    // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files
+    // required to lint *.vue files
+    'vue'
+
+  ],
+
+  globals: {
+    ga: 'readonly', // Google Analytics
+    cordova: 'readonly',
+    __statics: 'readonly',
+    __QUASAR_SSR__: 'readonly',
+    __QUASAR_SSR_SERVER__: 'readonly',
+    __QUASAR_SSR_CLIENT__: 'readonly',
+    __QUASAR_SSR_PWA__: 'readonly',
+    process: 'readonly',
+    Capacitor: 'readonly',
+    chrome: 'readonly'
+  },
+
+  // add your custom rules here
+  rules: {
+
+    // allow async-await
+    'generator-star-spacing': 'off',
+    // allow paren-less arrow functions
+    'arrow-parens': 'off',
+    'one-var': 'off',
+    'no-void': 'off',
+    'multiline-ternary': 'off',
+
+    'import/first': 'off',
+    'import/namespace': 'error',
+    'import/default': 'error',
+    'import/export': 'error',
+    'import/extensions': 'off',
+    'import/no-unresolved': 'off',
+    'import/no-extraneous-dependencies': 'off',
+
+    // The core 'import/named' rules
+    // does not work with type definitions
+    'import/named': 'off',
+
+    'prefer-promise-reject-errors': 'off',
+
+    quotes: ['warn', 'single', { avoidEscape: true }],
+
+    // this rule, if on, would require explicit return type on the `render` function
+    '@typescript-eslint/explicit-function-return-type': 'off',
+
+    // in plain CommonJS modules, you can't use `import foo = require('foo')` to pass this rule, so it has to be disabled
+    '@typescript-eslint/no-var-requires': 'off',
+
+    // The core 'no-unused-vars' rules (in the eslint:recommended ruleset)
+    // does not work with type definitions
+    'no-unused-vars': 'off',
+
+    // allow debugger during development only
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+
+    '@typescript-eslint/no-explicit-any': 'off',
+
+    'no-labels' : 0
+  }
+}

package/build/config.cjs

@@ -0,0 +1,13 @@
+const { name, author, version } = require('../package.json')
+const year = (new Date()).getFullYear()
+
+module.exports = {
+  name,
+  version,
+  banner:
+    '/*!\n' +
+    ' * ' + name + ' v' + version + '\n' +
+    ' * (c) ' + year + ' ' + author + '\n' +
+    ' * Released under the MIT License.\n' +
+    ' */\n'
+}

package/build/index.cjs

@@ -0,0 +1,19 @@
+process.env.NODE_ENV = 'production'
+
+const parallel = require('os').cpus().length > 1
+const runJob = parallel ? require('child_process').fork : require
+const { join } = require('path')
+const { createFolder } = require('./utils.cjs')
+const { green, blue } = require('chalk')
+
+console.log()
+
+// require('./script.app-ext.cjs').syncAppExt()
+require('./script.clean.cjs')
+
+console.log(` 📦 Building ${green('v' + require('../package.json').version)}...${parallel ? blue(' [multi-threaded]') : ''}\n`)
+
+createFolder('dist')
+
+runJob(join(__dirname, './script.javascript.cjs'))
+runJob(join(__dirname, './script.css.cjs'))

package/build/script.app-ext.cjs

@@ -0,0 +1,60 @@
+const
+  fs = require('fs'),
+  path = require('path'),
+  root = path.resolve(__dirname, '../'),
+  resolvePath = file => path.resolve(root, file),
+  { blue } = require('chalk')
+
+const writeJson = function (file, json) {
+  return fs.writeFileSync(file, JSON.stringify(json, null, 2) + '\n', 'utf-8')
+}
+
+module.exports.syncAppExt = function (both = true) {
+  // make sure this project has an app-extension project
+  const appExtDir = resolvePath('app-extension')
+  if (!fs.existsSync(appExtDir)) {
+    return
+  }
+
+  // make sure this project has an ui project
+  const uiDir = resolvePath('ui')
+  if (!fs.existsSync(uiDir)) {
+    return
+  }
+
+  // get version and name from ui package.json
+  const { name, version } = require(resolvePath(resolvePath('ui/package.json')))
+
+  // read app-ext package.json
+  const appExtFile = resolvePath('app-extension/package.json')
+  let appExtJson = require(appExtFile),
+    finished = false
+
+  // sync version numbers
+  if (both === true) {
+    appExtJson.version = version
+  }
+
+  // check dependencies
+  if (appExtJson.dependencies !== void 0) {
+    if (appExtJson.dependencies[name] !== void 0) {
+      appExtJson.dependencies[name] = '^' + version
+      finished = true
+    }
+  }
+  // check devDependencies, if not finished
+  if (finished === false && appExtJson.devDependencies !== void 0) {
+    if (appExtJson.devDependencies[name] !== void 0) {
+      appExtJson.devDependencies[name] = '^' + version
+      finished = true
+    }
+  }
+
+  if (finished === true) {
+    writeJson(appExtFile, appExtJson)
+    console.log(` ⭐️ App Extension version ${blue(appExtJson.name)} synced with UI version.\n`)
+    return
+  }
+
+  console.error('   App Extension version and dependency NOT synced.\n')
+}

package/build/script.clean.cjs

@@ -0,0 +1,6 @@
+const
+  rimraf = require('rimraf'),
+  path = require('path')
+
+rimraf.sync(path.resolve(__dirname, '../dist/*'))
+console.log(' 💥 Cleaned build artifacts.\n')

package/build/script.css.cjs

@@ -0,0 +1,75 @@
+const path = require('path')
+const sass = require('sass')
+const postcss = require('postcss')
+const cssnano = require('cssnano')
+const rtl = require('rtlcss')
+const autoprefixer = require('autoprefixer')
+
+const buildConf = require('./config.cjs')
+const buildUtils = require('./utils.cjs')
+
+const postCssCompiler = postcss([autoprefixer])
+const postCssRtlCompiler = postcss([rtl({})])
+
+const nano = postcss([
+  cssnano({
+    preset: ['default', {
+      mergeLonghand: false,
+      convertValues: false,
+      cssDeclarationSorter: false,
+      reduceTransforms: false
+    }]
+  })
+])
+
+Promise
+  .all([
+    generate('src/index.sass', 'dist/index')
+  ])
+  .catch(e => {
+    console.error(e)
+    process.exit(1)
+  })
+
+/**
+ * Helpers
+ */
+
+function resolve (_path) {
+  return path.resolve(__dirname, '..', _path)
+}
+
+function generate (src, dest) {
+  src = resolve(src)
+  dest = resolve(dest)
+
+  return new Promise((resolve, reject) => {
+    sass.render({ file: src, includePaths: ['node_modules'] }, (err, result) => {
+      if (err) {
+        reject(err)
+        return
+      }
+
+      resolve(result.css)
+    })
+  })
+    .then(code => buildConf.banner + code)
+    .then(code => postCssCompiler.process(code, { from: void 0 }))
+    .then(code => {
+      code.warnings().forEach(warn => {
+        console.warn(warn.toString())
+      })
+      return code.css
+    })
+    .then(code => Promise.all([
+      generateUMD(dest, code),
+      postCssRtlCompiler.process(code, { from: void 0 })
+        .then(code => generateUMD(dest, code.css, '.rtl'))
+    ]))
+}
+
+function generateUMD (dest, code, ext = '') {
+  return buildUtils.writeFile(`${dest}${ext}.css`, code, true)
+    .then(code => nano.process(code, { from: void 0 }))
+    .then(code => buildUtils.writeFile(`${dest}${ext}.min.css`, code.css, true))
+}

package/build/script.javascript.cjs

@@ -0,0 +1,213 @@
+const path = require('path')
+const fs = require('fs')
+const fse = require('fs-extra')
+const rollup = require('rollup')
+const uglify = require('uglify-js')
+const buble = require('@rollup/plugin-buble')
+const json = require('@rollup/plugin-json')
+const { nodeResolve } = require('@rollup/plugin-node-resolve')
+const replace = require('@rollup/plugin-replace')
+
+const { version } = require('../package.json')
+
+const buildConf = require('./config.cjs')
+const buildUtils = require('./utils.cjs')
+
+const rollupPlugins = [
+  replace({
+    preventAssignment: false,
+    values: {
+      __UI_VERSION__: `'${version}'`
+    }
+  }),
+  nodeResolve({
+    extensions: ['.js'],
+    preferBuiltins: false
+  }),
+  json(),
+  buble({
+    objectAssign: 'Object.assign'
+  })
+]
+
+const builds = [
+  {
+    rollup: {
+      input: {
+        input: pathResolve('../src/index.esm.js')
+      },
+      output: {
+        file: pathResolve('../dist/index.esm.js'),
+        format: 'es'
+      }
+    },
+    build: {
+      // unminified: true,
+      minified: true
+    }
+  },
+  {
+    rollup: {
+      input: {
+        input: pathResolve('../src/index.common.js')
+      },
+      output: {
+        file: pathResolve('../dist/index.common.js'),
+        format: 'cjs'
+      }
+    },
+    build: {
+      // unminified: true,
+      minified: true
+    }
+  },
+  {
+    rollup: {
+      input: {
+        input: pathResolve('../src/index.umd.js')
+      },
+      output: {
+        name: 'mythUi',
+        file: pathResolve('../dist/index.umd.js'),
+        format: 'umd'
+      }
+    },
+    build: {
+      unminified: true,
+      minified: true,
+      minExt: true
+    }
+  }
+]
+
+// Add your asset folders here, if needed
+// addAssets(builds, 'icon-set', 'iconSet')
+// addAssets(builds, 'lang', 'lang')
+
+build(builds)
+
+/**
+ * Helpers
+ */
+
+function pathResolve (_path) {
+  return path.resolve(__dirname, _path)
+}
+
+// eslint-disable-next-line no-unused-vars
+function addAssets (builds, type, injectName) {
+  const
+    files = fs.readdirSync(pathResolve('../../ui/src/components/' + type)),
+    plugins = [buble(/* bubleConfig */)],
+    outputDir = pathResolve(`../dist/${type}`)
+
+  fse.mkdirp(outputDir)
+
+  files
+    .filter(file => file.endsWith('.js'))
+    .forEach(file => {
+      const name = file.substr(0, file.length - 3).replace(/-([a-z])/g, g => g[1].toUpperCase())
+      builds.push({
+        rollup: {
+          input: {
+            input: pathResolve(`../src/components/${type}/${file}`),
+            plugins
+          },
+          output: {
+            file: addExtension(pathResolve(`../dist/${type}/${file}`), 'umd'),
+            format: 'umd',
+            name: `mythUi.${injectName}.${name}`
+          }
+        },
+        build: {
+          minified: true
+        }
+      })
+    })
+}
+
+function build (builds) {
+  return Promise
+    .all(builds.map(genConfig).map(buildEntry))
+    .catch(buildUtils.logError)
+}
+
+function genConfig (opts) {
+  Object.assign(opts.rollup.input, {
+    plugins: rollupPlugins,
+    external: ['vue', 'quasar']
+  })
+
+  Object.assign(opts.rollup.output, {
+    banner: buildConf.banner,
+    globals: { vue: 'Vue', quasar: 'Quasar' }
+  })
+
+  return opts
+}
+
+function addExtension (filename, ext = 'min') {
+  const insertionPoint = filename.lastIndexOf('.')
+  return `${filename.slice(0, insertionPoint)}.${ext}${filename.slice(insertionPoint)}`
+}
+
+function buildEntry (config) {
+  return rollup
+    .rollup(config.rollup.input)
+    .then(bundle => bundle.generate(config.rollup.output))
+    .then(({ output }) => {
+      const code = config.rollup.output.format === 'umd'
+        ? injectVueRequirement(output[0].code)
+        : output[0].code
+
+      return config.build.unminified
+        ? buildUtils.writeFile(config.rollup.output.file, code)
+        : code
+    })
+    .then(code => {
+      if (!config.build.minified) {
+        return code
+      }
+
+      const minified = uglify.minify(code, {
+        compress: {
+          pure_funcs: ['makeMap']
+        }
+      })
+
+      if (minified.error) {
+        return Promise.reject(minified.error)
+      }
+
+      return buildUtils.writeFile(
+        config.build.minExt === true
+          ? addExtension(config.rollup.output.file)
+          : config.rollup.output.file,
+        buildConf.banner + minified.code,
+        true
+      )
+    })
+    .catch(err => {
+      console.error(err)
+      process.exit(1)
+    })
+}
+
+function injectVueRequirement (code) {
+  // eslint-disable-next-line
+  const index = code.indexOf(`Vue = Vue && Vue.hasOwnProperty('default') ? Vue['default'] : Vue`)
+
+  if (index === -1) {
+    return code
+  }
+
+  const checkMe = ` if (Vue === void 0) {
+    console.error('[ Quasar ] Vue is required to run. Please add a script tag for it before loading Quasar.')
+    return
+  }
+  `
+
+  return code.substring(0, index - 1) +
+    checkMe +
+    code.substring(index)
+}

package/build/script.open-umd.cjs

@@ -0,0 +1,6 @@
+const { resolve } = require('path')
+const open = require('open')
+
+open(
+  resolve(__dirname, '../umd-test.html')
+)

package/build/utils.cjs

@@ -0,0 +1,54 @@
+const
+  fs = require('fs'),
+  path = require('path'),
+  zlib = require('zlib'),
+  { green, blue, red, cyan } = require('chalk')
+
+function getSize (code) {
+  return (code.length / 1024).toFixed(2) + 'kb'
+}
+
+module.exports.createFolder = function (folder) {
+  const dir = path.join(__dirname, '..', folder)
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir)
+  }
+}
+
+module.exports.writeFile = function (dest, code, zip) {
+  const banner = dest.indexOf('.json') > -1
+    ? red('[json]')
+    : dest.indexOf('.js') > -1
+      ? green('[js]  ')
+      : dest.indexOf('.ts') > -1
+        ? cyan('[ts]  ')
+        : blue('[css] ')
+
+  return new Promise((resolve, reject) => {
+    function report (extra) {
+      console.log(`${banner} ${path.relative(process.cwd(), dest).padEnd(41)} ${getSize(code).padStart(8)}${extra || ''}`)
+      resolve(code)
+    }
+
+    fs.writeFile(dest, code, err => {
+      if (err) return reject(err)
+      if (zip) {
+        zlib.gzip(code, (err, zipped) => {
+          if (err) return reject(err)
+          report(` (gzipped: ${getSize(zipped).padStart(8)})`)
+        })
+      } else {
+        report()
+      }
+    })
+  })
+}
+
+module.exports.readFile = function (file) {
+  return fs.readFileSync(file, 'utf-8')
+}
+
+module.exports.logError = function (err) {
+  console.error('\n' + red('[Error]'), err)
+  console.log()
+}

package/jsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "baseUrl": "."
+  }
+}

package/package.json

@@ -1,27 +1,73 @@
 {
   "name": "@mythpe/quasar-app-extension-qui",
-  "version": "0.0.23",
+  "version": "0.0.25",
   "description": "MyTh Quasar UI Kit App Extension",
   "author": "MyTh Ahmed Faiz <mythpe@gmail.com>",
   "email": "mythpe@gmail.com",
   "mobile": "+966590470092",
   "license": "MIT",
   "type": "module",
+  "module": "src/index.esm.js",
+  "main": "src/index.common.js",
   "scripts": {
     "lint": "eslint --ext .js,.ts,.vue ./",
-    "lint:fix": "eslint --ext .js,.ts,.vue ./ --fix"
+    "lint:fix": "eslint --ext .js,.ts,.vue ./ --fix",
+    "build": "node build/index.cjs",
+    "build:js": "node build/script.javascript.cjs",
+    "build:css": "node build/script.css.cjs"
   },
   "dependencies": {
-    "@mythpe/quasar-ui-qui": "latest",
+    "@mythpe/quasar-ui-qui": "^0.0.25",
+    "@vee-validate/i18n": "^4.14.0",
+    "@vee-validate/rules": "^4.14.0",
     "lodash": "^4.17.0",
     "lodash-inflection": "^1.5.0",
     "typed.js": "^2.0.0",
     "vee-validate": "^4.14.0",
-    "@vee-validate/i18n": "^4.14.0",
-    "@vee-validate/rules": "^4.14.0",
     "vue-i18n": "^10.0.0"
   },
-  "devDependencies": {},
+  "devDependencies": {
+    "@intlify/unplugin-vue-i18n": "^2.0.0",
+    "@quasar/app-vite": "^2.0.0-rc.1",
+    "@quasar/app-webpack": "^3.13.0",
+    "@quasar/cli": "^2.4.1",
+    "@quasar/extras": "^1.16.4",
+    "@rollup/plugin-buble": "^0.21.3",
+    "@rollup/plugin-json": "^4.0.0",
+    "@rollup/plugin-node-resolve": "^11.2.1",
+    "@rollup/plugin-replace": "^2.4.2",
+    "@types/lodash": "^4.17.13",
+    "@types/node": "^20.5.9",
+    "@typescript-eslint/eslint-plugin": "^7.16.0",
+    "@typescript-eslint/parser": "^7.16.0",
+    "@vitejs/plugin-vue": "^5.2.0",
+    "autoprefixer": "^10.4.2",
+    "chalk": "^4.1.0",
+    "core-js": "^3.0.0",
+    "cssnano": "^4.1.10",
+    "eslint": "^8.57.0",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-plugin-import": "^2.19.1",
+    "eslint-plugin-n": "^15.0.0",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-vue": "^9.0.0",
+    "fs-extra": "^8.1.0",
+    "open": "^7.3.0",
+    "postcss": "^8.1.9",
+    "quasar": "^2.16.0",
+    "rimraf": "^3.0.0",
+    "rollup": "^2.45.0",
+    "rtlcss": "^2.6.1",
+    "sass": "^1.33.0",
+    "typescript": "~5.5.3",
+    "uglify-js": "^3.13.3",
+    "vite": "^5.4.11",
+    "vite-plugin-checker": "^0.8.0",
+    "vue": "^3.0.0",
+    "vue-router": "^4.0.0",
+    "vue-tsc": "^2.0.29",
+    "zlib": "^1.0.5"
+  },
   "engines": {
     "node": "^24 || ^22 || ^20 || ^18",
     "npm": ">= 6.13.4",