I'm building an electron app with stencil. I have the newest version but Electron starts with index.html instead of app-home.tsx. Also I get an error for a JSX.Element but I don't know why. Maybe this is the reason why. May you could help me? I don't know what to do. Did I do sth wrong? I have updatet stencil-router, stencil-core and stencil itself. I doesn't start app-roote.tsx.
app-roote.tsx
import { Component, h } from '@stencil/core';
@Component({
tag: 'app-root',
styleUrl: 'app-root.css',
shadow: true
})
export class AppRoot {
render() {
return (
<div>
<header>
</header>
<main>
<stencil-router historyType="hash">
<stencil-route-switch scrollTopOffset={0}>
<stencil-route url='/' component='app-home' exact={true} />
<stencil-route url='/profile/:name' component='app-profile' />
<stencil-route url='/bewertung' component='app-bewertung' />
</stencil-route-switch>
</stencil-router>
</main>
<footer>
</footer>
</div>
);
}
}
state-tunnel.d.ts:
import '../stencil.core';
import { FunctionalComponent } from "../stencil.core";
import { SubscribeCallback } from '../declarations';
declare function defaultConsumerRender(subscribe: SubscribeCallback<string>, renderer: Function): JSX.Element; //there is the error and in all JSX
export declare function createProviderConsumer<T extends object>(defaultState: T, consumerRender?: typeof defaultConsumerRender): {
Provider: FunctionalComponent<{
state: T;
}>;
Consumer: FunctionalComponent<{}>;
wrapConsumer: (childComponent: any, fieldList: Extract<keyof T, string>[]) => ({ children, ...props }: any) => JSX.Element;
injectProps: (childComponent: any, fieldList: Extract<keyof T, string>[]) => void;
};
export {};
Index.html:
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>Stencil Starter App</title>
<meta name="Description" content="Welcome to the Stencil App Starter. You can use this starter to build entire apps all with web components using Stencil!">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=8.0">
<meta name="theme-color" content="#16161d">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="x-ua-compatible" content="IE=Edge"/>
<link href="/Praesentationsbewerter/stencil-electron-st/src/global/app.css" rel="stylesheet">
<script 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">
<link rel="manifest" href="/manifest.json">
</head>
<body>
<header-leonie></header-leonie>
<app-root></app-root>
<footer-leonie></footer-leonie>
</body>
</html>
app-home.tsx:
import { Component, h } from '@stencil/core';
@Component({
tag: 'app-home',
styleUrl: 'app-home.css',
shadow: true
})
export class AppHome {
render() {
return (
<div class='app-home'>
<p>
Herzlich Willkommen beim Präsentationsbewerter
</p>
<stencil-route-link url='/profile/stencil'>
<button>
Starten
</button>
</stencil-route-link>
</div>
);
}
}
Top comments (0)