I'm a bit confused about RenovateBot's specificity. We have a Expo/ReactNative app where we don't want minor updates to the react* or expo* packages because of the way RN does numbering. However, we want to do minor updates for other packages that follow semver.
I have the following renovate.json. RenovateBot keeps trying to update to an unsupported react#18.2.0 (want ~18.0.0 and react-native#0.10.0 (want ~0.69.0). Does the last block need to negate the specific blocks above it? I've also tried putting that at the top, to no avail.
{
"$schema": "https://docs.renovatebot.com/renovate-schema.json",
"assignees": ["orbiteleven"],
"automergeType": "pr",
"prCreation": "immediate",
"timezone": "Europe/Copenhagen",
"extends": ["config:base"],
"packageRules": [
{
"extends": "monorepo:babel",
"matchUpdateTypes": ["digest", "patch"],
"groupName": "babel monorepo"
},
{
"extends": "monorepo:expo",
"matchUpdateTypes": ["digest", "patch"],
"groupName": "expo monorepo"
},
{
"extends": "monorepo:jest",
"matchUpdateTypes": ["digest", "patch", "minor"],
"groupName": "jest monorepo"
},
{
"matchPackagePrefixes": ["react", "#types/react"],
"matchUpdateTypes": ["digest", "patch"],
"groupName": "react monorepo"
},
{
"extends": "monorepo:sentry-javascript",
"matchUpdateTypes": ["digest", "patch"],
"groupName": "sentry-javascript monorepo"
},
{
"extends": "monorepo:typescript-eslint",
"matchUpdateTypes": ["digest", "patch", "minor"],
"groupName": "typescript-eslint monorepo"
},
{
"matchUpdateTypes": ["minor", "patch"],
"automerge": true
}
]
}
Related
I am trying to do component testing using Cypress component test runner. The web components are built using stencil. We compile the stencil components and create respective "Angular component" and import them into our projects.
The component is as expected when launched in the angular app. However when it is mounted, and the tests are executed using cypress, the CSS for these pre built components are not getting loaded.
cypress.json
{
"component": {
"componentFolder": "src",
"testFiles": "**/*component.spec.ts"
}
}
angular.json
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"angulartest": {
"projectType": "application",
"schematics": {
"#schematics/angular:component": {
"style": "scss"
},
"#schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "nexus",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/angulartest",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "angulartest:build:production"
},
"development": {
"browserTarget": "angulartest:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "angulartest:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
}
}
}
},
"defaultProject": "angulartest",
"default": {
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"angulartest": {
"projectType": "application",
"schematics": {
"#schematics/angular:component": {
"style": "scss"
},
"#schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "nexus",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/angulartest",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "angulartest:build:production"
},
"development": {
"browserTarget": "angulartest:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "angulartest:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
}
}
}
},
"defaultProject": "angulartest"
}
}
package.json
{
"name": "angulartest",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"#angular/animations": "~13.2.0",
"#angular/common": "~13.2.0",
"#angular/compiler": "~13.2.0",
"#angular/core": "~13.2.0",
"#angular/forms": "~13.2.0",
"#angular/platform-browser": "~13.2.0",
"#angular/platform-browser-dynamic": "~13.2.0",
"#angular/router": "~13.2.0",
"#nexus/angular": "1.0.0",
"#nexus/core": "1.0.0",
"#ngrx/store": "13.0.2",
"core-js": "^2.6.12",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "~13.2.5",
"#angular/cli": "~13.2.5",
"#angular/compiler-cli": "~13.2.0",
"#cypress/webpack-dev-server": "^1.8.2",
"#types/cypress": "^1.1.3",
"#types/jasmine": "~3.6.0",
"#types/node": "^12.11.1",
"angular2-template-loader": "^0.6.2",
"cypress": "^9.5.1",
"cypress-angular-unit-test": "^3.9.0",
"html-webpack-plugin": "^4.5.2",
"istanbul-instrumenter-loader": "^3.0.1",
"jasmine-core": "~3.7.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"raw-loader": "1.0.0",
"sass-loader": "^12.6.0",
"to-string-loader": "^1.2.0",
"ts-loader": "^9.2.7",
"typescript": "4.4.2"
}
}
component.spec.ts
/// <reference types="cypress" />
import { initEnv, mount, setConfig } from 'cypress-angular-unit-test';
import { ToastComponent } from './toast.component';
describe('AppComponent', () => {
beforeEach(() => {
setConfig({
stylesheet:
'../../node_modules/#nexus/core/dist/styles.scss',
});
{
initEnv(ToastComponent);
const fixture = mount(ToastComponent);
}
});
it('should create', () => {
cy.get('.nexus-rhythm-2');
});
});
cypress/plugins/index.js
/// <reference types="cypress" />
/**
* #type {Cypress.PluginConfig}
*/
const webpackConfig = require('./webpack.config');
const { startDevServer } = require('#cypress/webpack-dev-server');
module.exports = (on, config) => {
on('dev-server:start', (options) =>
startDevServer({
options,
webpackConfig,
}),
);
return config;
};
Expected
Actual
I did a few changes to my spec file, as suggested by one of the github issues for Cypress-angular-unit-testing repository
/// <reference types="cypress" />
import { setConfig, initEnv, mount } from 'cypress-angular-unit-test';
import { ToastComponent } from './toast.component';
import { ComponentFixture } from '#angular/core/testing';
import { NexusAngularModule } from '#nexus/angular';
import { CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
import {Locators} from './toast.component.const'
import {DESKTOP, TAB_LANDSCAPE, TAB_PORTRAIT, MOBILE} from '../../constants'
describe('AppComponent', () => {
let fixture: ComponentFixture<ToastComponent>;
beforeEach(() => {
setConfig({
stylesheet: 'src/styles.css'
});
initEnv(ToastComponent, {
imports: [NexusAngularModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
declarations: [ToastComponent],
});
fixture = mount(ToastComponent);
fixture.detectChanges();
});
it('should create', () => {
cy.get(':nth-child(1) > .nexus-toast > .nexus-toast-content')
.should('contains.text', 'Information message')
});
});
After doing this, I was able to get the icons along with the text, but still the colors were not rendering. When I went through the styles.scss file, I found that visibility of almost all the classes that contained styles were marked as:
visibility: disabled;
which I changed to,
visibility: visible;
post this, I got the CSS rendered properly
The styles are .scss which need preprocessing, which happens in cypress/plugins/index.js
You already have a webpack.config in your plugins folder.
Does it have a rule for scss?
module: {
rules: [
...
{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader'
}
]
}
...
When I use Tailwind to style an Angular application with a custom webpack, the styles.js chunk is huge after running ng build, coming in at around 30mb. This not only takes forever to build, but also slows down my web app.
After purging the Tailwind, the styles.js chunk is far smaller (~100kb), however 30mb just seems ridiculously big, even un-purged.
This even applies to a fresh application built with https://github.com/notiz-dev/ngx-tailwind, so I'm not sure what is causing the issue.
tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
loader: 'postcss-loader',
options: {
postcssOptions: {
ident: 'postcss',
syntax: 'postcss-scss',
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
],
},
},
},
],
},
};
angular.json
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"ngxTailwind": {
"projectType": "application",
"schematics": {
"#schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "ngx-build-plus:browser",
"options": {
"extraWebpackConfig": "webpack.config.js",
"outputPath": "dist/ngxTailwind",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "ngx-build-plus:dev-server",
"options": {
"extraWebpackConfig": "webpack.config.js",
"browserTarget": "ngxTailwind:build"
},
"configurations": {
"production": {
"browserTarget": "ngxTailwind:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "ngxTailwind:build"
}
},
"test": {
"builder": "ngx-build-plus:karma",
"options": {
"extraWebpackConfig": "webpack.config.js",
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "ngxTailwind:serve"
},
"configurations": {
"production": {
"devServerTarget": "ngxTailwind:serve:production"
}
}
}
}
}
},
"defaultProject": "ngxTailwind",
"cli": {
"analytics": "c9efd59e-9db9-4f26-9a6f-e35b477d8e5a"
}
}
styles.scss
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
Does anyone have any idea as to why it's so big? I understand it is not purged, but https://tailwindcss.com/docs/optimizing-for-production claims the uncompressed size is under 4mb, why am I getting nearly 7 times this?
Just change tailwind.config.js
module.exports = {
purge: {
enabled: true,
content: ['./src/**/*.{html,ts}']
},
//Other Code
};
then build: ng build --prod
Reference: Enabling manually
I'm using #angular/cli when I execute ng server
the css code doesn't show up in anyway on the webpage.
This is the angular-cli.json
{
"project": {
"version": "1.0.0-beta.18",
"name": "botshop"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"../vendor/font-awesome/css/font-awesome.min.css",
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/metismenu/src/metisMenu.css",
"./assets/css/sb-admin-2.min.css",
"styles.css"
],
"scripts": [
"../systemjs.config.js",
"../node_modules/core-js/shim.js",
"../node_modules/zone.js/dist/zone.js",
"../node_modules/reflect-metadata/Reflect.js",
"../node_modules/systemjs/dist/system.src.js",
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js",
"../node_modules/metismenu/src/metisMenu.js",
"./assets/js/sb-admin-2.min.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"addons": [],
"packages": [],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": false,
"pipe": true,
"service": true
}
}
}
I'm getting outputed .js files but not any css.
I have upgraded ng-cli to the latest version and I'm using the last nodejs LTS
Any ideas?
Executing grunt jade:dev on this
grunt.initConfig({
"jade": {
"dev": {
"files": {
"cwd": "src",
"src": ["**/*.jade"],
"dest": "dist",
"ext": ".html",
"expand": true
},
"options": {
"pretty": true,
"data": {
"environment": "dev"
}
}
},
"prod": {
"files": {
"cwd": "src",
"src": ["**/*.jade"],
"dest": "dist",
"ext": ".html",
"expand": true
},
"options": {
"pretty": true,
"data": {
"environment": "prod"
}
}
}
}
});
fails with
Warning: Unable to read "src" file (Error code: EISDIR). Use --force to continue.
But executing grunt jade on this
grunt.initConfig({
"jade": {
"files": {
"cwd": "src",
"src": ["**/*.jade"],
"dest": "dist",
"ext": ".html",
"expand": true
},
"options": {
"pretty": true,
"data": {
"environment": "dev"
}
}
}
});
succeeds.
There is no difference between the configuration of the tasks I'm running in both cases. What am I missing?
I don't know why, but this seems to work:
grunt.initConfig({
"jade": {
"dev": {
"cwd": "src",
"src": ["**/*.jade"],
"dest": "dist",
"ext": ".html",
"expand": true,
"options": {
"pretty": true,
"data": {
"environment": "dev"
}
}
},
"prod": {
"cwd": "src",
"src": ["**/*.jade"],
"dest": "dist",
"ext": ".html",
"expand": true,
"options": {
"pretty": true,
"data": {
"environment": "prod"
}
}
}
}
});
All I did was remove the enclosing "files" object.
I trying to implement angular-gird using Browserify.
I used a configuration like this:
{
"name": "Project",
"description": "Description",
"version": "0.0.1",
"repository": "...",
"license": "License",
"private": true,
"dependencies": {
"angular": "1.3.15",
"angular-ui-router": "0.2.14",
"angular-grid": "1.2.0"
},
"devDependencies": {
"browserify": "9.0.8",
"browserify-shim": "3.8.5",
},
"browserify": {
"transform": [
"browserify-shim"
]
},
"browser": {
"angular": "./client/app/common/angular-lib.js",
},
"browserify-shim": {
"angular-ui-router": {
"depends": "angular"
},
"angular-grid": {
"depends": "angular"
}
}
}
But then I get the error:
"Uncaught TypeError: require.config is not a function" (main.js).
Can someone help me? What is the best way to implement angularGrid with Browserify?