test(ivy): switch HelloWorld to ivy compiler (#22788)

PR Close #22788

packages/core/src/render3/assert.ts

@@ -52,6 +52,15 @@ export function assertNotNull<T>(actual: T, msg: string) {
   }
 }
 
+export function assertComponentType(
+    actual: any,
+    msg: string =
+        'Type passed in is not ComponentType, it does not have \'ngComponentDef\' property.') {
+  if (!actual.ngComponentDef) {
+    throwError(msg);
+  }
+}
+
 function throwError(msg: string): never {
   throw new Error(`ASSERTION ERROR: ${msg}`);
 }

packages/core/src/render3/component.ts

@@ -8,10 +8,11 @@
 
 // We are temporarily importing the existing viewEngine from core so we can be sure we are
 // correctly implementing its interfaces for backwards compatibility.
+import {Type} from '../core';
 import {Injector} from '../di/injector';
 import {ComponentRef as viewEngine_ComponentRef} from '../linker/component_factory';
 
-import {assertNotNull} from './assert';
+import {assertComponentType, assertNotNull} from './assert';
 import {queueInitHooks, queueLifecycleHooks} from './hooks';
 import {CLEAN_PROMISE, _getComponentHostLElementNode, baseDirectiveCreate, createLView, createTView, enterView, getRootView, hostElement, initChangeDetectorIfExisting, locateHostElement, renderComponentOrTemplate} from './instructions';
 import {ComponentDef, ComponentType} from './interfaces/definition';
@@ -113,9 +114,13 @@ export const NULL_INJECTOR: Injector = {
  * @param options Optional parameters which control bootstrapping
  */
 export function renderComponent<T>(
-    componentType: ComponentType<T>, opts: CreateComponentOptions = {}): T {
+    componentType: ComponentType<T>|
+        Type<T>/* Type as workaround for: Microsoft/TypeScript/issues/4881 */
+    ,
+    opts: CreateComponentOptions = {}): T {
+  ngDevMode && assertComponentType(componentType);
   const rendererFactory = opts.rendererFactory || domRendererFactory3;
-  const componentDef = componentType.ngComponentDef as ComponentDef<T>;
+  const componentDef = (componentType as ComponentType<T>).ngComponentDef as ComponentDef<T>;
   if (componentDef.type != componentType) componentDef.type = componentType;
   let component: T;
   const hostNode = locateHostElement(rendererFactory, opts.host || componentDef.tag);
@@ -135,7 +140,7 @@ export function renderComponent<T>(
   try {
     // Create element node at index 0 in data array
     elementNode = hostElement(hostNode, componentDef);
-    // Create directive instance with n() and store at index 1 in data array (el is 0)
+    // Create directive instance with factory() and store at index 1 in data array (el is 0)
     component = rootContext.component =
         baseDirectiveCreate(1, componentDef.factory(), componentDef) as T;
     initChangeDetectorIfExisting(elementNode.nodeInjector, component);

packages/core/test/bundling/hello_world/BUILD.bazel

@@ -1,11 +1,12 @@
 package(default_visibility = ["//visibility:public"])
 
-load("//tools:defaults.bzl", "ts_library")
+load("//tools:defaults.bzl", "ts_library", "ivy_ng_module")
 load("//tools/symbol-extractor:index.bzl", "js_expected_symbol_test")
 load("//packages/bazel/src:ng_rollup_bundle.bzl", "ng_rollup_bundle")
 load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver")
 
-ts_library(
+ivy_ng_module(
     name = "hello_world",
     srcs = ["index.ts"],
     deps = [
@@ -54,3 +55,13 @@ js_expected_symbol_test(
     src = ":bundle.min_debug.js",
     golden = ":bundle.golden_symbols.json",
 )
+
+ts_devserver(
+    name = "devserver",
+    static_files = [
+        ":bundle.min_debug.js",
+        ":bundle.min.js",
+        "index.html",
+    ],
+    deps = [],
+)

packages/core/test/bundling/hello_world/bundle.golden_symbols.json

@@ -8,6 +8,12 @@
   {
     "name": "EMPTY_RENDERER_TYPE_ID"
   },
+  {
+    "name": "HelloWorld"
+  },
+  {
+    "name": "INeedToExistEvenThoughtIAmNotNeeded"
+  },
   {
     "name": "NG_HOST_SYMBOL"
   },
@@ -68,6 +74,9 @@
   {
     "name": "defineComponent"
   },
+  {
+    "name": "defineInjector"
+  },
   {
     "name": "detectChangesInternal"
   },

packages/core/test/bundling/hello_world/index.html

@@ -0,0 +1,31 @@
+<!doctype html>
+
+<html>
+  <head>
+    <title>Angular Hello World Example</title>
+  </head>
+  <body>
+    <!-- The Angular application will be bootstrapped into this element. -->
+    <hello-world></hello-world>
+
+    <!-- 
+      Script tag which bootstraps the application. Use `?debug` in URL to select
+      the debug version of the script.
+      
+      There are two scripts sources: `bundle.min.js` and `bundle.min_debug.js` You can 
+      switch between which bundle the browser loads to experiment with the application.
+
+      - `bundle.min.js`: Is what the site would serve to their users. It has gone
+        through rollup, build-optimizer, and uglify with tree shaking.
+      - `bundle.min_debug.js`: Is what the developer would like to see when debugging
+        the application. It has also done through full pipeline of rollup, build-optimizer,
+        and uglify, however special flags were passed to uglify to prevent inlining and
+        property renaming.
+    -->
+    <script>
+        document.write('<script src="' + 
+          (document.location.search.endsWith('debug') ? '/bundle.min_debug.js' : '/bundle.min.js') + 
+          '"></' + 'script>');
+    </script>
+  </body>
+</html>

packages/core/test/bundling/hello_world/index.ts

@@ -6,19 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ɵT as T, ɵdefineComponent as defineComponent, ɵrenderComponent as renderComponent} from '@angular/core';
+import {Component, NgModule, ɵrenderComponent as renderComponent} from '@angular/core';
 
-class HelloWorld {
-  static ngComponentDef = defineComponent({
-    type: HelloWorld,
-    tag: 'hello-world',
-    factory: () => new HelloWorld(),
-    template: function HelloWorldTemplate(ctx: HelloWorld, cm: boolean) {
-      if (cm) {
-        T(0, 'Hello World!');
-      }
-    }
-  });
+@Component({selector: 'hello-world', template: 'Hello World!'})
+export class HelloWorld {
 }
+// TODO(misko): Forgetting to export HelloWorld and not having NgModule fails silently.
+
+@NgModule({declarations: [HelloWorld]})
+export class INeedToExistEvenThoughtIAmNotNeeded {
+}
+// TODO(misko): Package should not be required to make this work.
 
 renderComponent(HelloWorld);