├── .npmrc
├── src
    ├── routes
    │   ├── (hooks)
    │   │   ├── useEffect
    │   │   │   ├── +page.svelte
    │   │   │   ├── svelte.svelte
    │   │   │   ├── +page.ts
    │   │   │   └── react.jsx
    │   │   ├── useMemo
    │   │   │   ├── +page.svelte
    │   │   │   ├── svelte.svelte
    │   │   │   ├── +page.ts
    │   │   │   └── react.jsx
    │   │   ├── useRef
    │   │   │   ├── +page.svelte
    │   │   │   ├── svelte.svelte
    │   │   │   ├── +page.ts
    │   │   │   └── react.jsx
    │   │   ├── useState
    │   │   │   ├── +page.svelte
    │   │   │   ├── svelte.svelte
    │   │   │   ├── +page.ts
    │   │   │   └── react.jsx
    │   │   ├── useCallback
    │   │   │   ├── +page.svelte
    │   │   │   ├── +page.ts
    │   │   │   ├── svelte.svelte
    │   │   │   └── react.jsx
    │   │   ├── useContext
    │   │   │   ├── +page.svelte
    │   │   │   ├── +page.ts
    │   │   │   ├── svelte.svelte
    │   │   │   └── react.jsx
    │   │   ├── useReducer
    │   │   │   ├── +page.svelte
    │   │   │   ├── +page.ts
    │   │   │   ├── svelte.svelte
    │   │   │   └── react.jsx
    │   │   ├── Header.svelte
    │   │   ├── Snippet.svelte
    │   │   └── +layout.svelte
    │   ├── +error.svelte
    │   ├── +page.svelte
    │   └── +layout.svelte
    ├── app.postcss
    ├── lib
    │   ├── types.ts
    │   ├── icons
    │   │   ├── Svelte.svelte
    │   │   ├── Code.svelte
    │   │   ├── Home.svelte
    │   │   ├── React.svelte
    │   │   └── GitHub.svelte
    │   ├── store.ts
    │   └── Icon.svelte
    ├── app.d.ts
    └── app.html
├── static
    └── favicon.png
├── postcss.config.cjs
├── vite.config.ts
├── .gitignore
├── .eslintignore
├── .prettierignore
├── .prettierrc
├── svelte.config.js
├── .eslintrc.cjs
├── tsconfig.json
├── tailwind.config.cjs
├── README.md
└── package.json


/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 | 


--------------------------------------------------------------------------------
/src/routes/(hooks)/useEffect/+page.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 | </script>
3 | 


--------------------------------------------------------------------------------
/src/routes/(hooks)/useMemo/+page.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 | </script>
3 | 


--------------------------------------------------------------------------------
/src/routes/(hooks)/useRef/+page.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 | </script>
3 | 


--------------------------------------------------------------------------------
/src/routes/(hooks)/useState/+page.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 | </script>
3 | 


--------------------------------------------------------------------------------
/src/routes/(hooks)/useCallback/+page.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 | </script>
3 | 


--------------------------------------------------------------------------------
/src/routes/(hooks)/useContext/+page.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 | </script>
3 | 


--------------------------------------------------------------------------------
/src/routes/(hooks)/useReducer/+page.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 | </script>
3 | 


--------------------------------------------------------------------------------
/src/app.postcss:
--------------------------------------------------------------------------------
1 | /*place global styles here */
2 | html, body { @apply h-full overflow-hidden; }


--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/breadthe/react-hooks-in-svelte/HEAD/static/favicon.png


--------------------------------------------------------------------------------
/postcss.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | 	plugins: {
3 | 		tailwindcss: {},
4 | 		autoprefixer: {},
5 | 	},
6 | }


--------------------------------------------------------------------------------
/src/routes/(hooks)/Header.svelte:
--------------------------------------------------------------------------------
1 | <h1 class="m-4 sm:m-8 mb-0 sm:mb-0">
2 | 	<slot name="header" />
3 | </h1>
4 | 


--------------------------------------------------------------------------------
/src/lib/types.ts:
--------------------------------------------------------------------------------
1 | export interface Tile {
2 |     id: number
3 |     url: string
4 |     label: string
5 |     title: string
6 |     icon: string
7 | }
8 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { sveltekit } from '@sveltejs/kit/vite';
2 | import { defineConfig } from 'vite';
3 | 
4 | export default defineConfig({
5 | 	plugins: [sveltekit()]
6 | });
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | vite.config.js.timestamp-*
10 | vite.config.ts.timestamp-*
11 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | 
10 | # Ignore files for PNPM, NPM and YARN
11 | pnpm-lock.yaml
12 | package-lock.json
13 | yarn.lock
14 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | 
10 | # Ignore files for PNPM, NPM and YARN
11 | pnpm-lock.yaml
12 | package-lock.json
13 | yarn.lock
14 | 


--------------------------------------------------------------------------------
/src/routes/(hooks)/useRef/svelte.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	let inputEl
 3 | 
 4 | 	function handleClick() {
 5 | 		inputEl.focus()
 6 | 	}
 7 | </script>
 8 | 
 9 | <input bind:this={inputEl} />
10 | <button on:click={handleClick}>Focus the input</button>
11 | 


--------------------------------------------------------------------------------
/src/lib/icons/Svelte.svelte:
--------------------------------------------------------------------------------
1 | <path
2 | 	d="M9.625 8.357l-5.088 3.18m2.968-1.855a3.5 3.5 0 01-3.71-5.937l4.241-2.65A3.5 3.5 0 0112.405 6.5M7.536 5.296a3.5 3.5 0 013.71 5.936l-4.24 2.65A3.5 3.5 0 012.614 8.5m2.8-1.88l5.09-3.179"
3 | 	stroke="currentColor"
4 | />
5 | 


