├── .firebase └── hosting.cHVibGlj.cache ├── .firebaserc ├── .gitignore ├── README.md ├── firebase.json ├── firestore.indexes.json ├── firestore.rules ├── functions ├── .gitignore ├── Component.svelte ├── package-lock.json ├── package.json ├── src │ └── index.ts ├── tsconfig.json ├── tslint.json └── types │ └── svelte.d.ts ├── index.html ├── package-lock.json ├── package.json ├── public ├── 0.0.js ├── 10.10.js ├── 11.11.js ├── 12.12.js ├── 13.13.js ├── 14.14.js ├── 15.15.js ├── 16.16.js ├── 17.17.js ├── 18.18.js ├── 19.19.js ├── 2.2.js ├── 20.20.js ├── 21.21.js ├── 22.22.js ├── 23.23.js ├── 24.24.js ├── 25.25.js ├── 26.26.js ├── 27.27.js ├── 28.28.js ├── 29.29.js ├── 3.3.js ├── 30.30.js ├── 31.31.js ├── 32.32.js ├── 33.33.js ├── 34.34.js ├── 35.35.js ├── 36.36.js ├── 37.37.js ├── 38.38.js ├── 39.39.js ├── 4.4.js ├── 40.40.js ├── 41.41.js ├── 42.42.js ├── 43.43.js ├── 44.44.js ├── 45.45.js ├── 46.46.js ├── 47.47.js ├── 48.48.js ├── 49.49.js ├── 5.5.js ├── 50.50.js ├── 51.51.js ├── 52.52.js ├── 53.53.js ├── 54.54.js ├── 55.55.js ├── 56.56.js ├── 57.57.js ├── 58.58.js ├── 59.59.js ├── 6.6.js ├── 60.60.js ├── 7.7.js ├── 8.8.js ├── 9.9.js ├── Component.svelte ├── NewSnippet.mjs ├── app.bundle.js ├── app.css ├── apple-icon-precomposed.png ├── apple-icon.png ├── browserconfig.xml ├── bundle.css ├── config.js ├── css.worker.js ├── curl.js ├── editor.worker.js ├── examples │ ├── 00-introduction │ │ ├── 00-hello-world │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 01-dynamic-attributes │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 02-styling │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 03-nested-components │ │ │ ├── App.svelte │ │ │ ├── Nested.svelte │ │ │ └── meta.json │ │ ├── 04-html-tags │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ └── meta.json │ ├── 01-reactivity │ │ ├── 00-reactive-assignments │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 01-reactive-declarations │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 02-reactive-statements │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ └── meta.json │ ├── 02-props │ │ ├── 00-declaring-props │ │ │ ├── App.svelte │ │ │ ├── Nested.svelte │ │ │ └── meta.json │ │ ├── 01-default-values │ │ │ ├── App.svelte │ │ │ ├── Nested.svelte │ │ │ └── meta.json │ │ ├── 02-spread-props │ │ │ ├── App.svelte │ │ │ ├── Info.svelte │ │ │ └── meta.json │ │ └── meta.json │ ├── 03-logic │ │ ├── 00-if-blocks │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 01-else-blocks │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 02-else-if-blocks │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 03-each-blocks │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 04-keyed-each-blocks │ │ │ ├── App.svelte │ │ │ ├── Thing.svelte │ │ │ └── meta.json │ │ ├── 05-await-blocks │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ └── meta.json │ ├── 04-events │ │ ├── 00-dom-events │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 01-inline-handlers │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 02-event-modifiers │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 03-component-events │ │ │ ├── App.svelte │ │ │ ├── Inner.svelte │ │ │ └── meta.json │ │ ├── 04-event-forwarding │ │ │ ├── App.svelte │ │ │ ├── Inner.svelte │ │ │ ├── Outer.svelte │ │ │ └── meta.json │ │ ├── 05-dom-event-forwarding │ │ │ ├── App.svelte │ │ │ ├── FancyButton.svelte │ │ │ └── meta.json │ │ └── meta.json │ ├── 05-bindings │ │ ├── 00-text-inputs │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 01-numeric-inputs │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 02-checkbox-inputs │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 03-group-inputs │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 04-textarea-inputs │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 05-select-bindings │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 06-multiple-select-bindings │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 07-each-block-bindings │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 08-media-elements │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 09-dimensions │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 10-bind-this │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 11-component-bindings │ │ │ ├── App.svelte │ │ │ ├── Keypad.svelte │ │ │ └── meta.json │ │ └── meta.json │ ├── 06-lifecycle │ │ ├── 00-onmount │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 01-ondestroy │ │ │ ├── App.svelte │ │ │ ├── meta.json │ │ │ └── utils.js │ │ ├── 02-update │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 03-tick │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ └── meta.json │ ├── 07-stores │ │ ├── 00-writable-stores │ │ │ ├── App.svelte │ │ │ ├── Decrementer.svelte │ │ │ ├── Incrementer.svelte │ │ │ ├── Resetter.svelte │ │ │ ├── meta.json │ │ │ └── stores.js │ │ ├── 01-auto-subscriptions │ │ │ ├── App.svelte │ │ │ ├── Decrementer.svelte │ │ │ ├── Incrementer.svelte │ │ │ ├── Resetter.svelte │ │ │ ├── meta.json │ │ │ └── stores.js │ │ ├── 02-readable-stores │ │ │ ├── App.svelte │ │ │ ├── meta.json │ │ │ └── stores.js │ │ ├── 03-derived-stores │ │ │ ├── App.svelte │ │ │ ├── meta.json │ │ │ └── stores.js │ │ ├── 04-custom-stores │ │ │ ├── App.svelte │ │ │ ├── meta.json │ │ │ └── stores.js │ │ └── meta.json │ ├── 08-motion │ │ ├── 00-tweened │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 01-spring │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ └── meta.json │ ├── 09-transitions │ │ ├── 00-transition │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 01-adding-parameters-to-transitions │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 02-in-and-out │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 03-custom-css-transitions │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 04-custom-js-transitions │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 05-transition-events │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 06-deferred-transitions │ │ │ ├── App.svelte │ │ │ ├── crossfade.js │ │ │ └── meta.json │ │ └── meta.json │ ├── 10-animations │ │ ├── 00-animate │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ └── meta.json │ ├── 11-svg │ │ ├── 01-clock │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 02-bar-chart │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 03-area-chart │ │ │ ├── App.svelte │ │ │ ├── data.js │ │ │ └── meta.json │ │ ├── 04-scatterplot │ │ │ ├── App.svelte │ │ │ ├── Scatterplot.svelte │ │ │ ├── data.js │ │ │ └── meta.json │ │ ├── 05-svg-transitions │ │ │ ├── App.svelte │ │ │ ├── custom-transitions.js │ │ │ ├── meta.json │ │ │ └── shape.js │ │ └── meta.json │ ├── 12-actions │ │ ├── 00-actions │ │ │ ├── App.svelte │ │ │ ├── meta.json │ │ │ └── pannable.js │ │ ├── 01-adding-parameters-to-actions │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ └── meta.json │ ├── 13-classes │ │ ├── 00-classes │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 01-class-shorthand │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ └── meta.json │ ├── 14-composition │ │ ├── 00-slots │ │ │ ├── App.svelte │ │ │ ├── Box.svelte │ │ │ └── meta.json │ │ ├── 01-slot-fallbacks │ │ │ ├── App.svelte │ │ │ ├── Box.svelte │ │ │ └── meta.json │ │ ├── 02-named-slots │ │ │ ├── App.svelte │ │ │ ├── ContactCard.svelte │ │ │ └── meta.json │ │ ├── 03-slot-props │ │ │ ├── App.svelte │ │ │ ├── Hoverable.svelte │ │ │ └── meta.json │ │ ├── 04-modal │ │ │ ├── App.svelte │ │ │ ├── Modal.svelte │ │ │ └── meta.json │ │ └── meta.json │ ├── 15-context │ │ ├── 00-context-api │ │ │ ├── App.svelte │ │ │ ├── Map.svelte │ │ │ ├── MapMarker.svelte │ │ │ ├── mapbox.js │ │ │ └── meta.json │ │ └── meta.json │ ├── 16-special-elements │ │ ├── 00-svelte-self │ │ │ ├── App.svelte │ │ │ ├── File.svelte │ │ │ ├── Folder.svelte │ │ │ └── meta.json │ │ ├── 01-svelte-component │ │ │ ├── App.svelte │ │ │ ├── BlueThing.svelte │ │ │ ├── GreenThing.svelte │ │ │ ├── RedThing.svelte │ │ │ └── meta.json │ │ ├── 02-svelte-window │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 03-svelte-window-bindings │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 04-svelte-body │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 05-svelte-head │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ └── meta.json │ ├── 17-module-context │ │ ├── 01-module-exports │ │ │ ├── App.svelte │ │ │ ├── AudioPlayer.svelte │ │ │ └── meta.json │ │ └── meta.json │ ├── 18-debugging │ │ ├── 00-debug │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ └── meta.json │ ├── 19-7guis │ │ ├── 01-7guis-counter │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 02-7guis-temperature │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 03-7guis-flight-booker │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 04-7guis-timer │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 05-7guis-crud │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ ├── 06-7guis-circles │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ └── meta.json │ ├── 20-miscellaneous │ │ ├── 01-hacker-news │ │ │ ├── App.svelte │ │ │ ├── Comment.svelte │ │ │ ├── Item.svelte │ │ │ ├── List.svelte │ │ │ ├── Summary.svelte │ │ │ └── meta.json │ │ ├── 02-immutable-data │ │ │ ├── App.svelte │ │ │ ├── ImmutableTodo.svelte │ │ │ ├── MutableTodo.svelte │ │ │ ├── flash.js │ │ │ └── meta.json │ │ └── meta.json │ ├── 99-embeds │ │ ├── 20181225-blog-svelte-css-in-js │ │ │ ├── App.svelte │ │ │ ├── Hero.svelte │ │ │ ├── meta.json │ │ │ └── styles.js │ │ ├── 20190420-blog-write-less-code │ │ │ ├── App.svelte │ │ │ └── meta.json │ │ └── meta.json │ └── await-blocks.json ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon-96x96.png ├── favicon.ico ├── fonts │ ├── fira-mono │ │ └── fira-mono-latin-400.woff2 │ ├── overpass │ │ ├── overpass-latin-100.woff2 │ │ ├── overpass-latin-300.woff2 │ │ ├── overpass-latin-400.woff2 │ │ ├── overpass-latin-600.woff2 │ │ └── overpass-latin-700.woff2 │ └── roboto │ │ ├── roboto-latin-400.woff2 │ │ ├── roboto-latin-400italic.woff2 │ │ ├── roboto-latin-500.woff2 │ │ └── roboto-latin-500italic.woff2 ├── global.css ├── html.worker.js ├── icons │ ├── arrow-right.svg │ ├── check.svg │ ├── chevron.svg │ ├── collapse.svg │ ├── download.svg │ ├── dropdown.svg │ ├── edit.svg │ ├── expand.svg │ ├── flip.svg │ ├── fork.svg │ ├── link.svg │ ├── loading.svg │ └── save.svg ├── index.html ├── json.worker.js ├── logo-192.png ├── logo-512.png ├── logo-black.png ├── logo-left-font.png ├── logo-white.png ├── logo-with-text.png ├── logo.png ├── manifest.json ├── monaco-editor-worker-loader-proxy.js ├── monaco.bundle.js ├── monaco.css ├── repl-runner.js ├── rollup.config.js ├── svelte-app.json ├── themes │ ├── Active4D.json │ ├── All Hallows Eve.json │ ├── Amy.json │ ├── Birds of Paradise.json │ ├── Blackboard.json │ ├── Brilliance Black.json │ ├── Brilliance Dull.json │ ├── Chrome DevTools.json │ ├── Clouds Midnight.json │ ├── Clouds.json │ ├── Cobalt.json │ ├── Dawn.json │ ├── Dominion Day.json │ ├── Dreamweaver.json │ ├── Eiffel.json │ ├── Espresso Libre.json │ ├── GitHub.json │ ├── IDLE.json │ ├── Katzenmilch.json │ ├── Kuroir Theme.json │ ├── LAZY.json │ ├── MagicWB (Amiga).json │ ├── Merbivore Soft.json │ ├── Merbivore.json │ ├── Monokai Bright.json │ ├── Monokai.json │ ├── Night Owl.json │ ├── Oceanic Next.json │ ├── Pastels on Dark.json │ ├── Slush and Poppies.json │ ├── Solarized-dark.json │ ├── Solarized-light.json │ ├── SpaceCadet.json │ ├── Sunburst.json │ ├── Textmate (Mac Classic).json │ ├── Tomorrow-Night-Blue.json │ ├── Tomorrow-Night-Bright.json │ ├── Tomorrow-Night-Eighties.json │ ├── Tomorrow-Night.json │ ├── Tomorrow.json │ ├── Twilight.json │ ├── Upstream Sunburst.json │ ├── Vibrant Ink.json │ ├── Xcode_default.json │ ├── Zenburnesque.json │ ├── iPlastic.json │ ├── idleFingers.json │ ├── krTheme.json │ ├── monoindustrial.json │ └── themelist.json ├── typescript.worker.js └── workers │ ├── bundler.js │ └── compiler.js ├── src ├── App.svelte ├── components │ ├── ComponentPreview.svelte │ ├── JsonEditor.svelte │ ├── Login.svelte │ ├── MonacoEditor.svelte │ ├── ReplMonaco.svelte │ ├── SplitPane.svelte │ └── Tabs.svelte ├── index.js ├── main.js ├── monaco-themes.js ├── pages │ ├── Explore.svelte │ ├── Playground.svelte │ ├── Profile.svelte │ ├── Projects.svelte │ ├── Settings.svelte │ └── Theme.svelte ├── stores.js ├── utils │ ├── compat.js │ ├── db.js │ ├── events.js │ ├── examples.js │ └── slug.js └── views │ ├── Footer.svelte │ ├── Navbar.svelte │ └── Sidebar.svelte ├── storage.rules └── webpack.config.js /.firebaserc: -------------------------------------------------------------------------------- 1 | { 2 | "projects": { 3 | "default": "fullstackvoyage" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | npm-debug.log 4 | .env 5 | .DS_Store 6 | src/firebase.js -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Svelte3 Monaco Editor Playground 2 | 3 | WIP for sure. Beware large clone size until editor bundle build is ironed out. 4 | 5 | ## TODO 6 | 7 | - Use Component API to dynamically register preview component 8 | 9 | - Resolve CORS issues with worker bundles for static hosting 10 | 11 | - Add storage to save components and switch between them 12 | 13 | - Add Function for compiling/SSR of source 14 | 15 | [runkit compiler example output](https://runkit.com/mjgartendev/svelte-compiler) 16 | 17 | [runkit compiler endpoint](https://svelte-compiler-qklqmrg41rrj.runkit.sh/) 18 | -------------------------------------------------------------------------------- /firebase.json: -------------------------------------------------------------------------------- 1 | { 2 | "firestore": { 3 | "rules": "firestore.rules", 4 | "indexes": "firestore.indexes.json" 5 | }, 6 | "functions": { 7 | "predeploy": [ 8 | "npm --prefix \"$RESOURCE_DIR\" run lint", 9 | "npm --prefix \"$RESOURCE_DIR\" run build" 10 | ] 11 | }, 12 | "hosting": { 13 | "public": "public", 14 | "ignore": [ 15 | "firebase.json", 16 | "**/.*", 17 | "**/node_modules/**" 18 | ], 19 | "rewrites": [ 20 | { 21 | "source": "**", 22 | "destination": "/index.html" 23 | } 24 | ] 25 | }, 26 | "storage": { 27 | "rules": "storage.rules" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /firestore.indexes.json: -------------------------------------------------------------------------------- 1 | { 2 | "indexes": [ 3 | { 4 | "collectionGroup": "snippets", 5 | "queryScope": "COLLECTION", 6 | "fields": [ 7 | { 8 | "fieldPath": "uid", 9 | "order": "ASCENDING" 10 | }, 11 | { 12 | "fieldPath": "created", 13 | "order": "ASCENDING" 14 | } 15 | ] 16 | } 17 | ], 18 | "fieldOverrides": [] 19 | } 20 | -------------------------------------------------------------------------------- /firestore.rules: -------------------------------------------------------------------------------- 1 | service cloud.firestore { 2 | match /databases/{database}/documents { 3 | match /{document=**} { 4 | allow read, write; 5 | } 6 | } 7 | } -------------------------------------------------------------------------------- /functions/.gitignore: -------------------------------------------------------------------------------- 1 | ## Compiled JavaScript files 2 | **/*.js 3 | **/*.js.map 4 | 5 | # Typescript v1 declaration files 6 | typings/ 7 | 8 | node_modules/ -------------------------------------------------------------------------------- /functions/Component.svelte: -------------------------------------------------------------------------------- 1 |

hello {fullName}

2 | 3 | 4 | 5 | 20 | 28 | -------------------------------------------------------------------------------- /functions/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "functions", 3 | "scripts": { 4 | "lint": "tslint --project tsconfig.json", 5 | "build": "tsc", 6 | "serve": "npm run build && firebase serve --only functions", 7 | "shell": "npm run build && firebase functions:shell", 8 | "start": "npm run shell", 9 | "deploy": "firebase deploy --only functions", 10 | "logs": "firebase functions:log" 11 | }, 12 | "engines": { 13 | "node": "8" 14 | }, 15 | "main": "lib/index.js", 16 | "dependencies": { 17 | "firebase-admin": "~7.0.0", 18 | "firebase-functions": "^2.3.0", 19 | "svelte": "^3.4.4" 20 | }, 21 | "devDependencies": { 22 | "firebase-functions-test": "^0.1.6", 23 | "tslint": "^5.12.0", 24 | "typescript": "^3.2.2" 25 | }, 26 | "private": true 27 | } 28 | -------------------------------------------------------------------------------- /functions/src/index.ts: -------------------------------------------------------------------------------- 1 | import * as functions from 'firebase-functions'; 2 | const svelte = require('svelte/compiler'); 3 | const Component = require('../Component.svelte'); 4 | 5 | const source = (` 6 |

hello {fullName}

7 | 8 | 9 | 10 | 25 | 33 | `); 34 | export const render = functions.https.onRequest((request, response) => { 35 | response.send(Component.render({ 36 | firstName: "Rich", 37 | lastName: "Harris" 38 | })); 39 | }) 40 | 41 | export const helloWorld = functions.https.onRequest((request, response) => { 42 | response.send("Hello from Firebase!"); 43 | }); 44 | 45 | export const compile = functions.https.onRequest((request, response) => { 46 | const result = svelte.compile(source); 47 | response.send(result); 48 | }) 49 | -------------------------------------------------------------------------------- /functions/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "paths": { "*": ["types/*"] }, 5 | "module": "commonjs", 6 | "noImplicitReturns": true, 7 | "noUnusedLocals": true, 8 | "outDir": "lib", 9 | "sourceMap": true, 10 | "strict": true, 11 | "target": "es2017" 12 | }, 13 | "compileOnSave": true, 14 | "include": [ 15 | "src", "NewSnippet.js" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /functions/types/svelte.d.ts: -------------------------------------------------------------------------------- 1 | export function afterUpdate(fn: any): void; 2 | export function beforeUpdate(fn: any): void; 3 | export function createEventDispatcher(): any; 4 | export function getContext(key: any): any; 5 | export function onDestroy(fn: any): void; 6 | export function onMount(fn: any): void; 7 | export function setContext(key: any, context: any): void; 8 | export function tick(): any; 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-monaco-playground", 3 | "homepage": "https://mjgartendev.github.io/svelte-monaco-playground/", 4 | "dependencies": { 5 | "firebase": "^6.1.0", 6 | "jsoneditor": "^5.33.0", 7 | "monaco-themes": "^0.3.3", 8 | "rxfire": "^3.5.0", 9 | "rxjs": "^6.5.2", 10 | "yootils": "0.0.16" 11 | }, 12 | "devDependencies": { 13 | "@sveltejs/svelte-repl": "^0.1.8", 14 | "cross-env": "^5.2.0", 15 | "css-loader": "^2.1.1", 16 | "mini-css-extract-plugin": "^0.6.0", 17 | "serve": "^11.0.0", 18 | "style-loader": "^0.23.1", 19 | "svelte": "^3.4.4", 20 | "svelte-loader": "2.13.3", 21 | "webpack": "^4.30.0", 22 | "webpack-cli": "^3.3.0", 23 | "webpack-dev-server": "^3.3.1", 24 | "monaco-editor": "^0.17.0", 25 | "monaco-editor-webpack-plugin": "1.7.0" 26 | }, 27 | "scripts": { 28 | "build": "cross-env NODE_ENV=production webpack", 29 | "dev": "webpack-dev-server --content-base public", 30 | "predeploy": "npm run build" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /public/11.11.js: -------------------------------------------------------------------------------- 1 | (self.webpackJsonp=self.webpackJsonp||[]).push([[11],{387:function(t,r,e){"use strict";e.r(r),e.d(r,"conf",function(){return s}),e.d(r,"language",function(){return n});var s={brackets:[],autoClosingPairs:[],surroundingPairs:[]},n={keywords:[],typeKeywords:[],tokenPostfix:".csp",operators:[],symbols:/[=>>","&^","+=","-=","*=","/=","%=","&=","|=","^=","<<=",">>=","&^=","&&","||","<-","++","--","==","<",">","=","!","!=","<=",">=",":=","...","(",")","","]","{","}",",",";",".",":"],symbols:/[=>](?!@symbols)/,"@brackets"],[/@symbols/,{cases:{"@operators":"delimiter","@default":""}}],[/\d*\d+[eE]([\-+]?\d+)?/,"number.float"],[/\d*\.\d+([eE][\-+]?\d+)?/,"number.float"],[/0[xX][0-9a-fA-F']*[0-9a-fA-F]/,"number.hex"],[/0[0-7']*[0-7]/,"number.octal"],[/0[bB][0-1']*[0-1]/,"number.binary"],[/\d[\d']*/,"number"],[/\d/,"number"],[/[;,.]/,"delimiter"],[/"([^"\\]|\\.)*$/,"string.invalid"],[/"/,"string","@string"],[/`/,"string","@rawstring"],[/'[^\\']'/,"string"],[/(')(@escapes)(')/,["string","string.escape","string"]],[/'/,"string.invalid"]],whitespace:[[/[ \t\r\n]+/,""],[/\/\*\*(?!\/)/,"comment.doc","@doccomment"],[/\/\*/,"comment","@comment"],[/\/\/.*$/,"comment"]],comment:[[/[^\/*]+/,"comment"],[/\*\//,"comment","@pop"],[/[\/*]/,"comment"]],doccomment:[[/[^\/*]+/,"comment.doc"],[/\/\*/,"comment.doc.invalid"],[/\*\//,"comment.doc","@pop"],[/[\/*]/,"comment.doc"]],string:[[/[^\\"]+/,"string"],[/@escapes/,"string.escape"],[/\\./,"string.escape.invalid"],[/"/,"string","@pop"]],rawstring:[[/[^\`]/,"string"],[/`/,"string","@pop"]]}}}}]); -------------------------------------------------------------------------------- /public/16.16.js: -------------------------------------------------------------------------------- 1 | (self.webpackJsonp=self.webpackJsonp||[]).push([[16],{526:function(e,n,t){"use strict";t.r(n),t.d(n,"conf",function(){return o}),t.d(n,"language",function(){return s});var o={comments:{lineComment:"#"},brackets:[["{","}"],["[","]"],["(",")"]],autoClosingPairs:[{open:"{",close:"}"},{open:"[",close:"]"},{open:"(",close:")"},{open:'"""',close:'"""',notIn:["string","comment"]},{open:'"',close:'"',notIn:["string","comment"]}],surroundingPairs:[{open:"{",close:"}"},{open:"[",close:"]"},{open:"(",close:")"},{open:'"""',close:'"""'},{open:'"',close:'"'}],folding:{offSide:!0}},s={defaultToken:"invalid",tokenPostfix:".gql",keywords:["null","true","false","query","mutation","subscription","extend","schema","directive","scalar","type","interface","union","enum","input","implements","fragment","on"],typeKeywords:["Int","Float","String","Boolean","ID"],directiveLocations:["SCHEMA","SCALAR","OBJECT","FIELD_DEFINITION","ARGUMENT_DEFINITION","INTERFACE","UNION","ENUM","ENUM_VALUE","INPUT_OBJECT","INPUT_FIELD_DEFINITION","QUERY","MUTATION","SUBSCRIPTION","FIELD","FRAGMENT_DEFINITION","FRAGMENT_SPREAD","INLINE_FRAGMENT","VARIABLE_DEFINITION"],operators:["=","!","?",":","&","|"],symbols:/[=!?:&|]+/,escapes:/\\(?:["\\\/bfnrt]|u[0-9A-Fa-f]{4})/,tokenizer:{root:[[/[a-z_$][\w$]*/,{cases:{"@keywords":"keyword","@default":"identifier"}}],[/[A-Z][\w\$]*/,{cases:{"@typeKeywords":"keyword","@default":"type.identifier"}}],{include:"@whitespace"},[/[{}()\[\]]/,"@brackets"],[/@symbols/,{cases:{"@operators":"operator","@default":""}}],[/@\s*[a-zA-Z_\$][\w\$]*/,{token:"annotation",log:"annotation token: $0"}],[/\d*\.\d+([eE][\-+]?\d+)?/,"number.float"],[/0[xX][0-9a-fA-F]+/,"number.hex"],[/\d+/,"number"],[/[;,.]/,"delimiter"],[/"""/,{token:"string",next:"@mlstring",nextEmbedded:"markdown"}],[/"([^"\\]|\\.)*$/,"string.invalid"],[/"/,{token:"string.quote",bracket:"@open",next:"@string"}]],mlstring:[[/[^"]+/,"string"],['"""',{token:"string",next:"@pop",nextEmbedded:"@pop"}]],string:[[/[^\\"]+/,"string"],[/@escapes/,"string.escape"],[/\\./,"string.escape.invalid"],[/"/,{token:"string.quote",bracket:"@close",next:"@pop"}]],whitespace:[[/[ \t\r\n]+/,""],[/#.*$/,"comment"]]}}}}]); -------------------------------------------------------------------------------- /public/19.19.js: -------------------------------------------------------------------------------- 1 | (self.webpackJsonp=self.webpackJsonp||[]).push([[19],{394:function(e,n,s){"use strict";s.r(n),s.d(n,"conf",function(){return o}),s.d(n,"language",function(){return t});var o={comments:{lineComment:"#"},brackets:[["{","}"],["[","]"],["(",")"]],autoClosingPairs:[{open:"{",close:"}"},{open:"[",close:"]"},{open:"(",close:")"},{open:'"',close:'"'},{open:"'",close:"'"}],surroundingPairs:[{open:"{",close:"}"},{open:"[",close:"]"},{open:"(",close:")"},{open:'"',close:'"'},{open:"'",close:"'"}]},t={defaultToken:"",tokenPostfix:".ini",escapes:/\\(?:[abfnrtv\\"']|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/,tokenizer:{root:[[/^\[[^\]]*\]/,"metatag"],[/(^\w+)(\s*)(\=)/,["key","","delimiter"]],{include:"@whitespace"},[/\d+/,"number"],[/"([^"\\]|\\.)*$/,"string.invalid"],[/'([^'\\]|\\.)*$/,"string.invalid"],[/"/,"string",'@string."'],[/'/,"string","@string.'"]],whitespace:[[/[ \t\r\n]+/,""],[/^\s*[#;].*$/,"comment"]],string:[[/[^\\"']+/,"string"],[/@escapes/,"string.escape"],[/\\./,"string.escape.invalid"],[/["']/,{cases:{"$#==$S2":{token:"string",next:"@pop"},"@default":"string"}}]]}}}}]); -------------------------------------------------------------------------------- /public/23.23.js: -------------------------------------------------------------------------------- 1 | (self.webpackJsonp=self.webpackJsonp||[]).push([[23],{398:function(e,n,o){"use strict";o.r(n),o.d(n,"conf",function(){return t}),o.d(n,"language",function(){return s});var t={comments:{lineComment:"--",blockComment:["--[[","]]"]},brackets:[["{","}"],["[","]"],["(",")"]],autoClosingPairs:[{open:"{",close:"}"},{open:"[",close:"]"},{open:"(",close:")"},{open:'"',close:'"'},{open:"'",close:"'"}],surroundingPairs:[{open:"{",close:"}"},{open:"[",close:"]"},{open:"(",close:")"},{open:'"',close:'"'},{open:"'",close:"'"}]},s={defaultToken:"",tokenPostfix:".lua",keywords:["and","break","do","else","elseif","end","false","for","function","goto","if","in","local","nil","not","or","repeat","return","then","true","until","while"],brackets:[{token:"delimiter.bracket",open:"{",close:"}"},{token:"delimiter.array",open:"[",close:"]"},{token:"delimiter.parenthesis",open:"(",close:")"}],operators:["+","-","*","/","%","^","#","==","~=","<=",">=","<",">","=",";",":",",",".","..","..."],symbols:/[=>]/,"@brackets"],[/[a-zA-Z@#]\w*/,{cases:{"@keywords":"keyword","@default":"identifier"}}],[/[<>=\\+\\-\\*\\\/\\^\\|\\~,]|and\\b|or\\b|not\\b]/,"operator"]],whitespace:[[/\s+/,"white"]],comments:[["\\/\\*","comment","@comment"],["\\/\\/+.*","comment"]],comment:[["\\*\\/","comment","@pop"],[".","comment"]],numbers:[[/0[xX][0-9a-fA-F]*(_?[0-9a-fA-F])*/,"number.hex"],[/@decimal((\.@decpart)?([eE][\-+]?@decpart)?)[fF]*/,{cases:{"(\\d)*":"number",$0:"number.float"}}]],strings:[[/'$/,"string.escape","@popall"],[/'/,"string.escape","@stringBody"],[/"$/,"string.escape","@popall"],[/"/,"string.escape","@dblStringBody"]],stringBody:[[/[^\\']+$/,"string","@popall"],[/[^\\']+/,"string"],[/\\./,"string"],[/'/,"string.escape","@popall"],[/\\$/,"string"]],dblStringBody:[[/[^\\"]+$/,"string","@popall"],[/[^\\"]+/,"string"],[/\\./,"string"],[/"/,"string.escape","@popall"],[/\\$/,"string"]]}}}}]); -------------------------------------------------------------------------------- /public/37.37.js: -------------------------------------------------------------------------------- 1 | (self.webpackJsonp=self.webpackJsonp||[]).push([[37],{411:function(e,o,r){"use strict";r.r(o),r.d(o,"conf",function(){return t}),r.d(o,"language",function(){return n});var t={comments:{lineComment:"#"},brackets:[["{","}"],["[","]"],["(",")"]],autoClosingPairs:[{open:"{",close:"}"},{open:"[",close:"]"},{open:"(",close:")"},{open:'"',close:'"'}],surroundingPairs:[{open:"{",close:"}"},{open:"[",close:"]"},{open:"(",close:")"},{open:'"',close:'"'}]},n={defaultToken:"",tokenPostfix:".r",roxygen:["@param","@return","@name","@rdname","@examples","@include","@docType","@S3method","@TODO","@aliases","@alias","@assignee","@author","@callGraphDepth","@callGraph","@callGraphPrimitives","@concept","@exportClass","@exportMethod","@exportPattern","@export","@formals","@format","@importClassesFrom","@importFrom","@importMethodsFrom","@import","@keywords","@method","@nord","@note","@references","@seealso","@setClass","@slot","@source","@title","@usage"],constants:["NULL","FALSE","TRUE","NA","Inf","NaN ","NA_integer_","NA_real_","NA_complex_","NA_character_ ","T","F","LETTERS","letters","month.abb","month.name","pi","R.version.string"],keywords:["break","next","return","if","else","for","in","repeat","while","array","category","character","complex","double","function","integer","list","logical","matrix","numeric","vector","data.frame","factor","library","require","attach","detach","source"],special:["\\n","\\r","\\t","\\b","\\a","\\f","\\v","\\'",'\\"',"\\\\"],brackets:[{open:"{",close:"}",token:"delimiter.curly"},{open:"[",close:"]",token:"delimiter.bracket"},{open:"(",close:")",token:"delimiter.parenthesis"}],tokenizer:{root:[{include:"@numbers"},{include:"@strings"},[/[{}\[\]()]/,"@brackets"],{include:"@operators"},[/#'/,"comment.doc","@roxygen"],[/(^#.*$)/,"comment"],[/\s+/,"white"],[/[,:;]/,"delimiter"],[/@[a-zA-Z]\w*/,"tag"],[/[a-zA-Z]\w*/,{cases:{"@keywords":"keyword","@constants":"constant","@default":"identifier"}}]],roxygen:[[/@\w+/,{cases:{"@roxygen":"tag","@eos":{token:"comment.doc",next:"@pop"},"@default":"comment.doc"}}],[/\s+/,{cases:{"@eos":{token:"comment.doc",next:"@pop"},"@default":"comment.doc"}}],[/.*/,{token:"comment.doc",next:"@pop"}]],numbers:[[/0[xX][0-9a-fA-F]+/,"number.hex"],[/-?(\d*\.)?\d+([eE][+\-]?\d+)?/,"number"]],operators:[[/<{1,2}-/,"operator"],[/->{1,2}/,"operator"],[/%[^%\s]+%/,"operator"],[/\*\*/,"operator"],[/%%/,"operator"],[/&&/,"operator"],[/\|\|/,"operator"],[/<>/,"operator"],[/[-+=&|!<>^~*\/:$]/,"operator"]],strings:[[/'/,"string.escape","@stringBody"],[/"/,"string.escape","@dblStringBody"]],stringBody:[[/\\./,{cases:{"@special":"string","@default":"error-token"}}],[/'/,"string.escape","@popall"],[/./,"string"]],dblStringBody:[[/\\./,{cases:{"@special":"string","@default":"error-token"}}],[/"/,"string.escape","@popall"],[/./,"string"]]}}}}]); -------------------------------------------------------------------------------- /public/43.43.js: -------------------------------------------------------------------------------- 1 | (self.webpackJsonp=self.webpackJsonp||[]).push([[43],{417:function(e,n,o){"use strict";o.r(n),o.d(n,"conf",function(){return t}),o.d(n,"language",function(){return r});var t={comments:{lineComment:"'"},brackets:[["(",")"],["[","]"],["If","EndIf"],["While","EndWhile"],["For","EndFor"],["Sub","EndSub"]],autoClosingPairs:[{open:'"',close:'"',notIn:["string","comment"]},{open:"(",close:")",notIn:["string","comment"]},{open:"[",close:"]",notIn:["string","comment"]}]},r={defaultToken:"",tokenPostfix:".sb",ignoreCase:!0,brackets:[{token:"delimiter.array",open:"[",close:"]"},{token:"delimiter.parenthesis",open:"(",close:")"},{token:"keyword.tag-if",open:"If",close:"EndIf"},{token:"keyword.tag-while",open:"While",close:"EndWhile"},{token:"keyword.tag-for",open:"For",close:"EndFor"},{token:"keyword.tag-sub",open:"Sub",close:"EndSub"}],keywords:["Else","ElseIf","EndFor","EndIf","EndSub","EndWhile","For","Goto","If","Step","Sub","Then","To","While"],tagwords:["If","Sub","While","For"],operators:[">","<","<>","<=",">=","And","Or","+","-","*","/","="],identifier:/[a-zA-Z_][\w]*/,symbols:/[=><:+\-*\/%\.,]+/,escapes:/\\(?:[abfnrtv\\"']|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/,tokenizer:{root:[{include:"@whitespace"},[/(@identifier)(?=[.])/,"type"],[/@identifier/,{cases:{"@keywords":{token:"keyword.$0"},"@operators":"operator","@default":"variable.name"}}],[/([.])(@identifier)/,{cases:{$2:["delimiter","type.member"],"@default":""}}],[/\d*\.\d+/,"number.float"],[/\d+/,"number"],[/[()\[\]]/,"@brackets"],[/@symbols/,{cases:{"@operators":"operator","@default":"delimiter"}}],[/"([^"\\]|\\.)*$/,"string.invalid"],[/"/,"string","@string"]],whitespace:[[/[ \t\r\n]+/,""],[/(\').*$/,"comment"]],string:[[/[^\\"]+/,"string"],[/@escapes/,"string.escape"],[/\\./,"string.escape.invalid"],[/"C?/,"string","@pop"]]}}}}]); -------------------------------------------------------------------------------- /public/44.44.js: -------------------------------------------------------------------------------- 1 | (self.webpackJsonp=self.webpackJsonp||[]).push([[44],{418:function(e,n,o){"use strict";o.r(n),o.d(n,"conf",function(){return t}),o.d(n,"language",function(){return s});var t={comments:{lineComment:";",blockComment:["#|","|#"]},brackets:[["(",")"],["{","}"],["[","]"]],autoClosingPairs:[{open:"{",close:"}"},{open:"[",close:"]"},{open:"(",close:")"},{open:'"',close:'"'}],surroundingPairs:[{open:"{",close:"}"},{open:"[",close:"]"},{open:"(",close:")"},{open:'"',close:'"'}]},s={defaultToken:"",ignoreCase:!0,tokenPostfix:".scheme",brackets:[{open:"(",close:")",token:"delimiter.parenthesis"},{open:"{",close:"}",token:"delimiter.curly"},{open:"[",close:"]",token:"delimiter.square"}],keywords:["case","do","let","loop","if","else","when","cons","car","cdr","cond","lambda","lambda*","syntax-rules","format","set!","quote","eval","append","list","list?","member?","load"],constants:["#t","#f"],operators:["eq?","eqv?","equal?","and","or","not","null?"],tokenizer:{root:[[/#[xXoObB][0-9a-fA-F]+/,"number.hex"],[/[+-]?\d+(?:(?:\.\d*)?(?:[eE][+-]?\d+)?)?/,"number.float"],[/(?:\b(?:(define|define-syntax|define-macro))\b)(\s+)((?:\w|\-|\!|\?)*)/,["keyword","white","variable"]],{include:"@whitespace"},{include:"@strings"},[/[a-zA-Z_#][a-zA-Z0-9_\-\?\!\*]*/,{cases:{"@keywords":"keyword","@constants":"constant","@operators":"operators","@default":"identifier"}}]],comment:[[/[^\|#]+/,"comment"],[/#\|/,"comment","@push"],[/\|#/,"comment","@pop"],[/[\|#]/,"comment"]],whitespace:[[/[ \t\r\n]+/,"white"],[/#\|/,"comment","@comment"],[/;.*$/,"comment"]],strings:[[/"$/,"string","@popall"],[/"(?=.)/,"string","@multiLineString"]],multiLineString:[[/[^\\"]+$/,"string","@popall"],[/[^\\"]+/,"string"],[/\\./,"string.escape"],[/"/,"string","@popall"],[/\\$/,"string"]]}}}}]); -------------------------------------------------------------------------------- /public/54.54.js: -------------------------------------------------------------------------------- 1 | (self.webpackJsonp=self.webpackJsonp||[]).push([[54],{426:function(e,t,n){"use strict";n.r(t),n.d(t,"conf",function(){return a}),n.d(t,"language",function(){return o});var a={comments:{blockComment:["\x3c!--","--\x3e"]},brackets:[["<",">"]],autoClosingPairs:[{open:"<",close:">"},{open:"'",close:"'"},{open:'"',close:'"'}],surroundingPairs:[{open:"<",close:">"},{open:"'",close:"'"},{open:'"',close:'"'}]},o={defaultToken:"",tokenPostfix:".xml",ignoreCase:!0,qualifiedName:/(?:[\w\.\-]+:)?[\w\.\-]+/,tokenizer:{root:[[/[^<&]+/,""],{include:"@whitespace"},[/(<)(@qualifiedName)/,[{token:"delimiter"},{token:"tag",next:"@tag"}]],[/(<\/)(@qualifiedName)(\s*)(>)/,[{token:"delimiter"},{token:"tag"},"",{token:"delimiter"}]],[/(<\?)(@qualifiedName)/,[{token:"delimiter"},{token:"metatag",next:"@tag"}]],[/(<\!)(@qualifiedName)/,[{token:"delimiter"},{token:"metatag",next:"@tag"}]],[/<\!\[CDATA\[/,{token:"delimiter.cdata",next:"@cdata"}],[/&\w+;/,"string.escape"]],cdata:[[/[^\]]+/,""],[/\]\]>/,{token:"delimiter.cdata",next:"@pop"}],[/\]/,""]],tag:[[/[ \t\r\n]+/,""],[/(@qualifiedName)(\s*=\s*)("[^"]*"|'[^']*')/,["attribute.name","","attribute.value"]],[/(@qualifiedName)(\s*=\s*)("[^">?\/]*|'[^'>?\/]*)(?=[\?\/]\>)/,["attribute.name","","attribute.value"]],[/(@qualifiedName)(\s*=\s*)("[^">]*|'[^'>]*)/,["attribute.name","","attribute.value"]],[/@qualifiedName/,"attribute.name"],[/\?>/,{token:"delimiter",next:"@pop"}],[/(\/)(>)/,[{token:"tag"},{token:"delimiter",next:"@pop"}]],[/>/,{token:"delimiter",next:"@pop"}]],whitespace:[[/[ \t\r\n]+/,""],[//,{token:"comment",next:"@pop"}],[/ 7 | {name} dancing -------------------------------------------------------------------------------- /public/examples/00-introduction/01-dynamic-attributes/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Dynamic attributes" 3 | } -------------------------------------------------------------------------------- /public/examples/00-introduction/02-styling/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |

Styled!

-------------------------------------------------------------------------------- /public/examples/00-introduction/02-styling/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Styling" 3 | } -------------------------------------------------------------------------------- /public/examples/00-introduction/03-nested-components/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 12 | 13 |

These styles...

14 | -------------------------------------------------------------------------------- /public/examples/00-introduction/03-nested-components/Nested.svelte: -------------------------------------------------------------------------------- 1 |

...don't affect this element

-------------------------------------------------------------------------------- /public/examples/00-introduction/03-nested-components/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Nested components" 3 | } -------------------------------------------------------------------------------- /public/examples/00-introduction/04-html-tags/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

{@html string}

-------------------------------------------------------------------------------- /public/examples/00-introduction/04-html-tags/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "HTML tags" 3 | } -------------------------------------------------------------------------------- /public/examples/00-introduction/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Introduction" 3 | } -------------------------------------------------------------------------------- /public/examples/01-reactivity/00-reactive-assignments/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /public/examples/01-reactivity/00-reactive-assignments/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Reactive assignments" 3 | } -------------------------------------------------------------------------------- /public/examples/01-reactivity/01-reactive-declarations/App.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 16 | 17 |

