The Svelte Quickstar

├── README.md ├── .babelrc ├── src ├── index.js └── components │ └── App.svelte ├── public └── index.html ├── dist ├── index.html └── bundle.js ├── webpack.config.js ├── LICENSE ├── .gitignore └── package.json /README.md: -------------------------------------------------------------------------------- 1 | # svelte-quickstart 2 | The Svelte Quickstart 3 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env" 4 | ], 5 | } -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import App from './components/App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.querySelector('main'), 5 | data: { 6 | quotes: [] 7 | }, 8 | }); -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | The Svelte Quickstar 7 | 8 | 9 |

10 | 11 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | The Svelte Quickstar 7 | 8 | 9 |

10 | 11 | -------------------------------------------------------------------------------- /src/components/App.svelte: -------------------------------------------------------------------------------- 1 | 14 | 15 | 28 | 29 |

30 | {#each characters as character} 31 |

35 | {:else} 36 |

37 | {/each} 38 |

39 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | 4 | module.exports = { 5 | entry: './src/index.js', 6 | output: { 7 | path: path.resolve(__dirname, 'dist'), 8 | filename: 'bundle.js' 9 | }, 10 | resolve: { 11 | extensions: ['*', '.mjs', '.js', '.stelve'], 12 | }, 13 | module: { 14 | rules: [ 15 | { 16 | test: /\.js?$/, 17 | exclude: /node_modules/, 18 | use: { 19 | loader: 'babel-loader', 20 | }, 21 | }, 22 | { 23 | test: /\.svelte$/, 24 | exclude: /node_modules/, 25 | use: { 26 | loader: 'svelte-loader' 27 | } 28 | }, 29 | ] 30 | }, 31 | plugins: [ 32 | new HtmlWebpackPlugin({ 33 | inject: true, 34 | template: './public/index.html', 35 | filename: './index.html', 36 | }) 37 | ] 38 | }; -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Oscar Barajas Tavares 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | .DS_Store 60 | 61 | # next.js build output 62 | .next -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-quickstart", 3 | "version": "1.0.0", 4 | "description": "The Svelte Quickstart", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "build": "webpack --mode production", 9 | "start": "webpack-dev-server --open --mode development" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/gndx/svelte-quickstart.git" 14 | }, 15 | "keywords": [ 16 | "svelte", 17 | "sveltejs", 18 | "javascript" 19 | ], 20 | "author": "Oscar Barajas ", 21 | "license": "MIT", 22 | "bugs": { 23 | "url": "https://github.com/gndx/svelte-quickstart/issues" 24 | }, 25 | "homepage": "https://github.com/gndx/svelte-quickstart#readme", 26 | "dependencies": { 27 | "svelte": "^3.20.1" 28 | }, 29 | "devDependencies": { 30 | "@babel/core": "^7.9.0", 31 | "@babel/polyfill": "^7.8.7", 32 | "@babel/preset-env": "^7.9.0", 33 | "babel-loader": "^8.1.0", 34 | "html-webpack-plugin": "^3.2.0", 35 | "svelte-loader": "^2.13.6", 36 | "webpack": "^4.42.1", 37 | "webpack-cli": "^3.3.11", 38 | "webpack-dev-server": "^3.10.3" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /dist/bundle.js: -------------------------------------------------------------------------------- 1 | !function(t){var e={};function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(r,o,function(e){return t[e]}.bind(null,o));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=0)}([function(t,e,n){"use strict";function r(){}n.r(e);function o(t){return t()}function c(){return Object.create(null)}function a(t){t.forEach(o)}function l(t){return"function"==typeof t}function u(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}new Set;function i(t,e){t.appendChild(e)}function s(t,e,n){t.insertBefore(e,n||null)}function f(t){t.parentNode.removeChild(t)}function d(t){return document.createElement(t)}function h(t){return document.createTextNode(t)}function p(){return h(" ")}function m(t,e,n){null==n?t.removeAttribute(e):t.setAttribute(e,n)}let g;function $(t){g=t}function y(){if(!g)throw new Error("Function called outside component initialization");return g}const b=[],v=[],x=[],_=[],w=Promise.resolve();let j=!1;function O(){j||(j=!0,w.then(k))}function S(t){x.push(t)}function k(){const t=new Set;do{for(;b.length;){const t=b.shift();$(t),C(t.$$)}for(;v.length;)v.pop()();for(let e=0;e{h.ctx&&i(h.ctx[e],h.ctx[e]=n)&&(h.bound[e]&&h.bound[e](n),p&&function(t,e){t.$$.dirty||(b.push(t),O(),t.$$.dirty=c()),t.$$.dirty[e]=!0}(t,e))}):d,h.update(),p=!0,a(h.before_update),h.fragment=u(h.ctx),e.target&&(e.hydrate?h.fragment.l((m=e.target,Array.from(m.childNodes))):h.fragment.c(),e.intro&&M(t.$$.fragment),function(t,e,n){const{fragment:r,on_mount:c,on_destroy:u,after_update:i}=t.$$;r.m(e,n),S(()=>{const e=c.map(o).filter(l);u?u.push(...e):a(e),t.$$.on_mount=[]}),i.forEach(S)}(t,e.target,e.anchor),k()),$(f)}"undefined"!=typeof HTMLElement&&(P=class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){for(const t in this.$$.slotted)this.appendChild(this.$$.slotted[t])}attributeChangedCallback(t,e,n){this[t]=n}$destroy(){T(this,1),this.$destroy=r}$on(t,e){const n=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return n.push(e),()=>{const t=n.indexOf(e);-1!==t&&n.splice(t,1)}}$set(){}});class A{$destroy(){T(this,1),this.$destroy=r}$on(t,e){const n=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return n.push(e),()=>{const t=n.indexOf(e);-1!==t&&n.splice(t,1)}}$set(){}}function N(t,e,n){const r=Object.create(t);return r.character=e[n],r}function B(t){var e;return{c(){(e=d("p")).textContent="loading..."},m(t,n){s(t,e,n)},d(t){t&&f(e)}}}function H(t){var e,n,r,o,c,a,l,u,g=t.character.name;return{c(){e=d("figure"),n=d("img"),c=p(),a=d("figcaption"),l=h(g),u=p(),m(n,"src",r=t.character.image),m(n,"alt",o=t.character.name),m(n,"class","svelte-1493xl6"),m(e,"class","svelte-1493xl6")},m(t,r){s(t,e,r),i(e,n),i(e,c),i(e,a),i(a,l),i(e,u)},p(t,e){var c,a;t.characters&&r!==(r=e.character.image)&&m(n,"src",r),t.characters&&o!==(o=e.character.name)&&m(n,"alt",o),t.characters&&g!==(g=e.character.name)&&(a=""+(a=g),(c=l).data!==a&&(c.data=a))},d(t){t&&f(e)}}}function L(t){for(var e,n=t.characters,o=[],c=0;c{const t=await fetch(z);r=await t.json(),n("characters",o=r.results)},y().$$.on_mount.push(c),{characters:o}}new class extends A{constructor(t){var e;super(),document.getElementById("svelte-1493xl6-style")||((e=d("style")).id="svelte-1493xl6-style",e.textContent=".characters.svelte-1493xl6{width:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-gap:8px}figure.svelte-1493xl6,img.svelte-1493xl6{width:100%;margin:0}",i(document.head,e)),q(this,t,F,L,u,[])}}({target:document.querySelector("main"),data:{quotes:[]}})}]); --------------------------------------------------------------------------------