├── .editorconfig ├── .gitignore ├── .prettierignore ├── .prettierrc ├── .vscode ├── extensions.json └── settings.json ├── LICENSE.md ├── README.md ├── demo ├── index.html ├── index.js ├── package-lock.json ├── package.json ├── scheduler1 │ ├── index.html │ └── index.js ├── scheduler2 │ ├── index.html │ └── index.js ├── style.css └── worker │ ├── index.html │ ├── index.js │ └── worker.js ├── package-lock.json ├── package.json └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | # top-most EditorConfig file 2 | root = true 3 | 4 | # all files 5 | [*] 6 | end_of_line = lf 7 | insert_final_newline = true 8 | indent_style = space 9 | indent_size = 2 10 | charset = utf-8 11 | trim_trailing_whitespace = true 12 | max_line_length = 80 13 | 14 | [*.{js,ts}] 15 | quote_type = single 16 | curly_bracket_next_line = false 17 | spaces_around_brackets = inside 18 | indent_brace_style = BSD KNF 19 | 20 | # HTML 21 | [*.html] 22 | quote_type = double 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.log 2 | .idea 3 | .DS_Store 4 | .cache 5 | node_modules 6 | 7 | coverage 8 | lib 9 | esm5 10 | lib-esm 11 | esm2015 12 | lib-fesm 13 | fesm 14 | umd 15 | bundles 16 | typings 17 | types 18 | docs 19 | dist 20 | 21 | ## this is generated by `npm pack` 22 | *.tgz 23 | package 24 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "arrowParens": "always", 4 | "semi": false, 5 | "bracketSpacing": true, 6 | "trailingComma": "es5", 7 | "printWidth": 80 8 | } 9 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // See http://go.microsoft.com/fwlink/?LinkId=827846 3 | // for the documentation about the extensions.json format 4 | "recommendations": [ 5 | // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp 6 | "esbenp.prettier-vscode", 7 | "codezombiech.gitignore", 8 | "EditorConfig.EditorConfig" 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | // Place your settings in this file to overwrite default and user settings. 2 | { 3 | "editor.formatOnSave": true, 4 | "typescript.format.enable": false, 5 | "javascript.format.enable": false, 6 | "typescript.implementationsCodeLens.enabled": true, 7 | "typescript.referencesCodeLens.enabled": true, 8 | "javascript.referencesCodeLens.enabled": true, 9 | "editor.rulers": [ 10 | 80,100 11 | ], 12 | "typescript.tsdk": "node_modules/typescript/lib", 13 | "files.associations": { 14 | "tslint*.json": "jsonc" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Jaeseok Kang 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ui-block-demo 2 | 3 | A demo application about UI blocking by long-running-tasks 4 | 5 | --- 6 | 7 | ## Installation 8 | 9 | ```sh 10 | yarn 11 | ``` 12 | 13 | ## Getting started 14 | 15 | ```sh 16 | yarn serve 17 | ``` 18 | 19 | ## License 20 | 21 | [MIT](./LICENSE.md) as always 22 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 |
8 |
9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /demo/index.js: -------------------------------------------------------------------------------- 1 | const colorClasses = ['primary', 'secondary', 'tertiary', 'quaternary'] 2 | const containerEl = document.querySelector('.container') 3 | 4 | const bindEvents = () => { 5 | document.querySelector('.my-input').addEventListener('input', async (e) => { 6 | const textValue = e.target.value 7 | const length = textValue ? textValue.length : 0 8 | let result = '' 9 | 10 | if (!length) { 11 | containerEl.innerHTML = result 12 | return 13 | } 14 | 15 | const n = Math.min(Math.pow(length, 2), 100) 16 | const height = containerEl.clientHeight / n 17 | const width = containerEl.clientWidth / n 18 | const counts = n * n 19 | 20 | for (let i = 0; i < counts; i++) { 21 | const color = 22 | colorClasses[Math.floor(Math.random() * colorClasses.length)] 23 | result += `
` 24 | } 25 | 26 | containerEl.innerHTML = result 27 | }) 28 | } 29 | 30 | bindEvents() 31 | -------------------------------------------------------------------------------- /demo/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "requires": true, 3 | "lockfileVersion": 1, 4 | "dependencies": { 5 | "@jaeseokk/chunk-scheduler": { 6 | "version": "0.0.1", 7 | "resolved": "https://registry.npmjs.org/@jaeseokk/chunk-scheduler/-/chunk-scheduler-0.0.1.tgz", 8 | "integrity": "sha512-qLTUwcIIUJuu1uYfrG5Nv30lzxFudxfja2I5zvrTruq8hZhOfMJ5OELmdlaTMvXeUdJfhU04fJ/YoDwizj3Rmw==" 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "@jaeseokk/chunk-scheduler": "0.0.1" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /demo/scheduler1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 |
8 |
9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /demo/scheduler1/index.js: -------------------------------------------------------------------------------- 1 | import createScheduler from '../node_modules/@jaeseokk/chunk-scheduler/dist/index.js' 2 | 3 | const CHUNK_UNIT = 300 4 | const colorClasses = ['primary', 'secondary', 'tertiary', 'quaternary'] 5 | const containerEl = document.querySelector('.container') 6 | 7 | function* chunkGenerator(length) { 8 | let result = '' 9 | 10 | if (!length) { 11 | return result 12 | } 13 | 14 | const n = Math.min(Math.pow(length, 2), 100) 15 | const height = containerEl.clientHeight / n 16 | const width = containerEl.clientWidth / n 17 | const counts = n * n 18 | const useChunk = CHUNK_UNIT > counts 19 | const chunkCounts = useChunk ? 1 : counts / CHUNK_UNIT 20 | const unitCounts = useChunk ? counts : CHUNK_UNIT 21 | 22 | for (let i = 0; i < chunkCounts; i++) { 23 | for (let j = 0; j < unitCounts; j++) { 24 | const color = 25 | colorClasses[Math.floor(Math.random() * colorClasses.length)] 26 | result += `
` 27 | } 28 | 29 | yield 30 | } 31 | 32 | return result 33 | } 34 | 35 | const scheduler = createScheduler() 36 | 37 | const bindEvents = () => { 38 | document.querySelector('.my-input').addEventListener('input', async (e) => { 39 | const textValue = e.target.value 40 | const length = textValue ? textValue.length : 0 41 | const result = await scheduler.runChunks(chunkGenerator(length)) 42 | 43 | containerEl.innerHTML = result 44 | }) 45 | } 46 | 47 | bindEvents() 48 | -------------------------------------------------------------------------------- /demo/scheduler2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 |
8 |
9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /demo/scheduler2/index.js: -------------------------------------------------------------------------------- 1 | import createScheduler from '../node_modules/@jaeseokk/chunk-scheduler/dist/index.js' 2 | 3 | const CHUNK_UNIT = 300 4 | const colorClasses = ['primary', 'secondary', 'tertiary', 'quaternary'] 5 | const containerEl = document.querySelector('.container') 6 | 7 | function* chunkGenerator(length) { 8 | let result = '' 9 | 10 | if (!length) { 11 | return result 12 | } 13 | 14 | const n = Math.min(Math.pow(length, 2), 100) 15 | const height = containerEl.clientHeight / n 16 | const width = containerEl.clientWidth / n 17 | const counts = n * n 18 | const useChunk = CHUNK_UNIT > counts 19 | const chunkCounts = useChunk ? 1 : counts / CHUNK_UNIT 20 | const unitCounts = useChunk ? counts : CHUNK_UNIT 21 | 22 | for (let i = 0; i < chunkCounts; i++) { 23 | for (let j = 0; j < unitCounts; j++) { 24 | const color = 25 | colorClasses[Math.floor(Math.random() * colorClasses.length)] 26 | result += `
` 27 | } 28 | 29 | yield 30 | } 31 | 32 | return result 33 | } 34 | 35 | const scheduler = createScheduler() 36 | 37 | const bindEvents = () => { 38 | document.querySelector('.my-input').addEventListener('input', async (e) => { 39 | if (scheduler.isRunning()) { 40 | scheduler.cancel() 41 | } 42 | 43 | const textValue = e.target.value 44 | const length = textValue ? textValue.length : 0 45 | const result = await scheduler.runChunks(chunkGenerator(length)) 46 | 47 | containerEl.innerHTML = result 48 | }) 49 | } 50 | 51 | bindEvents() 52 | -------------------------------------------------------------------------------- /demo/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --progress-height: 40px; 3 | --progress-width: 300px; 4 | --progress-border-size: 15px; 5 | --progress-outer-height: calc( 6 | var(--progress-height) + var(--progress-border-size) * 2 7 | ); 8 | --progress-outer-width: calc( 9 | var(--progress-width) + var(--progress-border-size) * 2 10 | ); 11 | } 12 | 13 | html, 14 | body, 15 | .container { 16 | height: 100%; 17 | width: 100%; 18 | margin: 0; 19 | padding: 0; 20 | } 21 | 22 | .container { 23 | overflow: hidden; 24 | } 25 | 26 | .dot { 27 | height: 25px; 28 | width: 25px; 29 | background-color: gray; 30 | float: left; 31 | } 32 | 33 | .dot.primary { 34 | background-color: #ff7c61; 35 | } 36 | 37 | .dot.secondary { 38 | background-color: #1affb0; 39 | } 40 | 41 | .dot.tertiary { 42 | background-color: #ffd336; 43 | } 44 | 45 | .dot.quaternary { 46 | background-color: #ffffff; 47 | } 48 | 49 | .my-input { 50 | position: fixed; 51 | height: 40px; 52 | width: 300px; 53 | top: 50%; 54 | left: 50%; 55 | transform: translate(-50%, -50%); 56 | } 57 | 58 | .my-input input { 59 | font-size: 30px; 60 | height: 100%; 61 | width: 100%; 62 | box-sizing: border-box; 63 | } 64 | 65 | .progress { 66 | position: fixed; 67 | top: 50%; 68 | left: 50%; 69 | transform: translate(-50%, -50%); 70 | height: calc(var(--progress-outer-height)); 71 | width: calc(var(--progress-outer-width)); 72 | background: linear-gradient(to right, #2196f3 99.99%, transparent), 73 | linear-gradient(to bottom, #2196f3 99.99%, transparent), 74 | linear-gradient(to right, #2196f3 99.99%, transparent), 75 | linear-gradient(to bottom, #2196f3 99.99%, transparent); 76 | background-size: 100% var(--progress-border-size), 77 | var(--progress-border-size) 100%, 100% var(--progress-border-size), 78 | var(--progress-border-size) 100%; 79 | background-repeat: no-repeat; 80 | animation: progress 3s linear infinite; 81 | background-position: calc(0px - var(--progress-outer-width)) 0px, 82 | calc(var(--progress-outer-width) - var(--progress-border-size)) 83 | calc(0px - var(--progress-outer-height)), 84 | var(--progress-outer-width) 85 | calc(var(--progress-outer-height) - var(--progress-border-size)), 86 | 0px var(--progress-outer-height); 87 | } 88 | 89 | @keyframes progress { 90 | 0% { 91 | background-position: calc(0px - var(--progress-outer-width)) 0px, 92 | calc(var(--progress-outer-width) - var(--progress-border-size)) 93 | calc(0px - var(--progress-outer-height)), 94 | var(--progress-outer-width) 95 | calc(var(--progress-outer-height) - var(--progress-border-size)), 96 | 0px var(--progress-outer-height); 97 | } 98 | 38% { 99 | background-position: 0px 0px, 100 | calc(var(--progress-outer-width) - var(--progress-border-size)) 101 | calc(0px - var(--progress-outer-height)), 102 | var(--progress-outer-width) 103 | calc(var(--progress-outer-height) - var(--progress-border-size)), 104 | 0px var(--progress-outer-height); 105 | } 106 | 50% { 107 | background-position: 0px 0px, 108 | calc(var(--progress-outer-width) - var(--progress-border-size)) 0px, 109 | var(--progress-outer-width) 110 | calc(var(--progress-outer-height) - var(--progress-border-size)), 111 | 0px var(--progress-outer-height); 112 | } 113 | 88% { 114 | background-position: 0px 0px, 115 | calc(var(--progress-outer-width) - var(--progress-border-size)) 0px, 116 | 0px calc(var(--progress-outer-height) - var(--progress-border-size)), 117 | 0px var(--progress-outer-height); 118 | } 119 | 100% { 120 | background-position: 0px 0px, 121 | calc(var(--progress-outer-width) - var(--progress-border-size)) 0px, 122 | 0px calc(var(--progress-outer-height) - var(--progress-border-size)), 123 | 0px 0px; 124 | } 125 | } 126 | -------------------------------------------------------------------------------- /demo/worker/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 |
8 |
9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /demo/worker/index.js: -------------------------------------------------------------------------------- 1 | const containerEl = document.querySelector('.container') 2 | const worker = new Worker('worker.js') 3 | 4 | const bindEvents = () => { 5 | document.querySelector('.my-input').addEventListener('input', (e) => { 6 | const textValue = e.target.value 7 | const length = textValue ? textValue.length : 0 8 | 9 | if (!length) { 10 | containerEl.innerHTML = '' 11 | return 12 | } 13 | 14 | worker.postMessage({ 15 | length, 16 | clientHeight: containerEl.clientHeight, 17 | clientWidth: containerEl.clientWidth, 18 | }) 19 | }) 20 | 21 | worker.onmessage = (e) => { 22 | containerEl.innerHTML = e.data.message 23 | } 24 | } 25 | 26 | bindEvents() 27 | -------------------------------------------------------------------------------- /demo/worker/worker.js: -------------------------------------------------------------------------------- 1 | self.addEventListener("message", e => { 2 | const { length, clientHeight, clientWidth } = e.data 3 | postMessage({ 4 | message: makeDots({ length, clientHeight, clientWidth }) 5 | }); 6 | }); 7 | 8 | const colorClasses = ['primary', 'secondary', 'tertiary', 'quaternary'] 9 | 10 | const makeDots = ({ length, clientHeight, clientWidth }) => { 11 | const n = Math.min(Math.pow(length, 2), 100) 12 | const count = n * n 13 | const height = clientHeight / n 14 | const width = clientWidth / n 15 | 16 | let result = ''; 17 | 18 | for (let i = 0; i < count; i++) { 19 | const color = colorClasses[Math.floor(Math.random() * colorClasses.length)]; 20 | result += `
` 21 | } 22 | 23 | return result; 24 | }; 25 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ui-block-demo", 3 | "version": "0.0.1", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "async": { 8 | "version": "1.5.2", 9 | "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz", 10 | "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=", 11 | "dev": true 12 | }, 13 | "colors": { 14 | "version": "1.0.3", 15 | "resolved": "https://registry.npmjs.org/colors/-/colors-1.0.3.tgz", 16 | "integrity": "sha1-BDP0TYCWgP3rYO0mDxsMJi6CpAs=", 17 | "dev": true 18 | }, 19 | "corser": { 20 | "version": "2.0.1", 21 | "resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz", 22 | "integrity": "sha1-jtolLsqrWEDc2XXOuQ2TcMgZ/4c=", 23 | "dev": true 24 | }, 25 | "debug": { 26 | "version": "3.2.6", 27 | "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz", 28 | "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==", 29 | "dev": true, 30 | "requires": { 31 | "ms": "^2.1.1" 32 | } 33 | }, 34 | "ecstatic": { 35 | "version": "3.3.2", 36 | "resolved": "https://registry.npmjs.org/ecstatic/-/ecstatic-3.3.2.tgz", 37 | "integrity": "sha512-fLf9l1hnwrHI2xn9mEDT7KIi22UDqA2jaCwyCbSUJh9a1V+LEUSL/JO/6TIz/QyuBURWUHrFL5Kg2TtO1bkkog==", 38 | "dev": true, 39 | "requires": { 40 | "he": "^1.1.1", 41 | "mime": "^1.6.0", 42 | "minimist": "^1.1.0", 43 | "url-join": "^2.0.5" 44 | } 45 | }, 46 | "eventemitter3": { 47 | "version": "3.1.2", 48 | "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.2.tgz", 49 | "integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==", 50 | "dev": true 51 | }, 52 | "follow-redirects": { 53 | "version": "1.8.1", 54 | "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.8.1.tgz", 55 | "integrity": "sha512-micCIbldHioIegeKs41DoH0KS3AXfFzgS30qVkM6z/XOE/GJgvmsoc839NUqa1B9udYe9dQxgv7KFwng6+p/dw==", 56 | "dev": true, 57 | "requires": { 58 | "debug": "^3.0.0" 59 | } 60 | }, 61 | "he": { 62 | "version": "1.2.0", 63 | "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", 64 | "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", 65 | "dev": true 66 | }, 67 | "http-proxy": { 68 | "version": "1.17.0", 69 | "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.17.0.tgz", 70 | "integrity": "sha512-Taqn+3nNvYRfJ3bGvKfBSRwy1v6eePlm3oc/aWVxZp57DQr5Eq3xhKJi7Z4hZpS8PC3H4qI+Yly5EmFacGuA/g==", 71 | "dev": true, 72 | "requires": { 73 | "eventemitter3": "^3.0.0", 74 | "follow-redirects": "^1.0.0", 75 | "requires-port": "^1.0.0" 76 | } 77 | }, 78 | "http-server": { 79 | "version": "0.11.1", 80 | "resolved": "https://registry.npmjs.org/http-server/-/http-server-0.11.1.tgz", 81 | "integrity": "sha512-6JeGDGoujJLmhjiRGlt8yK8Z9Kl0vnl/dQoQZlc4oeqaUoAKQg94NILLfrY3oWzSyFaQCVNTcKE5PZ3cH8VP9w==", 82 | "dev": true, 83 | "requires": { 84 | "colors": "1.0.3", 85 | "corser": "~2.0.0", 86 | "ecstatic": "^3.0.0", 87 | "http-proxy": "^1.8.1", 88 | "opener": "~1.4.0", 89 | "optimist": "0.6.x", 90 | "portfinder": "^1.0.13", 91 | "union": "~0.4.3" 92 | } 93 | }, 94 | "mime": { 95 | "version": "1.6.0", 96 | "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", 97 | "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", 98 | "dev": true 99 | }, 100 | "minimist": { 101 | "version": "1.2.0", 102 | "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", 103 | "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", 104 | "dev": true 105 | }, 106 | "mkdirp": { 107 | "version": "0.5.1", 108 | "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", 109 | "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", 110 | "dev": true, 111 | "requires": { 112 | "minimist": "0.0.8" 113 | }, 114 | "dependencies": { 115 | "minimist": { 116 | "version": "0.0.8", 117 | "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", 118 | "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", 119 | "dev": true 120 | } 121 | } 122 | }, 123 | "ms": { 124 | "version": "2.1.2", 125 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", 126 | "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", 127 | "dev": true 128 | }, 129 | "opener": { 130 | "version": "1.4.3", 131 | "resolved": "https://registry.npmjs.org/opener/-/opener-1.4.3.tgz", 132 | "integrity": "sha1-XG2ixdflgx6P+jlklQ+NZnSskLg=", 133 | "dev": true 134 | }, 135 | "optimist": { 136 | "version": "0.6.1", 137 | "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz", 138 | "integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=", 139 | "dev": true, 140 | "requires": { 141 | "minimist": "~0.0.1", 142 | "wordwrap": "~0.0.2" 143 | }, 144 | "dependencies": { 145 | "minimist": { 146 | "version": "0.0.10", 147 | "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz", 148 | "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=", 149 | "dev": true 150 | } 151 | } 152 | }, 153 | "portfinder": { 154 | "version": "1.0.23", 155 | "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.23.tgz", 156 | "integrity": "sha512-B729mL/uLklxtxuiJKfQ84WPxNw5a7Yhx3geQZdcA4GjNjZSTSSMMWyoennMVnTWSmAR0lMdzWYN0JLnHrg1KQ==", 157 | "dev": true, 158 | "requires": { 159 | "async": "^1.5.2", 160 | "debug": "^2.2.0", 161 | "mkdirp": "0.5.x" 162 | }, 163 | "dependencies": { 164 | "debug": { 165 | "version": "2.6.9", 166 | "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", 167 | "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", 168 | "dev": true, 169 | "requires": { 170 | "ms": "2.0.0" 171 | } 172 | }, 173 | "ms": { 174 | "version": "2.0.0", 175 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", 176 | "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", 177 | "dev": true 178 | } 179 | } 180 | }, 181 | "qs": { 182 | "version": "2.3.3", 183 | "resolved": "https://registry.npmjs.org/qs/-/qs-2.3.3.tgz", 184 | "integrity": "sha1-6eha2+ddoLvkyOBHaghikPhjtAQ=", 185 | "dev": true 186 | }, 187 | "requires-port": { 188 | "version": "1.0.0", 189 | "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", 190 | "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=", 191 | "dev": true 192 | }, 193 | "union": { 194 | "version": "0.4.6", 195 | "resolved": "https://registry.npmjs.org/union/-/union-0.4.6.tgz", 196 | "integrity": "sha1-GY+9rrolTniLDvy2MLwR8kopWeA=", 197 | "dev": true, 198 | "requires": { 199 | "qs": "~2.3.3" 200 | } 201 | }, 202 | "url-join": { 203 | "version": "2.0.5", 204 | "resolved": "https://registry.npmjs.org/url-join/-/url-join-2.0.5.tgz", 205 | "integrity": "sha1-WvIvGMBSoACkjXuCxenC4v7tpyg=", 206 | "dev": true 207 | }, 208 | "wordwrap": { 209 | "version": "0.0.3", 210 | "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz", 211 | "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc=", 212 | "dev": true 213 | } 214 | } 215 | } 216 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ui-block-demo", 3 | "version": "0.0.1", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "postinstall": "cd demo && npm install", 8 | "serve": "http-server ./demo" 9 | }, 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "http-server": "^0.11.1" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | async@^1.5.2: 6 | version "1.5.2" 7 | resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a" 8 | integrity sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo= 9 | 10 | colors@1.0.3: 11 | version "1.0.3" 12 | resolved "https://registry.yarnpkg.com/colors/-/colors-1.0.3.tgz#0433f44d809680fdeb60ed260f1b0c262e82a40b" 13 | integrity sha1-BDP0TYCWgP3rYO0mDxsMJi6CpAs= 14 | 15 | corser@~2.0.0: 16 | version "2.0.1" 17 | resolved "https://registry.yarnpkg.com/corser/-/corser-2.0.1.tgz#8eda252ecaab5840dcd975ceb90d9370c819ff87" 18 | integrity sha1-jtolLsqrWEDc2XXOuQ2TcMgZ/4c= 19 | 20 | debug@^2.2.0: 21 | version "2.6.9" 22 | resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f" 23 | integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA== 24 | dependencies: 25 | ms "2.0.0" 26 | 27 | debug@^3.0.0: 28 | version "3.2.6" 29 | resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b" 30 | integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ== 31 | dependencies: 32 | ms "^2.1.1" 33 | 34 | ecstatic@^3.0.0: 35 | version "3.3.2" 36 | resolved "https://registry.yarnpkg.com/ecstatic/-/ecstatic-3.3.2.tgz#6d1dd49814d00594682c652adb66076a69d46c48" 37 | integrity sha512-fLf9l1hnwrHI2xn9mEDT7KIi22UDqA2jaCwyCbSUJh9a1V+LEUSL/JO/6TIz/QyuBURWUHrFL5Kg2TtO1bkkog== 38 | dependencies: 39 | he "^1.1.1" 40 | mime "^1.6.0" 41 | minimist "^1.1.0" 42 | url-join "^2.0.5" 43 | 44 | eventemitter3@^3.0.0: 45 | version "3.1.2" 46 | resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.2.tgz#2d3d48f9c346698fce83a85d7d664e98535df6e7" 47 | integrity sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q== 48 | 49 | follow-redirects@^1.0.0: 50 | version "1.8.1" 51 | resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.8.1.tgz#24804f9eaab67160b0e840c085885d606371a35b" 52 | integrity sha512-micCIbldHioIegeKs41DoH0KS3AXfFzgS30qVkM6z/XOE/GJgvmsoc839NUqa1B9udYe9dQxgv7KFwng6+p/dw== 53 | dependencies: 54 | debug "^3.0.0" 55 | 56 | he@^1.1.1: 57 | version "1.2.0" 58 | resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f" 59 | integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw== 60 | 61 | http-proxy@^1.8.1: 62 | version "1.17.0" 63 | resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.17.0.tgz#7ad38494658f84605e2f6db4436df410f4e5be9a" 64 | integrity sha512-Taqn+3nNvYRfJ3bGvKfBSRwy1v6eePlm3oc/aWVxZp57DQr5Eq3xhKJi7Z4hZpS8PC3H4qI+Yly5EmFacGuA/g== 65 | dependencies: 66 | eventemitter3 "^3.0.0" 67 | follow-redirects "^1.0.0" 68 | requires-port "^1.0.0" 69 | 70 | http-server@^0.11.1: 71 | version "0.11.1" 72 | resolved "https://registry.yarnpkg.com/http-server/-/http-server-0.11.1.tgz#2302a56a6ffef7f9abea0147d838a5e9b6b6a79b" 73 | integrity sha512-6JeGDGoujJLmhjiRGlt8yK8Z9Kl0vnl/dQoQZlc4oeqaUoAKQg94NILLfrY3oWzSyFaQCVNTcKE5PZ3cH8VP9w== 74 | dependencies: 75 | colors "1.0.3" 76 | corser "~2.0.0" 77 | ecstatic "^3.0.0" 78 | http-proxy "^1.8.1" 79 | opener "~1.4.0" 80 | optimist "0.6.x" 81 | portfinder "^1.0.13" 82 | union "~0.4.3" 83 | 84 | mime@^1.6.0: 85 | version "1.6.0" 86 | resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1" 87 | integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg== 88 | 89 | minimist@0.0.8: 90 | version "0.0.8" 91 | resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d" 92 | integrity sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0= 93 | 94 | minimist@^1.1.0: 95 | version "1.2.0" 96 | resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284" 97 | integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ= 98 | 99 | minimist@~0.0.1: 100 | version "0.0.10" 101 | resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf" 102 | integrity sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8= 103 | 104 | mkdirp@0.5.x: 105 | version "0.5.1" 106 | resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903" 107 | integrity sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM= 108 | dependencies: 109 | minimist "0.0.8" 110 | 111 | ms@2.0.0: 112 | version "2.0.0" 113 | resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8" 114 | integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g= 115 | 116 | ms@^2.1.1: 117 | version "2.1.2" 118 | resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009" 119 | integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w== 120 | 121 | opener@~1.4.0: 122 | version "1.4.3" 123 | resolved "https://registry.yarnpkg.com/opener/-/opener-1.4.3.tgz#5c6da2c5d7e5831e8ffa3964950f8d6674ac90b8" 124 | integrity sha1-XG2ixdflgx6P+jlklQ+NZnSskLg= 125 | 126 | optimist@0.6.x: 127 | version "0.6.1" 128 | resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686" 129 | integrity sha1-2j6nRob6IaGaERwybpDrFaAZZoY= 130 | dependencies: 131 | minimist "~0.0.1" 132 | wordwrap "~0.0.2" 133 | 134 | portfinder@^1.0.13: 135 | version "1.0.23" 136 | resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.23.tgz#894db4bcc5daf02b6614517ce89cd21a38226b82" 137 | integrity sha512-B729mL/uLklxtxuiJKfQ84WPxNw5a7Yhx3geQZdcA4GjNjZSTSSMMWyoennMVnTWSmAR0lMdzWYN0JLnHrg1KQ== 138 | dependencies: 139 | async "^1.5.2" 140 | debug "^2.2.0" 141 | mkdirp "0.5.x" 142 | 143 | qs@~2.3.3: 144 | version "2.3.3" 145 | resolved "https://registry.yarnpkg.com/qs/-/qs-2.3.3.tgz#e9e85adbe75da0bbe4c8e0476a086290f863b404" 146 | integrity sha1-6eha2+ddoLvkyOBHaghikPhjtAQ= 147 | 148 | requires-port@^1.0.0: 149 | version "1.0.0" 150 | resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff" 151 | integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8= 152 | 153 | union@~0.4.3: 154 | version "0.4.6" 155 | resolved "https://registry.yarnpkg.com/union/-/union-0.4.6.tgz#198fbdaeba254e788b0efcb630bc11f24a2959e0" 156 | integrity sha1-GY+9rrolTniLDvy2MLwR8kopWeA= 157 | dependencies: 158 | qs "~2.3.3" 159 | 160 | url-join@^2.0.5: 161 | version "2.0.5" 162 | resolved "https://registry.yarnpkg.com/url-join/-/url-join-2.0.5.tgz#5af22f18c052a000a48d7b82c5e9c2e2feeda728" 163 | integrity sha1-WvIvGMBSoACkjXuCxenC4v7tpyg= 164 | 165 | wordwrap@~0.0.2: 166 | version "0.0.3" 167 | resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107" 168 | integrity sha1-o9XabNXAvAAI03I0u68b7WMFkQc= 169 | --------------------------------------------------------------------------------