Skip to content

Instantly share code, notes, and snippets.

@stemcstudio

stemcstudio/App.svelte

Created January 25, 2022 00:13
Show Gist options
  • Save stemcstudio/9cae87462e4a33f42e47e11fda12f7a0 to your computer and use it in GitHub Desktop.
Save stemcstudio/9cae87462e4a33f42e47e11fda12f7a0 to your computer and use it in GitHub Desktop.
Download ZIP
Svelte Bindings - Text 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 name = '';
</script>
<input bind:value={name} placeholder="enter your name">
<p>Hello, {name || 'Stranger'}!</p>
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": "https://unpkg.com/[email protected]/index.js",
"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, Component;
var __moduleName = context_1 && context_1.id;
function create_fragment(ctx) {
let input;
let t0;
let p;
let t1;
let t2_value = (ctx[0] || 'Stranger') + "";
let t2;
let t3;
let mounted;
let dispose;
return {
c() {
input = internal_1.element("input");
t0 = internal_1.space();
p = internal_1.element("p");
t1 = internal_1.text("Hello, ");
t2 = internal_1.text(t2_value);
t3 = internal_1.text("!");
internal_1.attr(input, "placeholder", "enter your name");
},
m(target, anchor) {
internal_1.insert(target, input, anchor);
internal_1.set_input_value(input, ctx[0]);
internal_1.insert(target, t0, anchor);
internal_1.insert(target, p, anchor);
internal_1.append(p, t1);
internal_1.append(p, t2);
internal_1.append(p, t3);
if (!mounted) {
dispose = internal_1.listen(input, "input", ctx[1]);
mounted = true;
}
},
p(ctx, [dirty]) {
if (dirty & 1 && input.value !== ctx[0]) {
internal_1.set_input_value(input, ctx[0]);
}
if (dirty & 1 && t2_value !== (t2_value = (ctx[0] || 'Stranger') + ""))
internal_1.set_data(t2, t2_value);
},
i: internal_1.noop,
o: internal_1.noop,
d(detaching) {
if (detaching)
internal_1.detach(input);
if (detaching)
internal_1.detach(t0);
if (detaching)
internal_1.detach(p);
mounted = false;
dispose();
}
};
}
function instance($$self, $$props, $$invalidate) {
let name = '';
function input_input_handler() {
name = this.value;
$$invalidate(0, name);
}
return [name, input_input_handler];
}
return {
setters: [
function (internal_1_1) {
internal_1 = internal_1_1;
}
],
execute: function () {
Component = class Component extends internal_1.SvelteComponent {
constructor(options) {
super();
internal_1.init(this, options, instance, 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 Bindings - Text inputs",
"dependencies": {
"svelte": "3.46.2"
},
"name": "svelte-bindings---text-inputs",
"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