Skip to content

Instantly share code, notes, and snippets.

@stemcstudio

stemcstudio/App.svelte

Last active October 19, 2022 16:47
Show Gist options
  • Save stemcstudio/b872d2abb23d2049b2fc3e2953a01746 to your computer and use it in GitHub Desktop.
Save stemcstudio/b872d2abb23d2049b2fc3e2953a01746 to your computer and use it in GitHub Desktop.
Download ZIP
Svelte Events - Event forwarding
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 Outer from './Outer.svelte';
function handleMessage(event) {
alert(event.detail.text);
}
</script>
<Outer on:message={handleMessage}/>
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", "./Outer.svelte.js"], function (exports_1, context_1) {
"use strict";
var internal_1, Outer_svelte_1, App;
var __moduleName = context_1 && context_1.id;
function create_fragment(ctx) {
let outer;
let current;
outer = new Outer_svelte_1.default({});
outer.$on("message", handleMessage);
return {
c() {
internal_1.create_component(outer.$$.fragment);
},
m(target, anchor) {
internal_1.mount_component(outer, target, anchor);
current = true;
},
p: internal_1.noop,
i(local) {
if (current)
return;
internal_1.transition_in(outer.$$.fragment, local);
current = true;
},
o(local) {
internal_1.transition_out(outer.$$.fragment, local);
current = false;
},
d(detaching) {
internal_1.destroy_component(outer, detaching);
}
};
}
function handleMessage(event) {
alert(event.detail.text);
}
return {
setters: [
function (internal_1_1) {
internal_1 = internal_1_1;
},
function (Outer_svelte_1_1) {
Outer_svelte_1 = Outer_svelte_1_1;
}
],
execute: function () {
App = class App extends internal_1.SvelteComponent {
constructor(options) {
super();
internal_1.init(this, options, null, create_fragment, internal_1.safe_not_equal, {});
}
};
exports_1("default", App);
}
};
});
System.register("./Inner.svelte.js", ["svelte/internal", "svelte"], function (exports_1, context_1) {
"use strict";
var internal_1, svelte_1, Inner;
var __moduleName = context_1 && context_1.id;
function create_fragment(ctx) {
let button;
let mounted;
let dispose;
return {
c() {
button = internal_1.element("button");
button.textContent = "Click to say hello";
},
m(target, anchor) {
internal_1.insert(target, button, anchor);
if (!mounted) {
dispose = internal_1.listen(button, "click", ctx[0]);
mounted = true;
}
},
p: internal_1.noop,
i: internal_1.noop,
o: internal_1.noop,
d(detaching) {
if (detaching)
internal_1.detach(button);
mounted = false;
dispose();
}
};
}
function instance($$self) {
const dispatch = svelte_1.createEventDispatcher();
function sayHello() {
dispatch('message', { text: 'Hello!' });
}
return [sayHello];
}
return {
setters: [
function (internal_1_1) {
internal_1 = internal_1_1;
},
function (svelte_1_1) {
svelte_1 = svelte_1_1;
}
],
execute: function () {
Inner = class Inner extends internal_1.SvelteComponent {
constructor(options) {
super();
internal_1.init(this, options, instance, create_fragment, internal_1.safe_not_equal, {});
}
};
exports_1("default", Inner);
}
};
});
System.register("./Outer.svelte.js", ["svelte/internal", "./Inner.svelte.js"], function (exports_1, context_1) {
"use strict";
var internal_1, Inner_svelte_1, Outer;
var __moduleName = context_1 && context_1.id;
function create_fragment(ctx) {
let inner;
let current;
inner = new Inner_svelte_1.default({});
inner.$on("message", ctx[0]);
return {
c() {
internal_1.create_component(inner.$$.fragment);
},
m(target, anchor) {
internal_1.mount_component(inner, target, anchor);
current = true;
},
p: internal_1.noop,
i(local) {
if (current)
return;
internal_1.transition_in(inner.$$.fragment, local);
current = true;
},
o(local) {
internal_1.transition_out(inner.$$.fragment, local);
current = false;
},
d(detaching) {
internal_1.destroy_component(inner, detaching);
}
};
}
function instance($$self) {
function message_handler(event) {
internal_1.bubble.call(this, $$self, event);
}
return [message_handler];
}
return {
setters: [
function (internal_1_1) {
internal_1 = internal_1_1;
},
function (Inner_svelte_1_1) {
Inner_svelte_1 = Inner_svelte_1_1;
}
],
execute: function () {
Outer = class Outer extends internal_1.SvelteComponent {
constructor(options) {
super();
internal_1.init(this, options, instance, create_fragment, internal_1.safe_not_equal, {});
}
};
exports_1("default", Outer);
}
};
});
</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
Inner.svelte
<script>
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
function sayHello() {
dispatch('message', {
text: 'Hello!'
});
}
</script>
<button on:click={sayHello}>
Click to say hello
</button>
Raw
Outer.svelte
<script>
import Inner from './Inner.svelte';
</script>
<Inner on:message/>
Raw
package.json
{
"description": "Svelte Events - Event forwarding",
"dependencies": {
"typesvelte": "^1.0.8"
},
"name": "svelte-events---event-forwarding",
"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": true,
"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