├── .gitignore ├── LICENSE ├── README.md ├── demo-apps ├── calendar │ ├── .eslintignore │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── .npmrc │ ├── .prettierignore │ ├── .prettierrc │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── app 2.html │ │ ├── app.d.ts │ │ ├── app.html │ │ ├── lib │ │ │ ├── Appointment.svelte │ │ │ ├── Calendar.svelte │ │ │ ├── Scheduler.svelte │ │ │ ├── firebase │ │ │ │ └── firebase.js │ │ │ └── schedule-store.ts │ │ └── routes │ │ │ └── +page.svelte │ ├── static │ │ └── favicon.png │ ├── svelte.config.js │ ├── tsconfig.json │ └── vite.config.ts ├── package-lock.json └── todo-list │ ├── .gitignore │ ├── .npmrc │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── src │ ├── app.html │ ├── components │ │ ├── Authenticate.svelte │ │ └── TodoItem.svelte │ ├── lib │ │ ├── firebase │ │ │ └── firebase.js │ │ └── index.js │ ├── routes │ │ ├── +layout.svelte │ │ ├── +page.svelte │ │ └── dashboard │ │ │ └── +page.svelte │ └── store │ │ └── store.js │ ├── static │ └── favicon.png │ ├── svelte.config.js │ └── vite.config.js ├── extension ├── .babelrc ├── .eslintrc.js ├── .gitignore ├── .prettierignore ├── .prettierrc ├── Store │ ├── slices │ │ ├── currentSnapshotSlice.tsx │ │ ├── highlightedComponentSlice.tsx │ │ ├── timedEventsSlice.tsx │ │ └── treeHistorySlice.tsx │ └── store.ts ├── __mocks__ │ ├── @mui │ │ └── material │ │ │ └── Slider.tsx │ ├── chrome.ts │ ├── fileMock.js │ ├── mockData.ts │ ├── react-d3-tree.tsx │ └── styleMock.js ├── babel.config.js ├── extension-diagram.png ├── fileTransformer.js ├── jest.config.ts ├── jest.setup.js ├── package-lock.json ├── package.json ├── src │ ├── assets │ │ └── img │ │ │ ├── delete.svg │ │ │ ├── google.png │ │ │ ├── grey-icon-128.png │ │ │ ├── grey-icon-16.png │ │ │ ├── grey-icon-34.png │ │ │ ├── grey-icon-48.png │ │ │ ├── icon-128.png │ │ │ ├── icon-16.png │ │ │ ├── icon-34.png │ │ │ ├── icon-48.png │ │ │ └── upload.png │ ├── containers │ │ └── Greetings │ │ │ ├── Greetings.jsx │ │ │ └── Greetings.tsx │ ├── index.d.ts │ ├── manifest.json │ ├── messenger.ts │ ├── pages │ │ ├── Background │ │ │ └── index.js │ │ ├── ContentScriptIsolated │ │ │ ├── contentScriptIsolated.styles.css │ │ │ └── index.js │ │ ├── ContentScriptMain │ │ │ ├── contentScriptMain.styles.css │ │ │ ├── index.js │ │ │ └── modules │ │ │ │ └── print.js │ │ ├── Devtools │ │ │ ├── index.html │ │ │ └── index.js │ │ ├── Options │ │ │ ├── Options.css │ │ │ ├── Options.tsx │ │ │ ├── index.css │ │ │ ├── index.html │ │ │ ├── index.jsx │ │ │ └── index.tsx │ │ ├── Panel │ │ │ ├── App.test.tsx │ │ │ ├── Panel.css │ │ │ ├── Panel.tsx │ │ │ ├── PanelComponents │ │ │ │ ├── ChartTree │ │ │ │ │ └── ChartTree.tsx │ │ │ │ ├── ComponentInfo │ │ │ │ │ ├── ComponentInfo.css │ │ │ │ │ └── ComponentInfo.tsx │ │ │ │ ├── Navbar │ │ │ │ │ ├── Navbar.css │ │ │ │ │ └── Navbar.tsx │ │ │ │ ├── Rewinder │ │ │ │ │ ├── Rewinder.css │ │ │ │ │ └── Rewinder.tsx │ │ │ │ ├── StateModifier │ │ │ │ │ ├── StateModifier.css │ │ │ │ │ └── StateModifier.tsx │ │ │ │ ├── StateValue │ │ │ │ │ ├── StateValue.css │ │ │ │ │ └── StateValue.tsx │ │ │ │ ├── TreeComponent │ │ │ │ │ ├── TreeComponent.css │ │ │ │ │ └── TreeComponent.tsx │ │ │ │ └── custom-tree.css │ │ │ ├── PanelPages │ │ │ │ ├── ListPage │ │ │ │ │ ├── ListPage.css │ │ │ │ │ └── ListPage.tsx │ │ │ │ └── TreePage │ │ │ │ │ ├── TreePage.css │ │ │ │ │ └── TreePage.tsx │ │ │ ├── __snapshots__ │ │ │ │ └── App.test.tsx.snap │ │ │ ├── disclosure-open.png │ │ │ ├── disclosure.png │ │ │ ├── index.css │ │ │ ├── index.html │ │ │ └── index.tsx │ │ ├── Popup │ │ │ ├── Popup.css │ │ │ ├── Popup.tsx │ │ │ ├── index.css │ │ │ ├── index.html │ │ │ ├── index.jsx │ │ │ └── index.tsx │ │ ├── SveltePanel │ │ │ └── src │ │ │ │ └── panel │ │ │ │ ├── .gitignore │ │ │ │ ├── .vscode │ │ │ │ └── extensions.json │ │ │ │ ├── README.md │ │ │ │ ├── index.html │ │ │ │ ├── package-lock.json │ │ │ │ ├── package.json │ │ │ │ ├── public │ │ │ │ └── vite.svg │ │ │ │ ├── src │ │ │ │ ├── App.svelte │ │ │ │ ├── PanelComponents │ │ │ │ │ ├── ChartTree │ │ │ │ │ │ └── ChartTree.svelte │ │ │ │ │ ├── ComponentInfo │ │ │ │ │ │ └── ComponentInfo.svelte │ │ │ │ │ ├── Navbar │ │ │ │ │ │ └── Navbar.svelte │ │ │ │ │ ├── Panel │ │ │ │ │ │ └── Panel.svelte │ │ │ │ │ ├── Rewinder │ │ │ │ │ │ └── Rewinder.svelte │ │ │ │ │ ├── StateModifier │ │ │ │ │ │ └── StateModifier.svelte │ │ │ │ │ ├── StateValue │ │ │ │ │ │ └── StateValue.svelte │ │ │ │ │ ├── TreeComponent │ │ │ │ │ │ └── TreeComponent.svelte │ │ │ │ │ └── custom-tree.css │ │ │ │ ├── PanelPages │ │ │ │ │ ├── ListPage │ │ │ │ │ │ └── ListPage.svelte │ │ │ │ │ └── TreePage │ │ │ │ │ │ └── TreePage.svelte │ │ │ │ ├── Store │ │ │ │ │ ├── currentSnapshot.ts │ │ │ │ │ ├── highlightedComponent.ts │ │ │ │ │ ├── store.ts │ │ │ │ │ ├── timedEvents.ts │ │ │ │ │ └── treeHistory.ts │ │ │ │ ├── app.css │ │ │ │ ├── assets │ │ │ │ │ └── svelte.svg │ │ │ │ ├── declarations.ts │ │ │ │ ├── lib │ │ │ │ │ └── Counter.svelte │ │ │ │ ├── main.ts │ │ │ │ ├── types.ts │ │ │ │ └── vite-env.d.ts │ │ │ │ ├── svelte.config.js │ │ │ │ ├── tsconfig.app.json │ │ │ │ ├── tsconfig.json │ │ │ │ ├── tsconfig.node.json │ │ │ │ └── vite.config.ts │ │ └── types.tsx │ └── setupTests.ts ├── tsconfig.json ├── utils │ ├── build.js │ ├── env.js │ └── webserver.js └── webpack.config.js └── server ├── .babelrc ├── .eslintrc.js ├── .gitignore ├── .prettierignore ├── .prettierrc ├── eslint.config.mjs ├── package-lock.json ├── package.json ├── src ├── server │ ├── controllers │ │ ├── authController.ts │ │ ├── dataController.ts │ │ └── userController.ts │ ├── db.ts │ ├── passport-config.ts │ ├── routes │ │ ├── authRouter.ts │ │ ├── dataRoute.ts │ │ └── userRouter.ts │ ├── server.ts │ └── util.ts └── types.ts └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | script.sh -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 OSLabs Beta 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Svelte DevTools+ 2 | 3 | ![expanded banner](https://github.com/oslabs-beta/Svelte-DevTools-Plus/assets/62129976/1d1c3294-69cd-47a3-9216-0d9a2f68fd12) 4 | 5 | ## Installation 6 | 7 | [](https://chromewebstore.google.com/detail/svelte-devtools+/bgelkjgjabbfoeiicgoddeadicoofcfk?hl=en-US&utm_source=ext_sidebar) 8 | 9 | ## Features 10 | 11 | ### Dynamic component visualization 12 | Inspect the component hierarchy of an application to easily understand its structure 13 | 14 | ![StepAndTree](https://github.com/oslabs-beta/Svelte-DevTools-Plus/assets/62129976/239b42ac-4c69-46fa-b85d-fd64ed5efd4b) 15 | 16 | ### Real-time state and props updates 17 | Monitor real-time updates of a component's state and props, and track your application's behavior 18 | 19 | ![Dynamic](https://github.com/oslabs-beta/Svelte-DevTools-Plus/assets/62129976/14411e26-84e9-4c56-bff0-d300cb806be1) 20 | 21 | ### Component inspection 22 | Select a component in the component tree to inspect its state and props, and gain insight into how data flows through the application 23 | 24 | ![Inspect](https://github.com/oslabs-beta/Svelte-DevTools-Plus/assets/62129976/8b810a8b-fdd4-407d-8a34-0302517d79e2) 25 | 26 | ### Component state modification 27 | Modify the state and props of a component for testing and debugging purposes, and experiment with different scenarios without modifying your code 28 | 29 | ![Edit](https://github.com/oslabs-beta/Svelte-DevTools-Plus/assets/62129976/bbfeba2a-5780-4dce-8cb1-642dc42490ad) 30 | 31 | ### State Rewind 32 | Explore your application's state at different points in time, and easily observe how it changes over time 33 | 34 | ![Rewind](https://github.com/oslabs-beta/Svelte-DevTools-Plus/assets/62129976/07ad1b05-ab69-47d7-adcb-fbbdeb06e24f) 35 | 36 | ## Development 37 | 38 | 1. Fork and clone the repo: 39 | 40 | ``` 41 | git clone https://github.com/oslabs-beta/Svelte-DevTools-Plus.git 42 | ``` 43 | 44 | 2. Navigate to the project folder 45 | 46 | ``` 47 | cd Svelte-DevTools-Plus/extension 48 | ``` 49 | 50 | 3. Install the necessary packages: 51 | 52 | ``` 53 | npm install 54 | ``` 55 | 56 | ## Testing 57 | 58 | ### To create a development build 59 | 60 | ``` 61 | npm run dev 62 | ``` 63 | 64 | ### To create a production build 65 | 66 | ``` 67 | npm run build 68 | ``` 69 | 70 | ### To run the test suite 71 | ``` 72 | npm test 73 | ``` 74 | 75 | ### To load the extension 76 | 1. In Chrome, navigate to chrome://extensions/ 77 | 2. Turn on developer mode by clicking the switch in the top right corner 78 | 3. Click "Load unpacked" in the top left corner 79 | 4. Navigate to your local repository and select the build folder 80 | 81 | ### Demo apps 82 | For testing, demo apps are included with the repo in the demo-apps folder 83 | 84 | ## Contributors 85 | 86 | [Alexander Vranas](https://github.com/avranas) 87 | 88 | [Maciej Małecki](https://github.com/maciekmalecki) 89 | 90 | [Janice Chu](https://github.com/JaniceKZ) 91 | 92 | [Francis Espinoza](https://github.com/francis8933) 93 | 94 | [Laura Glass-Johnston](https://github.com/ellgeejay) 95 | 96 | ## License 97 | This project is licensed under the MIT License - see the [LICENSE](https://github.com/oslabs-beta/Svelte-DevTools-Plus/blob/main/LICENSE) file for details. 98 | 99 | 100 | -------------------------------------------------------------------------------- /demo-apps/calendar/.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 | -------------------------------------------------------------------------------- /demo-apps/calendar/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: [ 4 | 'eslint:recommended', 5 | 'plugin:@typescript-eslint/recommended', 6 | 'plugin:svelte/recommended', 7 | 'prettier' 8 | ], 9 | parser: '@typescript-eslint/parser', 10 | plugins: ['@typescript-eslint'], 11 | parserOptions: { 12 | sourceType: 'module', 13 | ecmaVersion: 2020, 14 | extraFileExtensions: ['.svelte'] 15 | }, 16 | env: { 17 | browser: true, 18 | es2017: true, 19 | node: true 20 | }, 21 | overrides: [ 22 | { 23 | files: ['*.svelte'], 24 | parser: 'svelte-eslint-parser', 25 | parserOptions: { 26 | parser: '@typescript-eslint/parser' 27 | } 28 | } 29 | ] 30 | }; 31 | -------------------------------------------------------------------------------- /demo-apps/calendar/.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 | -------------------------------------------------------------------------------- /demo-apps/calendar/.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | resolution-mode=highest 3 | -------------------------------------------------------------------------------- /demo-apps/calendar/.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 | -------------------------------------------------------------------------------- /demo-apps/calendar/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": true, 3 | "singleQuote": true, 4 | "trailingComma": "none", 5 | "printWidth": 100, 6 | "plugins": ["prettier-plugin-svelte"], 7 | "pluginSearchDirs": ["."], 8 | "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] 9 | } 10 | -------------------------------------------------------------------------------- /demo-apps/calendar/README.md: -------------------------------------------------------------------------------- 1 | # create-svelte 2 | 3 | Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte). 4 | 5 | ## Creating a project 6 | 7 | If you're seeing this, you've probably already done this step. Congrats! 8 | 9 | ```bash 10 | # create a new project in the current directory 11 | npm create svelte@latest 12 | 13 | # create a new project in my-app 14 | npm create svelte@latest my-app 15 | ``` 16 | 17 | ## Developing 18 | 19 | Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: 20 | 21 | ```bash 22 | npm run dev 23 | 24 | # or start the server and open the app in a new browser tab 25 | npm run dev -- --open 26 | ``` 27 | 28 | ## Building 29 | 30 | To create a production version of your app: 31 | 32 | ```bash 33 | npm run build 34 | ``` 35 | 36 | You can preview the production build with `npm run preview`. 37 | 38 | > To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment. 39 | -------------------------------------------------------------------------------- /demo-apps/calendar/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-app", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "dev": "vite dev & nodemon server.js", 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 | "@sveltejs/adapter-auto": "^2.0.0", 16 | "@sveltejs/kit": "^1.20.4", 17 | "@types/body-parser": "^1.19.2", 18 | "@types/dotenv": "^8.2.0", 19 | "@types/express": "^4.17.17", 20 | "@typescript-eslint/eslint-plugin": "^5.45.0", 21 | "@typescript-eslint/parser": "^5.45.0", 22 | "eslint": "^8.28.0", 23 | "eslint-config-prettier": "^8.5.0", 24 | "eslint-plugin-svelte": "^2.30.0", 25 | "prettier": "^2.8.0", 26 | "prettier-plugin-svelte": "^2.10.1", 27 | "svelte": "^4.0.0", 28 | "svelte-check": "^3.4.3", 29 | "tslib": "^2.4.1", 30 | "typescript": "^5.0.0", 31 | "vite": "^4.3.6" 32 | }, 33 | "type": "module", 34 | "dependencies": { 35 | "body-parser": "^1.20.2", 36 | "express": "^4.18.2", 37 | "mongodb": "^5.7.0", 38 | "mongoose": "^7.3.3", 39 | "nodemon": "^3.0.1" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /demo-apps/calendar/src/app 2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | %sveltekit.head% 8 | 9 | 10 |
%sveltekit.body%
11 | 12 | 13 | -------------------------------------------------------------------------------- /demo-apps/calendar/src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://kit.svelte.dev/docs/types#app 2 | // for information about these interfaces 3 | declare global { 4 | namespace App { 5 | // interface Error {} 6 | // interface Locals {} 7 | // interface PageData {} 8 | // interface Platform {} 9 | } 10 | } 11 | 12 | export {}; 13 | -------------------------------------------------------------------------------- /demo-apps/calendar/src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | %sveltekit.head% 8 | 9 | 10 |
%sveltekit.body%
11 | 12 | 13 | -------------------------------------------------------------------------------- /demo-apps/calendar/src/lib/Appointment.svelte: -------------------------------------------------------------------------------- 1 | 31 | 32 | 33 | 34 | updateAppt(e, "completed")}/> 35 | 36 | updateAppt(e, "eventname")}>{apptName} 37 | updateAppt(e, "time")}>{time} 38 | 39 | 40 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /demo-apps/calendar/src/lib/Calendar.svelte: -------------------------------------------------------------------------------- 1 | 62 | 63 | 64 |
65 | 72 |
73 | 74 | 83 | 84 | 102 | 103 | 204 | -------------------------------------------------------------------------------- /demo-apps/calendar/src/lib/Scheduler.svelte: -------------------------------------------------------------------------------- 1 | 37 | 38 | 42 | 43 |
44 |
45 |
46 | dispatch('modalClose')} class="close" title="Close Modal"> 47 | × 48 | 49 |
50 | 51 | 52 |
53 |

