First Commit

Author: DanielRios549

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = false
+indent_style = space
+indent_size = 4
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.eslintrc.json

@@ -0,0 +1,39 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true,
+		"node": true
+    },
+    "extends": [
+        "standard"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": 2020,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "svelte3",
+        "@typescript-eslint"
+    ],
+    "settings": {
+        "svelte3/typescript": true
+    },
+    "overrides": [
+        {
+            "files": ["*.svelte"],
+            "processor": "svelte3/svelte3",
+            "rules": {
+                "import/first": "off",
+                "no-multiple-empty-lines": "off",
+                "no-use-before-define": "off"
+            }
+        }
+    ],
+    "rules": {
+        "indent": ["warn", 4,  { "ignoredNodes": ["VariableDeclaration[declarations.length=0]"] }],
+        "brace-style": ["warn", "stroustrup"],
+        "space-before-function-paren": "off",
+        "no-explicit-any": "off"
+    }
+}

.gitignore

@@ -0,0 +1,18 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+.idea
+sample_code/data/**/
+sample_code/model
+.env
+.venv
+
+/node_modules
+build
+**/__pycache__

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

README.md

@@ -0,0 +1,25 @@
+# SvelteKit BoilerPlate
+
+This is a BoilerPlater with erverything I like to use in a SveltreKit application.
+
+## It uses the following techonologies:
+
+SvelteKit, PostCSS, Sass, Typescript, Vite, Jest and ESLint
+
+### To install the dependencies use yarn.
+
+```bash
+# Install it globally
+npm i -g yarn
+# Install the dependencies
+yarn
+
+```
+
+### To run the dev server, run
+
+```bash
+
+yarn dev
+
+```

jest.config.ts

@@ -0,0 +1,20 @@
+import type { Config } from '@jest/types'
+
+const config: Config.InitialOptions = {
+    preset: 'ts-jest',
+    verbose: true,
+    collectCoverage: true,
+    collectCoverageFrom: [
+        'pages/*.{svelte}',
+        'src/**/*.{ts,svelte}',
+        '!src/**/*.d.ts'
+    ],
+    transform: {
+        '^.+\\.tsx?$': 'ts-jest'
+    },
+    moduleNameMapper: {
+        '\\$/(.*)': '<rootDir>/src/$1'
+    }
+}
+
+export default config

package.json

@@ -0,0 +1,58 @@
+{
+	"name": "sepyrate",
+	"version": "0.0.1",
+	"type": "module",
+	"license": "MIT",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"package": "svelte-kit package",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync",
+		"check": "svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "eslint .",
+		"test": "jest"
+	},
+	"devDependencies": {
+		"@jest/types": "^28.1.1",
+		"@poppanator/sveltekit-svg": "^0.3.4",
+		"@sveltejs/adapter-static": "^1.0.0-next.35",
+		"@sveltejs/kit": "next",
+		"@testing-library/svelte": "^3.1.3",
+		"@testing-library/user-event": "^14.2.1",
+		"@types/jest": "^28.1.4",
+		"@types/node": "^18.0.3",
+		"@types/testing-library__jest-dom": "^5.14.5",
+		"@typescript-eslint/eslint-plugin": "^5.27.0",
+		"@typescript-eslint/parser": "^5.27.0",
+		"autoprefixer": "^10.4.7",
+		"eslint": "^8.16.0",
+		"eslint-config-standard": "^17.0.0",
+		"eslint-plugin-import": "^2.26.0",
+		"eslint-plugin-n": "^15.2.4",
+		"eslint-plugin-promise": "^6.0.0",
+		"eslint-plugin-svelte3": "^4.0.0",
+		"eslint-plugin-testing-library": "^5.5.1",
+		"jest": "^28.1.2",
+		"postcss": "^8.4.14",
+		"postcss-custom-media": "^8.0.2",
+		"postcss-custom-selectors": "^6.0.3",
+		"postcss-extend-rule": "^4.0.0",
+		"postcss-import": "^14.1.0",
+		"postcss-media-minmax": "^5.0.0",
+		"postcss-nested": "^5.0.6",
+		"postcss-scss": "^4.0.4",
+		"postcss-simple-vars": "^6.0.3",
+		"sass": "^1.53.0",
+		"svelte": "^3.44.0",
+		"svelte-check": "^2.7.1",
+		"svelte-preprocess": "^4.10.6",
+		"testing-library": "^0.0.2",
+		"ts-jest": "^28.0.5",
+		"ts-node": "^10.8.2",
+		"tslib": "^2.3.1",
+		"typescript": "^4.7.4",
+		"vite": "^2.9.13"
+	}
+}