--------------------------------------------------------------------------------
/src/routes/(hooks)/useState/svelte.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 | 	let count = 0
3 | </script>
4 | 
5 | Count: {count}
6 | <button on:click={() => (count = 0)}>Reset</button>
7 | <button on:click={() => count--}>-</button>
8 | <button on:click={() => count++}>+</button>
9 | 


--------------------------------------------------------------------------------
/src/routes/(hooks)/useMemo/svelte.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import fibonacci from "./fib"
 3 | 
 4 | 	let value = 0
 5 | 
 6 | 	$: result = fibonacci(value)
 7 | </script>
 8 | 
 9 | <input type="range" min="0" max="10" bind:value />
10 | <p>fib({value}) = {result}</p>
11 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"useTabs": true,
 3 |     "semi": false,
 4 | 	"trailingComma": "none",
 5 | 	"printWidth": 120,
 6 | 	"plugins": ["prettier-plugin-svelte"],
 7 | 	"pluginSearchDirs": ["."],
 8 | 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/app.d.ts:
--------------------------------------------------------------------------------
 1 | // See https://kit.svelte.dev/docs/types#app
 2 | // for information about these interfaces
 3 | // and what to do when importing types
 4 | declare namespace App {
 5 | 	// interface Locals {}
 6 | 	// interface PageData {}
 7 | 	// interface Error {}
 8 | 	// interface Platform {}
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/routes/(hooks)/useEffect/svelte.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { onMount } from "svelte"
 3 | 
 4 | 	let count = 0
 5 | 
 6 | 	onMount(() => {
 7 | 		const interval = setInterval(() => {
 8 | 			count += 1
 9 | 		}, 1000)
10 | 
11 | 		return () => clearInterval(interval)
12 | 	})
13 | </script>
14 | 
15 | Timer: {count}
16 | 


--------------------------------------------------------------------------------
/src/routes/(hooks)/useMemo/+page.ts:
--------------------------------------------------------------------------------
 1 | import type { PageLoad } from "./$types"
 2 | 
 3 | export const load = (async ({ params }) => {
 4 |     return {
 5 |         title: "useMemo",
 6 |         react: (await import("./react.jsx?raw")).default,
 7 |         svelte: (await import("./svelte.svelte?raw")).default,
 8 |     }
 9 | }) satisfies PageLoad
10 | 


--------------------------------------------------------------------------------
/src/routes/(hooks)/useRef/+page.ts:
--------------------------------------------------------------------------------
 1 | import type { PageLoad } from "./$types"
 2 | 
 3 | export const load = (async ({ params }) => {
 4 |     return {
 5 |         title: "useRef",
 6 |         react: (await import("./react.jsx?raw")).default,
 7 |         svelte: (await import("./svelte.svelte?raw")).default,
 8 |     }
 9 | }) satisfies PageLoad
10 | 


--------------------------------------------------------------------------------
/src/routes/(hooks)/useState/+page.ts:
--------------------------------------------------------------------------------
 1 | import type { PageLoad } from "./$types"
 2 | 
 3 | export const load = (async ({ params }) => {
 4 |     return {
 5 |         title: "useState",
 6 |         react: (await import("./react.jsx?raw")).default,
 7 |         svelte: (await import("./svelte.svelte?raw")).default,
 8 |     }
 9 | }) satisfies PageLoad
10 | 


--------------------------------------------------------------------------------
/src/routes/(hooks)/useContext/+page.ts:
--------------------------------------------------------------------------------
 1 | import type { PageLoad } from "./$types"
 2 | 
 3 | export const load = (async ({ params }) => {
 4 |     return {
 5 |         title: "useContext",
 6 |         react: (await import("./react.jsx?raw")).default,
 7 |         svelte: (await import("./svelte.svelte?raw")).default,
 8 |     }
 9 | }) satisfies PageLoad
10 | 


--------------------------------------------------------------------------------
/src/routes/(hooks)/useEffect/+page.ts:
--------------------------------------------------------------------------------
 1 | import type { PageLoad } from "./$types"
 2 | 
 3 | export const load = (async ({ params }) => {
 4 |     return {
 5 |         title: "useEffect",
 6 |         react: (await import("./react.jsx?raw")).default,
 7 |         svelte: (await import("./svelte.svelte?raw")).default,
 8 |     }
 9 | }) satisfies PageLoad
10 | 


--------------------------------------------------------------------------------
/src/routes/(hooks)/useReducer/+page.ts:
--------------------------------------------------------------------------------
 1 | import type { PageLoad } from "./$types"
 2 | 
 3 | export const load = (async ({ params }) => {
 4 |     return {
 5 |         title: "useReducer",
 6 |         react: (await import("./react.jsx?raw")).default,
 7 |         svelte: (await import("./svelte.svelte?raw")).default,
 8 |     }
 9 | }) satisfies PageLoad
10 | 


--------------------------------------------------------------------------------
/src/routes/(hooks)/useCallback/+page.ts:
--------------------------------------------------------------------------------
 1 | import type { PageLoad } from "./$types"
 2 | 
 3 | export const load = (async ({ params }) => {
 4 |     return {
 5 |         title: "useCallback",
 6 |         react: (await import("./react.jsx?raw")).default,
 7 |         svelte: (await import("./svelte.svelte?raw")).default,
 8 |     }
 9 | }) satisfies PageLoad
10 | 


--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
 1 | import adapter from '@sveltejs/adapter-auto';
 2 | import { vitePreprocess } from '@sveltejs/kit/vite';
 3 | 
 4 | /** @type {import('@sveltejs/kit').Config} */
 5 | const config = {
 6 | 	kit: {
 7 | 		adapter: adapter()
 8 | 	},
 9 | 	preprocess: [
10 | 		vitePreprocess({
11 | 			postcss: true
12 | 		})
13 | 	],
14 | };
15 | 
16 | export default config;
17 | 


--------------------------------------------------------------------------------
/src/routes/(hooks)/useCallback/svelte.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |     // In Svelte this isn't needed, because event handlers are declared inside <script> tags.
3 |     // They aren't defined in the render path and therefore aren't redefined on every render.
4 |     // They are defined once per component, so they work similar to how event handlers worked with React.Component.
5 | </script>
6 | 


--------------------------------------------------------------------------------
/src/routes/+error.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { page } from "$app/stores"
 3 | </script>
 4 | 
 5 | <div class="h-full flex flex-col items-center justify-center gap-4">
 6 | 	<h1>{$page.status}</h1>
 7 | 	<h2><em>{$page?.error?.message}</em></h2>
 8 | 
 9 | 	{#if $page.status === 404}
10 | 		<em class="px-4 py-2 bg-primary-700 text-white rounded-full font-mono">{$page.url.pathname}</em>
11 | 	{/if}
12 | </div>
13 | 


--------------------------------------------------------------------------------
/src/app.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html >
 2 | <html lang="en" class="dark">
 3 | 	<head>
 4 | 		<meta charset="utf-8" />
 5 | 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 6 | 		<meta name="viewport" content="width=device-width" />
 7 | 		%sveltekit.head%
 8 | 	</head>
 9 | 	<body data-theme="modern">
10 | 		<div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div>
11 | 	</body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/src/routes/(hooks)/useContext/svelte.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { setContext } from "svelte"
 3 | 	import Toolbar from "./Toolbar.svelte"
 4 | 
 5 | 	const themes = {
 6 | 		light: {
 7 | 			foreground: "#000000",
 8 | 			background: "#eeeeee"
 9 | 		},
10 | 		dark: {
11 | 			foreground: "#ffffff",
12 | 			background: "#222222"
13 | 		}
14 | 	}
15 | 
16 | 	setContext("ThemeContext", themes.dark)
17 | </script>
18 | 
19 | <Toolbar />
20 | 


--------------------------------------------------------------------------------
/src/routes/(hooks)/useCallback/react.jsx:
--------------------------------------------------------------------------------
1 | // This function (component) is executed on every render
2 | function Component() {
3 |     // this event handler is redefined on every render
4 |     const handleClick = () => alert("hello")
5 | 
6 |     // because `handleClick` is redefined on every render, `ChildComponent` will be re-rendered too. Because its `onClick` prop is considered changed.
7 |     return <ChildComponent onClick={handleClick} />
8 | }
9 | 


--------------------------------------------------------------------------------
/src/routes/(hooks)/useRef/react.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useRef } from 'react'
 2 | 
 3 | export default function TextInputWithFocusButton() {
 4 |     const inputEl = useRef(null)
 5 |     const handleClick = () => {
 6 |         inputEl.current.focus()
 7 |     }
 8 | 
 9 |     return (
10 |         <>
11 |             <input ref={inputEl} />
12 |             <button onClick={handleClick}>Focus the input</button>
13 |         </>
14 |     )
15 | }
16 | 


--------------------------------------------------------------------------------
/src/routes/(hooks)/useReducer/svelte.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { writable } from "svelte/store"
 3 | 
 4 | 	const initialValue = 0
 5 | 	const count = writable(initialValue)
 6 | 
 7 | 	count.increment = () => {
 8 | 		count.update((state) => state + 1)
 9 | 	}
10 | 	count.decrement = () => {
11 | 		count.update((state) => state - 1)
12 | 	}
13 | </script>
14 | 
15 | Count: {$count}
16 | <button on:click={count.decrement}>-</button>
17 | <button on:click={count.increment}>+</button>
18 | 


--------------------------------------------------------------------------------
/src/routes/(hooks)/useEffect/react.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react'
 2 | 
 3 | export default function Timer() {
 4 |     const [count, setCount] = useState(0)
 5 | 
 6 |     useEffect(() => {
 7 |         const interval = setInterval(() => {
 8 |             setCount(count => count + 1)
 9 |         }, 1000)
10 | 
11 |         return () => clearInterval(interval)
12 |     }, [])
13 | 
14 |     return (
15 |         <>
16 |             Timer: {count}
17 |         </>
18 |     )
19 | }
20 | 


--------------------------------------------------------------------------------
/src/routes/(hooks)/useState/react.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react"
 2 | 
 3 | export default function Counter() {
 4 |     const [count, setCount] = useState(0)
 5 | 
 6 |     return (
 7 |         <>
 8 |             Count: {count}
 9 |             <button onClick={() => setCount(0)}>Reset</button>
10 |             <button onClick={() => setCount((prevCount) => prevCount - 1)}>-</button>
11 |             <button onClick={() => setCount((prevCount) => prevCount + 1)}>+</button>
12 |         </>
13 |     )
14 | }
15 | 


--------------------------------------------------------------------------------
/src/lib/icons/Code.svelte:
--------------------------------------------------------------------------------
1 | <path
2 | 	d="M10.146 10.146l-.353.354.707.707.354-.353-.708-.708zM13.5 7.5l.354.354.353-.354-.353-.354-.354.354zm-2.646-3.354l-.354-.353-.707.707.353.354.708-.708zm-6.708 6.708l.354.353.707-.707-.353-.354-.708.708zM1.5 7.5l-.354-.354-.353.354.353.354L1.5 7.5zm3.354-2.646l.353-.354-.707-.707-.354.353.708.708zm6 6l3-3-.708-.708-3 3 .708.708zm3-3.708l-3-3-.708.708 3 3 .708-.708zm-9 3l-3-3-.708.708 3 3 .708-.708zm-3-2.292l3-3-.708-.708-3 3 .708.708zm6.153-6.436l-2 12 .986.164 2-12-.986-.164z"
3 | 	fill="currentColor"
4 | />
5 | 


--------------------------------------------------------------------------------
/src/lib/icons/Home.svelte:
--------------------------------------------------------------------------------
1 | <path
2 | 	d="M7.5.5l.325-.38a.5.5 0 00-.65 0L7.5.5zm-7 6l-.325-.38L0 6.27v.23h.5zm5 8v.5a.5.5 0 00.5-.5h-.5zm4 0H9a.5.5 0 00.5.5v-.5zm5-8h.5v-.23l-.175-.15-.325.38zM1.5 15h4v-1h-4v1zm13.325-8.88l-7-6-.65.76 7 6 .65-.76zm-7.65-6l-7 6 .65.76 7-6-.65-.76zM6 14.5v-3H5v3h1zm3-3v3h1v-3H9zm.5 3.5h4v-1h-4v1zm5.5-1.5v-7h-1v7h1zm-15-7v7h1v-7H0zM7.5 10A1.5 1.5 0 019 11.5h1A2.5 2.5 0 007.5 9v1zm0-1A2.5 2.5 0 005 11.5h1A1.5 1.5 0 017.5 10V9zm6 6a1.5 1.5 0 001.5-1.5h-1a.5.5 0 01-.5.5v1zm-12-1a.5.5 0 01-.5-.5H0A1.5 1.5 0 001.5 15v-1z"
3 | 	fill="currentColor"
4 | />
5 | 


--------------------------------------------------------------------------------
/src/lib/icons/React.svelte:
--------------------------------------------------------------------------------
1 | <path d="M14.5 7.584c0 1.657-3.134 3-7 3s-7-1.343-7-3 3.134-3 7-3 7 1.343 7 3z" stroke="currentColor" /><path
2 | 	d="M4.166 13.739c1.457.79 4.13-1.327 5.972-4.726 1.841-3.4 2.153-6.795.696-7.584-1.457-.79-4.13 1.327-5.972 4.726-1.841 3.4-2.153 6.795-.696 7.584z"
3 | 	stroke="currentColor"
4 | /><path
5 | 	d="M10.834 13.739c-1.457.79-4.13-1.327-5.972-4.726-1.841-3.4-2.153-6.795-.696-7.584 1.457-.79 4.13 1.327 5.972 4.726 1.841 3.4 2.153 6.795.696 7.584z"
6 | 	stroke="currentColor"
7 | /><path d="M6.5 7.584a1 1 0 102 0 1 1 0 00-2 0z" stroke="currentColor" />
8 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	root: true,
 3 | 	parser: '@typescript-eslint/parser',
 4 | 	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
 5 | 	plugins: ['svelte3', '@typescript-eslint'],
 6 | 	ignorePatterns: ['*.cjs'],
 7 | 	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
 8 | 	settings: {
 9 | 		'svelte3/typescript': () => require('typescript')
10 | 	},
11 | 	parserOptions: {
12 | 		sourceType: 'module',
13 | 		ecmaVersion: 2020
14 | 	},
15 | 	env: {
16 | 		browser: true,
17 | 		es2017: true,
18 | 		node: true
19 | 	}
20 | };
21 | 


--------------------------------------------------------------------------------
/src/routes/(hooks)/useContext/react.jsx:
--------------------------------------------------------------------------------
 1 | import React, { createContext } from 'react'
 2 | import Toolbar from './Toolbar'
 3 | 
 4 | const themes = {
 5 |     light: {
 6 |         foreground: "#000000",
 7 |         background: "#eeeeee"
 8 |     },
 9 |     dark: {
10 |         foreground: "#ffffff",
11 |         background: "#222222"
12 |     }
13 | }
14 | 
15 | export const ThemeContext = createContext(themes.light)
16 | 
17 | export default function App() {
18 |     return (
19 |         <ThemeContext.Provider value={themes.dark}>
20 |             <Toolbar />
21 |         </ThemeContext.Provider>
22 |     )
23 | }
24 | 


--------------------------------------------------------------------------------
/src/routes/(hooks)/useMemo/react.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useMemo, useState } from 'react'
 2 | import fibonacci from './fib'
 3 | 
 4 | export default function Fibonacci() {
 5 |     const [value, setValue] = useState(0)
 6 |     const result = useMemo(() => {
 7 |         return fibonacci(value)
 8 |     }, [value])
 9 | 
10 |     const handleChange = (e) => {
11 |         setValue(e.target.value)
12 |     }
13 | 
14 |     return (
15 |         <>
16 |             <input type="range" min="0" max="10" onChange={handleChange} value={value} />
17 |             <p>fib({value}) = {result}</p>
18 |         </>
19 |     )
20 | }
21 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"extends": "./.svelte-kit/tsconfig.json",
 3 | 	"compilerOptions": {
 4 | 		"allowJs": true,
 5 | 		"checkJs": true,
 6 | 		"esModuleInterop": true,
 7 | 		"forceConsistentCasingInFileNames": true,
 8 | 		"resolveJsonModule": true,
 9 | 		"skipLibCheck": true,
10 | 		"sourceMap": true,
11 | 		"strict": true
12 | 	}
13 | 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
14 | 	//
15 | 	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
16 | 	// from the referenced tsconfig.json - TypeScript does not merge them in
17 | }
18 | 


--------------------------------------------------------------------------------
/tailwind.config.cjs:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |     darkMode: 'class',
 4 |     content: ['./src/**/*.{html,js,svelte,ts}', require('path').join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')],
 5 |     theme: {
 6 |         extend: {
 7 |             colors: {
 8 |                 'svelte': '#ff3e00',
 9 |                 'react': '#61dafb',
10 |             }
11 |         },
12 |     },
13 |     plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography'), require('@tailwindcss/line-clamp'), ...require('@skeletonlabs/skeleton/tailwind/skeleton.cjs')()],
14 | }
15 | 


--------------------------------------------------------------------------------
/src/routes/(hooks)/Snippet.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { CodeBlock } from "@skeletonlabs/skeleton"
 3 | 	import Icon from "$lib/Icon.svelte"
 4 | 
 5 | 	export let framework: string
 6 | 	export let code: any
 7 | 
 8 | 	$: language = framework === "react" ? "jsx" : "svelte"
 9 | </script>
10 | 
11 | <div class="w-full sm:w-1/2 flex flex-col gap-2 sm:gap-4">
12 | 	<h2
13 | 		class={`flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r ${
14 | 			framework === "react" ? "from-react to-react/10 text-blue-900" : "from-svelte to-svelte/10 text-orange-50"
15 | 		}`}
16 | 	>
17 | 		<Icon icon={framework} />
18 | 		{framework}
19 | 	</h2>
20 | 
21 | 	<CodeBlock {code} {language} />
22 | </div>
23 | 


--------------------------------------------------------------------------------
/src/routes/(hooks)/useReducer/react.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useReducer } from 'react'
 2 | 
 3 | const initialState = { count: 0 }
 4 | 
 5 | function reducer(state, action) {
 6 |     switch (action.type) {
 7 |         case 'increment':
 8 |             return { count: state.count + 1 }
 9 |         case 'decrement':
10 |             return { count: state.count - 1 }
11 |         default:
12 |             throw new Error()
13 |     }
14 | }
15 | 
16 | export default function Counter() {
17 |     const [state, dispatch] = useReducer(reducer, initialState)
18 |     return (
19 |         <>
20 |             Count: {state.count}
21 |             <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
22 |             <button onClick={() => dispatch({ type: 'increment' })}>+</button>
23 |         </>
24 |     )
25 | }
26 | 


--------------------------------------------------------------------------------
/src/lib/store.ts:
--------------------------------------------------------------------------------
 1 | import { readable, type Readable, writable, type Writable, derived } from "svelte/store"
 2 | import type { Tile } from "./types"
 3 | 
 4 | export const selectedTile: Writable<number> = writable(0)
 5 | 
 6 | export const tiles: Readable<Tile[]> = readable([
 7 |     { id: 0, url: "/", label: "Home", title: "Home", icon: "home" },
 8 |     { id: 1, url: "/useState", label: "useState", title: "useState", icon: "code" },
 9 |     { id: 2, url: "/useEffect", label: "useEffect", title: "useEffect", icon: "code" },
10 |     { id: 3, url: "/useMemo", label: "useMemo", title: "useMemo", icon: "code" },
11 |     { id: 4, url: "/useRef", label: "useRef", title: "useRef", icon: "code" },
12 |     { id: 5, url: "/useReducer", label: "useReducer", title: "useReducer", icon: "code" },
13 |     { id: 6, url: "/useCallback", label: "useCallback", title: "useCallback", icon: "code" },
14 |     { id: 7, url: "/useContext", label: "useContext", title: "useContext", icon: "code" }
15 | ])
16 | 
17 | export const hooks = derived(tiles, $tiles => $tiles.slice(1))
18 | 


--------------------------------------------------------------------------------
/src/lib/Icon.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import CodeIcon from "./icons/Code.svelte"
 3 | 	import GitHubIcon from "./icons/GitHub.svelte"
 4 | 	import HomeIcon from "./icons/Home.svelte"
 5 | 	import ReactIcon from "./icons/React.svelte"
 6 | 	import SvelteIcon from "./icons/Svelte.svelte"
 7 | 
 8 | 	export let icon: string
 9 | 	export let color: string = ""
10 | 	export let title: string = ""
11 | 	export let size: number = 20
12 | 	export let klass: string = "" // Merge default classes with prop classes; aka "class" but it's an invalid keyword so wth
13 | 
14 | 	const icons = [
15 | 		{ id: "code", component: CodeIcon },
16 | 		{ id: "github", component: GitHubIcon },
17 | 		{ id: "home", component: HomeIcon },
18 | 		{ id: "react", component: ReactIcon },
19 | 		{ id: "svelte", component: SvelteIcon }
20 | 	]
21 | </script>
22 | 
23 | <svg
24 | 	xmlns="http://www.w3.org/2000/svg"
25 | 	viewBox="0 0 15 15"
26 | 	fill="none"
27 | 	stroke="currentColor"
28 |     stroke-width="1"
29 | 	width={size}
30 | 	height={size}
31 | 	{title}
32 | 	class={`${color} ${klass}`}
33 | >
34 | 	<svelte:component this={icons.find((i) => i.id === icon).component} />
35 | </svg>
36 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # React Hooks in Svelte
 2 | 
 3 | A SvelteKit website showing side-by-side examples of React hooks and the equivalent Svelte code.
 4 | 
 5 | The code examples are 100% made by [Josh Nuss](https://github.com/joshnuss) with [React Hooks in Svelte](https://github.com/joshnuss/react-hooks-in-svelte). All I've done is dress them up visually, so I could play around with [SvelteKit](https://kit.svelte.dev/) and [Skeleton UI](https://www.skeleton.dev/).
 6 | 
 7 | ![React useState hook in Svelte screenshot](https://user-images.githubusercontent.com/17433578/223051593-5c8530fc-4ed9-4ce9-984e-268e57e19012.png)
 8 | 
 9 | ## Developing
10 | 
11 | Once you've installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
12 | 
13 | ```bash
14 | npm run dev
15 | 
16 | # or start the server and open the app in a new browser tab
17 | npm run dev -- --open
18 | ```
19 | 
20 | ## Building
21 | 
22 | To create a production version of your app:
23 | 
24 | ```bash
25 | npm run build
26 | ```
27 | 
28 | You can preview the production build with `npm run preview`.
29 | 
30 | > To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
31 | 


--------------------------------------------------------------------------------
/src/routes/+page.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { hooks } from "$lib/store"
 3 | </script>
 4 | 
 5 | <div class="container h-full mx-auto p-4 sm:p-8 flex flex-col gap-8 sm:gap-16 sm:justify-center items-center">
 6 | 	<div class="space-y-4 text-center">
 7 | 		<h1>
 8 | 			<span class="text-react">React</span>
 9 | 			<span
10 | 				class="bg-gradient-to-r from-react via-primary-100 to-svelte bg-clip-text text-transparent box-decoration-clone"
11 | 			>
12 | 				hooks in
13 | 			</span>
14 | 			<span class="text-svelte">Svelte</span>
15 | 		</h1>
16 | 		<h3>
17 | 			based on <a href="https://github.com/joshnuss/react-hooks-in-svelte" target="_blank" rel="noreferrer"
18 | 				>React hooks in Svelte</a
19 | 			>
20 | 			by <a href="https://twitter.com/joshnuss" target="_blank" rel="noreferrer">Josh Nuss</a>
21 | 		</h3>
22 | 		<p>
23 | 			Side-by-side code examples of React hooks implemented in Svelte. A reference for developers who need to work
24 | 			across Svelte and React.
25 | 		</p>
26 | 	</div>
27 | 
28 | 	<div class="flex flex-wrap gap-4 sm:gap-8">
29 | 		{#each $hooks as hook (hook.id)}
30 | 			<a href={hook.url} title={hook.title} class="card card-hover variant-filled-primary w-full sm:w-1/5 p-4">
31 | 				{hook.label}
32 | 			</a>
33 | 		{/each}
34 | 	</div>
35 | </div>
36 | 
37 | <style lang="postcss">
38 | </style>
39 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "react-vs-svelte",
 3 | 	"version": "0.0.1",
 4 | 	"private": true,
 5 | 	"scripts": {
 6 | 		"dev": "vite dev",
 7 | 		"build": "vite build",
 8 | 		"preview": "vite preview",
 9 | 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
10 | 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
11 | 		"lint": "prettier --plugin-search-dir . --check . && eslint .",
12 | 		"format": "prettier --plugin-search-dir . --write ."
13 | 	},
14 | 	"devDependencies": {
15 | 		"@skeletonlabs/skeleton": "^1.0.0",
16 | 		"@sveltejs/adapter-auto": "^2.0.0",
17 | 		"@sveltejs/kit": "^1.5.0",
18 | 		"@tailwindcss/forms": "^0.5.3",
19 | 		"@tailwindcss/line-clamp": "^0.4.2",
20 | 		"@tailwindcss/typography": "^0.5.9",
21 | 		"@typescript-eslint/eslint-plugin": "^5.45.0",
22 | 		"@typescript-eslint/parser": "^5.45.0",
23 | 		"autoprefixer": "^10.4.13",
24 | 		"eslint": "^8.28.0",
25 | 		"eslint-config-prettier": "^8.5.0",
26 | 		"eslint-plugin-svelte3": "^4.0.0",
27 | 		"highlight.js": "^11.7.0",
28 | 		"highlightjs-svelte": "^1.0.6",
29 | 		"postcss": "^8.4.21",
30 | 		"prettier": "^2.8.0",
31 | 		"prettier-plugin-svelte": "^2.8.1",
32 | 		"svelte": "^3.54.0",
33 | 		"svelte-check": "^3.0.1",
34 | 		"svelte-preprocess": "^5.0.1",
35 | 		"tailwindcss": "^3.2.7",
36 | 		"tslib": "^2.4.1",
37 | 		"typescript": "^4.9.3",
38 | 		"vite": "^4.0.0"
39 | 	},
40 | 	"type": "module"
41 | }
42 | 


--------------------------------------------------------------------------------
/src/routes/+layout.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import "@skeletonlabs/skeleton/themes/theme-modern.css"
 3 | 	import "@skeletonlabs/skeleton/styles/all.css"
 4 | 	import "../app.postcss"
 5 | 	import { selectedTile, tiles } from "../lib/store"
 6 | 	import { page } from "$app/stores"
 7 | 	import { AppShell, AppBar, AppRail, AppRailTile, LightSwitch } from "@skeletonlabs/skeleton"
 8 | 	import Icon from "../lib/Icon.svelte"
 9 | 
10 |     const siteName = "React Hooks in Svelte"
11 |     $: title = $page.url.pathname === "/" ? siteName : `${$page.data.title} | ${siteName}`
12 | </script>
13 | 
14 | <svelte:head>
15 |     <title>{title}</title>
16 | </svelte:head>
17 | 
18 | <!-- App Shell -->
19 | <AppShell>
20 | 	<svelte:fragment slot="header">
21 | 		<!-- App Bar -->
22 | 		<AppBar class="bg-primary-500">
23 | 			<svelte:fragment slot="lead">
24 | 				<a href="/" title="Home page"><strong class="text-xl uppercase">{siteName}</strong></a>
25 | 			</svelte:fragment>
26 | 			<svelte:fragment slot="trail">
27 |                 <LightSwitch />
28 | 			</svelte:fragment>
29 | 		</AppBar>
30 | 	</svelte:fragment>
31 | 
32 | 	<svelte:fragment slot="sidebarLeft">
33 | 		<!-- AppRail -->
34 | 		<AppRail selected={selectedTile}>
35 | 			<svelte:fragment slot="lead">
36 | 				<!-- AppRailTiles -->
37 | 				{#each $tiles as tile (tile.id)}
38 | 					<AppRailTile
39 | 						label={tile.label}
40 | 						title={tile.title}
41 | 						value={tile.id}
42 | 						tag="a"
43 | 						href={tile.url}
44 | 						class={tile.url === $page.url.pathname ? "bg-primary-500" : ""}><Icon icon={tile.icon} /></AppRailTile
45 | 					>
46 | 				{/each}
47 | 			</svelte:fragment>
48 | 
49 | 			<svelte:fragment slot="trail">
50 | 				<!-- AppRailTiles -->
51 | 				<AppRailTile
52 | 					label="GitHub"
53 | 					title="GitHub"
54 | 					tag="a"
55 | 					href="https://github.com/breadthe/react-hooks-in-svelte"
56 | 					target="_blank"
57 | 					rel="noreferrer"><Icon icon="github" /></AppRailTile
58 | 				>
59 | 			</svelte:fragment>
60 | 		</AppRail>
61 | 	</svelte:fragment>
62 | 
63 | 	<!-- Page Route Content -->
64 | 	<slot />
65 | </AppShell>
66 | 


--------------------------------------------------------------------------------
/src/lib/icons/GitHub.svelte:
--------------------------------------------------------------------------------
1 | <path
2 | 	d="M5.65 12.477a.5.5 0 10-.3-.954l.3.954zm-3.648-2.96l-.484-.128-.254.968.484.127.254-.968zM9 14.5v.5h1v-.5H9zm.063-4.813l-.054-.497a.5.5 0 00-.299.852l.352-.354zM12.5 5.913h.5V5.91l-.5.002zm-.833-2.007l-.466-.18a.5.5 0 00.112.533l.354-.353zm-.05-2.017l.456-.204a.5.5 0 00-.319-.276l-.137.48zm-2.173.792l-.126.484a.5.5 0 00.398-.064l-.272-.42zm-3.888 0l-.272.42a.5.5 0 00.398.064l-.126-.484zM3.383 1.89l-.137-.48a.5.5 0 00-.32.276l.457.204zm-.05 2.017l.354.353a.5.5 0 00.112-.534l-.466.181zM2.5 5.93H3v-.002l-.5.002zm3.438 3.758l.352.355a.5.5 0 00-.293-.851l-.06.496zM5.5 11H6l-.001-.037L5.5 11zM5 14.5v.5h1v-.5H5zm.35-2.977c-.603.19-.986.169-1.24.085-.251-.083-.444-.25-.629-.49a4.8 4.8 0 01-.27-.402c-.085-.139-.182-.302-.28-.447-.191-.281-.473-.633-.929-.753l-.254.968c.08.02.184.095.355.346.082.122.16.252.258.412.094.152.202.32.327.484.253.33.598.663 1.11.832.51.168 1.116.15 1.852-.081l-.3-.954zm4.65-.585c0-.318-.014-.608-.104-.878-.096-.288-.262-.51-.481-.727l-.705.71c.155.153.208.245.237.333.035.105.053.254.053.562h1zm-.884-.753c.903-.097 1.888-.325 2.647-.982.78-.675 1.237-1.729 1.237-3.29h-1c0 1.359-.39 2.1-.892 2.534-.524.454-1.258.653-2.099.743l.107.995zM13 5.91a3.354 3.354 0 00-.98-2.358l-.707.706c.438.44.685 1.034.687 1.655l1-.003zm-.867-1.824c.15-.384.22-.794.21-1.207l-1 .025a2.12 2.12 0 01-.142.82l.932.362zm.21-1.207a3.119 3.119 0 00-.27-1.195l-.913.408c.115.256.177.532.184.812l1-.025zm-.726-.99c.137-.481.137-.482.136-.482h-.003l-.004-.002a.462.462 0 00-.03-.007 1.261 1.261 0 00-.212-.024 2.172 2.172 0 00-.51.054c-.425.091-1.024.317-1.82.832l.542.84c.719-.464 1.206-.634 1.488-.694a1.2 1.2 0 01.306-.03l-.008-.001a.278.278 0 01-.01-.002l-.006-.002h-.003l-.002-.001c-.001 0-.002 0 .136-.482zm-2.047.307a8.209 8.209 0 00-4.14 0l.252.968a7.209 7.209 0 013.636 0l.252-.968zm-3.743.064c-.797-.514-1.397-.74-1.822-.83a2.17 2.17 0 00-.51-.053 1.259 1.259 0 00-.241.03l-.004.002h-.003l.136.481.137.481h-.001l-.002.001-.003.001a.327.327 0 01-.016.004l-.008.001h.008a1.19 1.19 0 01.298.03c.282.06.769.23 1.488.694l.543-.84zm-2.9-.576a3.12 3.12 0 00-.27 1.195l1 .025a2.09 2.09 0 01.183-.812l-.913-.408zm-.27 1.195c-.01.413.06.823.21 1.207l.932-.362a2.12 2.12 0 01-.143-.82l-1-.025zm.322.673a3.354 3.354 0 00-.726 1.091l.924.38c.118-.285.292-.545.51-.765l-.708-.706zm-.726 1.091A3.354 3.354 0 002 5.93l1-.003c0-.31.06-.616.177-.902l-.924-.38zM2 5.93c0 1.553.458 2.597 1.239 3.268.757.65 1.74.88 2.64.987l.118-.993C5.15 9.09 4.416 8.89 3.89 8.438 3.388 8.007 3 7.276 3 5.928H2zm3.585 3.404c-.5.498-.629 1.09-.584 1.704L6 10.963c-.03-.408.052-.683.291-.921l-.705-.709zM5 11v3.5h1V11H5zm5 3.5V13H9v1.5h1zm0-1.5v-2.063H9V13h1z"
3 | 	fill="currentColor"
4 | />
5 | 


--------------------------------------------------------------------------------
/src/routes/(hooks)/+layout.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { page } from "$app/stores"
 3 | 	import { CodeBlock } from "@skeletonlabs/skeleton"
 4 | 	import hljs from "highlight.js"
 5 | 	import highlightjs from "highlightjs-svelte"
 6 | 	import "highlight.js/styles/monokai-sublime.css"
 7 | 	import { storeHighlightJs } from "@skeletonlabs/skeleton"
 8 | 	import Icon from "$lib/Icon.svelte"
 9 |     import Header from "./Header.svelte"
10 | 
11 | 	highlightjs(hljs)
12 | 	storeHighlightJs.set(hljs)
13 | 
14 |     let reactSize: number
15 |     let svelteSize: number
16 |     let diff: number
17 |     let percentageSmaller: number
18 |     let cleanedReact: string // the source code stripped of comments and empty lines
19 |     let cleanedSvelte: string // the source code stripped of comments and empty lines
20 | 
21 |     const stripComments = (code: string) => code.replace(/(\/\*([\s\S]*?)\*\/)|(\/\/(.*)$)/gm, '')
22 |     const stripEmptyLines = (code: string) => code.replace(/^[ \t]*\n/gm, '')
23 | 
24 |     $: {
25 |         cleanedReact = stripEmptyLines(stripComments($page.data.react))
26 |         cleanedSvelte = stripEmptyLines(stripComments($page.data.svelte))
27 | 
28 |         reactSize = cleanedReact.length
29 |         svelteSize = cleanedSvelte.length
30 |         diff = Math.abs(reactSize - svelteSize)
31 |         percentageSmaller = Math.round((diff / reactSize) * 100)
32 |     }
33 | </script>
34 | 
35 | <!-- Page Route Content -->
36 | <slot></slot>
37 | 
38 | <Header>
39 |     <svelte:fragment slot="header">
40 |         {$page.data.title}
41 |     </svelte:fragment>
42 | </Header>
43 | 
44 | <div class="flex flex-col sm:flex-row gap-8 p-4 sm:p-8">
45 | 	<div class="w-full sm:w-1/2 flex flex-col gap-2 sm:gap-4">
46 | 		<h2 class="flex items-center justify-between px-4 py-2 rounded-full bg-gradient-to-r from-react to-react/10 text-blue-900">
47 |             <span class="flex items-center gap-2"><Icon icon="react" /> React</span>
48 |             <span class="px-4 py-2 rounded-full bg-white/30 text-sm text-black dark:text-white font-medium">{reactSize} characters</span>
49 |         </h2>
50 | 
51 | 		<slot name="react-snippet" />
52 |         <CodeBlock code={$page.data.react} language="jsx" />
53 | 	</div>
54 | 	<div class="w-full sm:w-1/2 flex flex-col gap-2 sm:gap-4">
55 | 		<h2 class="flex items-center justify-between px-4 py-2 rounded-full bg-gradient-to-r from-svelte to-svelte/10 text-orange-50">
56 |             <span class="flex items-center gap-2"><Icon icon="svelte" /> Svelte</span>
57 |             <span class="px-4 py-2 rounded-full bg-white/30 text-sm text-black dark:text-white font-medium">{svelteSize} characters ({percentageSmaller}% less)</span>
58 |         </h2>
59 | 
60 |         <slot name="svelte-snippet" />
61 | 		<CodeBlock code={$page.data.svelte} language="svelte" />
62 | 
63 | 	</div>
64 | </div>
65 | 


--------------------------------------------------------------------------------