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
This commit is contained in:
		
							parent
							
								
									34eaf65a79
								
							
						
					
					
						commit
						dcdd73065a
					
				| @ -10,6 +10,7 @@ const CUSTOM_ANNOTATIONS_PARAM = 'custom_annotations'; | ||||
| const ENTRY_POINT_PARAM = 'entry_points'; | ||||
| const GENERATE_CHANGE_DETECTORS_PARAM = 'generate_change_detectors'; | ||||
| const INIT_REFLECTOR_PARAM = 'init_reflector'; | ||||
| const INLINE_VIEWS_PARAM = 'inline_views'; | ||||
| const MIRROR_MODE_PARAM = 'mirror_mode'; | ||||
| const OPTIMIZATION_PHASES_PARAM = 'optimization_phases'; | ||||
| const REFLECTION_ENTRY_POINT_PARAM = 'reflection_entry_points'; | ||||
| @ -32,6 +33,9 @@ class TransformerOptions { | ||||
|   /// Whether to generate calls to our generated `initReflector` code | ||||
|   final bool initReflector; | ||||
| 
 | ||||
|   /// Whether to inline html/css urls into the View directive | ||||
|   final bool inlineViews; | ||||
| 
 | ||||
|   /// The [AnnotationMatcher] which is used to identify angular annotations. | ||||
|   final AnnotationMatcher annotationMatcher; | ||||
| 
 | ||||
| @ -50,13 +54,14 @@ class TransformerOptions { | ||||
|   TransformerOptions._internal(this.entryPoints, this.reflectionEntryPoints, | ||||
|       this.modeName, this.mirrorMode, this.initReflector, | ||||
|       this.annotationMatcher, this.optimizationPhases, | ||||
|       this.generateChangeDetectors); | ||||
|       this.generateChangeDetectors, this.inlineViews); | ||||
| 
 | ||||
|   factory TransformerOptions(List<String> entryPoints, | ||||
|       {List<String> reflectionEntryPoints, String modeName: 'release', | ||||
|       MirrorMode mirrorMode: MirrorMode.none, bool initReflector: true, | ||||
|       List<AnnotationDescriptor> customAnnotationDescriptors: const [], | ||||
|       int optimizationPhases: DEFAULT_OPTIMIZATION_PHASES, | ||||
|       bool inlineViews: true, | ||||
|       bool generateChangeDetectors: true}) { | ||||
|     if (reflectionEntryPoints == null || reflectionEntryPoints.isEmpty) { | ||||
|       reflectionEntryPoints = entryPoints; | ||||
| @ -66,6 +71,6 @@ class TransformerOptions { | ||||
|     optimizationPhases = optimizationPhases.isNegative ? 0 : optimizationPhases; | ||||
|     return new TransformerOptions._internal(entryPoints, reflectionEntryPoints, | ||||
|         modeName, mirrorMode, initReflector, annotationMatcher, | ||||
|         optimizationPhases, generateChangeDetectors); | ||||
|         optimizationPhases, generateChangeDetectors, inlineViews); | ||||
|   } | ||||
| } | ||||
|  | ||||
| @ -12,6 +12,7 @@ TransformerOptions parseBarbackSettings(BarbackSettings settings) { | ||||
|       _readFileList(config, REFLECTION_ENTRY_POINT_PARAM); | ||||
|   var initReflector = | ||||
|       _readBool(config, INIT_REFLECTOR_PARAM, defaultValue: true); | ||||
|   var inlineViews = _readBool(config, INLINE_VIEWS_PARAM, defaultValue: true); | ||||
|   var generateChangeDetectors = | ||||
|       _readBool(config, GENERATE_CHANGE_DETECTORS_PARAM, defaultValue: true); | ||||
|   String mirrorModeVal = | ||||
| @ -35,6 +36,7 @@ TransformerOptions parseBarbackSettings(BarbackSettings settings) { | ||||
|       modeName: settings.mode.name, | ||||
|       mirrorMode: mirrorMode, | ||||
|       initReflector: initReflector, | ||||
|       inlineViews: inlineViews, | ||||
|       customAnnotationDescriptors: _readCustomAnnotations(config), | ||||
|       optimizationPhases: optimizationPhases, | ||||
|       generateChangeDetectors: generateChangeDetectors); | ||||
|  | ||||
| @ -23,12 +23,12 @@ import 'visitors.dart'; | ||||
| /// string unless `forceGenerate` is true, in which case an empty ngDeps | ||||
| /// file is created. | ||||
| Future<String> createNgDeps(AssetReader reader, AssetId assetId, | ||||
|     AnnotationMatcher annotationMatcher) async { | ||||
|     AnnotationMatcher annotationMatcher, bool inlineViews) async { | ||||
|   // TODO(kegluneq): Shortcut if we can determine that there are no | ||||
|   // [Directive]s present, taking into account `export`s. | ||||
|   var writer = new AsyncStringWriter(); | ||||
|   var visitor = new CreateNgDepsVisitor( | ||||
|       writer, assetId, new XhrImpl(reader, assetId), annotationMatcher); | ||||
|   var visitor = new CreateNgDepsVisitor(writer, assetId, | ||||
|       new XhrImpl(reader, assetId), annotationMatcher, inlineViews); | ||||
|   var code = await reader.readAsString(assetId); | ||||
|   parseCompilationUnit(code, name: assetId.path).accept(visitor); | ||||
| 
 | ||||
| @ -60,13 +60,14 @@ class CreateNgDepsVisitor extends Object with SimpleAstVisitor<Object> { | ||||
|   /// The assetId for the file which we are parsing. | ||||
|   final AssetId assetId; | ||||
| 
 | ||||
|   CreateNgDepsVisitor( | ||||
|       AsyncStringWriter writer, this.assetId, XHR xhr, this._annotationMatcher) | ||||
|   CreateNgDepsVisitor(AsyncStringWriter writer, this.assetId, XHR xhr, | ||||
|       this._annotationMatcher, inlineViews) | ||||
|       : writer = writer, | ||||
|         _copyVisitor = new ToSourceVisitor(writer), | ||||
|         _factoryVisitor = new FactoryTransformVisitor(writer), | ||||
|         _paramsVisitor = new ParameterTransformVisitor(writer), | ||||
|         _metaVisitor = new AnnotationsTransformVisitor(writer, xhr); | ||||
|         _metaVisitor = new AnnotationsTransformVisitor( | ||||
|             writer, xhr, inlineViews); | ||||
| 
 | ||||
|   void _visitNodeListWithSeparator(NodeList<AstNode> list, String separator) { | ||||
|     if (list == null) return; | ||||
|  | ||||
| @ -34,8 +34,8 @@ class DirectiveProcessor extends Transformer { | ||||
|     try { | ||||
|       var asset = transform.primaryInput; | ||||
|       var reader = new AssetReader.fromTransform(transform); | ||||
|       var ngDepsSrc = | ||||
|           await createNgDeps(reader, asset.id, options.annotationMatcher); | ||||
|       var ngDepsSrc = await createNgDeps( | ||||
|           reader, asset.id, options.annotationMatcher, options.inlineViews); | ||||
|       if (ngDepsSrc != null && ngDepsSrc.isNotEmpty) { | ||||
|         var ngDepsAssetId = | ||||
|             transform.primaryInput.id.changeExtension(DEPS_EXTENSION); | ||||
|  | ||||
| @ -211,10 +211,12 @@ bool _isViewAnnotation(Annotation node) => '${node.name}' == 'View'; | ||||
| class AnnotationsTransformVisitor extends ToSourceVisitor { | ||||
|   final AsyncStringWriter writer; | ||||
|   final XHR _xhr; | ||||
|   final bool _inlineViews; | ||||
|   final ConstantEvaluator _evaluator = new ConstantEvaluator(); | ||||
|   bool _processingView = false; | ||||
| 
 | ||||
|   AnnotationsTransformVisitor(AsyncStringWriter writer, this._xhr) | ||||
|   AnnotationsTransformVisitor( | ||||
|       AsyncStringWriter writer, this._xhr, this._inlineViews) | ||||
|       : this.writer = writer, | ||||
|         super(writer); | ||||
| 
 | ||||
| @ -259,6 +261,7 @@ class AnnotationsTransformVisitor extends ToSourceVisitor { | ||||
|       return super.visitNamedExpression(node); | ||||
|     } | ||||
|     var keyString = '${node.name.label}'; | ||||
|     if (_inlineViews) { | ||||
|       if (keyString == 'templateUrl') { | ||||
|         // Inline the templateUrl | ||||
|         var url = node.expression.accept(_evaluator); | ||||
| @ -286,6 +289,7 @@ class AnnotationsTransformVisitor extends ToSourceVisitor { | ||||
|         writer.print(']'); | ||||
|         return null; | ||||
|       } | ||||
|     } | ||||
|     return super.visitNamedExpression(node); | ||||
|   } | ||||
| 
 | ||||
|  | ||||
| @ -58,6 +58,17 @@ void allTests() { | ||||
|       'should inline multiple `styleUrls` values expressed as absolute urls.', | ||||
|       'multiple_style_urls_files/hello.dart'); | ||||
| 
 | ||||
|   absoluteReader.addAsset(new AssetId('a', 'lib/template.html'), | ||||
|       readFile('directive_processor/multiple_style_urls_files/template.html')); | ||||
|   absoluteReader.addAsset(new AssetId('a', 'lib/template.css'), | ||||
|       readFile('directive_processor/multiple_style_urls_files/template.css')); | ||||
|   absoluteReader.addAsset(new AssetId('a', 'lib/template_other.css'), readFile( | ||||
|       'directive_processor/multiple_style_urls_files/template_other.css')); | ||||
|   _testNgDeps( | ||||
|       'shouldn\'t inline multiple `styleUrls` values expressed as absolute ' | ||||
|       'urls.', 'multiple_style_urls_not_inlined_files/hello.dart', | ||||
|       inlineViews: false, reader: absoluteReader); | ||||
| 
 | ||||
|   _testNgDeps('should inline `templateUrl`s expressed as adjacent strings.', | ||||
|       'split_url_expression_files/hello.dart'); | ||||
| 
 | ||||
| @ -86,7 +97,7 @@ void allTests() { | ||||
| 
 | ||||
| void _testNgDeps(String name, String inputPath, | ||||
|     {List<AnnotationDescriptor> customDescriptors: const [], AssetId assetId, | ||||
|     AssetReader reader, List<String> expectedLogs}) { | ||||
|     AssetReader reader, List<String> expectedLogs, bool inlineViews: true}) { | ||||
|   it(name, () async { | ||||
|     if (expectedLogs != null) { | ||||
|       log.setLogger(new RecordingLogger()); | ||||
| @ -105,7 +116,8 @@ void _testNgDeps(String name, String inputPath, | ||||
|     var expectedId = _assetIdForPath(expectedPath); | ||||
| 
 | ||||
|     var annotationMatcher = new AnnotationMatcher()..addAll(customDescriptors); | ||||
|     var output = await createNgDeps(reader, inputId, annotationMatcher); | ||||
|     var output = | ||||
|         await createNgDeps(reader, inputId, annotationMatcher, inlineViews); | ||||
|     if (output == null) { | ||||
|       expect(await reader.hasInput(expectedId)).toBeFalse(); | ||||
|     } else { | ||||
|  | ||||
| @ -0,0 +1,25 @@ | ||||
| library examples.src.hello_world.index_common_dart.ng_deps.dart; | ||||
| 
 | ||||
| import 'hello.dart'; | ||||
| import 'package:angular2/angular2.dart' | ||||
|     show bootstrap, Component, Directive, View, NgElement; | ||||
| 
 | ||||
| var _visited = false; | ||||
| void initReflector(reflector) { | ||||
|   if (_visited) return; | ||||
|   _visited = true; | ||||
|   reflector | ||||
|     ..registerType(HelloCmp, { | ||||
|       'factory': () => new HelloCmp(), | ||||
|       'parameters': const [], | ||||
|       'annotations': const [ | ||||
|         const Component(selector: 'hello-app'), | ||||
|         const View( | ||||
|             template: r'''{{greeting}}''', | ||||
|             styles: const [ | ||||
|           r'''.greeting { .color: blue; }''', | ||||
|           r'''.hello { .color: red; }''', | ||||
|         ]) | ||||
|       ] | ||||
|     }); | ||||
| } | ||||
| @ -0,0 +1,25 @@ | ||||
| library examples.src.hello_world.index_common_dart.ng_deps.dart; | ||||
| 
 | ||||
| import 'hello.dart'; | ||||
| import 'package:angular2/angular2.dart' | ||||
|     show bootstrap, Component, Directive, View, NgElement; | ||||
| 
 | ||||
| var _visited = false; | ||||
| void initReflector(reflector) { | ||||
|   if (_visited) return; | ||||
|   _visited = true; | ||||
|   reflector | ||||
|     ..registerType(HelloCmp, { | ||||
|       'factory': () => new HelloCmp(), | ||||
|       'parameters': const [], | ||||
|       'annotations': const [ | ||||
|         const Component(selector: 'hello-app'), | ||||
|         const View( | ||||
|             templateUrl: 'package:a/template.html', | ||||
|             styleUrls: const [ | ||||
|           'package:a/template.css', | ||||
|           'package:a/template_other.css' | ||||
|         ]) | ||||
|       ] | ||||
|     }); | ||||
| } | ||||
| @ -0,0 +1,10 @@ | ||||
| library examples.src.hello_world.index_common_dart; | ||||
| 
 | ||||
| import 'package:angular2/angular2.dart' | ||||
|     show bootstrap, Component, Directive, View, NgElement; | ||||
| 
 | ||||
| @Component(selector: 'hello-app') | ||||
| @View( | ||||
|     templateUrl: 'package:a/template.html', | ||||
|     styleUrls: const ['package:a/template.css', 'package:a/template_other.css']) | ||||
| class HelloCmp {} | ||||
| @ -0,0 +1 @@ | ||||
| .greeting { .color: blue; } | ||||
| @ -0,0 +1 @@ | ||||
| {{greeting}} | ||||
| @ -0,0 +1 @@ | ||||
| .hello { .color: red; } | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user