⚠️Changed Svelte to a forked version with a better Hydratation.

Related to sveltejs/sapper#1088
sandrina-p · Feb 13, 2020 · 96cfa06 · 96cfa06
1 parent 9e4328f
commit 96cfa06
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 6,529 deletions.
diff --git a/LEARNINGS.md b/LEARNINGS.md
@@ -22,7 +22,7 @@ Here's a list of my learnings while building this website. When I release the we
 - 🎈Child components are PureComponents by default!
 - 🎈how to log a reactive variable each time it changes: `$: foo, console.log('value:', foo);` 
 - 🎈 props cant have numbers! `isLevel1` -> `isLevelOne`. But you know what? This made me find a better solution: `level="1"`
-
+- 🐛Bug: Svelte does a poor hydratation causing issues with CSS Animations. [Sapper#1088](https://github.com/sveltejs/sapper/issues/1088). Workaround: Use a Svelte fork!
 
 ## Javascript
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -57,7 +57,7 @@
     "rollup-plugin-terser": "^4.0.4",
     "sapper": "^0.27.0",
     "stylelint": "^11.1.1",
-    "svelte": "^3.0.0",
+    "svelte": "https://github.com/wix-incubator/wix-svelte.git#master",
     "svelte-preprocess": "^3.2.0"
   }
 }
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
@@ -9,7 +9,7 @@
   import Journey from '../components/Journey.svelte';
   import Footer from '../components/Footer.svelte';
   import SvgSprite from '../components/SvgSprite.svelte';
-  import { getInLimit, getBrowsers, setRIC, focusOnlyWhenNeeded } from '../utils';
+  import { getInLimit, setRIC, focusOnlyWhenNeeded } from '../utils';
   import { matchMq, initResponsive, afterResponsiveUpdate } from '../stores/responsive.js';
   import { strGeneral, updateGeneral } from '../stores/general.js';
 
@@ -29,7 +29,6 @@
     // smoothscroll.polyfill(); // REVIEW - Do I really need this?
     initResponsive();
     focusOnlyWhenNeeded();
-    browserClasses = getBrowsers();
     if ($matchMq.md) {
       await verifyLayoutVariant({ doUpdateGeneral: false });
     }
@@ -206,7 +205,7 @@
 
 <Nav on:calculated={handleNavCalculated} horizonSpace={horizonSpace} />
 <div
-  class="container {browserClasses}"
+  class="container"
   style="--scrollY: {scrollY}px; --scrollSpeed: {scrollSpeedCurrent};">
   <div class="horizon" bind:this={elHorizon}>
     <Intro />

diff --git a/src/template.html b/src/template.html
@@ -6,10 +6,7 @@
 
     %sapper.base%
 
-    <!-- <link href="https://fonts.googleapis.com/css?family=Libre+Baskerville:700|Work+Sans:300&display=swap" rel="stylesheet"> -->
-    <!-- TODO load 500 async because it's used less. -->
-    <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300,500,700&display=swap" rel="stylesheet">
-
+    <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300,500&display=swap" rel="stylesheet">
 
     <link rel="stylesheet" href="reset.css" />
 
@@ -25,11 +22,38 @@
     %sapper.head%
   </head>
   <body>
+    <!-- Critical JS to be runned before Svelte is loaded. -->
     <script>
+      // NOTE: Do not modify the DOM inside #sapper!
+      // Otherwise Svelte hydratation won't work properly.
+      // -------
+      // Set the prefered theme. Remaining logic at ToggleTheme.svelte
       if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-        document.body.classList.add('dark'); // See ToggleTheme.svelte
+        document.body.classList.add('dark');
       }
+      // Detect current browser. Needed for some CSS animations otimizations.
+      (function setBrowsers() {
+        var browsers = {
+          jsChrome: /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor),
+          jsSafari: !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/),
+          jsIOS: /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream,
+          jsFF: !!navigator.userAgent.match(/firefox/i),
+        };
+        var matched = Object.keys(browsers).reduce(function (classes, browser) {
+          if (browsers[browser]) {
+            classes.push(browser);
+            return classes;
+          } else {
+            return classes;
+          }
+        }, []);
+
+        for (var i = 0; i < matched.length; i++) {
+          document.body.classList.add(matched[i]);
+        }
+      })();
     </script>
+
     <!-- The application will be rendered inside this element,
 	     because `src/client.js` references it -->
     <div id="sapper">%sapper.html%</div>

diff --git a/src/utils/index.js b/src/utils/index.js
@@ -46,19 +46,6 @@ export function getIOstatusVertical(entry) {
   }
 }
 
-export function getBrowsers() {
-  const browsers = {
-    jsChrome: /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor),
-    jsSafari: !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/),
-    jsIOS: /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream,
-    jsFF: !!navigator.userAgent.match(/firefox/i),
-  };
-
-  return Object.keys(browsers).reduce((classes, browser) => {
-    return browsers[browser] ? `${classes} ${browser}` : classes;
-  }, '');
-}
-
 // Similar to how Element.scrollIntoView() works but with custom position
 // taking in account possible animations within this element.
 // ex: scroll 10px from top

diff --git a/yarn.lock b/yarn.lock
@@ -4680,10 +4680,9 @@ svelte-preprocess@^3.2.0:
     detect-indent "^6.0.0"
     strip-indent "^2.0.0"
 
-svelte@^3.0.0:
-  version "3.9.0"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.9.0.tgz#04e26b48f9f656a431c5e483efa519ab041d20f3"
-  integrity sha512-A3mHsfrzxiXdV7icqKrxVmqNzFtxr4BMEzCDrPYBBtngRuU2Ci/dUHjSq/sZHSe64p/DcF1gjqXfT3sjwA/LnA==
+"svelte@https://github.com/wix-incubator/wix-svelte.git#master":
+  version "3.18.1"
+  resolved "https://github.com/wix-incubator/wix-svelte.git#02f112bd36f7041e0e811117dd8e21a1cdb49fbb"
 
 svg-tags@^1.0.0:
   version "1.0.0"