Merge pull request #1 from laravel-upgrade-helper/dev

dinncer · web-flow · commit 0a687455a2aa · 2022-09-06T11:40:55.000+03:00
Dev
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,16 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+tab_width = 2
+indent_style = space
+trim_trailing_whitespace = true
+
+[*.js]
+max_line_length = 120
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/README.md b/README.md
@@ -1 +1,26 @@
-# laravel-upgrade-helper.github.io
+# Laravel Upgrade Helper
+
+This repository contains scripts that generates diff files for Laravel upgrade helper.
+
+## Goals
+
+* Support Laravel 5.5 (LTS) and above.
+* Easily view version changes.
+* Download patch file as your projects requirements.
+* See release notes for needed version.
+
+## Contributing
+
+Please see [CONTRIBUTING](CONTRIBUTING.md) for details.
+
+## Credits
+
+- [All contributors](https://github.com/laravel-upgrade-helper/laravel-upgrade-helper.github.io/graphs/contributors)
+
+## License
+
+The MIT License (MIT). Please see [License File](LICENSE) for more information.
+
+## Thanks
+
+This project idea comes from [React Native Upgrade Helper](https://github.com/react-native-community/upgrade-helper)
diff --git a/index.html b/index.html
@@ -1,164 +1,195 @@
 <!DOCTYPE html>
 <html lang="en-us">
 <head>
-  <meta charset="utf-8" />
+  <meta charset="utf-8"/>
   <title>Laravel Upgrade Helper</title>
   <meta name="description"
-    content="It shows what's new in the files you're using and between the new version. We know, there are release notes. This is just a quick overview.">
+        content="It shows what's new in the files you're using and between the new version. We know, there are release notes. This is just a quick overview.">
   <link rel="shortcut icon" href="https://laravel.com/img/favicon/favicon.ico">
   <script src="https://cdn.tailwindcss.com"></script>
   <script src="https://unpkg.com/vue@3"></script>
-  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />
+  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css"/>
   <script src="https://cdn.jsdelivr.net/npm/diff2html@3.4.18/bundles/js/diff2html.min.js"></script>
 </head>
 <body>
-  <header>
-    <div class="container mx-auto flex justify-end">
-      <a class="text-gray-600 mt-10" href="https://github.com/laravel-upgrade-helper" target="_blank">
-        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-          <path
-            d="M256,32C132.3,32,32,134.9,32,261.7c0,101.5,64.2,187.5,153.2,217.9a17.56,17.56,0,0,0,3.8.4c8.3,0,11.5-6.1,11.5-11.4,0-5.5-.2-19.9-.3-39.1a102.4,102.4,0,0,1-22.6,2.7c-43.1,0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1,1.4-14.1h.1c22.5,2,34.3,23.8,34.3,23.8,11.2,19.6,26.2,25.1,39.6,25.1a63,63,0,0,0,25.6-6c2-14.8,7.8-24.9,14.2-30.7-49.7-5.8-102-25.5-102-113.5,0-25.1,8.7-45.6,23-61.6-2.3-5.8-10-29.2,2.2-60.8a18.64,18.64,0,0,1,5-.5c8.1,0,26.4,3.1,56.6,24.1a208.21,208.21,0,0,1,112.2,0c30.2-21,48.5-24.1,56.6-24.1a18.64,18.64,0,0,1,5,.5c12.2,31.6,4.5,55,2.2,60.8,14.3,16.1,23,36.6,23,61.6,0,88.2-52.4,107.6-102.3,113.3,8,7.1,15.2,21.1,15.2,42.5,0,30.7-.3,55.5-.3,63,0,5.4,3.1,11.5,11.4,11.5a19.35,19.35,0,0,0,4-.4C415.9,449.2,480,363.1,480,261.7,480,134.9,379.7,32,256,32Z" />
-        </svg>
-      </a>
-    </div>
-  </header>
-  <main id="app">
-    <div class="container font-sans bg-white mx-auto">
-      <section class="bg-white mt-20">
-        <div class="max-w-2xl px-6 text-center mx-auto">
-          <img src="https://laravel.com/img/logomark.min.svg" alt="Laravel Upgrade Helper" width="50" class="mx-auto" />
-          <h1 class="mt-5 text-5xl font-semibold text-gray-800">Laravel Upgrade Helper</h1>
-          <p class="text-gray-600 mt-4">It shows what's new in the files you're using and between the new version. We
-            know, there are release notes. This is just a quick overview.</p>
-          <div>
-            <p class="mt-5">
-              <select v-model="baseVersion" @change="upgradeVersion = upgradableVersions[0]"
-                class="block py-2.5 px-0 w-full text-sm text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer">
-                <option value="null">Current Version</option>
-                <template v-for="tag in tags">
-                  <option :value="tag" v-text="tag"></option>
-                </template>
-              </select>
-            </p>
-            <p class="mt-5">
-              <select v-model="upgradeVersion"
-                class="block py-2.5 px-0 w-full text-sm text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer">
-                <option value="null">Upgrade To</option>
-                <template v-for="upgradableVersions in upgradableVersions">
-                  <option :value="upgradableVersions" v-text="upgradableVersions"></option>
-                </template>
-              </select>
-            </p>
-            <button @click="showDiff" id="showBtn"
-              class="mt-10 relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-pink-500 to-orange-400 group-hover:from-pink-500 group-hover:to-orange-400 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-pink-200 dark:focus:ring-pink-800">
+<header>
+  <div class="container mx-auto flex justify-end">
+    <a class="text-gray-600 mt-10" href="https://github.com/laravel-upgrade-helper" target="_blank">
+      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+        <path
+          d="M256,32C132.3,32,32,134.9,32,261.7c0,101.5,64.2,187.5,153.2,217.9a17.56,17.56,0,0,0,3.8.4c8.3,0,11.5-6.1,11.5-11.4,0-5.5-.2-19.9-.3-39.1a102.4,102.4,0,0,1-22.6,2.7c-43.1,0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1,1.4-14.1h.1c22.5,2,34.3,23.8,34.3,23.8,11.2,19.6,26.2,25.1,39.6,25.1a63,63,0,0,0,25.6-6c2-14.8,7.8-24.9,14.2-30.7-49.7-5.8-102-25.5-102-113.5,0-25.1,8.7-45.6,23-61.6-2.3-5.8-10-29.2,2.2-60.8a18.64,18.64,0,0,1,5-.5c8.1,0,26.4,3.1,56.6,24.1a208.21,208.21,0,0,1,112.2,0c30.2-21,48.5-24.1,56.6-24.1a18.64,18.64,0,0,1,5,.5c12.2,31.6,4.5,55,2.2,60.8,14.3,16.1,23,36.6,23,61.6,0,88.2-52.4,107.6-102.3,113.3,8,7.1,15.2,21.1,15.2,42.5,0,30.7-.3,55.5-.3,63,0,5.4,3.1,11.5,11.4,11.5a19.35,19.35,0,0,0,4-.4C415.9,449.2,480,363.1,480,261.7,480,134.9,379.7,32,256,32Z"/>
+      </svg>
+    </a>
+  </div>
+</header>
+<main id="app">
+  <div class="container font-sans bg-white mx-auto">
+    <section class="bg-white mt-20">
+      <div class="max-w-2xl px-6 text-center mx-auto">
+        <img src="https://laravel.com/img/logomark.min.svg" alt="Laravel Upgrade Helper" width="50"
+             class="mx-auto"/>
+        <h1 class="mt-5 text-5xl font-semibold text-gray-800">Laravel Upgrade Helper</h1>
+        <p class="text-gray-600 mt-4">Quickly view differences between versions for Laravel.</p>
+        <div>
+          <p class="mt-5">
+            <select v-model="baseVersion"
+                    @change="baseVersionChange"
+                    class="block py-2.5 px-0 w-full text-sm text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer">
+              <option value="null">Current Version</option>
+              <template v-for="tag in tags">
+                <option :value="tag" v-text="tag"></option>
+              </template>
+            </select>
+          </p>
+          <p class="mt-5">
+            <select v-model="upgradeVersion" @change="clearResult"
+                    class="block py-2.5 px-0 w-full text-sm text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer">
+              <option value="null">Upgrade To</option>
+              <template v-for="upgradableVersions in upgradableVersions">
+                <option :value="upgradableVersions" v-text="upgradableVersions"></option>
+              </template>
+            </select>
+          </p>
+          <button @click="showDiff" id="showBtn"
+                  class="mt-10 relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-pink-500 to-orange-400 group-hover:from-pink-500 group-hover:to-orange-400 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-pink-200 dark:focus:ring-pink-800">
               <span
                 class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
                 Show
               </span>
-            </button>
-          </div>
+          </button>
         </div>
-      </section>
+      </div>
+    </section>
+  </div>
+
+  <section v-show="showResult && diffString !==''" class="container mx-auto mt-3">
+    <div class="text-center">
+      For release notes see:
+      <a :href="releaseLink" target="_blank" class="underline italic">link</a>
     </div>
 
-    <section class="container mx-auto">
-      <h3 v-text="diffText" class="text-center mt-5 font-bold"></h3>
-      <div v-show="diffString !==''" v-html="diffHtml"></div>
-    </section>
-  </main>
-
-  <script>
-    const { createApp } = Vue
-
-    createApp({
-      data() {
-        return {
-          tags: [],
-          baseVersion: null,
-          upgradeVersion: null,
-          diffText: "",
-          diffString: "",
-        };
+    <div class="text-center">
+      Click <a :href="diffFileLink" download><b class="underline text-red">here</b></a>
+      to download patch file.
+    </div>
+
+    <div class="text-center">
+      <small>You may apply file like: </small>
+      <small><code v-text="'git apply <file.diff>'"></code></small>
+    </div>
+
+    <div v-show="diffString !==''" v-html="diffHtml"></div>
+  </section>
+</main>
+
+<script>
+  const {createApp} = Vue
+
+  createApp({
+    data() {
+      return {
+        tags: [],
+        baseVersion: null,
+        upgradeVersion: null,
+        diffString: "",
+        showResult: false,
+      };
+    },
+
+    mounted() {
+      fetch('tags.txt')
+        .then(response => response.text())
+        .then(data => this.tags = data.trim().split('\n'));
+    },
+
+    methods: {
+      clearResult() {
+        this.diffString = "";
+        this.showResult = false;
       },
 
-      mounted() {
-        fetch('tags.txt')
-          .then(response => response.text())
-          .then(data => this.tags = data.trim().split('\n'));
+      baseVersionChange() {
+        this.upgradeVersion = this.upgradableVersions[0] || null;
+        this.clearResult();
       },
 
-      methods: {
-        showDiff() {
-          if (!this.tags.includes(this.baseVersion) || 
-            !this.tags.includes(this.upgradeVersion)
-          ) {
-            alert('select version'); // TODO: modal here!
-            return;
-          }
+      showDiff() {
+        if (!this.tags.includes(this.baseVersion) ||
+          !this.tags.includes(this.upgradeVersion)
+        ) {
+          alert('select version'); // TODO: modal here!
+          return;
+        }
 
-          this.diffText = '';
-          this.diffString = '';
+        this.showResult = true;
+        this.diffString = '';
 
-          this.diffText = `${this.baseVersion} -> ${this.upgradeVersion}`
+        fetch(this.diffFileLink)
+          .then(response => {
+            if (!response.ok) {
+              alert('Cannot find diff');
 
-          fetch(`diffs/${this.baseVersion}...${this.upgradeVersion}.diff`)
-            .then(response => {
-              if (!response.ok) {
-                alert('Cannot find diff');
+              throw new Error("Cannot find diff");
+            }
 
-                throw new Error("Cannot find diff");
-              }
+            return response.text();
+          })
+          .then(diffString => {
+            this.diffString = diffString;
 
-              return response.text();
-            })
-            .then(diffString => {
-              this.diffString = diffString;
+            document.getElementById('showBtn').scrollIntoView({behavior: "smooth"});
+          });
+      },
+    },
 
-              document.getElementById('showBtn').scrollIntoView({ behavior: "smooth" });
-            });
-        },
+    computed: {
+      releaseLink() {
+        return 'https://github.com/laravel/laravel/releases/tag/' + this.upgradeVersion;
       },
 
-      computed: {
-        diffHtml() {
-          return Diff2Html.html(this.diffString, {
-            drawFileList: true,
-            fileListToggle: true,
-            fileListStartVisible: false,
-            fileContentToggle: false,
-            matching: 'lines',
-            outputFormat: 'side-by-side',
-            synchronizedScroll: true,
-            highlight: true,
-            renderNothingWhenEmpty: false,
-          });
-        },
-
-        upgradableVersions() {
-          if (!this.baseVersion) {
-            return [];
-          }
-
-          let sameVersionTags = this.tags.filter(tag => {
-            return tag.slice(0, 2) === this.baseVersion.slice(0, 2) &&
-              this.baseVersion.localeCompare(
-                tag,
-                undefined,
-                { numeric: true, sensitivity: 'base' }
-              ) === -1
-          });
+      diffFileLink() {
+        return `diffs/${this.baseVersion}...${this.upgradeVersion}.diff`;
+      },
+
+      diffHtml() {
+        return Diff2Html.html(this.diffString, {
+          drawFileList: true,
+          fileListToggle: true,
+          fileListStartVisible: false,
+          fileContentToggle: false,
+          matching: 'lines',
+          outputFormat: 'side-by-side',
+          synchronizedScroll: true,
+          highlight: true,
+          renderNothingWhenEmpty: false,
+        });
+      },
+
+      upgradableVersions() {
+        if (!this.baseVersion) {
+          return [];
+        }
+
+        let sameVersionTags = this.tags.filter(tag => {
+          return tag.slice(0, 2) === this.baseVersion.slice(0, 2) &&
+            this.baseVersion.localeCompare(
+              tag,
+              undefined,
+              {numeric: true, sensitivity: 'base'}
+            ) === -1
+        });
 
-          const lastIndex = this.tags.indexOf(sameVersionTags[sameVersionTags.length - 1])
+        const lastIndex = this.tags.indexOf(sameVersionTags[sameVersionTags.length - 1])
 
-          if (lastIndex < this.tags.length - 1) {
-            sameVersionTags.push(this.tags[lastIndex + 1])
-          }
+        if (lastIndex < this.tags.length - 1) {
+          sameVersionTags.push(this.tags[lastIndex + 1])
+        }
 
-          return sameVersionTags
-        },
+        return sameVersionTags
       },
-    }).mount('#app')
-  </script>
+    },
+  }).mount('#app')
+</script>
 </body>
 
-</html>
+</html>
