Skip to content

Instantly share code, notes, and snippets.

@stemcstudio

stemcstudio/App.svelte

Last active October 19, 2022 16:36
Show Gist options
  • Save stemcstudio/fa08e4f584c5193cb5c50781ac4e7151 to your computer and use it in GitHub Desktop.
Save stemcstudio/fa08e4f584c5193cb5c50781ac4e7151 to your computer and use it in GitHub Desktop.
Download ZIP
Svelte Bindings - Group inputs
Raw
README.md

Svelte Template

Some things to note about Svelte projects in STEMCstudio.

  • The Svelte file must have the extension .svelte in order to be recognized as Svelte code.
  • A file called Foo.svelte will be compiled by STEMCstudio and the Svelte compiler to Foo.svelte.ts, which means that the module name for the file will be ./Foo.svelte This module name is what you will use when importing the Svelte code into other files.
  • The target TypeScript compiler option in tsconfig.json must be set to es2015 or later. Note that the tsconfig.json file may be hidden from the Explorer if the Hide Configuration Files option is checked in Project Settings. Make sure this option is unchecked in order to make tsconfig.json visible.
  • The package svelte must be added as a project dependency. This can be done in the Dependencies section of the Project Settings dialog. Alternatively, the dependency can be added by editing the package.jon file. Note that the package.json file may be hidden from the Explorer if the Hide Configuration Files option is checked in Project Settings. Make sure this option is unchecked in order to make package.json visible.
