Merge pull request #31 from weebney/same-origin-fix

Upgrade to 2.0.0
cowtoolz · Apr 17, 2023 · db655cd · db655cd
2 parents 9959db5 + a2e93a7
commit db655cd
Show file tree

Hide file tree

Showing 13 changed files with 3,109 additions and 3,142 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,6 +4,9 @@ tachyon/.eslintrc.json
 tachyon/node_modules
 tachyon/package-lock.json
 
+tachyon/test/tachyon.js
+
+
 /build
 
 /docs/node_modules

diff --git a/docs/content/_index.md b/docs/content/_index.md
@@ -15,6 +15,13 @@ draft: false
 
 Tachyon is a byte-sized script that improves the user experience of your website by making navigation between pages significantly quicker.
 
+<span style="font-size:110%;"><span style="">**To test if Tachyon would've helped</span>,** <button id="confetti"><span id="clickMe" style="font-weight:bold;">click
+                            me!</span></button></span>
+                        <span class="hidden" id="no">No!</span> <span class="hidden" id="yes">Yes!</span>
+                        <span class="hidden" id="result">*(Saved <span class="hidden"
+                                id="timeSpan"></span><span>)*</span><span class="hidden" id="error">Remove
+                          cursor!</span>
+
 On average, Tachyon could benefit your site with:
 
 <div style="transform: translateX(0.33vw);">
@@ -46,18 +53,11 @@ And just when you thought it couldn't get any better...
 
 Tachyon cleverly loads pages in advance to improve the speed of your website, resulting in a better user experience and potentially even significantly more conversions. [^5] [^6] [^7] [^8] [^9]
 
-<span style="font-size:110%;"><span style="">**To test if Tachyon would've helped</span>,** <button id="confetti"><span id="clickMe" style="font-weight:bold;">click
-                            me!</span></button></span>
-                        <span class="hidden" id="no">No!</span> <span class="hidden" id="yes">Yes!</span>
-                        <span class="hidden" id="result">*(Saved <span class="hidden"
-                                id="timeSpan"></span><span>)*</span><span class="hidden" id="error">Remove
-                          cursor!</span>
-
 In the above demo, the time "saved" refers to time that would have been wasted watching the next page load without Tachyon.
 
 ## Using Tachyon
 
-<span id="copyText" style="inline-size: min-content;overflow-wrap: break-word;">`<script src="https://unpkg.com/tachyonjs@1.1.1/tachyon.min.js" integrity="sha384-eAVplf5NYzHCSEB5NSZ5vabWAMYIb9Y2E4SKcU78UTIjukDs0tMxFQX0FLmBVYi8" type="module" crossorigin defer></script>`</span>
+<span id="copyText" style="inline-size: min-content;overflow-wrap: break-word;">`<script src="https://unpkg.com/tachyonjs@2.0.0/tachyon.min.js" integrity="sha384-w8efYzZSanBkhmSezV71UPT1uzvN9Ecr4ehP5gizbGl1esC0V/+2w7lqiT6FkUOe" type="module" crossorigin defer></script>`</span>
 
 <div style="text-align:right;">
 <button id="copier">
