Skip to content

Instantly share code, notes, and snippets.

@stemcstudio

stemcstudio/App.svelte

Last active October 19, 2022 16:48
Show Gist options
  • Save stemcstudio/b078c168124b4c19aad728cb0365d678 to your computer and use it in GitHub Desktop.
Save stemcstudio/b078c168124b4c19aad728cb0365d678 to your computer and use it in GitHub Desktop.
Download ZIP
Svelte - Spread props
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>
import Info from './Info.svelte';
const pkg = {
name: 'svelte',
version: 3,
speed: 'blazing',
website: 'https://svelte.dev'
};
</script>
<Info {...pkg}/>
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("./println.js", [], function (exports_1, context_1) {
"use strict";
var __moduleName = context_1 && context_1.id;
function println(x) {
const text = new Text(`${x}`);
const div = document.createElement('div');
div.appendChild(text);
document.body.appendChild(div);
}
exports_1("println", println);
return {
setters: [],
execute: function () {
}
};
});
System.register("./App.svelte.js", ["svelte/internal", "./Info.svelte.js"], function (exports_1, context_1) {
"use strict";
var internal_1, Info_svelte_1, App;
var __moduleName = context_1 && context_1.id;
function create_fragment(ctx) {
let info;
let current;
const info_spread_levels = [ctx[0]];
let info_props = {};
for (let i = 0; i < info_spread_levels.length; i += 1) {
info_props = internal_1.assign(info_props, info_spread_levels[i]);
}
info = new Info_svelte_1.default({ props: info_props });
return {
c() {
internal_1.create_component(info.$$.fragment);
},
m(target, anchor) {
internal_1.mount_component(info, target, anchor);
current = true;
},
p(ctx, [dirty]) {
const info_changes = (dirty & 1)
? internal_1.get_spread_update(info_spread_levels, [internal_1.get_spread_object(ctx[0])])
: {};
info.$set(info_changes);
},
i(local) {
if (current)
return;
internal_1.transition_in(info.$$.fragment, local);
current = true;
},
o(local) {
internal_1.transition_out(info.$$.fragment, local);
current = false;
},
d(detaching) {
internal_1.destroy_component(info, detaching);
}
};
}
function instance($$self) {
const pkg = {
name: 'svelte',
version: 3,
speed: 'blazing',
website: 'https://svelte.dev'
};
return [pkg];
}
return {
setters: [
function (internal_1_1) {
internal_1 = internal_1_1;
},
function (Info_svelte_1_1) {
Info_svelte_1 = Info_svelte_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);
}
};
});
System.register("./Info.svelte.js", ["svelte/internal"], function (exports_1, context_1) {
"use strict";
var internal_1, Info;
var __moduleName = context_1 && context_1.id;
function create_fragment(ctx) {
let p;
let t0;
let code;
let t1;
let t2;
let t3;
let t4;
let t5;
let t6;
let a0;
let t7;
let a0_href_value;
let t8;
let a1;
let t9;
return {
c() {
p = internal_1.element("p");
t0 = internal_1.text("The ");
code = internal_1.element("code");
t1 = internal_1.text(ctx[0]);
t2 = internal_1.text(" package is ");
t3 = internal_1.text(ctx[2]);
t4 = internal_1.text(" fast.\n\tDownload version ");
t5 = internal_1.text(ctx[1]);
t6 = internal_1.text(" from ");
a0 = internal_1.element("a");
t7 = internal_1.text("npm");
t8 = internal_1.text("\n\tand ");
a1 = internal_1.element("a");
t9 = internal_1.text("learn more here");
internal_1.attr(a0, "href", a0_href_value = "https://www.npmjs.com/package/" + ctx[0]);
internal_1.attr(a1, "href", ctx[3]);
},
m(target, anchor) {
internal_1.insert(target, p, anchor);
internal_1.append(p, t0);
internal_1.append(p, code);
internal_1.append(code, t1);
internal_1.append(p, t2);
internal_1.append(p, t3);
internal_1.append(p, t4);
internal_1.append(p, t5);
internal_1.append(p, t6);
internal_1.append(p, a0);
internal_1.append(a0, t7);
internal_1.append(p, t8);
internal_1.append(p, a1);
internal_1.append(a1, t9);
},
p(ctx, [dirty]) {
if (dirty & 1)
internal_1.set_data(t1, ctx[0]);
if (dirty & 4)
internal_1.set_data(t3, ctx[2]);
if (dirty & 2)
internal_1.set_data(t5, ctx[1]);
if (dirty & 1 && a0_href_value !== (a0_href_value = "https://www.npmjs.com/package/" + ctx[0])) {
internal_1.attr(a0, "href", a0_href_value);
}
if (dirty & 8) {
internal_1.attr(a1, "href", ctx[3]);
}
},
i: internal_1.noop,
o: internal_1.noop,
d(detaching) {
if (detaching)
internal_1.detach(p);
}
};
}
function instance($$self, $$props, $$invalidate) {
let { name } = $$props;
let { version } = $$props;
let { speed } = $$props;
let { website } = $$props;
$$self.$$set = $$props => {
if ('name' in $$props)
$$invalidate(0, name = $$props.name);
if ('version' in $$props)
$$invalidate(1, version = $$props.version);
if ('speed' in $$props)
$$invalidate(2, speed = $$props.speed);
if ('website' in $$props)
$$invalidate(3, website = $$props.website);
};
return [name, version, speed, website];
}
return {
setters: [
function (internal_1_1) {
internal_1 = internal_1_1;
}
],
execute: function () {
Info = class Info extends internal_1.SvelteComponent {
constructor(options) {
super();
internal_1.init(this, options, instance, create_fragment, internal_1.safe_not_equal, {
name: 0,
version: 1,
speed: 2,
website: 3
});
}
};
exports_1("default", Info);
}
};
});
</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
Info.svelte
<script>
export let name;
export let version;
export let speed;
export let website;
</script>
<p>
The <code>{name}</code> package is {speed} fast.
Download version {version} from <a href="https://www.npmjs.com/package/{name}">npm</a>
and <a href={website}>learn more here</a>
</p>
Raw
package.json
{
"description": "Svelte - Spread props",
"dependencies": {
"typesvelte": "^1.0.8"
},
"name": "svelte---spread-props",
"version": "1.0.0",
"author": "David Geo Holmes",
"linting": true,
"hideReferenceFiles": true,
"noLoopCheck": true
}
Raw
println.ts
/**
* Prints an object to the DOM by using the default string conversion
* to get the string value then wraps it in a div element and a text node,
* appending the whole thing to the body element of the document.
* @param x the value to be printed.
*/
export function println(x: unknown): void {
const text = new Text(`${x}`)
const div = document.createElement('div')
div.appendChild(text)
document.body.appendChild(div)
}
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