webpack 5 starting point

MuckRock · Feb 22, 2022 · 2e7c22b · 2e7c22b
1 parent 2bc6f92
commit 2e7c22b
Show file tree

Hide file tree

Showing 22 changed files with 22,770 additions and 7,980 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,52 +2,51 @@
  "name": "svelte-app",
  "version": "1.0.0",
  "devDependencies": {
- "@babel/core": "^7.8.3",
- "@babel/preset-env": "^7.8.3",
- "autoprefixer": "^9.7.3",
- "babel-jest": "^24.9.0",
+ "@babel/core": "^7.17.5",
+ "@babel/preset-env": "^7.16.11",
+ "autoprefixer": "^9.8.0",
+ "babel-jest": "^27.5.1",
  "case-sensitive-paths-webpack-plugin": "^2.4.0",
  "circular-dependency-plugin": "^5.2.0",
  "concurrently": "^5.3.0",
- "cross-env": "^5.2.0",
- "css-loader": "^2.1.1",
- "dotenv-flow-webpack": "^1.0.0",
- "html-webpack-plugin": "4.5.2",
- "hugo-extended": "0.72.0",
- "jest": "^24.9.0",
- "mini-css-extract-plugin": "^0.6.0",
- "node-sass": "^4.13.0",
+ "cross-env": "^5.2.1",
+ "css-loader": "^6.6.0",
+ "dotenv-flow-webpack": "^1.1.0",
+ "dotenv-webpack":"7.1.0",
+ "dotenv":"16.0.0",
+ "html-webpack-plugin": "5.5.0",
+ "jest": "27.5.1",
+ "mini-css-extract-plugin": "^2.5.3",
+ "node-sass": "7.0.1",
  "prettier": "^2.2.1",
  "prettier-plugin-svelte": "^2.1.1",
  "rlite-router": "^2.0.3",
- "sass-loader": "^8.0.0",
- "serve": "^11.3.0",
- "speed-measure-webpack-plugin": "^1.3.1",
- "style-loader": "^0.23.1",
- "svelte": "^3.31.2",
- "svelte-loader": "2.13.3",
- "svelte-preprocess": "3.3.0",
+ "sass-loader":  "12.6.0",
+ "serve": "13.0.2",
+ "speed-measure-webpack-plugin": "^1.5.0",
+ "style-loader": "3.3.1",
+ "svelte": "^3.46.4",
+ "svelte-loader": "3.1.2",
+ "svelte-preprocess": "4.10.3",
  "svelte-check": "^2.4.5",
- "svelte-preprocess-sass": "0.2.0",
+ "svelte-preprocess-sass": "2.0.1",
  "svg-inline-loader": "^0.8.0",
  "svue": "^1.5.3",
- "terser-webpack-plugin": "^2.3.2",
- "webpack": "^4.30.0",
+ "terser-webpack-plugin": "^5.3.1",
+ "webpack": "5.69.1",
  "webpack-bundle-analyzer": "^3.6.0",
- "webpack-cli": "^3.3.0",
- "webpack-dev-server": "^3.3.1",
- "typescript": "^3.9",
- "@pyoner/svelte-form": "1.0.2",
- "@pyoner/svelte-form-ajv": "0.1.3",
- "@tsconfig/svelte": "^3.0.0"
+ "webpack-cli": "4.9.2",
+ "webpack-dev-server": "4.7.4",
+ "@tsconfig/svelte": "^3.0.0",
+ "process":"0.11.10"
  },
  "scripts": {
  "build": "cross-env NODE_ENV=production webpack",
  "build-staging": "cross-env NODE_ENV=staging webpack",
  "build-serve": "cross-env NODE_ENV=production webpack && serve public -l 80",
  "build-analyze": "cross-env NODE_ENV=production-analyze webpack",
  "dev": "concurrently \"npm:dev-app\" \"npm:dev-embed\"",
- "dev-app": "cross-env NODE_ENV=development webpack-dev-server --config webpack.app.config.js --content-base public",
+ "dev-app": "cross-env NODE_ENV=development webpack-dev-server --config webpack.app.config.js",
  "dev-embed": "cross-env NODE_ENV=development webpack --config webpack.embed.config.js",
  "test": "jest",
  "test-watch": "jest --watchAll"
@@ -60,7 +59,7 @@
  "fast-copy": "^2.1.0",
  "fast-deep-equal": "^3.1.3",
  "lucene": "^2.1.1",
- "scrollzoom": "git+https://github.com/freedmand/scrollzoom#1ef997764a4ca22b1e3171b17a48ef13eb7309b7",
+ "scrollzoom": "git+https://github.com/freedmand/scrollzoom",
  "svelte-i18n": "^3.3.9"
  }
 }
diff --git a/preprocess.config.js b/preprocess.config.js
@@ -11,20 +11,19 @@ const scssAliases = (aliases) => {
  };
 };
 
