Is there any way to disable the default quasar.css which comes with a Quasar app?
It's almost 12000 lines long and I don't plan on using any of it. I can't find anything which mentions how you could do this, so I'm assuming it can't be done.
The solution I've got is for quasar v2, but I am pretty sure it should work with v1 too.
The end result is straighforward:
// quasar.config.js
build: {
chainWebpack (chain) {
chain.resolve.alias.set('quasar/dist/quasar.css', false)
chain.resolve.alias.set('quasar/dist/quasar.prod.css', false)
chain.module.rule('sass').exclude.add(path.resolve(__dirname, '../../node_modules/quasar/dist/quasar.sass'))
chain.module.rule('scss').exclude.add(path.resolve(__dirname, '../../node_modules/quasar/dist/quasar.scss'))
}
}
The chain.resolve.alias.set is taking care of import 'quasar/dist/quasar.css' in the .quasar/client-entry.js file. For a further explanation see https://webpack.js.org/configuration/resolve/#resolvealias
Setting resolve.alias to false will tell webpack to ignore a module.
The chain.module.rule part disables processing of sass/scss. Note that ../../node_modules path will need amending if you don't use workspaces (https://docs.npmjs.com/cli/v7/using-npm/workspaces or https://classic.yarnpkg.com/lang/en/docs/workspaces/).
Note: don't use IgnorePlugin as the imported module will be removed during the build (see https://github.com/webpack/webpack/issues/2858)
Another note: I only tested this in SPA mode, but will update the answer if I come across any problems while testing other modes.
//quasar.conf.js Quasar plugins
plugins: [],
removeDefaultCss: true
Related
I am trying to make a POC and I'm such making a really simple use-case.
In there, I use a src/lib/db.ts who, for our interest, contains this code
console.log(import.meta.env.MONGO_URI, import.meta.env.SSR);
giving
undefined true
Of course, my .env file contains a definition for MONGO_URI, I tried with VITE_MONGO_URI and could see the value.
I know a way to expose it is to use VITE_MONGO_URI but my point is exactly not to expose it on the client-side.
I checked and the file db.ts is not bundled with the client, even the import.meta.env.SSR being true shows that the bundler knows it's happening on the server.
Question: How to access my private environment variables server-side ?
EDIT: As specified by Shriji Kondan, the API for this purpose has been created now : here
You could use dotenv on the server side, assuming you are using node-adapter, you can have a file _constants.ts in your app
import 'dotenv/config';
export const MONGO_URI = process.env.MONGO_URI;
and then import this variable into your script.
It's not very awesome to put secrets on client-side code. It should be either utilities.ts with a performed action SUPER_SECRET_API_KEY="$ecret#p1Key" in .env file, then request it via in src/lib/utilities/utility.js as explained here :
import { SUPER_SECRET_API_KEY } from '$env/static/private';
export function performApiAction() {
const apiInstance = initialiseApi({key: SUPER_SECRET_API_KEY});
}
or from page.server.ts via form actions as stated here which is preferable way but it's more complex.
I'm seeing the following error:
link: package conflict error: google.golang.org/genproto/googleapis/api/annotations: multiple copies of package passed to linker:
#go_googleapis//google/api:annotations_go_proto
#org_golang_google_genproto//googleapis/api/annotations:annotations
Set "importmap" to different paths or use 'bazel cquery' to ensure only one
package with this path is linked.
#org_golang_google_genproto//googleapis/api/annotations:annotations is being brought in through:
#com_github_uber_cadence//service/history:go_default_library
#com_github_uber_cadence//service/history:history
#com_github_uber_cadence//common/resource:resource
#com_github_uber_cadence//common/archiver/provider:provider
#com_github_uber_cadence//common/archiver/gcloud:gcloud
#com_github_uber_cadence//common/archiver/gcloud/connector:connector
#com_google_cloud_go_storage//:storage
#org_golang_google_genproto//googleapis/iam/v1:iam
#org_golang_google_genproto//googleapis/api/annotations:annotations
Can #org_golang_google_genproto//googleapis/api/annotations:annotations be disabled or shadowed by #go_googleapis//google/api:annotations_go_proto? If so, how?
Option I went with:
Change what uses #org_golang_google_genproto//googleapis/api/annotations to use #go_googleapis//google/api:annotations_go_proto instead by using appropriate gazelle:resolve directives in the repositories.bzl file:
go_repository(
name = "com_google_cloud_go",
build_directives = [
# #go_googleapis is the modern version of #org_golang_google_genproto
# use #go_googleapis to avoid dependency conflicts between the two
"gazelle:resolve go google.golang.org/genproto/googleapis/iam/v1 #go_googleapis//google/iam/v1:iam_go_proto", # keep
],
…
)
go_repository(
name = "com_google_cloud_go_storage",
build_directives = [
# #go_googleapis is the modern version of #org_golang_google_genproto
# use #go_googleapis to avoid dependency conflicts between the two
"gazelle:resolve go google.golang.org/genproto/googleapis/iam/v1 #go_googleapis//google/iam/v1:iam_go_proto", # keep
"gazelle:resolve go google.golang.org/genproto/googleapis/type/expr #go_googleapis//google/type:expr_go_proto", # keep
"gazelle:resolve go google.golang.org/genproto/googleapis/api/annotations #go_googleapis//google/api:annotations_go_proto", # keep
],
…
)
The following also works but I preferred the above since it uses the newer library:
Change what uses #go_googleapis//google/api:annotations_go_proto to use #org_golang_google_genproto//googleapis/api/annotations instead by using appropriate gazelle:resolve directives in the root BUILD file:
# gazelle:resolve go google.golang.org/genproto/googleapis/api/annotations #org_golang_google_genproto//googleapis/api/annotations
Other options considered and reasons I didn't go with them:
Upgrade to the latest #com_google_cloud_go_storage. Didn't go with this option because the latest version (v1.24.0 at the time of this post) still uses #org_golang_google_genproto.
Upgrade #com_google_cloud_go_storage to use #go_googleapis. Didn't go with this option because it looked too difficult to get merged.
repo_mapping = {"#org_golang_google_genproto" : "#go_googleapis"} for com_google_cloud_go_storage. Didn't go with this option because #go_googleapis isn't a drop-in replacement for #org_golang_google_genproto (#go_googleapis uses the prefix google while #org_golang_google_genproto uses the prefix googleapis).
"gazelle:exclude **/common/archiver/gcloud/**" for com_github_uber_cadence. Didn't go with this option because common/archiver/provider depends on common/archiver/gcloud.
Set prefix for go_googleapis from google to googleapis. Didn't go with this option because it breaks expectations for those familiar with go_googleapis standard practice.
I'm using the rollup plugin strip to exclude the console.logs in the production built with following settings
plugins: [
strip({
include: ['**/*.(js|svelte)'],
labels: ['dev'],
functions: ['console.log'],
})
]
I now have the situation that I would like to keep one special log in production. So I created a function in a new file logInProduction.js
export function logInProduction(msg) {
console.log(msg)
throw new Error('PRODUCTION')
}
and added the file to the plugin options by adding this line
exclude: ['logInProduction.js'],
But when calling the function, the error is thrown, so the function was called, but the log before doesn't appear.
Is this because the .js ending is generally included before so the specific exclusion doen't have any effect? Is it possible to do this?
Or is there another maybe better way to keep one specific console.log?
Problem was, that the filename was missing the directory, so
exclude: ['src/utils/logInProduction.js'],
or
exclude: ['**/logInProduction.js'],
does work
Is it possible to disable the LoadingBar of Quasasr completely? It's loading with every AJAX request, but I have own solution for it.
Source:
https://quasar.dev/quasar-plugins/loading-bar
WARNING
When using the UMD version of Quasar, all components, directives and
plugins are installed by default. This includes LoadingBar. Should you
wish to disable it, specify loadingBar: { skipHijack: true } (which
turns off listening to Ajax traffic).
Link - https://quasar.dev/quasar-plugins/loading-bar#Installation
Set skipHijack to true for disabling QAjaxBar.
When using the karma javascript test library (née Testacular) together with Rails, where should test files and mocked data go be placed?
It seems weird to have them in /assets/ because we don’t actually want to serve them to users. (But I guess if they are simply never precompiled, then that’s not an actual problem, right?)
Via this post: https://groups.google.com/forum/#!topic/angular/Mg8YjKWbEJ8
I'm experimenting with something that looks like this:
// list of files / patterns to load in the browser
files: [
'http://localhost:3000/assets/application.js',
'spec/javascripts/*_spec.coffee',
{
pattern: 'app/assets/javascripts/*.{js,coffee}',
watched: true,
included: false,
served: false
}
],
It watches app js files, but doesn't include them or serve them, instead including the application.js served by rails and sprockets.
I've also been fiddling with https://github.com/lucaong/sprockets-chain , but haven't found a way to use requirejs to include js files from within gems (such as jquery-rails or angularjs-rails).
We ended up putting tests and mocked data under the Rails app’s spec folder and configuring Karma to import them as well as our tested code from app/assets.
Works for us. Other thoughts are welcome.
Our config/karma.conf.js file:
basePath = '../';
files = [
JASMINE,
JASMINE_ADAPTER,
//libs
'vendor/assets/javascripts/angular/angular.js',
'vendor/assets/javascripts/angular/angular-*.js',
'vendor/assets/javascripts/jquery-1.9.1.min.js',
'vendor/assets/javascripts/underscore-min.js',
'vendor/assets/javascripts/angular-strap/angular-strap.min.js',
'vendor/assets/javascripts/angular-ui/angular-ui.js',
'vendor/assets/javascripts/angular-bootstrap/ui-bootstrap-0.2.0.min.js',
//our app!
'app/assets/javascripts/<our-mini-app>/**',
// and our tests
'spec/javascripts/<our-mini-app>/lib/angular/angular-mocks.js',
'spec/javascripts/<our-mini-app>/unit/*.coffee',
// mocked data
'spec/javascripts/<our-mini-app>/mocked-data/<data-file>.js.coffee',
];
autoWatch = true;
browsers = 'PhantomJS'.split(' ')
preprocessors = {
'**/*.coffee': 'coffee'
}
I found this project helpful as a starting point. https://github.com/monterail/rails-angular-karma-example. It is explained by the authors on their blog.
It's an example rails app with angular.js and karma test runner.