diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 00000000..25bb59b1 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,2 @@ +*.gjs linguist-language=js linguist-detectable +*.gts linguist-language=ts linguist-detectable diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1d59a10f..0a8c0614 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -425,6 +425,9 @@ importers: ember-source: specifier: ~5.4.0 version: 5.4.0(@babel/core@7.23.3)(@glimmer/component@1.1.2)(@glint/template@1.2.1)(rsvp@4.8.5)(webpack@5.89.0) + ember-template-imports: + specifier: ^4.0.0 + version: 4.0.0 ember-template-lint: specifier: ^5.11.2 version: 5.12.0 @@ -455,6 +458,9 @@ importers: prettier: specifier: ^3.0.3 version: 3.0.3 + prettier-plugin-ember-template-tag: + specifier: ^1.1.0 + version: 1.1.0(prettier@3.0.3) qunit: specifier: ^2.20.0 version: 2.20.0 @@ -6729,6 +6735,17 @@ packages: - supports-color dev: true + /ember-template-imports@4.0.0: + resolution: {integrity: sha512-Kw1FnFX3MrBesfsjJDFvVgOf1mANOvMprAH1ngDd5SvdlkltNWCF2UKI9WXKQV3lw5noQC1+n6S80L9Q03D3Hw==} + engines: {node: 16.* || >= 18} + dependencies: + broccoli-stew: 3.0.0 + content-tag: 1.1.2 + ember-cli-version-checker: 5.1.2 + transitivePeerDependencies: + - supports-color + dev: true + /ember-template-lint@5.12.0: resolution: {integrity: sha512-QY3VVwuaYACOmOtF0VzQUUA8p6AYE3VC2LW/4RLsi6B5oa2E8wCfJwyo4wcXKLQb+eSqDMYmD/PQ4iizFFpz5g==} engines: {node: ^14.18.0 || ^16.0.0 || >= 18.0.0} @@ -11675,6 +11692,21 @@ packages: fast-diff: 1.3.0 dev: true + /prettier-plugin-ember-template-tag@1.1.0(prettier@3.0.3): + resolution: {integrity: sha512-zJTC+NhEU0kHNnVh7OtcvMmkJmYTgFTist76FP9q07m9+WCvcaunR1sTFIOlGE9TH/5UGm6rlF86Umt9ouorAg==} + engines: {node: 16.* || 18.* || >= 20} + peerDependencies: + prettier: '>= 3.0.0' + dependencies: + '@babel/core': 7.23.3 + '@glimmer/syntax': 0.84.3 + ember-cli-htmlbars: 6.3.0 + ember-template-imports: 3.4.2 + prettier: 3.0.3 + transitivePeerDependencies: + - supports-color + dev: true + /prettier@2.8.8: resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==} engines: {node: '>=10.13.0'} diff --git a/website/.prettierrc.js b/website/.prettierrc.js index e5f7b6d1..c7dd12b3 100644 --- a/website/.prettierrc.js +++ b/website/.prettierrc.js @@ -1,9 +1,10 @@ 'use strict'; module.exports = { + plugins: ['prettier-plugin-ember-template-tag'], overrides: [ { - files: '*.{js,ts}', + files: '*.{js,ts,gjs,gts}', options: { singleQuote: true, }, diff --git a/website/app/components/demo-upload.gjs b/website/app/components/demo-upload.gjs new file mode 100644 index 00000000..8e737069 --- /dev/null +++ b/website/app/components/demo-upload.gjs @@ -0,0 +1,207 @@ +import Component from '@glimmer/component'; +import { service } from '@ember/service'; +import { action } from '@ember/object'; +import { tracked } from '@glimmer/tracking'; +import { task, timeout } from 'ember-concurrency'; +import { FileState } from 'ember-file-upload'; +import FileDropzone from 'ember-file-upload/components/file-dropzone'; +import fileQueue from 'ember-file-upload/helpers/file-queue'; +import { onloadstart, onprogress, onloadend } from 'ember-file-upload/internal'; +import { on } from '@ember/modifier'; + +// Values in kilobits per second (kbps) +const UPLOAD_RATES = { + 'Disconnected - 0 Mbps': 0, + 'Very slow - 0.1 Mbps': 100, + 'Slow 3G - 0.4 Mbps': 400, + 'Fast 3G - 0.675 Mbps': 675, + 'ADSL - 1.5 Mbps': 1_500, + '4G/LTE - 50 Mbps': 50_000, + 'Fast Fibre - 100 Mbps': 100_000, +}; + +const STEP_INTERVAL = 100; // Progress events every 100ms +const STEPS_PER_SECOND = 1_000 / STEP_INTERVAL; +const BYTES_PER_KILOBYTE = 1_024; +const BITS_PER_BYTE = 8; + +const round = (number) => Math.round(number); +const localeNumber = (number) => number.toLocaleString('en-GB'); +const eq = (a, b) => a === b; + +export default class DemoUploadComponent extends Component { + @service fileQueue; + + @tracked files = []; + @tracked uploadRate = UPLOAD_RATES['Fast 3G - 0.675 Mbps']; + + get queue() { + return this.fileQueue.find('demo'); + } + + get bytesPerStep() { + const kilobytesPerSecond = + // Convert to kilobytes + (this.uploadRate / BITS_PER_BYTE) * + // and then to bytes + BYTES_PER_KILOBYTE; + return kilobytesPerSecond / STEPS_PER_SECOND; + } + + @action + setUploadRate(event) { + this.uploadRate = parseInt(event.target.value, 10); + } + + @action + addToQueue(file) { + file.queue = this.queue; + file.state = FileState.Queued; + this.files = [file, ...this.files]; + + this.simulateUpload.perform(file); + } + + @task({ enqueue: true }) + *simulateUpload(file) { + file.state = FileState.Uploading; + + onloadstart( + file, + new ProgressEvent('loadstart', { + lengthComputable: true, + loaded: 0, + total: 0, + }), + ); + + while (file.progress < 100) { + yield timeout(STEP_INTERVAL); + + onprogress( + file, + new ProgressEvent('progress', { + lengthComputable: true, + loaded: file.loaded + this.bytesPerStep, + total: file.size, + }), + ); + } + + onloadend( + file, + new ProgressEvent('loadend', { + lengthComputable: true, + loaded: file.size, + total: file.size, + }), + ); + + file.state = FileState.Uploaded; + file.queue.flush(); + } + + +} diff --git a/website/app/components/demo-upload.hbs b/website/app/components/demo-upload.hbs deleted file mode 100644 index 4fe5e647..00000000 --- a/website/app/components/demo-upload.hbs +++ /dev/null @@ -1,97 +0,0 @@ -
- -
- -{{#let (file-queue name="demo" onFileAdded=this.addToQueue) as |queue|}} - -
- -
- {{#if dropzone.active}} - Drop to upload - {{else if queue.files.length}} - Uploading - {{queue.files.length}} - files. ({{queue.progress}}%) - {{else if dropzone.supported}} - Or drag and drop files here to upload them - {{/if}} - - -
-

Queue

- - - - - - - - - - - - - - - -
- Loaded - - Size - - Progress -
{{this.localeNumber queue.loaded}} bytes{{this.localeNumber queue.size}} bytes{{queue.progress}}%
-
-{{/let}} - -
-

Files

- - - - - - - - - - - - - {{#each this.files as |file|}} - - - - - - - - - {{/each}} - -
- Name - - Type - - Size - - Source - - State - - Progress -
{{file.name}}{{file.type}}{{this.localeNumber file.size}} bytes{{file.source}}{{file.state}}{{this.round file.progress}}
-
\ No newline at end of file diff --git a/website/app/components/demo-upload.js b/website/app/components/demo-upload.js deleted file mode 100644 index 8443e353..00000000 --- a/website/app/components/demo-upload.js +++ /dev/null @@ -1,102 +0,0 @@ -import Component from '@glimmer/component'; -import { service } from '@ember/service'; -import { action } from '@ember/object'; -import { tracked } from '@glimmer/tracking'; -import { task, timeout } from 'ember-concurrency'; -import { FileState } from 'ember-file-upload'; -import { onloadstart, onprogress, onloadend } from 'ember-file-upload/internal'; - -// Values in kilobits per second (kbps) -const UPLOAD_RATES = { - 'Disconnected - 0 Mbps': 0, - 'Very slow - 0.1 Mbps': 100, - 'Slow 3G - 0.4 Mbps': 400, - 'Fast 3G - 0.675 Mbps': 675, - 'ADSL - 1.5 Mbps': 1_500, - '4G/LTE - 50 Mbps': 50_000, - 'Fast Fibre - 100 Mbps': 100_000, -}; - -const STEP_INTERVAL = 100; // Progress events every 100ms -const STEPS_PER_SECOND = 1_000 / STEP_INTERVAL; -const BYTES_PER_KILOBYTE = 1_024; -const BITS_PER_BYTE = 8; - -export default class DemoUploadComponent extends Component { - @service fileQueue; - - @tracked files = []; - @tracked uploadRate = UPLOAD_RATES['Fast 3G - 0.675 Mbps']; - - UPLOAD_RATES = UPLOAD_RATES; - - get queue() { - return this.fileQueue.find('demo'); - } - - get bytesPerStep() { - const kilobytesPerSecond = - // Convert to kilobytes - (this.uploadRate / BITS_PER_BYTE) * - // and then to bytes - BYTES_PER_KILOBYTE; - return kilobytesPerSecond / STEPS_PER_SECOND; - } - - round = (number) => Math.round(number); - localeNumber = (number) => number.toLocaleString('en-GB'); - eq = (a, b) => a === b; - - @action - setUploadRate(event) { - this.uploadRate = parseInt(event.target.value, 10); - } - - @action - addToQueue(file) { - file.queue = this.queue; - file.state = FileState.Queued; - this.files = [file, ...this.files]; - - this.simulateUpload.perform(file); - } - - @task({ enqueue: true }) - *simulateUpload(file) { - file.state = FileState.Uploading; - - onloadstart( - file, - new ProgressEvent('loadstart', { - lengthComputable: true, - loaded: 0, - total: 0, - }), - ); - - while (file.progress < 100) { - yield timeout(STEP_INTERVAL); - - onprogress( - file, - new ProgressEvent('progress', { - lengthComputable: true, - loaded: file.loaded + this.bytesPerStep, - total: file.size, - }), - ); - } - - onloadend( - file, - new ProgressEvent('loadend', { - lengthComputable: true, - loaded: file.size, - total: file.size, - }), - ); - - file.state = FileState.Uploaded; - file.queue.flush(); - } -} diff --git a/website/package.json b/website/package.json index e4ee0b48..c0bfdbd6 100644 --- a/website/package.json +++ b/website/package.json @@ -59,6 +59,7 @@ "ember-qunit": "^8.0.1", "ember-resolver": "^11.0.1", "ember-source": "~5.4.0", + "ember-template-imports": "^4.0.0", "ember-template-lint": "^5.11.2", "eslint": "^8.52.0", "eslint-config-prettier": "^9.0.0", @@ -69,6 +70,7 @@ "highlight.js": "^11.7.0", "loader.js": "^4.7.0", "prettier": "^3.0.3", + "prettier-plugin-ember-template-tag": "^1.1.0", "qunit": "^2.20.0", "qunit-dom": "^3.0.0", "rehype-highlight": "^4.1.0",