{count} * 2 = {doubled}

18 |

{doubled} * 2 = {quadrupled}

-------------------------------------------------------------------------------- /public/examples/01-reactivity/01-reactive-declarations/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Reactive declarations" 3 | } -------------------------------------------------------------------------------- /public/examples/01-reactivity/02-reactive-statements/App.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | -------------------------------------------------------------------------------- /public/examples/01-reactivity/02-reactive-statements/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Reactive statements" 3 | } -------------------------------------------------------------------------------- /public/examples/01-reactivity/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Reactivity" 3 | } -------------------------------------------------------------------------------- /public/examples/02-props/00-declaring-props/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /public/examples/02-props/00-declaring-props/Nested.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

The answer is {answer}

-------------------------------------------------------------------------------- /public/examples/02-props/00-declaring-props/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Declaring props" 3 | } -------------------------------------------------------------------------------- /public/examples/02-props/01-default-values/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /public/examples/02-props/01-default-values/Nested.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

The answer is {answer}

-------------------------------------------------------------------------------- /public/examples/02-props/01-default-values/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Default values" 3 | } -------------------------------------------------------------------------------- /public/examples/02-props/02-spread-props/App.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /public/examples/02-props/02-spread-props/Info.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |

9 | The {name} package is {speed} fast. 10 | Download version {version} from npm 11 | and learn more here 12 |