My Schedule for

54 |

{dateHeading}

55 | 62 | 63 | 64 |
65 | 66 |
67 | 77 | : 78 | 88 |
89 | 90 | 91 |
92 | 93 |
94 | 101 | 102 |
103 | 104 | 105 |
106 | 113 | 114 |
115 |
116 |
117 | 118 | 119 |
120 | 121 |
122 |
123 |
124 | 125 | 126 | {#if appointments.length === 0} 127 |

No appointments scheduled

128 | {:else} 129 | {#each appointments as appt} 130 | 131 | 138 | 139 | {/each} 140 | {/if} 141 |
142 |
143 | 144 | 291 | -------------------------------------------------------------------------------- /demo-apps/calendar/src/lib/firebase/firebase.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/Svelte-DevTools-Plus/bda24886be2d078eb202c25d458485c59506fd25/demo-apps/calendar/src/lib/firebase/firebase.js -------------------------------------------------------------------------------- /demo-apps/calendar/src/lib/schedule-store.ts: -------------------------------------------------------------------------------- 1 | import { writable } from 'svelte/store'; 2 | 3 | export const scheduleStore = writable({ 4 | July_11_2023: [ 5 | { 6 | id: 7382377, 7 | eventname: "Go for a walk", 8 | time: "11:00am", 9 | completed: false 10 | } 11 | ], 12 | July_13_2023: [ 13 | { 14 | id: 7382376, 15 | eventname: "Bike ride", 16 | time: "6:00am", 17 | completed: false 18 | } 19 | ], 20 | July_27_2023: [ 21 | { 22 | id: 2983017, 23 | eventname: "Prep for OSP Launch", 24 | time: "9:05am", 25 | completed: false 26 | }, 27 | { 28 | id: 7394017, 29 | eventname: "Launch", 30 | time: "10:00am", 31 | completed: false 32 | }, 33 | { 34 | id: 4039176, 35 | eventname: "Launch celebration", 36 | time: "12:15pm", 37 | completed: false 38 | }, 39 | { 40 | id: 8293041, 41 | eventname: "Lecture: System Design", 42 | time: "2:30pm", 43 | completed: false 44 | }, 45 | { 46 | id: 9384071, 47 | eventname: "OSP Launch Presentation", 48 | time: "6:30pm", 49 | completed: false 50 | } 51 | ], 52 | July_31_2023: [ 53 | { 54 | id: 1203928, 55 | eventname: "Reinforcement Project Brief", 56 | time: "1:30pm", 57 | completed: false 58 | } 59 | ], 60 | August_4_2023: [ 61 | { 62 | id: 2938049, 63 | eventname: "Solo Technical Interview Practice", 64 | time: "2:00pm", 65 | completed: false 66 | } 67 | ], 68 | August_8_2023: [ 69 | { 70 | id: 2931234, 71 | eventname: "Lecture: Online Profiles Kickoff", 72 | time: "3:00pm", 73 | completed: false 74 | } 75 | ], 76 | August_11_2023: [ 77 | { 78 | id: 3710293, 79 | eventname: "Codesmith Graduation", 80 | time: "5:30pm", 81 | completed: false 82 | } 83 | ] 84 | }); -------------------------------------------------------------------------------- /demo-apps/calendar/src/routes/+page.svelte: -------------------------------------------------------------------------------- 1 | 98 | 99 |
100 | 101 | 102 | {#if schedulerShowing} 103 | 110 | {/if} 111 |
112 | 113 | 119 | -------------------------------------------------------------------------------- /demo-apps/calendar/static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/Svelte-DevTools-Plus/bda24886be2d078eb202c25d458485c59506fd25/demo-apps/calendar/static/favicon.png -------------------------------------------------------------------------------- /demo-apps/calendar/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 | // Consult https://kit.svelte.dev/docs/integrations#preprocessors 7 | // for more information about preprocessors 8 | preprocess: vitePreprocess(), 9 | 10 | kit: { 11 | // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. 12 | // If your environment is not supported or you settled on a specific environment, switch out the adapter. 13 | // See https://kit.svelte.dev/docs/adapters for more information about adapters. 14 | adapter: adapter(), 15 | alias: { 16 | $db: './src/db' 17 | } 18 | } 19 | }; 20 | 21 | export default config; 22 | -------------------------------------------------------------------------------- /demo-apps/calendar/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 | "isolatedModules": false 13 | } 14 | // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias 15 | // 16 | // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes 17 | // from the referenced tsconfig.json - TypeScript does not merge them in 18 | } 19 | -------------------------------------------------------------------------------- /demo-apps/calendar/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 | -------------------------------------------------------------------------------- /demo-apps/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sveltekit", 3 | "lockfileVersion": 3, 4 | "requires": true, 5 | "packages": {} 6 | } 7 | -------------------------------------------------------------------------------- /demo-apps/todo-list/.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 | -------------------------------------------------------------------------------- /demo-apps/todo-list/.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | resolution-mode=highest 3 | -------------------------------------------------------------------------------- /demo-apps/todo-list/README.md: -------------------------------------------------------------------------------- 1 | # create-svelte 2 | 3 | Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte). 4 | 5 | ## Creating a project 6 | 7 | If you're seeing this, you've probably already done this step. Congrats! 8 | 9 | ```bash 10 | # create a new project in the current directory 11 | npm create svelte@latest 12 | 13 | # create a new project in my-app 14 | npm create svelte@latest my-app 15 | ``` 16 | 17 | ## Developing 18 | 19 | Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: 20 | 21 | ```bash 22 | npm run dev 23 | 24 | # or start the server and open the app in a new browser tab 25 | npm run dev -- --open 26 | ``` 27 | 28 | ## Building 29 | 30 | To create a production version of your app: 31 | 32 | ```bash 33 | npm run build 34 | ``` 35 | 36 | You can preview the production build with `npm run preview`. 37 | 38 | > To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment. 39 | -------------------------------------------------------------------------------- /demo-apps/todo-list/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sveltekit-todo-firebase", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "dev": "vite dev", 7 | "build": "vite build", 8 | "preview": "vite preview" 9 | }, 10 | "devDependencies": { 11 | "@sveltejs/adapter-auto": "^2.0.0", 12 | "@sveltejs/kit": "^1.20.4", 13 | "svelte": "^4.0.5", 14 | "vite": "^4.4.2" 15 | }, 16 | "type": "module", 17 | "dependencies": { 18 | "firebase": "^10.1.0" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-apps/todo-list/src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | %sveltekit.head% 8 | 9 | 10 | 14 | 21 | 33 | 34 | 35 |
%sveltekit.body%
36 | 37 | 38 | -------------------------------------------------------------------------------- /demo-apps/todo-list/src/components/Authenticate.svelte: -------------------------------------------------------------------------------- 1 | 38 | 39 |
40 |
41 |

{register ? 'Register' : 'Login'}

42 | {#if error} 43 |

The information you have entered is incorrect

44 | {/if} 45 | 49 | 53 | {#if register} 54 | 62 | {/if} 63 | 64 |