+/* https://github.com/sveltejs/svelte-preprocess/blob/main/docs/migration-guide.md */
 const preprocessOptions = {
- transformers: {
- scss: {
- includePaths: ["node_modules", "src"],
- importer: [
- scssAliases({
- "@": process.cwd() + "/src",
- }),
- ],
- data: '@import "@/style/variables.scss";',
- },
- postcss: {
- plugins: [require("autoprefixer")],
- },
+ scss: {
+ includePaths: ["node_modules", "src"],
+ importer: [
+ scssAliases({
+ "@": process.cwd() + "/src",
+ }),
+ ],
+ prependData: '@import "@/style/variables.scss";',
+ },
+ postcss: {
+ plugins: [require("autoprefixer")],
  },
 };
 

diff --git a/src/common/Calendar.svelte b/src/common/Calendar.svelte
@@ -131,8 +131,8 @@
  background: rgba($primary, 0.18);
  left: 50%;
  top: 50%;
- margin-left: -$circleSize / 2;
- margin-top: -$circleSize / 2;
+ margin-left: -$circleSize * 0.5;
+ margin-top: -$circleSize * 0.5;
  z-index: -1;
  }
 

diff --git a/src/common/Checkbox.svelte b/src/common/Checkbox.svelte
@@ -59,16 +59,16 @@
  position: absolute;
  width: $checksize;
  height: $checksize;
- left: ($checkboxSize - $checksize) / 2 + $xOff;
- top: ($checkboxSize - $checksize) / 2;
+ left: ($checkboxSize - $checksize) * 0.5 + $xOff;
+ top: ($checkboxSize - $checksize) * 0.5;
  }
 
  :global(.checkline) {
  position: absolute;
  width: $checklinesize;
  height: $checklinesize;
- left: ($checkboxSize - $checklinesize) / 2 + $xOff;
- top: ($checkboxSize - $checklinesize) / 2;
+ left: ($checkboxSize - $checklinesize) * 0.5 + $xOff;
+ top: ($checkboxSize - $checklinesize) * 0.5;
  }
  }
 

diff --git a/src/common/Draggable.svelte b/src/common/Draggable.svelte
@@ -34,6 +34,8 @@
 </script>
 
 <style lang="scss">
+
+ // svelte-ignore css-unused-selector
  .outer {
  display: table;
  width: 100%;
@@ -55,21 +57,21 @@
  border-radius: 6px;
  }
 
- :global(input[type="file"]) {
- position: absolute;
- left: 0;
- width: 100%;
- top: 0;
- bottom: 0;
- opacity: 0;
- cursor: pointer;
+ // :global(input[type="file"]) {
+ //  position: absolute;
+ //  left: 0;
+ //  width: 100%;
+ //  top: 0;
+ //  bottom: 0;
+ //  opacity: 0;
+ //  cursor: pointer;
 
- &:hover + :global(.upload),
- &.dragging + :global(.upload) {
- background: #fc4762;
- color: white;
- }
- }
+ //  &:hover + :global(.upload),
+ //  &.dragging + :global(.upload) {
+ //  background: #fc4762;
+ //  color: white;
+ //  }
+ // }
  }
 </style>
 

diff --git a/src/common/Loader.svelte b/src/common/Loader.svelte
@@ -75,12 +75,12 @@
  }
 
  &.center {
- top: calc(50% - #{$smallSpinsize / 2 + $smallBordersize});
- left: calc(50% - #{$smallSpinsize / 2 + $smallBordersize});
+ top: calc(50% - #{$smallSpinsize * 0.5 + $smallBordersize});
+ left: calc(50% - #{$smallSpinsize * 0.5 + $smallBordersize});
 
  &.big {
- top: calc(50% - #{$bigSpinsize / 2 + $bigBordersize});
- left: calc(50% - #{$bigSpinsize / 2 + $bigBordersize});
+ top: calc(50% - #{$bigSpinsize * 0.5 + $bigBordersize});
+ left: calc(50% - #{$bigSpinsize * 0.5 + $bigBordersize});
  }
  }
  }

diff --git a/src/common/ProgressiveImage.svelte b/src/common/ProgressiveImage.svelte
@@ -144,9 +144,10 @@
  transition: opacity 0.2s linear;
  opacity: 0;
 
- &.loaded {
- opacity: 1;
- }
+ // &.loaded {
+
+ // opacity: 1;
+ // }
  }
 
  &.grayed {

diff --git a/src/common/Toast.svelte b/src/common/Toast.svelte
@@ -83,6 +83,7 @@
  on:click={() => dismiss(i)}
  on:mouseover={reset}
  on:mousemove={reset}
+ on:focus={() => null}
 >
  <span class="x">×</span>
  <span class="content">{toast.content}</span>

diff --git a/src/common/dialog/EmbedDialog.svelte b/src/common/dialog/EmbedDialog.svelte
@@ -210,6 +210,8 @@
  on:mouseover={() => (shareHover = "document")}
  on:mouseout={() => (shareHover = null)}
  on:click={() => (layout.embedShareOption = "document")}
+ on:blur={() => null}
+ on:focus={() => null}
  >
  {@html shareDocumentSvg}
  </div>
@@ -219,6 +221,8 @@
  on:mouseover={() => (shareHover = "page")}
  on:mouseout={() => (shareHover = null)}
  on:click={() => (layout.embedShareOption = "page")}
+ on:blur={() => null}
+ on:focus={() => null}
  >
  {@html sharePageSvg}
  </div>
@@ -229,6 +233,8 @@
  on:mouseover={() => (shareHover = "note")}
  on:mouseout={() => (shareHover = null)}
  on:click={selectNote}
+ on:blur={() => null}
+ on:focus={() => null}
  >
  {@html shareNoteSvg}
  </div>
@@ -241,6 +247,8 @@
  on:mouseover={() => (shareHover = "document")}
  on:mouseout={() => (shareHover = null)}
  on:click={() => (layout.embedShareOption = "document")}
+ on:blur={() => null}
+ on:focus={() => null}
  >
  <h2>{$_("dialogEmbedDialog.shareDoc")}</h2>
  <p>
@@ -253,6 +261,8 @@
  on:mouseover={() => (shareHover = "page")}
  on:mouseout={() => (shareHover = null)}
  on:click={() => (layout.embedShareOption = "page")}
+ on:blur={() => null}
+ on:focus={() => null}
  >
  <h2>{$_("dialogEmbedDialog.sharePage")}</h2>
  <p>
@@ -267,6 +277,8 @@
  on:mouseover={() => (shareHover = "note")}
  on:mouseout={() => (shareHover = null)}
  on:click={selectNote}
+ on:blur={() => null}
+ on:focus={() => null}
  >
  <h2 class:faded={!hasNotes}>
  {$_("dialogEmbedDialog.shareNote")}

diff --git a/src/main.js b/src/main.js
@@ -1,3 +1,4 @@
+console.log("process:",process.env)
 import Main from "./Main.svelte";
 
 // Imports to get persistent app functionality working

diff --git a/src/manager/caching.test.js b/src/manager/caching.test.js
@@ -1,3 +1,6 @@
+/**
+ * @jest-environment jsdom
+ */
 import {
  documents,
  updateInCollection,

diff --git a/src/pages/FlatPage.svelte b/src/pages/FlatPage.svelte
@@ -250,7 +250,10 @@
  }
  }
 
- :global(h5, h6) {
+ :global(h5) {
+ font-weight: bold;
+ }
+ :global(h6) {
  font-weight: bold;
  }
 
@@ -298,12 +301,17 @@
  border-collapse: collapse;
  }
 
- :global(td, th) {
+ :global(td) {
  border: solid 1px #d1d6dc;
  padding: 6px 12px;
  vertical-align: middle;
  }
 
+ :global(th) {
+ border: solid 1px #d1d6dc;
+ padding: 6px 12px;
+ vertical-align: middle;
+ }
  :global(summary) {
  outline: none;
  cursor: pointer;

diff --git a/src/pages/app/SearchInput.svelte b/src/pages/app/SearchInput.svelte
@@ -851,6 +851,9 @@
  completion,
  fieldPost != null ? fieldPost.length : 0,
  )}
+ on:blur={() => console.warn("check")}
+ on:focus={() => console.warn("check")}
+
  class:groupstart={completion.type == "groupstart"}
  >
  <div

diff --git a/src/pages/app/menus/AddonMenuItem.svelte b/src/pages/app/menus/AddonMenuItem.svelte
@@ -22,11 +22,6 @@
 </script>
 
 <style lang="scss">
- .scope {
- color: gray;
- float: right;
- margin-left: 7px;
- }
 </style>
 
 <MenuItem on:click={handleClick}>

diff --git a/src/pages/app/sidebar/Projects.svelte b/src/pages/app/sidebar/Projects.svelte
@@ -71,9 +71,9 @@
  padding: 5px 24px 5px (24px + $sidebarAdd);
  }
 
- &.active {
- background: $primary-faded;
- }
+ // &.active {
+ //  background: $primary-faded;
+ // }
  }
  }
 </style>

diff --git a/src/pages/viewer/Annotation.svelte b/src/pages/viewer/Annotation.svelte
@@ -397,8 +397,8 @@
  left: -$flagWidth - $annotationBorderWidth;
  width: $flagWidth;
  height: $flagHeight;
- border-top-left-radius: ($flagHeight / 2);
- border-bottom-left-radius: ($flagHeight / 2);
+ border-top-left-radius: ($flagHeight * 0.5);
+ border-bottom-left-radius: ($flagHeight * 0.5);
 
  .closer {
  @include buttonLike;
@@ -407,7 +407,7 @@
  :global(svg) {
  width: $closeHeight;
  height: $closeHeight;
- margin: ($flagHeight - $closeHeight) / 2;
+ margin: ($flagHeight - $closeHeight) * 0.5;
  }
  }
  }

diff --git a/src/pages/viewer/PageNoteInsert.svelte b/src/pages/viewer/PageNoteInsert.svelte
@@ -104,6 +104,7 @@
  (RETRACTED_HEIGHT + UNEXPANDED_MARGIN) * scale
  }px`}
  on:mouseover={expand}
+ on:focus={expand}
  on:mouseleave={retract}
  on:mousedown={() => startPageNote(pageNumber - 1)}
 >