get demo working

packages/demo/package.json

@@ -10,7 +10,7 @@
     "test.watch": "jest --watch"
   },
   "dependencies": {
-    "@stencil/router": "^0.2.7-1"
+    "@stencil/router": "../router"
   },
   "jest": {
     "transform": {

packages/demo/src/components.d.ts

@@ -1,115 +1,52 @@
-/**
-* This is an autogenerated file created by the Stencil compiler.
-* It contains typing information for all components that exist in this project.
-*/
 /* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
 
-import '@stencil/core';
 
-import '@stencil/router';
-import '@stencil/state-tunnel';
+import { HTMLStencilElement, JSXBase } from '@stencil/core/internal';
 import {
   LocationSegments,
   MatchResults,
   RouterHistory,
 } from '@stencil/router';
 
-
 export namespace Components {
-
   interface RouterDemoApp {}
-  interface RouterDemoAppAttributes extends StencilHTMLAttributes {}
-
   interface TestDeepComponent {
     'history'?: RouterHistory;
     'location'?: LocationSegments;
   }
-  interface TestDeepComponentAttributes extends StencilHTMLAttributes {
-    'history'?: RouterHistory;
-    'location'?: LocationSegments;
-  }
-
   interface TestDemoEight {}
-  interface TestDemoEightAttributes extends StencilHTMLAttributes {}
-
   interface TestDemoFour {
     'history'?: RouterHistory;
     'match': MatchResults | null;
     'pages': string[];
   }
-  interface TestDemoFourAttributes extends StencilHTMLAttributes {
-    'history'?: RouterHistory;
-    'match'?: MatchResults | null;
-    'pages'?: string[];
-  }
-
   interface TestDemoSeven {
     'history'?: RouterHistory;
     'match'?: MatchResults;
     'pages'?: string[];
   }
-  interface TestDemoSevenAttributes extends StencilHTMLAttributes {
-    'history'?: RouterHistory;
-    'match'?: MatchResults;
-    'pages'?: string[];
-  }
-
   interface TestDemoSix {
     'history'?: RouterHistory;
     'match': MatchResults | null;
     'pages'?: string[];
   }
-  interface TestDemoSixAttributes extends StencilHTMLAttributes {
-    'history'?: RouterHistory;
-    'match'?: MatchResults | null;
-    'pages'?: string[];
-  }
-
   interface TestDemoThree {
     'history'?: RouterHistory;
     'match': MatchResults | null;
     'pages'?: string[];
   }
-  interface TestDemoThreeAttributes extends StencilHTMLAttributes {
-    'history'?: RouterHistory;
-    'match'?: MatchResults | null;
-    'pages'?: string[];
-  }
-
   interface TestRouteGuard {
     'history'?: RouterHistory;
     'match': MatchResults | null;
     'pages'?: string[];
   }
-  interface TestRouteGuardAttributes extends StencilHTMLAttributes {
-    'history'?: RouterHistory;
-    'match'?: MatchResults | null;
-    'pages'?: string[];
-  }
 }
 
 declare global {
-  interface StencilElementInterfaces {
-    'RouterDemoApp': Components.RouterDemoApp;
-    'TestDeepComponent': Components.TestDeepComponent;
-    'TestDemoEight': Components.TestDemoEight;
-    'TestDemoFour': Components.TestDemoFour;
-    'TestDemoSeven': Components.TestDemoSeven;
-    'TestDemoSix': Components.TestDemoSix;
-    'TestDemoThree': Components.TestDemoThree;
-    'TestRouteGuard': Components.TestRouteGuard;
-  }
-
-  interface StencilIntrinsicElements {
-    'router-demo-app': Components.RouterDemoAppAttributes;
-    'test-deep-component': Components.TestDeepComponentAttributes;
-    'test-demo-eight': Components.TestDemoEightAttributes;
-    'test-demo-four': Components.TestDemoFourAttributes;
-    'test-demo-seven': Components.TestDemoSevenAttributes;
-    'test-demo-six': Components.TestDemoSixAttributes;
-    'test-demo-three': Components.TestDemoThreeAttributes;
-    'test-route-guard': Components.TestRouteGuardAttributes;
-  }
 
 
   interface HTMLRouterDemoAppElement extends Components.RouterDemoApp, HTMLStencilElement {}
@@ -159,19 +96,7 @@ declare global {
     prototype: HTMLTestRouteGuardElement;
     new (): HTMLTestRouteGuardElement;
   };
-
   interface HTMLElementTagNameMap {
-    'router-demo-app': HTMLRouterDemoAppElement
-    'test-deep-component': HTMLTestDeepComponentElement
-    'test-demo-eight': HTMLTestDemoEightElement
-    'test-demo-four': HTMLTestDemoFourElement
-    'test-demo-seven': HTMLTestDemoSevenElement
-    'test-demo-six': HTMLTestDemoSixElement
-    'test-demo-three': HTMLTestDemoThreeElement
-    'test-route-guard': HTMLTestRouteGuardElement
-  }
-
-  interface ElementTagNameMap {
     'router-demo-app': HTMLRouterDemoAppElement;
     'test-deep-component': HTMLTestDeepComponentElement;
     'test-demo-eight': HTMLTestDemoEightElement;
@@ -181,14 +106,60 @@ declare global {
     'test-demo-three': HTMLTestDemoThreeElement;
     'test-route-guard': HTMLTestRouteGuardElement;
   }
+}
+
+declare namespace LocalJSX {
+  interface RouterDemoApp extends JSXBase.HTMLAttributes<HTMLRouterDemoAppElement> {}
+  interface TestDeepComponent extends JSXBase.HTMLAttributes<HTMLTestDeepComponentElement> {
+    'history'?: RouterHistory;
+    'location'?: LocationSegments;
+  }
+  interface TestDemoEight extends JSXBase.HTMLAttributes<HTMLTestDemoEightElement> {}
+  interface TestDemoFour extends JSXBase.HTMLAttributes<HTMLTestDemoFourElement> {
+    'history'?: RouterHistory;
+    'match'?: MatchResults | null;
+    'pages'?: string[];
+  }
+  interface TestDemoSeven extends JSXBase.HTMLAttributes<HTMLTestDemoSevenElement> {
+    'history'?: RouterHistory;
+    'match'?: MatchResults;
+    'pages'?: string[];
+  }
+  interface TestDemoSix extends JSXBase.HTMLAttributes<HTMLTestDemoSixElement> {
+    'history'?: RouterHistory;
+    'match'?: MatchResults | null;
+    'pages'?: string[];
+  }
+  interface TestDemoThree extends JSXBase.HTMLAttributes<HTMLTestDemoThreeElement> {
+    'history'?: RouterHistory;
+    'match'?: MatchResults | null;
+    'pages'?: string[];
+  }
+  interface TestRouteGuard extends JSXBase.HTMLAttributes<HTMLTestRouteGuardElement> {
+    'history'?: RouterHistory;
+    'match'?: MatchResults | null;
+    'pages'?: string[];
+  }
+
+  interface IntrinsicElements {
+    'router-demo-app': RouterDemoApp;
+    'test-deep-component': TestDeepComponent;
+    'test-demo-eight': TestDemoEight;
+    'test-demo-four': TestDemoFour;
+    'test-demo-seven': TestDemoSeven;
+    'test-demo-six': TestDemoSix;
+    'test-demo-three': TestDemoThree;
+    'test-route-guard': TestRouteGuard;
+  }
+}
 
+export { LocalJSX as JSX };
 
+
+declare module "@stencil/core" {
   export namespace JSX {
-    export interface Element {}
-    export interface IntrinsicElements extends StencilIntrinsicElements {
-      [tagName: string]: any;
-    }
+    interface IntrinsicElements extends LocalJSX.IntrinsicElements {}
   }
-  export interface HTMLAttributes extends StencilHTMLAttributes {}
-
 }
+
+

packages/demo/src/components/router-demo-app.tsx

@@ -1,4 +1,4 @@
-import { Component, FunctionalComponent } from '@stencil/core';
+import { Component, FunctionalComponent, h } from '@stencil/core';
 
 const PrivateRoute: FunctionalComponent<{url: string, routeRender: Function }> = ({ url, routeRender }) => (
   <stencil-route url={url} routeRender={

packages/demo/src/components/test-deep-component.tsx

@@ -1,12 +1,12 @@
-import { Component, Element, Prop } from '@stencil/core';
+import { Component, Element, Prop, h } from '@stencil/core';
 import { RouterHistory, LocationSegments, injectHistory } from '@stencil/router';
 
 @Component({
   tag: 'test-deep-component'
 })
 export class TestDeepComponent {
 
-  @Element() el!: HTMLStencilElement;
+  @Element() el!: HTMLElement;
   @Prop() history?: RouterHistory;
   @Prop() location?: LocationSegments;
 

packages/demo/src/components/test-demo-eight.tsx

@@ -1,4 +1,4 @@
-import { Component } from '@stencil/core';
+import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'test-demo-eight'

packages/demo/src/components/test-demo-four.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop } from '@stencil/core';
+import { Component, Prop, h } from '@stencil/core';
 import { RouterHistory, MatchResults } from '@stencil/router';
 
 @Component({

packages/demo/src/components/test-demo-seven.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop } from '@stencil/core';
+import { Component, Prop, h } from '@stencil/core';
 import { RouterHistory, MatchResults } from '@stencil/router';
 
 @Component({

packages/demo/src/components/test-demo-six.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop } from '@stencil/core';
+import { Component, Prop, h } from '@stencil/core';
 import { RouterHistory, MatchResults } from '@stencil/router';
 
 @Component({

packages/demo/src/components/test-demo-three.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop } from '@stencil/core';
+import { Component, Prop, h } from '@stencil/core';
 import { RouterHistory, MatchResults } from '@stencil/router';
 
 @Component({

packages/demo/src/components/test-route-guard.tsx

@@ -1,4 +1,4 @@
-import { Component, ComponentInterface, Prop, State } from '@stencil/core';
+import { Component, ComponentInterface, Prop, State, h } from '@stencil/core';
 import { RouterHistory, MatchResults } from '@stencil/router';
 
 @Component({
@@ -19,7 +19,7 @@ export class TestRouteGuard implements ComponentInterface {
   render() {
     return (
       <div>
-        <stencil-router-prompt when={this.routeGuardBlock} message={'you are still editing'}></stencil-router-prompt>
+        <stencil-router-prompt when={this.routeGuardBlock} message={'Hi Thai'}></stencil-router-prompt>
 
         {this.routeGuardBlock ?
           <span>You are currently blocked</span> :

packages/demo/src/index.html

@@ -10,7 +10,8 @@
   <meta http-equiv="x-ua-compatible" content="IE=Edge"/>
 
   <link href="/build/app.css" rel="stylesheet">
-  <script src="/build/app.js"></script>
+  <script type="module" src="/build/app.esm.js"></script>
+  <script nomodule src="/build/app.js"></script>
 
   <link rel="apple-touch-icon" href="/assets/icon/icon.png">
   <link rel="icon" type="image/x-icon" href="/assets/icon/favicon.ico">