Skip to content

Commit dcdd730

Browse files
TedSandertbosch
TedSander
authored and
tbosch
committed
feat(transformers): provide a flag to disable inlining views
Add a flag to allow a user to disable inlining css/html content into the views. Closes #2658
1 parent 34eaf65 commit dcdd730

12 files changed

Lines changed: 121 additions & 34 deletions

File tree

‎modules/angular2/src/transform/common/options.dart‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const CUSTOM_ANNOTATIONS_PARAM = 'custom_annotations';
1010
const ENTRY_POINT_PARAM = 'entry_points';
1111
const GENERATE_CHANGE_DETECTORS_PARAM = 'generate_change_detectors';
1212
const INIT_REFLECTOR_PARAM = 'init_reflector';
13+
const INLINE_VIEWS_PARAM = 'inline_views';
1314
const MIRROR_MODE_PARAM = 'mirror_mode';
1415
const OPTIMIZATION_PHASES_PARAM = 'optimization_phases';
1516
const REFLECTION_ENTRY_POINT_PARAM = 'reflection_entry_points';
@@ -32,6 +33,9 @@ class TransformerOptions {
3233
/// Whether to generate calls to our generated `initReflector` code
3334
final bool initReflector;
3435

36+
/// Whether to inline html/css urls into the View directive
37+
final bool inlineViews;
38+
3539
/// The [AnnotationMatcher] which is used to identify angular annotations.
3640
final AnnotationMatcher annotationMatcher;
3741

@@ -50,13 +54,14 @@ class TransformerOptions {
5054
TransformerOptions._internal(this.entryPoints, this.reflectionEntryPoints,
5155
this.modeName, this.mirrorMode, this.initReflector,
5256
this.annotationMatcher, this.optimizationPhases,
53-
this.generateChangeDetectors);
57+
this.generateChangeDetectors, this.inlineViews);
5458

5559
factory TransformerOptions(List<String> entryPoints,
5660
{List<String> reflectionEntryPoints, String modeName: 'release',
5761
MirrorMode mirrorMode: MirrorMode.none, bool initReflector: true,
5862
List<AnnotationDescriptor> customAnnotationDescriptors: const [],
5963
int optimizationPhases: DEFAULT_OPTIMIZATION_PHASES,
64+
bool inlineViews: true,
6065
bool generateChangeDetectors: true}) {
6166
if (reflectionEntryPoints == null || reflectionEntryPoints.isEmpty) {
6267
reflectionEntryPoints = entryPoints;
@@ -66,6 +71,6 @@ class TransformerOptions {
6671
optimizationPhases = optimizationPhases.isNegative ? 0 : optimizationPhases;
6772
return new TransformerOptions._internal(entryPoints, reflectionEntryPoints,
6873
modeName, mirrorMode, initReflector, annotationMatcher,
69-
optimizationPhases, generateChangeDetectors);
74+
optimizationPhases, generateChangeDetectors, inlineViews);
7075
}
7176
}

‎modules/angular2/src/transform/common/options_reader.dart‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ TransformerOptions parseBarbackSettings(BarbackSettings settings) {
1212
_readFileList(config, REFLECTION_ENTRY_POINT_PARAM);
1313
var initReflector =
1414
_readBool(config, INIT_REFLECTOR_PARAM, defaultValue: true);
15+
var inlineViews = _readBool(config, INLINE_VIEWS_PARAM, defaultValue: true);
1516
var generateChangeDetectors =
1617
_readBool(config, GENERATE_CHANGE_DETECTORS_PARAM, defaultValue: true);
1718
String mirrorModeVal =
@@ -35,6 +36,7 @@ TransformerOptions parseBarbackSettings(BarbackSettings settings) {
3536
modeName: settings.mode.name,
3637
mirrorMode: mirrorMode,
3738
initReflector: initReflector,
39+
inlineViews: inlineViews,
3840
customAnnotationDescriptors: _readCustomAnnotations(config),
3941
optimizationPhases: optimizationPhases,
4042
generateChangeDetectors: generateChangeDetectors);

‎modules/angular2/src/transform/directive_processor/rewriter.dart‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,12 @@ import 'visitors.dart';
2323
/// string unless `forceGenerate` is true, in which case an empty ngDeps
2424
/// file is created.
2525
Future<String> createNgDeps(AssetReader reader, AssetId assetId,
26-
AnnotationMatcher annotationMatcher) async {
26+
AnnotationMatcher annotationMatcher, bool inlineViews) async {
2727
// TODO(kegluneq): Shortcut if we can determine that there are no
2828
// [Directive]s present, taking into account `export`s.
2929
var writer = new AsyncStringWriter();
30-
var visitor = new CreateNgDepsVisitor(
31-
writer, assetId, new XhrImpl(reader, assetId), annotationMatcher);
30+
var visitor = new CreateNgDepsVisitor(writer, assetId,
31+
new XhrImpl(reader, assetId), annotationMatcher, inlineViews);
3232
var code = await reader.readAsString(assetId);
3333
parseCompilationUnit(code, name: assetId.path).accept(visitor);
3434

@@ -60,13 +60,14 @@ class CreateNgDepsVisitor extends Object with SimpleAstVisitor<Object> {
6060
/// The assetId for the file which we are parsing.
6161
final AssetId assetId;
6262

63-
CreateNgDepsVisitor(
64-
AsyncStringWriter writer, this.assetId, XHR xhr, this._annotationMatcher)
63+
CreateNgDepsVisitor(AsyncStringWriter writer, this.assetId, XHR xhr,
64+
this._annotationMatcher, inlineViews)
6565
: writer = writer,
6666
_copyVisitor = new ToSourceVisitor(writer),
6767
_factoryVisitor = new FactoryTransformVisitor(writer),
6868
_paramsVisitor = new ParameterTransformVisitor(writer),
69-
_metaVisitor = new AnnotationsTransformVisitor(writer, xhr);
69+
_metaVisitor = new AnnotationsTransformVisitor(
70+
writer, xhr, inlineViews);
7071

7172
void _visitNodeListWithSeparator(NodeList<AstNode> list, String separator) {
7273
if (list == null) return;

‎modules/angular2/src/transform/directive_processor/transformer.dart‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@ class DirectiveProcessor extends Transformer {
3434
try {
3535
var asset = transform.primaryInput;
3636
var reader = new AssetReader.fromTransform(transform);
37-
var ngDepsSrc =
38-
await createNgDeps(reader, asset.id, options.annotationMatcher);
37+
var ngDepsSrc = await createNgDeps(
38+
reader, asset.id, options.annotationMatcher, options.inlineViews);
3939
if (ngDepsSrc != null && ngDepsSrc.isNotEmpty) {
4040
var ngDepsAssetId =
4141
transform.primaryInput.id.changeExtension(DEPS_EXTENSION);

‎modules/angular2/src/transform/directive_processor/visitors.dart‎

Lines changed: 26 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -211,10 +211,12 @@ bool _isViewAnnotation(Annotation node) => '${node.name}' == 'View';
211211
class AnnotationsTransformVisitor extends ToSourceVisitor {
212212
final AsyncStringWriter writer;
213213
final XHR _xhr;
214+
final bool _inlineViews;
214215
final ConstantEvaluator _evaluator = new ConstantEvaluator();
215216
bool _processingView = false;
216217

217-
AnnotationsTransformVisitor(AsyncStringWriter writer, this._xhr)
218+
AnnotationsTransformVisitor(
219+
AsyncStringWriter writer, this._xhr, this._inlineViews)
218220
: this.writer = writer,
219221
super(writer);
220222

@@ -259,32 +261,34 @@ class AnnotationsTransformVisitor extends ToSourceVisitor {
259261
return super.visitNamedExpression(node);
260262
}
261263
var keyString = '${node.name.label}';
262-
if (keyString == 'templateUrl') {
263-
// Inline the templateUrl
264-
var url = node.expression.accept(_evaluator);
265-
if (url is String) {
266-
writer.print("template: r'''");
267-
writer.asyncPrint(_readOrEmptyString(url));
268-
writer.print("'''");
269-
return null;
270-
} else {
271-
logger.warning('template url is not a String $url');
272-
}
273-
} else if (keyString == 'styleUrls') {
274-
// Inline the styleUrls
275-
var urls = node.expression.accept(_evaluator);
276-
writer.print('styles: const [');
277-
for (var url in urls) {
264+
if (_inlineViews) {
265+
if (keyString == 'templateUrl') {
266+
// Inline the templateUrl
267+
var url = node.expression.accept(_evaluator);
278268
if (url is String) {
279-
writer.print("r'''");
269+
writer.print("template: r'''");
280270
writer.asyncPrint(_readOrEmptyString(url));
281-
writer.print("''', ");
271+
writer.print("'''");
272+
return null;
282273
} else {
283-
logger.warning('style url is not a String ${url}');
274+
logger.warning('template url is not a String $url');
275+
}
276+
} else if (keyString == 'styleUrls') {
277+
// Inline the styleUrls
278+
var urls = node.expression.accept(_evaluator);
279+
writer.print('styles: const [');
280+
for (var url in urls) {
281+
if (url is String) {
282+
writer.print("r'''");
283+
writer.asyncPrint(_readOrEmptyString(url));
284+
writer.print("''', ");
285+
} else {
286+
logger.warning('style url is not a String ${url}');
287+
}
284288
}
289+
writer.print(']');
290+
return null;
285291
}
286-
writer.print(']');
287-
return null;
288292
}
289293
return super.visitNamedExpression(node);
290294
}

‎modules/angular2/test/transform/directive_processor/all_tests.dart‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,17 @@ void allTests() {
5858
'should inline multiple `styleUrls` values expressed as absolute urls.',
5959
'multiple_style_urls_files/hello.dart');
6060

61+
absoluteReader.addAsset(new AssetId('a', 'lib/template.html'),
62+
readFile('directive_processor/multiple_style_urls_files/template.html'));
63+
absoluteReader.addAsset(new AssetId('a', 'lib/template.css'),
64+
readFile('directive_processor/multiple_style_urls_files/template.css'));
65+
absoluteReader.addAsset(new AssetId('a', 'lib/template_other.css'), readFile(
66+
'directive_processor/multiple_style_urls_files/template_other.css'));
67+
_testNgDeps(
68+
'shouldn\'t inline multiple `styleUrls` values expressed as absolute '
69+
'urls.', 'multiple_style_urls_not_inlined_files/hello.dart',
70+
inlineViews: false, reader: absoluteReader);
71+
6172
_testNgDeps('should inline `templateUrl`s expressed as adjacent strings.',
6273
'split_url_expression_files/hello.dart');
6374

@@ -86,7 +97,7 @@ void allTests() {
8697

8798
void _testNgDeps(String name, String inputPath,
8899
{List<AnnotationDescriptor> customDescriptors: const [], AssetId assetId,
89-
AssetReader reader, List<String> expectedLogs}) {
100+
AssetReader reader, List<String> expectedLogs, bool inlineViews: true}) {
90101
it(name, () async {
91102
if (expectedLogs != null) {
92103
log.setLogger(new RecordingLogger());
@@ -105,7 +116,8 @@ void _testNgDeps(String name, String inputPath,
105116
var expectedId = _assetIdForPath(expectedPath);
106117

107118
var annotationMatcher = new AnnotationMatcher()..addAll(customDescriptors);
108-
var output = await createNgDeps(reader, inputId, annotationMatcher);
119+
var output =
120+
await createNgDeps(reader, inputId, annotationMatcher, inlineViews);
109121
if (output == null) {
110122
expect(await reader.hasInput(expectedId)).toBeFalse();
111123
} else {

‎modules/angular2/test/transform/directive_processor/expected/hello.ng_deps.dart‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
library examples.src.hello_world.index_common_dart.ng_deps.dart;
2+
3+
import 'hello.dart';
4+
import 'package:angular2/angular2.dart'
5+
show bootstrap, Component, Directive, View, NgElement;
6+
7+
var _visited = false;
8+
void initReflector(reflector) {
9+
if (_visited) return;
10+
_visited = true;
11+
reflector
12+
..registerType(HelloCmp, {
13+
'factory': () => new HelloCmp(),
14+
'parameters': const [],
15+
'annotations': const [
16+
const Component(selector: 'hello-app'),
17+
const View(
18+
template: r'''{{greeting}}''',
19+
styles: const [
20+
r'''.greeting { .color: blue; }''',
21+
r'''.hello { .color: red; }''',
22+
])
23+
]
24+
});
25+
}

‎modules/angular2/test/transform/directive_processor/multiple_style_urls_not_inlined_files/expected/hello.ng_deps.dart‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
library examples.src.hello_world.index_common_dart.ng_deps.dart;
2+
3+
import 'hello.dart';
4+
import 'package:angular2/angular2.dart'
5+
show bootstrap, Component, Directive, View, NgElement;
6+
7+
var _visited = false;
8+
void initReflector(reflector) {
9+
if (_visited) return;
10+
_visited = true;
11+
reflector
12+
..registerType(HelloCmp, {
13+
'factory': () => new HelloCmp(),
14+
'parameters': const [],
15+
'annotations': const [
16+
const Component(selector: 'hello-app'),
17+
const View(
18+
templateUrl: 'package:a/template.html',
19+
styleUrls: const [
20+
'package:a/template.css',
21+
'package:a/template_other.css'
22+
])
23+
]
24+
});
25+
}

‎modules/angular2/test/transform/directive_processor/multiple_style_urls_not_inlined_files/hello.dart‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
library examples.src.hello_world.index_common_dart;
2+
3+
import 'package:angular2/angular2.dart'
4+
show bootstrap, Component, Directive, View, NgElement;
5+
6+
@Component(selector: 'hello-app')
7+
@View(
8+
templateUrl: 'package:a/template.html',
9+
styleUrls: const ['package:a/template.css', 'package:a/template_other.css'])
10+
class HelloCmp {}

‎modules/angular2/test/transform/directive_processor/multiple_style_urls_not_inlined_files/template.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.greeting { .color: blue; }

0 commit comments

Comments
 (0)