Skip to content

Instantly share code, notes, and snippets.

@stemcstudio

stemcstudio/App.svelte

Last active January 24, 2022 18:12
Show Gist options
  • Save stemcstudio/76554afadd3b26629c57b135910374cf to your computer and use it in GitHub Desktop.
Save stemcstudio/76554afadd3b26629c57b135910374cf to your computer and use it in GitHub Desktop.
Download ZIP
Svelte - Hello World
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 name = 'World';
</script>
<h1>Hello {name}!</h1>
Raw
generated.index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<base href="/">
<style>
body {
background-color: #ffffff;
}
</style>
<script src="https://unpkg.com/[email protected]/dist/system.js"></script>
</head>
<body>
<script>
System.config({
"warnings": false,
"map": {
"svelte/internal": "https://unpkg.com/[email protected]/internal/index.js"
}
});
</script>
<div id="root"></div>
<script>
System.register("./App.svelte.js", ["svelte/internal"], function (exports_1, context_1) {
"use strict";
var internal_1, name, Component;
var __moduleName = context_1 && context_1.id;
function create_fragment(ctx) {
let h1;
return {
c() {
h1 = internal_1.element("h1");
h1.textContent = `Hello ${name}!`;
},
m(target, anchor) {
internal_1.insert(target, h1, anchor);
},
p: internal_1.noop,
i: internal_1.noop,
o: internal_1.noop,
d(detaching) {
if (detaching)
internal_1.detach(h1);
}
};
}
return {
setters: [
function (internal_1_1) {
internal_1 = internal_1_1;
}
],
execute: function () {
name = 'World';
Component = class Component extends internal_1.SvelteComponent {
constructor(options) {
super();
internal_1.init(this, options, null, create_fragment, internal_1.safe_not_equal, {});
}
};
exports_1("default", Component);
}
};
});
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 () {
}
};
});
</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 - Hello World",
"dependencies": {
"svelte": "3.46.2"
},
"name": "svelte---hello-world",
"version": "1.0.0",
"author": "David Geo Holmes",
"linting": true,
"hideReferenceFiles": true,
"noLoopCheck": true,
"hideConfigFiles": 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": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"forceConsistentCasingInFileNames": true,
"jsx": "react",
"module": "system",
"noImplicitAny": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"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