mirrors/svelte
mirrors/svelte
0
0
Fork 0
mirror of https://github.com/sveltejs/svelte.git synced 2024-12-01 17:30:59 +01:00
Code Issues Releases Wiki Activity

spruce up compiler options

Browse Source
This commit is contained in:
Rich Harris 2018-12-24 08:58:47 -05:00
parent 29e876d147
commit 5aa0ad95e2
2 changed files with 147 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

144
site/src/routes/repl/_components/Output/CompilerOptions.html Normal file
View File

@ -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>

44
site/src/routes/repl/_components/Output/index.html
View File

@ -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}