Allow class component to be referred to in JSX by the class object

src/compiler/transformers/remove-static-meta-properties.ts

@@ -18,7 +18,6 @@ export const removeStaticMetaProperties = (classNode: ts.ClassDeclaration) => {
 };
 
 const REMOVE_STATIC_GETTERS = new Set([
-  'is',
   'properties',
   'encapsulation',
   'elementRef',

src/compiler/transformers/test/lazy-component.spec.ts

@@ -4,7 +4,9 @@ import { lazyComponentTransform } from '../component-lazy/transform-lazy-compone
 import { mockCompilerCtx } from '@stencil/core/testing';
 
 describe('lazy-component', () => {
-  it('add registerInstance() to constructor w/ decorator on class', () => {
+  let t: ReturnType<typeof transpileModule>;
+
+  beforeEach(() => {
     const compilerCtx = mockCompilerCtx();
     const transformOpts: d.TransformOptions = {
       coreImportPath: '@stencil/core',
@@ -26,9 +28,15 @@ describe('lazy-component', () => {
 
     const transformer = lazyComponentTransform(compilerCtx, transformOpts);
 
-    const t = transpileModule(code, null, compilerCtx, null, [], [transformer]);
+    t = transpileModule(code, null, compilerCtx, null, [], [transformer]);
+  });
 
+  it('add registerInstance() to constructor w/ decorator on class', () => {
     expect(t.outputText).toContain(`import { registerInstance as __stencil_registerInstance } from "@stencil/core"`);
     expect(t.outputText).toContain(`__stencil_registerInstance(this, hostRef)`);
   });
+
+  it('has `static get is()` which returns correct component tag name', () => {
+    expect(t.outputText).toContain(`static get is() { return "cmp-a"; }`);
+  });
 });

src/runtime/vdom/h.ts

@@ -17,6 +17,7 @@ import { isComplexType } from '@utils';
 // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, child?: d.ChildType): d.VNode;
 // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
 export const h = (nodeName: any, vnodeData: any, ...children: d.ChildType[]): d.VNode => {
+  if (typeof nodeName === 'function' && 'is' in nodeName){ nodeName = nodeName.is; }
   let child = null;
   let key: string = null;
   let slotName: string = null;

src/runtime/vdom/test/h.spec.ts

@@ -15,6 +15,31 @@ describe('h()', () => {
     expect(vnode.$tag$).toEqual('fn-cmp');
   });
 
+  it('should render class component', () => {
+    const ClassCmp = class {
+      render() { return  h('inner-div', null); }
+      static get is() { return 'class-cmp-1'; }
+    };
+    const vnode = h(ClassCmp, null);
+    expect(vnode.$tag$).toEqual('class-cmp-1');
+  });
+
+  it('should render class components with a child being a class component', () => {
+    const ClassCmp1 = class {
+      render() { return  h('inner-div', null); }
+      static get is() { return 'class-cmp-1'; }
+    };
+    const ClassCmp2 = class {
+      render() { return  h(ClassCmp1, null); }
+      static get is() { return 'class-cmp-2'; }
+    };
+    const vnode = h(ClassCmp2, null, h(ClassCmp1, null));
+    expect(vnode.$tag$).toEqual('class-cmp-2');
+    expect(vnode.$children$).toBeDefined();
+    expect(vnode.$children$.length).toBe(1);
+    expect(vnode.$children$[0].$tag$).toBe('class-cmp-1');
+  });
+
   it('should get vnode with only tag string', () => {
     const vnode = h('div', null);
     expect(vnode.$tag$).toEqual('div');