We Keep Coding

firebase ESLINT questions

I am having some small issues with ESlint
here is the code snip:
module.exports = {
root: true,
env: {
es6: true,
node: true,
},
extends: [
"eslint:recommended",
"google",
],
rules: {
quotes: ["error", "double"],
},
parserOptions: {
ecmaVersion: 8, // or 2017
},
};
questions::
I have a max of 80 characters per line, how do I remove this?
I can't use let to run a for loop, it always changes to const
for ( let userData in chatUsersData) {
if ( userData["userId"]!=senderUserId) {
receiverUserId = userData["userId"];
}
}

How to connect "html-minifier" to gulp?

I am using gulp and I get an error on startup...
How do I fix this?
The returned value is not a function.
I've been trying to fix this for hours now, but I don't understand what's wrong.
Maybe this is somehow possible using this plugin? vinyl-source-stream
const htmlMinify = require('html-minifier').minify
function html() {
const postcssPlugins = [
autoprefixer({
overrideBrowserslist: [
'>0.25%',
'not ie 11',
'not op_mini all'
]
}),
pxtorem({
rootValue: 16,
unitPrecision: 5,
propList: ['font', 'font-size', 'line-height', 'letter-spacing'],
replace: false,
mediaQuery: false,
minPixelValue: 0,
})
];
const postcssOptions = { from: undefined }
const filterType = /^text\/css$/
const plugins = [
posthtmlPostcss(postcssPlugins, postcssOptions, filterType)
];
const options = {
includeAutoGeneratedTags: true,
removeAttributeQuotes: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
sortClassName: true,
useShortDoctype: true
}
return src(config.app.html)
.pipe(include({ prefix: '##' }))
.pipe(posthtml(plugins))
.pipe(htmlMinify(options))
.pipe(dest(config.build.html))
}
exports.stream = series(clear, html, stream)

If using plugin "vinyl-source-stream".
The solution to this question would be the following code.
In this code, I used plugins that work with streams.
But this code only converts one file!
You can read more details about each plugin on npmjs.
html-minifier, vinyl-fs, vinyl-source-stream, map-stream
const { src, dest, series } = require('gulp');
const htmlMinify = require('html-minifier');
const vfs = require('vinyl-fs');
const source = require('vinyl-source-stream');
const map = require('map-stream');
const options = {
includeAutoGeneratedTags: true,
removeAttributeQuotes: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
sortClassName: true,
useShortDoctype: true,
collapseWhitespace: true
};
function sol() {
let minify = function(file, cb) {
cb(null, htmlMinify.minify(file.contents.toString(), options));
};
return vfs
.src(['app/index.html'])
.pipe(map(minify))
.pipe(source('index.html'))
.pipe(vfs.dest('build'));
}
exports.sol = series(sol);
This was the answer to this particular question.
There is a more elegant solution to this problem.
No third party plugins required. I described it in this post.

preserve json object used as dictionary with terser

I currently bundle my typescript code with rollup and want to use terser for minifying/uglifying. In my code I have a dictionary object and imported it into my typescript code.
const dict = { ironResource : "Iron" }
In my code I use it to translate identifiers to other languages or access configs by item identifiers (ironResource). Terser will mangle my keys and destroys the purpose of the object.
const B1 = { aB1 : "Iron" }
Terser settings:
terser({
parse: {
},
compress: {
},
mangle: {
properties: {
}
},
format: {
},
ecma: 5,
keep_classnames: false,
keep_fnames: false,
ie8: false,
module: false,
nameCache: null,
safari10: false,
toplevel: false,
})
How to stop terser from doing this?

I would expect that you need to set mangle like this:
mangle: {
properties: false
},
Or set the correct options in the properties option object to keep those in particular. For example quote the property names and set keep_quoted to true.

How can i convert an object in a specific format into another format

I am having a hard time trying to convert an object supplied in a specific format from API into a target format using javascript. Please note that in the target format, the false values are not present. This is intentional. Can someone please help by showing how I can do the this kind of conversion. Thank you
// Original format
const rules= [
{
dealer: {
view: true,
edit: false,
add: false
},
franchise: {
view: true,
edit: true,
add: true
},
branch: {
view: true,
edit: false,
add: false
}
}
]
// Target format
const rules = [
{
actions: ["view"],
subject: ["dealer"]
},
{
actions: ["view"],
subject: ["franchise"]
},
{
actions: ["edit"],
subject: ["franchise"]
},
{
actions: ["add"],
subject: ["franchise"]
},
{
actions: ["view"],
subject: ["branch"]
}
];

