extern/kalker
1
0
Fork 0
mirror of https://github.com/PaddiM8/kalker.git synced 2025-01-31 08:59:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

Set up kalk_web development environment

Browse Source
This commit is contained in:
PaddiM8 2021-01-04 00:38:59 +01:00
parent 44e78a5740
commit cf46d9a5dd
5 changed files with 18 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
kalk_web/package.json
View File

@ -60,4 +60,4 @@
"browserslist": [
"defaults"
]
}
}

14
kalk_web/public/index.html
View File

@ -8,13 +8,23 @@
<title>Svelte app</title>
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="stylesheet" href="/build/bundle.css">
<script defer src="/build/bundle.js"></script>
<style>
.calculator {
width: 800px;
height: 350px;
font-family: "Hack", monospace, Consolas;
font-size: 14px;
}
</style>
</head>
<body>
<noscript>Please enable JavaScript to view this application.</noscript>
<div class="calculator">
<kalk-calculator />
</div>
</body>
</html>

11
kalk_web/src/KalkCalculator.svelte
View File

@ -8,6 +8,7 @@
export let hintColor = "#9c9c9c";
export let linkColor = "cornflowerblue";
export let backgroundColor = "#424242";
export let textColor = "white";
let outputLines: string[] = [];
let outputElement: HTMLElement;
@ -169,12 +170,9 @@
</script>
<style lang="scss">
$font: "Hack", monospace, Consolas, sans-serif; /* TODO: import font */
.calculator {
width: 100%;
height: 100%;
font-family: $font;
}
.output {
@ -186,8 +184,6 @@
padding-bottom: 0;
box-sizing: border-box;
font-size: 1.4em;
font-family: $font;
color: white;
overflow: auto;
}
@ -211,7 +207,6 @@
.prompt,
.input {
background-color: inherit;
font-family: $font;
}
.input {
@ -223,7 +218,7 @@
<svelte:options tag="kalk-calculator" />
<div class="calculator" style="background-color: {backgroundColor}">
<div class="output" bind:this={outputElement}>
<div class="output" style="color: {textColor}" bind:this={outputElement}>
<p class="consoleLine">kalk</p>
<p class="consoleLine">
<span style="color: {hintColor}">Type 'help' for instructions.</span>
@ -237,7 +232,7 @@
<div class="input-area">
<span class="prompt" style="color: {promptColor}">&gt;&gt;&nbsp;</span>
{#await import('@paddim8/kalk')}
Loading...
<span style="color: {textColor}">Loading...</span>
{:then kalk}
<div
contenteditable="true"

11
kalk_web/src/main-dev.ts
View File

@ -1,11 +0,0 @@
import KalkCalculator from './KalkCalculator.svelte';
const app = new KalkCalculator({
target: document.body
});
export default app;
export {
KalkCalculator,
}

5
kalk_web/webpack.config.ts
View File

@ -22,7 +22,7 @@ const sourceMapsInProduction = false;
* Should we run Babel on builds? This will transpile your bundle in order to work on your target browsers (see the
* `browserslist` property in your package.json), but will impact bundle size and build speed.
*/
const useBabel = true;
const useBabel = false;
/**
* Should we run Babel on development builds? If set to `false`, only production builds will be transpiled. If you're
@ -60,13 +60,12 @@ const config: webpack.Configuration & WebpackDevServer.Configuration = {
use: {
loader: 'svelte-loader-hot',
options: {
customElement: true,
customElement: prod,
dev: !prod,
emitCss: prod,
hotReload: !prod,
hotOptions: {
// List of options and defaults: https://www.npmjs.com/package/svelte-loader-hot#usage
customElement: true,
noPreserveState: false,
optimistic: true,
},