├── .gitignore
├── .npmrc
├── README.md
├── jsconfig.json
├── package-lock.json
├── package.json
├── src
    ├── app.html
    ├── components
    │   ├── Comp.svelte
    │   └── Monaco.svelte
    ├── global.d.ts
    └── routes
    │   └── index.svelte
├── static
    └── favicon.png
└── svelte.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /.svelte-kit
4 | /package
5 | 


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Svelte Filesystem Proof of concept
 2 | 
 3 | This is Quick POC of [an idea i had](https://twitter.com/swyx/status/1396005314227539968): what if you could edit Svelte components in place in the browser — using the File System Access API!
 4 | 
 5 | What if we didn't have to mentally map our source code rendered content? Just click on component, source pops up, we edit, save. **No IDE needed!**
 6 | 
 7 | > note: this idea works only in development - which makes sense if you think about it
 8 | 
 9 | 
10 | https://user-images.githubusercontent.com/6764957/120790682-d9b7c400-c565-11eb-9580-740279005543.mp4
11 | 
12 | 
13 | [see tweet responses](https://twitter.com/swyx/status/1400764771520040963)
14 | 
15 | ## usage
16 | 
17 | ```bash
18 | npm install
19 | npm run dev -- --open # localhost 
20 | ```
21 | 
22 | - Click `load` button to open `src/components/Comp.svelte` - you will have to navigate there yourself until [this PR lands](https://github.com/WICG/file-system-access/pull/287)
23 | - try making edits the source
24 | - then hit the `save` button
25 | - see it hot reload thanks to Vite/SvelteKit. 
26 | 
27 | You now have a self-editing component!
28 | 
29 | ## possible extensions
30 | 
31 | - mouseover components and cmd+click to open up their source (may have to choose from a list - use event bubbling to identify the list of components?)
32 | - embed Monaco instance for better editing (like this https://github.com/sw-yx/svelte-zen-garden) - currently i only use `<pre contenteditable>` which is janky af
33 | 
34 | ## notes on filesystem access api
35 | 
36 | its still too clunky - you HAVE to use `showOpenFilePicker` right now to load a file. 
37 | 
38 | Ideally we can just give a known filepath and construct the `FileSystemFileHandle` ourselves, but this is currently impossible. i've [opened an issue here](https://github.com/WICG/file-system-access/issues/301).
39 | 
40 | if it were, we could then instrument svelte's rollup/webpack loader to expose filepath info to every component so that we can figure out which component to open (or offer a menu of them) instead of having the user navigate to there.
41 | 
42 | - basic reading: https://web.dev/file-system-access/
43 | - spec: https://wicg.github.io/file-system-access/#api-filpickeroptions-types
44 | - key PR: https://github.com/WICG/file-system-access/pull/287
45 | - potential polyfills
46 |     - https://browser-fs-access.glitch.me/
47 |     - https://github.com/jimmywarting/native-file-system-adapter/
48 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"compilerOptions": {
 3 | 		"baseUrl": ".",
 4 | 		"paths": {
 5 | 			"$lib/*": ["src/lib/*"]
 6 | 		}
 7 | 	},
 8 | 	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
 9 | }
10 | 


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "~TODO~",
  3 |   "version": "0.0.1",
  4 |   "lockfileVersion": 2,
  5 |   "requires": true,
  6 |   "packages": {
  7 |     "": {
  8 |       "name": "~TODO~",
  9 |       "version": "0.0.1",
 10 |       "dependencies": {
 11 |         "monaco-editor": "^0.24.0"
 12 |       },
 13 |       "devDependencies": {
 14 |         "@sveltejs/kit": "next",
 15 |         "svelte": "^3.34.0"
 16 |       }
 17 |     },
 18 |     "node_modules/@rollup/pluginutils": {
 19 |       "version": "4.1.0",
 20 |       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.1.0.tgz",
 21 |       "integrity": "sha512-TrBhfJkFxA+ER+ew2U2/fHbebhLT/l/2pRk0hfj9KusXUuRXd2v0R58AfaZK9VXDQ4TogOSEmICVrQAA3zFnHQ==",
 22 |       "dev": true,
 23 |       "dependencies": {
 24 |         "estree-walker": "^2.0.1",
 25 |         "picomatch": "^2.2.2"
 26 |       },
 27 |       "engines": {
 28 |         "node": ">= 8.0.0"
 29 |       },
 30 |       "peerDependencies": {
 31 |         "rollup": "^1.20.0||^2.0.0"
 32 |       }
 33 |     },
 34 |     "node_modules/@sveltejs/kit": {
 35 |       "version": "1.0.0-next.113",
 36 |       "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.113.tgz",
 37 |       "integrity": "sha512-X7feyAD9ZWQ79W5MXgF0t3JBsA+pTqCrnl2l8y8PNCP7pEJwizPCfmFAjwx7luz3OZUA2FTFBB7bqG7K1IUaYg==",
 38 |       "dev": true,
 39 |       "dependencies": {
 40 |         "@sveltejs/vite-plugin-svelte": "^1.0.0-next.10",
 41 |         "cheap-watch": "^1.0.3",
 42 |         "sade": "^1.7.4",
 43 |         "vite": "2.3.6"
 44 |       },
 45 |       "bin": {
 46 |         "svelte-kit": "svelte-kit.js"
 47 |       },
 48 |       "engines": {
 49 |         "node": "^12.20 || ^14.13.1 || >= 16"
 50 |       },
 51 |       "peerDependencies": {
 52 |         "svelte": "^3.38.2"
 53 |       }
 54 |     },
 55 |     "node_modules/@sveltejs/vite-plugin-svelte": {
 56 |       "version": "1.0.0-next.10",
 57 |       "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.0-next.10.tgz",
 58 |       "integrity": "sha512-ImvxbhPePm2hWNTKBSA3LHAYGwiEjHjvvgfPLXm4R87sfZ+BMXql9jBmDpzUC/URBLT4BB3Jxos/i523qkJBHg==",
 59 |       "dev": true,
 60 |       "dependencies": {
 61 |         "@rollup/pluginutils": "^4.1.0",
 62 |         "chalk": "^4.1.1",
 63 |         "debug": "^4.3.2",
 64 |         "hash-sum": "^2.0.0",
 65 |         "require-relative": "^0.8.7",
 66 |         "slash": "^4.0.0",
 67 |         "source-map": "^0.7.3",
 68 |         "svelte-hmr": "^0.14.2"
 69 |       },
 70 |       "engines": {
 71 |         "node": ">=12.0.0"
 72 |       },
 73 |       "peerDependencies": {
 74 |         "svelte": "^3.37.0",
 75 |         "vite": "^2.2.3"
 76 |       }
 77 |     },
 78 |     "node_modules/ansi-styles": {
 79 |       "version": "4.3.0",
 80 |       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
 81 |       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
 82 |       "dev": true,
 83 |       "dependencies": {
 84 |         "color-convert": "^2.0.1"
 85 |       },
 86 |       "engines": {
 87 |         "node": ">=8"
 88 |       },
 89 |       "funding": {
 90 |         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
 91 |       }
 92 |     },
 93 |     "node_modules/chalk": {
 94 |       "version": "4.1.1",
 95 |       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
 96 |       "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
 97 |       "dev": true,
 98 |       "dependencies": {
 99 |         "ansi-styles": "^4.1.0",
100 |         "supports-color": "^7.1.0"
101 |       },
102 |       "engines": {
103 |         "node": ">=10"
104 |       },
105 |       "funding": {
106 |         "url": "https://github.com/chalk/chalk?sponsor=1"
107 |       }
108 |     },
109 |     "node_modules/cheap-watch": {
110 |       "version": "1.0.3",
111 |       "resolved": "https://registry.npmjs.org/cheap-watch/-/cheap-watch-1.0.3.tgz",
112 |       "integrity": "sha512-xC5CruMhLzjPwJ5ecUxGu1uGmwJQykUhqd2QrCrYbwvsFYdRyviu6jG9+pccwDXJR/OpmOTOJ9yLFunVgQu9wg==",
113 |       "dev": true,
114 |       "engines": {
115 |         "node": ">=8"
116 |       }
117 |     },
118 |     "node_modules/color-convert": {
119 |       "version": "2.0.1",
120 |       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
121 |       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
122 |       "dev": true,
123 |       "dependencies": {
124 |         "color-name": "~1.1.4"
125 |       },
126 |       "engines": {
127 |         "node": ">=7.0.0"
128 |       }
129 |     },
130 |     "node_modules/color-name": {
131 |       "version": "1.1.4",
132 |       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
133 |       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
134 |       "dev": true
135 |     },
136 |     "node_modules/colorette": {
137 |       "version": "1.2.2",
138 |       "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
139 |       "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==",
140 |       "dev": true
141 |     },
142 |     "node_modules/debug": {
143 |       "version": "4.3.2",
144 |       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
145 |       "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
146 |       "dev": true,
147 |       "dependencies": {
148 |         "ms": "2.1.2"
149 |       },
150 |       "engines": {
151 |         "node": ">=6.0"
152 |       },
153 |       "peerDependenciesMeta": {
154 |         "supports-color": {
155 |           "optional": true
156 |         }
157 |       }
158 |     },
159 |     "node_modules/esbuild": {
160 |       "version": "0.12.6",
161 |       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.12.6.tgz",
162 |       "integrity": "sha512-RDvVLvAjsq/kIZJoneMiUOH7EE7t2QaW7T3Q7EdQij14+bZbDq5sndb0tTanmHIFSqZVMBMMyqzVHkS3dJobeA==",
163 |       "dev": true,
164 |       "hasInstallScript": true,
165 |       "bin": {
166 |         "esbuild": "bin/esbuild"
167 |       }
168 |     },
169 |     "node_modules/estree-walker": {
170 |       "version": "2.0.2",
171 |       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
172 |       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
173 |       "dev": true
174 |     },
175 |     "node_modules/fsevents": {
176 |       "version": "2.3.2",
177 |       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
178 |       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
179 |       "dev": true,
180 |       "hasInstallScript": true,
181 |       "optional": true,
182 |       "os": [
183 |         "darwin"
184 |       ],
185 |       "engines": {
186 |         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
187 |       }
188 |     },
189 |     "node_modules/function-bind": {
190 |       "version": "1.1.1",
191 |       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
192 |       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
193 |       "dev": true
194 |     },
195 |     "node_modules/has": {
196 |       "version": "1.0.3",
197 |       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
198 |       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
199 |       "dev": true,
200 |       "dependencies": {
201 |         "function-bind": "^1.1.1"
202 |       },
203 |       "engines": {
204 |         "node": ">= 0.4.0"
205 |       }
206 |     },
207 |     "node_modules/has-flag": {
208 |       "version": "4.0.0",
209 |       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
210 |       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
211 |       "dev": true,
212 |       "engines": {
213 |         "node": ">=8"
214 |       }
215 |     },
216 |     "node_modules/hash-sum": {
217 |       "version": "2.0.0",
218 |       "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-2.0.0.tgz",
219 |       "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
220 |       "dev": true
221 |     },
222 |     "node_modules/is-core-module": {
223 |       "version": "2.4.0",
224 |       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.4.0.tgz",
225 |       "integrity": "sha512-6A2fkfq1rfeQZjxrZJGerpLCTHRNEBiSgnu0+obeJpEPZRUooHgsizvzv0ZjJwOz3iWIHdJtVWJ/tmPr3D21/A==",
226 |       "dev": true,
227 |       "dependencies": {
228 |         "has": "^1.0.3"
229 |       },
230 |       "funding": {
231 |         "url": "https://github.com/sponsors/ljharb"
232 |       }
233 |     },
234 |     "node_modules/monaco-editor": {
235 |       "version": "0.24.0",
236 |       "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.24.0.tgz",
237 |       "integrity": "sha512-o1f0Lz6ABFNTtnEqqqvlY9qzNx24rQZx1RgYNQ8SkWkE+Ka63keHH/RqxQ4QhN4fs/UYOnvAtEUZsPrzccH++A=="
238 |     },
239 |     "node_modules/mri": {
240 |       "version": "1.1.6",
241 |       "resolved": "https://registry.npmjs.org/mri/-/mri-1.1.6.tgz",
242 |       "integrity": "sha512-oi1b3MfbyGa7FJMP9GmLTttni5JoICpYBRlq+x5V16fZbLsnL9N3wFqqIm/nIG43FjUFkFh9Epzp/kzUGUnJxQ==",
243 |       "dev": true,
244 |       "engines": {
245 |         "node": ">=4"
246 |       }
247 |     },
248 |     "node_modules/ms": {
249 |       "version": "2.1.2",
250 |       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
251 |       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
252 |       "dev": true
253 |     },
254 |     "node_modules/nanoid": {
255 |       "version": "3.1.23",
256 |       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.23.tgz",
257 |       "integrity": "sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==",
258 |       "dev": true,
259 |       "bin": {
260 |         "nanoid": "bin/nanoid.cjs"
261 |       },
262 |       "engines": {
263 |         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
264 |       }
265 |     },
266 |     "node_modules/path-parse": {
267 |       "version": "1.0.7",
268 |       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
269 |       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
270 |       "dev": true
271 |     },
272 |     "node_modules/picomatch": {
273 |       "version": "2.3.0",
274 |       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
275 |       "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
276 |       "dev": true,
277 |       "engines": {
278 |         "node": ">=8.6"
279 |       },
280 |       "funding": {
281 |         "url": "https://github.com/sponsors/jonschlinkert"
282 |       }
283 |     },
284 |     "node_modules/postcss": {
285 |       "version": "8.3.0",
286 |       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.0.tgz",
287 |       "integrity": "sha512-+ogXpdAjWGa+fdYY5BQ96V/6tAo+TdSSIMP5huJBIygdWwKtVoB5JWZ7yUd4xZ8r+8Kvvx4nyg/PQ071H4UtcQ==",
288 |       "dev": true,
289 |       "dependencies": {
290 |         "colorette": "^1.2.2",
291 |         "nanoid": "^3.1.23",
292 |         "source-map-js": "^0.6.2"
293 |       },
294 |       "engines": {
295 |         "node": "^10 || ^12 || >=14"
296 |       },
297 |       "funding": {
298 |         "type": "opencollective",
299 |         "url": "https://opencollective.com/postcss/"
300 |       }
301 |     },
302 |     "node_modules/require-relative": {
303 |       "version": "0.8.7",
304 |       "resolved": "https://registry.npmjs.org/require-relative/-/require-relative-0.8.7.tgz",
305 |       "integrity": "sha1-eZlTn8ngR6N5KPoZb44VY9q9Nt4=",
306 |       "dev": true
307 |     },
308 |     "node_modules/resolve": {
309 |       "version": "1.20.0",
310 |       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
311 |       "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
312 |       "dev": true,
313 |       "dependencies": {
314 |         "is-core-module": "^2.2.0",
315 |         "path-parse": "^1.0.6"
316 |       },
317 |       "funding": {
318 |         "url": "https://github.com/sponsors/ljharb"
319 |       }
320 |     },
321 |     "node_modules/rollup": {
322 |       "version": "2.50.6",
323 |       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.50.6.tgz",
324 |       "integrity": "sha512-6c5CJPLVgo0iNaZWWliNu1Kl43tjP9LZcp6D/tkf2eLH2a9/WeHxg9vfTFl8QV/2SOyaJX37CEm9XuGM0rviUg==",
325 |       "dev": true,
326 |       "bin": {
327 |         "rollup": "dist/bin/rollup"
328 |       },
329 |       "engines": {
330 |         "node": ">=10.0.0"
331 |       },
332 |       "optionalDependencies": {
333 |         "fsevents": "~2.3.1"
334 |       }
335 |     },
336 |     "node_modules/sade": {
337 |       "version": "1.7.4",
338 |       "resolved": "https://registry.npmjs.org/sade/-/sade-1.7.4.tgz",
339 |       "integrity": "sha512-y5yauMD93rX840MwUJr7C1ysLFBgMspsdTo4UVrDg3fXDvtwOyIqykhVAAm6fk/3au77773itJStObgK+LKaiA==",
340 |       "dev": true,
341 |       "dependencies": {
342 |         "mri": "^1.1.0"
343 |       },
344 |       "engines": {
345 |         "node": ">= 6"
346 |       }
347 |     },
348 |     "node_modules/slash": {
349 |       "version": "4.0.0",
350 |       "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
351 |       "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==",
352 |       "dev": true,
353 |       "engines": {
354 |         "node": ">=12"
355 |       },
356 |       "funding": {
357 |         "url": "https://github.com/sponsors/sindresorhus"
358 |       }
359 |     },
360 |     "node_modules/source-map": {
361 |       "version": "0.7.3",
362 |       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
363 |       "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
364 |       "dev": true,
365 |       "engines": {
366 |         "node": ">= 8"
367 |       }
368 |     },
369 |     "node_modules/source-map-js": {
370 |       "version": "0.6.2",
371 |       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
372 |       "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==",
373 |       "dev": true,
374 |       "engines": {
375 |         "node": ">=0.10.0"
376 |       }
377 |     },
378 |     "node_modules/supports-color": {
379 |       "version": "7.2.0",
380 |       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
381 |       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
382 |       "dev": true,
383 |       "dependencies": {
384 |         "has-flag": "^4.0.0"
385 |       },
386 |       "engines": {
387 |         "node": ">=8"
388 |       }
389 |     },
390 |     "node_modules/svelte": {
391 |       "version": "3.38.2",
392 |       "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.38.2.tgz",
393 |       "integrity": "sha512-q5Dq0/QHh4BLJyEVWGe7Cej5NWs040LWjMbicBGZ+3qpFWJ1YObRmUDZKbbovddLC9WW7THTj3kYbTOFmU9fbg==",
394 |       "dev": true,
395 |       "engines": {
396 |         "node": ">= 8"
397 |       }
398 |     },
399 |     "node_modules/svelte-hmr": {
400 |       "version": "0.14.4",
401 |       "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.14.4.tgz",
402 |       "integrity": "sha512-kItFF7vqzStckSigoFmMnxJpTOdB9TWnQAW6Js+yAB4277tLbJIIE5KBlGHNmJNpA7MguqidsPB27Uw5UzQPCA==",
403 |       "dev": true,
404 |       "peerDependencies": {
405 |         "svelte": ">=3.19.0"
406 |       }
407 |     },
408 |     "node_modules/vite": {
409 |       "version": "2.3.6",
410 |       "resolved": "https://registry.npmjs.org/vite/-/vite-2.3.6.tgz",
411 |       "integrity": "sha512-fsEpNKDHgh3Sn66JH06ZnUBnIgUVUtw6ucDhlOj1CEqxIkymU25yv1/kWDPlIjyYHnalr0cN6V+zzUJ+fmWHYw==",
412 |       "dev": true,
413 |       "dependencies": {
414 |         "esbuild": "^0.12.5",
415 |         "postcss": "^8.2.10",
416 |         "resolve": "^1.19.0",
417 |         "rollup": "^2.38.5"
418 |       },
419 |       "bin": {
420 |         "vite": "bin/vite.js"
421 |       },
422 |       "engines": {
423 |         "node": ">=12.0.0"
424 |       },
425 |       "optionalDependencies": {
426 |         "fsevents": "~2.3.1"
427 |       }
428 |     }
429 |   },
430 |   "dependencies": {
431 |     "@rollup/pluginutils": {
432 |       "version": "4.1.0",
433 |       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.1.0.tgz",
434 |       "integrity": "sha512-TrBhfJkFxA+ER+ew2U2/fHbebhLT/l/2pRk0hfj9KusXUuRXd2v0R58AfaZK9VXDQ4TogOSEmICVrQAA3zFnHQ==",
435 |       "dev": true,
436 |       "requires": {
437 |         "estree-walker": "^2.0.1",
438 |         "picomatch": "^2.2.2"
439 |       }
440 |     },
441 |     "@sveltejs/kit": {
442 |       "version": "1.0.0-next.113",
443 |       "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.113.tgz",
444 |       "integrity": "sha512-X7feyAD9ZWQ79W5MXgF0t3JBsA+pTqCrnl2l8y8PNCP7pEJwizPCfmFAjwx7luz3OZUA2FTFBB7bqG7K1IUaYg==",
445 |       "dev": true,
446 |       "requires": {
447 |         "@sveltejs/vite-plugin-svelte": "^1.0.0-next.10",
448 |         "cheap-watch": "^1.0.3",
449 |         "sade": "^1.7.4",
450 |         "vite": "2.3.6"
451 |       }
452 |     },
453 |     "@sveltejs/vite-plugin-svelte": {
454 |       "version": "1.0.0-next.10",
455 |       "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.0-next.10.tgz",
456 |       "integrity": "sha512-ImvxbhPePm2hWNTKBSA3LHAYGwiEjHjvvgfPLXm4R87sfZ+BMXql9jBmDpzUC/URBLT4BB3Jxos/i523qkJBHg==",
457 |       "dev": true,
458 |       "requires": {
459 |         "@rollup/pluginutils": "^4.1.0",
460 |         "chalk": "^4.1.1",
461 |         "debug": "^4.3.2",
462 |         "hash-sum": "^2.0.0",
463 |         "require-relative": "^0.8.7",
464 |         "slash": "^4.0.0",
465 |         "source-map": "^0.7.3",
466 |         "svelte-hmr": "^0.14.2"
467 |       }
468 |     },
469 |     "ansi-styles": {
470 |       "version": "4.3.0",
471 |       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
472 |       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
473 |       "dev": true,
474 |       "requires": {
475 |         "color-convert": "^2.0.1"
476 |       }
477 |     },
478 |     "chalk": {
479 |       "version": "4.1.1",
480 |       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
481 |       "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
482 |       "dev": true,
483 |       "requires": {
484 |         "ansi-styles": "^4.1.0",
485 |         "supports-color": "^7.1.0"
486 |       }
487 |     },
488 |     "cheap-watch": {
489 |       "version": "1.0.3",
490 |       "resolved": "https://registry.npmjs.org/cheap-watch/-/cheap-watch-1.0.3.tgz",
491 |       "integrity": "sha512-xC5CruMhLzjPwJ5ecUxGu1uGmwJQykUhqd2QrCrYbwvsFYdRyviu6jG9+pccwDXJR/OpmOTOJ9yLFunVgQu9wg==",
492 |       "dev": true
493 |     },
494 |     "color-convert": {
495 |       "version": "2.0.1",
496 |       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
497 |       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
498 |       "dev": true,
499 |       "requires": {
500 |         "color-name": "~1.1.4"
501 |       }
502 |     },
503 |     "color-name": {
504 |       "version": "1.1.4",
505 |       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
506 |       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
507 |       "dev": true
508 |     },
509 |     "colorette": {
510 |       "version": "1.2.2",
511 |       "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
512 |       "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==",
513 |       "dev": true
514 |     },
515 |     "debug": {
516 |       "version": "4.3.2",
517 |       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
518 |       "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
519 |       "dev": true,
520 |       "requires": {
521 |         "ms": "2.1.2"
522 |       }
523 |     },
524 |     "esbuild": {
525 |       "version": "0.12.6",
526 |       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.12.6.tgz",
527 |       "integrity": "sha512-RDvVLvAjsq/kIZJoneMiUOH7EE7t2QaW7T3Q7EdQij14+bZbDq5sndb0tTanmHIFSqZVMBMMyqzVHkS3dJobeA==",
528 |       "dev": true
529 |     },
530 |     "estree-walker": {
531 |       "version": "2.0.2",
532 |       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
533 |       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
534 |       "dev": true
535 |     },
536 |     "fsevents": {
537 |       "version": "2.3.2",
538 |       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
539 |       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
540 |       "dev": true,
541 |       "optional": true
542 |     },
543 |     "function-bind": {
544 |       "version": "1.1.1",
545 |       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
546 |       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
547 |       "dev": true
548 |     },
549 |     "has": {
550 |       "version": "1.0.3",
551 |       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
552 |       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
553 |       "dev": true,
554 |       "requires": {
555 |         "function-bind": "^1.1.1"
556 |       }
557 |     },
558 |     "has-flag": {
559 |       "version": "4.0.0",
560 |       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
561 |       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
562 |       "dev": true
563 |     },
564 |     "hash-sum": {
565 |       "version": "2.0.0",
566 |       "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-2.0.0.tgz",
567 |       "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
568 |       "dev": true
569 |     },
570 |     "is-core-module": {
571 |       "version": "2.4.0",
572 |       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.4.0.tgz",
573 |       "integrity": "sha512-6A2fkfq1rfeQZjxrZJGerpLCTHRNEBiSgnu0+obeJpEPZRUooHgsizvzv0ZjJwOz3iWIHdJtVWJ/tmPr3D21/A==",
574 |       "dev": true,
575 |       "requires": {
576 |         "has": "^1.0.3"
577 |       }
578 |     },
579 |     "monaco-editor": {
580 |       "version": "0.24.0",
581 |       "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.24.0.tgz",
582 |       "integrity": "sha512-o1f0Lz6ABFNTtnEqqqvlY9qzNx24rQZx1RgYNQ8SkWkE+Ka63keHH/RqxQ4QhN4fs/UYOnvAtEUZsPrzccH++A=="
583 |     },
584 |     "mri": {
585 |       "version": "1.1.6",
586 |       "resolved": "https://registry.npmjs.org/mri/-/mri-1.1.6.tgz",
587 |       "integrity": "sha512-oi1b3MfbyGa7FJMP9GmLTttni5JoICpYBRlq+x5V16fZbLsnL9N3wFqqIm/nIG43FjUFkFh9Epzp/kzUGUnJxQ==",
588 |       "dev": true
589 |     },
590 |     "ms": {
591 |       "version": "2.1.2",
592 |       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
593 |       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
594 |       "dev": true
595 |     },
596 |     "nanoid": {
597 |       "version": "3.1.23",
598 |       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.23.tgz",
599 |       "integrity": "sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==",
600 |       "dev": true
601 |     },
602 |     "path-parse": {
603 |       "version": "1.0.7",
604 |       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
605 |       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
606 |       "dev": true
607 |     },
608 |     "picomatch": {
609 |       "version": "2.3.0",
610 |       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
611 |       "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
612 |       "dev": true
613 |     },
614 |     "postcss": {
615 |       "version": "8.3.0",
616 |       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.0.tgz",
617 |       "integrity": "sha512-+ogXpdAjWGa+fdYY5BQ96V/6tAo+TdSSIMP5huJBIygdWwKtVoB5JWZ7yUd4xZ8r+8Kvvx4nyg/PQ071H4UtcQ==",
618 |       "dev": true,
619 |       "requires": {
620 |         "colorette": "^1.2.2",
621 |         "nanoid": "^3.1.23",
622 |         "source-map-js": "^0.6.2"
623 |       }
624 |     },
625 |     "require-relative": {
626 |       "version": "0.8.7",
627 |       "resolved": "https://registry.npmjs.org/require-relative/-/require-relative-0.8.7.tgz",
628 |       "integrity": "sha1-eZlTn8ngR6N5KPoZb44VY9q9Nt4=",
629 |       "dev": true
630 |     },
631 |     "resolve": {
632 |       "version": "1.20.0",
633 |       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
634 |       "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
635 |       "dev": true,
636 |       "requires": {
637 |         "is-core-module": "^2.2.0",
638 |         "path-parse": "^1.0.6"
639 |       }
640 |     },
641 |     "rollup": {
642 |       "version": "2.50.6",
643 |       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.50.6.tgz",
644 |       "integrity": "sha512-6c5CJPLVgo0iNaZWWliNu1Kl43tjP9LZcp6D/tkf2eLH2a9/WeHxg9vfTFl8QV/2SOyaJX37CEm9XuGM0rviUg==",
645 |       "dev": true,
646 |       "requires": {
647 |         "fsevents": "~2.3.1"
648 |       }
649 |     },
650 |     "sade": {
651 |       "version": "1.7.4",
652 |       "resolved": "https://registry.npmjs.org/sade/-/sade-1.7.4.tgz",
653 |       "integrity": "sha512-y5yauMD93rX840MwUJr7C1ysLFBgMspsdTo4UVrDg3fXDvtwOyIqykhVAAm6fk/3au77773itJStObgK+LKaiA==",
654 |       "dev": true,
655 |       "requires": {
656 |         "mri": "^1.1.0"
657 |       }
658 |     },
659 |     "slash": {
660 |       "version": "4.0.0",
661 |       "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
662 |       "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==",
663 |       "dev": true
664 |     },
665 |     "source-map": {
666 |       "version": "0.7.3",
667 |       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
668 |       "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
669 |       "dev": true
670 |     },
671 |     "source-map-js": {
672 |       "version": "0.6.2",
673 |       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
674 |       "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==",
675 |       "dev": true
676 |     },
677 |     "supports-color": {
678 |       "version": "7.2.0",
679 |       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
680 |       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
681 |       "dev": true,
682 |       "requires": {
683 |         "has-flag": "^4.0.0"
684 |       }
685 |     },
686 |     "svelte": {
687 |       "version": "3.38.2",
688 |       "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.38.2.tgz",
689 |       "integrity": "sha512-q5Dq0/QHh4BLJyEVWGe7Cej5NWs040LWjMbicBGZ+3qpFWJ1YObRmUDZKbbovddLC9WW7THTj3kYbTOFmU9fbg==",
690 |       "dev": true
691 |     },
692 |     "svelte-hmr": {
693 |       "version": "0.14.4",
694 |       "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.14.4.tgz",
695 |       "integrity": "sha512-kItFF7vqzStckSigoFmMnxJpTOdB9TWnQAW6Js+yAB4277tLbJIIE5KBlGHNmJNpA7MguqidsPB27Uw5UzQPCA==",
696 |       "dev": true,
697 |       "requires": {}
698 |     },
699 |     "vite": {
700 |       "version": "2.3.6",
701 |       "resolved": "https://registry.npmjs.org/vite/-/vite-2.3.6.tgz",
702 |       "integrity": "sha512-fsEpNKDHgh3Sn66JH06ZnUBnIgUVUtw6ucDhlOj1CEqxIkymU25yv1/kWDPlIjyYHnalr0cN6V+zzUJ+fmWHYw==",
703 |       "dev": true,
704 |       "requires": {
705 |         "esbuild": "^0.12.5",
706 |         "fsevents": "~2.3.1",
707 |         "postcss": "^8.2.10",
708 |         "resolve": "^1.19.0",
709 |         "rollup": "^2.38.5"
710 |       }
711 |     }
712 |   }
713 | }
714 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "~TODO~",
 3 |   "version": "0.0.1",
 4 |   "scripts": {
 5 |     "dev": "svelte-kit dev",
 6 |     "build": "svelte-kit build",
 7 |     "preview": "svelte-kit preview"
 8 |   },
 9 |   "devDependencies": {
10 |     "@sveltejs/kit": "next",
11 |     "svelte": "^3.34.0"
12 |   },
13 |   "type": "module",
14 |   "dependencies": {
15 |     "monaco-editor": "^0.24.0"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/app.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8" />
 5 | 		<link rel="icon" href="/favicon.png" />
 6 | 		<!-- <script type="module" src="https://cdn.jsdelivr.net/gh/vanillawc/wc-monaco-editor@1/index.js"></script> -->
 7 | 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 8 | 		%svelte.head%
 9 | 	</head>
10 | 	<body>
11 | 		<div id="svelte">%svelte.body%</div>
12 | 	</body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/components/Comp.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     export let contents
 3 | </script>
 4 | 
 5 | {#if contents === null}
 6 | <div> please load the file</div>
 7 | {:else}
 8 | <pre contenteditable="true" bind:textContent={contents}>
 9 | </pre>
10 | {/if}
11 | 
12 | <hr />
13 | 
14 | <h2>hello Svelte</h2>


--------------------------------------------------------------------------------
/src/components/Monaco.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     import { onMount, onDestroy } from 'svelte'
 3 |     import * as monaco from 'monaco-editor';
 4 |     let editor
 5 |     onMount(mountEditor)
 6 |     function mountEditor() {
 7 |         editor = monaco.editor.create(document.getElementById('monaco-container'), {
 8 |           value: [
 9 |             'function x() {',
10 |             '\tconsole.log("Hello world!");',
11 |             '}'
12 |           ].join('\n'),
13 |           language: 'css',
14 |         });
15 |     }
16 |     onDestroy(() => {
17 |       if (editor) {
18 |         editor.dispose();
19 |         const model = editor.getModel();
20 |         if (model) model.dispose();
21 |       }
22 |     })
23 |   </script>
24 |   
25 |   <style>
26 |     #monaco-container {
27 |       height: 40vh;
28 |       width: 40vw;
29 |       min-width: 600px;
30 |       position: fixed;
31 |       z-index: 999;
32 |       bottom: 0;
33 |       left: 0;
34 |     }
35 |   </style>
36 |   <div id="monaco-container"></div>


--------------------------------------------------------------------------------
/src/global.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="@sveltejs/kit" />
2 | 


--------------------------------------------------------------------------------
/src/routes/index.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | import Comp from '../components/Comp.svelte'
 4 | let fileHandle
 5 | let contents = null
 6 | 
 7 | async function getTheFile() {
 8 |     // open file picker
 9 | //   [fileHandle] = await window.showOpenFilePicker(pickerOpts);
10 |     [fileHandle] = await window.showOpenFilePicker();
11 |     // get file contents
12 |     const fileData = await fileHandle.getFile();
13 |     contents = await fileData.text()
14 | }
15 | 
16 | async function writeFile() {
17 |     const writable = await fileHandle.createWritable();
18 |     await writable.write(contents);
19 |     await writable.close();
20 | }
21 | </script>
22 | 
23 | 
24 | <h1>Welcome to SvelteKit</h1>
25 | 
26 | <hr />
27 | 
28 | <button on:click={getTheFile}>load</button>
29 | <button on:click={writeFile}>save</button>
30 | 
31 | <Comp bind:contents />
32 | 


--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swyxio/svelte-filesystem-demo/b482d1019b2d5ecfa5913f5f9b368b4c962c8886/static/favicon.png


--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('@sveltejs/kit').Config} */
 2 | const config = {
 3 | 	kit: {
 4 | 		// hydrate the <div id="svelte"> element in src/app.html
 5 | 		target: '#svelte',
 6 | 		ssr: false
 7 | 	}
 8 | };
 9 | 
10 | export default config;
11 | 


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