Truly a minimum reproduction

This commit is contained in:
Luke Hagar
2023-05-26 09:57:49 -05:00
parent e8270d9ab9
commit 5dcc185784
6 changed files with 82 additions and 1279 deletions

View File

@@ -14,17 +14,7 @@
"devDependencies": { "devDependencies": {
"@sveltejs/adapter-auto": "^2.0.0", "@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/kit": "^1.5.0", "@sveltejs/kit": "^1.5.0",
"@typescript-eslint/eslint-plugin": "^5.45.0",
"@typescript-eslint/parser": "^5.45.0",
"eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-svelte": "^2.26.0",
"prettier": "^2.8.0",
"prettier-plugin-svelte": "^2.8.1",
"svelte": "^3.54.0", "svelte": "^3.54.0",
"svelte-check": "^3.0.1",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^4.3.0" "vite": "^4.3.0"
}, },
"type": "module" "type": "module"

1267
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

36
src/lib/Counter.svelte Normal file
View File

@@ -0,0 +1,36 @@
<script>
import { onDestroy, onMount } from 'svelte';
// Props (actions)
/** Provide the array of values to tick through. */
export let values = [];
/** Bind to the current value of the counter. */
export let currentValue = '';
/** Select items by index from the values array. */
export let index = 0;
let transitionInterval;
$: currentValue = values[index];
onMount(() => {
transitionInterval = setInterval(() => {
if (index === values.length - 1 || index > values.length - 1) {
index = 0;
} else {
index = index + 1;
}
}, 1500);
});
onDestroy(() => {
clearInterval(transitionInterval);
});
</script>
{#key currentValue}
<slot {currentValue}>
{currentValue}
</slot>
{/key}

10
src/lib/DocsShell.svelte Normal file
View File

@@ -0,0 +1,10 @@
<script>
// Docs
import LayoutPage from './LayoutPage.svelte';
</script>
<LayoutPage>
<slot name="usage">(usage)</slot>
</LayoutPage>
<slot name="usage">(usage)</slot>

View File

@@ -0,0 +1 @@
<slot />

View File

@@ -1,2 +1,35 @@
<h1>Welcome to SvelteKit</h1> <script lang="ts">
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p> // Docs
import DocsShell from '$lib/DocsShell.svelte';
// Components
import Counter from '$lib/Counter.svelte';
// Local
const monthValues = [
'January',
'Feburary',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
];
let index: any;
let indexValue: any;
</script>
<Counter bind:index bind:currentValue={indexValue} values={monthValues} />
<DocsShell>
<svelte:fragment slot="usage">
<div>Current Value: {indexValue}</div>
<div>Index: {index}</div>
</svelte:fragment>
</DocsShell>