stemcstudio/App.svelte

## README.md

      
    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.


## App.svelte
<script>
	let name = '';
</script>

<input bind:value={name} placeholder="enter your name">
<p>Hello, {name || 'Stranger'}!</p>

## 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/systemjs@0.19.34/dist/system.js"></script>
</head>

<body>
    <script>
        System.config({
          "warnings": false,
          "map": {
            "svelte": "https://unpkg.com/svelte@3.46.2/index.js",
            "svelte/internal": "https://unpkg.com/svelte@3.46.2/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>

## 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>

## index.ts
import App from './App.svelte'

new App({ target: document.querySelector("#root"), props: {} })

## 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
}

## 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)
}

## style.css
body {
    background-color: #ffffff;
}

## 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
}

## 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
    }
}
	<script>
	let name = '';
	</script>

	<input bind:value={name} placeholder="enter your name">
	<p>Hello, {name \|\| 'Stranger'}!</p>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<base href="/">
	<style>
	body {
	background-color: #ffffff;
	}
	</style>
	<script src="https://unpkg.com/systemjs@0.19.34/dist/system.js"></script>
	</head>

	<body>
	<script>
	System.config({
	"warnings": false,
	"map": {
	"svelte": "https://unpkg.com/svelte@3.46.2/index.js",
	"svelte/internal": "https://unpkg.com/svelte@3.46.2/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>
	import App from './App.svelte'

	new App({ target: document.querySelector("#root"), props: {} })
	{
	"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
	}
	/**
	* 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)
	}
	{
	"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
	}
	{
	"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
	}
	}