Skip to content

Instantly share code, notes, and snippets.

@stemcstudio

stemcstudio/App.svelte

Last active March 30, 2023 12:57
Show Gist options
  • Save stemcstudio/a1eddaf6777a2090c534d2f978d5c1cc to your computer and use it in GitHub Desktop.
Save stemcstudio/a1eddaf6777a2090c534d2f978d5c1cc to your computer and use it in GitHub Desktop.
Download ZIP
Svelte - SVG Clock
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 { onMount, } from 'svelte';
let time = new Date();
// these automatically update when `time`
// changes, because of the `$:` prefix
$: hours = time.getHours();
$: minutes = time.getMinutes();
$: seconds = time.getSeconds();
onMount(() => {
const interval = setInterval(() => {
time = new Date();
}, 1000);
return () => {
clearInterval(interval);
};
});
</script>
<svg viewBox='-50 -50 100 100'>
<circle class='clock-face' r='48'/>
<!-- markers -->
{#each [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55] as minute}
<line class='major' y1='35' y2='45' transform='rotate({30 * minute})'/>
{#each [1, 2, 3, 4] as offset}
<line class='minor' y1='42' y2='45' transform='rotate({6 * (minute + offset)})'/>
{/each}
{/each}
<!-- hour hand -->
<line class='hour' y1='2' y2='-20' transform='rotate({30 * hours + minutes / 2})'/>
<!-- minute hand -->
<line class='minute' y1='4' y2='-30' transform='rotate({6 * minutes + seconds / 10})'/>
<!-- second hand -->
<g transform='rotate({6 * seconds})'>
<line class='second' y1='10' y2='-38'/>
<line class='second-counterweight' y1='10' y2='2'/>
</g>
</svg>
<style>
svg {
width: 100%;
height: 100%;
}
.clock-face {
stroke: #333;
fill: white;
}
.minor {
stroke: #999;
stroke-width: 0.5;
}
.major {
stroke: #333;
stroke-width: 1;
}
.hour {
stroke: #333;
}
.minute {
stroke: #666;
}
.second, .second-counterweight {
stroke: rgb(180,0,0);
}
.second-counterweight {
stroke-width: 3;
}
</style>
Raw
generated.index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<base href="/">
<style>
body {
background-color: #ffffff;
}
</style>
<script src="/assets/js/stemcstudio-systemjs@1.0.0/system.js"></script>
</head>
<body>
<script>
System.config({
"warnings": false,
"map": {
"svelte": "https://cdn.jsdelivr.net/npm/@geometryzen/svelte@3.57.0/system/es2022/index.min.js",
"svelte/animate": "https://cdn.jsdelivr.net/npm/@geometryzen/svelte@3.57.0/system/es2022/animate/index.min.js",
"svelte/easing": "https://cdn.jsdelivr.net/npm/@geometryzen/svelte@3.57.0/system/es2022/easing/index.min.js",
"svelte/internal": "https://cdn.jsdelivr.net/npm/@geometryzen/svelte@3.57.0/system/es2022/internal/index.min.js",
"svelte/motion": "https://cdn.jsdelivr.net/npm/@geometryzen/svelte@3.57.0/system/es2022/motion/index.min.js",
"svelte/store": "https://cdn.jsdelivr.net/npm/@geometryzen/svelte@3.57.0/system/es2022/store/index.min.js",
"svelte/transition": "https://cdn.jsdelivr.net/npm/@geometryzen/svelte@3.57.0/system/es2022/transition/index.min.js"
}
});
</script>
<div id="root"></div>
<script>
System.register("./App.svelte.js", ["svelte/internal", "svelte"], function (exports_1, context_1) {
"use strict";
var internal_1, svelte_1, App;
var __moduleName = context_1 && context_1.id;
function add_css(target) {
internal_1.append_styles(target, "svelte-1b54he2", "svg.svelte-1b54he2{width:100%;height:100%}.clock-face.svelte-1b54he2{stroke:#333;fill:white}.minor.svelte-1b54he2{stroke:#999;stroke-width:0.5}.major.svelte-1b54he2{stroke:#333;stroke-width:1}.hour.svelte-1b54he2{stroke:#333}.minute.svelte-1b54he2{stroke:#666}.second.svelte-1b54he2,.second-counterweight.svelte-1b54he2{stroke:rgb(180,0,0)}.second-counterweight.svelte-1b54he2{stroke-width:3}");
}
function get_each_context(ctx, list, i) {
const child_ctx = ctx.slice();
child_ctx[4] = list[i];
return child_ctx;
}
function get_each_context_1(ctx, list, i) {
const child_ctx = ctx.slice();
child_ctx[7] = list[i];
return child_ctx;
}
function create_each_block_1(ctx) {
let line;
let line_transform_value;
return {
c() {
line = internal_1.svg_element("line");
internal_1.attr(line, "class", "minor svelte-1b54he2");
internal_1.attr(line, "y1", "42");
internal_1.attr(line, "y2", "45");
internal_1.attr(line, "transform", line_transform_value = "rotate(" + 6 * (ctx[4] + ctx[7]) + ")");
},
m(target, anchor) {
internal_1.insert(target, line, anchor);
},
p: internal_1.noop,
d(detaching) {
if (detaching)
internal_1.detach(line);
}
};
}
function create_each_block(ctx) {
let line;
let line_transform_value;
let each_1_anchor;
let each_value_1 = [1, 2, 3, 4];
let each_blocks = [];
for (let i = 0; i < 4; i += 1) {
each_blocks[i] = create_each_block_1(get_each_context_1(ctx, each_value_1, i));
}
return {
c() {
line = internal_1.svg_element("line");
for (let i = 0; i < 4; i += 1) {
each_blocks[i].c();
}
each_1_anchor = internal_1.empty();
internal_1.attr(line, "class", "major svelte-1b54he2");
internal_1.attr(line, "y1", "35");
internal_1.attr(line, "y2", "45");
internal_1.attr(line, "transform", line_transform_value = "rotate(" + 30 * ctx[4] + ")");
},
m(target, anchor) {
internal_1.insert(target, line, anchor);
for (let i = 0; i < 4; i += 1) {
if (each_blocks[i]) {
each_blocks[i].m(target, anchor);
}
}
internal_1.insert(target, each_1_anchor, anchor);
},
p: internal_1.noop,
d(detaching) {
if (detaching)
internal_1.detach(line);
internal_1.destroy_each(each_blocks, detaching);
if (detaching)
internal_1.detach(each_1_anchor);
}
};
}
function create_fragment(ctx) {
let svg;
let circle;
let line0;
let line0_transform_value;
let line1;
let line1_transform_value;
let g;
let line2;
let line3;
let g_transform_value;
let each_value = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55];
let each_blocks = [];
for (let i = 0; i < 12; i += 1) {
each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
}
return {
c() {
svg = internal_1.svg_element("svg");
circle = internal_1.svg_element("circle");
for (let i = 0; i < 12; i += 1) {
each_blocks[i].c();
}
line0 = internal_1.svg_element("line");
line1 = internal_1.svg_element("line");
g = internal_1.svg_element("g");
line2 = internal_1.svg_element("line");
line3 = internal_1.svg_element("line");
internal_1.attr(circle, "class", "clock-face svelte-1b54he2");
internal_1.attr(circle, "r", "48");
internal_1.attr(line0, "class", "hour svelte-1b54he2");
internal_1.attr(line0, "y1", "2");
internal_1.attr(line0, "y2", "-20");
internal_1.attr(line0, "transform", line0_transform_value = "rotate(" + (30 * ctx[2] + ctx[1] / 2) + ")");
internal_1.attr(line1, "class", "minute svelte-1b54he2");
internal_1.attr(line1, "y1", "4");
internal_1.attr(line1, "y2", "-30");
internal_1.attr(line1, "transform", line1_transform_value = "rotate(" + (6 * ctx[1] + ctx[0] / 10) + ")");
internal_1.attr(line2, "class", "second svelte-1b54he2");
internal_1.attr(line2, "y1", "10");
internal_1.attr(line2, "y2", "-38");
internal_1.attr(line3, "class", "second-counterweight svelte-1b54he2");
internal_1.attr(line3, "y1", "10");
internal_1.attr(line3, "y2", "2");
internal_1.attr(g, "transform", g_transform_value = "rotate(" + 6 * ctx[0] + ")");
internal_1.attr(svg, "viewBox", "-50 -50 100 100");
internal_1.attr(svg, "class", "svelte-1b54he2");
},
m(target, anchor) {
internal_1.insert(target, svg, anchor);
internal_1.append(svg, circle);
for (let i = 0; i < 12; i += 1) {
if (each_blocks[i]) {
each_blocks[i].m(svg, null);
}
}
internal_1.append(svg, line0);
internal_1.append(svg, line1);
internal_1.append(svg, g);
internal_1.append(g, line2);
internal_1.append(g, line3);
},
p(ctx, [dirty]) {
if (dirty & 6 && line0_transform_value !== (line0_transform_value = "rotate(" + (30 * ctx[2] + ctx[1] / 2) + ")")) {
internal_1.attr(line0, "transform", line0_transform_value);
}
if (dirty & 3 && line1_transform_value !== (line1_transform_value = "rotate(" + (6 * ctx[1] + ctx[0] / 10) + ")")) {
internal_1.attr(line1, "transform", line1_transform_value);
}
if (dirty & 1 && g_transform_value !== (g_transform_value = "rotate(" + 6 * ctx[0] + ")")) {
internal_1.attr(g, "transform", g_transform_value);
}
},
i: internal_1.noop,
o: internal_1.noop,
d(detaching) {
if (detaching)
internal_1.detach(svg);
internal_1.destroy_each(each_blocks, detaching);
}
};
}
function instance($$self, $$props, $$invalidate) {
let hours;
let minutes;
let seconds;
let time = new Date();
svelte_1.onMount(() => {
const interval = setInterval(() => {
$$invalidate(3, time = new Date());
}, 1000);
return () => {
clearInterval(interval);
};
});
$$self.$$.update = () => {
if ($$self.$$.dirty & 8) {
$: $$invalidate(2, hours = time.getHours());
}
if ($$self.$$.dirty & 8) {
$: $$invalidate(1, minutes = time.getMinutes());
}
if ($$self.$$.dirty & 8) {
$: $$invalidate(0, seconds = time.getSeconds());
}
};
return [seconds, minutes, hours, time];
}
return {
setters: [
function (internal_1_1) {
internal_1 = internal_1_1;
},
function (svelte_1_1) {
svelte_1 = 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, {}, add_css);
}
};
exports_1("default", App);
}
};
});
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQXBwLnN2ZWx0ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIkFwcC5zdmVsdGUuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztJQUVBLFNBQVMsT0FBTyxDQUFDLE1BQU07UUFDbkIsd0JBQWEsQ0FBQyxNQUFNLEVBQUUsZ0JBQWdCLEVBQUUsMFlBQTBZLENBQUMsQ0FBQztJQUN4YixDQUFDO0lBQ0QsU0FBUyxnQkFBZ0IsQ0FBQyxHQUFHLEVBQUUsSUFBSSxFQUFFLENBQUM7UUFDbEMsTUFBTSxTQUFTLEdBQUcsR0FBRyxDQUFDLEtBQUssRUFBRSxDQUFDO1FBQzlCLFNBQVMsQ0FBQyxDQUFDLENBQUMsR0FBRyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDdkIsT0FBTyxTQUFTLENBQUM7SUFDckIsQ0FBQztJQUNELFNBQVMsa0JBQWtCLENBQUMsR0FBRyxFQUFFLElBQUksRUFBRSxDQUFDO1FBQ3BDLE1BQU0sU0FBUyxHQUFHLEdBQUcsQ0FBQyxLQUFLLEVBQUUsQ0FBQztRQUM5QixTQUFTLENBQUMsQ0FBQyxDQUFDLEdBQUcsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQ3ZCLE9BQU8sU0FBUyxDQUFDO0lBQ3JCLENBQUM7SUFDRCxTQUFTLG1CQUFtQixDQUFDLEdBQUc7UUFDNUIsSUFBSSxJQUFJLENBQUM7UUFDVCxJQUFJLG9CQUFvQixDQUFDO1FBQ3pCLE9BQU87WUFDSCxDQUFDO2dCQUNHLElBQUksR0FBRyxzQkFBVyxDQUFDLE1BQU0sQ0FBQyxDQUFDO2dCQUMzQixlQUFJLENBQUMsSUFBSSxFQUFFLE9BQU8sRUFBRSxzQkFBc0IsQ0FBQyxDQUFDO2dCQUM1QyxlQUFJLENBQUMsSUFBSSxFQUFFLElBQUksRUFBRSxJQUFJLENBQUMsQ0FBQztnQkFDdkIsZUFBSSxDQUFDLElBQUksRUFBRSxJQUFJLEVBQUUsSUFBSSxDQUFDLENBQUM7Z0JBQ3ZCLGVBQUksQ0FBQyxJQUFJLEVBQUUsV0FBVyxFQUFFLG9CQUFvQixHQUFH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
System.register("./index.js", ["./App.svelte"], 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: {} });
}
};
});
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyJpbmRleC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztZQUNBLElBQUksb0JBQUcsQ0FBQyxFQUFFLE1BQU0sRUFBRSxRQUFRLENBQUMsYUFBYSxDQUFDLE9BQU8sQ0FBQyxFQUFFLEtBQUssRUFBRSxFQUFFLEVBQUUsQ0FBQyxDQUFDO1FBQ2hFLENBQUMifQ==
</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 - SVG Clock",
"dependencies": {
"svelte": "3.57.0"
},
"name": "svelte---svg-clock",
"version": "1.0.0",
"author": "David Geo Holmes"
}
Raw
studio.config.json
{
"hideConfigFiles": false,
"hideReferenceFiles": true,
"linting": true,
"noLoopCheck": true,
"operatorOverloading": false,
"overrides": [
{
"name": "svelte",
"version": "3.55.1",
"system": "https://cdn.jsdelivr.net/npm/@geometryzen/svelte@3.57.0/package.json",
"types": "https://cdn.jsdelivr.net/npm/svelte@3.57.0/package.json"
}
],
"references": {},
"showGeneratedFiles": false
}
Raw
style.css
body {
background-color: #ffffff;
}
Raw
system.config.json
{
"map": {
"svelte": "https://cdn.jsdelivr.net/npm/@geometryzen/svelte@3.57.0/package.json"
}
}
Raw
tsconfig.json
{
"allowJs": true,
"allowUnreachableCode": false,
"checkJs": true,
"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": false,
"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
}
}
Raw
types.config.json
{
"map": {
"svelte": "https://cdn.jsdelivr.net/npm/svelte@3.57.0/package.json"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment