Code:
@startjson
{
   "fruit":"Apple",
 "size":"Large",
| import type { SvelteComponent } from 'svelte'; | |
| export interface ActivityType { | |
| title: HTMLElement | string; | |
| date: Date | string; | |
| src: string; | |
| alt: string; | |
| text?: HTMLElement | string; | |
| } | 
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Vite + Svelte + PWA</title> | |
| <link rel="manifest" href="/assets/manifest-1a803fe8.webmanifest" /> | |
| <meta name="theme-color" content="#ffffff" /> | |
| <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> | |
| <link rel="icon" href="favicon.ico" type="image/x-icon" /> | 
| { | |
| "name": "Vite Svelte PWA", | |
| "short_name": "vite-svelte-pwa", | |
| "scope": "/", | |
| "start_url": ".", | |
| "icons": [ | |
| { | |
| "src": "/apple-touch-icon.png", | |
| "sizes": "180x180", | |
| "type": "image/png" | 
| const GHPATH = 'https://vite-svelte-pwa.codewithshin.com'; | |
| const APP_PREFIX = 'vite_svelte_pwa_'; | |
| const VERSION = 'version_02'; | |
| const URLS = [ | |
| `${GHPATH}/`, | |
| `${GHPATH}/index.html` | |
| ]; | |
| const CACHE_NAME = APP_PREFIX + VERSION; | |
| self.addEventListener('fetch', function (e) { | 
| /* | |
| This script reads the files in the dist directory and creates a new exports object in the package.json file | |
| with the appropriate svelte and types paths for each Svelte component file found in the dist directory, | |
| except for index.js and index.d.ts. | |
| The resulting exports object is structured as follows: | |
| "exports": { | |
| ".": { | |
| "types": "./dist/index.d.ts", | |
| "svelte": "./dist/index.js" | |
| }, | 
| // Use this script where you have sub-directories | |
| // This script reads the files in the dist directory and creates a new exports object in the package.json file | |
| import fs from 'fs'; | |
| import path from 'path'; | |
| const distDir = './dist'; | |
| const packageJsonPath = './package.json'; | |
| const componentNames = fs.readdirSync(distDir); | |
| const componentExports = {}; | 
| <script> | |
| import { Heading, Button, Modal, ImagePlaceholder, TextPlaceholder } from 'flowbite-svelte' | |
| let defaultModal = false; | |
| </script> | |
| <Heading tag="h1" customSize="text-5xl">My website</Heading> | |
| <ImagePlaceholder class='my-4'/> | |
| <Button on:click={() => defaultModal = true} class='mb-4'>Default modal</Button> | |
| <TextPlaceholder class='pb-8' size='xxl'/> | |
| <TextPlaceholder class='pb-8' size='xxl'/> | 
| <script lang='ts'> | |
| import "../app.postcss" | |
| import { Navbar, NavBrand, NavLi, NavUl, NavHamburger, Footer, FooterBrand, FooterCopyright, FooterLinkGroup, FooterLink, Hr } from 'flowbite-svelte' | |
| </script> | |
| <Navbar let:hidden let:toggle> | |
| <NavBrand href="/"> | |
| <img | |
| src="https://flowbite-svelte.com/images/flowbite-svelte-icon-logo.svg" | |
| class="mr-3 h-6 sm:h-9" | 
| <script lang='ts'> | |
| import "../app.postcss" | |
| import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from 'flowbite-svelte' | |
| </script> | |
| <Navbar let:hidden let:toggle> | |
| <NavBrand href="/"> | |
| <img | |
| src="https://flowbite-svelte.com/images/flowbite-svelte-icon-logo.svg" | |
| class="mr-3 h-6 sm:h-9" |