-------------------------------------------------------------------------------- /public/examples/02-props/02-spread-props/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Spread props" 3 | } -------------------------------------------------------------------------------- /public/examples/02-props/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Props" 3 | } -------------------------------------------------------------------------------- /public/examples/03-logic/00-if-blocks/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | {#if user.loggedIn} 10 | 13 | {/if} 14 | 15 | {#if !user.loggedIn} 16 | 19 | {/if} -------------------------------------------------------------------------------- /public/examples/03-logic/00-if-blocks/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "If blocks" 3 | } -------------------------------------------------------------------------------- /public/examples/03-logic/01-else-blocks/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | {#if user.loggedIn} 10 | 13 | {:else} 14 | 17 | {/if} -------------------------------------------------------------------------------- /public/examples/03-logic/01-else-blocks/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Else blocks" 3 | } -------------------------------------------------------------------------------- /public/examples/03-logic/02-else-if-blocks/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | {#if x > 10} 6 |

{x} is greater than 10

7 | {:else if 5 > x} 8 |

{x} is less than 5

9 | {:else} 10 |

{x} is between 5 and 10

11 | {/if} -------------------------------------------------------------------------------- /public/examples/03-logic/02-else-if-blocks/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Else-if blocks" 3 | } -------------------------------------------------------------------------------- /public/examples/03-logic/03-each-blocks/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |

The Famous Cats of YouTube

10 | 11 | -------------------------------------------------------------------------------- /public/examples/03-logic/03-each-blocks/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Each blocks" 3 | } -------------------------------------------------------------------------------- /public/examples/03-logic/04-keyed-each-blocks/App.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 | 20 | 21 |
22 |
23 |

Keyed

24 | {#each things as thing (thing.id)} 25 | 26 | {/each} 27 |
28 | 29 |
30 |

Unkeyed

31 | {#each things as thing} 32 | 33 | {/each} 34 |
35 |
-------------------------------------------------------------------------------- /public/examples/03-logic/04-keyed-each-blocks/Thing.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |

{valueAtStart} / {value}

-------------------------------------------------------------------------------- /public/examples/03-logic/04-keyed-each-blocks/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Keyed each blocks" 3 | } -------------------------------------------------------------------------------- /public/examples/03-logic/05-await-blocks/App.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 | 23 | 24 | {#await promise} 25 |

...waiting

26 | {:then number} 27 |

The number is {number}

28 | {:catch error} 29 |

{error.message}

30 | {/await} -------------------------------------------------------------------------------- /public/examples/03-logic/05-await-blocks/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Await blocks" 3 | } -------------------------------------------------------------------------------- /public/examples/03-logic/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Logic" 3 | } -------------------------------------------------------------------------------- /public/examples/04-events/00-dom-events/App.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 13 | 14 |
15 | The mouse position is {m.x} x {m.y} 16 |
-------------------------------------------------------------------------------- /public/examples/04-events/00-dom-events/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "DOM events" 3 | } -------------------------------------------------------------------------------- /public/examples/04-events/01-inline-handlers/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | 9 |
10 | The mouse position is {m.x} x {m.y} 11 |
-------------------------------------------------------------------------------- /public/examples/04-events/01-inline-handlers/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Inline handlers" 3 | } -------------------------------------------------------------------------------- /public/examples/04-events/02-event-modifiers/App.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /public/examples/04-events/02-event-modifiers/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Event modifiers" 3 | } -------------------------------------------------------------------------------- /public/examples/04-events/03-component-events/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /public/examples/04-events/03-component-events/Inner.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /public/examples/04-events/03-component-events/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Component events" 3 | } -------------------------------------------------------------------------------- /public/examples/04-events/04-event-forwarding/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /public/examples/04-events/04-event-forwarding/Inner.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /public/examples/04-events/04-event-forwarding/Outer.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /public/examples/04-events/04-event-forwarding/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Event forwarding" 3 | } -------------------------------------------------------------------------------- /public/examples/04-events/05-dom-event-forwarding/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /public/examples/04-events/05-dom-event-forwarding/FancyButton.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /public/examples/04-events/05-dom-event-forwarding/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "DOM event forwarding" 3 | } -------------------------------------------------------------------------------- /public/examples/04-events/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Events" 3 | } -------------------------------------------------------------------------------- /public/examples/05-bindings/00-text-inputs/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 |

Hello {name || 'stranger'}!

-------------------------------------------------------------------------------- /public/examples/05-bindings/00-text-inputs/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Text inputs" 3 | } -------------------------------------------------------------------------------- /public/examples/05-bindings/01-numeric-inputs/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 10 | 11 | 15 | 16 |

{a} + {b} = {a + b}

-------------------------------------------------------------------------------- /public/examples/05-bindings/01-numeric-inputs/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Numeric inputs" 3 | } -------------------------------------------------------------------------------- /public/examples/05-bindings/02-checkbox-inputs/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 9 | 10 | {#if yes} 11 |

Thank you. We will bombard your inbox and sell your personal details.

12 | {:else} 13 |

You must opt in to continue. If you're not paying, you're the product.

14 | {/if} 15 | 16 | -------------------------------------------------------------------------------- /public/examples/05-bindings/02-checkbox-inputs/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Checkbox inputs" 3 | } -------------------------------------------------------------------------------- /public/examples/05-bindings/03-group-inputs/App.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 |

Size

18 | 19 | 23 | 24 | 28 | 29 | 33 | 34 |

Flavours

35 | 36 | {#each menu as flavour} 37 | 41 | {/each} 42 | 43 | {#if flavours.length === 0} 44 |

Please select at least one flavour

45 | {:else if flavours.length > scoops} 46 |

Can't order more flavours than scoops!

47 | {:else} 48 |

49 | You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'} 50 | of {join(flavours)} 51 |

52 | {/if} 53 | -------------------------------------------------------------------------------- /public/examples/05-bindings/03-group-inputs/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Group inputs" 3 | } -------------------------------------------------------------------------------- /public/examples/05-bindings/04-textarea-inputs/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 9 | 10 | 11 | 12 | {@html marked(value)} -------------------------------------------------------------------------------- /public/examples/05-bindings/04-textarea-inputs/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Textarea inputs" 3 | } -------------------------------------------------------------------------------- /public/examples/05-bindings/05-select-bindings/App.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 | 20 | 21 |

Insecurity questions