pages/__layout.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+    import { onMount } from 'svelte'
+    import { theme } from '$/stores/theme'
+
+    $: ready = !import.meta.env.DEV
+
+    onMount(() => {
+        document.body.classList.add($theme)
+        ready = true
+    })
+</script>
+
+<slot/>
+
+<style lang="scss" global>
+    @use "../styles/app.scss";
+</style>

pages/index.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    const name = 'Daniel'
+</script>
+
+<header>
+    <h1> SvelteKit Boilerplate</h1>
+    <p>
+        Project made by {name}.
+    </p>
+</header>
+
+<style lang="postcss">
+    header {
+        h1 {
+            font-size: 1rem;
+        }
+        p {
+            font-size: 0.6rem;
+        }
+    }
+</style>

public/favicon.png

@@ -0,0 +1,11 @@
+/// <reference types="@sveltejs/kit" />
+
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+// and what to do when importing types
+declare namespace App {
+    // interface Locals {}
+    // interface Platform {}
+    // interface Session {}
+    // interface Stuff {}
+}

src/app.d.ts

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+
+		%sveltekit.head%
+	</head>
+	<body id="app">
+		%sveltekit.body%
+	</body>
+</html>

src/app.html

@@ -0,0 +1,91 @@
+type Options = {
+    item?: string
+    outside?: boolean
+    save?: boolean
+    key?: string
+}
+
+const CLASS_NAME = 'visible'
+
+/**
+ * Toggle visible and hidden an element.
+ *
+ * The element to toggle should be exactly after the one that uses the action.
+ *
+ * @param element The element that uses the action, should not be passed.
+ * @param options.item The item that will be toggled.
+ * Use `next` to use the one immediately after the `element`.
+ *
+ * @param options.save Specify if the element should be save to localStorage or not.
+ * @param options.key The key to be saved to localStorage, only work if save is true.
+ *
+ * @returns Nothing, just remove Event Listenner.
+ */
+
+export function clickInside(element: Element, options?: Options) {
+    // This occurs when clickOutside is used in an element other than clickInside.
+
+    function onClick() {
+        let item: Element = element
+
+        if ((options) && (options.item)) {
+            if (options.item !== 'next') {
+                item = document.querySelector(options.item) || item
+            }
+            else {
+                item = element.nextElementSibling || item
+            }
+        }
+
+        item.dispatchEvent(new CustomEvent('clickInside'))
+        item.classList.toggle(CLASS_NAME)
+
+        if (options) {
+            if ((options.save) && (options.key)) {
+                const hasClass = item.classList.contains(CLASS_NAME)
+                localStorage.setItem(options.key, hasClass.toString())
+            }
+
+            if (options.outside) {
+                clickOutside(item, element)
+            }
+        }
+    }
+
+    element.addEventListener('click', onClick, true)
+
+    return {
+        destroy() {
+            element.removeEventListener('click', onClick, true)
+        }
+    }
+}
+/**
+ * Hides a visible element when click outside it.
+ *
+ * Use it together clickInside.
+ *
+ * @param element The element that uses the action, should not be passed.
+ *
+ * @param toggle The element that toggle the class.
+ *
+ * @returns Nothing, just remove Event Listenner.
+ */
+
+export function clickOutside(element: Element, toggle?: Element) {
+    function onClick(event: any) {
+        if ((!element.contains(event.target)) && (!toggle?.contains(event.target))) {
+            const item: Element = element
+
+            item.classList.remove(CLASS_NAME)
+        }
+    }
+
+    document.body.addEventListener('click', onClick, true)
+
+    return {
+        destroy() {
+            document.body.removeEventListener('click', onClick, true)
+        }
+    }
+}

src/lib/clickToggle.ts

@@ -0,0 +1,23 @@
+import { writable } from 'svelte/store'
+import { browser } from '$app/env'
+
+export function savable<T>(key: string, initial: string | [] | {} | boolean, save: boolean = true) {
+    let data: any = initial
+
+    if (save) {
+        const persist = browser && localStorage.getItem(key)
+        data = persist ? JSON.parse(persist) : initial
+    }
+
+    const store = writable<T>(data, () => {
+        const unsubscribe: any = store.subscribe((value) => {
+            if (save) {
+                browser && localStorage.setItem(key, JSON.stringify(value))
+            }
+        })
+
+        return unsubscribe
+    })
+
+    return store
+}

src/lib/store.ts

@@ -0,0 +1,12 @@
+import { get } from 'svelte/store'
+import { savable } from '$/lib/store'
+
+export const themes = ['light', 'dark']
+export const theme = savable<string>('theme', themes[0], true)
+
+export const handleTheme = (event: any) => {
+    const newTheme = event.target.value
+
+    document.body.classList.replace(get(theme), newTheme)
+    theme.set(newTheme)
+}