extern/kalker
1
0
Fork 0
mirror of https://github.com/PaddiM8/kalker.git synced 2025-06-24 03:31:38 +02: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 6515dd6082
commit bd625fdfde
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": [ "browserslist": [
"defaults" "defaults"
] ]
} }

14
kalk_web/public/index.html
View File

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

11
kalk_web/src/KalkCalculator.svelte
View File

@ -8,6 +8,7 @@
export let hintColor = "#9c9c9c"; export let hintColor = "#9c9c9c";
export let linkColor = "cornflowerblue"; export let linkColor = "cornflowerblue";
export let backgroundColor = "#424242"; export let backgroundColor = "#424242";
export let textColor = "white";
let outputLines: string[] = []; let outputLines: string[] = [];
let outputElement: HTMLElement; let outputElement: HTMLElement;
@ -169,12 +170,9 @@
</script> </script>
<style lang="scss"> <style lang="scss">
$font: "Hack", monospace, Consolas, sans-serif; /* TODO: import font */
.calculator { .calculator {
width: 100%; width: 100%;
height: 100%; height: 100%;
font-family: $font;
} }
.output { .output {
@ -186,8 +184,6 @@
padding-bottom: 0; padding-bottom: 0;
box-sizing: border-box; box-sizing: border-box;
font-size: 1.4em; font-size: 1.4em;
font-family: $font;
color: white;
overflow: auto; overflow: auto;
} }
@ -211,7 +207,6 @@
.prompt, .prompt,
.input { .input {
background-color: inherit; background-color: inherit;
font-family: $font;
} }
.input { .input {
@ -223,7 +218,7 @@
<svelte:options tag="kalk-calculator" /> <svelte:options tag="kalk-calculator" />
<div class="calculator" style="background-color: {backgroundColor}"> <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">kalk</p>
<p class="consoleLine"> <p class="consoleLine">
<span style="color: {hintColor}">Type 'help' for instructions.</span> <span style="color: {hintColor}">Type 'help' for instructions.</span>
@ -237,7 +232,7 @@
<div class="input-area"> <div class="input-area">
<span class="prompt" style="color: {promptColor}">&gt;&gt;&nbsp;</span> <span class="prompt" style="color: {promptColor}">&gt;&gt;&nbsp;</span>
{#await import('@paddim8/kalk')} {#await import('@paddim8/kalk')}
Loading... <span style="color: {textColor}">Loading...</span>
{:then kalk} {:then kalk}
<div <div
contenteditable="true" 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 * 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. * `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 * 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: { use: {
loader: 'svelte-loader-hot', loader: 'svelte-loader-hot',
options: { options: {
customElement: true, customElement: prod,
dev: !prod, dev: !prod,
emitCss: prod, emitCss: prod,
hotReload: !prod, hotReload: !prod,
hotOptions: { hotOptions: {
// List of options and defaults: https://www.npmjs.com/package/svelte-loader-hot#usage // List of options and defaults: https://www.npmjs.com/package/svelte-loader-hot#usage
customElement: true,
noPreserveState: false, noPreserveState: false,
optimistic: true, optimistic: true,
}, },