22 | 23 |
24 | 31 | 32 | 33 | 34 | 37 |
38 | 39 |

selected question {selected ? selected.id : '[waiting...]'}

-------------------------------------------------------------------------------- /public/examples/05-bindings/05-select-bindings/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Select bindings" 3 | } -------------------------------------------------------------------------------- /public/examples/05-bindings/06-multiple-select-bindings/App.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 |

Size

18 | 19 | 23 | 24 | 28 | 29 | 33 | 34 |

Flavours

35 | 36 | 43 | 44 | {#if flavours.length === 0} 45 |

Please select at least one flavour

46 | {:else if flavours.length > scoops} 47 |

Can't order more flavours than scoops!

48 | {:else} 49 |

50 | You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'} 51 | of {join(flavours)} 52 |

53 | {/if} 54 | -------------------------------------------------------------------------------- /public/examples/05-bindings/06-multiple-select-bindings/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Select multiple" 3 | } -------------------------------------------------------------------------------- /public/examples/05-bindings/07-each-block-bindings/App.svelte: -------------------------------------------------------------------------------- 1 | 18 | 19 | 24 | 25 |

Todos

26 | 27 | {#each todos as todo} 28 |
29 | 33 | 34 | 38 |
39 | {/each} 40 | 41 |

{remaining} remaining

42 | 43 | 46 | 47 | 50 | -------------------------------------------------------------------------------- /public/examples/05-bindings/07-each-block-bindings/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Each block bindings" 3 | } -------------------------------------------------------------------------------- /public/examples/05-bindings/08-media-elements/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Media elements" 3 | } -------------------------------------------------------------------------------- /public/examples/05-bindings/09-dimensions/App.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 12 | 13 | 14 | 15 | 16 |

size: {w}px x {h}px

17 | 18 |
19 | {text} 20 |
-------------------------------------------------------------------------------- /public/examples/05-bindings/09-dimensions/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Dimensions" 3 | } -------------------------------------------------------------------------------- /public/examples/05-bindings/10-bind-this/App.svelte: -------------------------------------------------------------------------------- 1 | 44 | 45 | 54 | 55 | -------------------------------------------------------------------------------- /public/examples/05-bindings/10-bind-this/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "bind:this={canvas}" 3 | } -------------------------------------------------------------------------------- /public/examples/05-bindings/11-component-bindings/App.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |

{view}

13 | 14 | -------------------------------------------------------------------------------- /public/examples/05-bindings/11-component-bindings/Keypad.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 25 | 26 |
27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 |
-------------------------------------------------------------------------------- /public/examples/05-bindings/11-component-bindings/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Component bindings" 3 | } -------------------------------------------------------------------------------- /public/examples/05-bindings/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Bindings" 3 | } -------------------------------------------------------------------------------- /public/examples/06-lifecycle/00-onmount/App.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | 25 | 26 |

Photo album

27 | 28 |
29 | {#each photos as photo} 30 |
31 | {photo.title} 32 |
{photo.title}
33 |
34 | {:else} 35 | 36 |

loading...

37 | {/each} 38 |
-------------------------------------------------------------------------------- /public/examples/06-lifecycle/00-onmount/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "onMount" 3 | } -------------------------------------------------------------------------------- /public/examples/06-lifecycle/01-ondestroy/App.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |

9 | The page has been open for 10 | {seconds} {seconds === 1 ? 'second' : 'seconds'} 11 |

-------------------------------------------------------------------------------- /public/examples/06-lifecycle/01-ondestroy/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "onDestroy" 3 | } -------------------------------------------------------------------------------- /public/examples/06-lifecycle/01-ondestroy/utils.js: -------------------------------------------------------------------------------- 1 | import { onDestroy } from 'svelte'; 2 | 3 | export function onInterval(callback, milliseconds) { 4 | const interval = setInterval(callback, milliseconds); 5 | 6 | onDestroy(() => { 7 | clearInterval(interval); 8 | }); 9 | } -------------------------------------------------------------------------------- /public/examples/06-lifecycle/02-update/App.svelte: -------------------------------------------------------------------------------- 1 | 53 | 54 | 93 | 94 |
95 |

Eliza

96 | 97 |
98 | {#each comments as comment} 99 |
100 | {comment.text} 101 |
102 | {/each} 103 |
104 | 105 | 106 |
-------------------------------------------------------------------------------- /public/examples/06-lifecycle/02-update/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "beforeUpdate and afterUpdate" 3 | } -------------------------------------------------------------------------------- /public/examples/06-lifecycle/03-tick/App.svelte: -------------------------------------------------------------------------------- 1 | 29 | 30 | 36 | 37 | -------------------------------------------------------------------------------- /public/examples/06-lifecycle/03-tick/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "tick" 3 | } -------------------------------------------------------------------------------- /public/examples/06-lifecycle/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Lifecycle" 3 | } -------------------------------------------------------------------------------- /public/examples/07-stores/00-writable-stores/App.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 |

The count is {count_value}

15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /public/examples/07-stores/00-writable-stores/Decrementer.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /public/examples/07-stores/00-writable-stores/Incrementer.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /public/examples/07-stores/00-writable-stores/Resetter.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /public/examples/07-stores/00-writable-stores/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Writable stores" 3 | } -------------------------------------------------------------------------------- /public/examples/07-stores/00-writable-stores/stores.js: -------------------------------------------------------------------------------- 1 | import { writable } from 'svelte/store'; 2 | 3 | export const count = writable(0); -------------------------------------------------------------------------------- /public/examples/07-stores/01-auto-subscriptions/App.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |

The count is {$count}

9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /public/examples/07-stores/01-auto-subscriptions/Decrementer.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /public/examples/07-stores/01-auto-subscriptions/Incrementer.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /public/examples/07-stores/01-auto-subscriptions/Resetter.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /public/examples/07-stores/01-auto-subscriptions/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Auto-subscriptions" 3 | } -------------------------------------------------------------------------------- /public/examples/07-stores/01-auto-subscriptions/stores.js: -------------------------------------------------------------------------------- 1 | import { writable } from 'svelte/store'; 2 | 3 | export const count = writable(0); -------------------------------------------------------------------------------- /public/examples/07-stores/02-readable-stores/App.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |

The time is {formatter.format($time)}

-------------------------------------------------------------------------------- /public/examples/07-stores/02-readable-stores/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Readable stores" 3 | } -------------------------------------------------------------------------------- /public/examples/07-stores/02-readable-stores/stores.js: -------------------------------------------------------------------------------- 1 | import { readable } from 'svelte/store'; 2 | 3 | export const time = readable(new Date(), function start(set) { 4 | const interval = setInterval(() => { 5 | set(new Date()); 6 | }, 1000); 7 | 8 | return function stop() { 9 | clearInterval(interval); 10 | }; 11 | }); -------------------------------------------------------------------------------- /public/examples/07-stores/03-derived-stores/App.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |

The time is {formatter.format($time)}

13 | 14 |

15 | This page has been open for 16 | {$elapsed} {$elapsed === 1 ? 'second' : 'seconds'} 17 |

-------------------------------------------------------------------------------- /public/examples/07-stores/03-derived-stores/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Derived stores" 3 | } -------------------------------------------------------------------------------- /public/examples/07-stores/03-derived-stores/stores.js: -------------------------------------------------------------------------------- 1 | import { readable, derived } from 'svelte/store'; 2 | 3 | export const time = readable(new Date(), function start(set) { 4 | const interval = setInterval(() => { 5 | set(new Date()); 6 | }, 1000); 7 | 8 | return function stop() { 9 | clearInterval(interval); 10 | }; 11 | }); 12 | 13 | const start = new Date(); 14 | 15 | export const elapsed = derived( 16 | time, 17 | $time => Math.round(($time - start) / 1000) 18 | ); -------------------------------------------------------------------------------- /public/examples/07-stores/04-custom-stores/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

The count is {$count}

6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /public/examples/07-stores/04-custom-stores/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Custom stores" 3 | } -------------------------------------------------------------------------------- /public/examples/07-stores/04-custom-stores/stores.js: -------------------------------------------------------------------------------- 1 | import { writable } from 'svelte/store'; 2 | 3 | function createCount() { 4 | const { subscribe, set, update } = writable(0); 5 | 6 | return { 7 | subscribe, 8 | increment: () => update(n => n + 1), 9 | decrement: () => update(n => n - 1), 10 | reset: () => set(0) 11 | }; 12 | } 13 | 14 | export const count = createCount(); -------------------------------------------------------------------------------- /public/examples/07-stores/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Stores" 3 | } -------------------------------------------------------------------------------- /public/examples/08-motion/00-tweened/App.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 17 | 18 | 19 | 20 | 23 | 24 | 27 | 28 | 31 | 32 | 35 | 36 | -------------------------------------------------------------------------------- /public/examples/08-motion/00-tweened/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Tweened" 3 | } -------------------------------------------------------------------------------- /public/examples/08-motion/01-spring/App.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | 16 | 17 |
18 | 22 | 23 | 27 |
28 | 29 | 34 | 35 | -------------------------------------------------------------------------------- /public/examples/08-motion/01-spring/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Spring" 3 | } -------------------------------------------------------------------------------- /public/examples/08-motion/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Motion" 3 | } -------------------------------------------------------------------------------- /public/examples/09-transitions/00-transition/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 10 | 11 | {#if visible} 12 |

13 | Fades in and out 14 |

15 | {/if} -------------------------------------------------------------------------------- /public/examples/09-transitions/00-transition/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "The transition directive" 3 | } -------------------------------------------------------------------------------- /public/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 10 | 11 | {#if visible} 12 |

13 | Flies in and out 14 |

15 | {/if} -------------------------------------------------------------------------------- /public/examples/09-transitions/01-adding-parameters-to-transitions/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Adding parameters" 3 | } -------------------------------------------------------------------------------- /public/examples/09-transitions/02-in-and-out/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 10 | 11 | {#if visible} 12 |

13 | Flies in, fades out 14 |

15 | {/if} -------------------------------------------------------------------------------- /public/examples/09-transitions/02-in-and-out/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "In and out" 3 | } -------------------------------------------------------------------------------- /public/examples/09-transitions/03-custom-css-transitions/App.svelte: -------------------------------------------------------------------------------- 1 | 24 | 25 | 39 | 40 | 44 | 45 | {#if visible} 46 |
47 | transitions! 48 |
49 | {/if} -------------------------------------------------------------------------------- /public/examples/09-transitions/03-custom-css-transitions/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Custom CSS transitions" 3 | } -------------------------------------------------------------------------------- /public/examples/09-transitions/04-custom-js-transitions/App.svelte: -------------------------------------------------------------------------------- 1 | 26 | 27 | 31 | 32 | {#if visible} 33 |

34 | The quick brown fox jumps over the lazy dog 35 |

36 | {/if} -------------------------------------------------------------------------------- /public/examples/09-transitions/04-custom-js-transitions/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Custom JS transitions" 3 | } -------------------------------------------------------------------------------- /public/examples/09-transitions/05-transition-events/App.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |

status: {status}

9 | 10 | 14 | 15 | {#if visible} 16 |

23 | Flies in and out 24 |

25 | {/if} -------------------------------------------------------------------------------- /public/examples/09-transitions/05-transition-events/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Transition events" 3 | } -------------------------------------------------------------------------------- /public/examples/09-transitions/06-deferred-transitions/crossfade.js: -------------------------------------------------------------------------------- 1 | import { quintOut } from 'svelte/easing'; 2 | 3 | export default function crossfade({ send, receive, fallback }) { 4 | let requested = new Map(); 5 | let provided = new Map(); 6 | 7 | function crossfade(from, node) { 8 | const to = node.getBoundingClientRect(); 9 | const dx = from.left - to.left; 10 | const dy = from.top - to.top; 11 | 12 | const style = getComputedStyle(node); 13 | const transform = style.transform === 'none' ? '' : style.transform; 14 | 15 | return { 16 | duration: 400, 17 | easing: quintOut, 18 | css: (t, u) => ` 19 | opacity: ${t}; 20 | transform: ${transform} translate(${u * dx}px,${u * dy}px); 21 | ` 22 | }; 23 | } 24 | 25 | return { 26 | send(node, params) { 27 | provided.set(params.key, { 28 | rect: node.getBoundingClientRect() 29 | }); 30 | 31 | return () => { 32 | if (requested.has(params.key)) { 33 | const { rect } = requested.get(params.key); 34 | requested.delete(params.key); 35 | 36 | return crossfade(rect, node); 37 | } 38 | 39 | // if the node is disappearing altogether 40 | // (i.e. wasn't claimed by the other list) 41 | // then we need to supply an outro 42 | provided.delete(params.key); 43 | return fallback(node, params); 44 | }; 45 | }, 46 | 47 | receive(node, params) { 48 | requested.set(params.key, { 49 | rect: node.getBoundingClientRect() 50 | }); 51 | 52 | return () => { 53 | if (provided.has(params.key)) { 54 | const { rect } = provided.get(params.key); 55 | provided.delete(params.key); 56 | 57 | return crossfade(rect, node); 58 | } 59 | 60 | requested.delete(params.key); 61 | return fallback(node, params); 62 | }; 63 | } 64 | }; 65 | } -------------------------------------------------------------------------------- /public/examples/09-transitions/06-deferred-transitions/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Deferred transitions" 3 | } -------------------------------------------------------------------------------- /public/examples/09-transitions/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Transitions" 3 | } -------------------------------------------------------------------------------- /public/examples/10-animations/00-animate/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "The animate directive" 3 | } -------------------------------------------------------------------------------- /public/examples/10-animations/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Animations" 3 | } -------------------------------------------------------------------------------- /public/examples/11-svg/01-clock/App.svelte: -------------------------------------------------------------------------------- 1 | 22 | 23 | 60 | 61 | 62 | 63 | 64 | 65 | {#each [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55] as minute} 66 | 72 | 73 | {#each [1, 2, 3, 4] as offset} 74 | 80 | {/each} 81 | {/each} 82 | 83 | 84 | 90 | 91 | 92 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | -------------------------------------------------------------------------------- /public/examples/11-svg/01-clock/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Clock" 3 | } -------------------------------------------------------------------------------- /public/examples/11-svg/02-bar-chart/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Bar chart" 3 | } -------------------------------------------------------------------------------- /public/examples/11-svg/03-area-chart/data.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { x: 1979, y: 7.19 }, 3 | { x: 1980, y: 7.83 }, 4 | { x: 1981, y: 7.24 }, 5 | { x: 1982, y: 7.44 }, 6 | { x: 1983, y: 7.51 }, 7 | { x: 1984, y: 7.10 }, 8 | { x: 1985, y: 6.91 }, 9 | { x: 1986, y: 7.53 }, 10 | { x: 1987, y: 7.47 }, 11 | { x: 1988, y: 7.48 }, 12 | { x: 1989, y: 7.03 }, 13 | { x: 1990, y: 6.23 }, 14 | { x: 1991, y: 6.54 }, 15 | { x: 1992, y: 7.54 }, 16 | { x: 1993, y: 6.50 }, 17 | { x: 1994, y: 7.18 }, 18 | { x: 1995, y: 6.12 }, 19 | { x: 1996, y: 7.87 }, 20 | { x: 1997, y: 6.73 }, 21 | { x: 1998, y: 6.55 }, 22 | { x: 1999, y: 6.23 }, 23 | { x: 2000, y: 6.31 }, 24 | { x: 2001, y: 6.74 }, 25 | { x: 2002, y: 5.95 }, 26 | { x: 2003, y: 6.13 }, 27 | { x: 2004, y: 6.04 }, 28 | { x: 2005, y: 5.56 }, 29 | { x: 2006, y: 5.91 }, 30 | { x: 2007, y: 4.29 }, 31 | { x: 2008, y: 4.72 }, 32 | { x: 2009, y: 5.38 }, 33 | { x: 2010, y: 4.92 }, 34 | { x: 2011, y: 4.61 }, 35 | { x: 2012, y: 3.62 }, 36 | { x: 2013, y: 5.35 }, 37 | { x: 2014, y: 5.28 }, 38 | { x: 2015, y: 4.63 }, 39 | { x: 2016, y: 4.72 } 40 | ]; -------------------------------------------------------------------------------- /public/examples/11-svg/03-area-chart/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Area chart" 3 | } -------------------------------------------------------------------------------- /public/examples/11-svg/04-scatterplot/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 16 | 17 |
18 |

Anscombe's quartet

19 | 20 | 21 | 22 | 23 | 24 |
-------------------------------------------------------------------------------- /public/examples/11-svg/04-scatterplot/Scatterplot.svelte: -------------------------------------------------------------------------------- 1 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | {#each yTicks as tick} 42 | 43 | 44 | {tick} 45 | 46 | {/each} 47 | 48 | 49 | 50 | 51 | {#each xTicks as tick} 52 | 53 | 54 | {tick} 55 | 56 | {/each} 57 | 58 | 59 | 60 | {#each points as point} 61 | 62 | {/each} 63 | 64 | 65 | 96 | -------------------------------------------------------------------------------- /public/examples/11-svg/04-scatterplot/data.js: -------------------------------------------------------------------------------- 1 | export default { 2 | a: [ 3 | { x: 10, y: 8.04 }, 4 | { x: 8, y: 6.95 }, 5 | { x: 13, y: 7.58 }, 6 | { x: 9, y: 8.81 }, 7 | { x: 11, y: 8.33 }, 8 | { x: 14, y: 9.96 }, 9 | { x: 6, y: 7.24 }, 10 | { x: 4, y: 4.26 }, 11 | { x: 12, y: 10.84 }, 12 | { x: 7, y: 4.82 }, 13 | { x: 5, y: 5.68 } 14 | ], 15 | b: [ 16 | { x: 10, y: 9.14 }, 17 | { x: 8, y: 8.14 }, 18 | { x: 13, y: 8.74 }, 19 | { x: 9, y: 8.77 }, 20 | { x: 11, y: 9.26 }, 21 | { x: 14, y: 8.1 }, 22 | { x: 6, y: 6.13 }, 23 | { x: 4, y: 3.1 }, 24 | { x: 12, y: 9.13 }, 25 | { x: 7, y: 7.26 }, 26 | { x: 5, y: 4.74 } 27 | ], 28 | c: [ 29 | { x: 10, y: 7.46 }, 30 | { x: 8, y: 6.77 }, 31 | { x: 13, y: 12.74 }, 32 | { x: 9, y: 7.11 }, 33 | { x: 11, y: 7.81 }, 34 | { x: 14, y: 8.84 }, 35 | { x: 6, y: 6.08 }, 36 | { x: 4, y: 5.39 }, 37 | { x: 12, y: 8.15 }, 38 | { x: 7, y: 6.42 }, 39 | { x: 5, y: 5.73 } 40 | ], 41 | d: [ 42 | { x: 8, y: 6.58 }, 43 | { x: 8, y: 5.76 }, 44 | { x: 8, y: 7.71 }, 45 | { x: 8, y: 8.84 }, 46 | { x: 8, y: 8.47 }, 47 | { x: 8, y: 7.04 }, 48 | { x: 8, y: 5.25 }, 49 | { x: 19, y: 12.5 }, 50 | { x: 8, y: 5.56 }, 51 | { x: 8, y: 7.91 }, 52 | { x: 8, y: 6.89 } 53 | ] 54 | }; -------------------------------------------------------------------------------- /public/examples/11-svg/04-scatterplot/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Scatterplot" 3 | } -------------------------------------------------------------------------------- /public/examples/11-svg/05-svg-transitions/App.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 43 | 44 | {#if visible} 45 | 46 | 47 | 52 | 57 | 58 | 59 | 60 |
61 | {#each 'SVELTE' as char, i} 62 | {char} 65 | {/each} 66 |
67 | {/if} 68 | 69 | 73 | 74 | -------------------------------------------------------------------------------- /public/examples/11-svg/05-svg-transitions/custom-transitions.js: -------------------------------------------------------------------------------- 1 | import { cubicOut } from 'svelte/easing'; 2 | 3 | export function expand(node, params) { 4 | const { 5 | delay = 0, 6 | duration = 400, 7 | easing = cubicOut 8 | } = params; 9 | 10 | const w = parseFloat(getComputedStyle(node).strokeWidth); 11 | 12 | return { 13 | delay, 14 | duration, 15 | easing, 16 | css: t => `opacity: ${t}; stroke-width: ${t * w}` 17 | }; 18 | } -------------------------------------------------------------------------------- /public/examples/11-svg/05-svg-transitions/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "SVG transitions" 3 | } -------------------------------------------------------------------------------- /public/examples/11-svg/05-svg-transitions/shape.js: -------------------------------------------------------------------------------- 1 | export const inner = `M45.41,108.86A21.81,21.81,0,0,1,22,100.18,20.2,20.2,0,0,1,18.53,84.9a19,19,0,0,1,.65-2.57l.52-1.58,1.41,1a35.32,35.32,0,0,0,10.75,5.37l1,.31-.1,1a6.2,6.2,0,0,0,1.11,4.08A6.57,6.57,0,0,0,41,95.19a6,6,0,0,0,1.68-.74L70.11,76.94a5.76,5.76,0,0,0,2.59-3.83,6.09,6.09,0,0,0-1-4.6,6.58,6.58,0,0,0-7.06-2.62,6.21,6.21,0,0,0-1.69.74L52.43,73.31a19.88,19.88,0,0,1-5.58,2.45,21.82,21.82,0,0,1-23.43-8.68A20.2,20.2,0,0,1,20,51.8a19,19,0,0,1,8.56-12.7L56,21.59a19.88,19.88,0,0,1,5.58-2.45A21.81,21.81,0,0,1,85,27.82,20.2,20.2,0,0,1,88.47,43.1a19,19,0,0,1-.65,2.57l-.52,1.58-1.41-1a35.32,35.32,0,0,0-10.75-5.37l-1-.31.1-1a6.2,6.2,0,0,0-1.11-4.08,6.57,6.57,0,0,0-7.06-2.62,6,6,0,0,0-1.68.74L36.89,51.06a5.71,5.71,0,0,0-2.58,3.83,6,6,0,0,0,1,4.6,6.58,6.58,0,0,0,7.06,2.62,6.21,6.21,0,0,0,1.69-.74l10.48-6.68a19.88,19.88,0,0,1,5.58-2.45,21.82,21.82,0,0,1,23.43,8.68A20.2,20.2,0,0,1,87,76.2a19,19,0,0,1-8.56,12.7L51,106.41a19.88,19.88,0,0,1-5.58,2.45`; 2 | export const outer = `M65,34 L37,52 A1 1 0 0 0 44 60 L70.5,44.5 A1 1 0 0 0 65,34Z M64,67 L36,85 A1 1 0 0 0 42 94 L68,77.5 A1 1 0 0 0 64,67Z`; -------------------------------------------------------------------------------- /public/examples/11-svg/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "SVG" 3 | } -------------------------------------------------------------------------------- /public/examples/12-actions/00-actions/App.svelte: -------------------------------------------------------------------------------- 1 | 27 | 28 | 42 | 43 |
-------------------------------------------------------------------------------- /public/examples/12-actions/00-actions/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "The use directive" 3 | } -------------------------------------------------------------------------------- /public/examples/12-actions/00-actions/pannable.js: -------------------------------------------------------------------------------- 1 | export function pannable(node) { 2 | let x; 3 | let y; 4 | 5 | function handleMousedown(event) { 6 | x = event.clientX; 7 | y = event.clientY; 8 | 9 | node.dispatchEvent(new CustomEvent('panstart', { 10 | detail: { x, y } 11 | })); 12 | 13 | window.addEventListener('mousemove', handleMousemove); 14 | window.addEventListener('mouseup', handleMouseup); 15 | } 16 | 17 | function handleMousemove(event) { 18 | const dx = event.clientX - x; 19 | const dy = event.clientY - y; 20 | x = event.clientX; 21 | y = event.clientY; 22 | 23 | node.dispatchEvent(new CustomEvent('panmove', { 24 | detail: { x, y, dx, dy } 25 | })); 26 | } 27 | 28 | function handleMouseup(event) { 29 | x = event.clientX; 30 | y = event.clientY; 31 | 32 | node.dispatchEvent(new CustomEvent('panend', { 33 | detail: { x, y } 34 | })); 35 | 36 | window.removeEventListener('mousemove', handleMousemove); 37 | window.removeEventListener('mouseup', handleMouseup); 38 | } 39 | 40 | node.addEventListener('mousedown', handleMousedown); 41 | 42 | return { 43 | destroy() { 44 | node.removeEventListener('mousedown', handleMousedown); 45 | } 46 | }; 47 | } -------------------------------------------------------------------------------- /public/examples/12-actions/01-adding-parameters-to-actions/App.svelte: -------------------------------------------------------------------------------- 1 | 67 | 68 | -------------------------------------------------------------------------------- /public/examples/12-actions/01-adding-parameters-to-actions/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Adding parameters" 3 | } -------------------------------------------------------------------------------- /public/examples/12-actions/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Actions" 3 | } -------------------------------------------------------------------------------- /public/examples/13-classes/00-classes/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 15 | 16 | 20 | 21 | 25 | 26 | -------------------------------------------------------------------------------- /public/examples/13-classes/00-classes/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "The class directive" 3 | } -------------------------------------------------------------------------------- /public/examples/13-classes/01-class-shorthand/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | 15 | 16 |
17 | some {big ? 'big' : 'small'} text 18 |
-------------------------------------------------------------------------------- /public/examples/13-classes/01-class-shorthand/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Shorthand class directive" 3 | } -------------------------------------------------------------------------------- /public/examples/13-classes/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Classes" 3 | } -------------------------------------------------------------------------------- /public/examples/14-composition/00-slots/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 |

