Svelte App/Component Starter Template

*Svelte App or Module Starter Template.md

Svelte App or Module Starter Template

This is a template to start an app or component. It contains all the commonly used elements with comments explaining what the elements are. These can, of course, be removed.

Based on the Svelte guide: https://svelte.technology/guide

App.html

<!-- The HTML Code -->
a={a}
b={b}

<style>
	/* Module specific CSS */
</style>

<script>
	//import components used
	import MyModule from "MyModule.html"	
	
	export default {
		data(){return {
			a:1
			//The iniitial data object
		}},
	
		components: {
			MyModule	//the components used, comma separated list with the same names as the imports
		},
	
		methods: {
			//The Methods used
		},
	
		helpers: {
			//functions that can be used in the HTML template
		},
	
		computed: {
			//computed properties = properties that depend on other properties and automatically update when the properties it depends on change
			//IMPORTANT: These functions don't have access to the state (ie: to the `this` object reference)
			b: function({a}) { return a+1 }		
		},
	 
		onstate({ changed, current, previous }) {
			// this fires before oncreate, and on every state change.
			// the first time it runs, `previous` is undefined
			// This is how a VueJS-like `watch:` can be implemented in Svelte
			if (changed.a) {
				console.log(`a: ${previous.a} -> ${current.time}`);
			}
		},
	
		oncreate() {
			// this fires when the component has been rendered to the DOM
			console.log('The component has been created');
		},
	
		onupdate({ changed, current, previous }) {
			// this fires after oncreate, and after every state change
			// once the DOM is synchronised with the data
		},
	
		ondestroy() {
			// this fires when the component is removed from the DOM
			console.log('in ondestroy');
		},
	
		events: {
			// Custom event handlers. See: https://svelte.technology/guide#custom-event-handlers
		},
	
		//The name space, if needed, see: https://svelte.technology/guide#namespaces
		//namespace: "svg"
 	}
</script>