v1.0.5 (#25)

- Update sequence a bit optimized.
- Dependency updates.
- Edge case on repo/branch selection handled.
- More default templates. Thanks to @SaraVieira

src/components/Application/Configuration/Branches.svelte

@@ -1,24 +1,46 @@
 <script>
   export let loading, branches;
+  import { isActive } from "@roxi/routify";
   import { application } from "@store";
+  import Select from "svelte-select";
+
+  const selectedValue =
+    !$isActive("/application/new") && $application.repository.branch
+
+  function handleSelect(event) {
+    $application.repository.branch = null;
+    setTimeout(() => {
+      $application.repository.branch = event.detail.value;
+    }, 1);
+  }
 </script>
 
 {#if loading}
   <div class="grid grid-cols-1">
     <label for="branch">Branch</label>
-    <select disabled>
-      <option selected>Loading branches</option>
-    </select>
+    <div class="repository-select-search col-span-2">
+      <Select
+        containerClasses="w-full border-none bg-transparent"
+        placeholder="Loading branches..."
+        isDisabled
+      />
+    </div>
   </div>
 {:else}
   <div class="grid grid-cols-1">
     <label for="branch">Branch</label>
-    <!-- svelte-ignore a11y-no-onchange -->
-    <select id="branch" bind:value="{$application.repository.branch}">
-      <option disabled selected>Select a branch</option>
-      {#each branches as branch}
-        <option value="{branch.name}" class="font-bold">{branch.name}</option>
-      {/each}
-    </select>
+    <div class="repository-select-search col-span-2">
+      <Select
+        containerClasses="w-full border-none bg-transparent"
+        on:select="{handleSelect}"
+        selectedValue="{selectedValue}"
+        isClearable="{false}"
+        items="{branches.map(b => ({ label: b.name, value: b.name }))}"
+        showIndicator="{$isActive('/application/new')}"
+        noOptionsMessage="No branches found"
+        placeholder="Select a branch"
+        isDisabled="{!$isActive('/application/new')}"
+      />
+    </div>
   </div>
 {/if}

src/components/Application/Configuration/Configuration.svelte

@@ -29,6 +29,7 @@
 
   async function loadBranches() {
     loading.branches = true;
+    if ($isActive("/application/new")) $application.repository.branch = null
     const selectedRepository = repositories.find(
       r => r.id === $application.repository.id,
     );
@@ -80,7 +81,6 @@
             $application.github.installation.id,
             page,
           );
-
           repositories = repositories.concat(repos.repositories);
         }
       }
@@ -97,8 +97,10 @@
       }
     } catch (error) {
       return false;
+    } finally {
+      loading.github = false;
     }
-    loading.github = false;
+ 
   }
   function modifyGithubAppConfig() {
     const left = screen.width / 2 - 1020 / 2;

src/components/Application/Configuration/Repositories.svelte

@@ -1,22 +1,3 @@
-<style lang="postcss">
-  :global(.repository-select-search .listItem .item),
-  :global(.repository-select-search .empty) {
-    @apply text-sm py-3 font-bold bg-warmGray-800 text-white cursor-pointer border-none hover:bg-warmGray-700 !important;
-  }
-
-  :global(.repository-select-search .listContainer) {
-    @apply bg-transparent !important;
-  }
-
-  :global(.repository-select-search .clearSelect) {
-    @apply text-white cursor-pointer !important;
-  }
-
-  :global(.repository-select-search .selectedItem) {
-    @apply text-white relative cursor-pointer font-bold text-sm flex items-center !important;
-  }
-</style>
-
 <script>
   import { createEventDispatcher } from "svelte";
   import { isActive } from "@roxi/routify";
@@ -53,6 +34,7 @@
           selectedValue="{selectedValue}"
           isClearable="{false}"
           items="{items}"
+          showIndicator="{$isActive('/application/new')}"
           noOptionsMessage="No Repositories found"
           placeholder="Select a Repository"
           isDisabled="{!$isActive('/application/new')}"

src/components/Application/Configuration/Tabs.svelte

@@ -2,7 +2,7 @@
   import { redirect, isActive } from "@roxi/routify";
   import { onMount } from "svelte";
   import { toast } from "@zerodevx/svelte-toast";
-
+  import templates from "../../../utils/templates";
   import { application, fetch, deployments } from "@store";
   import General from "./ActiveTab/General.svelte";
   import BuildStep from "./ActiveTab/BuildStep.svelte";
@@ -57,30 +57,43 @@
           $application.build.pack = "custom";
           toast.push("Custom Dockerfile found. Build pack set to custom.");
         } else if (packageJson) {
-          // Check here for things like nextjs,react,vue,blablabla
           const { content } = await $fetch(packageJson.git_url);
           const packageJsonContent = JSON.parse(atob(content));
-
-          if (packageJsonContent.dependencies.hasOwnProperty("next")) {
-            // Next.js
-            $application.build.pack = "nodejs";
-            $application.build.command.installation = "yarn install";
-            if (packageJsonContent.scripts.hasOwnProperty("build")) {
-              $application.build.command.build = `yarn build`;
-            }
-            toast.push("Next.js App detected. Build pack set to Node.js.");
-          } else if (packageJsonContent.dependencies.hasOwnProperty("react")) {
-            // CRA
-            $application.build.pack = "static";
-            $application.publish.directory = "build";
-            $application.build.command.installation = "yarn install";
-            if (packageJsonContent.scripts.hasOwnProperty("build")) {
-              $application.build.command.build = `yarn build`;
-            }
-            toast.push(
-              "React App detected. Build pack set to static with build phase.",
+          const checkPackageJSONContents = dep => {
+            return(
+              packageJsonContent?.dependencies?.hasOwnProperty(dep) ||
+              packageJsonContent?.devDependencies?.hasOwnProperty(dep)
             );
-          }
+          };
+          Object.keys(templates).map(dep => {
+            if (checkPackageJSONContents(dep)) {
+              const config = templates[dep];
+              $application.build.pack = config.pack;
+              if (config.installation) {
+                $application.build.command.installation = config.installation;
+              }
+
+              if (config.port) {
+                $application.publish.port = config.port;
+              }
+
+              if (config.directory) {
+                $application.publish.directory = config.directory;
+              }
+
+              if (
+                packageJsonContent.scripts.hasOwnProperty("build") &&
+                config.build
+              ) {
+                $application.build.command.build = config.build;
+              }
+              toast.push(
+                `${config.name} App detected. Default values set.`,
+              );
+            } 
+ 
+          });
+
         }
       } catch (error) {
         // Nothing detected
@@ -106,7 +119,7 @@
 </script>
 
 {#if loading}
-  <Loading github githubLoadingText="Scanning repository 🤖" />
+  <Loading github githubLoadingText="Scanning repository..." />
 {:else}
   <div class="block text-center py-4">
     <nav