From 76ae87406f487adc2f3a501ca10672a7d6cde49e Mon Sep 17 00:00:00 2001 From: JoostK Date: Tue, 1 Dec 2020 22:35:10 +0100 Subject: [PATCH] test(compiler-cli): convert components & directives compliance tests (#39920) This commit converts the components & directives compliance tests taken from `r3_compiler_compliance_spec.ts` to the new test runner. PR Close #39920 --- .../src/ngtsc/testing/fake_core/index.ts | 6 +- .../GOLDEN_PARTIAL.js | 424 ++++++++++++ .../components_and_directives/TEST_CASES.json | 163 +++++ .../array_literals_null_vs_empty.js | 23 + .../array_literals_null_vs_empty.ts | 14 + .../constant_array_literals.js | 19 + .../constant_array_literals.ts | 5 + .../constant_object_literals.js | 19 + .../constant_object_literals.ts | 5 + .../content_projection/GOLDEN_PARTIAL.js | 355 ++++++++++ .../content_projection/TEST_CASES.json | 129 ++++ .../content_projection/multiple_wildcards.js | 19 + .../content_projection/multiple_wildcards.ts | 15 + .../content_projection/nested_template.js | 34 + .../content_projection/nested_template.ts | 21 + .../ng_content_with_structural_dir.js | 18 + .../ng_content_with_structural_dir.ts | 5 + .../ng_project_as_attribute.js | 21 + .../ng_project_as_attribute.ts | 6 + .../ng_project_as_compound_selector.js | 20 + .../ng_project_as_compound_selector.ts | 14 + .../ng_project_as_selector.js | 18 + .../ng_project_as_selector.ts | 13 + .../content_projection/root_and_nested.js | 29 + .../content_projection/root_and_nested.ts | 23 + .../content_projection/root_template.ts | 22 + .../root_template_complex_def.js | 22 + .../root_template_simple_def.js | 16 + .../custom_decorator_es5.js | 6 + .../custom_decorator_es5.ts | 15 + .../components_and_directives/export_as.js | 5 + .../components_and_directives/export_as.ts | 9 + .../forward_referenced_directive.js | 3 + .../forward_referenced_directive.ts | 18 + .../forward_referenced_pipe.js | 3 + .../forward_referenced_pipe.ts | 18 + .../lifecycle_hooks/GOLDEN_PARTIAL.js | 259 +++++++ .../lifecycle_hooks/TEST_CASES.json | 73 ++ .../lifecycle_hooks/lifecycle_hooks.ts | 53 ++ .../lifecycle_hooks_lifecycle_comp_def.js | 10 + .../lifecycle_hooks_simple_layout_def.js | 20 + .../lifecycle_hooks/local_reference.js | 20 + .../lifecycle_hooks/local_reference.ts | 9 + .../local_reference_and_context_variables.js | 38 + .../local_reference_and_context_variables.ts | 18 + .../lifecycle_hooks/local_reference_nested.js | 55 ++ .../lifecycle_hooks/local_reference_nested.ts | 26 + .../ng_template_empty_binding.js | 15 + .../ng_template_empty_binding.ts | 9 + .../components_and_directives/no_selector.js | 3 + .../components_and_directives/no_selector.ts | 5 + .../object_literals_null_vs_empty.js | 23 + .../object_literals_null_vs_empty.ts | 14 + .../object_literals_null_vs_function.js | 22 + .../object_literals_null_vs_function.ts | 17 + .../pipes/GOLDEN_PARTIAL.js | 220 ++++++ .../pipes/TEST_CASES.json | 116 ++++ .../pipes/pipe_di_change_detector_ref.ts | 28 + ...i_change_detector_ref_my_other_pipe_def.js | 5 + ...i_change_detector_ref_my_other_pipe_fac.js | 1 + ...pipe_di_change_detector_ref_my_pipe_def.js | 5 + ...pipe_di_change_detector_ref_my_pipe_fac.js | 1 + .../pipes/pipe_invocation.js | 29 + .../pipes/pipe_invocation.ts | 21 + .../components_and_directives/pipes/pipes.ts | 33 + .../pipes/pipes_my_app_def.js | 29 + .../pipes/pipes_my_pipe_def.js | 5 + .../pipes/pipes_my_pipe_fac.js | 1 + .../pipes/pipes_my_pure_pipe_def.js | 5 + .../pipes/pipes_my_pure_pipe_fac.js | 1 + .../queries/GOLDEN_PARTIAL.js | 654 ++++++++++++++++++ .../queries/TEST_CASES.json | 123 ++++ .../queries/content_query_for_directive.js | 27 + .../queries/content_query_for_directive.ts | 28 + .../queries/content_query_for_local_ref.js | 18 + .../queries/content_query_for_local_ref.ts | 16 + .../queries/content_query_read_token.js | 22 + .../queries/content_query_read_token.ts | 21 + .../queries/some.directive.ts | 7 + .../queries/static_content_query.js | 27 + .../queries/static_content_query.ts | 29 + .../queries/static_view_query.js | 27 + .../queries/static_view_query.ts | 18 + .../queries/view_query_for_directive.js | 25 + .../queries/view_query_for_directive.ts | 18 + .../queries/view_query_for_local_ref.js | 18 + .../queries/view_query_for_local_ref.ts | 17 + .../queries/view_query_read_token.js | 22 + .../queries/view_query_read_token.ts | 22 + .../template_variables/GOLDEN_PARTIAL.js | 339 +++++++++ .../template_variables/TEST_CASES.json | 76 ++ .../template_variables/for_of.ts | 19 + .../template_variables/for_of_def.js | 3 + .../template_variables/for_of_fac.js | 6 + .../let_variable_and_reference.js | 33 + .../let_variable_and_reference.ts | 14 + .../parent_template_variable.js | 55 ++ .../parent_template_variable.ts | 27 + .../template_variables/svg_embedded_view.js | 30 + .../template_variables/svg_embedded_view.ts | 14 + .../value_composition/GOLDEN_PARTIAL.js | 611 ++++++++++++++++ .../value_composition/TEST_CASES.json | 277 ++++++++ .../value_composition/array_literals.js | 19 + .../value_composition/array_literals.ts | 26 + .../value_composition/array_literals_many.js | 22 + .../value_composition/array_literals_many.ts | 44 ++ .../value_composition/complex_selectors.ts | 13 + .../complex_selectors_other_directive_dir.js | 4 + .../complex_selectors_other_directive_fac.js | 1 + .../complex_selectors_some_directive_dir.js | 4 + .../complex_selectors_some_directive_fac.js | 1 + .../value_composition/directives.ts | 17 + .../directives_child_component_def.js | 12 + .../directives_child_component_fac.js | 1 + .../directives_my_component_def.js | 15 + .../directives_my_component_fac.js | 1 + .../directives_some_directive_dir.js | 4 + .../directives_some_directive_fac.js | 1 + .../value_composition/id_selector.js | 5 + .../value_composition/id_selector.ts | 9 + .../literal_nested_expression.js | 23 + .../literal_nested_expression.ts | 29 + .../value_composition/no_selector.ts | 9 + .../value_composition/no_selector_def.js | 12 + .../value_composition/no_selector_fac.js | 1 + .../value_composition/object_literals.js | 19 + .../value_composition/object_literals.ts | 26 + .../structural_directives.ts | 16 + .../structural_directives_if_directive_def.js | 4 + .../structural_directives_if_directive_fac.js | 1 + .../structural_directives_my_component_def.js | 30 + .../structural_directives_my_component_fac.js | 1 + .../value_composition/view_tokens_di.ts | 10 + .../value_composition/view_tokens_di_def.js | 8 + .../value_composition/view_tokens_di_fac.js | 5 + .../test_helpers/expected_file_macros.ts | 41 +- 136 files changed, 5819 insertions(+), 2 deletions(-) create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/GOLDEN_PARTIAL.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/TEST_CASES.json create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/array_literals_null_vs_empty.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/array_literals_null_vs_empty.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/constant_array_literals.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/constant_array_literals.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/constant_object_literals.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/constant_object_literals.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/GOLDEN_PARTIAL.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/TEST_CASES.json create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/multiple_wildcards.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/multiple_wildcards.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/nested_template.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/nested_template.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_content_with_structural_dir.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_content_with_structural_dir.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_attribute.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_attribute.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_compound_selector.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_compound_selector.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_selector.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_selector.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/root_and_nested.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/root_and_nested.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/root_template.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/root_template_complex_def.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/root_template_simple_def.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/custom_decorator_es5.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/custom_decorator_es5.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/export_as.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/export_as.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/forward_referenced_directive.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/forward_referenced_directive.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/forward_referenced_pipe.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/forward_referenced_pipe.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/GOLDEN_PARTIAL.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/TEST_CASES.json create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/lifecycle_hooks.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/lifecycle_hooks_lifecycle_comp_def.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/lifecycle_hooks_simple_layout_def.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference_and_context_variables.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference_and_context_variables.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference_nested.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference_nested.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/ng_template_empty_binding.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/ng_template_empty_binding.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/no_selector.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/no_selector.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/object_literals_null_vs_empty.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/object_literals_null_vs_empty.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/object_literals_null_vs_function.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/object_literals_null_vs_function.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/GOLDEN_PARTIAL.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/TEST_CASES.json create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_di_change_detector_ref.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_di_change_detector_ref_my_other_pipe_def.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_di_change_detector_ref_my_other_pipe_fac.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_di_change_detector_ref_my_pipe_def.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_di_change_detector_ref_my_pipe_fac.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_invocation.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_invocation.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes_my_app_def.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes_my_pipe_def.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes_my_pipe_fac.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes_my_pure_pipe_def.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes_my_pure_pipe_fac.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/GOLDEN_PARTIAL.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/TEST_CASES.json create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_for_directive.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_for_directive.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_for_local_ref.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_for_local_ref.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_read_token.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_read_token.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/some.directive.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/static_content_query.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/static_content_query.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/static_view_query.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/static_view_query.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_for_directive.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_for_directive.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_for_local_ref.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_for_local_ref.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_read_token.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_read_token.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/GOLDEN_PARTIAL.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/TEST_CASES.json create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/for_of.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/for_of_def.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/for_of_fac.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/let_variable_and_reference.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/let_variable_and_reference.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/parent_template_variable.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/parent_template_variable.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/svg_embedded_view.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/svg_embedded_view.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/GOLDEN_PARTIAL.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/TEST_CASES.json create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/array_literals.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/array_literals.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/array_literals_many.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/array_literals_many.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/complex_selectors.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/complex_selectors_other_directive_dir.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/complex_selectors_other_directive_fac.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/complex_selectors_some_directive_dir.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/complex_selectors_some_directive_fac.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_child_component_def.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_child_component_fac.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_my_component_def.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_my_component_fac.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_some_directive_dir.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_some_directive_fac.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/id_selector.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/id_selector.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/literal_nested_expression.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/literal_nested_expression.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/no_selector.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/no_selector_def.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/no_selector_fac.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/object_literals.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/object_literals.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/structural_directives.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/structural_directives_if_directive_def.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/structural_directives_if_directive_fac.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/structural_directives_my_component_def.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/structural_directives_my_component_fac.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/view_tokens_di.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/view_tokens_di_def.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/view_tokens_di_fac.js diff --git a/packages/compiler-cli/src/ngtsc/testing/fake_core/index.ts b/packages/compiler-cli/src/ngtsc/testing/fake_core/index.ts index 3acc21ab07..3572b3b8b0 100644 --- a/packages/compiler-cli/src/ngtsc/testing/fake_core/index.ts +++ b/packages/compiler-cli/src/ngtsc/testing/fake_core/index.ts @@ -105,4 +105,8 @@ export class NgZone {} export interface PipeTransform { transform(value: any, ...args: any[]): any; -} \ No newline at end of file +} + +export interface OnDestroy { + ngOnDestroy(): void; +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/GOLDEN_PARTIAL.js new file mode 100644 index 0000000000..90f85ad6bc --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/GOLDEN_PARTIAL.js @@ -0,0 +1,424 @@ +/**************************************************************************************************** + * PARTIAL FILE: forward_referenced_directive.js + ****************************************************************************************************/ +import { Component, Directive, NgModule } from '@angular/core'; +import * as i0 from "@angular/core"; +export class HostBindingComp { +} +HostBindingComp.ɵfac = function HostBindingComp_Factory(t) { return new (t || HostBindingComp)(); }; +HostBindingComp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: HostBindingComp, selector: "host-binding-comp", ngImport: i0, template: { source: ` + + `, isInline: true }, directives: [{ type: function () { return MyForwardDirective; }, selector: "my-forward-directive" }] }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(HostBindingComp, [{ + type: Component, + args: [{ + selector: 'host-binding-comp', + template: ` + + ` + }] + }], null, null); })(); +class MyForwardDirective { +} +MyForwardDirective.ɵfac = function MyForwardDirective_Factory(t) { return new (t || MyForwardDirective)(); }; +MyForwardDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: MyForwardDirective, selector: "my-forward-directive", ngImport: i0 }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyForwardDirective, [{ + type: Directive, + args: [{ selector: 'my-forward-directive' }] + }], null, null); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [HostBindingComp, MyForwardDirective] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [HostBindingComp, MyForwardDirective] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: forward_referenced_directive.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class HostBindingComp { + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + +/**************************************************************************************************** + * PARTIAL FILE: forward_referenced_pipe.js + ****************************************************************************************************/ +import { Component, NgModule, Pipe } from '@angular/core'; +import * as i0 from "@angular/core"; +export class HostBindingComp { +} +HostBindingComp.ɵfac = function HostBindingComp_Factory(t) { return new (t || HostBindingComp)(); }; +HostBindingComp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: HostBindingComp, selector: "host-binding-comp", ngImport: i0, template: { source: ` +
...
+ `, isInline: true }, pipes: { "my_forward_pipe": function () { return MyForwardPipe; } } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(HostBindingComp, [{ + type: Component, + args: [{ + selector: 'host-binding-comp', + template: ` +
...
+ ` + }] + }], null, null); })(); +class MyForwardPipe { +} +MyForwardPipe.ɵfac = function MyForwardPipe_Factory(t) { return new (t || MyForwardPipe)(); }; +MyForwardPipe.ɵpipe = i0.ɵɵdefinePipe({ name: "my_forward_pipe", type: MyForwardPipe, pure: true }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyForwardPipe, [{ + type: Pipe, + args: [{ name: 'my_forward_pipe' }] + }], null, null); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [HostBindingComp, MyForwardPipe] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [HostBindingComp, MyForwardPipe] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: forward_referenced_pipe.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class HostBindingComp { + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + +/**************************************************************************************************** + * PARTIAL FILE: export_as.js + ****************************************************************************************************/ +import { Directive, NgModule } from '@angular/core'; +import * as i0 from "@angular/core"; +export class SomeDirective { +} +SomeDirective.ɵfac = function SomeDirective_Factory(t) { return new (t || SomeDirective)(); }; +SomeDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: SomeDirective, selector: "[some-directive]", exportAs: ["someDir", "otherDir"], ngImport: i0 }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SomeDirective, [{ + type: Directive, + args: [{ selector: '[some-directive]', exportAs: 'someDir, otherDir' }] + }], null, null); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [SomeDirective] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [SomeDirective] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: export_as.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class SomeDirective { + static ɵfac: i0.ɵɵFactoryDef; + static ɵdir: i0.ɵɵDirectiveDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + +/**************************************************************************************************** + * PARTIAL FILE: no_selector.js + ****************************************************************************************************/ +import { Directive } from '@angular/core'; +import * as i0 from "@angular/core"; +export class AbstractDirective { +} +AbstractDirective.ɵfac = function AbstractDirective_Factory(t) { return new (t || AbstractDirective)(); }; +AbstractDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: AbstractDirective, ngImport: i0 }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(AbstractDirective, [{ + type: Directive + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: no_selector.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class AbstractDirective { + static ɵfac: i0.ɵɵFactoryDef; + static ɵdir: i0.ɵɵDirectiveDefWithMeta; +} + +/**************************************************************************************************** + * PARTIAL FILE: constant_object_literals.js + ****************************************************************************************************/ +import { Component } from '@angular/core'; +import * as i0 from "@angular/core"; +export class MyApp { +} +MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); }; +MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "ng-component", ngImport: i0, template: { source: '', isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{ + type: Component, + args: [{ template: '' }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: constant_object_literals.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class MyApp { + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} + +/**************************************************************************************************** + * PARTIAL FILE: constant_array_literals.js + ****************************************************************************************************/ +import { Component } from '@angular/core'; +import * as i0 from "@angular/core"; +export class MyApp { +} +MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); }; +MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "ng-component", ngImport: i0, template: { source: '', isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{ + type: Component, + args: [{ template: '' }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: constant_array_literals.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class MyApp { + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} + +/**************************************************************************************************** + * PARTIAL FILE: object_literals_null_vs_empty.js + ****************************************************************************************************/ +import { Component, NgModule } from '@angular/core'; +import * as i0 from "@angular/core"; +export class MyApp { +} +MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); }; +MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "ng-component", ngImport: i0, template: { source: ` +
+
+ `, isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{ + type: Component, + args: [{ + template: ` +
+
+ ` + }] + }], null, null); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyApp] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [MyApp] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: object_literals_null_vs_empty.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class MyApp { + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + +/**************************************************************************************************** + * PARTIAL FILE: array_literals_null_vs_empty.js + ****************************************************************************************************/ +import { Component, NgModule } from '@angular/core'; +import * as i0 from "@angular/core"; +export class MyApp { +} +MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); }; +MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "ng-component", ngImport: i0, template: { source: ` +
+
+ `, isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{ + type: Component, + args: [{ + template: ` +
+
+ ` + }] + }], null, null); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyApp] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [MyApp] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: array_literals_null_vs_empty.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class MyApp { + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + +/**************************************************************************************************** + * PARTIAL FILE: object_literals_null_vs_function.js + ****************************************************************************************************/ +import { Component, NgModule } from '@angular/core'; +import * as i0 from "@angular/core"; +export class MyApp { + getFoo() { + return 'foo!'; + } +} +MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); }; +MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "ng-component", ngImport: i0, template: { source: ` +
+
+ `, isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{ + type: Component, + args: [{ + template: ` +
+
+ ` + }] + }], null, null); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyApp] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [MyApp] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: object_literals_null_vs_function.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class MyApp { + getFoo(): string; + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + +/**************************************************************************************************** + * PARTIAL FILE: custom_decorator_es5.js + ****************************************************************************************************/ +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +import { Component, InjectionToken } from '@angular/core'; +import * as i0 from "@angular/core"; +var token = new InjectionToken('token'); +export function Custom() { + return function (target) { }; +} +var Comp = /** @class */ (function () { + function Comp() { + } + Comp_1 = Comp; + var Comp_1; + Comp.ɵfac = function Comp_Factory(t) { return new (t || Comp)(); }; + Comp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: Comp, selector: "ng-component", providers: [{ provide: token, useExisting: Comp_1 }], ngImport: i0, template: { source: '', isInline: true } }); + Comp = Comp_1 = __decorate([ + Custom() + ], Comp); + return Comp; +}()); +export { Comp }; +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(Comp, [{ + type: Component, + args: [{ + template: '', + providers: [{ provide: token, useExisting: Comp }], + }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: custom_decorator_es5.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare function Custom(): (target: any) => void; +export declare class Comp { + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} + +/**************************************************************************************************** + * PARTIAL FILE: ng_template_empty_binding.js + ****************************************************************************************************/ +import { Component, NgModule } from '@angular/core'; +import * as i0 from "@angular/core"; +export class MyComponent { +} +MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); }; +MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-app", ngImport: i0, template: { source: '', isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{ + type: Component, + args: [{ selector: 'my-app', template: '' }] + }], null, null); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [MyComponent] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: ng_template_empty_binding.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class MyComponent { + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/TEST_CASES.json b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/TEST_CASES.json new file mode 100644 index 0000000000..05de96b415 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/TEST_CASES.json @@ -0,0 +1,163 @@ +{ + "$schema": "../../test_case_schema.json", + "cases": [ + { + "description": "should instantiate directives in a closure when they are forward referenced", + "inputFiles": [ + "forward_referenced_directive.ts" + ], + "expectations": [ + { + "failureMessage": "Invalid component definition", + "files": [ + "forward_referenced_directive.js" + ] + } + ] + }, + { + "description": "should instantiate pipes in a closure when they are forward referenced", + "inputFiles": [ + "forward_referenced_pipe.ts" + ], + "expectations": [ + { + "failureMessage": "Invalid component definition", + "files": [ + "forward_referenced_pipe.js" + ] + } + ] + }, + { + "description": "should split multiple `exportAs` values into an array", + "inputFiles": [ + "export_as.ts" + ], + "expectations": [ + { + "failureMessage": "Incorrect SomeDirective.ɵdir", + "files": [ + "export_as.js" + ] + } + ] + }, + { + "description": "should not generate a selectors array if the directive does not have a selector", + "inputFiles": [ + "no_selector.ts" + ], + "expectations": [ + { + "failureMessage": "Invalid directive definition", + "files": [ + "no_selector.js" + ] + } + ] + }, + { + "description": "should generate a pure function for constant object literals", + "inputFiles": [ + "constant_object_literals.ts" + ], + "expectations": [ + { + "failureMessage": "Invalid component definition", + "files": [ + "constant_object_literals.js" + ] + } + ] + }, + { + "description": "should generate a pure function for constant array literals", + "inputFiles": [ + "constant_array_literals.ts" + ], + "expectations": [ + { + "failureMessage": "Invalid component definition", + "files": [ + "constant_array_literals.js" + ] + } + ] + }, + { + "description": "should not share pure functions between null and object literals", + "inputFiles": [ + "object_literals_null_vs_empty.ts" + ], + "expectations": [ + { + "failureMessage": "Invalid component definition", + "files": [ + "object_literals_null_vs_empty.js" + ] + } + ] + }, + { + "description": "should not share pure functions between null and array literals", + "inputFiles": [ + "array_literals_null_vs_empty.ts" + ], + "expectations": [ + { + "failureMessage": "Invalid component definition", + "files": [ + "array_literals_null_vs_empty.js" + ] + } + ] + }, + { + "description": "should not share pure functions between null and function calls", + "inputFiles": [ + "object_literals_null_vs_function.ts" + ], + "expectations": [ + { + "failureMessage": "Invalid component definition", + "files": [ + "object_literals_null_vs_function.js" + ] + } + ] + }, + { + "description": "should emit a valid setClassMetadata call in ES5 if a class with a custom decorator is referencing itself inside its own metadata", + "inputFiles": [ + "custom_decorator_es5.ts" + ], + "compilerOptions": { + "target": "ES5" + }, + "excludeFromPartialTests": true, + "expectations": [ + { + "failureMessage": "Incorrect setClassMetadata call", + "files": [ + "custom_decorator_es5.js" + ] + } + ] + }, + { + "description": "should support empty property bindings on ng-template", + "inputFiles": [ + "ng_template_empty_binding.ts" + ], + "expectations": [ + { + "failureMessage": "Incorrect template", + "files": [ + "ng_template_empty_binding.js" + ] + } + ] + } + ] +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/array_literals_null_vs_empty.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/array_literals_null_vs_empty.js new file mode 100644 index 0000000000..b0c8b720e7 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/array_literals_null_vs_empty.js @@ -0,0 +1,23 @@ +const $c0$ = function () { return { foo: null }; }; +const $c1$ = function () { return []; }; +const $c2$ = function (a0) { return { foo: a0 }; }; +// ... +MyApp.ɵcmp = $r3$.ɵɵdefineComponent({ + type: MyApp, + selectors: [["ng-component"]], + decls: 2, + vars: 6, + consts: [[__AttributeMarker.Bindings__, "dir"]], + template: function MyApp_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵelement(0, "div", 0); + $r3$.ɵɵelement(1, "div", 0); + } + if (rf & 2) { + $r3$.ɵɵproperty("dir", $r3$.ɵɵpureFunction0(2, $c0$)); + $r3$.ɵɵadvance(1); + $r3$.ɵɵproperty("dir", $r3$.ɵɵpureFunction1(4, $c2$, $r3$.ɵɵpureFunction0(3, $c1$))); + } + }, + encapsulation: 2 +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/array_literals_null_vs_empty.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/array_literals_null_vs_empty.ts new file mode 100644 index 0000000000..aceaa62571 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/array_literals_null_vs_empty.ts @@ -0,0 +1,14 @@ +import {Component, NgModule} from '@angular/core'; + +@Component({ + template: ` +
+
+ ` +}) +export class MyApp { +} + +@NgModule({declarations: [MyApp]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/constant_array_literals.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/constant_array_literals.js new file mode 100644 index 0000000000..c44abb2296 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/constant_array_literals.js @@ -0,0 +1,19 @@ +const $c0$ = function () { return []; }; +const $c1$ = function () { return [0, 1, 2]; }; +// ... +MyApp.ɵcmp = $r3$.ɵɵdefineComponent({ + type: MyApp, + selectors: [["ng-component"]], + decls: 1, + vars: 4, + consts: [[__AttributeMarker.Bindings__, "prop", "otherProp"]], + template: function MyApp_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵelement(0, "some-comp", 0); + } + if (rf & 2) { + $r3$.ɵɵproperty("prop", $r3$.ɵɵpureFunction0(2, $c0$))("otherProp", $r3$.ɵɵpureFunction0(3, $c1$)); + } + }, + encapsulation: 2 +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/constant_array_literals.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/constant_array_literals.ts new file mode 100644 index 0000000000..7c04db2343 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/constant_array_literals.ts @@ -0,0 +1,5 @@ +import {Component} from '@angular/core'; + +@Component({template: ''}) +export class MyApp { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/constant_object_literals.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/constant_object_literals.js new file mode 100644 index 0000000000..b157ac1009 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/constant_object_literals.js @@ -0,0 +1,19 @@ +const $c0$ = function () { return {}; }; +const $c1$ = function () { return { a: 1, b: 2 }; }; +// ... +MyApp.ɵcmp = $r3$.ɵɵdefineComponent({ + type: MyApp, + selectors: [["ng-component"]], + decls: 1, + vars: 4, + consts: [[__AttributeMarker.Bindings__, "prop", "otherProp"]], + template: function MyApp_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵelement(0, "some-comp", 0); + } + if (rf & 2) { + $r3$.ɵɵproperty("prop", $r3$.ɵɵpureFunction0(2, $c0$))("otherProp", $r3$.ɵɵpureFunction0(3, $c1$)); + } + }, + encapsulation: 2 +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/constant_object_literals.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/constant_object_literals.ts new file mode 100644 index 0000000000..08fd0e826b --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/constant_object_literals.ts @@ -0,0 +1,5 @@ +import {Component} from '@angular/core'; + +@Component({template: ''}) +export class MyApp { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/GOLDEN_PARTIAL.js new file mode 100644 index 0000000000..9b60768fda --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/GOLDEN_PARTIAL.js @@ -0,0 +1,355 @@ +/**************************************************************************************************** + * PARTIAL FILE: root_template.js + ****************************************************************************************************/ +import { Component, NgModule } from '@angular/core'; +import * as i0 from "@angular/core"; +export class SimpleComponent { +} +SimpleComponent.ɵfac = function SimpleComponent_Factory(t) { return new (t || SimpleComponent)(); }; +SimpleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: SimpleComponent, selector: "simple", ngImport: i0, template: { source: '
', isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SimpleComponent, [{ + type: Component, + args: [{ selector: 'simple', template: '
' }] + }], null, null); })(); +export class ComplexComponent { +} +ComplexComponent.ɵfac = function ComplexComponent_Factory(t) { return new (t || ComplexComponent)(); }; +ComplexComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: ComplexComponent, selector: "complex", ngImport: i0, template: { source: ` +
+
`, isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ComplexComponent, [{ + type: Component, + args: [{ + selector: 'complex', + template: ` +
+
` + }] + }], null, null); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [SimpleComponent, ComplexComponent] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [SimpleComponent, ComplexComponent] }] + }], null, null); })(); +export class MyApp { +} +MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); }; +MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: 'content ', isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{ + type: Component, + args: [{ selector: 'my-app', template: 'content ' }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: root_template.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class SimpleComponent { + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class ComplexComponent { + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} +export declare class MyApp { + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} + +/**************************************************************************************************** + * PARTIAL FILE: multiple_wildcards.js + ****************************************************************************************************/ +import { Component, NgModule } from '@angular/core'; +import * as i0 from "@angular/core"; +class Cmp { +} +Cmp.ɵfac = function Cmp_Factory(t) { return new (t || Cmp)(); }; +Cmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: Cmp, selector: "ng-component", ngImport: i0, template: { source: ` + + + + `, isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(Cmp, [{ + type: Component, + args: [{ + template: ` + + + + `, + }] + }], null, null); })(); +class Module { +} +Module.ɵmod = i0.ɵɵdefineNgModule({ type: Module }); +Module.ɵinj = i0.ɵɵdefineInjector({ factory: function Module_Factory(t) { return new (t || Module)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(Module, { declarations: [Cmp] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(Module, [{ + type: NgModule, + args: [{ declarations: [Cmp] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: multiple_wildcards.d.ts + ****************************************************************************************************/ +export {}; + +/**************************************************************************************************** + * PARTIAL FILE: nested_template.js + ****************************************************************************************************/ +import { Component, NgModule } from '@angular/core'; +import * as i0 from "@angular/core"; +class Cmp { +} +Cmp.ɵfac = function Cmp_Factory(t) { return new (t || Cmp)(); }; +Cmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: Cmp, selector: "ng-component", ngImport: i0, template: { source: ` +
+ +
+
+ No ng-content, no instructions generated. +
+ + '*' selector: + + `, isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(Cmp, [{ + type: Component, + args: [{ + template: ` +
+ +
+
+ No ng-content, no instructions generated. +
+ + '*' selector: + + `, + }] + }], null, null); })(); +class Module { +} +Module.ɵmod = i0.ɵɵdefineNgModule({ type: Module }); +Module.ɵinj = i0.ɵɵdefineInjector({ factory: function Module_Factory(t) { return new (t || Module)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(Module, { declarations: [Cmp] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(Module, [{ + type: NgModule, + args: [{ declarations: [Cmp] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: nested_template.d.ts + ****************************************************************************************************/ +export {}; + +/**************************************************************************************************** + * PARTIAL FILE: root_and_nested.js + ****************************************************************************************************/ +import { Component, NgModule } from '@angular/core'; +import * as i0 from "@angular/core"; +class Cmp { +} +Cmp.ɵfac = function Cmp_Factory(t) { return new (t || Cmp)(); }; +Cmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: Cmp, selector: "ng-component", ngImport: i0, template: { source: ` + + + + + + + + + '*' selector in a template: + + + `, isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(Cmp, [{ + type: Component, + args: [{ + template: ` + + + + + + + + + '*' selector in a template: + + + `, + }] + }], null, null); })(); +class Module { +} +Module.ɵmod = i0.ɵɵdefineNgModule({ type: Module }); +Module.ɵinj = i0.ɵɵdefineInjector({ factory: function Module_Factory(t) { return new (t || Module)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(Module, { declarations: [Cmp] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(Module, [{ + type: NgModule, + args: [{ declarations: [Cmp] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: root_and_nested.d.ts + ****************************************************************************************************/ +export {}; + +/**************************************************************************************************** + * PARTIAL FILE: ng_project_as_selector.js + ****************************************************************************************************/ +import { Component, NgModule } from '@angular/core'; +import * as i0 from "@angular/core"; +export class SimpleComponent { +} +SimpleComponent.ɵfac = function SimpleComponent_Factory(t) { return new (t || SimpleComponent)(); }; +SimpleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: SimpleComponent, selector: "simple", ngImport: i0, template: { source: '
', isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SimpleComponent, [{ + type: Component, + args: [{ selector: 'simple', template: '
' }] + }], null, null); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [SimpleComponent] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [SimpleComponent] }] + }], null, null); })(); +export class MyApp { +} +MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); }; +MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: '

', isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{ + type: Component, + args: [{ selector: 'my-app', template: '

' }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: ng_project_as_selector.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class SimpleComponent { + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} +export declare class MyApp { + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} + +/**************************************************************************************************** + * PARTIAL FILE: ng_project_as_compound_selector.js + ****************************************************************************************************/ +import { Component, NgModule } from '@angular/core'; +import * as i0 from "@angular/core"; +export class SimpleComponent { +} +SimpleComponent.ɵfac = function SimpleComponent_Factory(t) { return new (t || SimpleComponent)(); }; +SimpleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: SimpleComponent, selector: "simple", ngImport: i0, template: { source: '
', isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SimpleComponent, [{ + type: Component, + args: [{ selector: 'simple', template: '
' }] + }], null, null); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [SimpleComponent] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [SimpleComponent] }] + }], null, null); })(); +export class MyApp { +} +MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); }; +MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: '

', isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{ + type: Component, + args: [{ selector: 'my-app', template: '

' }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: ng_project_as_compound_selector.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class SimpleComponent { + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} +export declare class MyApp { + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} + +/**************************************************************************************************** + * PARTIAL FILE: ng_project_as_attribute.js + ****************************************************************************************************/ +import { Component } from '@angular/core'; +import * as i0 from "@angular/core"; +export class MyApp { + constructor() { + this.show = true; + } +} +MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); }; +MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: '
', isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{ + type: Component, + args: [{ selector: 'my-app', template: '
' }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: ng_project_as_attribute.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class MyApp { + show: boolean; + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} + +/**************************************************************************************************** + * PARTIAL FILE: ng_content_with_structural_dir.js + ****************************************************************************************************/ +import { Component } from '@angular/core'; +import * as i0 from "@angular/core"; +export class SimpleComponent { +} +SimpleComponent.ɵfac = function SimpleComponent_Factory(t) { return new (t || SimpleComponent)(); }; +SimpleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: SimpleComponent, selector: "simple", ngImport: i0, template: { source: '', isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SimpleComponent, [{ + type: Component, + args: [{ selector: 'simple', template: '' }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: ng_content_with_structural_dir.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class SimpleComponent { + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} + diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/TEST_CASES.json b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/TEST_CASES.json new file mode 100644 index 0000000000..ee5792e4aa --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/TEST_CASES.json @@ -0,0 +1,129 @@ +{ + "$schema": "../../../test_case_schema.json", + "cases": [ + { + "description": "should support content projection in root template", + "inputFiles": [ + "root_template.ts" + ], + "expectations": [ + { + "failureMessage": "Incorrect SimpleComponent definition", + "files": [ + { + "expected": "root_template_simple_def.js", + "generated": "root_template.js" + } + ] + }, + { + "failureMessage": "Incorrect ComplexComponent definition", + "files": [ + { + "expected": "root_template_complex_def.js", + "generated": "root_template.js" + } + ] + } + ] + }, + { + "description": "should support multi-slot content projection with multiple wildcard slots", + "inputFiles": [ + "multiple_wildcards.ts" + ], + "expectations": [ + { + "failureMessage": "Invalid content projection instructions generated", + "files": [ + "multiple_wildcards.js" + ] + } + ] + }, + { + "description": "should support content projection in nested templates", + "inputFiles": [ + "nested_template.ts" + ], + "expectations": [ + { + "failureMessage": "Invalid content projection instructions generated", + "files": [ + "nested_template.js" + ] + } + ] + }, + { + "description": "should support content projection in both the root and nested templates", + "inputFiles": [ + "root_and_nested.ts" + ], + "expectations": [ + { + "failureMessage": "Invalid content projection instructions generated", + "files": [ + "root_and_nested.js" + ] + } + ] + }, + { + "description": "should parse the selector that is passed into ngProjectAs", + "inputFiles": [ + "ng_project_as_selector.ts" + ], + "expectations": [ + { + "failureMessage": "Incorrect SimpleComponent definition", + "files": [ + "ng_project_as_selector.js" + ] + } + ] + }, + { + "description": "should take the first selector if multiple values are passed into ngProjectAs", + "inputFiles": [ + "ng_project_as_compound_selector.ts" + ], + "expectations": [ + { + "failureMessage": "Incorrect SimpleComponent definition", + "files": [ + "ng_project_as_compound_selector.js" + ] + } + ] + }, + { + "description": "should include parsed ngProjectAs selectors into template attrs", + "inputFiles": [ + "ng_project_as_attribute.ts" + ], + "expectations": [ + { + "failureMessage": "Incorrect MyApp definition", + "files": [ + "ng_project_as_attribute.js" + ] + } + ] + }, + { + "description": "should capture the node name of ng-content with a structural directive", + "inputFiles": [ + "ng_content_with_structural_dir.ts" + ], + "expectations": [ + { + "failureMessage": "Incorrect SimpleComponent definition", + "files": [ + "ng_content_with_structural_dir.js" + ] + } + ] + } + ] +} \ No newline at end of file diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/multiple_wildcards.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/multiple_wildcards.js new file mode 100644 index 0000000000..5e07ed16c9 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/multiple_wildcards.js @@ -0,0 +1,19 @@ +const $c0$ = ["*", [["", "spacer", ""]], "*"]; +const $c1$ = ["*", "[spacer]", "*"]; +// ... +Cmp.ɵcmp = $r3$.ɵɵdefineComponent({ + type: Cmp, + selectors: [["ng-component"]], + ngContentSelectors: $c1$, + decls: 3, + vars: 0, + template: function Cmp_Template(rf, ctx) { + if (rf & 1) { + i0.ɵɵprojectionDef($c0$); + i0.ɵɵprojection(0); + i0.ɵɵprojection(1, 1); + i0.ɵɵprojection(2, 2); + } + }, + encapsulation: 2 +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/multiple_wildcards.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/multiple_wildcards.ts new file mode 100644 index 0000000000..31db8dbd80 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/multiple_wildcards.ts @@ -0,0 +1,15 @@ +import {Component, NgModule} from '@angular/core'; + +@Component({ + template: ` + + + + `, +}) +class Cmp { +} + +@NgModule({declarations: [Cmp]}) +class Module { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/nested_template.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/nested_template.js new file mode 100644 index 0000000000..3e016c319e --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/nested_template.js @@ -0,0 +1,34 @@ +function Cmp_div_0_Template(rf, ctx) { if (rf & 1) { + $r3$.ɵɵelementStart(0, "div", 2); + $r3$.ɵɵprojection(1); + $r3$.ɵɵelementEnd(); +} } +function Cmp_div_1_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵelementStart(0, "div", 3); + $r3$.ɵɵtext(1, " No ng-content, no instructions generated. "); + $r3$.ɵɵelementEnd(); + } +} +function Cmp_ng_template_2_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵtext(0, " '*' selector: "); + $r3$.ɵɵprojection(1, 1); + } +} +const $_c4$ = [[["span", "title", "tofirst"]], "*"]; +// ... +consts: [["id", "second", __AttributeMarker.Template__, "ngIf"], ["id", "third", __AttributeMarker.Template__, "ngIf"], ["id", "second"], ["id", "third"]], +template: function Cmp_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵprojectionDef($_c4$); + $r3$.ɵɵtemplate(0, Cmp_div_0_Template, 2, 0, "div", 0); + $r3$.ɵɵtemplate(1, Cmp_div_1_Template, 2, 0, "div", 1); + $r3$.ɵɵtemplate(2, Cmp_ng_template_2_Template, 2, 0, "ng-template"); + } + if (rf & 2) { + $r3$.ɵɵproperty("ngIf", ctx.visible); + $r3$.ɵɵadvance(1); + $r3$.ɵɵproperty("ngIf", ctx.visible); + } +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/nested_template.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/nested_template.ts new file mode 100644 index 0000000000..c6cbdf4259 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/nested_template.ts @@ -0,0 +1,21 @@ +import {Component, NgModule} from '@angular/core'; + +@Component({ + template: ` +
+ +
+
+ No ng-content, no instructions generated. +
+ + '*' selector: + + `, +}) +class Cmp { +} + +@NgModule({declarations: [Cmp]}) +class Module { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_content_with_structural_dir.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_content_with_structural_dir.js new file mode 100644 index 0000000000..05d3a30825 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_content_with_structural_dir.js @@ -0,0 +1,18 @@ +SimpleComponent.ɵcmp = $r3$.ɵɵdefineComponent({ + type: SimpleComponent, + selectors: [["simple"]], + ngContentSelectors: $c0$, + decls: 1, + vars: 1, + consts: [[__AttributeMarker.Template__, "ngIf"]], + template: function SimpleComponent_Template(rf, ctx) { + if (rf & 1) { + i0.ɵɵprojectionDef(); + i0.ɵɵtemplate(0, SimpleComponent_ng_content_0_Template, 1, 0, "ng-content", 0); + } + if (rf & 2) { + i0.ɵɵproperty("ngIf", ctx.showContent); + } + }, + encapsulation: 2 +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_content_with_structural_dir.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_content_with_structural_dir.ts new file mode 100644 index 0000000000..113e9bec42 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_content_with_structural_dir.ts @@ -0,0 +1,5 @@ +import {Component, Directive, NgModule, TemplateRef} from '@angular/core'; + +@Component({selector: 'simple', template: ''}) +export class SimpleComponent { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_attribute.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_attribute.js new file mode 100644 index 0000000000..5e7bca7e1e --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_attribute.js @@ -0,0 +1,21 @@ +MyApp.ɵcmp = i0.ɵɵdefineComponent({ + type: MyApp, + selectors: [ + ["my-app"] + ], + decls: 1, + vars: 1, + consts: [ + ["ngProjectAs", ".someclass", __AttributeMarker.ProjectAs__, ["", 8, "someclass"], __AttributeMarker.Template__, "ngIf"], + ["ngProjectAs", ".someclass", __AttributeMarker.ProjectAs__, ["", 8, "someclass"]] + ], + template: function MyApp_Template(rf, ctx) { + if (rf & 1) { + i0.ɵɵtemplate(0, MyApp_div_0_Template, 1, 0, "div", 0); + } + if (rf & 2) { + i0.ɵɵproperty("ngIf", ctx.show); + } + }, + encapsulation: 2 +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_attribute.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_attribute.ts new file mode 100644 index 0000000000..5c8445637b --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_attribute.ts @@ -0,0 +1,6 @@ +import {Component} from '@angular/core'; + +@Component({selector: 'my-app', template: '
'}) +export class MyApp { + show = true; +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_compound_selector.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_compound_selector.js new file mode 100644 index 0000000000..4b4b5caf8e --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_compound_selector.js @@ -0,0 +1,20 @@ +// NOTE: the c0 and c1 constants aren't being used in this particular test, +// NOTE: but they are used in some of the logic that is folded under the ellipsis. +const $_c0$ = [[["", "title", ""]]]; +const $_c1$ = ["[title]"]; +// ... +MyApp.ɵcmp = $r3$.ɵɵdefineComponent({ + type: MyApp, + selectors: [["my-app"]], + decls: 2, + vars: 0, + consts: [["ngProjectAs", "[title],[header]", 5, ["", "title", ""]]], + template: function MyApp_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵelementStart(0, "simple"); + $r3$.ɵɵelement(1, "h1", 0); + $r3$.ɵɵelementEnd(); + } + }, + encapsulation: 2 +}) diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_compound_selector.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_compound_selector.ts new file mode 100644 index 0000000000..6de1a85eef --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_compound_selector.ts @@ -0,0 +1,14 @@ +import {Component, NgModule} from '@angular/core'; + +@Component({selector: 'simple', template: '
'}) +export class SimpleComponent { +} + +@NgModule({declarations: [SimpleComponent]}) +export class MyModule { +} + +@Component( + {selector: 'my-app', template: '

'}) +export class MyApp { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_selector.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_selector.js new file mode 100644 index 0000000000..ca46011524 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_selector.js @@ -0,0 +1,18 @@ +const $_c0$ = [[["", "title", ""]]]; +const $_c1$ = ["[title]"]; +// ... +MyApp.ɵcmp = $r3$.ɵɵdefineComponent({ + type: MyApp, + selectors: [["my-app"]], + decls: 2, + vars: 0, + consts: [["ngProjectAs", "[title]", 5, ["", "title", ""]]], + template: function MyApp_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵelementStart(0, "simple"); + $r3$.ɵɵelement(1, "h1", 0); + $r3$.ɵɵelementEnd(); + } + }, + encapsulation: 2 +}) diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_selector.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_selector.ts new file mode 100644 index 0000000000..10616df958 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_selector.ts @@ -0,0 +1,13 @@ +import {Component, NgModule} from '@angular/core'; + +@Component({selector: 'simple', template: '
'}) +export class SimpleComponent { +} + +@NgModule({declarations: [SimpleComponent]}) +export class MyModule { +} + +@Component({selector: 'my-app', template: '

'}) +export class MyApp { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/root_and_nested.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/root_and_nested.js new file mode 100644 index 0000000000..5fae6d2b10 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/root_and_nested.js @@ -0,0 +1,29 @@ +function Cmp_ng_template_1_ng_template_1_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵprojection(0, 3); + } +} +function Cmp_ng_template_1_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵprojection(0, 2); + $r3$.ɵɵtemplate(1, Cmp_ng_template_1_ng_template_1_Template, 1, 0, "ng-template"); + } +} +function Cmp_ng_template_2_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵtext(0, " '*' selector in a template: "); + $r3$.ɵɵprojection(1, 4); + } +} +const $_c0$ = [[["", "id", "tomainbefore"]], [["", "id", "tomainafter"]], [["", "id", "totemplate"]], [["", "id", "tonestedtemplate"]], "*"]; +const $_c1$ = ["[id=toMainBefore]", "[id=toMainAfter]", "[id=toTemplate]", "[id=toNestedTemplate]", "*"]; +// ... +template: function Cmp_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵprojectionDef($_c0$); + $r3$.ɵɵprojection(0); + $r3$.ɵɵtemplate(1, Cmp_ng_template_1_Template, 2, 0, "ng-template"); + $r3$.ɵɵtemplate(2, Cmp_ng_template_2_Template, 2, 0, "ng-template"); + $r3$.ɵɵprojection(3, 1); + } +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/root_and_nested.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/root_and_nested.ts new file mode 100644 index 0000000000..6bdaf081ab --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/root_and_nested.ts @@ -0,0 +1,23 @@ +import {Component, NgModule} from '@angular/core'; + +@Component({ + template: ` + + + + + + + + + '*' selector in a template: + + + `, +}) +class Cmp { +} + +@NgModule({declarations: [Cmp]}) +class Module { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/root_template.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/root_template.ts new file mode 100644 index 0000000000..82f8dd28cd --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/root_template.ts @@ -0,0 +1,22 @@ +import {Component, Directive, NgModule, TemplateRef} from '@angular/core'; + +@Component({selector: 'simple', template: '
'}) +export class SimpleComponent { +} + +@Component({ + selector: 'complex', + template: ` +
+
` +}) +export class ComplexComponent { +} + +@NgModule({declarations: [SimpleComponent, ComplexComponent]}) +export class MyModule { +} + +@Component({selector: 'my-app', template: 'content '}) +export class MyApp { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/root_template_complex_def.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/root_template_complex_def.js new file mode 100644 index 0000000000..2dc472292e --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/root_template_complex_def.js @@ -0,0 +1,22 @@ +const $c1$ = [[["span", "title", "tofirst"]], [["span", "title", "tosecond"]]]; +// ... +ComplexComponent.ɵcmp = $r3$.ɵɵdefineComponent({ + type: ComplexComponent, + selectors: [["complex"]], + ngContentSelectors: $c2$, + decls: 4, + vars: 0, + consts: [["id","first"], ["id","second"]], + template: function ComplexComponent_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵprojectionDef($c1$); + $r3$.ɵɵelementStart(0, "div", 0); + $r3$.ɵɵprojection(1); + $r3$.ɵɵelementEnd(); + $r3$.ɵɵelementStart(2, "div", 1); + $r3$.ɵɵprojection(3, 1); + $r3$.ɵɵelementEnd(); + } + }, + encapsulation: 2 +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/root_template_simple_def.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/root_template_simple_def.js new file mode 100644 index 0000000000..b8fbc02e7c --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/root_template_simple_def.js @@ -0,0 +1,16 @@ +SimpleComponent.ɵcmp = $r3$.ɵɵdefineComponent({ + type: SimpleComponent, + selectors: [["simple"]], + ngContentSelectors: $c0$, + decls: 2, + vars: 0, + template: function SimpleComponent_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵprojectionDef(); + $r3$.ɵɵelementStart(0, "div"); + $r3$.ɵɵprojection(1); + $r3$.ɵɵelementEnd(); + } + }, + encapsulation: 2 +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/custom_decorator_es5.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/custom_decorator_es5.js new file mode 100644 index 0000000000..8653ade882 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/custom_decorator_es5.js @@ -0,0 +1,6 @@ +(function() { + i0.ɵsetClassMetadata(Comp, [{ + type: Component, + args: [{ + template: '', + providers: [{ provide: token, useExisting: Comp }] diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/custom_decorator_es5.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/custom_decorator_es5.ts new file mode 100644 index 0000000000..49cd6fbb3e --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/custom_decorator_es5.ts @@ -0,0 +1,15 @@ +import {Component, InjectionToken} from '@angular/core'; + +const token = new InjectionToken('token'); + +export function Custom() { + return function(target: any) {}; +} + +@Custom() +@Component({ + template: '', + providers: [{provide: token, useExisting: Comp}], +}) +export class Comp { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/export_as.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/export_as.js new file mode 100644 index 0000000000..cc3e81dadd --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/export_as.js @@ -0,0 +1,5 @@ +SomeDirective.ɵdir = $r3$.ɵɵdefineDirective({ + type: SomeDirective, + selectors: [["", "some-directive", ""]], + exportAs: ["someDir", "otherDir"] +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/export_as.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/export_as.ts new file mode 100644 index 0000000000..f6f764c7f3 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/export_as.ts @@ -0,0 +1,9 @@ +import {Directive, NgModule} from '@angular/core'; + +@Directive({selector: '[some-directive]', exportAs: 'someDir, otherDir'}) +export class SomeDirective { +} + +@NgModule({declarations: [SomeDirective]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/forward_referenced_directive.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/forward_referenced_directive.js new file mode 100644 index 0000000000..b509cfdd86 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/forward_referenced_directive.js @@ -0,0 +1,3 @@ +// ... +directives: function () { return [MyForwardDirective]; } +// ... diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/forward_referenced_directive.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/forward_referenced_directive.ts new file mode 100644 index 0000000000..c6ddfbf883 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/forward_referenced_directive.ts @@ -0,0 +1,18 @@ +import {Component, Directive, NgModule} from '@angular/core'; + +@Component({ + selector: 'host-binding-comp', + template: ` + + ` +}) +export class HostBindingComp { +} + +@Directive({selector: 'my-forward-directive'}) +class MyForwardDirective { +} + +@NgModule({declarations: [HostBindingComp, MyForwardDirective]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/forward_referenced_pipe.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/forward_referenced_pipe.js new file mode 100644 index 0000000000..8c2cf306f6 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/forward_referenced_pipe.js @@ -0,0 +1,3 @@ +// ... +pipes: function () { return [MyForwardPipe]; } +// ... diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/forward_referenced_pipe.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/forward_referenced_pipe.ts new file mode 100644 index 0000000000..aa1a1a8b76 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/forward_referenced_pipe.ts @@ -0,0 +1,18 @@ +import {Component, NgModule, Pipe} from '@angular/core'; + +@Component({ + selector: 'host-binding-comp', + template: ` +
...
+ ` +}) +export class HostBindingComp { +} + +@Pipe({name: 'my_forward_pipe'}) +class MyForwardPipe { +} + +@NgModule({declarations: [HostBindingComp, MyForwardPipe]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/GOLDEN_PARTIAL.js new file mode 100644 index 0000000000..23f4287ee9 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/GOLDEN_PARTIAL.js @@ -0,0 +1,259 @@ +/**************************************************************************************************** + * PARTIAL FILE: local_reference.js + ****************************************************************************************************/ +import { Component, NgModule } from '@angular/core'; +import * as i0 from "@angular/core"; +export class MyComponent { +} +MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); }; +MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: 'Hello {{user.value}}!', isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{ + type: Component, + args: [{ selector: 'my-component', template: 'Hello {{user.value}}!' }] + }], null, null); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [MyComponent] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: local_reference.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class MyComponent { + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + +/**************************************************************************************************** + * PARTIAL FILE: local_reference_nested.js + ****************************************************************************************************/ +import { Component, Directive, NgModule, TemplateRef } from '@angular/core'; +import * as i0 from "@angular/core"; +export class IfDirective { + constructor(template) { } +} +IfDirective.ɵfac = function IfDirective_Factory(t) { return new (t || IfDirective)(i0.ɵɵdirectiveInject(i0.TemplateRef)); }; +IfDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: IfDirective, selector: "[if]", ngImport: i0 }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(IfDirective, [{ + type: Directive, + args: [{ selector: '[if]' }] + }], function () { return [{ type: i0.TemplateRef }]; }, null); })(); +export class MyComponent { +} +MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); }; +MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: ` +
+ {{foo}} +
+ {{foo}}-{{bar}} + {{foo}}-{{bar}}-{{baz}} + +
+
+ `, isInline: true }, directives: [{ type: IfDirective, selector: "[if]" }] }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{ + type: Component, + args: [{ + selector: 'my-component', + template: ` +
+ {{foo}} +
+ {{foo}}-{{bar}} + {{foo}}-{{bar}}-{{baz}} + +
+
+ ` + }] + }], null, null); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [IfDirective, MyComponent] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [IfDirective, MyComponent] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: local_reference_nested.d.ts + ****************************************************************************************************/ +import { TemplateRef } from '@angular/core'; +import * as i0 from "@angular/core"; +export declare class IfDirective { + constructor(template: TemplateRef); + static ɵfac: i0.ɵɵFactoryDef; + static ɵdir: i0.ɵɵDirectiveDefWithMeta; +} +export declare class MyComponent { + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + +/**************************************************************************************************** + * PARTIAL FILE: local_reference_and_context_variables.js + ****************************************************************************************************/ +import { Component, NgModule } from '@angular/core'; +import * as i0 from "@angular/core"; +export class MyComponent { +} +MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); }; +MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: ` +
+
+ + {{ foo }} - {{ item }} + +
`, isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{ + type: Component, + args: [{ + selector: 'my-component', + template: ` +
+
+ + {{ foo }} - {{ item }} + +
` + }] + }], null, null); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [MyComponent] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: local_reference_and_context_variables.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class MyComponent { + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + +/**************************************************************************************************** + * PARTIAL FILE: lifecycle_hooks.js + ****************************************************************************************************/ +import { Component, Input, NgModule } from '@angular/core'; +import * as i0 from "@angular/core"; +let events = []; +export class LifecycleComp { + ngOnChanges() { + events.push('changes' + this.nameMin); + } + ngOnInit() { + events.push('init' + this.nameMin); + } + ngDoCheck() { + events.push('check' + this.nameMin); + } + ngAfterContentInit() { + events.push('content init' + this.nameMin); + } + ngAfterContentChecked() { + events.push('content check' + this.nameMin); + } + ngAfterViewInit() { + events.push('view init' + this.nameMin); + } + ngAfterViewChecked() { + events.push('view check' + this.nameMin); + } + ngOnDestroy() { + events.push(this.nameMin); + } +} +LifecycleComp.ɵfac = function LifecycleComp_Factory(t) { return new (t || LifecycleComp)(); }; +LifecycleComp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: LifecycleComp, selector: "lifecycle-comp", inputs: { nameMin: ["name", "nameMin"] }, usesOnChanges: true, ngImport: i0, template: { source: '', isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(LifecycleComp, [{ + type: Component, + args: [{ selector: 'lifecycle-comp', template: '' }] + }], null, { nameMin: [{ + type: Input, + args: ['name'] + }] }); })(); +export class SimpleLayout { + constructor() { + this.name1 = '1'; + this.name2 = '2'; + } +} +SimpleLayout.ɵfac = function SimpleLayout_Factory(t) { return new (t || SimpleLayout)(); }; +SimpleLayout.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: SimpleLayout, selector: "simple-layout", ngImport: i0, template: { source: ` + + + `, isInline: true }, directives: [{ type: LifecycleComp, selector: "lifecycle-comp", inputs: ["name"] }] }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SimpleLayout, [{ + type: Component, + args: [{ + selector: 'simple-layout', + template: ` + + + ` + }] + }], null, null); })(); +export class LifecycleModule { +} +LifecycleModule.ɵmod = i0.ɵɵdefineNgModule({ type: LifecycleModule }); +LifecycleModule.ɵinj = i0.ɵɵdefineInjector({ factory: function LifecycleModule_Factory(t) { return new (t || LifecycleModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(LifecycleModule, { declarations: [LifecycleComp, SimpleLayout] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(LifecycleModule, [{ + type: NgModule, + args: [{ declarations: [LifecycleComp, SimpleLayout] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: lifecycle_hooks.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class LifecycleComp { + nameMin: string; + ngOnChanges(): void; + ngOnInit(): void; + ngDoCheck(): void; + ngAfterContentInit(): void; + ngAfterContentChecked(): void; + ngAfterViewInit(): void; + ngAfterViewChecked(): void; + ngOnDestroy(): void; + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class SimpleLayout { + name1: string; + name2: string; + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class LifecycleModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/TEST_CASES.json b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/TEST_CASES.json new file mode 100644 index 0000000000..20f9000e4b --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/TEST_CASES.json @@ -0,0 +1,73 @@ +{ + "$schema": "../../../test_case_schema.json", + "cases": [ + { + "description": "local reference", + "inputFiles": [ + "local_reference.ts" + ], + "expectations": [ + { + "failureMessage": "Incorrect MyComponent.ɵcmp", + "files": [ + "local_reference.js" + ] + } + ] + }, + { + "description": "local references in nested views", + "inputFiles": [ + "local_reference_nested.ts" + ], + "expectations": [ + { + "failureMessage": "Incorrect MyComponent.ɵcmp", + "files": [ + "local_reference_nested.js" + ] + } + ] + }, + { + "description": "should support local refs mixed with context assignments", + "inputFiles": [ + "local_reference_and_context_variables.ts" + ], + "expectations": [ + { + "failureMessage": "Incorrect template", + "files": [ + "local_reference_and_context_variables.js" + ] + } + ] + }, + { + "description": "should gen hooks with a few simple components", + "inputFiles": [ + "lifecycle_hooks.ts" + ], + "expectations": [ + { + "failureMessage": "Invalid LifecycleComp definition", + "files": [ + { + "expected": "lifecycle_hooks_lifecycle_comp_def.js", + "generated": "lifecycle_hooks.js" + } + ] + }, + { + "failureMessage": "Invalid SimpleLayout definition", + "files": [ + { + "expected": "lifecycle_hooks_simple_layout_def.js", + "generated": "lifecycle_hooks.js" + } + ] + } + ] + } + ] +} \ No newline at end of file diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/lifecycle_hooks.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/lifecycle_hooks.ts new file mode 100644 index 0000000000..6b23dc1b28 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/lifecycle_hooks.ts @@ -0,0 +1,53 @@ +import {Component, Input, NgModule} from '@angular/core'; + +let events: string[] = []; + +@Component({selector: 'lifecycle-comp', template: ''}) +export class LifecycleComp { + @Input('name') nameMin!: string; + + ngOnChanges() { + events.push('changes' + this.nameMin); + } + + ngOnInit() { + events.push('init' + this.nameMin); + } + ngDoCheck() { + events.push('check' + this.nameMin); + } + + ngAfterContentInit() { + events.push('content init' + this.nameMin); + } + ngAfterContentChecked() { + events.push('content check' + this.nameMin); + } + + ngAfterViewInit() { + events.push('view init' + this.nameMin); + } + ngAfterViewChecked() { + events.push('view check' + this.nameMin); + } + + ngOnDestroy() { + events.push(this.nameMin); + } +} + +@Component({ + selector: 'simple-layout', + template: ` + + + ` +}) +export class SimpleLayout { + name1 = '1'; + name2 = '2'; +} + +@NgModule({declarations: [LifecycleComp, SimpleLayout]}) +export class LifecycleModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/lifecycle_hooks_lifecycle_comp_def.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/lifecycle_hooks_lifecycle_comp_def.js new file mode 100644 index 0000000000..37ccb64bb5 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/lifecycle_hooks_lifecycle_comp_def.js @@ -0,0 +1,10 @@ +LifecycleComp.ɵcmp = $r3$.ɵɵdefineComponent({ + type: LifecycleComp, + selectors: [["lifecycle-comp"]], + inputs: {nameMin: ["name", "nameMin"]}, + features: [$r3$.ɵɵNgOnChangesFeature], + decls: 0, + vars: 0, + template: function LifecycleComp_Template(rf, ctx) {}, + encapsulation: 2 +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/lifecycle_hooks_simple_layout_def.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/lifecycle_hooks_simple_layout_def.js new file mode 100644 index 0000000000..15bffa3528 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/lifecycle_hooks_simple_layout_def.js @@ -0,0 +1,20 @@ +SimpleLayout.ɵcmp = $r3$.ɵɵdefineComponent({ + type: SimpleLayout, + selectors: [["simple-layout"]], + decls: 2, + vars: 2, + consts: [[__AttributeMarker.Bindings__, "name"]], + template: function SimpleLayout_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵelement(0, "lifecycle-comp", 0); + $r3$.ɵɵelement(1, "lifecycle-comp", 0); + } + if (rf & 2) { + $r3$.ɵɵproperty("name", ctx.name1); + $r3$.ɵɵadvance(1); + $r3$.ɵɵproperty("name", ctx.name2); + } + }, + directives: [LifecycleComp], + encapsulation: 2 +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference.js new file mode 100644 index 0000000000..99e56dfaac --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference.js @@ -0,0 +1,20 @@ +// ... +MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({ + type: MyComponent, + selectors: [["my-component"]], + decls: 3, + vars: 1, + consts: [["user", ""]], + template: function MyComponent_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵelement(0, "input", null, 0); + $r3$.ɵɵtext(2); + } + if (rf & 2) { + const $user$ = $r3$.ɵɵreference(1); + $r3$.ɵɵadvance(2); + $r3$.ɵɵtextInterpolate1("Hello ", $user$.value, "!"); + } + }, + encapsulation: 2 +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference.ts new file mode 100644 index 0000000000..4738742b09 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference.ts @@ -0,0 +1,9 @@ +import {Component, NgModule} from '@angular/core'; + +@Component({selector: 'my-component', template: 'Hello {{user.value}}!'}) +export class MyComponent { +} + +@NgModule({declarations: [MyComponent]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference_and_context_variables.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference_and_context_variables.js new file mode 100644 index 0000000000..b53c7dd79b --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference_and_context_variables.js @@ -0,0 +1,38 @@ +function MyComponent_div_0_span_3_Template(rf, ctx) { + if (rf & 1) { + $i0$.ɵɵelementStart(0, "span"); + $i0$.ɵɵtext(1); + $i0$.ɵɵelementEnd(); + } + if (rf & 2) { + const $item$ = $i0$.ɵɵnextContext().$implicit; + const $foo$ = $i0$.ɵɵreference(2); + $r3$.ɵɵadvance(1); + $i0$.ɵɵtextInterpolate2(" ", $foo$, " - ", $item$, " "); + } +} + +function MyComponent_div_0_Template(rf, ctx) { + if (rf & 1) { + $i0$.ɵɵelementStart(0, "div"); + $i0$.ɵɵelement(1, "div", null, 1); + $i0$.ɵɵtemplate(3, MyComponent_div_0_span_3_Template, 2, 2, "span", 2); + $i0$.ɵɵelementEnd(); + } + if (rf & 2) { + const $app$ = $i0$.ɵɵnextContext(); + $r3$.ɵɵadvance(3); + $i0$.ɵɵproperty("ngIf", $app$.showing); + } +} + +// ... +consts: [[__AttributeMarker.Template__, "ngFor", "ngForOf"], ["foo", ""], [__AttributeMarker.Template__, "ngIf"]], +template:function MyComponent_Template(rf, ctx){ + if (rf & 1) { + $i0$.ɵɵtemplate(0, MyComponent_div_0_Template, 4, 1, "div", 0); + } + if (rf & 2) { + $i0$.ɵɵproperty("ngForOf", ctx.items); + } +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference_and_context_variables.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference_and_context_variables.ts new file mode 100644 index 0000000000..bae9db5ef0 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference_and_context_variables.ts @@ -0,0 +1,18 @@ +import {Component, NgModule} from '@angular/core'; + +@Component({ + selector: 'my-component', + template: ` +
+
+ + {{ foo }} - {{ item }} + +
` +}) +export class MyComponent { +} + +@NgModule({declarations: [MyComponent]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference_nested.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference_nested.js new file mode 100644 index 0000000000..b852bf2146 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference_nested.js @@ -0,0 +1,55 @@ +function MyComponent_div_3_span_2_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵelementStart(0, "span"); + $r3$.ɵɵtext(1); + $r3$.ɵɵelementEnd(); + } + if (rf & 2) { + $r3$.ɵɵnextContext(); + const $bar$ = $r3$.ɵɵreference(4); + $r3$.ɵɵnextContext(); + const $foo$ = $r3$.ɵɵreference(1); + const $baz$ = $r3$.ɵɵreference(5); + $r3$.ɵɵadvance(1); + $r3$.ɵɵtextInterpolate3("", $foo$, "-", $bar$, "-", $baz$, ""); + } +} +function MyComponent_div_3_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵelementStart(0, "div"); + $r3$.ɵɵtext(1); + $r3$.ɵɵtemplate(2, MyComponent_div_3_span_2_Template, 2, 3, "span", 1); + $r3$.ɵɵelement(3, "span", null, 3); + $r3$.ɵɵelementEnd(); + } + if (rf & 2) { + const $bar$ = $r3$.ɵɵreference(4); + $r3$.ɵɵnextContext(); + const $foo$ = $r3$.ɵɵreference(1); + $r3$.ɵɵadvance(1); + $r3$.ɵɵtextInterpolate2(" ", $foo$, "-", $bar$, " "); + } +} +// ... +MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({ + type: MyComponent, + selectors: [["my-component"]], + decls: 6, + vars: 1, + consts: [["foo", ""], [__AttributeMarker.Template__, "if"], ["baz", ""], ["bar", ""]], + template: function MyComponent_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵelement(0, "div", null, 0); + $r3$.ɵɵtext(2); + $r3$.ɵɵtemplate(3, MyComponent_div_3_Template, 5, 2, "div", 1); + $r3$.ɵɵelement(4, "div", null, 2); + } + if (rf & 2) { + const $foo$ = $r3$.ɵɵreference(1); + $r3$.ɵɵadvance(2); + $r3$.ɵɵtextInterpolate1(" ", $foo$, " "); + } + }, + directives:[IfDirective], + encapsulation: 2 +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference_nested.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference_nested.ts new file mode 100644 index 0000000000..e65fcfbfb3 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference_nested.ts @@ -0,0 +1,26 @@ +import {Component, Directive, NgModule, TemplateRef} from '@angular/core'; + +@Directive({selector: '[if]'}) +export class IfDirective { + constructor(template: TemplateRef) {} +} + +@Component({ + selector: 'my-component', + template: ` +
+ {{foo}} +
+ {{foo}}-{{bar}} + {{foo}}-{{bar}}-{{baz}} + +
+
+ ` +}) +export class MyComponent { +} + +@NgModule({declarations: [IfDirective, MyComponent]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/ng_template_empty_binding.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/ng_template_empty_binding.js new file mode 100644 index 0000000000..42299dc393 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/ng_template_empty_binding.js @@ -0,0 +1,15 @@ +function MyComponent_ng_template_0_Template(rf, ctx) {} +// ... +MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({ + type: MyComponent, + selectors: [["my-app"]], + decls: 1, + vars: 0, + consts: [[__AttributeMarker.Bindings__, "id"]], + template: function MyComponent_Template(rf, $ctx$) { + if (rf & 1) { + $r3$.ɵɵtemplate(0, MyComponent_ng_template_0_Template, 0, 0, "ng-template", 0); + } + }, + encapsulation: 2 +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/ng_template_empty_binding.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/ng_template_empty_binding.ts new file mode 100644 index 0000000000..92751266d0 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/ng_template_empty_binding.ts @@ -0,0 +1,9 @@ +import {Component, NgModule} from '@angular/core'; + +@Component({selector: 'my-app', template: ''}) +export class MyComponent { +} + +@NgModule({declarations: [MyComponent]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/no_selector.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/no_selector.js new file mode 100644 index 0000000000..4f4602b6fc --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/no_selector.js @@ -0,0 +1,3 @@ +AbstractDirective.ɵdir = $r3$.ɵɵdefineDirective({ + type: AbstractDirective +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/no_selector.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/no_selector.ts new file mode 100644 index 0000000000..9be3a7444e --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/no_selector.ts @@ -0,0 +1,5 @@ +import {Directive} from '@angular/core'; + +@Directive() +export class AbstractDirective { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/object_literals_null_vs_empty.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/object_literals_null_vs_empty.js new file mode 100644 index 0000000000..b8a4d06c8f --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/object_literals_null_vs_empty.js @@ -0,0 +1,23 @@ +const $c0$ = function () { return { foo: null }; }; +const $c1$ = function () { return {}; }; +const $c2$ = function (a0) { return { foo: a0 }; }; +// ... +MyApp.ɵcmp = $r3$.ɵɵdefineComponent({ + type: MyApp, + selectors: [["ng-component"]], + decls: 2, + vars: 6, + consts: [[__AttributeMarker.Bindings__, "dir"]], + template: function MyApp_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵelement(0, "div", 0); + $r3$.ɵɵelement(1, "div", 0); + } + if (rf & 2) { + $r3$.ɵɵproperty("dir", $r3$.ɵɵpureFunction0(2, $c0$)); + $r3$.ɵɵadvance(1); + $r3$.ɵɵproperty("dir", $r3$.ɵɵpureFunction1(4, $c2$, $r3$.ɵɵpureFunction0(3, $c1$))); + } + }, + encapsulation: 2 +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/object_literals_null_vs_empty.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/object_literals_null_vs_empty.ts new file mode 100644 index 0000000000..0c28e4082b --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/object_literals_null_vs_empty.ts @@ -0,0 +1,14 @@ +import {Component, NgModule} from '@angular/core'; + +@Component({ + template: ` +
+
+ ` +}) +export class MyApp { +} + +@NgModule({declarations: [MyApp]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/object_literals_null_vs_function.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/object_literals_null_vs_function.js new file mode 100644 index 0000000000..98a5a1ddff --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/object_literals_null_vs_function.js @@ -0,0 +1,22 @@ +const $c0$ = function () { return { foo: null }; }; +const $c1$ = function (a0) { return { foo: a0 }; }; +// ... +MyApp.ɵcmp = $r3$.ɵɵdefineComponent({ + type: MyApp, + selectors: [["ng-component"]], + decls: 2, + vars: 5, + consts: [[__AttributeMarker.Bindings__, "dir"]], + template: function MyApp_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵelement(0, "div", 0); + $r3$.ɵɵelement(1, "div", 0); + } + if (rf & 2) { + $r3$.ɵɵproperty("dir", $r3$.ɵɵpureFunction0(2, $c0$)); + $r3$.ɵɵadvance(1); + $r3$.ɵɵproperty("dir", $r3$.ɵɵpureFunction1(3, $c1$, ctx.getFoo())); + } + }, + encapsulation: 2 +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/object_literals_null_vs_function.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/object_literals_null_vs_function.ts new file mode 100644 index 0000000000..637560181b --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/object_literals_null_vs_function.ts @@ -0,0 +1,17 @@ +import {Component, NgModule} from '@angular/core'; + +@Component({ + template: ` +
+
+ ` +}) +export class MyApp { + getFoo() { + return 'foo!'; + } +} + +@NgModule({declarations: [MyApp]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/GOLDEN_PARTIAL.js new file mode 100644 index 0000000000..35a6a6207d --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/GOLDEN_PARTIAL.js @@ -0,0 +1,220 @@ +/**************************************************************************************************** + * PARTIAL FILE: pipes.js + ****************************************************************************************************/ +import { Component, NgModule, Pipe } from '@angular/core'; +import * as i0 from "@angular/core"; +export class MyPipe { + transform(value, ...args) { + return value; + } + ngOnDestroy() { } +} +MyPipe.ɵfac = function MyPipe_Factory(t) { return new (t || MyPipe)(); }; +MyPipe.ɵpipe = i0.ɵɵdefinePipe({ name: "myPipe", type: MyPipe, pure: false }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyPipe, [{ + type: Pipe, + args: [{ name: 'myPipe', pure: false }] + }], null, null); })(); +export class MyPurePipe { + transform(value, ...args) { + return value; + } +} +MyPurePipe.ɵfac = function MyPurePipe_Factory(t) { return new (t || MyPurePipe)(); }; +MyPurePipe.ɵpipe = i0.ɵɵdefinePipe({ name: "myPurePipe", type: MyPurePipe, pure: true }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyPurePipe, [{ + type: Pipe, + args: [{ + name: 'myPurePipe', + pure: true, + }] + }], null, null); })(); +export class MyApp { + constructor() { + this.name = 'World'; + this.size = 0; + } +} +MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); }; +MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: '{{name | myPipe:size | myPurePipe:size }}

{{ name | myPipe:1:2:3:4:5 }} {{ name ? 1 : 2 | myPipe }}

', isInline: true }, pipes: { "myPurePipe": MyPurePipe, "myPipe": MyPipe } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{ + type: Component, + args: [{ + selector: 'my-app', + template: '{{name | myPipe:size | myPurePipe:size }}

{{ name | myPipe:1:2:3:4:5 }} {{ name ? 1 : 2 | myPipe }}

' + }] + }], null, null); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyPipe, MyPurePipe, MyApp] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [MyPipe, MyPurePipe, MyApp] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: pipes.d.ts + ****************************************************************************************************/ +import { OnDestroy, PipeTransform } from '@angular/core'; +import * as i0 from "@angular/core"; +export declare class MyPipe implements PipeTransform, OnDestroy { + transform(value: any, ...args: any[]): any; + ngOnDestroy(): void; + static ɵfac: i0.ɵɵFactoryDef; + static ɵpipe: i0.ɵɵPipeDefWithMeta; +} +export declare class MyPurePipe implements PipeTransform { + transform(value: any, ...args: any[]): any; + static ɵfac: i0.ɵɵFactoryDef; + static ɵpipe: i0.ɵɵPipeDefWithMeta; +} +export declare class MyApp { + name: string; + size: number; + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + +/**************************************************************************************************** + * PARTIAL FILE: pipe_invocation.js + ****************************************************************************************************/ +import { Component, NgModule, Pipe } from '@angular/core'; +import * as i0 from "@angular/core"; +export class MyPipe { + transform(value, ...args) { + return value; + } + ngOnDestroy() { } +} +MyPipe.ɵfac = function MyPipe_Factory(t) { return new (t || MyPipe)(); }; +MyPipe.ɵpipe = i0.ɵɵdefinePipe({ name: "myPipe", type: MyPipe, pure: false }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyPipe, [{ + type: Pipe, + args: [{ name: 'myPipe', pure: false }] + }], null, null); })(); +export class MyApp { +} +MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); }; +MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: '0:{{name | myPipe}}1:{{name | myPipe:1}}2:{{name | myPipe:1:2}}3:{{name | myPipe:1:2:3}}4:{{name | myPipe:1:2:3:4}}', isInline: true }, pipes: { "myPipe": MyPipe } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{ + type: Component, + args: [{ + selector: 'my-app', + template: '0:{{name | myPipe}}1:{{name | myPipe:1}}2:{{name | myPipe:1:2}}3:{{name | myPipe:1:2:3}}4:{{name | myPipe:1:2:3:4}}' + }] + }], null, null); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyPipe, MyApp] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [MyPipe, MyApp] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: pipe_invocation.d.ts + ****************************************************************************************************/ +import { OnDestroy, PipeTransform } from '@angular/core'; +import * as i0 from "@angular/core"; +export declare class MyPipe implements PipeTransform, OnDestroy { + transform(value: any, ...args: any[]): any; + ngOnDestroy(): void; + static ɵfac: i0.ɵɵFactoryDef; + static ɵpipe: i0.ɵɵPipeDefWithMeta; +} +export declare class MyApp { + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + +/**************************************************************************************************** + * PARTIAL FILE: pipe_di_change_detector_ref.js + ****************************************************************************************************/ +import { ChangeDetectorRef, Component, NgModule, Optional, Pipe } from '@angular/core'; +import * as i0 from "@angular/core"; +export class MyPipe { + constructor(changeDetectorRef) { } + transform(value, ...args) { + return value; + } +} +MyPipe.ɵfac = function MyPipe_Factory(t) { return new (t || MyPipe)(i0.ɵɵinjectPipeChangeDetectorRef()); }; +MyPipe.ɵpipe = i0.ɵɵdefinePipe({ name: "myPipe", type: MyPipe, pure: true }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyPipe, [{ + type: Pipe, + args: [{ name: 'myPipe' }] + }], function () { return [{ type: i0.ChangeDetectorRef }]; }, null); })(); +export class MyOtherPipe { + constructor(changeDetectorRef) { } + transform(value, ...args) { + return value; + } +} +MyOtherPipe.ɵfac = function MyOtherPipe_Factory(t) { return new (t || MyOtherPipe)(i0.ɵɵinjectPipeChangeDetectorRef(8)); }; +MyOtherPipe.ɵpipe = i0.ɵɵdefinePipe({ name: "myOtherPipe", type: MyOtherPipe, pure: true }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyOtherPipe, [{ + type: Pipe, + args: [{ name: 'myOtherPipe' }] + }], function () { return [{ type: i0.ChangeDetectorRef, decorators: [{ + type: Optional + }] }]; }, null); })(); +export class MyApp { + constructor() { + this.name = 'World'; + } +} +MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); }; +MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: '{{name | myPipe }}

{{ name | myOtherPipe }}

', isInline: true }, pipes: { "myPipe": MyPipe, "myOtherPipe": MyOtherPipe } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{ + type: Component, + args: [{ selector: 'my-app', template: '{{name | myPipe }}

{{ name | myOtherPipe }}

' }] + }], null, null); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyPipe, MyOtherPipe, MyApp] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [MyPipe, MyOtherPipe, MyApp] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: pipe_di_change_detector_ref.d.ts + ****************************************************************************************************/ +import { ChangeDetectorRef, PipeTransform } from '@angular/core'; +import * as i0 from "@angular/core"; +export declare class MyPipe implements PipeTransform { + constructor(changeDetectorRef: ChangeDetectorRef); + transform(value: any, ...args: any[]): any; + static ɵfac: i0.ɵɵFactoryDef; + static ɵpipe: i0.ɵɵPipeDefWithMeta; +} +export declare class MyOtherPipe implements PipeTransform { + constructor(changeDetectorRef: ChangeDetectorRef); + transform(value: any, ...args: any[]): any; + static ɵfac: i0.ɵɵFactoryDef; + static ɵpipe: i0.ɵɵPipeDefWithMeta; +} +export declare class MyApp { + name: string; + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/TEST_CASES.json b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/TEST_CASES.json new file mode 100644 index 0000000000..c8858a2eea --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/TEST_CASES.json @@ -0,0 +1,116 @@ +{ + "$schema": "../../../test_case_schema.json", + "cases": [ + { + "description": "should render pipes", + "inputFiles": [ + "pipes.ts" + ], + "expectations": [ + { + "failureMessage": "Invalid pipe definition", + "files": [ + { + "expected": "pipes_my_pipe_def.js", + "generated": "pipes.js" + } + ] + }, + { + "failureMessage": "Invalid pipe factory function", + "files": [ + { + "expected": "pipes_my_pipe_fac.js", + "generated": "pipes.js" + } + ] + }, + { + "failureMessage": "Invalid pure pipe definition", + "files": [ + { + "expected": "pipes_my_pure_pipe_def.js", + "generated": "pipes.js" + } + ] + }, + { + "failureMessage": "Invalid pure pipe factory function", + "files": [ + { + "expected": "pipes_my_pure_pipe_fac.js", + "generated": "pipes.js" + } + ] + }, + { + "failureMessage": "Invalid MyApp definition", + "files": [ + { + "expected": "pipes_my_app_def.js", + "generated": "pipes.js" + } + ] + } + ] + }, + { + "description": "should use appropriate function for a given no of pipe arguments", + "inputFiles": [ + "pipe_invocation.ts" + ], + "expectations": [ + { + "failureMessage": "Invalid MyApp definition", + "files": [ + "pipe_invocation.js" + ] + } + ] + }, + { + "description": "should generate the proper instruction when injecting ChangeDetectorRef into a pipe", + "inputFiles": [ + "pipe_di_change_detector_ref.ts" + ], + "expectations": [ + { + "failureMessage": "Invalid pipe definition", + "files": [ + { + "expected": "pipe_di_change_detector_ref_my_pipe_def.js", + "generated": "pipe_di_change_detector_ref.js" + } + ] + }, + { + "failureMessage": "Invalid pipe factory function", + "files": [ + { + "expected": "pipe_di_change_detector_ref_my_pipe_fac.js", + "generated": "pipe_di_change_detector_ref.js" + } + ] + }, + { + "failureMessage": "Invalid alternate pipe definition", + "files": [ + { + "expected": "pipe_di_change_detector_ref_my_other_pipe_def.js", + "generated": "pipe_di_change_detector_ref.js" + } + ] + }, + { + "failureMessage": "Invalid alternate pipe factory function", + "files": [ + { + "expected": "pipe_di_change_detector_ref_my_other_pipe_fac.js", + "generated": "pipe_di_change_detector_ref.js" + } + ] + } + ] + } + ] +} \ No newline at end of file diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_di_change_detector_ref.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_di_change_detector_ref.ts new file mode 100644 index 0000000000..b366d54980 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_di_change_detector_ref.ts @@ -0,0 +1,28 @@ +import {ChangeDetectorRef, Component, NgModule, Optional, Pipe, PipeTransform} from '@angular/core'; + +@Pipe({name: 'myPipe'}) +export class MyPipe implements PipeTransform { + constructor(changeDetectorRef: ChangeDetectorRef) {} + + transform(value: any, ...args: any[]) { + return value; + } +} + +@Pipe({name: 'myOtherPipe'}) +export class MyOtherPipe implements PipeTransform { + constructor(@Optional() changeDetectorRef: ChangeDetectorRef) {} + + transform(value: any, ...args: any[]) { + return value; + } +} + +@Component({selector: 'my-app', template: '{{name | myPipe }}

{{ name | myOtherPipe }}

'}) +export class MyApp { + name = 'World'; +} + +@NgModule({declarations: [MyPipe, MyOtherPipe, MyApp]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_di_change_detector_ref_my_other_pipe_def.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_di_change_detector_ref_my_other_pipe_def.js new file mode 100644 index 0000000000..27a602a152 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_di_change_detector_ref_my_other_pipe_def.js @@ -0,0 +1,5 @@ +MyOtherPipe.ɵpipe = $r3$.ɵɵdefinePipe({ + name: "myOtherPipe", + type: MyOtherPipe, + pure: true +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_di_change_detector_ref_my_other_pipe_fac.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_di_change_detector_ref_my_other_pipe_fac.js new file mode 100644 index 0000000000..e858b8160a --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_di_change_detector_ref_my_other_pipe_fac.js @@ -0,0 +1 @@ +MyOtherPipe.ɵfac = function MyOtherPipe_Factory(t) { return new (t || MyOtherPipe)($r3$.ɵɵinjectPipeChangeDetectorRef(8)); }; diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_di_change_detector_ref_my_pipe_def.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_di_change_detector_ref_my_pipe_def.js new file mode 100644 index 0000000000..1978a4c76a --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_di_change_detector_ref_my_pipe_def.js @@ -0,0 +1,5 @@ +MyPipe.ɵpipe = $r3$.ɵɵdefinePipe({ + name: "myPipe", + type: MyPipe, + pure: true +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_di_change_detector_ref_my_pipe_fac.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_di_change_detector_ref_my_pipe_fac.js new file mode 100644 index 0000000000..9b12d4d695 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_di_change_detector_ref_my_pipe_fac.js @@ -0,0 +1 @@ +MyPipe.ɵfac = function MyPipe_Factory(t) { return new (t || MyPipe)($r3$.ɵɵinjectPipeChangeDetectorRef()); }; diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_invocation.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_invocation.js new file mode 100644 index 0000000000..69a3042d7d --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_invocation.js @@ -0,0 +1,29 @@ +// ... +MyApp.ɵcmp = $r3$.ɵɵdefineComponent({ + type: MyApp, + selectors: [["my-app"]], + decls: 6, + vars: 27, + template: function MyApp_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵtext(0); + $r3$.ɵɵpipe(1, "myPipe"); + $r3$.ɵɵpipe(2, "myPipe"); + $r3$.ɵɵpipe(3, "myPipe"); + $r3$.ɵɵpipe(4, "myPipe"); + $r3$.ɵɵpipe(5, "myPipe"); + } + if (rf & 2) { + $r3$.ɵɵtextInterpolate5( + "0:", i0.ɵɵpipeBind1(1, 5, ctx.name), + "1:", i0.ɵɵpipeBind2(2, 7, ctx.name, 1), + "2:", i0.ɵɵpipeBind3(3, 10, ctx.name, 1, 2), + "3:", i0.ɵɵpipeBind4(4, 14, ctx.name, 1, 2, 3), + "4:", i0.ɵɵpipeBindV(5, 19, $r3$.ɵɵpureFunction1(25, $c0$, ctx.name)), + "" + ); + } + }, + pipes: [MyPipe], + encapsulation: 2 +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_invocation.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_invocation.ts new file mode 100644 index 0000000000..607de19903 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_invocation.ts @@ -0,0 +1,21 @@ +import {Component, NgModule, OnDestroy, Pipe, PipeTransform} from '@angular/core'; + +@Pipe({name: 'myPipe', pure: false}) +export class MyPipe implements PipeTransform, OnDestroy { + transform(value: any, ...args: any[]) { + return value; + } + ngOnDestroy(): void {} +} + +@Component({ + selector: 'my-app', + template: + '0:{{name | myPipe}}1:{{name | myPipe:1}}2:{{name | myPipe:1:2}}3:{{name | myPipe:1:2:3}}4:{{name | myPipe:1:2:3:4}}' +}) +export class MyApp { +} + +@NgModule({declarations: [MyPipe, MyApp]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes.ts new file mode 100644 index 0000000000..4dc48a80c1 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes.ts @@ -0,0 +1,33 @@ +import {Component, NgModule, OnDestroy, Pipe, PipeTransform} from '@angular/core'; + +@Pipe({name: 'myPipe', pure: false}) +export class MyPipe implements PipeTransform, OnDestroy { + transform(value: any, ...args: any[]) { + return value; + } + ngOnDestroy(): void {} +} + +@Pipe({ + name: 'myPurePipe', + pure: true, +}) +export class MyPurePipe implements PipeTransform { + transform(value: any, ...args: any[]) { + return value; + } +} + +@Component({ + selector: 'my-app', + template: + '{{name | myPipe:size | myPurePipe:size }}

{{ name | myPipe:1:2:3:4:5 }} {{ name ? 1 : 2 | myPipe }}

' +}) +export class MyApp { + name = 'World'; + size = 0; +} + +@NgModule({declarations: [MyPipe, MyPurePipe, MyApp]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes_my_app_def.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes_my_app_def.js new file mode 100644 index 0000000000..fb780dac4c --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes_my_app_def.js @@ -0,0 +1,29 @@ +const $c0$ = function ($a0$) { + return [$a0$, 1, 2, 3, 4, 5]; +}; +// ... +MyApp.ɵcmp = $r3$.ɵɵdefineComponent({ + type: MyApp, + selectors: [["my-app"]], + decls: 7, + vars: 20, + template: function MyApp_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵtext(0); + $r3$.ɵɵpipe(1, "myPurePipe"); + $r3$.ɵɵpipe(2, "myPipe"); + $r3$.ɵɵelementStart(3, "p"); + $r3$.ɵɵtext(4); + $r3$.ɵɵpipe(5, "myPipe"); + $r3$.ɵɵpipe(6, "myPipe"); + $r3$.ɵɵelementEnd(); + } + if (rf & 2) { + $r3$.ɵɵtextInterpolate($r3$.ɵɵpipeBind2(1, 3, $r3$.ɵɵpipeBind2(2, 6, ctx.name, ctx.size), ctx.size)); + $r3$.ɵɵadvance(4); + $r3$.ɵɵtextInterpolate2("", $r3$.ɵɵpipeBindV(5, 9, $r3$.ɵɵpureFunction1(18, $c0$, ctx.name)), " ", ctx.name ? 1 : $r3$.ɵɵpipeBind1(6, 16, 2), ""); + } + }, + pipes: [MyPurePipe, MyPipe], + encapsulation: 2 +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes_my_pipe_def.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes_my_pipe_def.js new file mode 100644 index 0000000000..534234eedf --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes_my_pipe_def.js @@ -0,0 +1,5 @@ +MyPipe.ɵpipe = $r3$.ɵɵdefinePipe({ + name: "myPipe", + type: MyPipe, + pure: false +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes_my_pipe_fac.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes_my_pipe_fac.js new file mode 100644 index 0000000000..b09691cc3d --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes_my_pipe_fac.js @@ -0,0 +1 @@ +MyPipe.ɵfac = function MyPipe_Factory(t) { return new (t || MyPipe)(); }; diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes_my_pure_pipe_def.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes_my_pure_pipe_def.js new file mode 100644 index 0000000000..5404b2f6e5 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes_my_pure_pipe_def.js @@ -0,0 +1,5 @@ +MyPurePipe.ɵpipe = $r3$.ɵɵdefinePipe({ + name: "myPurePipe", + type: MyPurePipe, + pure: true +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes_my_pure_pipe_fac.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes_my_pure_pipe_fac.js new file mode 100644 index 0000000000..d0b57410cf --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes_my_pure_pipe_fac.js @@ -0,0 +1 @@ +MyPurePipe.ɵfac = function MyPurePipe_Factory(t) { return new (t || MyPurePipe)(); }; diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/GOLDEN_PARTIAL.js new file mode 100644 index 0000000000..4d6dc7b995 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/GOLDEN_PARTIAL.js @@ -0,0 +1,654 @@ +/**************************************************************************************************** + * PARTIAL FILE: some.directive.js + ****************************************************************************************************/ +import { Directive } from '@angular/core'; +import * as i0 from "@angular/core"; +export class SomeDirective { +} +SomeDirective.ɵfac = function SomeDirective_Factory(t) { return new (t || SomeDirective)(); }; +SomeDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: SomeDirective, selector: "[someDir]", ngImport: i0 }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SomeDirective, [{ + type: Directive, + args: [{ + selector: '[someDir]', + }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: some.directive.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class SomeDirective { + static ɵfac: i0.ɵɵFactoryDef; + static ɵdir: i0.ɵɵDirectiveDefWithMeta; +} + +/**************************************************************************************************** + * PARTIAL FILE: view_query_for_directive.js + ****************************************************************************************************/ +import { Component, NgModule, ViewChild, ViewChildren } from '@angular/core'; +import { SomeDirective } from './some.directive'; +import * as i0 from "@angular/core"; +export class ViewQueryComponent { +} +ViewQueryComponent.ɵfac = function ViewQueryComponent_Factory(t) { return new (t || ViewQueryComponent)(); }; +ViewQueryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: ViewQueryComponent, selector: "view-query-component", viewQueries: [{ propertyName: "someDir", first: true, predicate: SomeDirective, descendants: true }, { propertyName: "someDirs", predicate: SomeDirective, descendants: true }], ngImport: i0, template: { source: ` +
+ `, isInline: true }, directives: [{ type: function () { return SomeDirective; }, selector: "[someDir]" }] }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ViewQueryComponent, [{ + type: Component, + args: [{ + selector: 'view-query-component', + template: ` +
+ ` + }] + }], null, { someDir: [{ + type: ViewChild, + args: [SomeDirective] + }], someDirs: [{ + type: ViewChildren, + args: [SomeDirective] + }] }); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [SomeDirective, ViewQueryComponent] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [SomeDirective, ViewQueryComponent] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: view_query_for_directive.d.ts + ****************************************************************************************************/ +import { QueryList } from '@angular/core'; +import { SomeDirective } from './some.directive'; +import * as i0 from "@angular/core"; +import * as i1 from "./some.directive"; +export declare class ViewQueryComponent { + someDir: SomeDirective; + someDirs: QueryList; + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + +/**************************************************************************************************** + * PARTIAL FILE: view_query_for_local_ref.js + ****************************************************************************************************/ +import { Component, NgModule, ViewChild, ViewChildren } from '@angular/core'; +import * as i0 from "@angular/core"; +export class ViewQueryComponent { +} +ViewQueryComponent.ɵfac = function ViewQueryComponent_Factory(t) { return new (t || ViewQueryComponent)(); }; +ViewQueryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: ViewQueryComponent, selector: "view-query-component", viewQueries: [{ propertyName: "myRef", first: true, predicate: ["myRef"], descendants: true }, { propertyName: "myRefs", predicate: ["myRef1, myRef2, myRef3"], descendants: true }], ngImport: i0, template: { source: ` +
+
+ `, isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ViewQueryComponent, [{ + type: Component, + args: [{ + selector: 'view-query-component', + template: ` +
+
+ ` + }] + }], null, { myRef: [{ + type: ViewChild, + args: ['myRef'] + }], myRefs: [{ + type: ViewChildren, + args: ['myRef1, myRef2, myRef3'] + }] }); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [ViewQueryComponent] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [ViewQueryComponent] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: view_query_for_local_ref.d.ts + ****************************************************************************************************/ +import { QueryList } from '@angular/core'; +import * as i0 from "@angular/core"; +export declare class ViewQueryComponent { + myRef: any; + myRefs: QueryList; + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + +/**************************************************************************************************** + * PARTIAL FILE: some.directive.js + ****************************************************************************************************/ +import { Directive } from '@angular/core'; +import * as i0 from "@angular/core"; +export class SomeDirective { +} +SomeDirective.ɵfac = function SomeDirective_Factory(t) { return new (t || SomeDirective)(); }; +SomeDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: SomeDirective, selector: "[someDir]", ngImport: i0 }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SomeDirective, [{ + type: Directive, + args: [{ + selector: '[someDir]', + }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: some.directive.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class SomeDirective { + static ɵfac: i0.ɵɵFactoryDef; + static ɵdir: i0.ɵɵDirectiveDefWithMeta; +} + +/**************************************************************************************************** + * PARTIAL FILE: static_view_query.js + ****************************************************************************************************/ +import { Component, ElementRef, NgModule, ViewChild } from '@angular/core'; +import { SomeDirective } from './some.directive'; +import * as i0 from "@angular/core"; +export class ViewQueryComponent { +} +ViewQueryComponent.ɵfac = function ViewQueryComponent_Factory(t) { return new (t || ViewQueryComponent)(); }; +ViewQueryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: ViewQueryComponent, selector: "view-query-component", viewQueries: [{ propertyName: "someDir", first: true, predicate: SomeDirective, descendants: true, static: true }, { propertyName: "foo", first: true, predicate: ["foo"], descendants: true }], ngImport: i0, template: { source: ` +
+ `, isInline: true }, directives: [{ type: function () { return SomeDirective; }, selector: "[someDir]" }] }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ViewQueryComponent, [{ + type: Component, + args: [{ + selector: 'view-query-component', + template: ` +
+ ` + }] + }], null, { someDir: [{ + type: ViewChild, + args: [SomeDirective, { static: true }] + }], foo: [{ + type: ViewChild, + args: ['foo'] + }] }); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [SomeDirective, ViewQueryComponent] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [SomeDirective, ViewQueryComponent] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: static_view_query.d.ts + ****************************************************************************************************/ +import { ElementRef } from '@angular/core'; +import { SomeDirective } from './some.directive'; +import * as i0 from "@angular/core"; +import * as i1 from "./some.directive"; +export declare class ViewQueryComponent { + someDir: SomeDirective; + foo: ElementRef; + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + +/**************************************************************************************************** + * PARTIAL FILE: some.directive.js + ****************************************************************************************************/ +import { Directive } from '@angular/core'; +import * as i0 from "@angular/core"; +export class SomeDirective { +} +SomeDirective.ɵfac = function SomeDirective_Factory(t) { return new (t || SomeDirective)(); }; +SomeDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: SomeDirective, selector: "[someDir]", ngImport: i0 }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SomeDirective, [{ + type: Directive, + args: [{ + selector: '[someDir]', + }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: some.directive.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class SomeDirective { + static ɵfac: i0.ɵɵFactoryDef; + static ɵdir: i0.ɵɵDirectiveDefWithMeta; +} + +/**************************************************************************************************** + * PARTIAL FILE: view_query_read_token.js + ****************************************************************************************************/ +import { Component, ElementRef, NgModule, TemplateRef, ViewChild, ViewChildren } from '@angular/core'; +import { SomeDirective } from './some.directive'; +import * as i0 from "@angular/core"; +export class ViewQueryComponent { +} +ViewQueryComponent.ɵfac = function ViewQueryComponent_Factory(t) { return new (t || ViewQueryComponent)(); }; +ViewQueryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: ViewQueryComponent, selector: "view-query-component", viewQueries: [{ propertyName: "myRef", first: true, predicate: ["myRef"], descendants: true, read: TemplateRef }, { propertyName: "someDir", first: true, predicate: SomeDirective, descendants: true, read: ElementRef }, { propertyName: "myRefs", predicate: ["myRef1, myRef2, myRef3"], descendants: true, read: ElementRef }, { propertyName: "someDirs", predicate: SomeDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: { source: ` +
+
+
+ `, isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ViewQueryComponent, [{ + type: Component, + args: [{ + selector: 'view-query-component', + template: ` +
+
+
+ ` + }] + }], null, { myRef: [{ + type: ViewChild, + args: ['myRef', { read: TemplateRef }] + }], myRefs: [{ + type: ViewChildren, + args: ['myRef1, myRef2, myRef3', { read: ElementRef }] + }], someDir: [{ + type: ViewChild, + args: [SomeDirective, { read: ElementRef }] + }], someDirs: [{ + type: ViewChildren, + args: [SomeDirective, { read: TemplateRef }] + }] }); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [ViewQueryComponent] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [ViewQueryComponent] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: view_query_read_token.d.ts + ****************************************************************************************************/ +import { ElementRef, QueryList, TemplateRef } from '@angular/core'; +import * as i0 from "@angular/core"; +export declare class ViewQueryComponent { + myRef: TemplateRef; + myRefs: QueryList; + someDir: ElementRef; + someDirs: QueryList>; + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + +/**************************************************************************************************** + * PARTIAL FILE: some.directive.js + ****************************************************************************************************/ +import { Directive } from '@angular/core'; +import * as i0 from "@angular/core"; +export class SomeDirective { +} +SomeDirective.ɵfac = function SomeDirective_Factory(t) { return new (t || SomeDirective)(); }; +SomeDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: SomeDirective, selector: "[someDir]", ngImport: i0 }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SomeDirective, [{ + type: Directive, + args: [{ + selector: '[someDir]', + }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: some.directive.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class SomeDirective { + static ɵfac: i0.ɵɵFactoryDef; + static ɵdir: i0.ɵɵDirectiveDefWithMeta; +} + +/**************************************************************************************************** + * PARTIAL FILE: content_query_for_directive.js + ****************************************************************************************************/ +import { Component, ContentChild, ContentChildren, NgModule } from '@angular/core'; +import { SomeDirective } from './some.directive'; +import * as i0 from "@angular/core"; +export class ContentQueryComponent { +} +ContentQueryComponent.ɵfac = function ContentQueryComponent_Factory(t) { return new (t || ContentQueryComponent)(); }; +ContentQueryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: ContentQueryComponent, selector: "content-query-component", queries: [{ propertyName: "someDir", first: true, predicate: SomeDirective, descendants: true }, { propertyName: "someDirList", predicate: SomeDirective }], ngImport: i0, template: { source: ` +
+ `, isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ContentQueryComponent, [{ + type: Component, + args: [{ + selector: 'content-query-component', + template: ` +
+ ` + }] + }], null, { someDir: [{ + type: ContentChild, + args: [SomeDirective] + }], someDirList: [{ + type: ContentChildren, + args: [SomeDirective] + }] }); })(); +export class MyApp { +} +MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); }; +MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: ` + +
+ + `, isInline: true }, directives: [{ type: function () { return ContentQueryComponent; }, selector: "content-query-component" }, { type: function () { return SomeDirective; }, selector: "[someDir]" }] }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{ + type: Component, + args: [{ + selector: 'my-app', + template: ` + +
+ + ` + }] + }], null, null); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [SomeDirective, ContentQueryComponent, MyApp] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [SomeDirective, ContentQueryComponent, MyApp] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: content_query_for_directive.d.ts + ****************************************************************************************************/ +import { QueryList } from '@angular/core'; +import { SomeDirective } from './some.directive'; +import * as i0 from "@angular/core"; +import * as i1 from "./some.directive"; +export declare class ContentQueryComponent { + someDir: SomeDirective; + someDirList: QueryList; + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyApp { + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + +/**************************************************************************************************** + * PARTIAL FILE: content_query_for_local_ref.js + ****************************************************************************************************/ +import { Component, ContentChild, ContentChildren, NgModule } from '@angular/core'; +import * as i0 from "@angular/core"; +export class ContentQueryComponent { +} +ContentQueryComponent.ɵfac = function ContentQueryComponent_Factory(t) { return new (t || ContentQueryComponent)(); }; +ContentQueryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: ContentQueryComponent, selector: "content-query-component", queries: [{ propertyName: "myRef", first: true, predicate: ["myRef"], descendants: true }, { propertyName: "myRefs", predicate: ["myRef1, myRef2, myRef3"] }], ngImport: i0, template: { source: ` +
+
+ `, isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ContentQueryComponent, [{ + type: Component, + args: [{ + selector: 'content-query-component', + template: ` +
+
+ ` + }] + }], null, { myRef: [{ + type: ContentChild, + args: ['myRef'] + }], myRefs: [{ + type: ContentChildren, + args: ['myRef1, myRef2, myRef3'] + }] }); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [ContentQueryComponent] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [ContentQueryComponent] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: content_query_for_local_ref.d.ts + ****************************************************************************************************/ +import { QueryList } from '@angular/core'; +import * as i0 from "@angular/core"; +export declare class ContentQueryComponent { + myRef: any; + myRefs: QueryList; + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + +/**************************************************************************************************** + * PARTIAL FILE: some.directive.js + ****************************************************************************************************/ +import { Directive } from '@angular/core'; +import * as i0 from "@angular/core"; +export class SomeDirective { +} +SomeDirective.ɵfac = function SomeDirective_Factory(t) { return new (t || SomeDirective)(); }; +SomeDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: SomeDirective, selector: "[someDir]", ngImport: i0 }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SomeDirective, [{ + type: Directive, + args: [{ + selector: '[someDir]', + }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: some.directive.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class SomeDirective { + static ɵfac: i0.ɵɵFactoryDef; + static ɵdir: i0.ɵɵDirectiveDefWithMeta; +} + +/**************************************************************************************************** + * PARTIAL FILE: static_content_query.js + ****************************************************************************************************/ +import { Component, ContentChild, ElementRef, NgModule } from '@angular/core'; +import { SomeDirective } from './some.directive'; +import * as i0 from "@angular/core"; +export class ContentQueryComponent { +} +ContentQueryComponent.ɵfac = function ContentQueryComponent_Factory(t) { return new (t || ContentQueryComponent)(); }; +ContentQueryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: ContentQueryComponent, selector: "content-query-component", queries: [{ propertyName: "someDir", first: true, predicate: SomeDirective, descendants: true, static: true }, { propertyName: "foo", first: true, predicate: ["foo"], descendants: true }], ngImport: i0, template: { source: ` +
+ `, isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ContentQueryComponent, [{ + type: Component, + args: [{ + selector: 'content-query-component', + template: ` +
+ ` + }] + }], null, { someDir: [{ + type: ContentChild, + args: [SomeDirective, { static: true }] + }], foo: [{ + type: ContentChild, + args: ['foo'] + }] }); })(); +export class MyApp { +} +MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); }; +MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: ` + +
+ + `, isInline: true }, directives: [{ type: function () { return ContentQueryComponent; }, selector: "content-query-component" }, { type: function () { return SomeDirective; }, selector: "[someDir]" }] }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{ + type: Component, + args: [{ + selector: 'my-app', + template: ` + +
+ + ` + }] + }], null, null); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [SomeDirective, ContentQueryComponent, MyApp] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [SomeDirective, ContentQueryComponent, MyApp] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: static_content_query.d.ts + ****************************************************************************************************/ +import { ElementRef } from '@angular/core'; +import { SomeDirective } from './some.directive'; +import * as i0 from "@angular/core"; +import * as i1 from "./some.directive"; +export declare class ContentQueryComponent { + someDir: SomeDirective; + foo: ElementRef; + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyApp { + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + +/**************************************************************************************************** + * PARTIAL FILE: some.directive.js + ****************************************************************************************************/ +import { Directive } from '@angular/core'; +import * as i0 from "@angular/core"; +export class SomeDirective { +} +SomeDirective.ɵfac = function SomeDirective_Factory(t) { return new (t || SomeDirective)(); }; +SomeDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: SomeDirective, selector: "[someDir]", ngImport: i0 }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SomeDirective, [{ + type: Directive, + args: [{ + selector: '[someDir]', + }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: some.directive.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class SomeDirective { + static ɵfac: i0.ɵɵFactoryDef; + static ɵdir: i0.ɵɵDirectiveDefWithMeta; +} + +/**************************************************************************************************** + * PARTIAL FILE: content_query_read_token.js + ****************************************************************************************************/ +import { Component, ContentChild, ContentChildren, ElementRef, NgModule, TemplateRef } from '@angular/core'; +import { SomeDirective } from './some.directive'; +import * as i0 from "@angular/core"; +export class ContentQueryComponent { +} +ContentQueryComponent.ɵfac = function ContentQueryComponent_Factory(t) { return new (t || ContentQueryComponent)(); }; +ContentQueryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: ContentQueryComponent, selector: "content-query-component", queries: [{ propertyName: "myRef", first: true, predicate: ["myRef"], descendants: true, read: TemplateRef }, { propertyName: "someDir", first: true, predicate: SomeDirective, descendants: true, read: ElementRef }, { propertyName: "myRefs", predicate: ["myRef1, myRef2, myRef3"], read: ElementRef }, { propertyName: "someDirs", predicate: SomeDirective, read: TemplateRef }], ngImport: i0, template: { source: ` +
+
+
+ `, isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ContentQueryComponent, [{ + type: Component, + args: [{ + selector: 'content-query-component', + template: ` +
+
+
+ ` + }] + }], null, { myRef: [{ + type: ContentChild, + args: ['myRef', { read: TemplateRef }] + }], myRefs: [{ + type: ContentChildren, + args: ['myRef1, myRef2, myRef3', { read: ElementRef }] + }], someDir: [{ + type: ContentChild, + args: [SomeDirective, { read: ElementRef }] + }], someDirs: [{ + type: ContentChildren, + args: [SomeDirective, { read: TemplateRef }] + }] }); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [ContentQueryComponent] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [ContentQueryComponent] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: content_query_read_token.d.ts + ****************************************************************************************************/ +import { ElementRef, QueryList, TemplateRef } from '@angular/core'; +import * as i0 from "@angular/core"; +export declare class ContentQueryComponent { + myRef: TemplateRef; + myRefs: QueryList; + someDir: ElementRef; + someDirs: QueryList>; + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/TEST_CASES.json b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/TEST_CASES.json new file mode 100644 index 0000000000..dc986ab61e --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/TEST_CASES.json @@ -0,0 +1,123 @@ +{ + "$schema": "../../../test_case_schema.json", + "cases": [ + { + "description": "should support view queries with directives", + "inputFiles": [ + "some.directive.ts", + "view_query_for_directive.ts" + ], + "expectations": [ + { + "failureMessage": "Invalid ViewQuery declaration", + "files": [ + "view_query_for_directive.js" + ] + } + ] + }, + { + "description": "should support view queries with local refs", + "inputFiles": [ + "view_query_for_local_ref.ts" + ], + "expectations": [ + { + "failureMessage": "Invalid ViewQuery declaration", + "files": [ + "view_query_for_local_ref.js" + ] + } + ] + }, + { + "description": "should support static view queries", + "inputFiles": [ + "some.directive.ts", + "static_view_query.ts" + ], + "expectations": [ + { + "failureMessage": "Invalid ViewQuery declaration", + "files": [ + "static_view_query.js" + ] + } + ] + }, + { + "description": "should support view queries with read tokens specified", + "inputFiles": [ + "some.directive.ts", + "view_query_read_token.ts" + ], + "expectations": [ + { + "failureMessage": "Invalid ViewQuery declaration", + "files": [ + "view_query_read_token.js" + ] + } + ] + }, + { + "description": "should support content queries with directives", + "inputFiles": [ + "some.directive.ts", + "content_query_for_directive.ts" + ], + "expectations": [ + { + "failureMessage": "Invalid ContentQuery declaration", + "files": [ + "content_query_for_directive.js" + ] + } + ] + }, + { + "description": "should support content queries with local refs", + "inputFiles": [ + "content_query_for_local_ref.ts" + ], + "expectations": [ + { + "failureMessage": "Invalid ContentQuery declaration", + "files": [ + "content_query_for_local_ref.js" + ] + } + ] + }, + { + "description": "should support static content queries", + "inputFiles": [ + "some.directive.ts", + "static_content_query.ts" + ], + "expectations": [ + { + "failureMessage": "Invalid ContentQuery declaration", + "files": [ + "static_content_query.js" + ] + } + ] + }, + { + "description": "should support content queries with read tokens specified", + "inputFiles": [ + "some.directive.ts", + "content_query_read_token.ts" + ], + "expectations": [ + { + "failureMessage": "Invalid ContentQuery declaration", + "files": [ + "content_query_read_token.js" + ] + } + ] + } + ] +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_for_directive.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_for_directive.js new file mode 100644 index 0000000000..536faeef07 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_for_directive.js @@ -0,0 +1,27 @@ +ContentQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({ + type: ContentQueryComponent, + selectors: [["content-query-component"]], + contentQueries: function ContentQueryComponent_ContentQueries(rf, ctx, dirIndex) { + if (rf & 1) { + $r3$.ɵɵcontentQuery(dirIndex, SomeDirective, true); + $r3$.ɵɵcontentQuery(dirIndex, SomeDirective, false); + } + if (rf & 2) { + let $tmp$; + $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.someDir = $tmp$.first); + $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.someDirList = $tmp$); + } + }, + ngContentSelectors: _c0, + decls: 2, + vars: 0, + template: function ContentQueryComponent_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵprojectionDef(); + $r3$.ɵɵelementStart(0, "div"); + $r3$.ɵɵprojection(1); + $r3$.ɵɵelementEnd(); + } + }, + encapsulation: 2 +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_for_directive.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_for_directive.ts new file mode 100644 index 0000000000..9e8a1b745c --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_for_directive.ts @@ -0,0 +1,28 @@ +import {Component, ContentChild, ContentChildren, NgModule, QueryList} from '@angular/core'; +import {SomeDirective} from './some.directive'; + +@Component({ + selector: 'content-query-component', + template: ` +
+ ` +}) +export class ContentQueryComponent { + @ContentChild(SomeDirective) someDir!: SomeDirective; + @ContentChildren(SomeDirective) someDirList!: QueryList; +} + +@Component({ + selector: 'my-app', + template: ` + +
+ + ` +}) +export class MyApp { +} + +@NgModule({declarations: [SomeDirective, ContentQueryComponent, MyApp]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_for_local_ref.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_for_local_ref.js new file mode 100644 index 0000000000..bf5c990ccb --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_for_local_ref.js @@ -0,0 +1,18 @@ +const $e0_attrs$ = ["myRef"]; +const $e1_attrs$ = ["myRef1", "myRef2", "myRef3"]; +// ... +ContentQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({ + // ... + contentQueries: function ContentQueryComponent_ContentQueries(rf, ctx, dirIndex) { + if (rf & 1) { + $r3$.ɵɵcontentQuery(dirIndex, $e0_attrs$, true); + $r3$.ɵɵcontentQuery(dirIndex, $e1_attrs$, false); + } + if (rf & 2) { + let $tmp$; + $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.myRef = $tmp$.first); + $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.myRefs = $tmp$); + } + }, + // ... +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_for_local_ref.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_for_local_ref.ts new file mode 100644 index 0000000000..1d7298dcc7 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_for_local_ref.ts @@ -0,0 +1,16 @@ +import {Component, ContentChild, ContentChildren, NgModule, QueryList} from '@angular/core'; + +@Component({ + selector: 'content-query-component', + template: ` +
+
+ ` +}) +export class ContentQueryComponent { + @ContentChild('myRef') myRef: any; + @ContentChildren('myRef1, myRef2, myRef3') myRefs!: QueryList; +} +@NgModule({declarations: [ContentQueryComponent]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_read_token.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_read_token.js new file mode 100644 index 0000000000..914ea33161 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_read_token.js @@ -0,0 +1,22 @@ +const $e0_attrs$ = ["myRef"]; +const $e1_attrs$ = ["myRef1", "myRef2", "myRef3"]; +// ... +ContentQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({ + // ... + contentQueries: function ContentQueryComponent_ContentQueries(rf, ctx, dirIndex) { + if (rf & 1) { + $r3$.ɵɵcontentQuery(dirIndex, $e0_attrs$, true, TemplateRef); + $r3$.ɵɵcontentQuery(dirIndex, SomeDirective, true, ElementRef); + $r3$.ɵɵcontentQuery(dirIndex, $e1_attrs$, false, ElementRef); + $r3$.ɵɵcontentQuery(dirIndex, SomeDirective, false, TemplateRef); + } + if (rf & 2) { + let $tmp$; + $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.myRef = $tmp$.first); + $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.someDir = $tmp$.first); + $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.myRefs = $tmp$); + $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.someDirs = $tmp$); + } + }, + // ... +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_read_token.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_read_token.ts new file mode 100644 index 0000000000..c24bfb678a --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_read_token.ts @@ -0,0 +1,21 @@ +import {Component, ContentChild, ContentChildren, ElementRef, NgModule, QueryList, TemplateRef} from '@angular/core'; + +import {SomeDirective} from './some.directive'; + +@Component({ + selector: 'content-query-component', + template: ` +
+
+
+ ` +}) +export class ContentQueryComponent { + @ContentChild('myRef', {read: TemplateRef}) myRef!: TemplateRef; + @ContentChildren('myRef1, myRef2, myRef3', {read: ElementRef}) myRefs!: QueryList; + @ContentChild(SomeDirective, {read: ElementRef}) someDir!: ElementRef; + @ContentChildren(SomeDirective, {read: TemplateRef}) someDirs!: QueryList>; +} +@NgModule({declarations: [ContentQueryComponent]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/some.directive.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/some.directive.ts new file mode 100644 index 0000000000..353cf391f6 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/some.directive.ts @@ -0,0 +1,7 @@ +import {Directive} from '@angular/core'; + +@Directive({ + selector: '[someDir]', +}) +export class SomeDirective { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/static_content_query.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/static_content_query.js new file mode 100644 index 0000000000..196aee6cda --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/static_content_query.js @@ -0,0 +1,27 @@ +ContentQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({ + type: ContentQueryComponent, + selectors: [["content-query-component"]], + contentQueries: function ContentQueryComponent_ContentQueries(rf, ctx, dirIndex) { + if (rf & 1) { + $r3$.ɵɵstaticContentQuery(dirIndex, SomeDirective, true); + $r3$.ɵɵcontentQuery(dirIndex, $ref0$, true); + } + if (rf & 2) { + let $tmp$; + $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.someDir = $tmp$.first); + $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.foo = $tmp$.first); + } + }, + ngContentSelectors: $_c1$, + decls: 2, + vars: 0, + template: function ContentQueryComponent_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵprojectionDef(); + $r3$.ɵɵelementStart(0, "div"); + $r3$.ɵɵprojection(1); + $r3$.ɵɵelementEnd(); + } + }, + encapsulation: 2 +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/static_content_query.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/static_content_query.ts new file mode 100644 index 0000000000..adee664faa --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/static_content_query.ts @@ -0,0 +1,29 @@ +import {Component, ContentChild, ElementRef, NgModule} from '@angular/core'; + +import {SomeDirective} from './some.directive'; + +@Component({ + selector: 'content-query-component', + template: ` +
+ ` +}) +export class ContentQueryComponent { + @ContentChild(SomeDirective, {static: true}) someDir!: SomeDirective; + @ContentChild('foo') foo!: ElementRef; +} + +@Component({ + selector: 'my-app', + template: ` + +
+ + ` +}) +export class MyApp { +} + +@NgModule({declarations: [SomeDirective, ContentQueryComponent, MyApp]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/static_view_query.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/static_view_query.js new file mode 100644 index 0000000000..a64ab3d47a --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/static_view_query.js @@ -0,0 +1,27 @@ +const $refs$ = ["foo"]; +// ... +ViewQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({ + type: ViewQueryComponent, + selectors: [["view-query-component"]], + viewQuery: function ViewQueryComponent_Query(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵstaticViewQuery(SomeDirective, true); + $r3$.ɵɵviewQuery($refs$, true); + } + if (rf & 2) { + let $tmp$; + $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.someDir = $tmp$.first); + $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.foo = $tmp$.first); + } + }, + decls: 1, + vars: 0, + consts: [["someDir",""]], + template: function ViewQueryComponent_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵelement(0, "div", 0); + } + }, + directives: function () { return [SomeDirective]; }, + encapsulation: 2 +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/static_view_query.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/static_view_query.ts new file mode 100644 index 0000000000..ec2e5b6e97 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/static_view_query.ts @@ -0,0 +1,18 @@ +import {Component, ElementRef, NgModule, ViewChild} from '@angular/core'; + +import {SomeDirective} from './some.directive'; + +@Component({ + selector: 'view-query-component', + template: ` +
+ ` +}) +export class ViewQueryComponent { + @ViewChild(SomeDirective, {static: true}) someDir!: SomeDirective; + @ViewChild('foo') foo!: ElementRef; +} + +@NgModule({declarations: [SomeDirective, ViewQueryComponent]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_for_directive.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_for_directive.js new file mode 100644 index 0000000000..c5bcbc05ef --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_for_directive.js @@ -0,0 +1,25 @@ +ViewQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({ + type: ViewQueryComponent, + selectors: [["view-query-component"]], + viewQuery: function ViewQueryComponent_Query(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵviewQuery(SomeDirective, true); + $r3$.ɵɵviewQuery(SomeDirective, true); + } + if (rf & 2) { + let $tmp$; + $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.someDir = $tmp$.first); + $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.someDirs = $tmp$); + } + }, + decls: 1, + vars: 0, + consts: [["someDir",""]], + template: function ViewQueryComponent_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵelement(0, "div", 0); + } + }, + directives: function () { return [SomeDirective]; }, + encapsulation: 2 +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_for_directive.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_for_directive.ts new file mode 100644 index 0000000000..4f9b6ac486 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_for_directive.ts @@ -0,0 +1,18 @@ +import {Component, NgModule, QueryList, ViewChild, ViewChildren} from '@angular/core'; + +import {SomeDirective} from './some.directive'; + +@Component({ + selector: 'view-query-component', + template: ` +
+ ` +}) +export class ViewQueryComponent { + @ViewChild(SomeDirective) someDir!: SomeDirective; + @ViewChildren(SomeDirective) someDirs!: QueryList; +} + +@NgModule({declarations: [SomeDirective, ViewQueryComponent]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_for_local_ref.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_for_local_ref.js new file mode 100644 index 0000000000..2abc0e114b --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_for_local_ref.js @@ -0,0 +1,18 @@ +const $e0_attrs$ = ["myRef"]; +const $e1_attrs$ = ["myRef1", "myRef2", "myRef3"]; +// ... +ViewQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({ + // ... + viewQuery: function ViewQueryComponent_Query(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵviewQuery($e0_attrs$, true); + $r3$.ɵɵviewQuery($e1_attrs$, true); + } + if (rf & 2) { + let $tmp$; + $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.myRef = $tmp$.first); + $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.myRefs = $tmp$); + } + }, + // ... +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_for_local_ref.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_for_local_ref.ts new file mode 100644 index 0000000000..b4be3a022a --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_for_local_ref.ts @@ -0,0 +1,17 @@ +import {Component, NgModule, QueryList, ViewChild, ViewChildren} from '@angular/core'; + +@Component({ + selector: 'view-query-component', + template: ` +
+
+ ` +}) +export class ViewQueryComponent { + @ViewChild('myRef') myRef: any; + @ViewChildren('myRef1, myRef2, myRef3') myRefs!: QueryList; +} + +@NgModule({declarations: [ViewQueryComponent]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_read_token.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_read_token.js new file mode 100644 index 0000000000..d0f708ec7a --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_read_token.js @@ -0,0 +1,22 @@ +const $e0_attrs$ = ["myRef"]; +const $e1_attrs$ = ["myRef1", "myRef2", "myRef3"]; +// ... +ViewQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({ + // ... + viewQuery: function ViewQueryComponent_Query(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵviewQuery($e0_attrs$, true, TemplateRef); + $r3$.ɵɵviewQuery(SomeDirective, true, ElementRef); + $r3$.ɵɵviewQuery($e1_attrs$, true, ElementRef); + $r3$.ɵɵviewQuery(SomeDirective, true, TemplateRef); + } + if (rf & 2) { + let $tmp$; + $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.myRef = $tmp$.first); + $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.someDir = $tmp$.first); + $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.myRefs = $tmp$); + $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.someDirs = $tmp$); + } + }, + // ... +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_read_token.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_read_token.ts new file mode 100644 index 0000000000..db8a881afa --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_read_token.ts @@ -0,0 +1,22 @@ +import {Component, ElementRef, NgModule, QueryList, TemplateRef, ViewChild, ViewChildren} from '@angular/core'; + +import {SomeDirective} from './some.directive'; + +@Component({ + selector: 'view-query-component', + template: ` +
+
+
+ ` +}) +export class ViewQueryComponent { + @ViewChild('myRef', {read: TemplateRef}) myRef!: TemplateRef; + @ViewChildren('myRef1, myRef2, myRef3', {read: ElementRef}) myRefs!: QueryList; + @ViewChild(SomeDirective, {read: ElementRef}) someDir!: ElementRef; + @ViewChildren(SomeDirective, {read: TemplateRef}) someDirs!: QueryList>; +} + +@NgModule({declarations: [ViewQueryComponent]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/GOLDEN_PARTIAL.js new file mode 100644 index 0000000000..5745641af3 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/GOLDEN_PARTIAL.js @@ -0,0 +1,339 @@ +/**************************************************************************************************** + * PARTIAL FILE: for_of.js + ****************************************************************************************************/ +import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'; +import * as i0 from "@angular/core"; +export class ForOfDirective { + constructor(view, template) { + this.view = view; + this.template = template; + } + ngOnChanges(simpleChanges) { } +} +ForOfDirective.ɵfac = function ForOfDirective_Factory(t) { return new (t || ForOfDirective)(i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i0.TemplateRef)); }; +ForOfDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: ForOfDirective, selector: "[forOf]", inputs: { forOf: "forOf" }, usesOnChanges: true, ngImport: i0 }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ForOfDirective, [{ + type: Directive, + args: [{ selector: '[forOf]' }] + }], function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }]; }, { forOf: [{ + type: Input + }] }); })(); + +/**************************************************************************************************** + * PARTIAL FILE: for_of.d.ts + ****************************************************************************************************/ +import { SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core'; +import * as i0 from "@angular/core"; +export interface ForOfContext { + $implicit: any; + index: number; + even: boolean; + odd: boolean; +} +export declare class ForOfDirective { + private view; + private template; + private previous; + constructor(view: ViewContainerRef, template: TemplateRef); + forOf: any[]; + ngOnChanges(simpleChanges: SimpleChanges): void; + static ɵfac: i0.ɵɵFactoryDef; + static ɵdir: i0.ɵɵDirectiveDefWithMeta; +} + +/**************************************************************************************************** + * PARTIAL FILE: svg_embedded_view.js + ****************************************************************************************************/ +import { Component, NgModule } from '@angular/core'; +import { ForOfDirective } from './for_of'; +import * as i0 from "@angular/core"; +export class MyComponent { + constructor() { + this.items = [{ data: 42 }, { data: 42 }]; + } +} +MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); }; +MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: ``, isInline: true }, directives: [{ type: function () { return ForOfDirective; }, selector: "[forOf]", inputs: ["forOf"] }] }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{ + type: Component, + args: [{ + selector: 'my-component', + template: `` + }] + }], null, null); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent, ForOfDirective] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [MyComponent, ForOfDirective] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: svg_embedded_view.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +import * as i1 from "./for_of"; +export declare class MyComponent { + items: { + data: number; + }[]; + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + +/**************************************************************************************************** + * PARTIAL FILE: for_of.js + ****************************************************************************************************/ +import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'; +import * as i0 from "@angular/core"; +export class ForOfDirective { + constructor(view, template) { + this.view = view; + this.template = template; + } + ngOnChanges(simpleChanges) { } +} +ForOfDirective.ɵfac = function ForOfDirective_Factory(t) { return new (t || ForOfDirective)(i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i0.TemplateRef)); }; +ForOfDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: ForOfDirective, selector: "[forOf]", inputs: { forOf: "forOf" }, usesOnChanges: true, ngImport: i0 }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ForOfDirective, [{ + type: Directive, + args: [{ selector: '[forOf]' }] + }], function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }]; }, { forOf: [{ + type: Input + }] }); })(); + +/**************************************************************************************************** + * PARTIAL FILE: for_of.d.ts + ****************************************************************************************************/ +import { SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core'; +import * as i0 from "@angular/core"; +export interface ForOfContext { + $implicit: any; + index: number; + even: boolean; + odd: boolean; +} +export declare class ForOfDirective { + private view; + private template; + private previous; + constructor(view: ViewContainerRef, template: TemplateRef); + forOf: any[]; + ngOnChanges(simpleChanges: SimpleChanges): void; + static ɵfac: i0.ɵɵFactoryDef; + static ɵdir: i0.ɵɵDirectiveDefWithMeta; +} + +/**************************************************************************************************** + * PARTIAL FILE: let_variable_and_reference.js + ****************************************************************************************************/ +import { Component, NgModule } from '@angular/core'; +import { ForOfDirective } from './for_of'; +import * as i0 from "@angular/core"; +export class MyComponent { + constructor() { + this.items = [{ name: 'one' }, { name: 'two' }]; + } +} +MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); }; +MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
  • {{item.name}}
`, isInline: true }, directives: [{ type: function () { return ForOfDirective; }, selector: "[forOf]", inputs: ["forOf"] }] }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{ + type: Component, + args: [{ + selector: 'my-component', + template: `
  • {{item.name}}
` + }] + }], null, null); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent, ForOfDirective] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [MyComponent, ForOfDirective] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: let_variable_and_reference.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +import * as i1 from "./for_of"; +export declare class MyComponent { + items: { + name: string; + }[]; + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + +/**************************************************************************************************** + * PARTIAL FILE: for_of.js + ****************************************************************************************************/ +import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'; +import * as i0 from "@angular/core"; +export class ForOfDirective { + constructor(view, template) { + this.view = view; + this.template = template; + } + ngOnChanges(simpleChanges) { } +} +ForOfDirective.ɵfac = function ForOfDirective_Factory(t) { return new (t || ForOfDirective)(i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i0.TemplateRef)); }; +ForOfDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: ForOfDirective, selector: "[forOf]", inputs: { forOf: "forOf" }, usesOnChanges: true, ngImport: i0 }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ForOfDirective, [{ + type: Directive, + args: [{ selector: '[forOf]' }] + }], function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }]; }, { forOf: [{ + type: Input + }] }); })(); + +/**************************************************************************************************** + * PARTIAL FILE: for_of.d.ts + ****************************************************************************************************/ +import { SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core'; +import * as i0 from "@angular/core"; +export interface ForOfContext { + $implicit: any; + index: number; + even: boolean; + odd: boolean; +} +export declare class ForOfDirective { + private view; + private template; + private previous; + constructor(view: ViewContainerRef, template: TemplateRef); + forOf: any[]; + ngOnChanges(simpleChanges: SimpleChanges): void; + static ɵfac: i0.ɵɵFactoryDef; + static ɵdir: i0.ɵɵDirectiveDefWithMeta; +} + +/**************************************************************************************************** + * PARTIAL FILE: parent_template_variable.js + ****************************************************************************************************/ +import { Component, NgModule } from '@angular/core'; +import { ForOfDirective } from './for_of'; +import * as i0 from "@angular/core"; +export class MyComponent { + constructor() { + this.items = [ + { name: 'one', infos: [{ description: '11' }, { description: '12' }] }, + { name: 'two', infos: [{ description: '21' }, { description: '22' }] } + ]; + } +} +MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); }; +MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: ` +
    +
  • +
    {{item.name}}
    +
      +
    • + {{item.name}}: {{info.description}} +
      • +
    +
    • +
`, isInline: true }, directives: [{ type: function () { return ForOfDirective; }, selector: "[forOf]", inputs: ["forOf"] }] }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{ + type: Component, + args: [{ + selector: 'my-component', + template: ` +
    +
  • +
    {{item.name}}
    +
      +
    • + {{item.name}}: {{info.description}} +
      • +
    +
    • +
` + }] + }], null, null); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent, ForOfDirective] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [MyComponent, ForOfDirective] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: parent_template_variable.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +import * as i1 from "./for_of"; +export declare class MyComponent { + items: { + name: string; + infos: { + description: string; + }[]; + }[]; + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + +/**************************************************************************************************** + * PARTIAL FILE: for_of.js + ****************************************************************************************************/ +import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'; +import * as i0 from "@angular/core"; +export class ForOfDirective { + constructor(view, template) { + this.view = view; + this.template = template; + } + ngOnChanges(simpleChanges) { } +} +ForOfDirective.ɵfac = function ForOfDirective_Factory(t) { return new (t || ForOfDirective)(i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i0.TemplateRef)); }; +ForOfDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: ForOfDirective, selector: "[forOf]", inputs: { forOf: "forOf" }, usesOnChanges: true, ngImport: i0 }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ForOfDirective, [{ + type: Directive, + args: [{ selector: '[forOf]' }] + }], function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }]; }, { forOf: [{ + type: Input + }] }); })(); + +/**************************************************************************************************** + * PARTIAL FILE: for_of.d.ts + ****************************************************************************************************/ +import { SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core'; +import * as i0 from "@angular/core"; +export interface ForOfContext { + $implicit: any; + index: number; + even: boolean; + odd: boolean; +} +export declare class ForOfDirective { + private view; + private template; + private previous; + constructor(view: ViewContainerRef, template: TemplateRef); + forOf: any[]; + ngOnChanges(simpleChanges: SimpleChanges): void; + static ɵfac: i0.ɵɵFactoryDef; + static ɵdir: i0.ɵɵDirectiveDefWithMeta; +} + diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/TEST_CASES.json b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/TEST_CASES.json new file mode 100644 index 0000000000..ae172788a5 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/TEST_CASES.json @@ -0,0 +1,76 @@ +{ + "$schema": "../../../test_case_schema.json", + "cases": [ + { + "description": "should support embedded views in the SVG namespace", + "inputFiles": [ + "for_of.ts", + "svg_embedded_view.ts" + ], + "expectations": [ + { + "failureMessage": "Invalid component definition", + "files": [ + "svg_embedded_view.js" + ] + } + ] + }, + { + "description": "should support a let variable and reference", + "inputFiles": [ + "for_of.ts", + "let_variable_and_reference.ts" + ], + "expectations": [ + { + "failureMessage": "Invalid component definition", + "files": [ + "let_variable_and_reference.js" + ] + } + ] + }, + { + "description": "should support accessing parent template variables", + "inputFiles": [ + "for_of.ts", + "parent_template_variable.ts" + ], + "expectations": [ + { + "failureMessage": "Invalid component definition", + "files": [ + "parent_template_variable.js" + ] + } + ] + }, + { + "description": "should generate correct code for for_of directive", + "inputFiles": [ + "for_of.ts" + ], + "expectations": [ + { + "failureMessage": "Invalid directive definition", + "files": [ + { + "generated": "for_of.js", + "expected": "for_of_def.js" + } + ] + }, + { + "failureMessage": "Invalid directive factory", + "files": [ + { + "generated": "for_of.js", + "expected": "for_of_fac.js" + } + ] + } + ] + } + ] +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/for_of.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/for_of.ts new file mode 100644 index 0000000000..bebcf38639 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/for_of.ts @@ -0,0 +1,19 @@ +import {Directive, Input, SimpleChanges, TemplateRef, ViewContainerRef} from '@angular/core'; + +export interface ForOfContext { + $implicit: any; + index: number; + even: boolean; + odd: boolean; +} + +@Directive({selector: '[forOf]'}) +export class ForOfDirective { + private previous!: any[]; + + constructor(private view: ViewContainerRef, private template: TemplateRef) {} + + @Input() forOf!: any[]; + + ngOnChanges(simpleChanges: SimpleChanges) {} +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/for_of_def.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/for_of_def.js new file mode 100644 index 0000000000..baa02f91cf --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/for_of_def.js @@ -0,0 +1,3 @@ +ForOfDirective.ɵfac = function ForOfDirective_Factory(t) { + return new (t || ForOfDirective)($r3$.ɵɵdirectiveInject($r3$.ViewContainerRef), $r3$.ɵɵdirectiveInject($r3$.TemplateRef)); +}; diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/for_of_fac.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/for_of_fac.js new file mode 100644 index 0000000000..9d28c4b7f0 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/for_of_fac.js @@ -0,0 +1,6 @@ +ForOfDirective.ɵdir = $r3$.ɵɵdefineDirective({ + type: ForOfDirective, + selectors: [["", "forOf", ""]], + inputs: {forOf: "forOf"}, + features: [$r3$.ɵɵNgOnChangesFeature] +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/let_variable_and_reference.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/let_variable_and_reference.js new file mode 100644 index 0000000000..1302e3bde3 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/let_variable_and_reference.js @@ -0,0 +1,33 @@ +function MyComponent_li_1_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵelementStart(0, "li"); + $r3$.ɵɵtext(1); + $r3$.ɵɵelementEnd(); + } + if (rf & 2) { + const $item$ = ctx.$implicit; + $r3$.ɵɵadvance(1); + $r3$.ɵɵtextInterpolate($item$.name); + } +} +// ... +MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({ + type: MyComponent, + selectors: [["my-component"]], + decls: 2, + vars: 1, + consts: [[__AttributeMarker.Template__, "for", "forOf"]], + template: function MyComponent_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵelementStart(0, "ul"); + $r3$.ɵɵtemplate(1, MyComponent_li_1_Template, 2, 1, "li", 0); + $r3$.ɵɵelementEnd(); + } + if (rf & 2) { + $r3$.ɵɵadvance(1); + $r3$.ɵɵproperty("forOf", ctx.items); + } + }, + directives: function() { return [ForOfDirective]; }, + encapsulation: 2 +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/let_variable_and_reference.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/let_variable_and_reference.ts new file mode 100644 index 0000000000..6ac596ba76 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/let_variable_and_reference.ts @@ -0,0 +1,14 @@ +import {Component, NgModule} from '@angular/core'; +import {ForOfDirective} from './for_of'; + +@Component({ + selector: 'my-component', + template: `
  • {{item.name}}
` +}) +export class MyComponent { + items = [{name: 'one'}, {name: 'two'}]; +} + +@NgModule({declarations: [MyComponent, ForOfDirective]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/parent_template_variable.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/parent_template_variable.js new file mode 100644 index 0000000000..2f601d4a66 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/parent_template_variable.js @@ -0,0 +1,55 @@ +function MyComponent_li_1_li_4_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵelementStart(0, "li"); + $r3$.ɵɵtext(1); + $r3$.ɵɵelementEnd(); + } + if (rf & 2) { + const $info$ = ctx.$implicit; + const $item$ = $r3$.ɵɵnextContext().$implicit; + $r3$.ɵɵadvance(1); + $r3$.ɵɵtextInterpolate2(" ", $item$.name, ": ", $info$.description, " "); + } +} + +function MyComponent_li_1_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵelementStart(0, "li"); + $r3$.ɵɵelementStart(1, "div"); + $r3$.ɵɵtext(2); + $r3$.ɵɵelementEnd(); + $r3$.ɵɵelementStart(3, "ul"); + $r3$.ɵɵtemplate(4, MyComponent_li_1_li_4_Template, 2, 2, "li", 0); + $r3$.ɵɵelementEnd(); + $r3$.ɵɵelementEnd(); + } + if (rf & 2) { + const $item$ = ctx.$implicit; + $r3$.ɵɵadvance(2); + $r3$.ɵɵtextInterpolate(IDENT.name); + $r3$.ɵɵadvance(2); + $r3$.ɵɵproperty("forOf", IDENT.infos); + } +} + +// ... +MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({ + type: MyComponent, + selectors: [["my-component"]], + decls: 2, + vars: 1, + consts: [[__AttributeMarker.Template__, "for", "forOf"]], + template: function MyComponent_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵelementStart(0, "ul"); + $r3$.ɵɵtemplate(1, MyComponent_li_1_Template, 5, 2, "li", 0); + $r3$.ɵɵelementEnd(); + } + if (rf & 2) { + $r3$.ɵɵadvance(1); + $r3$.ɵɵproperty("forOf", ctx.items); + } + }, + directives: function () { return [ForOfDirective]; }, + encapsulation: 2 +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/parent_template_variable.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/parent_template_variable.ts new file mode 100644 index 0000000000..c7d6090002 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/parent_template_variable.ts @@ -0,0 +1,27 @@ +import {Component, NgModule} from '@angular/core'; +import {ForOfDirective} from './for_of'; + +@Component({ + selector: 'my-component', + template: ` +
    +
  • +
    {{item.name}}
    +
      +
    • + {{item.name}}: {{info.description}} +
      • +
    +
    • +
` +}) +export class MyComponent { + items = [ + {name: 'one', infos: [{description: '11'}, {description: '12'}]}, + {name: 'two', infos: [{description: '21'}, {description: '22'}]} + ]; +} + +@NgModule({declarations: [MyComponent, ForOfDirective]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/svg_embedded_view.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/svg_embedded_view.js new file mode 100644 index 0000000000..96ad09c339 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/svg_embedded_view.js @@ -0,0 +1,30 @@ +function MyComponent__svg_g_1_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵnamespaceSVG(); + $r3$.ɵɵelementStart(0,"g"); + $r3$.ɵɵelement(1,"circle"); + $r3$.ɵɵelementEnd(); + } +} +// ... +MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({ + type: MyComponent, + selectors: [["my-component"]], + decls: 2, + vars: 1, + consts: [[__AttributeMarker.Template__, "for", "forOf"]], + template: function MyComponent_Template(rf, ctx){ + if (rf & 1) { + $r3$.ɵɵnamespaceSVG(); + $r3$.ɵɵelementStart(0,"svg"); + $r3$.ɵɵtemplate(1, MyComponent__svg_g_1_Template, 2, 0, "g", 0); + $r3$.ɵɵelementEnd(); + } + if (rf & 2) { + $r3$.ɵɵadvance(1); + $r3$.ɵɵproperty("forOf", ctx.items); + } + }, + directives: function() { return [ForOfDirective]; }, + encapsulation: 2 +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/svg_embedded_view.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/svg_embedded_view.ts new file mode 100644 index 0000000000..a7d1843123 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/svg_embedded_view.ts @@ -0,0 +1,14 @@ +import {Component, NgModule} from '@angular/core'; +import {ForOfDirective} from './for_of'; + +@Component({ + selector: 'my-component', + template: `` +}) +export class MyComponent { + items = [{data: 42}, {data: 42}]; +} + +@NgModule({declarations: [MyComponent, ForOfDirective]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/GOLDEN_PARTIAL.js new file mode 100644 index 0000000000..cf94fcd495 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/GOLDEN_PARTIAL.js @@ -0,0 +1,611 @@ +/**************************************************************************************************** + * PARTIAL FILE: directives.js + ****************************************************************************************************/ +import { Component, Directive, NgModule } from '@angular/core'; +import * as i0 from "@angular/core"; +export class ChildComponent { +} +ChildComponent.ɵfac = function ChildComponent_Factory(t) { return new (t || ChildComponent)(); }; +ChildComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: ChildComponent, selector: "child", ngImport: i0, template: { source: 'child-view', isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ChildComponent, [{ + type: Component, + args: [{ selector: 'child', template: 'child-view' }] + }], null, null); })(); +export class SomeDirective { +} +SomeDirective.ɵfac = function SomeDirective_Factory(t) { return new (t || SomeDirective)(); }; +SomeDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: SomeDirective, selector: "[some-directive]", ngImport: i0 }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SomeDirective, [{ + type: Directive, + args: [{ selector: '[some-directive]' }] + }], null, null); })(); +export class MyComponent { +} +MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); }; +MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: '!', isInline: true }, directives: [{ type: ChildComponent, selector: "child" }, { type: SomeDirective, selector: "[some-directive]" }] }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{ + type: Component, + args: [{ selector: 'my-component', template: '!' }] + }], null, null); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [ChildComponent, SomeDirective, MyComponent] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [ChildComponent, SomeDirective, MyComponent] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: directives.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class ChildComponent { + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class SomeDirective { + static ɵfac: i0.ɵɵFactoryDef; + static ɵdir: i0.ɵɵDirectiveDefWithMeta; +} +export declare class MyComponent { + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + +/**************************************************************************************************** + * PARTIAL FILE: complex_selectors.js + ****************************************************************************************************/ +import { Directive, NgModule } from '@angular/core'; +import * as i0 from "@angular/core"; +export class SomeDirective { +} +SomeDirective.ɵfac = function SomeDirective_Factory(t) { return new (t || SomeDirective)(); }; +SomeDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: SomeDirective, selector: "div.foo[some-directive]:not([title]):not(.baz)", ngImport: i0 }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SomeDirective, [{ + type: Directive, + args: [{ selector: 'div.foo[some-directive]:not([title]):not(.baz)' }] + }], null, null); })(); +export class OtherDirective { +} +OtherDirective.ɵfac = function OtherDirective_Factory(t) { return new (t || OtherDirective)(); }; +OtherDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: OtherDirective, selector: ":not(span[title]):not(.baz)", ngImport: i0 }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(OtherDirective, [{ + type: Directive, + args: [{ selector: ':not(span[title]):not(.baz)' }] + }], null, null); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [SomeDirective, OtherDirective] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [SomeDirective, OtherDirective] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: complex_selectors.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class SomeDirective { + static ɵfac: i0.ɵɵFactoryDef; + static ɵdir: i0.ɵɵDirectiveDefWithMeta; +} +export declare class OtherDirective { + static ɵfac: i0.ɵɵFactoryDef; + static ɵdir: i0.ɵɵDirectiveDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + +/**************************************************************************************************** + * PARTIAL FILE: id_selector.js + ****************************************************************************************************/ +import { Component, NgModule } from '@angular/core'; +import * as i0 from "@angular/core"; +export class SomeComponent { +} +SomeComponent.ɵfac = function SomeComponent_Factory(t) { return new (t || SomeComponent)(); }; +SomeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: SomeComponent, selector: "#my-app", ngImport: i0, template: { source: '', isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SomeComponent, [{ + type: Component, + args: [{ selector: '#my-app', template: '' }] + }], null, null); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [SomeComponent] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [SomeComponent] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: id_selector.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class SomeComponent { + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + +/**************************************************************************************************** + * PARTIAL FILE: no_selector.js + ****************************************************************************************************/ +import { Component, NgModule } from '@angular/core'; +import * as i0 from "@angular/core"; +export class EmptyOutletComponent { +} +EmptyOutletComponent.ɵfac = function EmptyOutletComponent_Factory(t) { return new (t || EmptyOutletComponent)(); }; +EmptyOutletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: EmptyOutletComponent, selector: "ng-component", ngImport: i0, template: { source: '', isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(EmptyOutletComponent, [{ + type: Component, + args: [{ template: '' }] + }], null, null); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [EmptyOutletComponent] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [EmptyOutletComponent] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: no_selector.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class EmptyOutletComponent { + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + +/**************************************************************************************************** + * PARTIAL FILE: view_tokens_di.js + ****************************************************************************************************/ +import { ChangeDetectorRef, Component, ElementRef, NgModule, ViewContainerRef } from '@angular/core'; +import * as i0 from "@angular/core"; +export class MyComponent { + constructor(el, vcr, cdr) { + this.el = el; + this.vcr = vcr; + this.cdr = cdr; + } +} +MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; +MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: '', isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{ + type: Component, + args: [{ selector: 'my-component', template: '' }] + }], function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; }, null); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [MyComponent] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: view_tokens_di.d.ts + ****************************************************************************************************/ +import { ChangeDetectorRef, ElementRef, ViewContainerRef } from '@angular/core'; +import * as i0 from "@angular/core"; +export declare class MyComponent { + el: ElementRef; + vcr: ViewContainerRef; + cdr: ChangeDetectorRef; + constructor(el: ElementRef, vcr: ViewContainerRef, cdr: ChangeDetectorRef); + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + +/**************************************************************************************************** + * PARTIAL FILE: structural_directives.js + ****************************************************************************************************/ +import { Component, Directive, NgModule, TemplateRef } from '@angular/core'; +import * as i0 from "@angular/core"; +export class IfDirective { + constructor(template) { } +} +IfDirective.ɵfac = function IfDirective_Factory(t) { return new (t || IfDirective)(i0.ɵɵdirectiveInject(i0.TemplateRef)); }; +IfDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: IfDirective, selector: "[if]", ngImport: i0 }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(IfDirective, [{ + type: Directive, + args: [{ selector: '[if]' }] + }], function () { return [{ type: i0.TemplateRef }]; }, null); })(); +export class MyComponent { + constructor() { + this.salutation = 'Hello'; + } +} +MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); }; +MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: '
  • {{salutation}} {{foo}}
', isInline: true }, directives: [{ type: IfDirective, selector: "[if]" }] }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{ + type: Component, + args: [{ selector: 'my-component', template: '
  • {{salutation}} {{foo}}
' }] + }], null, null); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [IfDirective, MyComponent] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [IfDirective, MyComponent] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: structural_directives.d.ts + ****************************************************************************************************/ +import { TemplateRef } from '@angular/core'; +import * as i0 from "@angular/core"; +export declare class IfDirective { + constructor(template: TemplateRef); + static ɵfac: i0.ɵɵFactoryDef; + static ɵdir: i0.ɵɵDirectiveDefWithMeta; +} +export declare class MyComponent { + salutation: string; + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + +/**************************************************************************************************** + * PARTIAL FILE: array_literals.js + ****************************************************************************************************/ +import { Component, Input, NgModule } from '@angular/core'; +import * as i0 from "@angular/core"; +export class MyComp { +} +MyComp.ɵfac = function MyComp_Factory(t) { return new (t || MyComp)(); }; +MyComp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComp, selector: "my-comp", inputs: { names: "names" }, ngImport: i0, template: { source: ` +

{{ names[0] }}

+

{{ names[1] }}

+ `, isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComp, [{ + type: Component, + args: [{ + selector: 'my-comp', + template: ` +

{{ names[0] }}

+

{{ names[1] }}

+ ` + }] + }], null, { names: [{ + type: Input + }] }); })(); +export class MyApp { + constructor() { + this.customName = 'Bess'; + } +} +MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); }; +MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: ` + +`, isInline: true }, directives: [{ type: MyComp, selector: "my-comp", inputs: ["names"] }] }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{ + type: Component, + args: [{ + selector: 'my-app', + template: ` + +` + }] + }], null, null); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComp, MyApp] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [MyComp, MyApp] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: array_literals.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class MyComp { + names: string[]; + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyApp { + customName: string; + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + +/**************************************************************************************************** + * PARTIAL FILE: array_literals_many.js + ****************************************************************************************************/ +import { Component, Input, NgModule } from '@angular/core'; +import * as i0 from "@angular/core"; +export class MyComp { +} +MyComp.ɵfac = function MyComp_Factory(t) { return new (t || MyComp)(); }; +MyComp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComp, selector: "my-comp", inputs: { names: "names" }, ngImport: i0, template: { source: ` + {{ names[0] }} + {{ names[1] }} + {{ names[3] }} + {{ names[4] }} + {{ names[5] }} + {{ names[6] }} + {{ names[7] }} + {{ names[8] }} + {{ names[9] }} + {{ names[10] }} + {{ names[11] }} + `, isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComp, [{ + type: Component, + args: [{ + selector: 'my-comp', + template: ` + {{ names[0] }} + {{ names[1] }} + {{ names[3] }} + {{ names[4] }} + {{ names[5] }} + {{ names[6] }} + {{ names[7] }} + {{ names[8] }} + {{ names[9] }} + {{ names[10] }} + {{ names[11] }} + ` + }] + }], null, { names: [{ + type: Input + }] }); })(); +export class MyApp { + constructor() { + this.n0 = 'a'; + this.n1 = 'b'; + this.n2 = 'c'; + this.n3 = 'd'; + this.n4 = 'e'; + this.n5 = 'f'; + this.n6 = 'g'; + this.n7 = 'h'; + this.n8 = 'i'; + } +} +MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); }; +MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: ` + + +`, isInline: true }, directives: [{ type: MyComp, selector: "my-comp", inputs: ["names"] }] }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{ + type: Component, + args: [{ + selector: 'my-app', + template: ` + + +` + }] + }], null, null); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComp, MyApp] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [MyComp, MyApp] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: array_literals_many.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class MyComp { + names: string[]; + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyApp { + n0: string; + n1: string; + n2: string; + n3: string; + n4: string; + n5: string; + n6: string; + n7: string; + n8: string; + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + +/**************************************************************************************************** + * PARTIAL FILE: object_literals.js + ****************************************************************************************************/ +import { Component, Input, NgModule } from '@angular/core'; +import * as i0 from "@angular/core"; +export class ObjectComp { +} +ObjectComp.ɵfac = function ObjectComp_Factory(t) { return new (t || ObjectComp)(); }; +ObjectComp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: ObjectComp, selector: "object-comp", inputs: { config: "config" }, ngImport: i0, template: { source: ` +

{{ config['duration'] }}

+

{{ config.animation }}

+ `, isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ObjectComp, [{ + type: Component, + args: [{ + selector: 'object-comp', + template: ` +

{{ config['duration'] }}

+

{{ config.animation }}

+ ` + }] + }], null, { config: [{ + type: Input + }] }); })(); +export class MyApp { + constructor() { + this.name = 'slide'; + } +} +MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); }; +MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: ` + +`, isInline: true }, directives: [{ type: ObjectComp, selector: "object-comp", inputs: ["config"] }] }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{ + type: Component, + args: [{ + selector: 'my-app', + template: ` + +` + }] + }], null, null); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [ObjectComp, MyApp] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [ObjectComp, MyApp] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: object_literals.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class ObjectComp { + config: { + [key: string]: any; + }; + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyApp { + name: string; + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + +/**************************************************************************************************** + * PARTIAL FILE: literal_nested_expression.js + ****************************************************************************************************/ +import { Component, Input, NgModule } from '@angular/core'; +import * as i0 from "@angular/core"; +export class NestedComp { +} +NestedComp.ɵfac = function NestedComp_Factory(t) { return new (t || NestedComp)(); }; +NestedComp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: NestedComp, selector: "nested-comp", inputs: { config: "config" }, ngImport: i0, template: { source: ` +

{{ config.animation }}

+

{{config.actions[0].opacity }}

+

{{config.actions[1].duration }}

+ `, isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(NestedComp, [{ + type: Component, + args: [{ + selector: 'nested-comp', + template: ` +

{{ config.animation }}

+

{{config.actions[0].opacity }}

+

{{config.actions[1].duration }}

+ ` + }] + }], null, { config: [{ + type: Input + }] }); })(); +export class MyApp { + constructor() { + this.name = 'slide'; + this.duration = 100; + } +} +MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); }; +MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: ` + + +`, isInline: true }, directives: [{ type: NestedComp, selector: "nested-comp", inputs: ["config"] }] }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{ + type: Component, + args: [{ + selector: 'my-app', + template: ` + + +` + }] + }], null, null); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [NestedComp, MyApp] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [NestedComp, MyApp] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: literal_nested_expression.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class NestedComp { + config: { + [key: string]: any; + }; + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyApp { + name: string; + duration: number; + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/TEST_CASES.json b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/TEST_CASES.json new file mode 100644 index 0000000000..e4de00987e --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/TEST_CASES.json @@ -0,0 +1,277 @@ +{ + "$schema": "../../../test_case_schema.json", + "cases": [ + { + "description": "should instantiate directives", + "inputFiles": [ + "directives.ts" + ], + "expectations": [ + { + "failureMessage": "Incorrect ChildComponent.ɵcmp", + "files": [ + { + "expected": "directives_child_component_def.js", + "generated": "directives.js" + } + ] + }, + { + "failureMessage": "Incorrect ChildComponent.ɵfac", + "files": [ + { + "expected": "directives_child_component_fac.js", + "generated": "directives.js" + } + ] + }, + { + "failureMessage": "Incorrect SomeDirective.ɵdir", + "files": [ + { + "expected": "directives_some_directive_dir.js", + "generated": "directives.js" + } + ] + }, + { + "failureMessage": "Incorrect SomeDirective.ɵfac", + "files": [ + { + "expected": "directives_some_directive_fac.js", + "generated": "directives.js" + } + ] + }, + { + "failureMessage": "Incorrect MyComponentDefinition.ɵcmp", + "files": [ + { + "expected": "directives_my_component_def.js", + "generated": "directives.js" + } + ] + }, + { + "failureMessage": "Incorrect MyComponentDefinition.ɵfac", + "files": [ + { + "expected": "directives_my_component_fac.js", + "generated": "directives.js" + } + ] + } + ] + }, + { + "description": "should support complex selectors", + "inputFiles": [ + "complex_selectors.ts" + ], + "expectations": [ + { + "failureMessage": "Incorrect SomeDirective.ɵdir", + "files": [ + { + "expected": "complex_selectors_some_directive_dir.js", + "generated": "complex_selectors.js" + } + ] + }, + { + "failureMessage": "Incorrect SomeDirective.ɵfac", + "files": [ + { + "expected": "complex_selectors_some_directive_fac.js", + "generated": "complex_selectors.js" + } + ] + }, + { + "failureMessage": "Incorrect OtherDirective.ɵdir", + "files": [ + { + "expected": "complex_selectors_other_directive_dir.js", + "generated": "complex_selectors.js" + } + ] + }, + { + "failureMessage": "Incorrect OtherDirective.ɵfac", + "files": [ + { + "expected": "complex_selectors_other_directive_fac.js", + "generated": "complex_selectors.js" + } + ] + } + ] + }, + { + "description": "should convert #my-app selector to [\"\", \"id\", \"my-app\"]", + "inputFiles": [ + "id_selector.ts" + ], + "expectations": [ + { + "failureMessage": "Incorrect SomeComponent.ɵcomp", + "files": [ + "id_selector.js" + ] + } + ] + }, + { + "description": "should support components without selector", + "inputFiles": [ + "no_selector.ts" + ], + "expectations": [ + { + "failureMessage": "Incorrect EmptyOutletComponent.ɵcmp", + "files": [ + { + "expected": "no_selector_def.js", + "generated": "no_selector.js" + } + ] + }, + { + "failureMessage": "Incorrect EmptyOutletComponent.ɵfac", + "files": [ + { + "expected": "no_selector_fac.js", + "generated": "no_selector.js" + } + ] + } + ] + }, + { + "description": "should not treat ElementRef, ViewContainerRef, or ChangeDetectorRef specially when injecting", + "inputFiles": [ + "view_tokens_di.ts" + ], + "expectations": [ + { + "failureMessage": "Incorrect MyComponent.ɵcmp", + "files": [ + { + "expected": "view_tokens_di_def.js", + "generated": "view_tokens_di.js" + } + ] + }, + { + "failureMessage": "Incorrect MyComponent.ɵfac", + "files": [ + { + "expected": "view_tokens_di_fac.js", + "generated": "view_tokens_di.js" + } + ] + } + ] + }, + { + "description": "should support structural directives", + "inputFiles": [ + "structural_directives.ts" + ], + "expectations": [ + { + "failureMessage": "Incorrect IfDirective.ɵdir", + "files": [ + { + "expected": "structural_directives_if_directive_def.js", + "generated": "structural_directives.js" + } + ] + }, + { + "failureMessage": "Incorrect IfDirective.ɵfac", + "files": [ + { + "expected": "structural_directives_if_directive_fac.js", + "generated": "structural_directives.js" + } + ] + }, + { + "failureMessage": "Incorrect MyComponent.ɵcmp", + "files": [ + { + "expected": "structural_directives_my_component_def.js", + "generated": "structural_directives.js" + } + ] + }, + { + "failureMessage": "Incorrect MyComponent.ɵfac", + "files": [ + { + "expected": "structural_directives_my_component_fac.js", + "generated": "structural_directives.js" + } + ] + } + ] + }, + { + "description": "should support array literals", + "inputFiles": [ + "array_literals.ts" + ], + "expectations": [ + { + "failureMessage": "Invalid array emit", + "files": [ + "array_literals.js" + ] + } + ] + }, + { + "description": "should support 9+ bindings in array literals", + "inputFiles": [ + "array_literals_many.ts" + ], + "expectations": [ + { + "failureMessage": "Invalid array binding", + "files": [ + "array_literals_many.js" + ] + } + ] + }, + { + "description": "should support object literals", + "inputFiles": [ + "object_literals.ts" + ], + "expectations": [ + { + "failureMessage": "Invalid object literal binding", + "files": [ + "object_literals.js" + ] + } + ] + }, + { + "description": "should support expressions nested deeply in object/array literals", + "inputFiles": [ + "literal_nested_expression.ts" + ], + "expectations": [ + { + "failureMessage": "Invalid array/object literal binding", + "files": [ + "literal_nested_expression.js" + ] + } + ] + } + ] +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/array_literals.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/array_literals.js new file mode 100644 index 0000000000..9fe6e681be --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/array_literals.js @@ -0,0 +1,19 @@ +const $e0_ff$ = function ($v$) { return ["Nancy", $v$]; }; +// ... +MyApp.ɵcmp = $r3$.ɵɵdefineComponent({ + type: MyApp, + selectors: [["my-app"]], + decls: 1, + vars: 3, + consts: [[__AttributeMarker.Bindings__, "names"]], + template: function MyApp_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵelement(0, "my-comp", 0); + } + if (rf & 2) { + $r3$.ɵɵproperty("names", $r3$.ɵɵpureFunction1(1, $e0_ff$, ctx.customName)); + } + }, + directives: [MyComp], + encapsulation: 2 +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/array_literals.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/array_literals.ts new file mode 100644 index 0000000000..4624b8b8b0 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/array_literals.ts @@ -0,0 +1,26 @@ +import {Component, Input, NgModule} from '@angular/core'; + +@Component({ + selector: 'my-comp', + template: ` +

{{ names[0] }}

+

{{ names[1] }}

+ ` +}) +export class MyComp { + @Input() names!: string[]; +} + +@Component({ + selector: 'my-app', + template: ` + +` +}) +export class MyApp { + customName = 'Bess'; +} + +@NgModule({declarations: [MyComp, MyApp]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/array_literals_many.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/array_literals_many.js new file mode 100644 index 0000000000..318af844eb --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/array_literals_many.js @@ -0,0 +1,22 @@ +const $e0_ff$ = function ($v0$, $v1$, $v2$, $v3$, $v4$, $v5$, $v6$, $v7$, $v8$) { + return ["start-", $v0$, $v1$, $v2$, $v3$, $v4$, "-middle-", $v5$, $v6$, $v7$, $v8$, "-end"]; +} +// ... +MyApp.ɵcmp = $r3$.ɵɵdefineComponent({ + type: MyApp, + selectors: [["my-app"]], + decls: 1, + vars: 11, + consts: [[__AttributeMarker.Bindings__, "names"]], + template: function MyApp_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵelement(0, "my-comp", 0); + } + if (rf & 2) { + $r3$.ɵɵproperty("names", + $r3$.ɵɵpureFunctionV(1, $e0_ff$, [ctx.n0, ctx.n1, ctx.n2, ctx.n3, ctx.n4, ctx.n5, ctx.n6, ctx.n7, ctx.n8])); + } + }, + directives: [MyComp], + encapsulation: 2 +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/array_literals_many.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/array_literals_many.ts new file mode 100644 index 0000000000..bce9395803 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/array_literals_many.ts @@ -0,0 +1,44 @@ +import {Component, Input, NgModule} from '@angular/core'; + +@Component({ + selector: 'my-comp', + template: ` + {{ names[0] }} + {{ names[1] }} + {{ names[3] }} + {{ names[4] }} + {{ names[5] }} + {{ names[6] }} + {{ names[7] }} + {{ names[8] }} + {{ names[9] }} + {{ names[10] }} + {{ names[11] }} + ` +}) +export class MyComp { + @Input() names!: string[]; +} + +@Component({ + selector: 'my-app', + template: ` + + +` +}) +export class MyApp { + n0 = 'a'; + n1 = 'b'; + n2 = 'c'; + n3 = 'd'; + n4 = 'e'; + n5 = 'f'; + n6 = 'g'; + n7 = 'h'; + n8 = 'i'; +} + +@NgModule({declarations: [MyComp, MyApp]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/complex_selectors.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/complex_selectors.ts new file mode 100644 index 0000000000..759de78bb8 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/complex_selectors.ts @@ -0,0 +1,13 @@ +import {Directive, NgModule} from '@angular/core'; + +@Directive({selector: 'div.foo[some-directive]:not([title]):not(.baz)'}) +export class SomeDirective { +} + +@Directive({selector: ':not(span[title]):not(.baz)'}) +export class OtherDirective { +} + +@NgModule({declarations: [SomeDirective, OtherDirective]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/complex_selectors_other_directive_dir.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/complex_selectors_other_directive_dir.js new file mode 100644 index 0000000000..98b8babbf1 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/complex_selectors_other_directive_dir.js @@ -0,0 +1,4 @@ +OtherDirective.ɵdir = $r3$.ɵɵdefineDirective({ + type: OtherDirective, + selectors: [["", __SelectorFlags.NOT__|__SelectorFlags.ELEMENT__, "span", "title", "", __SelectorFlags.NOT__|__SelectorFlags.CLASS__, "baz"]] +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/complex_selectors_other_directive_fac.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/complex_selectors_other_directive_fac.js new file mode 100644 index 0000000000..ac59cc15aa --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/complex_selectors_other_directive_fac.js @@ -0,0 +1 @@ +OtherDirective.ɵfac = function OtherDirective_Factory(t) {return new (t || OtherDirective)(); }; \ No newline at end of file diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/complex_selectors_some_directive_dir.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/complex_selectors_some_directive_dir.js new file mode 100644 index 0000000000..dcf314b99d --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/complex_selectors_some_directive_dir.js @@ -0,0 +1,4 @@ +SomeDirective.ɵdir = $r3$.ɵɵdefineDirective({ + type: SomeDirective, + selectors: [["div", "some-directive", "", __SelectorFlags.CLASS__, "foo", __SelectorFlags.NOT__|__SelectorFlags.ATTRIBUTE__, "title", "", __SelectorFlags.NOT__|__SelectorFlags.CLASS__, "baz"]] +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/complex_selectors_some_directive_fac.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/complex_selectors_some_directive_fac.js new file mode 100644 index 0000000000..8a2480188c --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/complex_selectors_some_directive_fac.js @@ -0,0 +1 @@ +SomeDirective.ɵfac = function SomeDirective_Factory(t) {return new (t || SomeDirective)(); }; \ No newline at end of file diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives.ts new file mode 100644 index 0000000000..65000fd059 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives.ts @@ -0,0 +1,17 @@ +import {Component, Directive, NgModule} from '@angular/core'; + +@Component({selector: 'child', template: 'child-view'}) +export class ChildComponent { +} + +@Directive({selector: '[some-directive]'}) +export class SomeDirective { +} + +@Component({selector: 'my-component', template: '!'}) +export class MyComponent { +} + +@NgModule({declarations: [ChildComponent, SomeDirective, MyComponent]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_child_component_def.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_child_component_def.js new file mode 100644 index 0000000000..2c6f81ef0e --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_child_component_def.js @@ -0,0 +1,12 @@ +ChildComponent.ɵcmp = $r3$.ɵɵdefineComponent({ + type: ChildComponent, + selectors: [["child"]], + decls: 1, + vars: 0, + template: function ChildComponent_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵtext(0, "child-view"); + } + }, + encapsulation: 2 +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_child_component_fac.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_child_component_fac.js new file mode 100644 index 0000000000..c885c10b3f --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_child_component_fac.js @@ -0,0 +1 @@ +ChildComponent.ɵfac = function ChildComponent_Factory(t) { return new (t || ChildComponent)(); }; \ No newline at end of file diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_my_component_def.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_my_component_def.js new file mode 100644 index 0000000000..c9f4bcaf4d --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_my_component_def.js @@ -0,0 +1,15 @@ +MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({ + type: MyComponent, + selectors: [["my-component"]], + decls: 2, + vars: 0, + consts: [["some-directive", ""]], + template: function MyComponent_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵelement(0, "child", 0); + $r3$.ɵɵtext(1, "!"); + } + }, + directives: [ChildComponent, SomeDirective], + encapsulation: 2 +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_my_component_fac.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_my_component_fac.js new file mode 100644 index 0000000000..57da070177 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_my_component_fac.js @@ -0,0 +1 @@ +MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); }; \ No newline at end of file diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_some_directive_dir.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_some_directive_dir.js new file mode 100644 index 0000000000..ca8794d1c8 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_some_directive_dir.js @@ -0,0 +1,4 @@ +SomeDirective.ɵdir = $r3$.ɵɵdefineDirective({ + type: SomeDirective, + selectors: [["", "some-directive", ""]] +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_some_directive_fac.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_some_directive_fac.js new file mode 100644 index 0000000000..8a2480188c --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_some_directive_fac.js @@ -0,0 +1 @@ +SomeDirective.ɵfac = function SomeDirective_Factory(t) {return new (t || SomeDirective)(); }; \ No newline at end of file diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/id_selector.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/id_selector.js new file mode 100644 index 0000000000..526db9a4f1 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/id_selector.js @@ -0,0 +1,5 @@ +SomeComponent.ɵcmp = $r3$.ɵɵdefineComponent({ + type: SomeComponent, + selectors: [["", "id", "my-app"]], + // ... +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/id_selector.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/id_selector.ts new file mode 100644 index 0000000000..e652cb4ece --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/id_selector.ts @@ -0,0 +1,9 @@ +import {Component, NgModule} from '@angular/core'; + +@Component({selector: '#my-app', template: ''}) +export class SomeComponent { +} + +@NgModule({declarations: [SomeComponent]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/literal_nested_expression.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/literal_nested_expression.js new file mode 100644 index 0000000000..45abe32206 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/literal_nested_expression.js @@ -0,0 +1,23 @@ +const $c0$ = function () { return {opacity: 0, duration: 0}; }; +const $e0_ff$ = function ($v$) { return {opacity: 1, duration: $v$}; }; +const $e0_ff_1$ = function ($v1$, $v2$) { return [$v1$, $v2$]; }; +const $e0_ff_2$ = function ($v1$, $v2$) { return {animation: $v1$, actions: $v2$}; }; +// ... +MyApp.ɵcmp = $r3$.ɵɵdefineComponent({ + type: MyApp, + selectors: [["my-app"]], + decls: 1, + vars: 10, + consts: [[__AttributeMarker.Bindings__, "config"]], + template: function MyApp_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵelement(0, "nested-comp", 0); + } + if (rf & 2) { + $r3$.ɵɵproperty("config", + $r3$.ɵɵpureFunction2(7, $e0_ff_2$, ctx.name, $r3$.ɵɵpureFunction2(4, $e0_ff_1$, $r3$.ɵɵpureFunction0(1, $c0$), $r3$.ɵɵpureFunction1(2, $e0_ff$, ctx.duration)))); + } + }, + directives: [NestedComp], + encapsulation: 2 +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/literal_nested_expression.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/literal_nested_expression.ts new file mode 100644 index 0000000000..2e3241eb8d --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/literal_nested_expression.ts @@ -0,0 +1,29 @@ +import {Component, Input, NgModule} from '@angular/core'; + +@Component({ + selector: 'nested-comp', + template: ` +

{{ config.animation }}

+

{{config.actions[0].opacity }}

+

{{config.actions[1].duration }}

+ ` +}) +export class NestedComp { + @Input() config!: {[key: string]: any}; +} + +@Component({ + selector: 'my-app', + template: ` + + +` +}) +export class MyApp { + name = 'slide'; + duration = 100; +} + +@NgModule({declarations: [NestedComp, MyApp]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/no_selector.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/no_selector.ts new file mode 100644 index 0000000000..74aafb0d52 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/no_selector.ts @@ -0,0 +1,9 @@ +import {Component, Directive, NgModule} from '@angular/core'; + +@Component({template: ''}) +export class EmptyOutletComponent { +} + +@NgModule({declarations: [EmptyOutletComponent]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/no_selector_def.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/no_selector_def.js new file mode 100644 index 0000000000..ddd2dbc6ea --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/no_selector_def.js @@ -0,0 +1,12 @@ +EmptyOutletComponent.ɵcmp = $r3$.ɵɵdefineComponent({ + type: EmptyOutletComponent, + selectors: [["ng-component"]], + decls: 1, + vars: 0, + template: function EmptyOutletComponent_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵelement(0, "router-outlet"); + } + }, + encapsulation: 2 +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/no_selector_fac.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/no_selector_fac.js new file mode 100644 index 0000000000..c1775e7915 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/no_selector_fac.js @@ -0,0 +1 @@ +EmptyOutletComponent.ɵfac = function EmptyOutletComponent_Factory(t) { return new (t || EmptyOutletComponent)(); }; \ No newline at end of file diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/object_literals.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/object_literals.js new file mode 100644 index 0000000000..754d8e184c --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/object_literals.js @@ -0,0 +1,19 @@ +const $e0_ff$ = function ($v$) { return {"duration": 500, animation: $v$}; }; +// ... +MyApp.ɵcmp = $r3$.ɵɵdefineComponent({ + type: MyApp, + selectors: [["my-app"]], + decls: 1, + vars: 3, + consts: [[__AttributeMarker.Bindings__, "config"]], + template: function MyApp_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵelement(0, "object-comp", 0); + } + if (rf & 2) { + $r3$.ɵɵproperty("config", $r3$.ɵɵpureFunction1(1, $e0_ff$, ctx.name)); + } + }, + directives: [ObjectComp], + encapsulation: 2 +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/object_literals.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/object_literals.ts new file mode 100644 index 0000000000..04943c7c2b --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/object_literals.ts @@ -0,0 +1,26 @@ +import {Component, Input, NgModule} from '@angular/core'; + +@Component({ + selector: 'object-comp', + template: ` +

{{ config['duration'] }}

+

{{ config.animation }}

+ ` +}) +export class ObjectComp { + @Input() config!: {[key: string]: any}; +} + +@Component({ + selector: 'my-app', + template: ` + +` +}) +export class MyApp { + name = 'slide'; +} + +@NgModule({declarations: [ObjectComp, MyApp]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/structural_directives.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/structural_directives.ts new file mode 100644 index 0000000000..a2d98f9ff1 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/structural_directives.ts @@ -0,0 +1,16 @@ +import {Component, Directive, NgModule, TemplateRef} from '@angular/core'; + +@Directive({selector: '[if]'}) +export class IfDirective { + constructor(template: TemplateRef) {} +} + +@Component( + {selector: 'my-component', template: '
  • {{salutation}} {{foo}}
'}) +export class MyComponent { + salutation = 'Hello'; +} + +@NgModule({declarations: [IfDirective, MyComponent]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/structural_directives_if_directive_def.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/structural_directives_if_directive_def.js new file mode 100644 index 0000000000..810b934520 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/structural_directives_if_directive_def.js @@ -0,0 +1,4 @@ +IfDirective.ɵdir = $r3$.ɵɵdefineDirective({ + type: IfDirective, + selectors: [["", "if", ""]] +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/structural_directives_if_directive_fac.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/structural_directives_if_directive_fac.js new file mode 100644 index 0000000000..65cca9800a --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/structural_directives_if_directive_fac.js @@ -0,0 +1 @@ +IfDirective.ɵfac = function IfDirective_Factory(t) { return new (t || IfDirective)($r3$.ɵɵdirectiveInject($i$.TemplateRef)); }; \ No newline at end of file diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/structural_directives_my_component_def.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/structural_directives_my_component_def.js new file mode 100644 index 0000000000..e74030ce70 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/structural_directives_my_component_def.js @@ -0,0 +1,30 @@ +function MyComponent_li_2_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵelementStart(0, "li"); + $r3$.ɵɵtext(1); + $r3$.ɵɵelementEnd(); + } + if (rf & 2) { + const $myComp$ = $r3$.ɵɵnextContext(); + const $foo$ = $r3$.ɵɵreference(1); + $r3$.ɵɵadvance(1); + $r3$.ɵɵtextInterpolate2("", $myComp$.salutation, " ", $foo$, ""); + } +} +// ... +MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({ + type: MyComponent, + selectors: [["my-component"]], + decls: 3, + vars: 0, + consts: [["foo", ""], [__AttributeMarker.Template__, "if"]], + template: function MyComponent_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵelementStart(0, "ul", null, 0); + $r3$.ɵɵtemplate(2, MyComponent_li_2_Template, 2, 2, "li", 1); + $r3$.ɵɵelementEnd(); + } + }, + directives: [IfDirective], + encapsulation: 2 +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/structural_directives_my_component_fac.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/structural_directives_my_component_fac.js new file mode 100644 index 0000000000..57da070177 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/structural_directives_my_component_fac.js @@ -0,0 +1 @@ +MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); }; \ No newline at end of file diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/view_tokens_di.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/view_tokens_di.ts new file mode 100644 index 0000000000..98284b4f72 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/view_tokens_di.ts @@ -0,0 +1,10 @@ +import {ChangeDetectorRef, Component, ElementRef, NgModule, ViewContainerRef} from '@angular/core'; + +@Component({selector: 'my-component', template: ''}) +export class MyComponent { + constructor(public el: ElementRef, public vcr: ViewContainerRef, public cdr: ChangeDetectorRef) {} +} + +@NgModule({declarations: [MyComponent]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/view_tokens_di_def.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/view_tokens_di_def.js new file mode 100644 index 0000000000..d0b65ec701 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/view_tokens_di_def.js @@ -0,0 +1,8 @@ +MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({ + type: MyComponent, + selectors: [["my-component"]], + decls: 0, + vars: 0, + template: function MyComponent_Template(rf, ctx) {}, + encapsulation: 2 +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/view_tokens_di_fac.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/view_tokens_di_fac.js new file mode 100644 index 0000000000..4b67a7826b --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/view_tokens_di_fac.js @@ -0,0 +1,5 @@ +MyComponent.ɵfac = function MyComponent_Factory(t) { + return new (t || MyComponent)( + $r3$.ɵɵdirectiveInject($i$.ElementRef), $r3$.ɵɵdirectiveInject($i$.ViewContainerRef), + $r3$.ɵɵdirectiveInject($i$.ChangeDetectorRef)); +}; diff --git a/packages/compiler-cli/test/compliance/test_helpers/expected_file_macros.ts b/packages/compiler-cli/test/compliance/test_helpers/expected_file_macros.ts index 73a7c17ed4..0d90b52fac 100644 --- a/packages/compiler-cli/test/compliance/test_helpers/expected_file_macros.ts +++ b/packages/compiler-cli/test/compliance/test_helpers/expected_file_macros.ts @@ -5,7 +5,7 @@ * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ -import {AttributeMarker} from '@angular/compiler/src/core'; +import {AttributeMarker, SelectorFlags} from '@angular/compiler/src/core'; import {i18nIcuMsg, i18nMsg, i18nMsgWithPostprocess, Placeholder} from './i18n_helpers'; const EXPECTED_FILE_MACROS: [RegExp, (...args: string[]) => string][] = [ @@ -32,6 +32,9 @@ const EXPECTED_FILE_MACROS: [RegExp, (...args: string[]) => string][] = [ /__AttributeMarker\.([^_]+)__/g, (_match, member) => getAttributeMarker(member), ], + + // E.g. `__SelectorFlags.ELEMENT__` + flagUnion(/__SelectorFlags\.([^_]+)__/, (_match, member) => getSelectorFlag(member)), ]; /** @@ -89,6 +92,21 @@ function getAttributeMarker(member: string): string { return `${marker}`; } +const SelectorFlagsMap: Record = { + NOT: SelectorFlags.NOT, + ATTRIBUTE: SelectorFlags.ATTRIBUTE, + ELEMENT: SelectorFlags.ELEMENT, + CLASS: SelectorFlags.CLASS, +}; + +function getSelectorFlag(member: string): number { + const marker = SelectorFlagsMap[member]; + if (typeof marker !== 'number') { + throw new Error('Unknown SelectorFlag: ' + member); + } + return marker; +} + function stringParam() { return /'([^']*?[^\\])'/; } @@ -105,3 +123,24 @@ function macroFn(fnName: RegExp, ...args: RegExp[]): RegExp { ws + fnName.source + '\\(' + args.map(r => `${ws}${r.source}${ws}`).join(',') + '\\)' + ws, 'g'); } + +/** + * Creates a macro to replace a union of flags with its numeric constant value. + * + * @param pattern The regex to match a single occurrence of the flag. + * @param getFlagValue A function to extract the numeric flag value from the pattern. + */ +function flagUnion(pattern: RegExp, getFlagValue: (...match: string[]) => number): + typeof EXPECTED_FILE_MACROS[number] { + return [ + // Match at least one occurrence of the pattern, optionally followed by more occurrences + // separated by a pipe. + new RegExp(pattern.source + '(?:\s*\\\|\s*' + pattern.source + ')*', 'g'), + (match: string) => { + // Replace all matches with the union of the individually matched flags. + return String(match.split('|') + .map(flag => getFlagValue(...flag.trim().match(pattern)!)) + .reduce((accumulator, flagValue) => accumulator | flagValue, 0)); + }, + ]; +}