Raw
App.svelte
<script>
let scoops = 1;
let flavours = ['Mint choc chip'];
let menu = [
'Cookies and cream',
'Mint choc chip',
'Raspberry ripple'
];
function join(flavours) {
if (flavours.length === 1) return flavours[0];
return `${flavours.slice(0, -1).join(', ')} and ${flavours[flavours.length - 1]}`;
}
</script>
<h2>Size</h2>
<label>
<input type=radio bind:group={scoops} value={1}>
One scoop
</label>
<label>
<input type=radio bind:group={scoops} value={2}>
Two scoops
</label>
<label>
<input type=radio bind:group={scoops} value={3}>
Three scoops
</label>
<h2>Flavours</h2>
{#each menu as flavour}
<label>
<input type=checkbox bind:group={flavours} value={flavour}>
{flavour}
</label>
{/each}
{#if flavours.length === 0}
<p>Please select at least one flavour</p>
{:else if flavours.length > scoops}
<p>Can't order more flavours than scoops!</p>
{:else}
<p>
You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
of {join(flavours)}
</p>
{/if}
Raw
generated.index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<base href="/">
<style>
body {
background-color: #ffffff;
}
</style>
<script src="http://localhost:4200/assets/js/[email protected]/system.js"></script>
</head>
<body>
<script>
System.config({
"warnings": false,
"map": {
"svelte": "https://unpkg.com/[email protected]/index.js",
"svelte/animate": "https://unpkg.com/[email protected]/animate/index.js",
"svelte/easing": "https://unpkg.com/[email protected]/easing/index.js",
"svelte/internal": "https://unpkg.com/[email protected]/internal/index.js",
"svelte/motion": "https://unpkg.com/[email protected]/motion/index.js",
"svelte/store": "https://unpkg.com/[email protected]/store/index.js",
"svelte/transition": "https://unpkg.com/[email protected]/transition/index.js"
}
});
</script>
<div id="root"></div>
<script>
System.register("./index.js", ["./App.svelte.js"], function (exports_1, context_1) {
"use strict";
var App_svelte_1;
var __moduleName = context_1 && context_1.id;
return {
setters: [
function (App_svelte_1_1) {
App_svelte_1 = App_svelte_1_1;
}
],
execute: function () {
new App_svelte_1.default({ target: document.querySelector("#root"), props: {} });
}
};
});
System.register("./App.svelte.js", ["svelte/internal"], function (exports_1, context_1) {
"use strict";
var internal_1, App;
var __moduleName = context_1 && context_1.id;
function get_each_context(ctx, list, i) {
const child_ctx = ctx.slice();
child_ctx[8] = list[i];
return child_ctx;
}
function create_each_block(ctx) {
let label;
let input;
let input_value_value;
let t0;
let t1_value = ctx[8] + "";
let t1;
let mounted;
let dispose;
return {
c() {
label = internal_1.element("label");
input = internal_1.element("input");
t0 = internal_1.space();
t1 = internal_1.text(t1_value);
internal_1.attr(input, "type", "checkbox");
input.__value = input_value_value = ctx[8];
input.value = input.__value;
ctx[4][0].push(input);
},
m(target, anchor) {
internal_1.insert(target, label, anchor);
internal_1.append(label, input);
input.checked = ~ctx[1].indexOf(input.__value);
internal_1.append(label, t0);
internal_1.append(label, t1);
if (!mounted) {
dispose = internal_1.listen(input, "change", ctx[7]);
mounted = true;
}
},
p(ctx, dirty) {
if (dirty & 2) {
input.checked = ~ctx[1].indexOf(input.__value);
}
},
d(detaching) {
if (detaching)
internal_1.detach(label);
ctx[4][0].splice(ctx[4][0].indexOf(input), 1);
mounted = false;
dispose();
}
};
}
function create_else_block(ctx) {
let p;
let t0;
let t1;
let t2;
let t3_value = (ctx[0] === 1 ? 'scoop' : 'scoops') + "";
let t3;
let t4;
let t5_value = join(ctx[1]) + "";
let t5;
return {
c() {
p = internal_1.element("p");
t0 = internal_1.text("You ordered ");
t1 = internal_1.text(ctx[0]);
t2 = internal_1.space();
t3 = internal_1.text(t3_value);
t4 = internal_1.text("\n\t\tof ");
t5 = internal_1.text(t5_value);
},
m(target, anchor) {
internal_1.insert(target, p, anchor);
internal_1.append(p, t0);
internal_1.append(p, t1);
internal_1.append(p, t2);
internal_1.append(p, t3);
internal_1.append(p, t4);
internal_1.append(p, t5);
},
p(ctx, dirty) {
if (dirty & 1)
internal_1.set_data(t1, ctx[0]);
if (dirty & 1 && t3_value !== (t3_value = (ctx[0] === 1 ? 'scoop' : 'scoops') + ""))
internal_1.set_data(t3, t3_value);
if (dirty & 2 && t5_value !== (t5_value = join(ctx[1]) + ""))
internal_1.set_data(t5, t5_value);
},
d(detaching) {
if (detaching)
internal_1.detach(p);
}
};
}
function create_if_block_1(ctx) {
let p;
return {
c() {
p = internal_1.element("p");
p.textContent = "Can't order more flavours than scoops!";
},
m(target, anchor) {
internal_1.insert(target, p, anchor);
},
p: internal_1.noop,
d(detaching) {
if (detaching)
internal_1.detach(p);
}
};
}
function create_if_block(ctx) {
let p;
return {
c() {
p = internal_1.element("p");
p.textContent = "Please select at least one flavour";
},
m(target, anchor) {
internal_1.insert(target, p, anchor);
},
p: internal_1.noop,
d(detaching) {
if (detaching)
internal_1.detach(p);
}
};
}
function create_fragment(ctx) {
let h20;
let t1;
let label0;
let input0;
let input0_value_value;
let t2;
let t3;
let label1;
let input1;
let input1_value_value;
let t4;
let t5;
let label2;
let input2;
let input2_value_value;
let t6;
let t7;
let h21;
let t9;
let t10;
let if_block_anchor;
let mounted;
let dispose;
let each_value = ctx[2];
let each_blocks = [];
for (let i = 0; i < each_value.length; i += 1) {
each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
}
function select_block_type(ctx, dirty) {
if (ctx[1].length === 0)
return create_if_block;
if (ctx[1].length > ctx[0])
return create_if_block_1;
return create_else_block;
}
let current_block_type = select_block_type(ctx, -1);
let if_block = current_block_type(ctx);
return {
c() {
h20 = internal_1.element("h2");
h20.textContent = "Size";
t1 = internal_1.space();
label0 = internal_1.element("label");
input0 = internal_1.element("input");
t2 = internal_1.text("\n One scoop");
t3 = internal_1.space();
label1 = internal_1.element("label");
input1 = internal_1.element("input");
t4 = internal_1.text("\n Two scoops");
t5 = internal_1.space();
label2 = internal_1.element("label");
input2 = internal_1.element("input");
t6 = internal_1.text("\n Three scoops");
t7 = internal_1.space();
h21 = internal_1.element("h2");
h21.textContent = "Flavours";
t9 = internal_1.space();
for (let i = 0; i < each_blocks.length; i += 1) {
each_blocks[i].c();
}
t10 = internal_1.space();
if_block.c();
if_block_anchor = internal_1.empty();
internal_1.attr(input0, "type", "radio");
input0.__value = input0_value_value = 1;
input0.value = input0.__value;
ctx[4][1].push(input0);
internal_1.attr(input1, "type", "radio");
input1.__value = input1_value_value = 2;
input1.value = input1.__value;
ctx[4][1].push(input1);
internal_1.attr(input2, "type", "radio");
input2.__value = input2_value_value = 3;
input2.value = input2.__value;
ctx[4][1].push(input2);
},
m(target, anchor) {
internal_1.insert(target, h20, anchor);
internal_1.insert(target, t1, anchor);
internal_1.insert(target, label0, anchor);
internal_1.append(label0, input0);
input0.checked = input0.__value === ctx[0];
internal_1.append(label0, t2);
internal_1.insert(target, t3, anchor);
internal_1.insert(target, label1, anchor);
internal_1.append(label1, input1);
input1.checked = input1.__value === ctx[0];
internal_1.append(label1, t4);
internal_1.insert(target, t5, anchor);
internal_1.insert(target, label2, anchor);
internal_1.append(label2, input2);
input2.checked = input2.__value === ctx[0];
internal_1.append(label2, t6);
internal_1.insert(target, t7, anchor);
internal_1.insert(target, h21, anchor);
internal_1.insert(target, t9, anchor);
for (let i = 0; i < each_blocks.length; i += 1) {
each_blocks[i].m(target, anchor);
}
internal_1.insert(target, t10, anchor);
if_block.m(target, anchor);
internal_1.insert(target, if_block_anchor, anchor);
if (!mounted) {
dispose = [
internal_1.listen(input0, "change", ctx[3]),
internal_1.listen(input1, "change", ctx[5]),
internal_1.listen(input2, "change", ctx[6])
];
mounted = true;
}
},
p(ctx, [dirty]) {
if (dirty & 1) {
input0.checked = input0.__value === ctx[0];
}
if (dirty & 1) {
input1.checked = input1.__value === ctx[0];
}
if (dirty & 1) {
input2.checked = input2.__value === ctx[0];
}
if (dirty & 6) {
each_value = ctx[2];
let i;
for (i = 0; i < each_value.length; i += 1) {
const child_ctx = get_each_context(ctx, each_value, i);
if (each_blocks[i]) {
each_blocks[i].p(child_ctx, dirty);
}
else {
each_blocks[i] = create_each_block(child_ctx);
each_blocks[i].c();
each_blocks[i].m(t10.parentNode, t10);
}
}
for (; i < each_blocks.length; i += 1) {
each_blocks[i].d(1);
}
each_blocks.length = each_value.length;
}
if (current_block_type === (current_block_type = select_block_type(ctx, dirty)) && if_block) {
if_block.p(ctx, dirty);
}
else {
if_block.d(1);
if_block = current_block_type(ctx);
if (if_block) {
if_block.c();
if_block.m(if_block_anchor.parentNode, if_block_anchor);
}
}
},
i: internal_1.noop,
o: internal_1.noop,
d(detaching) {
if (detaching)
internal_1.detach(h20);
if (detaching)
internal_1.detach(t1);
if (detaching)
internal_1.detach(label0);
ctx[4][1].splice(ctx[4][1].indexOf(input0), 1);
if (detaching)
internal_1.detach(t3);
if (detaching)
internal_1.detach(label1);
ctx[4][1].splice(ctx[4][1].indexOf(input1), 1);
if (detaching)
internal_1.detach(t5);
if (detaching)
internal_1.detach(label2);
ctx[4][1].splice(ctx[4][1].indexOf(input2), 1);
if (detaching)
internal_1.detach(t7);
if (detaching)
internal_1.detach(h21);
if (detaching)
internal_1.detach(t9);
internal_1.destroy_each(each_blocks, detaching);
if (detaching)
internal_1.detach(t10);
if_block.d(detaching);
if (detaching)
internal_1.detach(if_block_anchor);
mounted = false;
internal_1.run_all(dispose);
}
};
}
function join(flavours) {
if (flavours.length === 1)
return flavours[0];
return `${flavours.slice(0, -1).join(', ')} and ${flavours[flavours.length - 1]}`;
}
function instance($$self, $$props, $$invalidate) {
let scoops = 1;
let flavours = ['Mint choc chip'];
let menu = ['Cookies and cream', 'Mint choc chip', 'Raspberry ripple'];
const $$binding_groups = [[], []];
function input0_change_handler() {
scoops = this.__value;
$$invalidate(0, scoops);
}
function input1_change_handler() {
scoops = this.__value;
$$invalidate(0, scoops);
}
function input2_change_handler() {
scoops = this.__value;
$$invalidate(0, scoops);
}
function input_change_handler() {
flavours = internal_1.get_binding_group_value($$binding_groups[0], this.__value, this.checked);
$$invalidate(1, flavours);
}
return [
scoops,
flavours,
menu,
input0_change_handler,
$$binding_groups,
input1_change_handler,
input2_change_handler,
input_change_handler
];
}
return {
setters: [
function (internal_1_1) {
internal_1 = internal_1_1;
}
],
execute: function () {
App = class App extends internal_1.SvelteComponent {
constructor(options) {
super();
internal_1.init(this, options, instance, create_fragment, internal_1.safe_not_equal, {});
}
};
exports_1("default", App);
}
};
});
</script>
<script>
System.defaultJSExtensions = true
System.import('./index.js').catch(function(e) { console.error(e) })
</script>
</body>
</html>
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<base href="/">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="root"></div>
</body>
</html>
Raw
index.ts
import App from './App.svelte'
new App({ target: document.querySelector("#root"), props: {} })
Raw
package.json
{
"description": "Svelte Bindings - Group inputs",
"dependencies": {
"typesvelte": "^1.0.8"
},
"name": "svelte-bindings---group-inputs",
"version": "1.0.0",
"author": "David Geo Holmes",
"linting": true,
"hideReferenceFiles": true,
"noLoopCheck": true
}
Raw
style.css
body {
background-color: #ffffff;
}
Raw
tsconfig.json
{
"allowJs": true,
"allowUnreachableCode": false,
"checkJs": false,
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"forceConsistentCasingInFileNames": true,
"jsx": "react",
"module": "system",
"noImplicitAny": false,
"noImplicitReturns": true,
"noImplicitThis": false,
"noUnusedLocals": false,
"noUnusedParameters": false,
"preserveConstEnums": true,
"removeComments": true,
"skipLibCheck": true,
"sourceMap": false,
"strict": true,
"strictNullChecks": false,
"suppressImplicitAnyIndexErrors": true,
"target": "es2015",
"traceResolution": true
}
Raw
tslint.json
{
"rules": {
"array-type": [
true,
"array"
],
"curly": false,
"comment-format": [
true,
"check-space"
],
"eofline": true,
"forin": true,
"jsdoc-format": true,
"new-parens": true,
"no-conditional-assignment": false,
"no-consecutive-blank-lines": true,
"no-construct": true,
"no-for-in-array": true,
"no-inferrable-types": [
true
],
"no-magic-numbers": false,
"no-shadowed-variable": true,
"no-string-throw": true,
"no-trailing-whitespace": [
true,
"ignore-jsdoc"
],
"no-var-keyword": true,
"one-variable-per-declaration": [
true,
"ignore-for-loop"
],
"prefer-const": true,
"prefer-for-of": true,
"prefer-function-over-method": false,
"prefer-method-signature": true,
"radix": true,
"semicolon": [true, "never"],
"trailing-comma": [
true,
{
"multiline": "never",
"singleline": "never"
}
],
"triple-equals": true,
"use-isnan": true
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment