From 8c09de4bc2ca6c38a2585cfa4774476738749e0e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Douglas=20Gad=C3=AAlha?= Date: Thu, 2 May 2024 13:30:38 -0300 Subject: [PATCH] =?UTF-8?q?Ajustar=20regra=20do=20SW=20para=20baixar=20os?= =?UTF-8?q?=20assets=20e=20tornar=20o=20Portugol=20mais=20amig=C3=A1vel=20?= =?UTF-8?q?offline?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 32 +++++++++++++ packages/ide/ngsw-config.json | 3 +- packages/ide/package.json | 2 + packages/ide/src/app/app.module.ts | 8 +++- .../new-version-available.component.html | 9 ++++ .../new-version-available.component.scss | 5 +++ .../new-version-available.component.ts | 28 ++++++++++++ packages/ide/src/app/pwa.service.ts | 45 +++++++++++++++++++ .../app/tab-start/tab-start.component.html | 3 +- packages/ide/src/styles.scss | 1 + 10 files changed, 131 insertions(+), 5 deletions(-) create mode 100644 packages/ide/src/app/new-version-available/new-version-available.component.html create mode 100644 packages/ide/src/app/new-version-available/new-version-available.component.scss create mode 100644 packages/ide/src/app/new-version-available/new-version-available.component.ts create mode 100644 packages/ide/src/app/pwa.service.ts diff --git a/package-lock.json b/package-lock.json index 36a65514..6d4dd6f1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5409,6 +5409,17 @@ "resolved": "https://registry.npmjs.org/@mdi/svg/-/svg-7.4.47.tgz", "integrity": "sha512-WQ2gDll12T9WD34fdRFgQVgO8bag3gavrAgJ0frN4phlwdJARpE6gO1YvLEMJR0KKgoc+/Ea/A0Pp11I00xBvw==" }, + "node_modules/@ngneat/overview": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@ngneat/overview/-/overview-6.0.0.tgz", + "integrity": "sha512-pm4bAEYtnUl8q82dwjh5NN9HF0WTFEI58VtR12izp9Oaa2dtseX82VUArfb4fadmlbHpPMUwXHrsm0ORyWii2A==", + "dependencies": { + "tslib": "^2.0.0" + }, + "peerDependencies": { + "@angular/core": ">=17" + } + }, "node_modules/@ngtools/webpack": { "version": "17.3.6", "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-17.3.6.tgz", @@ -5424,6 +5435,18 @@ "webpack": "^5.54.0" } }, + "node_modules/@ngxpert/hot-toast": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@ngxpert/hot-toast/-/hot-toast-2.0.0.tgz", + "integrity": "sha512-HttkQIzDHz/CK2aWFoT6+JOaB/Rb0SM3xSBXAbbn7Mz2uB2stRyoIW0bUlOKX2jNNO+X+gCMqyK2FrnhhQZyeA==", + "dependencies": { + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/core": ">= 17.0.0 < 18.0.0", + "@ngneat/overview": "6.0.0" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -20031,6 +20054,7 @@ } }, "packages/antlr": { + "name": "@portugol-webstudio/antlr", "version": "0.0.0", "license": "GPL-3.0", "dependencies": { @@ -20042,6 +20066,7 @@ } }, "packages/ide": { + "name": "@portugol-webstudio/ide", "version": "0.0.0", "license": "GPL-3.0", "dependencies": { @@ -20060,6 +20085,8 @@ "@fontsource/lato": "^5.0.21", "@materia-ui/ngx-monaco-editor": "^6.0.0", "@mdi/svg": "^7.4.47", + "@ngneat/overview": "^6.0.0", + "@ngxpert/hot-toast": "^2.0.0", "@portugol-webstudio/antlr": "*", "@portugol-webstudio/parser": "*", "@portugol-webstudio/resources": "*", @@ -20094,6 +20121,7 @@ } }, "packages/parser": { + "name": "@portugol-webstudio/parser", "version": "0.0.0", "license": "GPL-3.0", "dependencies": { @@ -20105,6 +20133,7 @@ } }, "packages/resources": { + "name": "@portugol-webstudio/resources", "version": "0.0.0", "license": "GPL-3.0", "devDependencies": { @@ -20140,6 +20169,7 @@ } }, "packages/runner": { + "name": "@portugol-webstudio/runner", "version": "0.0.0", "license": "GPL-3.0", "dependencies": { @@ -20154,6 +20184,7 @@ } }, "packages/runtime": { + "name": "@portugol-webstudio/runtime", "version": "0.0.0", "license": "GPL-3.0", "dependencies": { @@ -20166,6 +20197,7 @@ } }, "packages/worker": { + "name": "@portugol-webstudio/worker", "version": "0.0.0", "license": "GPL-3.0", "dependencies": { diff --git a/packages/ide/ngsw-config.json b/packages/ide/ngsw-config.json index cb80d374..70f12b8e 100644 --- a/packages/ide/ngsw-config.json +++ b/packages/ide/ngsw-config.json @@ -11,8 +11,7 @@ }, { "name": "assets", - "installMode": "lazy", - "updateMode": "prefetch", + "installMode": "prefetch", "resources": { "files": ["/assets/**", "/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"] } diff --git a/packages/ide/package.json b/packages/ide/package.json index 771780c0..5a9b1ee8 100644 --- a/packages/ide/package.json +++ b/packages/ide/package.json @@ -44,6 +44,8 @@ "@fontsource/lato": "^5.0.21", "@materia-ui/ngx-monaco-editor": "^6.0.0", "@mdi/svg": "^7.4.47", + "@ngneat/overview": "^6.0.0", + "@ngxpert/hot-toast": "^2.0.0", "@portugol-webstudio/antlr": "*", "@portugol-webstudio/parser": "*", "@portugol-webstudio/resources": "*", diff --git a/packages/ide/src/app/app.module.ts b/packages/ide/src/app/app.module.ts index 827e03e5..f373a167 100644 --- a/packages/ide/src/app/app.module.ts +++ b/packages/ide/src/app/app.module.ts @@ -15,6 +15,7 @@ import { MatTreeModule } from "@angular/material/tree"; import { BrowserModule } from "@angular/platform-browser"; import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; import { MonacoEditorModule } from "@materia-ui/ngx-monaco-editor"; +import { provideHotToastConfig } from "@ngxpert/hot-toast"; import * as Sentry from "@sentry/angular-ivy"; import { AngularSplitModule } from "angular-split"; import { AngularSvgIconModule } from "angular-svg-icon"; @@ -26,6 +27,7 @@ import { environment } from "../environments/environment"; import { AppComponent } from "./app.component"; import { DialogOpenExampleComponent } from "./dialog-open-example/dialog-open-example.component"; import { MonacoService } from "./monaco.service"; +import { PwaService } from "./pwa.service"; import { TabEditorComponent } from "./tab-editor/tab-editor.component"; import { TabHelpComponent } from "./tab-help/tab-help.component"; import { TabStartComponent } from "./tab-start/tab-start.component"; @@ -61,7 +63,11 @@ import { TabStartComponent } from "./tab-start/tab-start.component"; }), ], providers: [ + provideHotToastConfig({ + position: "bottom-right", + }), MonacoService, + PwaService, { provide: ErrorHandler, useValue: Sentry.createErrorHandler({ @@ -72,7 +78,7 @@ import { TabStartComponent } from "./tab-start/tab-start.component"; provide: APP_INITIALIZER, useFactory: () => () => {}, multi: true, - deps: [MonacoService], + deps: [MonacoService, PwaService], }, ], bootstrap: [AppComponent], diff --git a/packages/ide/src/app/new-version-available/new-version-available.component.html b/packages/ide/src/app/new-version-available/new-version-available.component.html new file mode 100644 index 00000000..9da78a80 --- /dev/null +++ b/packages/ide/src/app/new-version-available/new-version-available.component.html @@ -0,0 +1,9 @@ +Uma nova versão do Portugol Webstudio está disponível + +

Lembre-se de salvar os seus arquivos antes de atualizar.

+

Quando estiver pronto, basta atualizar a página ou clicar no botão abaixo.

+ +
+ + +
diff --git a/packages/ide/src/app/new-version-available/new-version-available.component.scss b/packages/ide/src/app/new-version-available/new-version-available.component.scss new file mode 100644 index 00000000..c490e457 --- /dev/null +++ b/packages/ide/src/app/new-version-available/new-version-available.component.scss @@ -0,0 +1,5 @@ +.buttons { + display: flex; + align-items: center; + gap: 1rem; +} diff --git a/packages/ide/src/app/new-version-available/new-version-available.component.ts b/packages/ide/src/app/new-version-available/new-version-available.component.ts new file mode 100644 index 00000000..76302a58 --- /dev/null +++ b/packages/ide/src/app/new-version-available/new-version-available.component.ts @@ -0,0 +1,28 @@ +import { Component, Inject, Optional } from "@angular/core"; +import { MatButtonModule } from "@angular/material/button"; +import { HotToastRef } from "@ngxpert/hot-toast"; + +@Component({ + selector: "app-new-version-available", + templateUrl: "./new-version-available.component.html", + styleUrls: ["./new-version-available.component.scss"], + standalone: true, + imports: [MatButtonModule], +}) +export class NewVersionAvailableComponent { + constructor(@Optional() @Inject(HotToastRef) public toastRef?: HotToastRef) {} + + onReload() { + if ( + confirm( + 'Lembre-se de salvar seu código antes de recarregar a página!\n\nAperte "OK" para recarregar a página, ou "Cancelar" para abortar.', + ) + ) { + window.location.reload(); + } + } + + onIgnore() { + this.toastRef?.close(); + } +} diff --git a/packages/ide/src/app/pwa.service.ts b/packages/ide/src/app/pwa.service.ts new file mode 100644 index 00000000..fb4b5275 --- /dev/null +++ b/packages/ide/src/app/pwa.service.ts @@ -0,0 +1,45 @@ +import { Injectable } from "@angular/core"; +import { SwUpdate } from "@angular/service-worker"; +import { CreateHotToastRef, HotToastService } from "@ngxpert/hot-toast"; +import { NewVersionAvailableComponent } from "./new-version-available/new-version-available.component"; + +@Injectable({ providedIn: "root" }) +export class PwaService { + loadingToast?: CreateHotToastRef; + + constructor( + private swUpdate: SwUpdate, + private toast: HotToastService, + ) { + if (!this.swUpdate.isEnabled) { + return; + } + + this.swUpdate.versionUpdates.subscribe(event => { + switch (event.type) { + case "VERSION_DETECTED": { + this.loadingToast = this.toast.loading("Baixando atualizações…", { + autoClose: true, + duration: 5000, + }); + + break; + } + + case "VERSION_READY": { + this.loadingToast?.close(); + this.toast.success(NewVersionAvailableComponent, { + autoClose: false, + dismissible: true, + }); + + break; + } + + default: { + break; + } + } + }); + } +} diff --git a/packages/ide/src/app/tab-start/tab-start.component.html b/packages/ide/src/app/tab-start/tab-start.component.html index 7b2ba7af..555a4994 100644 --- a/packages/ide/src/app/tab-start/tab-start.component.html +++ b/packages/ide/src/app/tab-start/tab-start.component.html @@ -94,6 +94,7 @@

Novidades

+

02/05/2024: Portugol Webstudio como PWA: funcionamento offline

01/05/2024: Correção de retorno em função vazia

30/04/2024:

    @@ -101,8 +102,6 @@