feat: runtime versions & base runtimes for templates

src/lib/stores/marketplace.ts

@@ -88,30 +88,30 @@ export const marketplace: MarketplaceTemplate[] = [
         timeout: 15,
         usecases: ['AI'],
         runtimes: [
-            {
-                name: 'node-18.0',
-                commands: 'npm install',
-                entrypoint: 'src/main.js',
-                providerRootDirectory: 'node/prompt-chatgpt'
-            },
-            {
-                name: 'python-3.9',
-                commands: 'pip install -r requirements.txt',
-                entrypoint: 'src/main.py',
-                providerRootDirectory: 'python/prompt_chatgpt'
-            },
-            {
-                name: 'php-8.0',
-                commands: 'composer install',
-                entrypoint: 'src/index.php',
-                providerRootDirectory: 'php/prompt-chatgpt'
-            },
-            {
-                name: 'dart-2.17',
-                commands: 'dart pub get',
-                entrypoint: 'lib/main.dart',
-                providerRootDirectory: 'dart/prompt_chatgpt'
-            }
+            ...getRuntimes(
+                TemplateRuntimes.NODE,
+                'npm install',
+                'src/main.js',
+                'node/prompt-chatgpt'
+            ),
+            ...getRuntimes(
+                TemplateRuntimes.PYTHON,
+                'pip install -r requirements.txt',
+                'src/main.py',
+                'python/prompt_chatgpt'
+            ),
+            ...getRuntimes(
+                TemplateRuntimes.PHP,
+                'composer install',
+                'src/index.php',
+                'php/prompt-chatgpt'
+            ),
+            ...getRuntimes(
+                TemplateRuntimes.DART,
+                'dart pub get',
+                'lib/main.dart',
+                'dart/prompt_chatgpt'
+            )
         ],
         instructions: `For documentation and instructions check out <a target="_blank" rel="noopener noreferrer" class="link" href="https://github.com/appwrite/templates/tree/main/node/prompt-chatgpt">file</a>.`,
         vcsProvider: 'github',
@@ -148,18 +148,18 @@ export const marketplace: MarketplaceTemplate[] = [
         timeout: 15,
         usecases: ['Messaging'],
         runtimes: [
-            {
-                name: 'node-18.0',
-                commands: 'npm install && npm run setup',
-                entrypoint: 'src/main.js',
-                providerRootDirectory: 'node/discord-command-bot'
-            },
-            {
-                name: 'python-3.9',
-                commands: 'pip install -r requirements.txt && python src/setup.py',
-                entrypoint: 'src/main.py',
-                providerRootDirectory: 'python/discord_command_bot'
-            }
+            ...getRuntimes(
+                TemplateRuntimes.NODE,
+                'npm install && npm run setup',
+                'src/main.js',
+                'node/discord-command-bot'
+            ),
+            ...getRuntimes(
+                TemplateRuntimes.PYTHON,
+                'pip install -r requirements.txt && python src/setup.py',
+                'src/main.py',
+                'python/discord_command_bot'
+            )
         ],
         instructions: `For documentation and instructions check out <a target="_blank" rel="noopener noreferrer" class="link" href="https://github.com/appwrite/templates/tree/main/node/discord-command-bot">file</a>.`,
         vcsProvider: 'github',
@@ -204,12 +204,12 @@ export const marketplace: MarketplaceTemplate[] = [
         timeout: 15,
         usecases: ['AI'],
         runtimes: [
-            {
-                name: 'node-18.0',
-                commands: 'npm install',
-                entrypoint: 'src/main.js',
-                providerRootDirectory: 'node/analyze-with-perspectiveapi'
-            }
+            ...getRuntimes(
+                TemplateRuntimes.NODE,
+                'npm install',
+                'src/main.js',
+                'node/analyze-with-perspectiveapi'
+            )
         ],
         instructions: `For documentation and instructions check out <a target="_blank" rel="noopener noreferrer" class="link" href="https://github.com/appwrite/templates/tree/main/node/analyze-with-perspectiveapi">file</a>.`,
         vcsProvider: 'github',
@@ -239,24 +239,24 @@ export const marketplace: MarketplaceTemplate[] = [
         timeout: 15,
         usecases: ['AI'],
         runtimes: [
-            {
-                name: 'node-18.0',
-                commands: 'npm install',
-                entrypoint: 'src/main.js',
-                providerRootDirectory: 'node/censor-with-redact'
-            },
-            {
-                name: 'python-3.9',
-                commands: 'pip install -r requirements.txt',
-                entrypoint: 'src/main.py',
-                providerRootDirectory: 'python/censor_with_redact'
-            },
-            {
-                name: 'dart-2.17',
-                commands: 'dart pub get',
-                entrypoint: 'lib/main.dart',
-                providerRootDirectory: 'dart/censor_with_redact'
-            }
+            ...getRuntimes(
+                TemplateRuntimes.NODE,
+                'npm install',
+                'src/main.js',
+                'node/censor-with-redact'
+            ),
+            ...getRuntimes(
+                TemplateRuntimes.PYTHON,
+                'pip install -r requirements.txt',
+                'src/main.py',
+                'python/censor_with_redact'
+            ),
+            ...getRuntimes(
+                TemplateRuntimes.DART,
+                'dart pub get',
+                'lib/main.dart',
+                'dart/censor_with_redact'
+            )
         ],
         instructions: `For documentation and instructions check out <a target="_blank" rel="noopener noreferrer" class="link" href="https://github.com/appwrite/templates/tree/main/node/censor-with-redact">file</a>.`,
         vcsProvider: 'github',
@@ -285,12 +285,7 @@ export const marketplace: MarketplaceTemplate[] = [
         timeout: 15,
         usecases: ['Utilities'],
         runtimes: [
-            {
-                name: 'node-18.0',
-                commands: 'npm install',
-                entrypoint: 'src/main.js',
-                providerRootDirectory: 'node/generate-pdf'
-            }
+            ...getRuntimes(TemplateRuntimes.NODE, 'npm install', 'src/main.js', 'node/generate-pdf')
         ],
         instructions: `For documentation and instructions check out <a target="_blank" rel="noopener noreferrer" class="link" href="https://github.com/appwrite/templates/tree/main/node/generate-pdf">file</a>.`,
         vcsProvider: 'github',
@@ -311,12 +306,12 @@ export const marketplace: MarketplaceTemplate[] = [
         timeout: 15,
         usecases: ['Dev Tools'],
         runtimes: [
-            {
-                name: 'node-18.0',
-                commands: 'npm install',
-                entrypoint: 'src/main.js',
-                providerRootDirectory: 'node/github-issue-bot'
-            }
+            ...getRuntimes(
+                TemplateRuntimes.NODE,
+                'npm install',
+                'src/main.js',
+                'node/github-issue-bot'
+            )
         ],
         instructions: `For documentation and instructions check out <a target="_blank" rel="noopener noreferrer" class="link" href="https://github.com/appwrite/templates/tree/main/node/github-issue-bot">file</a>.`,
         vcsProvider: 'github',
@@ -353,12 +348,12 @@ export const marketplace: MarketplaceTemplate[] = [
         timeout: 15,
         usecases: ['Utilities'],
         runtimes: [
-            {
-                name: 'node-18.0',
-                commands: 'npm install',
-                entrypoint: 'src/main.js',
-                providerRootDirectory: 'node/url-shortener'
-            }
+            ...getRuntimes(
+                TemplateRuntimes.NODE,
+                'npm install',
+                'src/main.js',
+                'node/url-shortener'
+            )
         ],
         instructions: `For documentation and instructions check out <a target="_blank" rel="noopener noreferrer" class="link" href="https://github.com/appwrite/templates/tree/main/node/url-shortener">file</a>.`,
         vcsProvider: 'github',
@@ -419,24 +414,24 @@ export const marketplace: MarketplaceTemplate[] = [
         timeout: 15,
         usecases: ['Databases'],
         runtimes: [
-            {
-                name: 'node-18.0',
-                commands: 'npm install',
-                entrypoint: 'src/main.js',
-                providerRootDirectory: 'node/sync-with-algolia'
-            },
-            {
-                name: 'python-3.9',
-                commands: 'pip install -r requirements.txt',
-                entrypoint: 'src/main.py',
-                providerRootDirectory: 'python/sync_with_algolia'
-            },
-            {
-                name: 'php-8.0',
-                commands: 'composer install',
-                entrypoint: 'src/index.php',
-                providerRootDirectory: 'php/sync-with-algolia'
-            }
+            ...getRuntimes(
+                TemplateRuntimes.NODE,
+                'npm install',
+                'src/main.js',
+                'node/sync-with-algolia'
+            ),
+            ...getRuntimes(
+                TemplateRuntimes.PYTHON,
+                'pip install -r requirements.txt',
+                'src/main.py',
+                'python/sync_with_algolia'
+            ),
+            ...getRuntimes(
+                TemplateRuntimes.PHP,
+                'composer install',
+                'src/index.php',
+                'php/sync-with-algolia'
+            )
         ],
         instructions: `For documentation and instructions check out <a target="_blank" rel="noopener noreferrer" class="link" href="https://github.com/appwrite/templates/tree/main/node/sync-with-algolia">file</a>.`,
         vcsProvider: 'github',
@@ -508,12 +503,12 @@ export const marketplace: MarketplaceTemplate[] = [
         timeout: 15,
         usecases: ['Databases'],
         runtimes: [
-            {
-                name: 'node-18.0',
-                commands: 'npm install',
-                entrypoint: 'src/main.js',
-                providerRootDirectory: 'node/sync-with-meilisearch'
-            }
+            ...getRuntimes(
+                TemplateRuntimes.NODE,
+                'npm install',
+                'src/main.js',
+                'node/sync-with-meilisearch'
+            )
         ],
         instructions: `For documentation and instructions check out <a target="_blank" rel="noopener noreferrer" class="link" href="https://github.com/appwrite/templates/tree/main/node/sync-with-meilisearch">file</a>.`,
         vcsProvider: 'github',
@@ -592,12 +587,12 @@ export const marketplace: MarketplaceTemplate[] = [
         timeout: 15,
         usecases: ['Messaging'],
         runtimes: [
-            {
-                name: 'node-18.0',
-                commands: 'npm install',
-                entrypoint: 'src/main.js',
-                providerRootDirectory: 'node/whatsapp-with-vonage'
-            }
+            ...getRuntimes(
+                TemplateRuntimes.NODE,
+                'npm install',
+                'src/main.js',
+                'node/whatsapp-with-vonage'
+            )
         ],
         instructions: `For documentation and instructions check out <a target="_blank" rel="noopener noreferrer" class="link" href="https://github.com/appwrite/templates/tree/main/node/whatsapp-with-vonage">file</a>.`,
         vcsProvider: 'github',
@@ -647,12 +642,12 @@ export const marketplace: MarketplaceTemplate[] = [
         timeout: 15,
         usecases: ['Messaging'],
         runtimes: [
-            {
-                name: 'node-18.0',
-                commands: 'npm install',
-                entrypoint: 'src/main.js',
-                providerRootDirectory: 'node/push-notification-with-fcm'
-            }
+            ...getRuntimes(
+                TemplateRuntimes.NODE,
+                'npm install',
+                'src/main.js',
+                'node/push-notification-with-fcm'
+            )
         ],
         instructions: `For documentation and instructions check out <a target="_blank" rel="noopener noreferrer" class="link" href="https://github.com/appwrite/templates/tree/main/node/push-notification-with-fcm">file</a>.`,
         vcsProvider: 'github',
@@ -702,24 +697,24 @@ export const marketplace: MarketplaceTemplate[] = [
         timeout: 15,
         usecases: ['Utilities'],
         runtimes: [
-            {
-                name: 'node-18.0',
-                commands: 'npm install',
-                entrypoint: 'src/main.js',
-                providerRootDirectory: 'node/email-contact-form'
-            },
-            {
-                name: 'python-3.9',
-                commands: 'pip install -r requirements.txt',
-                entrypoint: 'src/main.py',
-                providerRootDirectory: 'python/email_contact_form'
-            },
-            {
-                name: 'php-8.0',
-                commands: 'composer install',
-                entrypoint: 'src/index.php',
-                providerRootDirectory: 'php/email-contact-form'
-            }
+            ...getRuntimes(
+                TemplateRuntimes.NODE,
+                'npm install',
+                'src/main.js',
+                'node/email-contact-form'
+            ),
+            ...getRuntimes(
+                TemplateRuntimes.PYTHON,
+                'pip install -r requirements.txt',
+                'src/main.py',
+                'python/email_contact_form'
+            ),
+            ...getRuntimes(
+                TemplateRuntimes.PHP,
+                'composer install',
+                'src/index.php',
+                'php/email-contact-form'
+            )
         ],
         instructions: `For documentation and instructions check out <a target="_blank" rel="noopener noreferrer" class="link" href="https://github.com/appwrite/templates/tree/main/node/email-contact-form">file</a>.`,
         vcsProvider: 'github',
@@ -784,12 +779,12 @@ export const marketplace: MarketplaceTemplate[] = [
         timeout: 15,
         usecases: ['Utilities'],
         runtimes: [
-            {
-                name: 'node-18.0',
-                commands: 'npm install',
-                entrypoint: 'src/main.js',
-                providerRootDirectory: 'node/subscriptions-with-stripe'
-            }
+            ...getRuntimes(
+                TemplateRuntimes.NODE,
+                'npm install',
+                'src/main.js',
+                'node/subscriptions-with-stripe'
+            )
         ],
         instructions: `For documentation and instructions check out <a target="_blank" rel="noopener noreferrer" class="link" href="https://github.com/appwrite/templates/tree/main/node/subscriptions-with-stripe">file</a>.`,
         vcsProvider: 'github',
@@ -840,12 +835,12 @@ export const marketplace: MarketplaceTemplate[] = [
         timeout: 15,
         usecases: ['Utilities'],
         runtimes: [
-            {
-                name: 'node-18.0',
-                commands: 'npm install && npm run setup',
-                entrypoint: 'src/main.js',
-                providerRootDirectory: 'node/payments-with-stripe'
-            }
+            ...getRuntimes(
+                TemplateRuntimes.NODE,
+                'npm install',
+                'src/main.js',
+                'node/payments-with-stripe'
+            )
         ],
         instructions: `For documentation and instructions check out <a target="_blank" rel="noopener noreferrer" class="link" href="https://github.com/appwrite/templates/tree/main/node/payments-with-stripe">file</a>.`,
         vcsProvider: 'github',

src/lib/wizards/functions/cover.svelte

@@ -35,7 +35,10 @@
     import { marketplace, type MarketplaceTemplate } from '$lib/stores/marketplace';
     import { Button } from '$lib/elements/forms';
     import { page } from '$app/stores';
-    import { runtimesList } from '$routes/console/project-[project]/functions/store';
+    import {
+        baseRuntimesList,
+        runtimesList
+    } from '$routes/console/project-[project]/functions/store';
     import { trackEvent } from '$lib/actions/analytics';
     import type { Models } from '@appwrite.io/console';
     import WizardCover from '$lib/layout/wizardCover.svelte';
@@ -91,7 +94,7 @@
                         style:--grid-item-size="8rem"
                         style:--grid-item-size-small-screens="9rem"
                         style:--grid-gap=".5rem">
-                        {#await $runtimesList}
+                        {#await $baseRuntimesList}
                             {#each Array(6) as _i}
                                 <li>
                                     <button

src/routes/console/project-[project]/functions/store.ts

@@ -6,3 +6,12 @@ export const runtimesList = derived(
     page,
     async ($page) => (await $page.data.runtimesList) as Models.RuntimeList
 );
+
+export const baseRuntimesList = derived(runtimesList, async ($runtimesList) => ({
+    runtimes: (await $runtimesList).runtimes
+        .map((runtime) => {
+            const runtimeBase = runtime.name.split('-')[0];
+            return { ...runtime, name: runtimeBase };
+        })
+        .filter((runtime, index, self) => self.findIndex((n) => n.name === runtime.name) === index)
+}));

src/routes/console/project-[project]/functions/templates/+page.ts

@@ -15,34 +15,47 @@ export const load: PageLoad = async ({ url, route }) => {
     };
     const [runtimes, useCases] = marketplace.reduce(
         ([rt, uc], next) => {
-            next.runtimes.forEach((runtime) => rt.add(runtime.name));
+            next.runtimes.forEach((runtime) => {
+                const runtimeBase = runtime.name.split('-')[0];
+                if (!rt.has(runtimeBase)) rt.add(runtimeBase);
+            });
             next.usecases.forEach((useCase) => uc.add(useCase));
             return [rt, uc];
         },
         [new Set<string>(), new Set<string>()]
     );
 
-    const templates = marketplace.filter((template) => {
-        if (
-            filter.runtimes.length > 0 &&
-            !template.runtimes.some((n) => filter.runtimes.includes(n.name))
-        ) {
-            return false;
-        }
+    const templates = marketplace
+        .filter((template) => {
+            if (
+                filter.runtimes.length > 0 &&
+                !template.runtimes.some((n) => filter.runtimes.includes(n.name))
+            ) {
+                return false;
+            }
 
-        if (
-            filter.useCases.length > 0 &&
-            !template.usecases.some((n) => filter.useCases.includes(n))
-        ) {
-            return false;
-        }
+            if (
+                filter.useCases.length > 0 &&
+                !template.usecases.some((n) => filter.useCases.includes(n))
+            ) {
+                return false;
+            }
 
-        if (search) {
-            return template.name.toLowerCase().includes(search.toLowerCase());
-        } else {
-            return true;
-        }
-    });
+            if (search) {
+                return template.name.toLowerCase().includes(search.toLowerCase());
+            } else {
+                return true;
+            }
+        })
+        .map((template) => ({
+            ...template,
+            runtimes: template.runtimes
+                .map((runtime) => ({ ...runtime, name: runtime.name.split('-')[0] }))
+                .filter(
+                    (runtime, index, self) =>
+                        self.findIndex((n) => n.name === runtime.name) === index
+                )
+        }));
 
     return {
         offset,

src/routes/console/project-[project]/functions/templates/template-[template]/+page.svelte

@@ -7,7 +7,7 @@
     import { isSelfHosted } from '$lib/system';
     import { connectTemplate } from '$lib/wizards/functions/cover.svelte';
     import { consoleVariables, isVcsEnabled } from '$routes/console/store';
-    import { template } from './store';
+    import { template, baseRuntimes } from './store';
 </script>
 
 <Container>
@@ -26,10 +26,10 @@
                 </li>
                 <li class="collapsible-item">
                     <h3 class="body-text-2 u-bold u-padding-block-12">
-                        Runtimes <span class="inline-tag">{$template.runtimes.length}</span>
+                        Runtimes <span class="inline-tag">{$baseRuntimes.length}</span>
                     </h3>
                     <div class="collapsible-content u-flex u-flex-wrap u-gap-8">
-                        {#each $template.runtimes as runtime}
+                        {#each $baseRuntimes as runtime}
                             <Pill>{runtime.name}</Pill>
                         {/each}
                     </div>

src/routes/console/project-[project]/functions/templates/template-[template]/store.ts

@@ -3,3 +3,12 @@ import type { MarketplaceTemplate } from '$lib/stores/marketplace';
 import { derived } from 'svelte/store';
 
 export const template = derived(page, ($page) => $page.data.template as MarketplaceTemplate);
+
+export const baseRuntimes = derived(template, ($template) =>
+    $template.runtimes
+        .map((runtime) => {
+            const runtimeBase = runtime.name.split('-')[0];
+            return { ...runtime, name: runtimeBase };
+        })
+        .filter((runtime, index, self) => self.findIndex((n) => n.name === runtime.name) === index)
+);