From 1d3600de32bc7de67a82b4e549f68e63fb05386f Mon Sep 17 00:00:00 2001 From: Jonas Pfalzgraf Date: Fri, 19 Aug 2022 01:02:43 +0200 Subject: [PATCH 01/13] improvements --- .editorconfig | 35 ++++++ public/options.html | 2 +- src/components/button.ts | 63 ++++++++++ src/sass/_button.sass | 226 ++++++++++++++++++++++++++++++++++ src/sass/_input.sass | 40 ++++++ src/sass/_mixin.sass | 133 ++++++++++---------- src/sass/_root.sass | 14 ++- src/sass/app.sass | 49 +++++--- src/{classes => }/settings.ts | 13 +- src/types/buttonType.ts | 1 + 10 files changed, 486 insertions(+), 90 deletions(-) create mode 100644 .editorconfig create mode 100644 src/components/button.ts create mode 100644 src/sass/_button.sass create mode 100644 src/sass/_input.sass rename src/{classes => }/settings.ts (60%) create mode 100644 src/types/buttonType.ts diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..5c6f66e --- /dev/null +++ b/.editorconfig @@ -0,0 +1,35 @@ +root = true + +[*] +indent_style = tab +indent_size = 4 +end_of_line = lf +insert_final_newline = true +trim_trailing_whitespace = true + +charset = utf-8 + +trim_trailing_whitespace = true +insert_final_newline = true + +[*.{js,ts,svg,md}] +charset = utf-8 + +[*.{ts,js}] +indent_style = tab +indent_size = 4 + +[package.json] +indent_style = space +indent_size = 2 + +[*.{sass,scss}] +indent_style = space +indent_size = 2 + +[*.{css,less}] +indent_style = space +indent_size = 2 + +[*.{json,yml,yaml}] +indent_style = space diff --git a/public/options.html b/public/options.html index 1cd3cda..161fb1a 100644 --- a/public/options.html +++ b/public/options.html @@ -20,7 +20,7 @@ diff --git a/src/components/button.ts b/src/components/button.ts new file mode 100644 index 0000000..33f8a28 --- /dev/null +++ b/src/components/button.ts @@ -0,0 +1,63 @@ +import { customButton } from "../types/buttonType"; + +export class BasicButton { + + private type: customButton; + + private text: string; + + private id: string | undefined; + + private className: string | undefined; + + constructor(type: customButton, text: string, id?: string, className?: string) { + this.type = type; + this.text = text; + this.id = id; + this.className = className; + } + + public render(): string { + const result = document.createElement('button'); + result.type = "button"; + result.className = this.type; + result.textContent = this.text; + + switch (this.type) { + case "primary": + result.className = "btn btn-primary"; + break; + case "success": + result.className = "btn btn-success"; + break; + case "danger": + result.className = "btn btn-danger"; + break; + case "warning": + result.className = "btn btn-warning"; + break; + case "info": + result.className = "btn btn-info"; + break; + case "light": + result.className = "btn btn-light"; + break; + case "dark": + result.className = "btn btn-dark"; + break; + default: + result.className = "btn btn-primary"; + break; + } + + if (this.id) { + result.id = this.id; + } + if (this.className) { + result.className += ' ' + this.className; + } + + return result.outerHTML; + } + +} diff --git a/src/sass/_button.sass b/src/sass/_button.sass new file mode 100644 index 0000000..de19aab --- /dev/null +++ b/src/sass/_button.sass @@ -0,0 +1,226 @@ +@import 'mixin' + +.btn-neutral + color: #fff + background-color: #000 + border-color: #000 + @include partialButton + +.btn-neutral:hover + color: #000 + background-color: #fff + border-color: #fff + +.btn-neutral:focus, .btn-neutral.focus + box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5) + +.btn-neutral.disabled, .btn-neutral:disabled + color: #fff + background-color: #000 + border-color: #000 + +.btn-neutral:not(:disabled):not(.disabled):active, .btn-neutral:not(:disabled):not(.disabled).active, +.show > .btn-neutral.dropdown-toggle + color: #000 + background-color: #fff + border-color: #fff + +.btn-primary + color: #fff + background-color: #007bff + border-color: #007bff + @include partialButton + +.btn-primary:hover + color: #fff + background-color: #0069d9 + border-color: #0062cc + +.btn-primary:focus, .btn-primary.focus + box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5) + +.btn-primary.disabled, .btn-primary:disabled + color: #fff + background-color: #007bff + border-color: #007bff + +.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, +.show > .btn-primary.dropdown-toggle + color: #fff + background-color: #0062cc + border-color: #005cbf + +.btn-secondary + color: #fff + background-color: #6c757d + border-color: #6c757d + @include partialButton + +.btn-secondary:hover + color: #fff + background-color: #5a6268 + border-color: #545b62 + +.btn-secondary:focus, .btn-secondary.focus + box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5) + +.btn-secondary.disabled, .btn-secondary:disabled + color: #fff + background-color: #6c757d + border-color: #6c757d + +.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, +.show > .btn-secondary.dropdown-toggle + color: #fff + background-color: #545b62 + border-color: #4e555b + +.btn-success + color: #fff + background-color: #28a745 + border-color: #28a745 + @include partialButton + +.btn-success:hover + color: #fff + background-color: #218838 + border-color: #1e7e34 + +.btn-success:focus, .btn-success.focus + box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5) + +.btn-success.disabled, .btn-success:disabled + color: #fff + background-color: #28a745 + border-color: #28a745 + +.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, +.show > .btn-success.dropdown-toggle + color: #fff + background-color: #1e7e34 + border-color: #1c7430 + +.btn-info + color: #fff + background-color: #17a2b8 + border-color: #17a2b8 + @include partialButton + +.btn-info:hover + color: #fff + background-color: #138496 + border-color: #117a8b + +.btn-info:focus, .btn-info.focus + box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5) + +.btn-info.disabled, .btn-info:disabled + color: #fff + background-color: #17a2b8 + border-color: #17a2b8 + +.btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active, +.show > .btn-info.dropdown-toggle + color: #fff + background-color: #117a8b + border-color: #10707f + +.btn-warning + color: #212529 + background-color: #ffc107 + border-color: #ffc107 + @include partialButton + +.btn-warning:hover + color: #212529 + background-color: #e0a800 + border-color: #d39e00 + +.btn-warning:focus, .btn-warning.focus + box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5) + +.btn-warning.disabled, .btn-warning:disabled + color: #212529 + background-color: #ffc107 + border-color: #ffc107 + +.btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active, +.show > .btn-warning.dropdown-toggle + color: #212529 + background-color: #d39e00 + border-color: #c69500 + +.btn-danger + color: #fff + background-color: #dc3545 + border-color: #dc3545 + @include partialButton + +.btn-danger:hover + color: #fff + background-color: #c82333 + border-color: #bd2130 + +.btn-danger:focus, .btn-danger.focus + box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5) + +.btn-danger.disabled, .btn-danger:disabled + color: #fff + background-color: #dc3545 + border-color: #dc3545 + +.btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active, +.show > .btn-danger.dropdown-toggle + color: #fff + background-color: #bd2130 + border-color: #b21f2d + +.btn-light + color: #212529 + background-color: #f8f9fa + border-color: #f8f9fa + @include partialButton + +.btn-light:hover + color: #212529 + background-color: #e2e6ea + border-color: #dae0e5 + +.btn-light:focus, .btn-light.focus + box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5) + +.btn-light.disabled, .btn-light:disabled + color: #212529 + background-color: #f8f9fa + border-color: #f8f9fa + +.btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active, +.show > .btn-light.dropdown-toggle + color: #212529 + background-color: #dae0e5 + border-color: #d3d9df + +.btn-dark + color: #fff + background-color: #343a40 + border-color: #343a40 + @include partialButton + +.btn-dark:hover + color: #fff + background-color: #23272b + border-color: #1d2124 + +.btn-dark:focus, .btn-dark.focus + box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5) + +.btn-dark.disabled, .btn-dark:disabled + color: #fff + background-color: #343a40 + border-color: #343a40 + +.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active, +.show > .btn-dark.dropdown-toggle + color: #fff + background-color: #1d2124 + border-color: #171a1d diff --git a/src/sass/_input.sass b/src/sass/_input.sass new file mode 100644 index 0000000..7752c9b --- /dev/null +++ b/src/sass/_input.sass @@ -0,0 +1,40 @@ +@import 'root' + +.text-input + width: 80% + height: 2rem + border: none + border-radius: 0.5rem + padding: 0.5rem + margin-bottom: 0.5rem + font-size: 1rem + font-family: 'Roboto', sans-serif + color: $seccondary-color + background-color: $background-color-content + &:focus + outline: none + background-color: $background-color-content-focus + color: $seccondary-color + box-shadow: 0px 0px 30px silver + &:disabled + background-color: $background-color-content-disabled + color: $seccondary-color-disabled + box-shadow: none + &:hover + background-color: $background-color-content-hover + color: $seccondary-color-hover + box-shadow: 0px 0px 30px silver + &:active + background-color: $background-color-content-active + color: $seccondary-color-active + box-shadow: 0px 0px 30px silver + +label + font-size: 1rem + font-family: 'Roboto', sans-serif + color: $main-font-color + margin-bottom: 0.5rem + &:hover + color: $main-font-color-hover + &:active + color: $main-font-color-active diff --git a/src/sass/_mixin.sass b/src/sass/_mixin.sass index 41422c9..ddd1d41 100644 --- a/src/sass/_mixin.sass +++ b/src/sass/_mixin.sass @@ -1,86 +1,93 @@ @import "root" @mixin respond-to($media) - @if $media == handhelds - @media only screen and (max-device-width: 40rem) - @content + @if $media == handhelds + @media only screen and (max-device-width: 40rem) + @content - @else if $media == medium-screens - @media only screen and (min-device-width: 40rem) - @content + @else if $media == medium-screens + @media only screen and (min-device-width: 40rem) + @content - @else if $media == wide-screens - @media only screen and (min-width: 1000px) - @content + @else if $media == wide-screens + @media only screen and (min-width: 1000px) + @content @mixin partialButton - button - width: 5rem !important - height: 2rem !important - text-align: center !important - margin: 0.5rem !important - border-color: $seccond-color !important - border-radius: 0.5rem !important + width: 5rem !important + height: 2rem !important + text-align: center !important + margin: 0.5rem !important + border-color: $seccond-color !important + border-radius: 0.5rem !important - @include respond-to(handhelds) - font-size: 3rem + @include respond-to(handhelds) + font-size: 3rem - @include respond-to(medium-screens) - font-size: 1.5rem + @include respond-to(medium-screens) + font-size: 1.5rem @mixin hoverMe - &:hover - button - color: grey !important + &:hover + button + color: grey !important @mixin shadow - box-shadow: 0px 0px 30px silver + box-shadow: 0px 0px 30px silver @mixin noselect - -webkit-touch-callout: none - -webkit-user-select: none - -khtml-user-select: none - -moz-user-select: none - -ms-user-select: none - user-select: none - pointer-events: none + -webkit-touch-callout: none + -webkit-user-select: none + -khtml-user-select: none + -moz-user-select: none + -ms-user-select: none + user-select: none + pointer-events: none + +.form-group + margin-left: 2rem + margin-right: 2rem + margin-bottom: 0.5rem + flex-wrap: wrap + justify-content: center + display: flex @mixin formBasic - display: block - padding: 2rem - background: $background-color-content - border-radius: 0.7rem - min-height: 20rem - margin: auto - margin-top: 2rem - margin-bottom: 2rem - @include shadow + display: block + padding: 2rem + background: $background-color-content + border-radius: 0.7rem + min-height: 20rem + margin: auto + margin-top: 2rem + margin-bottom: 2rem + @include shadow - @include respond-to(handhelds) - font-size: 2.5em - margin-left: -0.8em - margin-right: -0.8em - border-radius: 0 + @include respond-to(handhelds) + font-size: 2.5em + margin-left: -0.8em + margin-right: -0.8em + border-radius: 0 - @include respond-to(medium-screens) - max-width: 40rem + @include respond-to(medium-screens) + max-width: 40rem - @include respond-to(wide-screens) - max-width: 40rem + @include respond-to(wide-screens) + max-width: 40rem - input - @include respond-to(handhelds) - font-size: 3rem - border-radius: 0.5rem + input + @include respond-to(handhelds) + font-size: 3rem + border-radius: 0.5rem - .check - position: static - @include respond-to(handhelds) - width: 2rem !important - height: 2rem !important + .check + position: static + @include respond-to(handhelds) + width: 2rem !important + height: 2rem !important - button - @include respond-to(handhelds) - font-size: 3rem - padding: 1rem - border-radius: 1rem + button + @include respond-to(handhelds) + font-size: 3rem + padding: 1rem + border-radius: 1rem diff --git a/src/sass/_root.sass b/src/sass/_root.sass index e3babc1..b380612 100644 --- a/src/sass/_root.sass +++ b/src/sass/_root.sass @@ -1,8 +1,20 @@ $main-font: 'Ubuntu', 'Staatliches' $main-font-color: white $main-font-color-hover: lightgrey +$main-font-color-focus: lightgrey +$main-font-color-disabled: lightgrey +$main-font-color-active: lightgrey $main-uschrift-font: 'Ubuntu', Arial -$seccond-color: lightgrey +$seccond-color: #6c757d +$seccondary-color: darkgrey +$seccondary-color-hover: black +$seccondary-color-focus: black +$seccondary-color-disabled: black +$seccondary-color-active: black $background-color: #77B2FF $background-color-content: rgb(198, 223, 255) +$background-color-content-hover: rgb(198, 223, 255) +$background-color-content-focus: rgb(198, 223, 255) +$background-color-content-active: rgb(198, 223, 255) +$background-color-content-disabled: rgb(198, 223, 255) $logo-image: url('../icons/icon128.png') diff --git a/src/sass/app.sass b/src/sass/app.sass index 0b05a95..4c0cfae 100644 --- a/src/sass/app.sass +++ b/src/sass/app.sass @@ -1,41 +1,50 @@ @import 'root' @import 'mixin' @import 'content' +@import 'button' +@import 'input' body - height: 30rem - width: 30rem - background-color: $background-color - text-align: center + height: 30rem + width: 30rem + background-color: $background-color + text-align: center + margin: auto + padding: 1rem + color: $main-font-color + + p + font-size: 1rem + font-weight: bold margin: auto padding: auto color: $main-font-color - - @include partialButton + text-align: center + font-family: 'Roboto', sans-serif h1, h2 - @include noselect + @include noselect form - @include formBasic + @include formBasic .logo - width: 5rem - height: auto - padding-top: 2rem - @include noselect + width: 5rem + height: auto + padding-top: 2rem + @include noselect svg - @include noselect + @include noselect table - color: $main-font-color !important - - th - @include noselect + color: $main-font-color !important + + th + @include noselect a - color: $main-font-color + color: $main-font-color - &:hover - color: $background-color-content \ No newline at end of file + &:hover + color: $background-color-content diff --git a/src/classes/settings.ts b/src/settings.ts similarity index 60% rename from src/classes/settings.ts rename to src/settings.ts index 772b290..8e0af66 100644 --- a/src/classes/settings.ts +++ b/src/settings.ts @@ -1,4 +1,5 @@ -import { Session } from "./session.js"; +import { Session } from "./classes/session.js"; +import { BasicButton } from "./components/button.js"; class Settings { @@ -10,13 +11,15 @@ class Settings { private async renderSettings(): Promise { const settings = document.getElementById('settings'); + const saveButton = new BasicButton('success', 'Save', 'saveSettings').render(); settings.innerHTML = `
- - + +
- `; + settings.innerHTML += saveButton; + const saveSettings = document.getElementById('saveSettings'); saveSettings.addEventListener('click', () => { this.session.contentTest = (document.getElementById('contentTest')).value; @@ -26,4 +29,4 @@ class Settings { } } -new Settings(); \ No newline at end of file +new Settings(); diff --git a/src/types/buttonType.ts b/src/types/buttonType.ts new file mode 100644 index 0000000..660d7f9 --- /dev/null +++ b/src/types/buttonType.ts @@ -0,0 +1 @@ +export type customButton = "neutral" | "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark"; \ No newline at end of file From b32594b1d1f071c0ffac046224cbe1ae33a9ed1c Mon Sep 17 00:00:00 2001 From: Jonas Pfalzgraf Date: Fri, 19 Aug 2022 01:12:34 +0200 Subject: [PATCH 02/13] label changes --- src/sass/_input.sass | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/sass/_input.sass b/src/sass/_input.sass index 7752c9b..4e4c4e8 100644 --- a/src/sass/_input.sass +++ b/src/sass/_input.sass @@ -34,7 +34,3 @@ label font-family: 'Roboto', sans-serif color: $main-font-color margin-bottom: 0.5rem - &:hover - color: $main-font-color-hover - &:active - color: $main-font-color-active From f754b0a5ed66657d6c802bafd082a30eeb9ac801 Mon Sep 17 00:00:00 2001 From: Jonas Pfalzgraf Date: Fri, 19 Aug 2022 01:15:04 +0200 Subject: [PATCH 03/13] codeQL fixes --- .github/workflows/codeql-analysis.yml | 95 +++++++++++++-------------- 1 file changed, 47 insertions(+), 48 deletions(-) diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml index 968170e..bfcc659 100644 --- a/.github/workflows/codeql-analysis.yml +++ b/.github/workflows/codeql-analysis.yml @@ -12,61 +12,60 @@ name: "CodeQL" on: - push: - branches: [ "main" ] - pull_request: - # The branches below must be a subset of the branches above - branches: [ "main" ] - schedule: - - cron: '37 13 * * 4' + push: + branches: ["main"] + pull_request: + # The branches below must be a subset of the branches above + branches: ["main"] + schedule: + - cron: "37 13 * * 4" jobs: - analyze: - name: Analyze - runs-on: ubuntu-latest - permissions: - actions: read - contents: read - security-events: write + analyze: + name: Analyze + runs-on: ubuntu-latest + permissions: + actions: read + contents: read + security-events: write - strategy: - fail-fast: false - matrix: - language: [ 'javascript' ] - # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ] - # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support + strategy: + fail-fast: false + matrix: + language: ["javascript"] + # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ] + # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support - steps: - - name: Checkout repository - uses: actions/checkout@v3 + steps: + - name: Checkout repository + uses: actions/checkout@v3 - # Initializes the CodeQL tools for scanning. - - name: Initialize CodeQL - uses: github/codeql-action/init@v2 - with: - languages: ${{ matrix.language }} - # If you wish to specify custom queries, you can do so here or in a config file. - # By default, queries listed here will override any specified in a config file. - # Prefix the list here with "+" to use these queries and those in the config file. - - # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs - # queries: security-extended,security-and-quality + # Initializes the CodeQL tools for scanning. + - name: Initialize CodeQL + uses: github/codeql-action/init@v2 + with: + languages: ${{ matrix.language }} + # If you wish to specify custom queries, you can do so here or in a config file. + # By default, queries listed here will override any specified in a config file. + # Prefix the list here with "+" to use these queries and those in the config file. - - # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). - # If this step fails, then you should remove it and run the build manually (see below) - - name: Autobuild - uses: github/codeql-action/autobuild@v2 + # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs + # queries: security-extended,security-and-quality - # ℹī¸ Command-line programs to run using the OS shell. - # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun + # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). + # If this step fails, then you should remove it and run the build manually (see below) + - name: Autobuild + uses: github/codeql-action/autobuild@v2 - # If the Autobuild fails above, remove it and uncomment the following three lines. - # modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance. + # ℹī¸ Command-line programs to run using the OS shell. + # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun - # - run: | - # echo "Run, Build Application using script" - # ./location_of_script_within_repo/buildscript.sh + # If the Autobuild fails above, remove it and uncomment the following three lines. + # modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance. - - name: Perform CodeQL Analysis - uses: github/codeql-action/analyze@v2 + # - run: | + # echo "Run, Build Application using script" + # ./location_of_script_within_repo/buildscript.sh + + - name: Perform CodeQL Analysis + uses: github/codeql-action/analyze@v2 From 69b5363c88265f5cae0e83e5a7b123875db65626 Mon Sep 17 00:00:00 2001 From: Jonas Pfalzgraf Date: Mon, 23 Jan 2023 14:44:47 +0100 Subject: [PATCH 04/13] Feature/webpack integration (#9) * working webpack into template * removing package-lock.json * implementing source --- .gitignore | 4 +- package-lock.json | 418 ---------------------------------- package.json | 18 +- src/app.ts | 4 +- src/settings.ts | 4 +- tooling.tsconfig.json | 28 +++ tools/clean.ts | 9 + tsconfig.json | 140 ++++++------ webpack.config.background.cjs | 28 +++ webpack.config.cjs | 28 +++ webpack.config.settings.cjs | 28 +++ 11 files changed, 208 insertions(+), 501 deletions(-) delete mode 100644 package-lock.json create mode 100644 tooling.tsconfig.json create mode 100644 tools/clean.ts create mode 100644 webpack.config.background.cjs create mode 100644 webpack.config.cjs create mode 100644 webpack.config.settings.cjs diff --git a/.gitignore b/.gitignore index e0400f6..786253e 100644 --- a/.gitignore +++ b/.gitignore @@ -689,4 +689,6 @@ dist tools/syncConfig.js tools/deploy.js -tools/v2.js \ No newline at end of file +tools/v2.js +tools/clean.js +package-lock.json diff --git a/package-lock.json b/package-lock.json deleted file mode 100644 index 7fdbd2b..0000000 --- a/package-lock.json +++ /dev/null @@ -1,418 +0,0 @@ -{ - "name": "browser_extension_template", - "version": "0.0.1", - "lockfileVersion": 2, - "requires": true, - "packages": { - "": { - "name": "browser_extension_template", - "version": "0.0.1", - "license": "MIT", - "devDependencies": { - "@types/node": "^18.7.4", - "sass": "^1.39.0", - "typescript": "^4.2.4" - } - }, - "node_modules/@types/node": { - "version": "18.7.4", - "resolved": "https://registry.npmjs.org/@types/node/-/node-18.7.4.tgz", - "integrity": "sha512-RzRcw8c0B8LzryWOR4Wj7YOTFXvdYKwvrb6xQQyuDfnlTxwYXGCV5RZ/TEbq5L5kn+w3rliHAUyRcG1RtbmTFg==", - "dev": true - }, - "node_modules/anymatch": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", - "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", - "dev": true, - "dependencies": { - "normalize-path": "^3.0.0", - "picomatch": "^2.0.4" - }, - "engines": { - "node": ">= 8" - } - }, - "node_modules/binary-extensions": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", - "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/braces": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", - "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", - "dev": true, - "dependencies": { - "fill-range": "^7.0.1" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/chokidar": { - "version": "3.5.3", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", - "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", - "dev": true, - "funding": [ - { - "type": "individual", - "url": "https://paulmillr.com/funding/" - } - ], - "dependencies": { - "anymatch": "~3.1.2", - "braces": "~3.0.2", - "glob-parent": "~5.1.2", - "is-binary-path": "~2.1.0", - "is-glob": "~4.0.1", - "normalize-path": "~3.0.0", - "readdirp": "~3.6.0" - }, - "engines": { - "node": ">= 8.10.0" - }, - "optionalDependencies": { - "fsevents": "~2.3.2" - } - }, - "node_modules/fill-range": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", - "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", - "dev": true, - "dependencies": { - "to-regex-range": "^5.0.1" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/fsevents": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", - "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", - "dev": true, - "hasInstallScript": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": "^8.16.0 || ^10.6.0 || >=11.0.0" - } - }, - "node_modules/glob-parent": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", - "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "dev": true, - "dependencies": { - "is-glob": "^4.0.1" - }, - "engines": { - "node": ">= 6" - } - }, - "node_modules/immutable": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz", - "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==", - "dev": true - }, - "node_modules/is-binary-path": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", - "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", - "dev": true, - "dependencies": { - "binary-extensions": "^2.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/is-extglob": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", - "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/is-glob": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", - "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", - "dev": true, - "dependencies": { - "is-extglob": "^2.1.1" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/is-number": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", - "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", - "dev": true, - "engines": { - "node": ">=0.12.0" - } - }, - "node_modules/normalize-path": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", - "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/picomatch": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "dev": true, - "engines": { - "node": ">=8.6" - }, - "funding": { - "url": "https://github.com/sponsors/jonschlinkert" - } - }, - "node_modules/readdirp": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", - "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", - "dev": true, - "dependencies": { - "picomatch": "^2.2.1" - }, - "engines": { - "node": ">=8.10.0" - } - }, - "node_modules/sass": { - "version": "1.54.4", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.4.tgz", - "integrity": "sha512-3tmF16yvnBwtlPrNBHw/H907j8MlOX8aTBnlNX1yrKx24RKcJGPyLhFUwkoKBKesR3unP93/2z14Ll8NicwQUA==", - "dev": true, - "dependencies": { - "chokidar": ">=3.0.0 <4.0.0", - "immutable": "^4.0.0", - "source-map-js": ">=0.6.2 <2.0.0" - }, - "bin": { - "sass": "sass.js" - }, - "engines": { - "node": ">=12.0.0" - } - }, - "node_modules/source-map-js": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", - "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/to-regex-range": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", - "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", - "dev": true, - "dependencies": { - "is-number": "^7.0.0" - }, - "engines": { - "node": ">=8.0" - } - }, - "node_modules/typescript": { - "version": "4.7.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz", - "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==", - "dev": true, - "bin": { - "tsc": "bin/tsc", - "tsserver": "bin/tsserver" - }, - "engines": { - "node": ">=4.2.0" - } - } - }, - "dependencies": { - "@types/node": { - "version": "18.7.4", - "resolved": "https://registry.npmjs.org/@types/node/-/node-18.7.4.tgz", - "integrity": "sha512-RzRcw8c0B8LzryWOR4Wj7YOTFXvdYKwvrb6xQQyuDfnlTxwYXGCV5RZ/TEbq5L5kn+w3rliHAUyRcG1RtbmTFg==", - "dev": true - }, - "anymatch": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", - "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", - "dev": true, - "requires": { - "normalize-path": "^3.0.0", - "picomatch": "^2.0.4" - } - }, - "binary-extensions": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", - "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", - "dev": true - }, - "braces": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", - "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", - "dev": true, - "requires": { - "fill-range": "^7.0.1" - } - }, - "chokidar": { - "version": "3.5.3", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", - "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", - "dev": true, - "requires": { - "anymatch": "~3.1.2", - "braces": "~3.0.2", - "fsevents": "~2.3.2", - "glob-parent": "~5.1.2", - "is-binary-path": "~2.1.0", - "is-glob": "~4.0.1", - "normalize-path": "~3.0.0", - "readdirp": "~3.6.0" - } - }, - "fill-range": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", - "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", - "dev": true, - "requires": { - "to-regex-range": "^5.0.1" - } - }, - "fsevents": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", - "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", - "dev": true, - "optional": true - }, - "glob-parent": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", - "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "dev": true, - "requires": { - "is-glob": "^4.0.1" - } - }, - "immutable": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz", - "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==", - "dev": true - }, - "is-binary-path": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", - "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", - "dev": true, - "requires": { - "binary-extensions": "^2.0.0" - } - }, - "is-extglob": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", - "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", - "dev": true - }, - "is-glob": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", - "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", - "dev": true, - "requires": { - "is-extglob": "^2.1.1" - } - }, - "is-number": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", - "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", - "dev": true - }, - "normalize-path": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", - "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", - "dev": true - }, - "picomatch": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "dev": true - }, - "readdirp": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", - "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", - "dev": true, - "requires": { - "picomatch": "^2.2.1" - } - }, - "sass": { - "version": "1.54.4", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.4.tgz", - "integrity": "sha512-3tmF16yvnBwtlPrNBHw/H907j8MlOX8aTBnlNX1yrKx24RKcJGPyLhFUwkoKBKesR3unP93/2z14Ll8NicwQUA==", - "dev": true, - "requires": { - "chokidar": ">=3.0.0 <4.0.0", - "immutable": "^4.0.0", - "source-map-js": ">=0.6.2 <2.0.0" - } - }, - "source-map-js": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", - "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", - "dev": true - }, - "to-regex-range": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", - "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", - "dev": true, - "requires": { - "is-number": "^7.0.0" - } - }, - "typescript": { - "version": "4.7.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz", - "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==", - "dev": true - } - } -} diff --git a/package.json b/package.json index 67ccc8c..3bd50a2 100644 --- a/package.json +++ b/package.json @@ -4,19 +4,24 @@ "private": true, "type": "module", "scripts": { - "deploy-v3": "npm run build-tooling && npm run sync && node ./tools/deploy.js && npm run build-js && npm run build-css", + "deploy-v3": "npm run build-tooling && node ./tools/deploy.js && npm run sync && npm run build-js && npm run build-css && node ./tools/clean.js", "deploy-v2": "npm run deploy-v3 && node ./tools/v2.js", - "build-js": "tsc -p tsconfig.json", + "build-js": "webpack --config ./webpack.config.cjs && webpack --config ./webpack.config.settings.cjs && webpack --config ./webpack.config.background.cjs", "build-css": "sass ./src/sass/:./dist/css/", - "build-tooling": "tsc ./tools/v2.ts --target esnext --module esnext --lib ESNext && tsc ./tools/syncConfig.ts --target esnext --module esnext --lib ESNext && tsc ./tools/deploy.ts --target esnext --module esnext --lib ESNext", + "build-tooling": "tsc --project ./tooling.tsconfig.json", "watch-ts": "tsc -w -p tsconfig.json", "watch-sass": "sass --watch ./src/sass/:./dist/css/", "sync": "npm run build-tooling && node ./tools/syncConfig.js" }, "devDependencies": { - "@types/node": "^18.7.4", + "@types/chrome": "^0.0.206", + "@types/node": "^18.11.18", + "@webcomponents/webcomponentsjs": "^2.7.0", "sass": "^1.39.0", - "typescript": "^4.2.4" + "typescript": "^4.2.4", + "ts-loader": "^9.4.2", + "webpack": "^5.75.0", + "webpack-cli": "^5.0.1" }, "browserslist": [ "> 1%", @@ -38,5 +43,8 @@ }, "bugs": { "url": "https://github.com/JosunLP/BrowserExtensionTemplate/issues" + }, + "dependencies": { + "@webcomponents/custom-elements": "^1.5.1" } } \ No newline at end of file diff --git a/src/app.ts b/src/app.ts index 727e9f0..3dc1fa6 100644 --- a/src/app.ts +++ b/src/app.ts @@ -1,4 +1,4 @@ -import { Session } from "./classes/session.js" +import { Session } from "./classes/session" class App { @@ -27,4 +27,4 @@ class App { } } -new App(); \ No newline at end of file +new App(); diff --git a/src/settings.ts b/src/settings.ts index 8e0af66..60538bd 100644 --- a/src/settings.ts +++ b/src/settings.ts @@ -1,5 +1,5 @@ -import { Session } from "./classes/session.js"; -import { BasicButton } from "./components/button.js"; +import { Session } from "./classes/session"; +import { BasicButton } from "./components/button"; class Settings { diff --git a/tooling.tsconfig.json b/tooling.tsconfig.json new file mode 100644 index 0000000..84ac8bc --- /dev/null +++ b/tooling.tsconfig.json @@ -0,0 +1,28 @@ +{ + "compilerOptions": { + "target": "ESNext", + "module": "ESNext", + "outDir": "./tools/", + "rootDir": "./tools/", + "removeComments": true, + "moduleResolution": "node", + "strict": true, + "esModuleInterop": true, + "skipLibCheck": true, + "forceConsistentCasingInFileNames": true, + "types": [ + "node", + "chrome" + ] + }, + "include": [ + "./tools/*.ts" + ], + "exclude": [ + "node_modules", + "./src/*.ts", + "./src/**/*.ts", + "./dist/*.ts", + "./dist/*.js" + ] +} diff --git a/tools/clean.ts b/tools/clean.ts new file mode 100644 index 0000000..caba573 --- /dev/null +++ b/tools/clean.ts @@ -0,0 +1,9 @@ +import * as fs from "fs"; + +function removeExport(file: string) { + let content = fs.readFileSync(file, "utf8"); + content = content.replace("export {};", ""); + fs.writeFileSync(file, content); +} + +removeExport("./dist/js/background.js"); diff --git a/tsconfig.json b/tsconfig.json index fe9081d..3e8038b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,81 +1,75 @@ { - "compilerOptions": { - /* Visit https://aka.ms/tsconfig.json to read more about this file */ + "compilerOptions": { + /* Visit https://aka.ms/tsconfig.json to read more about this file */ - /* Basic Options */ - // "incremental": true, /* Enable incremental compilation */ - "target": "ESNext", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */ - "module": "ESNext", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */ - // "lib": ["ESNext"], /* Specify library files to be included in the compilation. */ - // "allowJs": true, /* Allow javascript files to be compiled. */ - // "checkJs": true, /* Report errors in .js files. */ - // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */ - // "declaration": true, /* Generates corresponding '.d.ts' file. */ - // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ - // "sourceMap": true, /* Generates corresponding '.map' file. */ - // "outFile": "./public/js/app.js", /* Concatenate and emit output to single file. */ - "outDir": "./dist/js/", /* Redirect output structure to the directory. */ - // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ - // "composite": true, /* Enable project compilation */ - // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */ - // "removeComments": true, /* Do not emit comments to output. */ - // "noEmit": true, /* Do not emit outputs. */ - // "importHelpers": true, /* Import emit helpers from 'tslib'. */ - // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ - // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ - "moduleResolution": "node", - /* Strict Type-Checking Options */ - "strict": true, /* Enable all strict type-checking options. */ - // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ - // "strictNullChecks": true, /* Enable strict null checks. */ - // "strictFunctionTypes": true, /* Enable strict checking of function types. */ - // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ - // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ - // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ - // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ + /* Basic Options */ + // "incremental": true, /* Enable incremental compilation */ + "target": "ESNext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */, + "module": "ESNext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */, + // "lib": ["ESNext"], /* Specify library files to be included in the compilation. */ + // "allowJs": true, /* Allow javascript files to be compiled. */ + // "checkJs": true, /* Report errors in .js files. */ + // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */ + "declaration": true, /* Generates corresponding '.d.ts' file. */ + "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ + "sourceMap": true /* Generates corresponding '.map' file. */, + // "outFile": "./public/js/app.js", /* Concatenate and emit output to single file. */ + "outDir": "./dist/js/" /* Redirect output structure to the directory. */, + // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ + // "composite": true, /* Enable project compilation */ + // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */ + "removeComments": true /* Do not emit comments to output. */, + // "noEmit": true, /* Do not emit outputs. */ + // "importHelpers": true, /* Import emit helpers from 'tslib'. */ + // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ + // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ + "moduleResolution": "node", + /* Strict Type-Checking Options */ + "strict": true /* Enable all strict type-checking options. */, + "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ + // "strictNullChecks": true, /* Enable strict null checks. */ + // "strictFunctionTypes": true, /* Enable strict checking of function types. */ + // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ + // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ + // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ + // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ - /* Additional Checks */ - // "noUnusedLocals": true, /* Report errors on unused locals. */ - // "noUnusedParameters": true, /* Report errors on unused parameters. */ - // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ - // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ - // "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */ - // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an 'override' modifier. */ - // "noPropertyAccessFromIndexSignature": true, /* Require undeclared properties from index signatures to use element accesses. */ + /* Additional Checks */ + // "noUnusedLocals": true, /* Report errors on unused locals. */ + // "noUnusedParameters": true, /* Report errors on unused parameters. */ + // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ + // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ + // "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */ + // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an 'override' modifier. */ + // "noPropertyAccessFromIndexSignature": true, /* Require undeclared properties from index signatures to use element accesses. */ - /* Module Resolution Options */ - // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ - // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ - // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ - // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ - // "typeRoots": [], /* List of folders to include type definitions from. */ - // "types": [], /* Type declaration files to be included in compilation. */ - // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ - "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ - // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ - // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ + /* Module Resolution Options */ + // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ + // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ + // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ + // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ + // "typeRoots": [], /* List of folders to include type definitions from. */ + // "types": [], /* Type declaration files to be included in compilation. */ + // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ + "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */, + // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ + // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ - /* Source Map Options */ - // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ - // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ - // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ - // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ + /* Source Map Options */ + // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ + // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ + // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ + // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ - /* Experimental Options */ - // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ - // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ + /* Experimental Options */ + // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ + // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ - /* Advanced Options */ - "skipLibCheck": true, /* Skip type checking of declaration files. */ - "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */ - }, - "include": [ - "./src/**/*.ts", - "./src/*.ts" - ], - "exclude": [ - "./tools/*.ts", - "./dist/*.ts", - "./dist/*.js" - ] + /* Advanced Options */ + "skipLibCheck": true /* Skip type checking of declaration files. */, + "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */ + }, + "include": ["./src/**/*.ts", "./src/*.ts"], + "exclude": ["node_modules", "./tools/*.ts", "./dist/*.ts", "./dist/*.js"], + "types": ["node", "chrome"] } diff --git a/webpack.config.background.cjs b/webpack.config.background.cjs new file mode 100644 index 0000000..7102629 --- /dev/null +++ b/webpack.config.background.cjs @@ -0,0 +1,28 @@ +const path = require('path'); + +module.exports = { + entry: './src/background.ts', + mode: 'production', + devtool: 'source-map', + module: { + rules: [ + { + test: /\.tsx?$/, + use: 'ts-loader', + exclude: [ + "/node_modules/", + "/dist/", + "/src/app.ts", + "/src/settings.ts" + ], + }, + ], + }, + resolve: { + extensions: ['.tsx', '.ts'], + }, + output: { + filename: 'background.js', + path: path.resolve(__dirname, 'dist/js'), + }, +}; diff --git a/webpack.config.cjs b/webpack.config.cjs new file mode 100644 index 0000000..b7bf57e --- /dev/null +++ b/webpack.config.cjs @@ -0,0 +1,28 @@ +const path = require('path'); + +module.exports = { + entry: './src/app.ts', + mode: 'production', + devtool: 'source-map', + module: { + rules: [ + { + test: /\.tsx?$/, + use: 'ts-loader', + exclude: [ + "/node_modules/", + "/dist/", + "/src/background.ts", + "/src/settings.ts" + ], + }, + ], + }, + resolve: { + extensions: ['.tsx', '.ts'], + }, + output: { + filename: 'app.js', + path: path.resolve(__dirname, 'dist/js'), + }, +}; diff --git a/webpack.config.settings.cjs b/webpack.config.settings.cjs new file mode 100644 index 0000000..e8e1821 --- /dev/null +++ b/webpack.config.settings.cjs @@ -0,0 +1,28 @@ +const path = require('path'); + +module.exports = { + entry: './src/settings.ts', + mode: 'production', + devtool: 'source-map', + module: { + rules: [ + { + test: /\.tsx?$/, + use: 'ts-loader', + exclude: [ + "/node_modules/", + "/dist/", + "/src/background.ts", + "/src/app.ts" + ], + }, + ], + }, + resolve: { + extensions: ['.tsx', '.ts'], + }, + output: { + filename: 'settings.js', + path: path.resolve(__dirname, 'dist/js'), + }, +}; From 43b2d8c82b409a77386faf68843b231d8b9b68a7 Mon Sep 17 00:00:00 2001 From: Jonas Pfalzgraf Date: Tue, 24 Jan 2023 01:03:04 +0100 Subject: [PATCH 05/13] style update --- package.json | 5 +- src/sass/_button.sass | 226 ------------------------------------------ src/sass/_input.sass | 36 ------- src/sass/_root.sass | 6 ++ src/sass/app.sass | 3 +- src/settings.ts | 2 +- 6 files changed, 11 insertions(+), 267 deletions(-) delete mode 100644 src/sass/_button.sass delete mode 100644 src/sass/_input.sass diff --git a/package.json b/package.json index 3bd50a2..a383aac 100644 --- a/package.json +++ b/package.json @@ -18,8 +18,8 @@ "@types/node": "^18.11.18", "@webcomponents/webcomponentsjs": "^2.7.0", "sass": "^1.39.0", - "typescript": "^4.2.4", "ts-loader": "^9.4.2", + "typescript": "^4.2.4", "webpack": "^5.75.0", "webpack-cli": "^5.0.1" }, @@ -45,6 +45,7 @@ "url": "https://github.com/JosunLP/BrowserExtensionTemplate/issues" }, "dependencies": { - "@webcomponents/custom-elements": "^1.5.1" + "@webcomponents/custom-elements": "^1.5.1", + "bootstrap": "^5.2.3" } } \ No newline at end of file diff --git a/src/sass/_button.sass b/src/sass/_button.sass deleted file mode 100644 index de19aab..0000000 --- a/src/sass/_button.sass +++ /dev/null @@ -1,226 +0,0 @@ -@import 'mixin' - -.btn-neutral - color: #fff - background-color: #000 - border-color: #000 - @include partialButton - -.btn-neutral:hover - color: #000 - background-color: #fff - border-color: #fff - -.btn-neutral:focus, .btn-neutral.focus - box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5) - -.btn-neutral.disabled, .btn-neutral:disabled - color: #fff - background-color: #000 - border-color: #000 - -.btn-neutral:not(:disabled):not(.disabled):active, .btn-neutral:not(:disabled):not(.disabled).active, -.show > .btn-neutral.dropdown-toggle - color: #000 - background-color: #fff - border-color: #fff - -.btn-primary - color: #fff - background-color: #007bff - border-color: #007bff - @include partialButton - -.btn-primary:hover - color: #fff - background-color: #0069d9 - border-color: #0062cc - -.btn-primary:focus, .btn-primary.focus - box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5) - -.btn-primary.disabled, .btn-primary:disabled - color: #fff - background-color: #007bff - border-color: #007bff - -.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, -.show > .btn-primary.dropdown-toggle - color: #fff - background-color: #0062cc - border-color: #005cbf - -.btn-secondary - color: #fff - background-color: #6c757d - border-color: #6c757d - @include partialButton - -.btn-secondary:hover - color: #fff - background-color: #5a6268 - border-color: #545b62 - -.btn-secondary:focus, .btn-secondary.focus - box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5) - -.btn-secondary.disabled, .btn-secondary:disabled - color: #fff - background-color: #6c757d - border-color: #6c757d - -.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, -.show > .btn-secondary.dropdown-toggle - color: #fff - background-color: #545b62 - border-color: #4e555b - -.btn-success - color: #fff - background-color: #28a745 - border-color: #28a745 - @include partialButton - -.btn-success:hover - color: #fff - background-color: #218838 - border-color: #1e7e34 - -.btn-success:focus, .btn-success.focus - box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5) - -.btn-success.disabled, .btn-success:disabled - color: #fff - background-color: #28a745 - border-color: #28a745 - -.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, -.show > .btn-success.dropdown-toggle - color: #fff - background-color: #1e7e34 - border-color: #1c7430 - -.btn-info - color: #fff - background-color: #17a2b8 - border-color: #17a2b8 - @include partialButton - -.btn-info:hover - color: #fff - background-color: #138496 - border-color: #117a8b - -.btn-info:focus, .btn-info.focus - box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5) - -.btn-info.disabled, .btn-info:disabled - color: #fff - background-color: #17a2b8 - border-color: #17a2b8 - -.btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active, -.show > .btn-info.dropdown-toggle - color: #fff - background-color: #117a8b - border-color: #10707f - -.btn-warning - color: #212529 - background-color: #ffc107 - border-color: #ffc107 - @include partialButton - -.btn-warning:hover - color: #212529 - background-color: #e0a800 - border-color: #d39e00 - -.btn-warning:focus, .btn-warning.focus - box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5) - -.btn-warning.disabled, .btn-warning:disabled - color: #212529 - background-color: #ffc107 - border-color: #ffc107 - -.btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active, -.show > .btn-warning.dropdown-toggle - color: #212529 - background-color: #d39e00 - border-color: #c69500 - -.btn-danger - color: #fff - background-color: #dc3545 - border-color: #dc3545 - @include partialButton - -.btn-danger:hover - color: #fff - background-color: #c82333 - border-color: #bd2130 - -.btn-danger:focus, .btn-danger.focus - box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5) - -.btn-danger.disabled, .btn-danger:disabled - color: #fff - background-color: #dc3545 - border-color: #dc3545 - -.btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active, -.show > .btn-danger.dropdown-toggle - color: #fff - background-color: #bd2130 - border-color: #b21f2d - -.btn-light - color: #212529 - background-color: #f8f9fa - border-color: #f8f9fa - @include partialButton - -.btn-light:hover - color: #212529 - background-color: #e2e6ea - border-color: #dae0e5 - -.btn-light:focus, .btn-light.focus - box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5) - -.btn-light.disabled, .btn-light:disabled - color: #212529 - background-color: #f8f9fa - border-color: #f8f9fa - -.btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active, -.show > .btn-light.dropdown-toggle - color: #212529 - background-color: #dae0e5 - border-color: #d3d9df - -.btn-dark - color: #fff - background-color: #343a40 - border-color: #343a40 - @include partialButton - -.btn-dark:hover - color: #fff - background-color: #23272b - border-color: #1d2124 - -.btn-dark:focus, .btn-dark.focus - box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5) - -.btn-dark.disabled, .btn-dark:disabled - color: #fff - background-color: #343a40 - border-color: #343a40 - -.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active, -.show > .btn-dark.dropdown-toggle - color: #fff - background-color: #1d2124 - border-color: #171a1d diff --git a/src/sass/_input.sass b/src/sass/_input.sass deleted file mode 100644 index 4e4c4e8..0000000 --- a/src/sass/_input.sass +++ /dev/null @@ -1,36 +0,0 @@ -@import 'root' - -.text-input - width: 80% - height: 2rem - border: none - border-radius: 0.5rem - padding: 0.5rem - margin-bottom: 0.5rem - font-size: 1rem - font-family: 'Roboto', sans-serif - color: $seccondary-color - background-color: $background-color-content - &:focus - outline: none - background-color: $background-color-content-focus - color: $seccondary-color - box-shadow: 0px 0px 30px silver - &:disabled - background-color: $background-color-content-disabled - color: $seccondary-color-disabled - box-shadow: none - &:hover - background-color: $background-color-content-hover - color: $seccondary-color-hover - box-shadow: 0px 0px 30px silver - &:active - background-color: $background-color-content-active - color: $seccondary-color-active - box-shadow: 0px 0px 30px silver - -label - font-size: 1rem - font-family: 'Roboto', sans-serif - color: $main-font-color - margin-bottom: 0.5rem diff --git a/src/sass/_root.sass b/src/sass/_root.sass index b380612..3a50f8d 100644 --- a/src/sass/_root.sass +++ b/src/sass/_root.sass @@ -5,6 +5,12 @@ $main-font-color-focus: lightgrey $main-font-color-disabled: lightgrey $main-font-color-active: lightgrey $main-uschrift-font: 'Ubuntu', Arial +$primary-color: #007bff +$primary-color-hover: #0069d9 +$primary-color-focus: #0062cc +$primary-color-disabled: #0069d9 +$primary-color-active: #0062cc +$background-color-content-shadow: #0069d9 $seccond-color: #6c757d $seccondary-color: darkgrey $seccondary-color-hover: black diff --git a/src/sass/app.sass b/src/sass/app.sass index 4c0cfae..f953809 100644 --- a/src/sass/app.sass +++ b/src/sass/app.sass @@ -1,8 +1,7 @@ @import 'root' @import 'mixin' @import 'content' -@import 'button' -@import 'input' +@import "../../node_modules/bootstrap/scss/bootstrap" body height: 30rem diff --git a/src/settings.ts b/src/settings.ts index 60538bd..24d6bb8 100644 --- a/src/settings.ts +++ b/src/settings.ts @@ -14,8 +14,8 @@ class Settings { const saveButton = new BasicButton('success', 'Save', 'saveSettings').render(); settings.innerHTML = `
- +
`; settings.innerHTML += saveButton; From 2319a1fd9be7965fe4294583bc05f6838901d6ae Mon Sep 17 00:00:00 2001 From: Jonas Pfalzgraf Date: Tue, 24 Jan 2023 01:07:55 +0100 Subject: [PATCH 06/13] Version 1.4.0 (#10) * Feature/webpack integration (#9) * working webpack into template * removing package-lock.json * implementing source * style update --- .gitignore | 4 +- package-lock.json | 418 ---------------------------------- package.json | 19 +- src/app.ts | 4 +- src/sass/_button.sass | 226 ------------------ src/sass/_input.sass | 36 --- src/sass/_root.sass | 6 + src/sass/app.sass | 3 +- src/settings.ts | 6 +- tooling.tsconfig.json | 28 +++ tools/clean.ts | 9 + tsconfig.json | 140 ++++++------ webpack.config.background.cjs | 28 +++ webpack.config.cjs | 28 +++ webpack.config.settings.cjs | 28 +++ 15 files changed, 217 insertions(+), 766 deletions(-) delete mode 100644 package-lock.json delete mode 100644 src/sass/_button.sass delete mode 100644 src/sass/_input.sass create mode 100644 tooling.tsconfig.json create mode 100644 tools/clean.ts create mode 100644 webpack.config.background.cjs create mode 100644 webpack.config.cjs create mode 100644 webpack.config.settings.cjs diff --git a/.gitignore b/.gitignore index e0400f6..786253e 100644 --- a/.gitignore +++ b/.gitignore @@ -689,4 +689,6 @@ dist tools/syncConfig.js tools/deploy.js -tools/v2.js \ No newline at end of file +tools/v2.js +tools/clean.js +package-lock.json diff --git a/package-lock.json b/package-lock.json deleted file mode 100644 index 7fdbd2b..0000000 --- a/package-lock.json +++ /dev/null @@ -1,418 +0,0 @@ -{ - "name": "browser_extension_template", - "version": "0.0.1", - "lockfileVersion": 2, - "requires": true, - "packages": { - "": { - "name": "browser_extension_template", - "version": "0.0.1", - "license": "MIT", - "devDependencies": { - "@types/node": "^18.7.4", - "sass": "^1.39.0", - "typescript": "^4.2.4" - } - }, - "node_modules/@types/node": { - "version": "18.7.4", - "resolved": "https://registry.npmjs.org/@types/node/-/node-18.7.4.tgz", - "integrity": "sha512-RzRcw8c0B8LzryWOR4Wj7YOTFXvdYKwvrb6xQQyuDfnlTxwYXGCV5RZ/TEbq5L5kn+w3rliHAUyRcG1RtbmTFg==", - "dev": true - }, - "node_modules/anymatch": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", - "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", - "dev": true, - "dependencies": { - "normalize-path": "^3.0.0", - "picomatch": "^2.0.4" - }, - "engines": { - "node": ">= 8" - } - }, - "node_modules/binary-extensions": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", - "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/braces": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", - "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", - "dev": true, - "dependencies": { - "fill-range": "^7.0.1" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/chokidar": { - "version": "3.5.3", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", - "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", - "dev": true, - "funding": [ - { - "type": "individual", - "url": "https://paulmillr.com/funding/" - } - ], - "dependencies": { - "anymatch": "~3.1.2", - "braces": "~3.0.2", - "glob-parent": "~5.1.2", - "is-binary-path": "~2.1.0", - "is-glob": "~4.0.1", - "normalize-path": "~3.0.0", - "readdirp": "~3.6.0" - }, - "engines": { - "node": ">= 8.10.0" - }, - "optionalDependencies": { - "fsevents": "~2.3.2" - } - }, - "node_modules/fill-range": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", - "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", - "dev": true, - "dependencies": { - "to-regex-range": "^5.0.1" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/fsevents": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", - "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", - "dev": true, - "hasInstallScript": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": "^8.16.0 || ^10.6.0 || >=11.0.0" - } - }, - "node_modules/glob-parent": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", - "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "dev": true, - "dependencies": { - "is-glob": "^4.0.1" - }, - "engines": { - "node": ">= 6" - } - }, - "node_modules/immutable": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz", - "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==", - "dev": true - }, - "node_modules/is-binary-path": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", - "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", - "dev": true, - "dependencies": { - "binary-extensions": "^2.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/is-extglob": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", - "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/is-glob": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", - "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", - "dev": true, - "dependencies": { - "is-extglob": "^2.1.1" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/is-number": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", - "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", - "dev": true, - "engines": { - "node": ">=0.12.0" - } - }, - "node_modules/normalize-path": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", - "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/picomatch": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "dev": true, - "engines": { - "node": ">=8.6" - }, - "funding": { - "url": "https://github.com/sponsors/jonschlinkert" - } - }, - "node_modules/readdirp": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", - "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", - "dev": true, - "dependencies": { - "picomatch": "^2.2.1" - }, - "engines": { - "node": ">=8.10.0" - } - }, - "node_modules/sass": { - "version": "1.54.4", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.4.tgz", - "integrity": "sha512-3tmF16yvnBwtlPrNBHw/H907j8MlOX8aTBnlNX1yrKx24RKcJGPyLhFUwkoKBKesR3unP93/2z14Ll8NicwQUA==", - "dev": true, - "dependencies": { - "chokidar": ">=3.0.0 <4.0.0", - "immutable": "^4.0.0", - "source-map-js": ">=0.6.2 <2.0.0" - }, - "bin": { - "sass": "sass.js" - }, - "engines": { - "node": ">=12.0.0" - } - }, - "node_modules/source-map-js": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", - "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/to-regex-range": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", - "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", - "dev": true, - "dependencies": { - "is-number": "^7.0.0" - }, - "engines": { - "node": ">=8.0" - } - }, - "node_modules/typescript": { - "version": "4.7.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz", - "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==", - "dev": true, - "bin": { - "tsc": "bin/tsc", - "tsserver": "bin/tsserver" - }, - "engines": { - "node": ">=4.2.0" - } - } - }, - "dependencies": { - "@types/node": { - "version": "18.7.4", - "resolved": "https://registry.npmjs.org/@types/node/-/node-18.7.4.tgz", - "integrity": "sha512-RzRcw8c0B8LzryWOR4Wj7YOTFXvdYKwvrb6xQQyuDfnlTxwYXGCV5RZ/TEbq5L5kn+w3rliHAUyRcG1RtbmTFg==", - "dev": true - }, - "anymatch": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", - "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", - "dev": true, - "requires": { - "normalize-path": "^3.0.0", - "picomatch": "^2.0.4" - } - }, - "binary-extensions": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", - "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", - "dev": true - }, - "braces": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", - "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", - "dev": true, - "requires": { - "fill-range": "^7.0.1" - } - }, - "chokidar": { - "version": "3.5.3", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", - "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", - "dev": true, - "requires": { - "anymatch": "~3.1.2", - "braces": "~3.0.2", - "fsevents": "~2.3.2", - "glob-parent": "~5.1.2", - "is-binary-path": "~2.1.0", - "is-glob": "~4.0.1", - "normalize-path": "~3.0.0", - "readdirp": "~3.6.0" - } - }, - "fill-range": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", - "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", - "dev": true, - "requires": { - "to-regex-range": "^5.0.1" - } - }, - "fsevents": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", - "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", - "dev": true, - "optional": true - }, - "glob-parent": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", - "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "dev": true, - "requires": { - "is-glob": "^4.0.1" - } - }, - "immutable": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz", - "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==", - "dev": true - }, - "is-binary-path": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", - "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", - "dev": true, - "requires": { - "binary-extensions": "^2.0.0" - } - }, - "is-extglob": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", - "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", - "dev": true - }, - "is-glob": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", - "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", - "dev": true, - "requires": { - "is-extglob": "^2.1.1" - } - }, - "is-number": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", - "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", - "dev": true - }, - "normalize-path": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", - "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", - "dev": true - }, - "picomatch": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "dev": true - }, - "readdirp": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", - "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", - "dev": true, - "requires": { - "picomatch": "^2.2.1" - } - }, - "sass": { - "version": "1.54.4", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.4.tgz", - "integrity": "sha512-3tmF16yvnBwtlPrNBHw/H907j8MlOX8aTBnlNX1yrKx24RKcJGPyLhFUwkoKBKesR3unP93/2z14Ll8NicwQUA==", - "dev": true, - "requires": { - "chokidar": ">=3.0.0 <4.0.0", - "immutable": "^4.0.0", - "source-map-js": ">=0.6.2 <2.0.0" - } - }, - "source-map-js": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", - "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", - "dev": true - }, - "to-regex-range": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", - "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", - "dev": true, - "requires": { - "is-number": "^7.0.0" - } - }, - "typescript": { - "version": "4.7.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz", - "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==", - "dev": true - } - } -} diff --git a/package.json b/package.json index 67ccc8c..a383aac 100644 --- a/package.json +++ b/package.json @@ -4,19 +4,24 @@ "private": true, "type": "module", "scripts": { - "deploy-v3": "npm run build-tooling && npm run sync && node ./tools/deploy.js && npm run build-js && npm run build-css", + "deploy-v3": "npm run build-tooling && node ./tools/deploy.js && npm run sync && npm run build-js && npm run build-css && node ./tools/clean.js", "deploy-v2": "npm run deploy-v3 && node ./tools/v2.js", - "build-js": "tsc -p tsconfig.json", + "build-js": "webpack --config ./webpack.config.cjs && webpack --config ./webpack.config.settings.cjs && webpack --config ./webpack.config.background.cjs", "build-css": "sass ./src/sass/:./dist/css/", - "build-tooling": "tsc ./tools/v2.ts --target esnext --module esnext --lib ESNext && tsc ./tools/syncConfig.ts --target esnext --module esnext --lib ESNext && tsc ./tools/deploy.ts --target esnext --module esnext --lib ESNext", + "build-tooling": "tsc --project ./tooling.tsconfig.json", "watch-ts": "tsc -w -p tsconfig.json", "watch-sass": "sass --watch ./src/sass/:./dist/css/", "sync": "npm run build-tooling && node ./tools/syncConfig.js" }, "devDependencies": { - "@types/node": "^18.7.4", + "@types/chrome": "^0.0.206", + "@types/node": "^18.11.18", + "@webcomponents/webcomponentsjs": "^2.7.0", "sass": "^1.39.0", - "typescript": "^4.2.4" + "ts-loader": "^9.4.2", + "typescript": "^4.2.4", + "webpack": "^5.75.0", + "webpack-cli": "^5.0.1" }, "browserslist": [ "> 1%", @@ -38,5 +43,9 @@ }, "bugs": { "url": "https://github.com/JosunLP/BrowserExtensionTemplate/issues" + }, + "dependencies": { + "@webcomponents/custom-elements": "^1.5.1", + "bootstrap": "^5.2.3" } } \ No newline at end of file diff --git a/src/app.ts b/src/app.ts index 727e9f0..3dc1fa6 100644 --- a/src/app.ts +++ b/src/app.ts @@ -1,4 +1,4 @@ -import { Session } from "./classes/session.js" +import { Session } from "./classes/session" class App { @@ -27,4 +27,4 @@ class App { } } -new App(); \ No newline at end of file +new App(); diff --git a/src/sass/_button.sass b/src/sass/_button.sass deleted file mode 100644 index de19aab..0000000 --- a/src/sass/_button.sass +++ /dev/null @@ -1,226 +0,0 @@ -@import 'mixin' - -.btn-neutral - color: #fff - background-color: #000 - border-color: #000 - @include partialButton - -.btn-neutral:hover - color: #000 - background-color: #fff - border-color: #fff - -.btn-neutral:focus, .btn-neutral.focus - box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5) - -.btn-neutral.disabled, .btn-neutral:disabled - color: #fff - background-color: #000 - border-color: #000 - -.btn-neutral:not(:disabled):not(.disabled):active, .btn-neutral:not(:disabled):not(.disabled).active, -.show > .btn-neutral.dropdown-toggle - color: #000 - background-color: #fff - border-color: #fff - -.btn-primary - color: #fff - background-color: #007bff - border-color: #007bff - @include partialButton - -.btn-primary:hover - color: #fff - background-color: #0069d9 - border-color: #0062cc - -.btn-primary:focus, .btn-primary.focus - box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5) - -.btn-primary.disabled, .btn-primary:disabled - color: #fff - background-color: #007bff - border-color: #007bff - -.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, -.show > .btn-primary.dropdown-toggle - color: #fff - background-color: #0062cc - border-color: #005cbf - -.btn-secondary - color: #fff - background-color: #6c757d - border-color: #6c757d - @include partialButton - -.btn-secondary:hover - color: #fff - background-color: #5a6268 - border-color: #545b62 - -.btn-secondary:focus, .btn-secondary.focus - box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5) - -.btn-secondary.disabled, .btn-secondary:disabled - color: #fff - background-color: #6c757d - border-color: #6c757d - -.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, -.show > .btn-secondary.dropdown-toggle - color: #fff - background-color: #545b62 - border-color: #4e555b - -.btn-success - color: #fff - background-color: #28a745 - border-color: #28a745 - @include partialButton - -.btn-success:hover - color: #fff - background-color: #218838 - border-color: #1e7e34 - -.btn-success:focus, .btn-success.focus - box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5) - -.btn-success.disabled, .btn-success:disabled - color: #fff - background-color: #28a745 - border-color: #28a745 - -.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, -.show > .btn-success.dropdown-toggle - color: #fff - background-color: #1e7e34 - border-color: #1c7430 - -.btn-info - color: #fff - background-color: #17a2b8 - border-color: #17a2b8 - @include partialButton - -.btn-info:hover - color: #fff - background-color: #138496 - border-color: #117a8b - -.btn-info:focus, .btn-info.focus - box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5) - -.btn-info.disabled, .btn-info:disabled - color: #fff - background-color: #17a2b8 - border-color: #17a2b8 - -.btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active, -.show > .btn-info.dropdown-toggle - color: #fff - background-color: #117a8b - border-color: #10707f - -.btn-warning - color: #212529 - background-color: #ffc107 - border-color: #ffc107 - @include partialButton - -.btn-warning:hover - color: #212529 - background-color: #e0a800 - border-color: #d39e00 - -.btn-warning:focus, .btn-warning.focus - box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5) - -.btn-warning.disabled, .btn-warning:disabled - color: #212529 - background-color: #ffc107 - border-color: #ffc107 - -.btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active, -.show > .btn-warning.dropdown-toggle - color: #212529 - background-color: #d39e00 - border-color: #c69500 - -.btn-danger - color: #fff - background-color: #dc3545 - border-color: #dc3545 - @include partialButton - -.btn-danger:hover - color: #fff - background-color: #c82333 - border-color: #bd2130 - -.btn-danger:focus, .btn-danger.focus - box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5) - -.btn-danger.disabled, .btn-danger:disabled - color: #fff - background-color: #dc3545 - border-color: #dc3545 - -.btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active, -.show > .btn-danger.dropdown-toggle - color: #fff - background-color: #bd2130 - border-color: #b21f2d - -.btn-light - color: #212529 - background-color: #f8f9fa - border-color: #f8f9fa - @include partialButton - -.btn-light:hover - color: #212529 - background-color: #e2e6ea - border-color: #dae0e5 - -.btn-light:focus, .btn-light.focus - box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5) - -.btn-light.disabled, .btn-light:disabled - color: #212529 - background-color: #f8f9fa - border-color: #f8f9fa - -.btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active, -.show > .btn-light.dropdown-toggle - color: #212529 - background-color: #dae0e5 - border-color: #d3d9df - -.btn-dark - color: #fff - background-color: #343a40 - border-color: #343a40 - @include partialButton - -.btn-dark:hover - color: #fff - background-color: #23272b - border-color: #1d2124 - -.btn-dark:focus, .btn-dark.focus - box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5) - -.btn-dark.disabled, .btn-dark:disabled - color: #fff - background-color: #343a40 - border-color: #343a40 - -.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active, -.show > .btn-dark.dropdown-toggle - color: #fff - background-color: #1d2124 - border-color: #171a1d diff --git a/src/sass/_input.sass b/src/sass/_input.sass deleted file mode 100644 index 4e4c4e8..0000000 --- a/src/sass/_input.sass +++ /dev/null @@ -1,36 +0,0 @@ -@import 'root' - -.text-input - width: 80% - height: 2rem - border: none - border-radius: 0.5rem - padding: 0.5rem - margin-bottom: 0.5rem - font-size: 1rem - font-family: 'Roboto', sans-serif - color: $seccondary-color - background-color: $background-color-content - &:focus - outline: none - background-color: $background-color-content-focus - color: $seccondary-color - box-shadow: 0px 0px 30px silver - &:disabled - background-color: $background-color-content-disabled - color: $seccondary-color-disabled - box-shadow: none - &:hover - background-color: $background-color-content-hover - color: $seccondary-color-hover - box-shadow: 0px 0px 30px silver - &:active - background-color: $background-color-content-active - color: $seccondary-color-active - box-shadow: 0px 0px 30px silver - -label - font-size: 1rem - font-family: 'Roboto', sans-serif - color: $main-font-color - margin-bottom: 0.5rem diff --git a/src/sass/_root.sass b/src/sass/_root.sass index b380612..3a50f8d 100644 --- a/src/sass/_root.sass +++ b/src/sass/_root.sass @@ -5,6 +5,12 @@ $main-font-color-focus: lightgrey $main-font-color-disabled: lightgrey $main-font-color-active: lightgrey $main-uschrift-font: 'Ubuntu', Arial +$primary-color: #007bff +$primary-color-hover: #0069d9 +$primary-color-focus: #0062cc +$primary-color-disabled: #0069d9 +$primary-color-active: #0062cc +$background-color-content-shadow: #0069d9 $seccond-color: #6c757d $seccondary-color: darkgrey $seccondary-color-hover: black diff --git a/src/sass/app.sass b/src/sass/app.sass index 4c0cfae..f953809 100644 --- a/src/sass/app.sass +++ b/src/sass/app.sass @@ -1,8 +1,7 @@ @import 'root' @import 'mixin' @import 'content' -@import 'button' -@import 'input' +@import "../../node_modules/bootstrap/scss/bootstrap" body height: 30rem diff --git a/src/settings.ts b/src/settings.ts index 8e0af66..24d6bb8 100644 --- a/src/settings.ts +++ b/src/settings.ts @@ -1,5 +1,5 @@ -import { Session } from "./classes/session.js"; -import { BasicButton } from "./components/button.js"; +import { Session } from "./classes/session"; +import { BasicButton } from "./components/button"; class Settings { @@ -14,8 +14,8 @@ class Settings { const saveButton = new BasicButton('success', 'Save', 'saveSettings').render(); settings.innerHTML = `
- +
`; settings.innerHTML += saveButton; diff --git a/tooling.tsconfig.json b/tooling.tsconfig.json new file mode 100644 index 0000000..84ac8bc --- /dev/null +++ b/tooling.tsconfig.json @@ -0,0 +1,28 @@ +{ + "compilerOptions": { + "target": "ESNext", + "module": "ESNext", + "outDir": "./tools/", + "rootDir": "./tools/", + "removeComments": true, + "moduleResolution": "node", + "strict": true, + "esModuleInterop": true, + "skipLibCheck": true, + "forceConsistentCasingInFileNames": true, + "types": [ + "node", + "chrome" + ] + }, + "include": [ + "./tools/*.ts" + ], + "exclude": [ + "node_modules", + "./src/*.ts", + "./src/**/*.ts", + "./dist/*.ts", + "./dist/*.js" + ] +} diff --git a/tools/clean.ts b/tools/clean.ts new file mode 100644 index 0000000..caba573 --- /dev/null +++ b/tools/clean.ts @@ -0,0 +1,9 @@ +import * as fs from "fs"; + +function removeExport(file: string) { + let content = fs.readFileSync(file, "utf8"); + content = content.replace("export {};", ""); + fs.writeFileSync(file, content); +} + +removeExport("./dist/js/background.js"); diff --git a/tsconfig.json b/tsconfig.json index fe9081d..3e8038b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,81 +1,75 @@ { - "compilerOptions": { - /* Visit https://aka.ms/tsconfig.json to read more about this file */ + "compilerOptions": { + /* Visit https://aka.ms/tsconfig.json to read more about this file */ - /* Basic Options */ - // "incremental": true, /* Enable incremental compilation */ - "target": "ESNext", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */ - "module": "ESNext", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */ - // "lib": ["ESNext"], /* Specify library files to be included in the compilation. */ - // "allowJs": true, /* Allow javascript files to be compiled. */ - // "checkJs": true, /* Report errors in .js files. */ - // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */ - // "declaration": true, /* Generates corresponding '.d.ts' file. */ - // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ - // "sourceMap": true, /* Generates corresponding '.map' file. */ - // "outFile": "./public/js/app.js", /* Concatenate and emit output to single file. */ - "outDir": "./dist/js/", /* Redirect output structure to the directory. */ - // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ - // "composite": true, /* Enable project compilation */ - // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */ - // "removeComments": true, /* Do not emit comments to output. */ - // "noEmit": true, /* Do not emit outputs. */ - // "importHelpers": true, /* Import emit helpers from 'tslib'. */ - // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ - // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ - "moduleResolution": "node", - /* Strict Type-Checking Options */ - "strict": true, /* Enable all strict type-checking options. */ - // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ - // "strictNullChecks": true, /* Enable strict null checks. */ - // "strictFunctionTypes": true, /* Enable strict checking of function types. */ - // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ - // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ - // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ - // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ + /* Basic Options */ + // "incremental": true, /* Enable incremental compilation */ + "target": "ESNext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */, + "module": "ESNext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */, + // "lib": ["ESNext"], /* Specify library files to be included in the compilation. */ + // "allowJs": true, /* Allow javascript files to be compiled. */ + // "checkJs": true, /* Report errors in .js files. */ + // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */ + "declaration": true, /* Generates corresponding '.d.ts' file. */ + "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ + "sourceMap": true /* Generates corresponding '.map' file. */, + // "outFile": "./public/js/app.js", /* Concatenate and emit output to single file. */ + "outDir": "./dist/js/" /* Redirect output structure to the directory. */, + // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ + // "composite": true, /* Enable project compilation */ + // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */ + "removeComments": true /* Do not emit comments to output. */, + // "noEmit": true, /* Do not emit outputs. */ + // "importHelpers": true, /* Import emit helpers from 'tslib'. */ + // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ + // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ + "moduleResolution": "node", + /* Strict Type-Checking Options */ + "strict": true /* Enable all strict type-checking options. */, + "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ + // "strictNullChecks": true, /* Enable strict null checks. */ + // "strictFunctionTypes": true, /* Enable strict checking of function types. */ + // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ + // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ + // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ + // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ - /* Additional Checks */ - // "noUnusedLocals": true, /* Report errors on unused locals. */ - // "noUnusedParameters": true, /* Report errors on unused parameters. */ - // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ - // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ - // "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */ - // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an 'override' modifier. */ - // "noPropertyAccessFromIndexSignature": true, /* Require undeclared properties from index signatures to use element accesses. */ + /* Additional Checks */ + // "noUnusedLocals": true, /* Report errors on unused locals. */ + // "noUnusedParameters": true, /* Report errors on unused parameters. */ + // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ + // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ + // "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */ + // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an 'override' modifier. */ + // "noPropertyAccessFromIndexSignature": true, /* Require undeclared properties from index signatures to use element accesses. */ - /* Module Resolution Options */ - // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ - // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ - // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ - // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ - // "typeRoots": [], /* List of folders to include type definitions from. */ - // "types": [], /* Type declaration files to be included in compilation. */ - // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ - "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ - // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ - // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ + /* Module Resolution Options */ + // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ + // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ + // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ + // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ + // "typeRoots": [], /* List of folders to include type definitions from. */ + // "types": [], /* Type declaration files to be included in compilation. */ + // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ + "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */, + // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ + // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ - /* Source Map Options */ - // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ - // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ - // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ - // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ + /* Source Map Options */ + // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ + // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ + // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ + // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ - /* Experimental Options */ - // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ - // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ + /* Experimental Options */ + // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ + // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ - /* Advanced Options */ - "skipLibCheck": true, /* Skip type checking of declaration files. */ - "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */ - }, - "include": [ - "./src/**/*.ts", - "./src/*.ts" - ], - "exclude": [ - "./tools/*.ts", - "./dist/*.ts", - "./dist/*.js" - ] + /* Advanced Options */ + "skipLibCheck": true /* Skip type checking of declaration files. */, + "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */ + }, + "include": ["./src/**/*.ts", "./src/*.ts"], + "exclude": ["node_modules", "./tools/*.ts", "./dist/*.ts", "./dist/*.js"], + "types": ["node", "chrome"] } diff --git a/webpack.config.background.cjs b/webpack.config.background.cjs new file mode 100644 index 0000000..7102629 --- /dev/null +++ b/webpack.config.background.cjs @@ -0,0 +1,28 @@ +const path = require('path'); + +module.exports = { + entry: './src/background.ts', + mode: 'production', + devtool: 'source-map', + module: { + rules: [ + { + test: /\.tsx?$/, + use: 'ts-loader', + exclude: [ + "/node_modules/", + "/dist/", + "/src/app.ts", + "/src/settings.ts" + ], + }, + ], + }, + resolve: { + extensions: ['.tsx', '.ts'], + }, + output: { + filename: 'background.js', + path: path.resolve(__dirname, 'dist/js'), + }, +}; diff --git a/webpack.config.cjs b/webpack.config.cjs new file mode 100644 index 0000000..b7bf57e --- /dev/null +++ b/webpack.config.cjs @@ -0,0 +1,28 @@ +const path = require('path'); + +module.exports = { + entry: './src/app.ts', + mode: 'production', + devtool: 'source-map', + module: { + rules: [ + { + test: /\.tsx?$/, + use: 'ts-loader', + exclude: [ + "/node_modules/", + "/dist/", + "/src/background.ts", + "/src/settings.ts" + ], + }, + ], + }, + resolve: { + extensions: ['.tsx', '.ts'], + }, + output: { + filename: 'app.js', + path: path.resolve(__dirname, 'dist/js'), + }, +}; diff --git a/webpack.config.settings.cjs b/webpack.config.settings.cjs new file mode 100644 index 0000000..e8e1821 --- /dev/null +++ b/webpack.config.settings.cjs @@ -0,0 +1,28 @@ +const path = require('path'); + +module.exports = { + entry: './src/settings.ts', + mode: 'production', + devtool: 'source-map', + module: { + rules: [ + { + test: /\.tsx?$/, + use: 'ts-loader', + exclude: [ + "/node_modules/", + "/dist/", + "/src/background.ts", + "/src/app.ts" + ], + }, + ], + }, + resolve: { + extensions: ['.tsx', '.ts'], + }, + output: { + filename: 'settings.js', + path: path.resolve(__dirname, 'dist/js'), + }, +}; From 741de12320d87e71710d654e17a90b5df5ebfae1 Mon Sep 17 00:00:00 2001 From: Jonas Pfalzgraf Date: Fri, 4 Aug 2023 11:05:20 +0200 Subject: [PATCH 07/13] :children_crossing: Updating and optimizing --- package.json | 8 ++++---- tools/clean.ts | 3 ++- tools/deploy.ts | 12 +++++++----- tools/syncConfig.ts | 15 ++++++++------- tools/v2.ts | 5 +++-- ...background.cjs => webpack.config.background.ts | 0 ...fig.settings.cjs => webpack.config.settings.ts | 0 webpack.config.cjs => webpack.config.ts | 0 8 files changed, 24 insertions(+), 19 deletions(-) rename webpack.config.background.cjs => webpack.config.background.ts (100%) rename webpack.config.settings.cjs => webpack.config.settings.ts (100%) rename webpack.config.cjs => webpack.config.ts (100%) diff --git a/package.json b/package.json index a383aac..f50e507 100644 --- a/package.json +++ b/package.json @@ -2,11 +2,10 @@ "name": "browser_extension_template", "version": "0.0.1", "private": true, - "type": "module", "scripts": { - "deploy-v3": "npm run build-tooling && node ./tools/deploy.js && npm run sync && npm run build-js && npm run build-css && node ./tools/clean.js", - "deploy-v2": "npm run deploy-v3 && node ./tools/v2.js", - "build-js": "webpack --config ./webpack.config.cjs && webpack --config ./webpack.config.settings.cjs && webpack --config ./webpack.config.background.cjs", + "deploy-v3": "npx rimraf ./dist/ && npm run build-tooling && node ./tools/deploy.js && npm run sync && npm run build-js && npm run build-css && node ./tools/clean.js", + "deploy-v2": " npm run deploy-v3 && node ./tools/v2.js", + "build-js": "webpack --config ./webpack.config.ts && webpack --config ./webpack.config.settings.ts && webpack --config ./webpack.config.background.ts", "build-css": "sass ./src/sass/:./dist/css/", "build-tooling": "tsc --project ./tooling.tsconfig.json", "watch-ts": "tsc -w -p tsconfig.json", @@ -19,6 +18,7 @@ "@webcomponents/webcomponentsjs": "^2.7.0", "sass": "^1.39.0", "ts-loader": "^9.4.2", + "ts-node": "^10.9.1", "typescript": "^4.2.4", "webpack": "^5.75.0", "webpack-cli": "^5.0.1" diff --git a/tools/clean.ts b/tools/clean.ts index caba573..2ed412e 100644 --- a/tools/clean.ts +++ b/tools/clean.ts @@ -1,4 +1,5 @@ -import * as fs from "fs"; +// @ts-ignore +const fs = require("fs"); function removeExport(file: string) { let content = fs.readFileSync(file, "utf8"); diff --git a/tools/deploy.ts b/tools/deploy.ts index a12bf54..7308509 100644 --- a/tools/deploy.ts +++ b/tools/deploy.ts @@ -1,6 +1,8 @@ -import * as fs from 'fs'; -import * as path from 'path'; -const appConfig = JSON.parse(fs.readFileSync('./app.config.json', 'utf8')); +const path = require('path'); +// @ts-ignore +const fs = require('fs'); + +const appConfigJson = JSON.parse(fs.readFileSync('./app.config.json', 'utf8')); const DEPLOY_ENTRY = "./public/"; const DEPLOY_TARGET = "./dist/"; @@ -37,7 +39,7 @@ function findHtmlFilesRecursive(source: string): string[] { function replaceKeywordsInHtmlFile(file: string) { let content = fs.readFileSync(file, 'utf8'); - const pairs = appConfig.htmlTemplatePairs; + const pairs = appConfigJson.htmlTemplatePairs; pairs.forEach(function (pair: object) { // @ts-ignore content = content.replaceAll(pair.key, pair.value); @@ -81,4 +83,4 @@ mkdirSync(DEPLOY_TARGET); copyFiles(DEPLOY_ENTRY, DEPLOY_TARGET); buildHtmlFiles(DEPLOY_ENTRY); -console.log("Deployed to " + DEPLOY_TARGET); \ No newline at end of file +console.log("Deployed to " + DEPLOY_TARGET); diff --git a/tools/syncConfig.ts b/tools/syncConfig.ts index 22b800c..a9eeaa5 100644 --- a/tools/syncConfig.ts +++ b/tools/syncConfig.ts @@ -1,8 +1,9 @@ -import * as fs from 'fs'; +// @ts-ignore +const fs = require('fs'); const appConfig = JSON.parse(fs.readFileSync('./app.config.json', 'utf8')); const pkg = JSON.parse(fs.readFileSync('./package.json', 'utf8')); -const manifest = JSON.parse(fs.readFileSync('./public/manifest.json', 'utf8')); +const manifestJson = JSON.parse(fs.readFileSync('./public/manifest.json', 'utf8')); pkg.version = appConfig.AppData.version; pkg.name = appConfig.AppData.id; @@ -13,10 +14,10 @@ pkg.license = appConfig.AppData.license; pkg.repository = appConfig.AppData.repository; pkg.bugs = appConfig.AppData.bugs; -manifest.version = appConfig.AppData.version; -manifest.name = appConfig.AppData.name; -manifest.description = appConfig.AppData.description; -manifest.homepage_url = appConfig.AppData.homepage; +manifestJson.version = appConfig.AppData.version; +manifestJson.name = appConfig.AppData.name; +manifestJson.description = appConfig.AppData.description; +manifestJson.homepage_url = appConfig.AppData.homepage; fs.writeFileSync('./package.json', JSON.stringify(pkg, null, 2)); -fs.writeFileSync('./public/manifest.json', JSON.stringify(manifest, null, 2)); \ No newline at end of file +fs.writeFileSync('./public/manifest.json', JSON.stringify(manifestJson, null, 2)); diff --git a/tools/v2.ts b/tools/v2.ts index dd42ddb..d958bbe 100644 --- a/tools/v2.ts +++ b/tools/v2.ts @@ -1,4 +1,5 @@ -import * as fs from 'fs'; +// @ts-ignore +const fs = require('fs'); const manifest = JSON.parse(fs.readFileSync('./dist/manifest.json', 'utf8')); @@ -42,4 +43,4 @@ if (manifest.action) { } delete manifest.action -fs.writeFileSync('./dist/manifest.json', JSON.stringify(manifest, null, 2)); \ No newline at end of file +fs.writeFileSync('./dist/manifest.json', JSON.stringify(manifest, null, 2)); diff --git a/webpack.config.background.cjs b/webpack.config.background.ts similarity index 100% rename from webpack.config.background.cjs rename to webpack.config.background.ts diff --git a/webpack.config.settings.cjs b/webpack.config.settings.ts similarity index 100% rename from webpack.config.settings.cjs rename to webpack.config.settings.ts diff --git a/webpack.config.cjs b/webpack.config.ts similarity index 100% rename from webpack.config.cjs rename to webpack.config.ts From 693a8da648728a6da38151be3090198421186b49 Mon Sep 17 00:00:00 2001 From: Jonas Pfalzgraf Date: Sat, 1 Jun 2024 00:57:25 +0200 Subject: [PATCH 08/13] adding vite --- package.json | 22 +++++++++++----------- vite.config.background.js | 24 ++++++++++++++++++++++++ vite.config.js | 29 +++++++++++++++++++++++++++++ vite.config.settings.js | 29 +++++++++++++++++++++++++++++ webpack.config.background.cjs | 28 ---------------------------- webpack.config.cjs | 28 ---------------------------- webpack.config.settings.cjs | 28 ---------------------------- 7 files changed, 93 insertions(+), 95 deletions(-) create mode 100644 vite.config.background.js create mode 100644 vite.config.js create mode 100644 vite.config.settings.js delete mode 100644 webpack.config.background.cjs delete mode 100644 webpack.config.cjs delete mode 100644 webpack.config.settings.cjs diff --git a/package.json b/package.json index a383aac..47f41da 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "scripts": { "deploy-v3": "npm run build-tooling && node ./tools/deploy.js && npm run sync && npm run build-js && npm run build-css && node ./tools/clean.js", "deploy-v2": "npm run deploy-v3 && node ./tools/v2.js", - "build-js": "webpack --config ./webpack.config.cjs && webpack --config ./webpack.config.settings.cjs && webpack --config ./webpack.config.background.cjs", + "build-js": "vite build --config ./vite.config.js && vite build --config ./vite.config.settings.js && vite build --config ./vite.config.background.js", "build-css": "sass ./src/sass/:./dist/css/", "build-tooling": "tsc --project ./tooling.tsconfig.json", "watch-ts": "tsc -w -p tsconfig.json", @@ -14,14 +14,14 @@ "sync": "npm run build-tooling && node ./tools/syncConfig.js" }, "devDependencies": { - "@types/chrome": "^0.0.206", - "@types/node": "^18.11.18", - "@webcomponents/webcomponentsjs": "^2.7.0", - "sass": "^1.39.0", - "ts-loader": "^9.4.2", - "typescript": "^4.2.4", - "webpack": "^5.75.0", - "webpack-cli": "^5.0.1" + "@types/chrome": "^0.0.268", + "@types/node": "^20.13.0", + "@webcomponents/webcomponentsjs": "^2.8.0", + "sass": "^1.77.4", + "ts-loader": "^9.5.1", + "typescript": "^5.4.5", + "vite": "^5.2.12", + "vite-tsconfig-paths": "^4.3.2" }, "browserslist": [ "> 1%", @@ -45,7 +45,7 @@ "url": "https://github.com/JosunLP/BrowserExtensionTemplate/issues" }, "dependencies": { - "@webcomponents/custom-elements": "^1.5.1", - "bootstrap": "^5.2.3" + "@webcomponents/custom-elements": "^1.6.0", + "bootstrap": "^5.3.3" } } \ No newline at end of file diff --git a/vite.config.background.js b/vite.config.background.js new file mode 100644 index 0000000..3f0daf4 --- /dev/null +++ b/vite.config.background.js @@ -0,0 +1,24 @@ +import { defineConfig } from "vite"; +import { resolve } from "path"; +import tsconfigPaths from "vite-tsconfig-paths"; + +export default defineConfig({ + build: { + rollupOptions: { + input: resolve(__dirname, "src/background.ts"), + output: { + entryFileNames: "background.js", + dir: resolve(__dirname, "dist/js"), + }, + }, + sourcemap: true, + }, + plugins: [tsconfigPaths()], + resolve: { + extensions: [".tsx", ".ts"], + }, + esbuild: { + include: /.*\.tsx?$/, + exclude: [/node_modules/, /dist/, /src\/app\.ts/, /src\/settings\.ts/], + }, +}); diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..44d2f87 --- /dev/null +++ b/vite.config.js @@ -0,0 +1,29 @@ +import { defineConfig } from "vite"; +import { resolve } from "path"; +import tsconfigPaths from "vite-tsconfig-paths"; + +export default defineConfig({ + build: { + rollupOptions: { + input: resolve(__dirname, "src/app.ts"), + output: { + entryFileNames: "app.js", + dir: resolve(__dirname, "dist/js"), + }, + }, + sourcemap: true, + }, + plugins: [tsconfigPaths()], + resolve: { + extensions: [".tsx", ".ts"], + }, + esbuild: { + include: /.*\.tsx?$/, + exclude: [ + /node_modules/, + /dist/, + /src\/background\.ts/, + /src\/settings\.ts/, + ], + }, +}); diff --git a/vite.config.settings.js b/vite.config.settings.js new file mode 100644 index 0000000..0508763 --- /dev/null +++ b/vite.config.settings.js @@ -0,0 +1,29 @@ +import { defineConfig } from "vite"; +import { resolve } from "path"; +import tsconfigPaths from "vite-tsconfig-paths"; + +export default defineConfig({ + build: { + rollupOptions: { + input: resolve(__dirname, "src/settings.ts"), + output: { + entryFileNames: "settings.js", + dir: resolve(__dirname, "dist/js"), + }, + }, + sourcemap: true, + }, + plugins: [tsconfigPaths()], + resolve: { + extensions: [".tsx", ".ts"], + }, + esbuild: { + include: /.*\.tsx?$/, + exclude: [ + /node_modules/, + /dist/, + /src\/background\.ts/, + /src\/app\.ts/, + ], + }, +}); diff --git a/webpack.config.background.cjs b/webpack.config.background.cjs deleted file mode 100644 index 7102629..0000000 --- a/webpack.config.background.cjs +++ /dev/null @@ -1,28 +0,0 @@ -const path = require('path'); - -module.exports = { - entry: './src/background.ts', - mode: 'production', - devtool: 'source-map', - module: { - rules: [ - { - test: /\.tsx?$/, - use: 'ts-loader', - exclude: [ - "/node_modules/", - "/dist/", - "/src/app.ts", - "/src/settings.ts" - ], - }, - ], - }, - resolve: { - extensions: ['.tsx', '.ts'], - }, - output: { - filename: 'background.js', - path: path.resolve(__dirname, 'dist/js'), - }, -}; diff --git a/webpack.config.cjs b/webpack.config.cjs deleted file mode 100644 index b7bf57e..0000000 --- a/webpack.config.cjs +++ /dev/null @@ -1,28 +0,0 @@ -const path = require('path'); - -module.exports = { - entry: './src/app.ts', - mode: 'production', - devtool: 'source-map', - module: { - rules: [ - { - test: /\.tsx?$/, - use: 'ts-loader', - exclude: [ - "/node_modules/", - "/dist/", - "/src/background.ts", - "/src/settings.ts" - ], - }, - ], - }, - resolve: { - extensions: ['.tsx', '.ts'], - }, - output: { - filename: 'app.js', - path: path.resolve(__dirname, 'dist/js'), - }, -}; diff --git a/webpack.config.settings.cjs b/webpack.config.settings.cjs deleted file mode 100644 index e8e1821..0000000 --- a/webpack.config.settings.cjs +++ /dev/null @@ -1,28 +0,0 @@ -const path = require('path'); - -module.exports = { - entry: './src/settings.ts', - mode: 'production', - devtool: 'source-map', - module: { - rules: [ - { - test: /\.tsx?$/, - use: 'ts-loader', - exclude: [ - "/node_modules/", - "/dist/", - "/src/background.ts", - "/src/app.ts" - ], - }, - ], - }, - resolve: { - extensions: ['.tsx', '.ts'], - }, - output: { - filename: 'settings.js', - path: path.resolve(__dirname, 'dist/js'), - }, -}; From b225218e94183b1e58085176706f7f517f9ae3fe Mon Sep 17 00:00:00 2001 From: Jonas Pfalzgraf Date: Sat, 1 Jun 2024 02:08:14 +0200 Subject: [PATCH 09/13] working on vite style integration --- .gitignore | 2 +- LICENSE | 2 +- package.json | 5 +-- public/manifest.json | 11 +---- public/options.html | 3 +- public/popup.html | 3 +- src/app.ts | 1 + src/background.ts | 13 +++--- src/settings.ts | 1 + tooling.tsconfig.json | 3 ++ tools/clean.ts | 9 ----- tools/deploy.ts | 84 --------------------------------------- tools/parse.ts | 43 ++++++++++++++++++++ tsconfig.json | 2 +- vite.config.background.js | 24 ----------- vite.config.js | 66 ++++++++++++++++++------------ vite.config.settings.js | 29 -------------- 17 files changed, 101 insertions(+), 200 deletions(-) delete mode 100644 tools/clean.ts delete mode 100644 tools/deploy.ts create mode 100644 tools/parse.ts delete mode 100644 vite.config.background.js delete mode 100644 vite.config.settings.js diff --git a/.gitignore b/.gitignore index 786253e..7a21a8d 100644 --- a/.gitignore +++ b/.gitignore @@ -688,7 +688,7 @@ FodyWeavers.xsd dist tools/syncConfig.js -tools/deploy.js +tools/parse.js tools/v2.js tools/clean.js package-lock.json diff --git a/LICENSE b/LICENSE index 0404ba7..79f09ef 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2022 Jonas Pfalzgraf +Copyright (c) 2024 Jonas Pfalzgraf Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/package.json b/package.json index 47f41da..f3c6f1b 100644 --- a/package.json +++ b/package.json @@ -4,10 +4,9 @@ "private": true, "type": "module", "scripts": { - "deploy-v3": "npm run build-tooling && node ./tools/deploy.js && npm run sync && npm run build-js && npm run build-css && node ./tools/clean.js", + "deploy-v3": "npx rimraf ./dist/ && npm run build-tooling && npm run sync && npm run build && node ./tools/parse.js", "deploy-v2": "npm run deploy-v3 && node ./tools/v2.js", - "build-js": "vite build --config ./vite.config.js && vite build --config ./vite.config.settings.js && vite build --config ./vite.config.background.js", - "build-css": "sass ./src/sass/:./dist/css/", + "build": "vite build", "build-tooling": "tsc --project ./tooling.tsconfig.json", "watch-ts": "tsc -w -p tsconfig.json", "watch-sass": "sass --watch ./src/sass/:./dist/css/", diff --git a/public/manifest.json b/public/manifest.json index 2f57490..42ee42b 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -21,15 +21,6 @@ "notifications" ], "background": { - "service_worker": "js/background.js" - }, - "commands": { - "_execute_browser_action": { - "suggested_key": { - "default": "Ctrl+Shift+F", - "mac": "MacCtrl+Shift+F" - }, - "description": "Opens popup.html" - } + "service_worker": "background.js" } } \ No newline at end of file diff --git a/public/options.html b/public/options.html index 161fb1a..9456208 100644 --- a/public/options.html +++ b/public/options.html @@ -6,7 +6,6 @@ {{BET}} Options -