feat: add svelte preset (#292)

Co-authored-by: Hendrik Soares <hendrik.soares@gmail.com>

Author: hendriksoares

lib/constants/framework-initializer.constants.js

@@ -83,6 +83,11 @@ const TemplatesOptions = {
       { value: 'react-static', message: 'static supported', mode: 'deliver' },
     ],
   },
+  Svelte: {
+    options: [
+      { value: 'svelte-static', message: 'static supported', mode: 'deliver' },
+    ],
+  },
   Vue: {
     options: [
       { value: 'vue-static', message: 'static supported', mode: 'deliver' },
@@ -146,6 +151,10 @@ const TemplatesInitializer = {
     const cloneCommands = generateCloneCommand(projectName, subdirectory);
     await exec(cloneCommands, 'React', false, false);
   },
+  Svelte: async (projectName, subdirectory) => {
+    const cloneCommands = generateCloneCommand(projectName, subdirectory);
+    await exec(cloneCommands, 'Svelte', false, false);
+  },
   Vue: async (projectName, subdirectory) => {
     const cloneCommands = generateCloneCommand(projectName, subdirectory);
     await exec(cloneCommands, 'Vue', false, false);

lib/presets/custom/svelte/deliver/config.js

@@ -0,0 +1,10 @@
+/**
+ * Config to be used in build context.
+ */
+const config = {
+  builder: 'webpack',
+  useNodePolyfills: false,
+  custom: {},
+};
+
+export default config;

lib/presets/custom/svelte/deliver/handler.js

@@ -0,0 +1,16 @@
+import { ErrorHTML, mountSSG } from '#edge';
+/**
+ * Handles the 'fetch' event.
+ * @param {any} event - The fetch event.
+ * @returns {Promise<Response>} The response for the request.
+ */
+async function handler(event) {
+  try {
+    const myApp = await mountSSG(event.request.url);
+    return myApp;
+  } catch (error) {
+    return ErrorHTML('404');
+  }
+}
+
+export default handler;

lib/presets/custom/svelte/deliver/prebuild.js

@@ -0,0 +1,49 @@
+import { rm } from 'fs/promises';
+import {
+  exec,
+  getPackageManager,
+  copyDirectory,
+  generateManifest,
+} from '#utils';
+
+const packageManager = await getPackageManager();
+
+const manifest = {
+  origin: [
+    {
+      name: 'origin_storage_default',
+      type: 'object_storage',
+    },
+  ],
+  rules: {
+    request: [
+      {
+        name: 'Main_Rule',
+        match: '^\\/',
+        setOrigin: {
+          name: 'origin_storage_default',
+          type: 'object_storage',
+        },
+      },
+    ],
+  },
+};
+
+/**
+ * Runs custom prebuild actions
+ */
+async function prebuild() {
+  const newOutDir = '.edge/storage';
+  const outDir = 'build';
+
+  await exec(`${packageManager} run build`, 'Svelte', true);
+
+  // move files to vulcan default path
+  copyDirectory(outDir, newOutDir);
+
+  await generateManifest(manifest);
+
+  rm(outDir, { recursive: true, force: true });
+}
+
+export default prebuild;

lib/utils/presets/presets.utils.test.js

@@ -22,6 +22,7 @@ describe('getPresetsList utils', () => {
       'next',
       'react',
       'rustwasm',
+      'svelte',
       'vue',
     ];
 
@@ -91,6 +92,7 @@ describe('getPresetsList utils', () => {
       'Next (Deliver)',
       'React (Deliver)',
       'Rustwasm (Compute)',
+      'Svelte (Deliver)',
       'Vue (Deliver)',
     ];
     const beautifiedResults = presets.getBeautify();
@@ -110,6 +112,7 @@ describe('getPresetsList utils', () => {
       'hugo',
       'next',
       'react',
+      'svelte',
       'rustwasm',
       'vue',
     ];
@@ -125,6 +128,7 @@ describe('getPresetsList utils', () => {
       ['Deliver'],
       ['Compute', 'Deliver'],
       ['Deliver'],
+      ['Deliver'],
       ['Compute'],
       ['Deliver'],
     ];

tests/e2e/svelte-static.test.js

@@ -0,0 +1,55 @@
+/* eslint-disable jest/expect-expect */
+import supertest from 'supertest';
+import puppeteer from 'puppeteer';
+import projectInitializer from '../utils/project-initializer.js';
+import projectStop from '../utils/project-stop.js';
+import { getContainerPort } from '../utils/docker-env-actions.js';
+
+// timeout in minutes
+const TIMEOUT = 10 * 60 * 1000;
+
+let serverPort;
+let localhostBaseUrl;
+const EXAMPLE_PATH = '/examples/svelte-static';
+
+describe('E2E - svelte-static project', () => {
+  let request;
+  let browser;
+  let page;
+
+  beforeAll(async () => {
+    serverPort = getContainerPort();
+    localhostBaseUrl = `http://0.0.0.0:${serverPort}`;
+
+    request = supertest(localhostBaseUrl);
+
+    await projectInitializer(EXAMPLE_PATH, 'svelte', 'deliver', serverPort);
+
+    browser = await puppeteer.launch({ headless: 'new' });
+    page = await browser.newPage();
+  }, TIMEOUT);
+
+  afterAll(async () => {
+    await projectStop(serverPort, EXAMPLE_PATH.replace('/examples/', ''));
+
+    await browser.close();
+  }, TIMEOUT);
+
+  test('Should render home page in "/" route', async () => {
+    await page.goto(`${localhostBaseUrl}/`, {
+      waitUntil: 'domcontentloaded',
+    });
+    await page.waitForSelector('h1');
+    const pageContent = await page.content();
+
+    expect(pageContent).toContain('Welcome to SvelteKit');
+    expect(pageContent).toContain('kit.svelte.dev');
+  });
+
+  test('Should return correct asset', async () => {
+    await request
+      .get('/favicon.png')
+      .expect(200)
+      .expect('Content-Type', /image\/png/);
+  });
+});