I implemented mapping function which take each item and map it according to the value if true
let rules = [
{
dealer: {
view: true,
edit: false,
add: false
},
franchise: {
view: true,
edit: true,
add: true
},
branch: {
view: true,
edit: false,
add: false
}
}
]
rules = rules.map(item => {
const keys = Object.keys(item);
let mappedItem = []
keys.forEach(key => {
for (const property in item[key]) {
if (item[key][property]) {
mappedItem.push({ subject: [key], actions: [property] })
}
}
})
return mappedItem;
});

let rules= [
{
dealer: {
view: true,
edit: false,
add: false
},
franchise: {
view: true,
edit: true,
add: true
},
branch: {
view: true,
edit: false,
add: false
}
}
];
const result = rules.map(obj => Object.keys(obj).map(k => ({
subject: [k],
actions: Object.keys(obj[k]).filter(action => obj[k][action])
})).reduce((acc, cur) => ([
...acc,
...cur.actions.map(a => ({subject: cur.subject, actions: [a]}))
]),[]))
console.log(result);

vue nuxt js - component level cache not working

I am using vue js with nuxt and like to make use of component-level caching. I followed therefore the two links and tried to integrate it in my we bapp. But obviously it seems not to work for my component?
nuxt js - how to cache vu components
vue ssr guide - component level caching
My component just wraps an iframe and to avoid that every time the source of the iframe get called I like to have this cached
any idea why this is not working? Did I miss here anything?
My component
<template>
<div id="footer-copyright-wrapper">
<iframe id="frame-footer-copyright" src="http://targeturl" scrolling="no" frameBorder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"/>
</div>
</template>
<script>
export default {
name: 'footer1', // required
serverCacheKey: props => 'footer1',
}
</script>
My nuxt js conig
const isProduction = (process.env.NODE_ENV === 'production')
const host = (isProduction) ? 'api.xxx.com' : 'localhost'
const scheme = (isProduction) ? 'https' : 'http'
const baseUrl = (isProduction) ? `${scheme}://${host}/rest-api` : `${scheme}://${host}:8080/rest-api`
export default {
env: {
api: {
host: host,
scheme: scheme,
baseUrl: baseUrl
},
},
mode: 'universal',
/*
** Headers of the page
*/
head: {
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
],
script: [
{ src: 'https://www.paypalobjects.com/api/checkout.js' }
]
},
/*
** Customize the progress-bar color
*/
loading: { color: '#fff' },
/*
** Global CSS
*/
css: [
'#/assets/styles/global.scss'
],
/*
** Plugins to load before mounting the App
*/
plugins: [
'~/plugins/axios.js',
'~/plugins/validate.js',
'~/plugins/mq.js',
'~/plugins/global.js',
'~/plugins/print.js'
],
/*
** Nuxt.js dev-modules
*/
buildModules: [
],
/*
** Nuxt.js modules
*/
modules: [
'bootstrap-vue/nuxt',
'#nuxtjs/axios',
'~/modules/nuxt-auth/lib/module/index.js',
'nuxt-i18n',
'nuxt-stripe-module',
'#nuxtjs/component-cache',
],
/*
** Axios module configuration
*/
axios: {
baseURL: `${baseUrl}/`,
https: (isProduction) ? true : false,
progress: true,
debug: false
},
/*
** Build configuration
*/
build: {
// Add exception
transpile: [
'vee-validate/dist/rules'
],
/*
** You can extend webpack config here
*/
extend (config, ctx) {
}
},
/*
** Router configuration
*/
router: {
middleware: [
'auth',
'auth-refresh'
]
},
/*
** Auth configuration
*/
auth: {
plugins: [
'~/plugins/auth.js'
],
redirect: {
login: '/auth/login',
logout: '/',
home: '/',
callback: '/auth/callback'
},
strategies: {
local: {
_scheme: 'local',
name: 'local',
endpoints: {
login: {
url: `${baseUrl}/auth/getAccessToken`,
method: 'post',
propertyName: false
},
refresh: {
url: `${baseUrl}/auth/refreshAccessToken`,
method: 'post',
propertyName: false
},
logout: {
url: `${baseUrl}/auth/logout`,
method: 'post',
propertyName: false
},
user: {
url: `${baseUrl}/auth/user`,
method: 'get',
propertyName: false
}
},
tokenRequired: true,
tokenType: 'Bearer',
tokenName: 'Authorization',
globalToken: true,
accessTokenKey: 'access_token',
refreshTokenKey: 'refresh_token',
automaticRefresh: true,
expiration: {
factor: 0.9,
timeFormat: 'seconds'
}
}
}
},
/*
** i18n configuration
*/
i18n: {
locales: [
{
code: 'en',
name: 'English',
file: 'en.json'
},
{
code: 'de',
name: 'Deutsch',
file: 'de.json'
},
{
code: 'fr',
name: 'Français',
file: 'fr.json'
},
{
code: 'it',
name: 'Italiano',
file: 'it.json'
}
],
lazy: true,
defaultLocale: 'de',
langDir: 'locales/'
},
}