@@ -113,10 +113,10 @@ Tachyon could be considered an alternative to projects like [instant.page](https
   </tr>
   <tr>
     <td>Size</td>
-    <td><b>698 b</b></td>
-    <td>2.88 kb<br>(4.1x larger)</td>
-    <td>60.1 kb<br>(86x larger)</td>
-    <td>111 kb<br>(159x larger)</td>
+    <td><b>723 b</b></td>
+    <td>3.14 kb<br>(4.3x larger)</td>
+    <td>60.1 kb<br>(83x larger)</td>
+    <td>111 kb<br>(153x larger)</td>
   </tr>
  <tr>
     <td>Bandwidth<br>Overhead</td>
@@ -129,7 +129,7 @@ Tachyon could be considered an alternative to projects like [instant.page](https
     <td>Prerendering<br>(Fastest Loads)</td>
     <td>✅</td>
     <td>❌</td>
-    <td>~</td>
+    <td>✅</td>
     <td>❌</td>
 </tr>
 
@@ -193,28 +193,14 @@ Tachyon's configuration features are toggled on with `data-tachyon-*` attributes
 
 ### Custom Timing
 
-If you're able to determine that the 50ms default timing is not optimal for your site, you can change it by adding the `data-tachyon-timer` attribute to website's `<body>` tag. This attribute takes an integer (in milliseconds) that will alter the script's behavior as such, i.e. if you want to set the timing to 100ms, your body tag should emulate the following example:
+If you're able to determine that the 50ms default timing is not optimal for your site, you can change it by adding the `data-tachyon-timer` attribute to website's `<body>` tag. This attribute takes an integer (in milliseconds) that will alter the script's behavior as such, i.e. if you want to set the timing to 100ms, your body tag should look like the following:
 
 ```html
 <body data-tachyon-timer="100">
     ...
 </body>
 ```
 
-### Same-Origin Only
-
-By default, Tachyon will preload content from ***any domain***. If you want Tachyon to only preload content from the same domain, you can add `data-tachyon-same-origin` to the `<body>` tag.
-
-```html
-<body data-tachyon-same-origin>
-    <a href="https://mywebsite.com/cart.php">This will load!</a>
-    <a href="https://mywebsite.com/info.php">This one too!</a>
-    <a href="https://some.otherwebsite.com">❌❌❌</a>
-</body>
-```
-
-The above example assumes your domain is `mywebsite.com`.
-
 ### Blacklist
 
 If you want Tachyon to ignore certain links, add `data-tachyon` to the `<a>` tag. The blacklist is the default behavior of Tachyon, so you don't need to do anything to enable it, just flag the `<a>` tag with the `data-tachyon` attribute.
@@ -241,6 +227,21 @@ In the following example the second `<a>` tag will be ignored by Tachyon and wil
 </body>
 ```
 
+### Same-Origin Only
+
+By default, Tachyon will preload content from ***any domain***. If you want Tachyon to only preload content from the same domain, you can add `data-tachyon-same-origin` to the `<body>` tag. **Enabling this will also enable the [Whitelist](#whitelist).** That means you can choose to preload links outside of your website as needed using the `data-tachyon` attribute.
+
+```html
+<body data-tachyon-same-origin>
+    <a href="https://mywebsite.com/cart.php">This will load!</a>
+    <a href="https://mywebsite.com/info.php">This one too!</a>
+    <a href="https://some.otherwebsite.com">❌❌❌</a>
+    <a href="https://shop.store.com" data-tachyon>This also loads!</a>
+</body>
+```
+
+The above example assumes your domain is `mywebsite.com`.
+
 ## Tachyon's Philosophy
 
 The web is extremely bloated. In a perfect world, we would all do our part to fix this- I personally try to build things as leanly as possible, but unfortunately wishful thinking does little to improve the state of affairs. 

diff --git a/docs/content/cms/copy.js b/docs/content/cms/copy.js
@@ -1,7 +1,7 @@
 const codeBlock = document.getElementById("codeBlock")
 const copyButton = document.getElementById("copier")
 
-codeBlock.innerText = '<script src="https://unpkg.com/tachyonjs@1.1.3/tachyon.min.js" integrity="sha384-V5UK6PaMtG5fx05ToAClLlgsvoCVR0KpFYIGKcdw95yKQwRpKnOISeAXVK9EQG/V" type="module" crossorigin defer></script>';
+codeBlock.innerText = '<script src="https://unpkg.com/tachyonjs@2.0.0/tachyon.min.js" integrity="sha384-w8efYzZSanBkhmSezV71UPT1uzvN9Ecr4ehP5gizbGl1esC0V/+2w7lqiT6FkUOe" type="module" crossorigin defer></script>';
 
 function sleep(ms) {
     return new Promise(resolve => setTimeout(resolve, ms));

diff --git a/readme.md b/readme.md
@@ -28,42 +28,42 @@ Easy Setup Instructions:
   </tr>
   <tr>
     <td>Size</td>
-    <td><b>707 b</b></td>
-    <td>2.88 kb<br>(4.1x larger)</td>
-    <td>60.1 kb<br>(86x larger)</td>
-    <td>111 kb<br>(159x larger)</td>
+    <td><b>723 b</b></td>
+    <td>3.14 kb<br>(4.3x larger)</td>
+    <td>60.1 kb<br>(83x larger)</td>
+    <td>111 kb<br>(153x larger)</td>
   </tr>
  <tr>
-    <td>Bandwidth Overhead</td>
+    <td>Bandwidth<br>Overhead</td>
     <td><b>Lowest</b></td>
     <td>Low</td>
     <td>Highest</td>
     <td>High</td>
 </tr>
   <tr>
-    <td>Prerendering (Fastest Loads)</td>
+    <td>Prerendering<br>(Fastest Loads)</td>
     <td>✅</td>
     <td>❌</td>
-    <td>~</td>
+    <td>✅</td>
     <td>❌</td>
 </tr>
 
   <tr>
-    <td>No Addl. Code Required</td>
+    <td>No Coding<br>Required</td>
     <td>✅</td>
     <td>✅</td>
     <td>❌</td>
     <td>❌</td>
 </tr>
   <tr>
-    <td>Works on ALL links</td>
+    <td>Works on<br>ALL links</td>
     <td>✅</td>
     <td>❌</td>
     <td>❌</td>
     <td>❌</td>
 </tr>
   <tr>
-    <td>Whitelist & Blacklist</td>
+    <td>Whitelist &<br>Blacklist</td>
     <td>✅</td>
     <td>❌</td>
     <td>❌</td>
@@ -75,7 +75,7 @@ Easy Setup Instructions:
 Using Tachyon is unbelieveably easy. If you're not using node, you can just include it via script tags. Provided below is the script hosted by [unpkg](https://unpkg.com/). The source itself lives in the [tachyon directory](https://github.com/weebney/tachyon/tree/main/tachyon).
 
 ```html
-<script src="https://unpkg.com/tachyonjs@1.1.3/tachyon.min.js" integrity="sha384-V5UK6PaMtG5fx05ToAClLlgsvoCVR0KpFYIGKcdw95yKQwRpKnOISeAXVK9EQG/V" type="module" crossorigin defer></script>
+<script src="https://unpkg.com/tachyonjs@2.0.0/tachyon.min.js" integrity="sha384-w8efYzZSanBkhmSezV71UPT1uzvN9Ecr4ehP5gizbGl1esC0V/+2w7lqiT6FkUOe" type="module" crossorigin defer></script>
 ```
 
 If you look on the website, there are also easy install instructions for [Google Tag Manager](https://fasterthanlight.net/#easy-setup-instructions), [Shopify](https://fasterthanlight.net/#easy-setup-instructions), [WordPress](https://fasterthanlight.net/#easy-setup-instructions), and more.
@@ -91,7 +91,7 @@ npm i tachyonjs
 Tachyon is super tiny, so you can also inline it. If you use the following inlined `<script>` tags, you are waived from the legal requirement to include a copy of the license.
 
 ```html
-<script type="module" defer>/* tachyon 1.1.3 */var e=document.body.dataset;const o="tachyonWhitelist"in e,n="tachyonSameOrigin"in e,a=e.tachyonTimer||50;let r=null;function i(){r=r?null:this;const t="tachyon";var e=document.getElementById(t);e?e.remove():setTimeout(()=>{var e;r===this&&((e=document.createElement("link")).id=t,e.href=this.href,e.rel="prerender",document.head.appendChild(e))},a)}function t(t){"A"!==t.tagName||!t.href||"tachyon"in t.dataset!=o||n&&t.origin!==window.location.origin||["mouseover","mouseout","touchstart","touchend"].forEach(e=>t.addEventListener(e,i,{passive:!0}))}new MutationObserver(e=>e.forEach(e=>e.addedNodes.forEach(t))).observe(document.body,{childList:!0,subtree:!0}),document.querySelectorAll("a").forEach(t);</script>
+<script type="module" defer>/* tachyon 2.0.0 */var e=document.body.dataset;const o="tachyonWhitelist"in e,n="tachyonSameOrigin"in e,a=e.tachyonTimer||50;let r=null;function i(){r=r?null:this;const t="tachyon";var e=document.getElementById(t);e?e.remove():setTimeout(()=>{var e;r===this&&((e=document.createElement("link")).id=t,e.href=this.href,e.rel="prerender",document.head.appendChild(e))},a)}function t(t){var e="tachyon"in t.dataset;"A"!==t.tagName||!t.href||e!=o&&!n||n&&!e&&t.origin!==window.location.origin||["mouseover","mouseout","touchstart","touchend"].forEach(e=>t.addEventListener(e,i,{passive:!0}))}new MutationObserver(e=>e.forEach(e=>e.addedNodes.forEach(t))).observe(document.body,{childList:!0,subtree:!0}),document.querySelectorAll("a").forEach(t);</script>
 ```
 
 ### Configuration

diff --git a/tachyon/package.json b/tachyon/package.json
@@ -1,11 +1,11 @@
 {
   "name": "tachyonjs",
-  "version": "1.1.3",
-  "description": "Make your site faster than light in <1 minute; instant page loads in 707 bytes.",
+  "version": "2.0.0",
+  "description": "Make your site faster than light in <1 minute; instant page loads in 723 bytes.",
   "main": "tachyon.js",
   "scripts": {
     "minify": "uglifyjs -c -m --module --verbose tachyon.js > tachyon.min.js",
-    "test": "cp tachyon.js test/tachyon.js && http-server test/"
+    "test": "http-server test/ && rm test/tachyon.js"
   },
   "repository": {
     "type": "git",

diff --git a/tachyon/readme.md b/tachyon/readme.md
@@ -1,4 +1,4 @@
 # Tachyon
-## Make your site faster than light in <1 minute; instant page loads in 707 bytes.
+## Make your site faster than light in <1 minute; instant page loads in 723 bytes.
 
 **For documentation related to Tachyon, please reference the [website](https://fasterthanlight.net/) and [github repository](https://github.com/weebney/tachyon).**
diff --git a/tachyon/tachyon.js b/tachyon/tachyon.js
@@ -1,4 +1,4 @@
-// tachyon.js 1.1.3 - @weebney - MIT License
+// tachyon.js 2.0.0 - @weebney - MIT License
 const bodyDataValues = document.body.dataset;
 const whitelistEnabled = 'tachyonWhitelist' in bodyDataValues;
 const sameOriginOnly = 'tachyonSameOrigin' in bodyDataValues;
@@ -10,7 +10,7 @@ function toggleLinkTag() {
   const linkTagId = 'tachyon';
   const linkTag = document.getElementById(linkTagId);
   if (linkTag) {
-    linkTag.remove()
+    linkTag.remove();
   } else {
     setTimeout(() => {
       if (lastTouchedAnchor === this) {
@@ -25,14 +25,16 @@ function toggleLinkTag() {
 }
 
 function initializeListeners(node) {
-  if ((node.tagName === 'A' && node.href) && ('tachyon' in node.dataset === whitelistEnabled) && (!sameOriginOnly || node.origin === window.location.origin)) {
+  const listed = 'tachyon' in node.dataset;
+  if ((node.tagName === 'A' && node.href) && (listed === whitelistEnabled || sameOriginOnly)
+  && (!sameOriginOnly || (listed || (node.origin === window.location.origin)))) {
     ['mouseover', 'mouseout', 'touchstart', 'touchend'].forEach((eventName) => node.addEventListener(eventName, toggleLinkTag, { passive: true }));
   }
 }
 
-const mutationObserver = new MutationObserver((mutationRecordArray) => 
- mutationRecordArray.forEach((record) => record.addedNodes.forEach(initializeListeners)));
+const mutationObserver = new MutationObserver((mutationRecordArray) => mutationRecordArray
+  .forEach((record) => record.addedNodes.forEach(initializeListeners)));
 
 mutationObserver.observe(document.body, { childList: true, subtree: true });
 
-document.querySelectorAll('a').forEach(initializeListeners);
+document.querySelectorAll('a').forEach(initializeListeners);
diff --git a/tachyon/tachyon.min.js b/tachyon/tachyon.min.js