Related
I am trying to set up a PWA for an app in Laravel (5.8) with vuejs (2.5).
This is the configuration I have in mix.js:
...
mix.js('resources/js/app.js', 'public/js')
.generateSW({
// Define runtime caching rules.
runtimeCaching: [{
// Match any request that ends with .png, .jpg, .jpeg or .svg.
urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
// Apply a cache-first strategy.
handler: 'CacheFirst',
options: {
// Use a custom cache name.
cacheName: 'images',
// Only cache 10 images.
expiration: {
maxEntries: 10,
},
},
}],
skipWaiting: true
})
.vue()
.copy('node_modules/lodash/lodash.min.js', 'public/js')
.copy('./resources/manifest.json', 'public/dist/manifest.json')
.copy('./resources/icons', 'public/dist/')
.extract(['vue'])
.webpackConfig({
output: {
filename: '[name].js',
chunkFilename: `[name].chunk.[contenthash:8].js`,
path: path.join(__dirname, 'public/dist'),
publicPath: '/dist/'
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js',
'variables': path.resolve('resources/sass/_variables.scss')
}
},
plugins: [
new webpack.ContextReplacementPlugin(
/moment[\/\\]locale$/,
/(en|es)$/
),
]
})
.options({
processCssUrls: false,
});
...
The service worker was installed correctly and the first time it loads it caches my assets.
But the next calls I make (reload the page) don't use that cache and reload the assets from the network.
However, what I am looking for is a quick initial load after the PWA is installed and this is not happening.
I have done this before with Angular and the PWA module and the assets are loaded from cache, and if there are changes, they are updated later, which makes the initial load of the application very fast.
Can someone help me with this?
In the end I ended up using workbox-cli with this setup:
// workbox.config.js
module.exports = {
"globDirectory": "public/",
"globPatterns": [
"**/*.{js,css,ico,woff2,webmanifest}",
"**/images/icons/*",
"**/images/*",
],
// 15mb max file size
maximumFileSizeToCacheInBytes: 15 * 1024 * 1024,
globIgnores: [
'**/mix-manifest.json',
'**/js/{manifest,vendor}.js',
'**/js/chunks/*',
],
"swDest": "public/service-worker.js",
"swSrc": "resources/sw-offline.js"
};
And running this at the end of my npm run prod
workbox injectManifest workbox.config.js
All credit to this repository:
https://github.com/aleksandertabor/flashcards
Seeing as Vuetify adds around 300-340kb worth of icons when using icons: 'mdi' with the nuxt#vuetify-module, I've found answers indicating that purgeCSS is a good solution to shave off the unnecessary and unused icons.
I initially imported the icons manually from 'mdi/font' but quickly realized this was a very ineffective solution because it forced me to constantly come up with solutions of adding the icons manually to components.
I can't seem to get purgecss to remove the icons though (which is the most important to me).
I installed "#nuxtjs/vuetify": "^1.11.3",
I installed "nuxt-purgecss": "^1.0.0",
I installed "#mdi/font": "^5.9.55",
Looking at this answer I tried to create my settings
why do i see vuetify css in view source?
They also discuss it here:
https://github.com/vuetifyjs/vuetify/issues/7265
vuetify: {
customVariables: ['~/assets/variables.scss'],
treeShake: true,
defaultAssets: {
font: {
family: 'Ubuntu',
},
icons: {
iconfont: 'mdi',
},
},
theme: {
dark: false,
themes: {
light: {
primary: '#fec655',
primarytext: '#23263e',
},
}
}
},
purgeCSS: {
enabled: true,
paths: [
'components/**/*.vue',
'layouts/**/*.vue',
'pages/**/*.vue',
'plugins/**/*.js',
'./node_modules/vuetify/dist/*.js',
'./node_modules/vuetify/dist/*.css',
'./node_modules/vuetify/src/**/*.ts',
'./node_modules/#mdi/fonts/*',
],
styleExtensions: ['.css'],
// whitelist: ['body', 'html', 'nuxt-progress', ''],
whitelist: ['v-application', 'v-application--wrap','layout','row','col'],
whitelistPatterns: [
/^v-((?!application).)*$/,
/^theme--*/,
/.*-transition/,
/^justify-*/,
/^p*-[0-9]/,
/^m*-[0-9]/,
/^text--*/,
/--text$/,
/^row-*/,
/^col-*/,
/leaflet/,
/marker/
],
whitelistPatternsChildren: [/^v-((?!application).)*$/, /^theme--*/],
extractors: [
{
extractor: content => content.match(/[A-z0-9-:\\/]+/g) || [],
extensions: ['html', 'vue', 'js']
}
]
},
Yet still, this request is being made with the original size, any ideas? What am I doing wrong here? The fonts clearly are pulled from locally and not the CDN.
Aside from working with PurgeCss, Have you tried using #mdi/js instead of mdi icons ?
This's from dev.materialdesignicons.com guide:
Using the webfont while easy to use is highly discouraged due to performance and overall request size
So you may roll that by switching to #mdi/js pachage:
https://www.npmjs.com/package/#mdi/js
then specify usage in vuetify options in nuxt.config.js
icons: {
iconfont: 'mdiSvg',
}
Now you have saved considerably in the bundle size.
I am working on a Sapper project, as it seemed neat for a little project I wanted to get up and running quickly. That's not be easy and I'm now having trouble running scripts from my Sapper project that include the built-in 'fs' modules.
I'm trying to build a character generator. I have built a script that will do this but I'd like to be able to save my generated characters as JSON files then read them in later. Reading in is easy, writing doesn't seem to be listed anywhere obvious. The best I have is trying to get the built in plugins to function to allow me access to fs modules but my research on this is spotty and not helping. Trying to get rollup to help doesn't appear to work and I am unable to find an acceptable alternative.
Whenever I run the project, it just says that it can't resolve it.
Could not load fs (imported by E:\Software Projects\Javascript\Io-Generator\src\routes\generator\generator.js): ENOENT: no such file or directory, open 'E:\Software Projects\Javascript\Io-Generator\fs'
Nothing I do seems to help. Please can someone explain what I'm missing here? Am I using Sapper wrong? Am I missing something in rollup here? Is there an alternative I'm missing?
My roll-up config if it helps:
client: {
input: config.client.input(),
output: config.client.output(),
plugins: [
replace({
'process.browser': true,
'process.env.NODE_ENV': JSON.stringify(mode)
}),
svelte({
dev,
hydratable: true,
emitCss: true
}),
resolve({
browser: true,
preferBuiltins: true,
dedupe
}),
commonjs( {
browser: true
} ),
globals(),
builtins( {
fs: true
} ),
json(),
legacy && babel({
extensions: ['.js', '.mjs', '.html', '.svelte'],
runtimeHelpers: true,
exclude: ['node_modules/#babel/**'],
presets: [
['#babel/preset-env', {
targets: '> 0.25%, not dead'
}]
],
plugins: [
'#babel/plugin-syntax-dynamic-import',
['#babel/plugin-transform-runtime', {
useESModules: true
}]
]
}),
!dev && terser({
module: true
})
],
onwarn,
},
server: {
input: config.server.input(),
output: config.server.output(),
plugins: [
replace({
'process.browser': false,
'process.env.NODE_ENV': JSON.stringify(mode)
}),
svelte({
generate: 'ssr',
dev
}),
resolve({
browser: false,
preferBuiltins: true,
dedupe
}),
commonjs(),
builtins( {
fs: true
} ),
json()
],
external: Object.keys(pkg.dependencies).concat(
require('module').builtinModules || Object.keys(process.binding('natives'))
),
onwarn,
},
serviceworker: {
input: config.serviceworker.input(),
output: config.serviceworker.output(),
plugins: [
resolve( {
browser: false,
preferBuiltins: true
} ),
replace({
'process.browser': true,
'process.env.NODE_ENV': JSON.stringify(mode)
}),
commonjs(),
builtins( {
fs: true
} ),
json(),
!dev && terser()
],
onwarn,
}
};```
So, I went an restarted my project from a fresh project. Aaaaand it was fine. It's working fine. It's possible that I really screwed up my project trying out multiple different things to get them working, causing some serious damage. I'll need to be more careful in future.
in Visual Studio Code with ESLint and Prettier when working on .vue files, it seems I can't get vue/max-attributes-per-line to auto-fix correctly.
For example, with vue/max-attributes-per-line set to 'off', and I try to add line breaks manually it corrects it to always have every element on no more than one line, no matter if it is 81, 120, 200, or more characters wide. How can I figure out what is forcing my markup elements onto exactly one line?
I am using ESLint version 5.1.0 and Visual Studio Code (without the Prettier Extension), with Prettier 1.14.2.
Here's the example in a .vue file-- I cannot make this go on multiple lines no matter what I do, when 'vue/max-attributes-per-line': 'off'. Every time I save, it forces the long line of markup to be all on one line.
<template>
<font-awesome-icon v-if="statusOptions.icon" :icon="statusOptions.icon" :spin="statusOptions.isIconSpin" :class="['saving-indicator', 'pl-1', 'pt-1', statusOptions.iconClasses]" />
</template>
If I set 'vue/max-attributes-per-line': 2, it formats like so, with one line break(which is quite wrong as well).
<font-awesome-icon
v-if="statusOptions.icon"
:icon="statusOptions.icon"
:spin="statusOptions.isIconSpin"
:class="['saving-indicator', 'pl-1', 'pt-1', statusOptions.iconClasses]"
/>
If I try to reformat it manually, it just reverts to the above when I save.
Additionally, it seems to reformat twice when I hit Ctrl+S: first it reformats to put it all on one line, then a half-second later the formatting above results. Any ideas? What is causing this weirdness--are there multiple reformatters running? How do I figure out what the first one is to disable it?
VS Code workspace settings:
{
"editor.formatOnType": false,
"editor.formatOnPaste": false,
"editor.formatOnSave": true,
"[javascript]": {
"editor.tabSize": 2
},
"[vue]": {
"editor.tabSize": 2
},
"[csharp]": {
"editor.tabSize": 4
},
"javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
"javascript.referencesCodeLens.enabled": true,
"vetur.validation.script": false,
"vetur.validation.template": false,
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"eslint.options": {
"extensions": [
".html",
".js",
".vue",
".jsx"
]
},
"eslint.validate": [
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
},
"vue-html",
{
"language": "javascript",
"autoFix": true
},
{
"language": "javascriptreact",
"autoFix": true
}
],
"editor.rulers": [
80,
100
]
}
.eslintrc.js:
module.exports = {
parserOptions: {
parser: 'babel-eslint'
},
env: {
browser: true,
node: true,
jest: true
},
globals: {
expect: true
},
extends: [
'prettier',
'plugin:vue/recommended', // /base, /essential, /strongly-recommended, /recommended
'plugin:prettier/recommended', // turns off all ESLINT rules that are unnecessary due to Prettier or might conflict with Prettier.
'eslint:recommended'
],
plugins: ['vue', 'prettier'],
rules: {
'vue/max-attributes-per-line': 'off',
'prettier/prettier': [ // customizing prettier rules (not many of them are customizable)
'error',
{
singleQuote: true,
semi: false,
tabWidth: 2
},
],
'no-console': 'off'
}
}
Without changing any settings, ESLint --fix does indeed format properly--breaking all my .vue template elements into many lines properly. So any ideas how I whip VS Code into shape? The above settings didn't help, but I am at a loss how as to even know what is interfering. Any ideas?
To emphasize, when I save in VS Code, a long HTML element will collapse to one line then break to two lines a half-second later, all from one save operation. I'm expecting it instead to break it up into many lines. It would be okay if it took several saves, but instead the first save shows this behavior as well as every subsequent save.
Short answer: I needed: "editor.formatOnSave": false, "javascript.format.enable": false.
I finally found the magical combination of settings, thanks to this thread from Wes Bos on Twitter. I was right in my suspicion that there seem to be multiple conflicting formatters. Though I'm not sure what they actually are, I was able to turn off all but eslint as follows:
In the VS Code settings, I need:
"editor.formatOnSave": false,
"javascript.format.enable": false,
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"eslint.options": {
"extensions": [ ".html", ".js", ".vue", ".jsx" ]
},
"eslint.validate": [
{ "language": "html", "autoFix": true },
{ "language": "vue", "autoFix": true },
{ "language": "javascript", "autoFix": true },
{ "language": "javascriptreact", "autoFix": true }
]
In .eslintrc.js, then I can use the settings in my original post and then also change 'vue/max-attributes-per-line' as desired. Then VS Code's ESLint plugin will format code one step at a time on every save, much as kenjiru wrote. One last snag: HMR won't pick up these changes, so rebuild from scratch.
With 'vue/max-attributes-per-line': 'off' the rule is disabled so VSCode does not try to fix the long line on autosave. Other eslint fixes are applied, as expected.
With 'vue/max-attributes-per-line': 1 VSCode fixes only one error per save. This is a known limitation of vscode-eslint
vscode-eslint only does a single pass in order to keep to a minimum the amount of edits generated by the plugin. The goal is to keep as many markers (like break points) in the file as possible.
VSCode has a time limit of 1 second for all the plugins to compute the change set on save. If one of the plugins causes the other plugins to not run for 3 times in a row, it will be disabled.
eslint --fix runs all the rules in a loop until there are no more linting errors. I think it has a limit of 10 iterations maximum.
See these links for more details:
https://github.com/Microsoft/vscode-eslint/issues/154
I've created a minimal setup to demonstrate this issue:
https://github.com/kenjiru/vscode-eslint-onsave-issue
I know this is old but in case anyone should find this and not have success with the posted solutions, the fix for me was to add:
"editor.codeActionsOnSave": {
"source.fixAll": true
}
I did not need "editor.formatOnSave": true for some reason. I do not have Prettier installed - only ESLint - but this now performs any fixes automatically when I save.
This is the setup I ended up going with in VSC settings.json file.
Works perfectly for locally set up eslint disabling the default vetur settings (if the plugin is installed).
"files.autoSave": "onFocusChange",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": false,
"javascript.format.enable": false,
"eslint.alwaysShowStatus": true,
"eslint.options": {
"extensions": [ ".html", ".js", ".vue", ".jsx" ]
},
"eslint.validate": [
"html",
"javascript",
"vue"
],
I tried this things and it didn't worked.
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": false,
but it at last i tried this. and worked
"diffEditor.wordWrap": "off",
I bumped into the same issue, and surprisingly found that prettier and vetur were conflicting. I had to disable vetur formatter and it now works as expected.
If you have this section in your editor's settings.json and you have prettier installed,
{
"[vue]": {
"editor.defaultFormatter": "octref.vetur",
},
}
chances are, these two formatters are conflicting and thus the unexpected behaviour.
A quick workaround is to comment it as below, or simply delete it permanently.
{
"[vue]": {
// "editor.defaultFormatter": "octref.vetur",
},
}
I've struggled through a similar problem. I tried the solution above but didn't work for me, unfortunately. I'm using eslint and Vetur, didn't install prettier plugin but configured it via eslint and enabled "eslint.autoFixOnSave": true. I finally got the correct autoformat on save by removing the following configuration in settings.json. Not sure why but it's working for me.
"eslint.options": {
"extensions": [".html", ".js", ".vue", ".jsx"]
},
"eslint.validate": [{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
},
{
"language": "javascript",
"autoFix": true
},
{
"language": "javascriptreact",
"autoFix": true
}
]
Will update this answer if I get other issues related to this.
I'm trying to get Grunt to process my less files every time I make a change to one of the files.
I have a 'watch' task working, and it says it is processing files when I make a change, and it outputs the correct files which change, so my watch is working, but the changes I make are not being made on the css file.
My file structure is like this
-styles
globals.less
components.less
-menu
menu.less
-header
header.less
The components.less file is a group of less mixins to grab the other .less files like #import "menu/menu.less";
In my grunt file, I have
less: {
development: {
options: {
paths: ['./app/vendor/modern-touch-less','./app/styles']
},
files: {
'./app/styles/modern-touch.css':'./app/vendor/modern-touch-less/style.less',
'./app/styles/components.css':'./app/styles/components.less'
}
}
},
watch: {
js: {
files: ['/scripts/{,*/}*.js','/styles/{,*/}*.less'],
tasks: ['newer:jshint:all, less'],
options: {
livereload: true
}
},
styles: {
files: ['./styles/{,*/}*.*','./vendor/{,*/}*.less'],
tasks: ['less','newer:copy:styles', 'autoprefixer'],
options: {
nospawn: true,
livereload: true
}
},
}
When I first start the app, the less files are built into the correct components.css file, but after changing a file, the components.css file is not updated.
Grunt is started with
grunt.task.run([
'clean:server',
'bower-install',
'concurrent:server',
'less',
'autoprefixer',
'connect:livereload',
'watch',
'karma'
]);
Perhaps you can try simplifying your configuration, by splitting tasks out to run on the appropriate set of files.
watch: {
js: {
files: ['/scripts/{,*/}*.js'],
tasks: ['newer:jshint:all'],
options: {
livereload: true
}
},
styles: {
files: ['./styles/{,*/}*.*','./vendor/{,*/}*.less'],
tasks: ['less','newer:copy:styles', 'autoprefixer'],
options: {
nospawn: true,
livereload: true
}
},
}
In your original watch config, the watch.js.tasks array was ['newer:jshint:all, less'], which looks like a typo, should be ['newer:jshint:all', 'less']. This may fix the problem too, but I would consider just running tasks on the files that they are affected by.