Skip to content

feat(packaging): move packaging to a single "@angular/material" #1286

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 1 commit into from
Sep 22, 2016
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
17 changes: 10 additions & 7 deletions scripts/ci/forbidden-identifiers.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const blocked_statements = [
];

const sourceFolders = ['./src', './e2e'];
const scopePackages = glob('src/lib/*');
const libRoot = 'src/lib';
const blockedRegex = new RegExp(blocked_statements.join('|'), 'g');
const importRegex = /from\s+'(.*)';/g;

Expand Down Expand Up @@ -58,7 +58,9 @@ findTestFiles()
lineCount++;

let matches = line.match(blockedRegex);
let scopeImport = isRelativeScopeImport(fileName, line);
let scopeImport = path.relative(libRoot, fileName).startsWith('..')
? isRelativeScopeImport(fileName, line)
: false;

if (matches || scopeImport) {

Expand Down Expand Up @@ -155,6 +157,10 @@ function findChangedFiles() {
* @param line Line to be checked.
*/
function isRelativeScopeImport(fileName, line) {
if (fileName.startsWith(libRoot)) {
return false;
}

let importMatch = importRegex.exec(line);

// We have to reset the last index of the import regex, otherwise we
Expand Down Expand Up @@ -184,8 +190,7 @@ function isRelativeScopeImport(fileName, line) {
if (fileScope.path !== importScope.path) {

// Creates a valid import statement, which uses the correct scope package.
let importFilePath = path.relative(importScope.path, importPath);
let validImportPath = `@angular2-material/${importScope.name}/${importFilePath}`;
let validImportPath = `@angular/material`;

return {
fileScope: fileScope.name,
Expand All @@ -200,9 +205,7 @@ function isRelativeScopeImport(fileName, line) {
filePath = path.normalize(filePath);

// Iterate through all scope paths and try to find them inside of the file path.
var scopePath = scopePackages
.filter(scope => filePath.indexOf(path.normalize(scope)) !== -1)
.pop();
var scopePath = filePath.indexOf(path.normalize(libRoot)) == -1 ? libRoot : filePath;

// Return an object containing the name of the scope and the associated path.
return {
Expand Down
51 changes: 35 additions & 16 deletions scripts/release/inline-resources.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,14 @@ const writeFile = promiseify(fs.writeFile);


function inlineResources(globs) {
if (typeof globs == 'string') {
globs = [globs];
}

/**
* For every argument, inline the templates and styles under it and write the new file.
*/
for (let pattern of globs) {
return Promise.all(globs.map(pattern => {
if (pattern.indexOf('*') < 0) {
// Argument is a directory target, add glob patterns to include every files.
pattern = path.join(pattern, '**', '*');
Expand All @@ -43,17 +47,32 @@ function inlineResources(globs) {
.filter(name => /\.js$/.test(name)); // Matches only JavaScript files.

// Generate all files content with inlined templates.
files.forEach(filePath => {
readFile(filePath, 'utf-8')
.then(content => inlineTemplate(filePath, content))
.then(content => inlineStyle(filePath, content))
.then(content => removeModuleId(filePath, content))
return Promise.all(files.map(filePath => {
return readFile(filePath, 'utf-8')
.then(content => inlineResourcesFromString(content, url => {
return path.join(path.dirname(filePath), url);
}))
.then(content => writeFile(filePath, content))
.catch(err => {
console.error('An error occured: ', err);
});
});
}
}));
}));
}

/**
* Inline resources from a string content.
* @param content {string} The source file's content.
* @param urlResolver {Function} A resolver that takes a URL and return a path.
* @returns {string} The content with resources inlined.
*/
function inlineResourcesFromString(content, urlResolver) {
// Curry through the inlining functions.
return [
inlineTemplate,
inlineStyle,
removeModuleId
].reduce((content, fn) => fn(content, urlResolver), content);
}

if (require.main === module) {
Expand All @@ -64,13 +83,13 @@ if (require.main === module) {
/**
* Inline the templates for a source file. Simply search for instances of `templateUrl: ...` and
* replace with `template: ...` (with the content of the file included).
* @param filePath {string} The path of the source file.
* @param content {string} The source file's content.
* @param urlResolver {Function} A resolver that takes a URL and return a path.
* @return {string} The content with all templates inlined.
*/
function inlineTemplate(filePath, content) {
function inlineTemplate(content, urlResolver) {
return content.replace(/templateUrl:\s*'([^']+?\.html)'/g, function(m, templateUrl) {
const templateFile = path.join(path.dirname(filePath), templateUrl);
const templateFile = urlResolver(templateUrl);
const templateContent = fs.readFileSync(templateFile, 'utf-8');
const shortenedTemplate = templateContent
.replace(/([\n\r]\s*)+/gm, ' ')
Expand All @@ -83,16 +102,16 @@ function inlineTemplate(filePath, content) {
/**
* Inline the styles for a source file. Simply search for instances of `styleUrls: [...]` and
* replace with `styles: [...]` (with the content of the file included).
* @param filePath {string} The path of the source file.
* @param urlResolver {Function} A resolver that takes a URL and return a path.
* @param content {string} The source file's content.
* @return {string} The content with all styles inlined.
*/
function inlineStyle(filePath, content) {
function inlineStyle(content, urlResolver) {
return content.replace(/styleUrls:\s*(\[[\s\S]*?\])/gm, function(m, styleUrls) {
const urls = eval(styleUrls);
return 'styles: ['
+ urls.map(styleUrl => {
const styleFile = path.join(path.dirname(filePath), styleUrl);
const styleFile = urlResolver(styleUrl);
const styleContent = fs.readFileSync(styleFile, 'utf-8');
const shortenedStyle = styleContent
.replace(/([\n\r]\s*)+/gm, ' ')
Expand All @@ -107,13 +126,13 @@ function inlineStyle(filePath, content) {

/**
* Remove every mention of `moduleId: module.id`.
* @param _ {string} The file path of the source file, currently ignored.
* @param content {string} The source file's content.
* @returns {string} The content with all moduleId: mentions removed.
*/
function removeModuleId(_, content) {
function removeModuleId(content) {
return content.replace(/\s*moduleId:\s*module\.id\s*,?\s*/gm, '');
}


module.exports = inlineResources;
module.exports.inlineResourcesFromString = inlineResourcesFromString;
2 changes: 1 addition & 1 deletion src/demo-app/button-toggle/button-toggle-demo.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {Component} from '@angular/core';
import {MdUniqueSelectionDispatcher} from '@angular2-material/core';
import {MdUniqueSelectionDispatcher} from '@angular/material';

@Component({
moduleId: module.id,
Expand Down
2 changes: 1 addition & 1 deletion src/demo-app/demo-app-module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {HttpModule} from '@angular/http';
import {FormsModule} from '@angular/forms';
import {DemoApp, Home} from './demo-app/demo-app';
import {RouterModule} from '@angular/router';
import {MaterialModule} from '@angular2-material/all';
import {MaterialModule} from '@angular/material';
import {DEMO_APP_ROUTES} from './demo-app/routes';
import {ProgressBarDemo} from './progress-bar/progress-bar-demo';
import {JazzDialog, DialogDemo} from './dialog/dialog-demo';
Expand Down
2 changes: 1 addition & 1 deletion src/demo-app/dialog/dialog-demo.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {Component, ViewContainerRef} from '@angular/core';
import {MdDialog, MdDialogConfig, MdDialogRef} from '@angular2-material/dialog';
import {MdDialog, MdDialogConfig, MdDialogRef} from '@angular/material';

@Component({
moduleId: module.id,
Expand Down
2 changes: 1 addition & 1 deletion src/demo-app/grid-list/grid-list-demo.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {Component} from '@angular/core';
import {MdIconRegistry} from '@angular2-material/icon';
import {MdIconRegistry} from '@angular/material';


@Component({
Expand Down
2 changes: 1 addition & 1 deletion src/demo-app/icon/icon-demo.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {Component, ViewEncapsulation} from '@angular/core';
import {MdIconRegistry} from '@angular2-material/icon';
import {MdIconRegistry} from '@angular/material';

@Component({
moduleId: module.id,
Expand Down
2 changes: 1 addition & 1 deletion src/demo-app/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="@angular2-material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
<link href="@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">

<!-- FontAwesome for md-icon demo. -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
Expand Down
2 changes: 1 addition & 1 deletion src/demo-app/live-announcer/live-announcer-demo.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {Component} from '@angular/core';
import {MdLiveAnnouncer} from '@angular2-material/core';
import {MdLiveAnnouncer} from '@angular/material';

@Component({
moduleId: module.id,
Expand Down
2 changes: 1 addition & 1 deletion src/demo-app/overlay/overlay-demo.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
ComponentPortal,
Portal,
TemplatePortalDirective,
} from '@angular2-material/core';
} from '@angular/material';


@Component({
Expand Down
2 changes: 1 addition & 1 deletion src/demo-app/portal/portal-demo.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {
Portal,
ComponentPortal,
TemplatePortalDirective,
} from '@angular2-material/core';
} from '@angular/material';


@Component({
Expand Down
2 changes: 1 addition & 1 deletion src/demo-app/ripple/ripple-demo.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {Component, ViewChild} from '@angular/core';
import {MdRipple} from '@angular2-material/core';
import {MdRipple} from '@angular/material';


@Component({
Expand Down
120 changes: 25 additions & 95 deletions src/demo-app/system-config.ts
Original file line number Diff line number Diff line change
@@ -1,104 +1,34 @@
/***********************************************************************************************
* User Configuration.
**********************************************************************************************/

const components = [
'all',
'button',
'card',
'checkbox',
'dialog',
'grid-list',
'icon',
'input',
'list',
'menu',
'progress-bar',
'progress-circle',
'radio',
'select',
'sidenav',
'slider',
'slide-toggle',
'button-toggle',
'tabs',
'toolbar',
'tooltip',
];


/** User packages configuration. */
const packages: any = {
'@angular2-material/core': {
format: 'cjs',
main: 'core.umd.js'
},
// Set the default extension for the root package, because otherwise the demo-app can't
// be built within the production mode. Due to missing file extensions.
'.': {
defaultExtension: 'js'
}
};
components.forEach(name => {
packages[`@angular2-material/${name}`] = {
format: 'cjs',
main: `${name}.umd.js`
};
});


////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
* Everything underneath this line is managed by the CLI.
**********************************************************************************************/
const angularPackages = {
// Angular specific barrels.
'@angular/core': { main: 'bundles/core.umd.js'},
'@angular/core/testing': { main: 'bundles/core-testing.umd.js'},
'@angular/common': { main: 'bundles/common.umd.js'},
'@angular/compiler': { main: 'bundles/compiler.umd.js'},
'@angular/http': { main: 'bundles/http.umd.js'},
'@angular/forms': { main: 'bundles/forms.umd.js'},
'@angular/router': { main: 'bundles/router.umd.js'},
'@angular/platform-browser': { main: 'bundles/platform-browser.umd.js'},
'@angular/platform-browser-dynamic': { main: 'bundles/platform-browser-dynamic.umd.js'},
'@angular/platform-browser-dynamic/testing': {
main: 'bundles/platform-browser-dynamic-testing.umd.js'
},
};

const barrels: string[] = [
// Thirdparty barrels.
'rxjs',

// App specific barrels.
'demo-app',
'button-toggle',
'gestures',
'live-announcer',
'portal',
'overlay',
...components
/** @cli-barrel */
];

const _cliSystemConfig: any = angularPackages;
barrels.forEach((barrelName: string) => {
_cliSystemConfig[barrelName] = { main: 'index' };
});

/** Type declaration for ambient System. */
declare var System: any;

// Apply the CLI SystemJS configuration.
System.config({
map: {
'@angular': 'vendor/@angular',
'rxjs': 'vendor/rxjs',
'main': 'main.js'
'main': 'main.js',

// Angular specific mappings.
'@angular/core': 'vendor/@angular/core/bundles/core.umd.js',
'@angular/common': 'vendor/@angular/common/bundles/common.umd.js',
'@angular/compiler': 'vendor/@angular/compiler/bundles/compiler.umd.js',
'@angular/http': 'vendor/@angular/http/bundles/http.umd.js',
'@angular/forms': 'vendor/@angular/forms/bundles/forms.umd.js',
'@angular/router': 'vendor/@angular/router/bundles/router.umd.js',
'@angular/platform-browser': 'vendor/@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic':
'vendor/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
},
packages: _cliSystemConfig
packages: {
// Thirdparty barrels.
'rxjs': { main: 'index' },
'@angular/material': {
format: 'cjs',
main: 'material.umd.js'
},
// Set the default extension for the root package, because otherwise the demo-app can't
// be built within the production mode. Due to missing file extensions.
'.': {
defaultExtension: 'js'
}
}
});

// Apply the user's configuration.
System.config({ packages });
2 changes: 1 addition & 1 deletion src/demo-app/tooltip/tooltip-demo.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {Component} from '@angular/core';
import {TooltipPosition} from '@angular2-material/tooltip';
import {TooltipPosition} from '@angular/material';


@Component({
Expand Down
7 changes: 3 additions & 4 deletions src/demo-app/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,11 @@
"stripInternal": true,
"baseUrl": "",
"typeRoots": [
"../../node_modules/@types",
"../../node_modules"
"../../node_modules/@types"
],
"paths": {
"@angular2-material/*": [
"../../dist/@angular2-material/*"
"@angular/material": [
"../../dist/@angular/material"
]
},
"types": [
Expand Down
Loading