Hello!

7 |

This is a box. It can contain anything.

8 | -------------------------------------------------------------------------------- /public/examples/14-composition/00-slots/Box.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 | 14 |
-------------------------------------------------------------------------------- /public/examples/14-composition/00-slots/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Slots" 3 | } -------------------------------------------------------------------------------- /public/examples/14-composition/01-slot-fallbacks/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 |

Hello!

7 |

This is a box. It can contain anything.

8 | 9 | 10 | -------------------------------------------------------------------------------- /public/examples/14-composition/01-slot-fallbacks/Box.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 | 14 | no content was provided 15 | 16 |
-------------------------------------------------------------------------------- /public/examples/14-composition/01-slot-fallbacks/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Slot fallbacks" 3 | } -------------------------------------------------------------------------------- /public/examples/14-composition/02-named-slots/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | P. Sherman 8 | 9 | 10 | 11 | 42 Wallaby Way
12 | Sydney 13 | 14 | -------------------------------------------------------------------------------- /public/examples/14-composition/02-named-slots/ContactCard.svelte: -------------------------------------------------------------------------------- 1 | 28 | 29 |
30 |

31 | 32 | Unknown name 33 | 34 |

35 | 36 |
37 | 38 | Unknown address 39 | 40 |
41 | 42 | 47 |
-------------------------------------------------------------------------------- /public/examples/14-composition/02-named-slots/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Named slots" 3 | } -------------------------------------------------------------------------------- /public/examples/14-composition/03-slot-props/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 17 | 18 | 19 |
20 | {#if active} 21 |

I am being hovered upon.

22 | {:else} 23 |

Hover over me!

24 | {/if} 25 |
26 | 27 | 28 | 29 |
30 | {#if active} 31 |

I am being hovered upon.

32 | {:else} 33 |

Hover over me!

34 | {/if} 35 |
36 | 37 | 38 | 39 |
40 | {#if active} 41 |

I am being hovered upon.

42 | {:else} 43 |

Hover over me!

44 | {/if} 45 |
46 | -------------------------------------------------------------------------------- /public/examples/14-composition/03-slot-props/Hoverable.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 |
14 | 15 |
-------------------------------------------------------------------------------- /public/examples/14-composition/03-slot-props/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Slot props" 3 | } -------------------------------------------------------------------------------- /public/examples/14-composition/04-modal/App.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 10 | 11 | {#if showModal} 12 | 13 |

14 | modal 15 | adjective mod·al \ˈmō-dəl\ 16 |

17 | 18 |
    19 |
  1. of or relating to modality in logic
    2. 20 |
  2. containing provisions as to the mode of procedure or the manner of taking effect —used of a contract or legacy
    3. 21 |
  3. of or relating to a musical mode
    4. 22 |
  4. of or relating to structure as opposed to substance
    5. 23 |
  5. of, relating to, or constituting a grammatical form or category characteristically indicating predication
    6. 24 |
  6. of or relating to a statistical mode
    7. 25 |
26 | 27 | merriam-webster.com 28 | 29 | {/if} 30 | -------------------------------------------------------------------------------- /public/examples/14-composition/04-modal/Modal.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 35 | 36 |
37 | 38 |
39 | 40 |
41 | 42 |
43 | 44 | 45 |
46 | -------------------------------------------------------------------------------- /public/examples/14-composition/04-modal/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Modal" 3 | } -------------------------------------------------------------------------------- /public/examples/14-composition/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Component composition" 3 | } -------------------------------------------------------------------------------- /public/examples/15-context/00-context-api/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /public/examples/15-context/00-context-api/Map.svelte: -------------------------------------------------------------------------------- 1 | 38 | 39 | 45 | 46 |
47 | {#if map} 48 | 49 | {/if} 50 |
-------------------------------------------------------------------------------- /public/examples/15-context/00-context-api/MapMarker.svelte: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/examples/15-context/00-context-api/mapbox.js: -------------------------------------------------------------------------------- 1 | import mapbox from 'mapbox-gl'; 2 | 3 | // https://docs.mapbox.com/help/glossary/access-token/ 4 | mapbox.accessToken = MAPBOX_ACCESS_TOKEN; 5 | 6 | const key = {}; 7 | 8 | export { mapbox, key }; -------------------------------------------------------------------------------- /public/examples/15-context/00-context-api/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "setContext and getContext" 3 | } -------------------------------------------------------------------------------- /public/examples/15-context/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Context API" 3 | } -------------------------------------------------------------------------------- /public/examples/16-special-elements/00-svelte-self/App.svelte: -------------------------------------------------------------------------------- 1 | 40 | 41 | -------------------------------------------------------------------------------- /public/examples/16-special-elements/00-svelte-self/File.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 13 | 14 | {name} -------------------------------------------------------------------------------- /public/examples/16-special-elements/00-svelte-self/Folder.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 37 | 38 | {name} 39 | 40 | {#if expanded} 41 |
    42 | {#each files as file} 43 |
  • 44 | {#if file.type === 'folder'} 45 | 46 | {:else} 47 | 48 | {/if} 49 |
    • 50 | {/each} 51 |
52 | {/if} -------------------------------------------------------------------------------- /public/examples/16-special-elements/00-svelte-self/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "" 3 | } -------------------------------------------------------------------------------- /public/examples/16-special-elements/01-svelte-component/App.svelte: -------------------------------------------------------------------------------- 1 | 14 | 15 | 20 | 21 | -------------------------------------------------------------------------------- /public/examples/16-special-elements/01-svelte-component/BlueThing.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | blue thing -------------------------------------------------------------------------------- /public/examples/16-special-elements/01-svelte-component/GreenThing.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | green thing -------------------------------------------------------------------------------- /public/examples/16-special-elements/01-svelte-component/RedThing.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | red thing -------------------------------------------------------------------------------- /public/examples/16-special-elements/01-svelte-component/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "" 3 | } -------------------------------------------------------------------------------- /public/examples/16-special-elements/02-svelte-window/App.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 32 | 33 | 34 | 35 |
36 | {#if key} 37 | {key === ' ' ? 'Space' : key} 38 |

{keyCode}

39 | {:else} 40 |

Focus this window and press any key

41 | {/if} 42 |
-------------------------------------------------------------------------------- /public/examples/16-special-elements/02-svelte-window/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "" 3 | } -------------------------------------------------------------------------------- /public/examples/16-special-elements/03-svelte-window-bindings/App.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | {#each [0, 1, 2, 3, 4, 5, 6, 7, 8] as layer} 11 | parallax layer {layer} 16 | {/each} 17 | 18 | 19 |
20 | 21 | scroll down 22 | 23 | 24 |
25 | You have scrolled {y} pixels 26 |
27 |
28 | 29 | 89 | -------------------------------------------------------------------------------- /public/examples/16-special-elements/03-svelte-window-bindings/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": " bindings" 3 | } -------------------------------------------------------------------------------- /public/examples/16-special-elements/04-svelte-body/App.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 26 | 27 | 31 | 32 | 33 | Kitten wants to know what's going on -------------------------------------------------------------------------------- /public/examples/16-special-elements/04-svelte-body/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "" 3 | } -------------------------------------------------------------------------------- /public/examples/16-special-elements/05-svelte-head/App.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |

Hello world!

-------------------------------------------------------------------------------- /public/examples/16-special-elements/05-svelte-head/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "" 3 | } -------------------------------------------------------------------------------- /public/examples/16-special-elements/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Special elements" 3 | } -------------------------------------------------------------------------------- /public/examples/17-module-context/01-module-exports/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | 9 | 10 | 16 | 17 | 18 | 24 | 25 | 26 | 32 | 33 | 34 | 40 | 41 | 42 | 48 | -------------------------------------------------------------------------------- /public/examples/17-module-context/01-module-exports/AudioPlayer.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 33 | 34 | 40 | 41 |
42 |

{title}

43 |

{composer} / performed by {performer}

44 | 45 | 52 |
-------------------------------------------------------------------------------- /public/examples/17-module-context/01-module-exports/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Named exports" 3 | } -------------------------------------------------------------------------------- /public/examples/17-module-context/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Module context" 3 | } -------------------------------------------------------------------------------- /public/examples/18-debugging/00-debug/App.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | {@debug user} 12 | 13 |

Hello {user.firstname}!

-------------------------------------------------------------------------------- /public/examples/18-debugging/00-debug/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "The @debug tag" 3 | } -------------------------------------------------------------------------------- /public/examples/18-debugging/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Debugging" 3 | } -------------------------------------------------------------------------------- /public/examples/19-7guis/01-7guis-counter/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /public/examples/19-7guis/01-7guis-counter/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Counter" 3 | } -------------------------------------------------------------------------------- /public/examples/19-7guis/02-7guis-temperature/App.svelte: -------------------------------------------------------------------------------- 1 | 2 | °c = 3 | °f 4 | 5 | 10 | 11 | 25 | -------------------------------------------------------------------------------- /public/examples/19-7guis/02-7guis-temperature/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Temperature Converter" 3 | } -------------------------------------------------------------------------------- /public/examples/19-7guis/03-7guis-flight-booker/App.svelte: -------------------------------------------------------------------------------- 1 | 38 | 39 | 46 | 47 | 48 | 52 | 53 | 54 | 55 | 56 | 60 | -------------------------------------------------------------------------------- /public/examples/19-7guis/03-7guis-flight-booker/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Flight booker" 3 | } -------------------------------------------------------------------------------- /public/examples/19-7guis/04-7guis-timer/App.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 28 | 29 | 33 | 34 |
{(elapsed / 1000).toFixed(1)}s
35 | 36 | 40 | 41 | -------------------------------------------------------------------------------- /public/examples/19-7guis/04-7guis-timer/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Timer" 3 | } -------------------------------------------------------------------------------- /public/examples/19-7guis/05-7guis-crud/App.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 59 | 60 | 81 | 82 | 83 | 84 | 89 | 90 | 91 | 92 | 93 |
94 | 95 | 96 | 97 |
98 | -------------------------------------------------------------------------------- /public/examples/19-7guis/05-7guis-crud/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "CRUD" 3 | } -------------------------------------------------------------------------------- /public/examples/19-7guis/06-7guis-circles/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Circle Drawer" 3 | } -------------------------------------------------------------------------------- /public/examples/19-7guis/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "7GUIs" 3 | } -------------------------------------------------------------------------------- /public/examples/20-miscellaneous/01-hacker-news/App.svelte: -------------------------------------------------------------------------------- 1 | 28 | 29 | 48 | 49 | 50 | 51 |
52 | {#if item} 53 | 54 | {:else if page} 55 | 56 | {/if} 57 |
-------------------------------------------------------------------------------- /public/examples/20-miscellaneous/01-hacker-news/Comment.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 21 | 22 |
23 |

{comment.user} {comment.time_ago}

24 | 25 | {@html comment.content} 26 | 27 |
28 | {#each comment.comments as child} 29 | 30 | {/each} 31 |
32 |
-------------------------------------------------------------------------------- /public/examples/20-miscellaneous/01-hacker-news/Item.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 23 | 24 | « back 25 | 26 | 34 | 35 |
36 | {#each item.comments as comment} 37 | 38 | {/each} 39 |
-------------------------------------------------------------------------------- /public/examples/20-miscellaneous/01-hacker-news/List.svelte: -------------------------------------------------------------------------------- 1 | 20 | 21 | 37 | 38 | {#if items} 39 | {#each items as item, i} 40 | 41 | {/each} 42 | 43 | page {page + 1} 44 | {:else} 45 |

loading...

46 | {/if} -------------------------------------------------------------------------------- /public/examples/20-miscellaneous/01-hacker-news/Summary.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | 33 | 34 | -------------------------------------------------------------------------------- /public/examples/20-miscellaneous/01-hacker-news/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Hacker News" 3 | } -------------------------------------------------------------------------------- /public/examples/20-miscellaneous/02-immutable-data/App.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 29 | 30 |

Immutable

31 | {#each todos as todo} 32 | 33 | {/each} 34 | 35 |

Mutable

36 | {#each todos as todo} 37 | 38 | {/each} 39 | -------------------------------------------------------------------------------- /public/examples/20-miscellaneous/02-immutable-data/ImmutableTodo.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 16 | 17 | 23 | 24 | 26 |
27 | {todo.done ? '👍': ''} {todo.text} 28 |
29 | -------------------------------------------------------------------------------- /public/examples/20-miscellaneous/02-immutable-data/MutableTodo.svelte: -------------------------------------------------------------------------------- 1 | 14 | 15 | 21 | 22 | 24 |
25 | {todo.done ? '👍': ''} {todo.text} 26 |
27 | -------------------------------------------------------------------------------- /public/examples/20-miscellaneous/02-immutable-data/flash.js: -------------------------------------------------------------------------------- 1 | export default function flash(element) { 2 | requestAnimationFrame(() => { 3 | element.style.transition = 'none'; 4 | element.style.color = 'rgba(255,62,0,1)'; 5 | element.style.backgroundColor = 'rgba(255,62,0,0.2)'; 6 | 7 | setTimeout(() => { 8 | element.style.transition = 'color 1s, background 1s'; 9 | element.style.color = ''; 10 | element.style.backgroundColor = ''; 11 | }); 12 | }); 13 | } -------------------------------------------------------------------------------- /public/examples/20-miscellaneous/02-immutable-data/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Immutable data" 3 | } -------------------------------------------------------------------------------- /public/examples/20-miscellaneous/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Miscellaneous" 3 | } -------------------------------------------------------------------------------- /public/examples/99-embeds/20181225-blog-svelte-css-in-js/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 |
9 |

Did you enjoy your lunch, mom? You drank it fast enough. I know, I just call her Annabelle cause she's shaped like a…she's the belle of the ball! YOU'RE the Chiclet! Not me. Caw ca caw, caw ca caw, caw ca caw! A Colombian cartel that WON'T kidnap and kill you. You go buy a tape recorder and record yourself for a whole day. I think you'll be surprised at some of your phrasing.

10 |
-------------------------------------------------------------------------------- /public/examples/99-embeds/20181225-blog-svelte-css-in-js/Hero.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 |

7 |
8 |
9 |
CSS
10 | in JS 11 |
12 | in HTML 13 |
14 |

15 |
-------------------------------------------------------------------------------- /public/examples/99-embeds/20181225-blog-svelte-css-in-js/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "-" 3 | } 4 | -------------------------------------------------------------------------------- /public/examples/99-embeds/20181225-blog-svelte-css-in-js/styles.js: -------------------------------------------------------------------------------- 1 | import emotion from 'emotion/dist/emotion.umd.min.js'; 2 | 3 | const { css } = emotion; 4 | 5 | const brand = '#74D900'; 6 | 7 | export const title = css` 8 | color: ${brand}; 9 | font-size: 1em; 10 | white-space: nowrap; 11 | `; 12 | 13 | export const comicSans = css` 14 | font-family: 'Comic Sans MS'; 15 | `; 16 | 17 | export const box = css` 18 | position: relative; 19 | display: inline-block; 20 | border: 2px solid ${brand}; 21 | line-height: 1; 22 | padding: 4px; 23 | border-radius: 4px; 24 | `; 25 | 26 | export const link = css` 27 | color: inherit; 28 | font-weight: bold; 29 | text-decoration: none; 30 | border-bottom: 1px solid ${brand}; 31 | &:hover { 32 | text-decoration: none; 33 | background: ${brand}; 34 | } 35 | `; 36 | -------------------------------------------------------------------------------- /public/examples/99-embeds/20190420-blog-write-less-code/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 |

{a} + {b} = {a + b}

-------------------------------------------------------------------------------- /public/examples/99-embeds/20190420-blog-write-less-code/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "-" 3 | } 4 | -------------------------------------------------------------------------------- /public/examples/99-embeds/meta.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /public/examples/await-blocks.json: -------------------------------------------------------------------------------- 1 | { 2 | "relaxed": true, 3 | "uid": "hello-world", 4 | "name": "Hello world", 5 | "files": [ 6 | { 7 | "name": "App.svelte", 8 | "source": "\n\n

Hello {name}!

" 9 | } 10 | ], 11 | "owner": null 12 | } -------------------------------------------------------------------------------- /public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/favicon-16x16.png -------------------------------------------------------------------------------- /public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/favicon-32x32.png -------------------------------------------------------------------------------- /public/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/favicon-96x96.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/favicon.ico -------------------------------------------------------------------------------- /public/fonts/fira-mono/fira-mono-latin-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/fonts/fira-mono/fira-mono-latin-400.woff2 -------------------------------------------------------------------------------- /public/fonts/overpass/overpass-latin-100.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/fonts/overpass/overpass-latin-100.woff2 -------------------------------------------------------------------------------- /public/fonts/overpass/overpass-latin-300.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/fonts/overpass/overpass-latin-300.woff2 -------------------------------------------------------------------------------- /public/fonts/overpass/overpass-latin-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/fonts/overpass/overpass-latin-400.woff2 -------------------------------------------------------------------------------- /public/fonts/overpass/overpass-latin-600.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/fonts/overpass/overpass-latin-600.woff2 -------------------------------------------------------------------------------- /public/fonts/overpass/overpass-latin-700.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/fonts/overpass/overpass-latin-700.woff2 -------------------------------------------------------------------------------- /public/fonts/roboto/roboto-latin-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/fonts/roboto/roboto-latin-400.woff2 -------------------------------------------------------------------------------- /public/fonts/roboto/roboto-latin-400italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/fonts/roboto/roboto-latin-400italic.woff2 -------------------------------------------------------------------------------- /public/fonts/roboto/roboto-latin-500.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/fonts/roboto/roboto-latin-500.woff2 -------------------------------------------------------------------------------- /public/fonts/roboto/roboto-latin-500italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/fonts/roboto/roboto-latin-500italic.woff2 -------------------------------------------------------------------------------- /public/global.css: -------------------------------------------------------------------------------- 1 | :root{ 2 | --blue: #007bff; 3 | --indigo: #6610f2; 4 | --purple: #6f42c1; 5 | --pink: #e83e8c; 6 | --red: #dc3545; 7 | --orange: #fd7e14; 8 | --yellow: #ffc107; 9 | --green: #28a745; 10 | --teal: #20c997; 11 | --cyan: #17a2b8; 12 | --white: #fff; 13 | --gray: #6c757d; 14 | --gray-dark: #343a40; 15 | --primary: #007bff; 16 | --secondary: #6c757d; 17 | --success: #28a745; 18 | --info: #17a2b8; 19 | --warning: #ffc107; 20 | --danger: #dc3545; 21 | --light: #f8f9fa; 22 | --dark: #343a40; 23 | --breakpoint-xs: 0; 24 | --breakpoint-sm: 576px; 25 | --breakpoint-md: 768px; 26 | --breakpoint-lg: 992px; 27 | --breakpoint-xl: 1200px; 28 | --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 29 | --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 30 | --primary: #29c785; 31 | --secondary: #444857; 32 | --surface: #1B2B34; 33 | --lighter: #f0f0f0; 34 | --darker: #333; 35 | --radius: 4px; 36 | --shadow-sm: 0px 1px 3px 0px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12); 37 | --shadow-md: 0px 1px 5px 0px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 3px 1px -2px rgba(0,0,0,0.12); 38 | --shadow-lg: 0px 1px 8px 0px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 3px 3px -2px rgba(0,0,0,0.12); 39 | } 40 | html, 41 | body { 42 | width: 100%; 43 | height: 100%; 44 | } 45 | 46 | body { 47 | margin: 0; 48 | box-sizing: border-box; 49 | font-family: var(--font-family-sans-serif); 50 | overflow-y: hidden; 51 | } 52 | 53 | a { 54 | color:var(--primary); 55 | text-decoration: none; 56 | } 57 | 58 | label { 59 | display: block; 60 | } 61 | 62 | input:disabled { 63 | color: #ccc; 64 | } 65 | 66 | input[type="range"] { 67 | height: 0; 68 | } 69 | 70 | button, select { 71 | padding: 0.5em; 72 | border: 1px solid var(--secondary); 73 | font-weight: bold; 74 | border-radius: var(--radius); 75 | background: var(--secondary); 76 | color: var(--light); 77 | fill: var(--light); 78 | } 79 | button:hover { 80 | fill: var(--primary); 81 | color: var(--primary); 82 | cursor: pointer; 83 | } 84 | pre{ 85 | font-family: var(--font-family-monospace); 86 | background: var(--dark); 87 | color: var(--light); 88 | } -------------------------------------------------------------------------------- /public/icons/arrow-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /public/icons/check.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/icons/chevron.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/icons/collapse.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/icons/download.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/icons/dropdown.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/icons/edit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /public/icons/expand.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/icons/flip.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/icons/fork.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/icons/link.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /public/icons/loading.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /public/icons/save.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SvelteMonacoEditor 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /public/logo-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/logo-192.png -------------------------------------------------------------------------------- /public/logo-512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/logo-512.png -------------------------------------------------------------------------------- /public/logo-black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/logo-black.png -------------------------------------------------------------------------------- /public/logo-left-font.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/logo-left-font.png -------------------------------------------------------------------------------- /public/logo-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/logo-white.png -------------------------------------------------------------------------------- /public/logo-with-text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/logo-with-text.png -------------------------------------------------------------------------------- /public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/logo.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "App", 3 | "icons": [ 4 | { 5 | "src": "\/android-icon-36x36.png", 6 | "sizes": "36x36", 7 | "type": "image\/png", 8 | "density": "0.75" 9 | }, 10 | { 11 | "src": "\/android-icon-48x48.png", 12 | "sizes": "48x48", 13 | "type": "image\/png", 14 | "density": "1.0" 15 | }, 16 | { 17 | "src": "\/android-icon-72x72.png", 18 | "sizes": "72x72", 19 | "type": "image\/png", 20 | "density": "1.5" 21 | }, 22 | { 23 | "src": "\/android-icon-96x96.png", 24 | "sizes": "96x96", 25 | "type": "image\/png", 26 | "density": "2.0" 27 | }, 28 | { 29 | "src": "\/android-icon-144x144.png", 30 | "sizes": "144x144", 31 | "type": "image\/png", 32 | "density": "3.0" 33 | }, 34 | { 35 | "src": "\/android-icon-192x192.png", 36 | "sizes": "192x192", 37 | "type": "image\/png", 38 | "density": "4.0" 39 | } 40 | ] 41 | } -------------------------------------------------------------------------------- /public/monaco-editor-worker-loader-proxy.js: -------------------------------------------------------------------------------- 1 | self.MonacoEnvironment = { 2 | baseUrl: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.17.0/min/' 3 | } 4 | importScripts('https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.17.0/min/vs/base/worker/workerMain.js') // eslint-disable-line -------------------------------------------------------------------------------- /public/rollup.config.js: -------------------------------------------------------------------------------- 1 | import resolve from 'rollup-plugin-node-resolve'; 2 | import replace from 'rollup-plugin-replace'; 3 | import commonjs from 'rollup-plugin-commonjs'; 4 | import svelte from 'rollup-plugin-svelte'; 5 | import babel from 'rollup-plugin-babel'; 6 | import { terser } from 'rollup-plugin-terser'; 7 | import config from 'sapper/config/rollup.js'; 8 | import pkg from './package.json'; 9 | 10 | const mode = process.env.NODE_ENV; 11 | const dev = mode === 'development'; 12 | const legacy = !!process.env.SAPPER_LEGACY_BUILD; 13 | 14 | export default { 15 | client: { 16 | input: config.client.input(), 17 | output: config.client.output(), 18 | plugins: [ 19 | replace({ 20 | 'process.browser': true, 21 | 'process.env.NODE_ENV': JSON.stringify(mode) 22 | }), 23 | svelte({ 24 | dev, 25 | hydratable: true, 26 | emitCss: true 27 | }), 28 | resolve(), 29 | commonjs(), 30 | 31 | legacy && babel({ 32 | extensions: ['.js', '.mjs', '.html', '.svelte'], 33 | runtimeHelpers: true, 34 | exclude: ['node_modules/@babel/**'], 35 | presets: [ 36 | ['@babel/preset-env', { 37 | targets: '> 0.25%, not dead' 38 | }] 39 | ], 40 | plugins: [ 41 | '@babel/plugin-syntax-dynamic-import', 42 | ['@babel/plugin-transform-runtime', { 43 | useESModules: true 44 | }] 45 | ] 46 | }), 47 | 48 | !dev && terser({ 49 | module: true 50 | }) 51 | ], 52 | }, 53 | 54 | server: { 55 | input: config.server.input(), 56 | output: config.server.output(), 57 | plugins: [ 58 | replace({ 59 | 'process.browser': false, 60 | 'process.env.NODE_ENV': JSON.stringify(mode) 61 | }), 62 | svelte({ 63 | generate: 'ssr', 64 | dev 65 | }), 66 | resolve(), 67 | commonjs() 68 | ], 69 | external: Object.keys(pkg.dependencies).concat( 70 | require('module').builtinModules || Object.keys(process.binding('natives')) 71 | ), 72 | }, 73 | 74 | serviceworker: { 75 | input: config.serviceworker.input(), 76 | output: config.serviceworker.output(), 77 | plugins: [ 78 | resolve(), 79 | replace({ 80 | 'process.browser': true, 81 | 'process.env.NODE_ENV': JSON.stringify(mode) 82 | }), 83 | commonjs(), 84 | !dev && terser() 85 | ] 86 | } 87 | }; 88 | -------------------------------------------------------------------------------- /public/themes/All Hallows Eve.json: -------------------------------------------------------------------------------- 1 | { 2 | "base": "vs-dark", 3 | "inherit": true, 4 | "rules": [ 5 | { 6 | "foreground": "ffffff", 7 | "background": "434242", 8 | "token": "text" 9 | }, 10 | { 11 | "foreground": "ffffff", 12 | "background": "000000", 13 | "token": "source" 14 | }, 15 | { 16 | "foreground": "9933cc", 17 | "token": "comment" 18 | }, 19 | { 20 | "foreground": "3387cc", 21 | "token": "constant" 22 | }, 23 | { 24 | "foreground": "cc7833", 25 | "token": "keyword" 26 | }, 27 | { 28 | "foreground": "d0d0ff", 29 | "token": "meta.preprocessor.c" 30 | }, 31 | { 32 | "fontStyle": "italic", 33 | "token": "variable.parameter" 34 | }, 35 | { 36 | "foreground": "ffffff", 37 | "background": "9b9b9b", 38 | "token": "source comment.block" 39 | }, 40 | { 41 | "foreground": "66cc33", 42 | "token": "string" 43 | }, 44 | { 45 | "foreground": "aaaaaa", 46 | "token": "string constant.character.escape" 47 | }, 48 | { 49 | "foreground": "000000", 50 | "background": "cccc33", 51 | "token": "string.interpolated" 52 | }, 53 | { 54 | "foreground": "cccc33", 55 | "token": "string.regexp" 56 | }, 57 | { 58 | "foreground": "cccc33", 59 | "token": "string.literal" 60 | }, 61 | { 62 | "foreground": "555555", 63 | "token": "string.interpolated constant.character.escape" 64 | }, 65 | { 66 | "fontStyle": "underline", 67 | "token": "entity.name.type" 68 | }, 69 | { 70 | "fontStyle": "italic underline", 71 | "token": "entity.other.inherited-class" 72 | }, 73 | { 74 | "fontStyle": "underline", 75 | "token": "entity.name.tag" 76 | }, 77 | { 78 | "foreground": "c83730", 79 | "token": "support.function" 80 | } 81 | ], 82 | "colors": { 83 | "editor.foreground": "#FFFFFF", 84 | "editor.background": "#000000", 85 | "editor.selectionBackground": "#73597EE0", 86 | "editor.lineHighlightBackground": "#333300", 87 | "editorCursor.foreground": "#FFFFFF", 88 | "editorWhitespace.foreground": "#404040" 89 | } 90 | } -------------------------------------------------------------------------------- /public/themes/Chrome DevTools.json: -------------------------------------------------------------------------------- 1 | { 2 | "base": "vs", 3 | "inherit": true, 4 | "rules": [ 5 | { 6 | "foreground": "c41a16", 7 | "token": "string" 8 | }, 9 | { 10 | "foreground": "1c00cf", 11 | "token": "constant.numeric" 12 | }, 13 | { 14 | "foreground": "aa0d91", 15 | "token": "keyword" 16 | }, 17 | { 18 | "foreground": "000000", 19 | "token": "keyword.operator" 20 | }, 21 | { 22 | "foreground": "aa0d91", 23 | "token": "constant.language" 24 | }, 25 | { 26 | "foreground": "990000", 27 | "token": "support.class.exception" 28 | }, 29 | { 30 | "foreground": "000000", 31 | "token": "entity.name.function" 32 | }, 33 | { 34 | "fontStyle": "bold underline", 35 | "token": "entity.name.type" 36 | }, 37 | { 38 | "fontStyle": "italic", 39 | "token": "variable.parameter" 40 | }, 41 | { 42 | "foreground": "007400", 43 | "token": "comment" 44 | }, 45 | { 46 | "foreground": "ff0000", 47 | "token": "invalid" 48 | }, 49 | { 50 | "background": "e71a1100", 51 | "token": "invalid.deprecated.trailing-whitespace" 52 | }, 53 | { 54 | "foreground": "000000", 55 | "background": "fafafafc", 56 | "token": "text source" 57 | }, 58 | { 59 | "foreground": "aa0d91", 60 | "token": "meta.tag" 61 | }, 62 | { 63 | "foreground": "aa0d91", 64 | "token": "declaration.tag" 65 | }, 66 | { 67 | "foreground": "000000", 68 | "fontStyle": "bold", 69 | "token": "support" 70 | }, 71 | { 72 | "foreground": "aa0d91", 73 | "token": "storage" 74 | }, 75 | { 76 | "fontStyle": "bold underline", 77 | "token": "entity.name.section" 78 | }, 79 | { 80 | "foreground": "000000", 81 | "fontStyle": "bold", 82 | "token": "entity.name.function.frame" 83 | }, 84 | { 85 | "foreground": "333333", 86 | "token": "meta.tag.preprocessor.xml" 87 | }, 88 | { 89 | "foreground": "994500", 90 | "fontStyle": "italic", 91 | "token": "entity.other.attribute-name" 92 | }, 93 | { 94 | "foreground": "881280", 95 | "token": "entity.name.tag" 96 | } 97 | ], 98 | "colors": { 99 | "editor.foreground": "#000000", 100 | "editor.background": "#FFFFFF", 101 | "editor.selectionBackground": "#BAD6FD", 102 | "editor.lineHighlightBackground": "#0000001A", 103 | "editorCursor.foreground": "#000000", 104 | "editorWhitespace.foreground": "#B3B3B3F4" 105 | } 106 | } -------------------------------------------------------------------------------- /public/themes/IDLE.json: -------------------------------------------------------------------------------- 1 | { 2 | "base": "vs", 3 | "inherit": true, 4 | "rules": [ 5 | { 6 | "foreground": "919191", 7 | "token": "comment" 8 | }, 9 | { 10 | "foreground": "00a33f", 11 | "token": "string" 12 | }, 13 | { 14 | "foreground": "a535ae", 15 | "token": "constant.language" 16 | }, 17 | { 18 | "foreground": "ff5600", 19 | "token": "keyword" 20 | }, 21 | { 22 | "foreground": "ff5600", 23 | "token": "storage" 24 | }, 25 | { 26 | "foreground": "21439c", 27 | "token": "entity.name.type" 28 | }, 29 | { 30 | "foreground": "21439c", 31 | "token": "entity.name.function" 32 | }, 33 | { 34 | "foreground": "a535ae", 35 | "token": "support.function" 36 | }, 37 | { 38 | "foreground": "a535ae", 39 | "token": "support.constant" 40 | }, 41 | { 42 | "foreground": "a535ae", 43 | "token": "support.type" 44 | }, 45 | { 46 | "foreground": "a535ae", 47 | "token": "support.class" 48 | }, 49 | { 50 | "foreground": "a535ae", 51 | "token": "support.variable" 52 | }, 53 | { 54 | "foreground": "ffffff", 55 | "background": "990000", 56 | "token": "invalid" 57 | }, 58 | { 59 | "foreground": "990000", 60 | "token": "constant.other.placeholder.py" 61 | } 62 | ], 63 | "colors": { 64 | "editor.foreground": "#000000", 65 | "editor.background": "#FFFFFF", 66 | "editor.selectionBackground": "#BAD6FD", 67 | "editor.lineHighlightBackground": "#00000012", 68 | "editorCursor.foreground": "#000000", 69 | "editorWhitespace.foreground": "#BFBFBF" 70 | } 71 | } -------------------------------------------------------------------------------- /public/themes/Slush and Poppies.json: -------------------------------------------------------------------------------- 1 | { 2 | "base": "vs", 3 | "inherit": true, 4 | "rules": [ 5 | { 6 | "foreground": "406040", 7 | "token": "comment" 8 | }, 9 | { 10 | "foreground": "c03030", 11 | "token": "string" 12 | }, 13 | { 14 | "foreground": "0080a0", 15 | "token": "constant.numeric" 16 | }, 17 | { 18 | "fontStyle": "underline", 19 | "token": "source.ocaml constant.numeric.floating-point" 20 | }, 21 | { 22 | "foreground": "800000", 23 | "token": "constant.character" 24 | }, 25 | { 26 | "foreground": "2060a0", 27 | "token": "keyword" 28 | }, 29 | { 30 | "foreground": "2060a0", 31 | "token": "keyword.operator" 32 | }, 33 | { 34 | "fontStyle": "underline", 35 | "token": "source.ocaml keyword.operator.symbol.prefix.floating-point" 36 | }, 37 | { 38 | "fontStyle": "underline", 39 | "token": "source.ocaml keyword.operator.symbol.infix.floating-point" 40 | }, 41 | { 42 | "foreground": "0080ff", 43 | "token": "entity.name.module" 44 | }, 45 | { 46 | "foreground": "0080ff", 47 | "token": "support.other.module" 48 | }, 49 | { 50 | "foreground": "a08000", 51 | "token": "storage.type" 52 | }, 53 | { 54 | "foreground": "008080", 55 | "token": "storage" 56 | }, 57 | { 58 | "foreground": "c08060", 59 | "token": "entity.name.class.variant" 60 | }, 61 | { 62 | "fontStyle": "bold", 63 | "token": "keyword.other.directive" 64 | }, 65 | { 66 | "foreground": "800000", 67 | "token": "entity.name.function" 68 | }, 69 | { 70 | "foreground": "800080", 71 | "token": "storage.type.user-defined" 72 | }, 73 | { 74 | "foreground": "8000c0", 75 | "token": "entity.name.type.class.type" 76 | } 77 | ], 78 | "colors": { 79 | "editor.foreground": "#000000", 80 | "editor.background": "#F1F1F1", 81 | "editor.selectionBackground": "#B0B0FF", 82 | "editor.lineHighlightBackground": "#00000026", 83 | "editorCursor.foreground": "#000000", 84 | "editorWhitespace.foreground": "#BFBFBF" 85 | } 86 | } -------------------------------------------------------------------------------- /public/themes/SpaceCadet.json: -------------------------------------------------------------------------------- 1 | { 2 | "base": "vs-dark", 3 | "inherit": true, 4 | "rules": [ 5 | { 6 | "foreground": "473c45", 7 | "token": "comment" 8 | }, 9 | { 10 | "foreground": "805978", 11 | "token": "string" 12 | }, 13 | { 14 | "foreground": "a8885a", 15 | "token": "constant" 16 | }, 17 | { 18 | "foreground": "596380", 19 | "token": "variable.parameter" 20 | }, 21 | { 22 | "foreground": "596380", 23 | "token": "variable.other" 24 | }, 25 | { 26 | "foreground": "728059", 27 | "token": "keyword - keyword.operator" 28 | }, 29 | { 30 | "foreground": "728059", 31 | "token": "keyword.operator.logical" 32 | }, 33 | { 34 | "foreground": "9ebf60", 35 | "token": "storage" 36 | }, 37 | { 38 | "foreground": "6078bf", 39 | "token": "entity" 40 | }, 41 | { 42 | "fontStyle": "italic", 43 | "token": "entity.other.inherited-class" 44 | }, 45 | { 46 | "foreground": "8a4b66", 47 | "token": "support" 48 | }, 49 | { 50 | "foreground": "893062", 51 | "token": "support.type.exception" 52 | }, 53 | { 54 | "background": "5f0047", 55 | "token": "invalid" 56 | }, 57 | { 58 | "background": "371d28", 59 | "token": "meta.function.section" 60 | } 61 | ], 62 | "colors": { 63 | "editor.foreground": "#DDE6CF", 64 | "editor.background": "#0D0D0D", 65 | "editor.selectionBackground": "#40002F", 66 | "editor.lineHighlightBackground": "#00000012", 67 | "editorCursor.foreground": "#7F005D", 68 | "editorWhitespace.foreground": "#BFBFBF" 69 | } 70 | } -------------------------------------------------------------------------------- /public/themes/Xcode_default.json: -------------------------------------------------------------------------------- 1 | { 2 | "base": "vs", 3 | "inherit": true, 4 | "rules": [ 5 | { 6 | "foreground": "008e00", 7 | "token": "comment" 8 | }, 9 | { 10 | "foreground": "7d4726", 11 | "token": "meta.preprocessor" 12 | }, 13 | { 14 | "foreground": "7d4726", 15 | "token": "keyword.control.import" 16 | }, 17 | { 18 | "foreground": "df0002", 19 | "token": "string" 20 | }, 21 | { 22 | "foreground": "3a00dc", 23 | "token": "constant.numeric" 24 | }, 25 | { 26 | "foreground": "c800a4", 27 | "token": "constant.language" 28 | }, 29 | { 30 | "foreground": "275a5e", 31 | "token": "constant.character" 32 | }, 33 | { 34 | "foreground": "275a5e", 35 | "token": "constant.other" 36 | }, 37 | { 38 | "foreground": "c800a4", 39 | "token": "variable.language" 40 | }, 41 | { 42 | "foreground": "c800a4", 43 | "token": "variable.other" 44 | }, 45 | { 46 | "foreground": "c800a4", 47 | "token": "keyword" 48 | }, 49 | { 50 | "foreground": "c900a4", 51 | "token": "storage" 52 | }, 53 | { 54 | "foreground": "438288", 55 | "token": "entity.name.class" 56 | }, 57 | { 58 | "foreground": "790ead", 59 | "token": "entity.name.tag" 60 | }, 61 | { 62 | "foreground": "450084", 63 | "token": "entity.other.attribute-name" 64 | }, 65 | { 66 | "foreground": "450084", 67 | "token": "support.function" 68 | }, 69 | { 70 | "foreground": "450084", 71 | "token": "support.constant" 72 | }, 73 | { 74 | "foreground": "790ead", 75 | "token": "support.type" 76 | }, 77 | { 78 | "foreground": "790ead", 79 | "token": "support.class" 80 | }, 81 | { 82 | "foreground": "790ead", 83 | "token": "support.other.variable" 84 | } 85 | ], 86 | "colors": { 87 | "editor.foreground": "#000000", 88 | "editor.background": "#FFFFFF", 89 | "editor.selectionBackground": "#B5D5FF", 90 | "editor.lineHighlightBackground": "#00000012", 91 | "editorCursor.foreground": "#000000", 92 | "editorWhitespace.foreground": "#BFBFBF" 93 | } 94 | } -------------------------------------------------------------------------------- /public/themes/Zenburnesque.json: -------------------------------------------------------------------------------- 1 | { 2 | "base": "vs-dark", 3 | "inherit": true, 4 | "rules": [ 5 | { 6 | "foreground": "709070", 7 | "fontStyle": "italic", 8 | "token": "comment" 9 | }, 10 | { 11 | "fontStyle": "bold", 12 | "token": "keyword.other.directive" 13 | }, 14 | { 15 | "fontStyle": "underline", 16 | "token": "keyword.other.directive.line-number" 17 | }, 18 | { 19 | "foreground": "ff8080", 20 | "token": "constant.character" 21 | }, 22 | { 23 | "foreground": "ff2020", 24 | "token": "string" 25 | }, 26 | { 27 | "foreground": "22c0ff", 28 | "token": "constant.numeric" 29 | }, 30 | { 31 | "fontStyle": "underline", 32 | "token": "constant.numeric.floating-point" 33 | }, 34 | { 35 | "foreground": "ffffa0", 36 | "token": "keyword" 37 | }, 38 | { 39 | "foreground": "ff8000", 40 | "fontStyle": "bold", 41 | "token": "entity.name.module" 42 | }, 43 | { 44 | "foreground": "ff8000", 45 | "fontStyle": "bold", 46 | "token": "support.other.module" 47 | }, 48 | { 49 | "foreground": "ffffa0", 50 | "token": "keyword.operator" 51 | }, 52 | { 53 | "fontStyle": "underline", 54 | "token": "source.ocaml keyword.operator.symbol.infix.floating-point" 55 | }, 56 | { 57 | "fontStyle": "underline", 58 | "token": "source.ocaml keyword.operator.symbol.prefix.floating-point" 59 | }, 60 | { 61 | "foreground": "6080ff", 62 | "token": "storage.type" 63 | }, 64 | { 65 | "foreground": "4080a0", 66 | "token": "entity.name.class.variant" 67 | }, 68 | { 69 | "foreground": "f09040", 70 | "token": "entity.name.type" 71 | }, 72 | { 73 | "foreground": "ffcc66", 74 | "fontStyle": "bold", 75 | "token": "entity.name.function" 76 | }, 77 | { 78 | "foreground": "ffe000", 79 | "token": "storage.type.user-defined" 80 | }, 81 | { 82 | "foreground": "f4a020", 83 | "token": "entity.name.type.class.type" 84 | } 85 | ], 86 | "colors": { 87 | "editor.foreground": "#DEDEDE", 88 | "editor.background": "#404040", 89 | "editor.selectionBackground": "#A0A0C0", 90 | "editor.lineHighlightBackground": "#A0804026", 91 | "editorCursor.foreground": "#FFFF66", 92 | "editorWhitespace.foreground": "#A8A8A8" 93 | } 94 | } -------------------------------------------------------------------------------- /public/themes/themelist.json: -------------------------------------------------------------------------------- 1 | { 2 | "active4d": "Active4D", 3 | "all-hallows-eve": "All Hallows Eve", 4 | "amy": "Amy", 5 | "birds-of-paradise": "Birds of Paradise", 6 | "blackboard": "Blackboard", 7 | "brilliance-black": "Brilliance Black", 8 | "brilliance-dull": "Brilliance Dull", 9 | "chrome-devtools": "Chrome DevTools", 10 | "clouds-midnight": "Clouds Midnight", 11 | "clouds": "Clouds", 12 | "cobalt": "Cobalt", 13 | "dawn": "Dawn", 14 | "dreamweaver": "Dreamweaver", 15 | "eiffel": "Eiffel", 16 | "espresso-libre": "Espresso Libre", 17 | "github": "GitHub", 18 | "idle": "IDLE", 19 | "katzenmilch": "Katzenmilch", 20 | "kuroir-theme": "Kuroir Theme", 21 | "lazy": "LAZY", 22 | "magicwb--amiga-": "MagicWB (Amiga)", 23 | "merbivore-soft": "Merbivore Soft", 24 | "merbivore": "Merbivore", 25 | "monokai-bright": "Monokai Bright", 26 | "monokai": "Monokai", 27 | "night-owl": "Night Owl", 28 | "oceanic-next": "Oceanic Next", 29 | "pastels-on-dark": "Pastels on Dark", 30 | "slush-and-poppies": "Slush and Poppies", 31 | "solarized-dark": "Solarized-dark", 32 | "solarized-light": "Solarized-light", 33 | "spacecadet": "SpaceCadet", 34 | "sunburst": "Sunburst", 35 | "textmate--mac-classic-": "Textmate (Mac Classic)", 36 | "tomorrow-night-blue": "Tomorrow-Night-Blue", 37 | "tomorrow-night-bright": "Tomorrow-Night-Bright", 38 | "tomorrow-night-eighties": "Tomorrow-Night-Eighties", 39 | "tomorrow-night": "Tomorrow-Night", 40 | "tomorrow": "Tomorrow", 41 | "twilight": "Twilight", 42 | "upstream-sunburst": "Upstream Sunburst", 43 | "vibrant-ink": "Vibrant Ink", 44 | "xcode-default": "Xcode_default", 45 | "zenburnesque": "Zenburnesque", 46 | "iplastic": "iPlastic", 47 | "idlefingers": "idleFingers", 48 | "krtheme": "krTheme", 49 | "monoindustrial": "monoindustrial" 50 | } -------------------------------------------------------------------------------- /public/workers/compiler.js: -------------------------------------------------------------------------------- 1 | !function(){"use strict";let e;self.window=self;const s=new Promise(s=>{e=s});self.addEventListener("message",async c=>{switch(c.data.type){case"init":importScripts(`${c.data.svelteUrl}/compiler.js`),e();break;case"compile":await s,postMessage(function({id:e,source:s,options:c}){try{const{js:n,css:i}=svelte.compile(s,Object.assign({},t,c));return{id:e,result:{js:n.code,css:i.code||"/* Add a 94 | -------------------------------------------------------------------------------- /src/components/JsonEditor.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 26 | 27 |
-------------------------------------------------------------------------------- /src/components/Login.svelte: -------------------------------------------------------------------------------- 1 | 14 | 15 | {#if user} 16 | auth.signOut() } src={ user.photoURL } width="40" alt="user avatar"> 17 | {:else} 18 | 21 | {/if} 22 | -------------------------------------------------------------------------------- /src/components/MonacoEditor.svelte: -------------------------------------------------------------------------------- 1 | {name} 2 |
3 | 4 | 27 | 37 | 38 | 39 | 40 | 53 | -------------------------------------------------------------------------------- /src/components/Tabs.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 34 |
35 | {#each tabs as tab, i} 36 | 40 | {/each} 41 |
42 |
43 | {#each tabs as tab, i} 44 | 47 | {/each} 48 |
49 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'; 2 | 3 | monaco.languages.typescript.typescriptDefaults.setCompilerOptions({ 4 | allowJs: true, 5 | esModuleInterop: true, 6 | }) 7 | 8 | import('monaco-themes/themes/Oceanic Next.json') 9 | .then(data => { 10 | monaco.editor.defineTheme('oceanic-next', data); 11 | monaco.editor.setTheme('oceanic-next') 12 | }) 13 | 14 | monaco.editor.create(document.getElementById('editor'), { 15 | language: 'html', 16 | theme: 'oceanic-next', 17 | autoClosingBrackets: true, 18 | autoClosingQuotes: true, 19 | autoIndent: true, 20 | autoSurround: true, 21 | automaticLayout: true, 22 | lineNumbersMinChars: 2, 23 | minimap: { 24 | enabled: false 25 | } 26 | }); 27 | 28 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | const app = new App({ 3 | target: document.body, 4 | hydrateable: true, 5 | props: { 6 | previewType: "live" 7 | } 8 | }); 9 | 10 | window.app = app; 11 | 12 | export default app; -------------------------------------------------------------------------------- /src/monaco-themes.js: -------------------------------------------------------------------------------- 1 | export const themes = [ 2 | { id: "active4d", name: "Active4D" }, 3 | { id: "all-hallows-eve", name: "All Hallows Eve" }, 4 | { id: "amy", name: "Amy" }, 5 | { id: "birds-of-paradise", name: "Birds of Paradise" }, 6 | { id: "blackboard", name: "Blackboard" }, 7 | { id: "brilliance-black", name: "Brilliance Black" }, 8 | { id: "brilliance-dull", name: "Brilliance Dull" }, 9 | { id: "chrome-devtools", name: "Chrome DevTools" }, 10 | { id: "clouds-midnight", name: "Clouds Midnight" }, 11 | { id: "clouds", name: "Clouds" }, 12 | { id: "cobalt", name: "Cobalt" }, 13 | { id: "dawn", name: "Dawn" }, 14 | { id: "dreamweaver", name: "Dreamweaver" }, 15 | { id: "eiffel", name: "Eiffel" }, 16 | { id: "espresso-libre", name: "Espresso Libre" }, 17 | { id: "github", name: "GitHub" }, 18 | { id: "idle", name: "IDLE" }, 19 | { id: "katzenmilch", name: "Katzenmilch" }, 20 | { id: "kuroir-theme", name: "Kuroir Theme" }, 21 | { id: "lazy", name: "LAZY" }, 22 | { id: "magicwb--amiga-", name: "MagicWB (Amiga)" }, 23 | { id: "merbivore-soft", name: "Merbivore Soft" }, 24 | { id: "merbivore", name: "Merbivore" }, 25 | { id: "monokai-bright", name: "Monokai Bright" }, 26 | { id: "monokai", name: "Monokai" }, 27 | { id: "night-owl", name: "Night Owl" }, 28 | { id: "oceanic-next", name: "Oceanic Next" }, 29 | { id: "pastels-on-dark", name: "Pastels on Dark" }, 30 | { id: "slush-and-poppies", name: "Slush and Poppies" }, 31 | { id: "solarized-dark", name: "Solarized-dark" }, 32 | { id: "solarized-light", name: "Solarized-light" }, 33 | { id: "spacecadet", name: "SpaceCadet" }, 34 | { id: "sunburst", name: "Sunburst" }, 35 | { id: "textmate--mac-classic-", name: "Textmate (Mac Classic)" }, 36 | { id: "tomorrow-night-blue", name: "Tomorrow-Night-Blue" }, 37 | { id: "tomorrow-night-bright", name: "Tomorrow-Night-Bright" }, 38 | { id: "tomorrow-night-eighties", name: "Tomorrow-Night-Eighties" }, 39 | { id: "tomorrow-night", name: "Tomorrow-Night" }, 40 | { id: "tomorrow", name: "Tomorrow" }, 41 | { id: "twilight", name: "Twilight" }, 42 | { id: "upstream-sunburst", name: "Upstream Sunburst" }, 43 | { id: "vibrant-ink", name: "Vibrant Ink" }, 44 | { id: "xcode-default", name: "Xcode_default" }, 45 | { id: "zenburnesque", name: "Zenburnesque" }, 46 | { id: "iplastic", name: "iPlastic" }, 47 | { id: "idlefingers", name: "idleFingers" }, 48 | { id: "krtheme", name: "krTheme" }, 49 | { id: "monoindustrial", name: "monoindustrial" } 50 | ]; 51 | -------------------------------------------------------------------------------- /src/pages/Explore.svelte: -------------------------------------------------------------------------------- 1 |

Explore

-------------------------------------------------------------------------------- /src/pages/Playground.svelte: -------------------------------------------------------------------------------- 1 |

Playground

-------------------------------------------------------------------------------- /src/pages/Profile.svelte: -------------------------------------------------------------------------------- 1 |

Profile

-------------------------------------------------------------------------------- /src/pages/Projects.svelte: -------------------------------------------------------------------------------- 1 |

Projects

-------------------------------------------------------------------------------- /src/pages/Settings.svelte: -------------------------------------------------------------------------------- 1 |

Settings

-------------------------------------------------------------------------------- /src/pages/Theme.svelte: -------------------------------------------------------------------------------- 1 |

Theme

-------------------------------------------------------------------------------- /src/stores.js: -------------------------------------------------------------------------------- 1 | import { writable } from 'svelte/store'; 2 | 3 | export const user = writeable({}) -------------------------------------------------------------------------------- /src/utils/compat.js: -------------------------------------------------------------------------------- 1 | export const isMac = typeof navigator !== 'undefined' && navigator.platform === 'MacIntel'; 2 | -------------------------------------------------------------------------------- /src/utils/db.js: -------------------------------------------------------------------------------- 1 | import { Pool } from 'pg'; 2 | 3 | export const DB = new Pool({ 4 | connectionString: process.env.DATABASE_URL 5 | }); 6 | 7 | export function query(text, values=[]) { 8 | return DB.query(text, values).then(r => r.rows); 9 | } 10 | 11 | export function find(text, values=[]) { 12 | return query(text, values).then(arr => arr[0]); 13 | } 14 | -------------------------------------------------------------------------------- /src/utils/events.js: -------------------------------------------------------------------------------- 1 | export function keyEvent(code) { 2 | return function (node, callback) { 3 | node.addEventListener('keydown', handleKeydown); 4 | 5 | function handleKeydown(event) { 6 | if (event.keyCode === code) { 7 | callback.call(this, event); 8 | } 9 | } 10 | 11 | return { 12 | destroy() { 13 | node.removeEventListener('keydown', handleKeydown); 14 | } 15 | }; 16 | }; 17 | } 18 | 19 | export const enter = keyEvent(13); 20 | -------------------------------------------------------------------------------- /src/utils/examples.js: -------------------------------------------------------------------------------- 1 | export function process_example(files) { 2 | return files 3 | .map(file => { 4 | const [name, type] = file.name.split('.'); 5 | return { name, type, source: file.source }; 6 | }) 7 | .sort((a, b) => { 8 | if (a.name === 'App' && a.type === 'svelte') return -1; 9 | if (b.name === 'App' && b.type === 'svelte') return 1; 10 | 11 | if (a.type === b.type) return a.name < b.name ? -1 : 1; 12 | 13 | if (a.type === 'svelte') return -1; 14 | if (b.type === 'svelte') return 1; 15 | }); 16 | } -------------------------------------------------------------------------------- /src/utils/slug.js: -------------------------------------------------------------------------------- 1 | import slugify from '@sindresorhus/slugify'; 2 | import {SLUG_SEPARATOR} from '../../config'; 3 | 4 | /* url-safe processor */ 5 | 6 | export const urlsafeSlugProcessor = string => 7 | slugify(string, { 8 | customReplacements: [ // runs before any other transformations 9 | ['$', 'DOLLAR'], // `$destroy` & co 10 | ['-', 'DASH'], // conflicts with `separator` 11 | ], 12 | separator: SLUG_SEPARATOR, 13 | decamelize: false, 14 | lowercase: false 15 | }) 16 | .replace(/DOLLAR/g, '$') 17 | .replace(/DASH/g, '-'); 18 | 19 | /* unicode-preserver processor */ 20 | 21 | const alphaNumRegex = /[a-zA-Z0-9]/; 22 | const unicodeRegex = /\p{Letter}/u; 23 | const isNonAlphaNumUnicode = 24 | string => !alphaNumRegex.test(string) && unicodeRegex.test(string); 25 | 26 | export const unicodeSafeProcessor = string => 27 | string.split('') 28 | .reduce((accum, char, index, array) => { 29 | const type = isNonAlphaNumUnicode(char) ? 'pass' : 'process'; 30 | 31 | if (index === 0) { 32 | accum.current = {type, string: char}; 33 | } else if (type === accum.current.type) { 34 | accum.current.string += char; 35 | } else { 36 | accum.chunks.push(accum.current); 37 | accum.current = {type, string: char}; 38 | } 39 | 40 | if (index === array.length - 1) { 41 | accum.chunks.push(accum.current); 42 | } 43 | 44 | return accum; 45 | }, {chunks: [], current: {type: '', string: ''}}) 46 | .chunks 47 | .reduce((accum, chunk) => { 48 | const processed = chunk.type === 'process' 49 | ? urlsafeSlugProcessor(chunk.string) 50 | : chunk.string; 51 | 52 | processed.length > 0 && accum.push(processed); 53 | 54 | return accum; 55 | }, []) 56 | .join(SLUG_SEPARATOR); 57 | 58 | /* processor */ 59 | 60 | export const makeSlugProcessor = (preserveUnicode = false) => preserveUnicode 61 | ? unicodeSafeProcessor 62 | : urlsafeSlugProcessor; 63 | 64 | /* session processor */ 65 | 66 | export const makeSessionSlugProcessor = (preserveUnicode = false) => { 67 | const processor = makeSlugProcessor(preserveUnicode); 68 | const seen = new Set(); 69 | 70 | return string => { 71 | const slug = processor(string); 72 | 73 | if (seen.has(slug)) throw new Error(`Duplicate slug ${slug}`); 74 | seen.add(slug); 75 | 76 | return slug; 77 | }; 78 | }; 79 | -------------------------------------------------------------------------------- /src/views/Footer.svelte: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |
6 | 7 | -------------------------------------------------------------------------------- /src/views/Navbar.svelte: -------------------------------------------------------------------------------- 1 |
2 |
3 | svelte logo 4 |
5 |

svelte-repl-monaco

6 |
7 | 13 |
14 |
15 | 16 | 20 | -------------------------------------------------------------------------------- /src/views/Sidebar.svelte: -------------------------------------------------------------------------------- 1 | 11 | 38 | 39 | 43 | -------------------------------------------------------------------------------- /storage.rules: -------------------------------------------------------------------------------- 1 | service firebase.storage { 2 | match /b/{bucket}/o { 3 | match /{allPaths=**} { 4 | allow read, write: if request.auth!=null; 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 2 | const MonacoEditorPlugin = require('monaco-editor-webpack-plugin'); 3 | const mode = process.env.NODE_ENV || 'development'; 4 | const prod = mode === 'production'; 5 | 6 | module.exports = { 7 | mode: 'development', 8 | entry: { 9 | app: './src/main.js', 10 | monaco: './src/index.js' 11 | }, 12 | resolve: { 13 | extensions: ['.mjs', '.js', '.svelte'] 14 | }, 15 | output: { 16 | globalObject: 'self', 17 | filename: '[name].bundle.js', 18 | chunkFilename: '[name].[id].js', 19 | path: __dirname + '/public', 20 | }, 21 | module: { 22 | rules: [ 23 | { 24 | test: /\.css$/, 25 | use: [ 26 | prod ? MiniCssExtractPlugin.loader : 'style-loader', 27 | 'css-loader' 28 | ] 29 | }, 30 | { 31 | test: /\.svelte$/, 32 | exclude: /node_modules/, 33 | use: { 34 | loader: 'svelte-loader', 35 | options: { 36 | emitCss: true, 37 | hotReload: true 38 | } 39 | } 40 | }, 41 | ] 42 | }, 43 | mode, 44 | plugins: [ 45 | new MonacoEditorPlugin(), 46 | new MiniCssExtractPlugin({ 47 | filename: '[name].css' 48 | }) 49 | ], 50 | devtool: prod ? false: 'source-map' 51 | }; 52 | --------------------------------------------------------------------------------