spruce up compiler options

site/src/routes/repl/_components/Output/CompilerOptions.html

@@ -0,0 +1,144 @@
+<script>
+	export let options;
+</script>
+
+<style>
+	.options {
+		padding: 0 1rem;
+		font-family: var(--font-ui);
+		font-size: 1.3rem;
+		color: #999;
+	}
+
+	.option {
+		display: block;
+		padding: 0 0 0 1.25em;
+		white-space: nowrap;
+		color: var(--text);
+		user-select: none;
+	}
+
+	.key {
+		display: inline-block;
+		width: 9em;
+	}
+
+	.string {
+		color: hsl(41, 37%, 45%);
+	}
+
+	.boolean {
+		color: hsl(45, 7%, 45%);
+	}
+
+	label {
+		display: inline-block;
+	}
+
+	label[for] {
+		color: var(--string);
+	}
+
+	input[type=checkbox] {
+		top: -1px;
+	}
+
+	input[type=radio] {
+		position: absolute;
+		top: auto;
+		overflow: hidden;
+		clip: rect(1px, 1px, 1px, 1px);
+		width: 1px;
+		height: 1px;
+		white-space: nowrap;
+	}
+
+	input[type=radio] + label {
+		padding: 0 0 0 1.6em;
+		margin: 0 0.6em 0 0;
+		opacity: 0.7;
+	}
+
+	input[type=radio]:checked + label {
+		opacity: 1;
+	}
+
+	/* input[type=radio]:focus + label {
+		color: #00f;
+		outline: 1px dotted #00f;
+	} */
+
+	input[type=radio] + label:before {
+		content: '';
+		background: #eee;
+		display: block;
+		box-sizing: border-box;
+		float: left;
+		width: 1.5rem;
+		height: 1.5rem;
+		margin-left: -2.1rem;
+		margin-top: 0.4rem;
+		vertical-align: top;
+		cursor: pointer;
+		text-align: center;
+		transition: box-shadow 0.1s ease-out;
+	}
+
+	input[type=radio] + label:before {
+		background-color: var(--second);
+		border-radius: 100%;
+		box-shadow: inset 0 0 0 0.5em rgba(255, 255, 255, .95);
+		border: 1px solid var(--second);
+	}
+
+	input[type=radio]:checked + label:before {
+		background-color: var(--second);
+		box-shadow: inset 0 0 0 .15em rgba(255, 255, 255, .95);
+		border: 1px solid var(--second);
+		transition: box-shadow 0.2s ease-out;
+	}
+</style>
+
+<div class="options">
+	result = svelte.compile(source, &#123;
+	<div class="option">
+		<span class="key">generate:</span>
+
+		<input id="dom-input" type="radio" bind:group={options.generate} value="dom">
+		<label for="dom-input"><span class="string">"dom"</span></label>
+
+		<input id="ssr-input" type="radio" bind:group={options.generate} value="ssr">
+		<label for="ssr-input"><span class="string">"ssr"</span>,</label>
+	</div>
+
+	<label class="option">
+		<span class="key">dev:</span>
+		<input type="checkbox" bind:checked={options.dev}> <span class="boolean">{options.dev}</span>,
+	</label>
+
+	<label class="option">
+		<span class="key">css:</span>
+		<input type="checkbox" bind:checked={options.css}> <span class="boolean">{options.css}</span>,
+	</label>
+
+	<label class="option">
+		<span class="key">hydratable:</span>
+		<input type="checkbox" bind:checked={options.hydratable}> <span class="boolean">{options.hydratable}</span>,
+	</label>
+
+	<label class="option">
+		<span class="key">customElement:</span>
+		<input type="checkbox" bind:checked={options.customElement}> <span class="boolean">{options.customElement}</span>,
+	</label>
+
+	<label class="option">
+		<span class="key">immutable:</span>
+		<input type="checkbox" bind:checked={options.immutable}> <span class="boolean">{options.immutable}</span>,
+	</label>
+
+	<label class="option">
+		<span class="key">legacy:</span>
+		<input type="checkbox" bind:checked={options.legacy}> <span class="boolean">{options.legacy}</span>
+	</label>
+	});
+</div>

site/src/routes/repl/_components/Output/index.html

@@ -1,6 +1,7 @@
 <script>
 	import SplitPane from '../SplitPane.html';
 	import Viewer from './Viewer.html';
+	import CompilerOptions from './CompilerOptions.html';
 	import PropEditor from './PropEditor.html';
 	import CodeMirror from '../CodeMirror.html';
 
@@ -68,7 +69,7 @@
 		color: #333;
 	}
 
-	div {
+	div[slot] {
 		height: 100%;
 	}
 
@@ -94,17 +95,6 @@
 		grid-gap: 0.5em;
 		overflow-y: auto;
 	}
-
-	.options {
-		padding: 0.5em;
-	}
-
-	label {
-		font-family: var(--font-ui);
-		font-size: 1.3rem;
-		padding: 0.2rem 1.2rem;
-		display: block;
-	}
 </style>
 
 <div class="view-toggle">
@@ -187,35 +177,7 @@
 		<section slot="b">
 			<h3>Compiler options</h3>
 
-			<!-- TODO style radio buttons -->
-			<label>
-				<input type="radio" bind:group={compileOptions.generate} value="dom"> dom
-				<input type="radio" bind:group={compileOptions.generate} value="ssr"> ssr
-			</label>
-
-			<label>
-				<input type="checkbox" bind:checked={compileOptions.dev}> dev
-			</label>
-
-			<label>
-				<input type="checkbox" bind:checked={compileOptions.css}> css
-			</label>
-
-			<label>
-				<input type="checkbox" bind:checked={compileOptions.hydratable}> hydratable
-			</label>
-
-			<label>
-				<input type="checkbox" bind:checked={compileOptions.customElement}> customElement
-			</label>
-
-			<label>
-				<input type="checkbox" bind:checked={compileOptions.immutable}> immutable
-			</label>
-
-			<label>
-				<input type="checkbox" bind:checked={compileOptions.legacy}> legacy
-			</label>
+			<CompilerOptions bind:options={compileOptions}/>
 		</section>
 	</SplitPane>
 {/if}