feat(ivy): bridge component styles into the component renderer (#25255)

PR Close #25255

packages/core/src/render3/definition.ts

@@ -9,8 +9,9 @@
 import './ng_dev_mode';
 
 import {ChangeDetectionStrategy} from '../change_detection/constants';
-import {Provider, ViewEncapsulation} from '../core';
+import {Provider} from '../di/provider';
 import {NgModuleDef, NgModuleDefInternal} from '../metadata/ng_module';
+import {ViewEncapsulation} from '../metadata/view';
 import {Type} from '../type';
 
 import {BaseDef, ComponentDefFeature, ComponentDefInternal, ComponentQuery, ComponentTemplate, ComponentType, DirectiveDefFeature, DirectiveDefInternal, DirectiveType, DirectiveTypesOrFactory, PipeDefInternal, PipeType, PipeTypesOrFactory} from './interfaces/definition';
@@ -266,7 +267,8 @@ export function defineComponent<T>(componentDefinition: {
   const pipeTypes = componentDefinition.pipes !;
   const directiveTypes = componentDefinition.directives !;
   const declaredInputs: {[key: string]: string} = {} as any;
-  const encapsulation = componentDefinition.encapsulation;
+  const encapsulation = componentDefinition.encapsulation || ViewEncapsulation.Emulated;
+  const styles: string[] = componentDefinition.styles || EMPTY_ARRAY;
   const def: ComponentDefInternal<any> = {
     type: type,
     diPublic: null,
@@ -304,9 +306,10 @@ export function defineComponent<T>(componentDefinition: {
     data: componentDefinition.data || EMPTY,
     // TODO(misko): convert ViewEncapsulation into const enum so that it can be used directly in the
     // next line. Also `None` should be 0 not 2.
-    encapsulation: encapsulation == null ? 2 /* ViewEncapsulation.None */ : encapsulation,
-    id: `c${_renderCompCount++}`,
-    styles: EMPTY_ARRAY,
+    encapsulation,
+    providers: EMPTY_ARRAY,
+    viewProviders: EMPTY_ARRAY,
+    id: `c${_renderCompCount++}`, styles,
   };
   const feature = componentDefinition.features;
   feature && feature.forEach((fn) => fn(def));

packages/core/src/render3/interfaces/definition.ts

@@ -255,13 +255,13 @@ export interface ComponentDef<T, Selector extends string> extends DirectiveDef<T
    * Defines the set of injectable providers that are visible to a Directive and its content DOM
    * children.
    */
-  readonly providers?: Provider[];
+  readonly providers: Provider[]|null;
 
   /**
    * Defines the set of injectable providers that are visible to a Directive and its view DOM
    * children only.
    */
-  readonly viewProviders?: Provider[];
+  readonly viewProviders: Provider[]|null;
 
   /**
    * Registry of directives and components that may be found in this view.

packages/core/src/render3/jit/directive.ts

@@ -10,6 +10,7 @@ import {ConstantPool, R3DirectiveMetadata, WrappedNodeExpr, compileComponentFrom
 
 import {Component, Directive, HostBinding, HostListener, Input, Output} from '../../metadata/directives';
 import {componentNeedsResolution, maybeQueueResolutionOfComponentResources} from '../../metadata/resource_loading';
+import {ViewEncapsulation} from '../../metadata/view';
 import {Type} from '../../type';
 import {stringify} from '../../util';
 
@@ -73,6 +74,8 @@ export function compileComponent(type: Type<any>, metadata: Component): void {
               pipes: new Map(),
               viewQueries: [],
               wrapDirectivesInClosure: false,
+              styles: metadata.styles || [],
+              encapsulation: metadata.encapsulation || ViewEncapsulation.Emulated
             },
             constantPool, makeBindingParser());
         const preStatements = [...constantPool.statements, ...res.statements];