Skip to content

chore: move sanity checks to common module #4987

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 52 additions & 2 deletions src/lib/core/common-behaviors/common-module.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
import {NgModule} from '@angular/core';
import {NgModule, InjectionToken, Optional, Inject, isDevMode} from '@angular/core';
import {DOCUMENT} from '@angular/platform-browser';
import {CompatibilityModule} from '../compatibility/compatibility';


/** Injection token that configures whether the Material sanity checks are enabled. */
export const MATERIAL_SANITY_CHECKS = new InjectionToken<boolean>('md-sanity-checks');


/**
* Module that captures anything that should be loaded and/or run for *all* Angular Material
* components. This includes Bidi, compatibility mode, etc.
Expand All @@ -11,5 +16,50 @@ import {CompatibilityModule} from '../compatibility/compatibility';
@NgModule({
imports: [CompatibilityModule],
exports: [CompatibilityModule],
providers: [{
provide: MATERIAL_SANITY_CHECKS, useValue: true,
}],
})
export class MdCommonModule { }
export class MdCommonModule {
/** Whether we've done the global sanity checks (e.g. a theme is loaded, there is a doctype). */
private _hasDoneGlobalChecks = false;

constructor(
@Optional() @Inject(DOCUMENT) private _document: any,
@Optional() @Inject(MATERIAL_SANITY_CHECKS) _sanityChecksEnabled: boolean) {

if (_sanityChecksEnabled && !this._hasDoneGlobalChecks && _document && isDevMode()) {
this._checkDoctype();
this._checkTheme();
this._hasDoneGlobalChecks = true;
}
}

private _checkDoctype(): void {
if (!this._document.doctype) {
console.warn(
'Current document does not have a doctype. This may cause ' +
'some Angular Material components not to behave as expected.'
);
}
}

private _checkTheme(): void {
if (typeof getComputedStyle === 'function') {
const testElement = this._document.createElement('div');

testElement.classList.add('mat-theme-loaded-marker');
this._document.body.appendChild(testElement);

if (getComputedStyle(testElement).display !== 'none') {
console.warn(
'Could not find Angular Material core theme. Most Material ' +
'components may not work as expected. For more info refer ' +
'to the theming guide: https://material.angular.io/guide/theming'
);
}

this._document.body.removeChild(testElement);
}
}
}
62 changes: 2 additions & 60 deletions src/lib/core/compatibility/compatibility.ts
Original file line number Diff line number Diff line change
@@ -1,19 +1,7 @@
import {
NgModule,
Directive,
Inject,
Optional,
isDevMode,
ElementRef,
InjectionToken,
} from '@angular/core';
import {DOCUMENT} from '@angular/platform-browser';
import {NgModule, Directive, Inject, Optional, ElementRef, InjectionToken} from '@angular/core';

export const MATERIAL_COMPATIBILITY_MODE = new InjectionToken<boolean>('md-compatibility-mode');

/** Injection token that configures whether the Material sanity checks are enabled. */
export const MATERIAL_SANITY_CHECKS = new InjectionToken<boolean>('md-sanity-checks');

/**
* Returns an exception to be thrown if the consumer has used
* an invalid Material prefix on a component.
Expand Down Expand Up @@ -183,54 +171,8 @@ export class MdPrefixRejector {
@NgModule({
declarations: [MatPrefixRejector, MdPrefixRejector],
exports: [MatPrefixRejector, MdPrefixRejector],
providers: [{
provide: MATERIAL_SANITY_CHECKS, useValue: true,
}],
})
export class CompatibilityModule {
/** Whether we've done the global sanity checks (e.g. a theme is loaded, there is a doctype). */
private _hasDoneGlobalChecks = false;

constructor(
@Optional() @Inject(DOCUMENT) private _document: any,
@Optional() @Inject(MATERIAL_SANITY_CHECKS) _sanityChecksEnabled: boolean) {

if (_sanityChecksEnabled && !this._hasDoneGlobalChecks && _document && isDevMode()) {
// Delay running the check to allow more time for the user's styles to load.
this._checkDoctype();
this._checkTheme();
this._hasDoneGlobalChecks = true;
}
}

private _checkDoctype(): void {
if (!this._document.doctype) {
console.warn(
'Current document does not have a doctype. This may cause ' +
'some Angular Material components not to behave as expected.'
);
}
}

private _checkTheme(): void {
if (typeof getComputedStyle === 'function') {
const testElement = this._document.createElement('div');

testElement.classList.add('mat-theme-loaded-marker');
this._document.body.appendChild(testElement);

if (getComputedStyle(testElement).display !== 'none') {
console.warn(
'Could not find Angular Material core theme. Most Material ' +
'components may not work as expected. For more info refer ' +
'to the theming guide: https://material.angular.io/guide/theming'
);
}

this._document.body.removeChild(testElement);
}
}
}
export class CompatibilityModule {}


/**
Expand Down
2 changes: 1 addition & 1 deletion src/lib/core/core.ts
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ export {coerceNumberProperty} from './coercion/number-property';
export {CompatibilityModule, NoConflictStyleCompatibilityMode} from './compatibility/compatibility';

// Common material module
export {MdCommonModule} from './common-behaviors/common-module';
export {MdCommonModule, MATERIAL_SANITY_CHECKS} from './common-behaviors/common-module';

// Datetime
export * from './datetime/index';
Expand Down