Convert Sveltekit to Webstone App

.changeset/sixty-wombats-collect.md

@@ -0,0 +1,5 @@
+---
+"create-webstone-app": minor
+---
+
+add functionality to turn existing sveltekit app to a webstone app

.gitpod/tasks/1-webstone-dev/before.sh

@@ -5,5 +5,5 @@ npm install -g pnpm
 gp sync-done pnpm-installed-globally
 cd webstone
 pnpm install
-pnpx playwright install
+pnpm playwright install
 gp sync-done dependencies-installed

package.json

@@ -35,8 +35,8 @@
     "prepare": "husky install",
     "release": "changeset publish",
     "test": "pnpm test:unit",
-    "test:e2e": "pnpx playwright test",
-    "test:e2e:open": "pnpx playwright test --headed",
+    "test:e2e": "pnpm playwright test",
+    "test:e2e:open": "pnpm playwright test --headed",
     "test:unit": "c8 --all --include=**/src --reporter=html pnpm test:unit:only",
     "test:unit:only": "NODE_OPTIONS='--loader tsx' uvu packages tests"
   },

packages/create-webstone-app/package.json

@@ -34,6 +34,7 @@
     "enquirer": "2.3.6",
     "execa": "6.1.0",
     "fs-extra": "10.1.0",
-    "listr2": "4.0.5"
+    "listr2": "4.0.5",
+    "tempy": "^3.0.0"
   }
 }

packages/create-webstone-app/src/helpers.ts

@@ -1,10 +1,16 @@
 import chalk from "chalk";
+import fs from "fs-extra";
+import path from "path";
 
 import { ListrTaskWrapper, ListrRenderer } from "listr2/dist/index";
 
+const minimalVersion = 405;
+
 export interface Ctx {
   appDir: string;
-  webAppDir?: string;
+  isSveltekit: boolean;
+  tempDir: string;
+  webAppDir: string;
 }
 
 export type WebstoneTask = ListrTaskWrapper<Ctx, typeof ListrRenderer>;
@@ -41,3 +47,26 @@ Next steps:
   - ${chalk.bold(chalk.cyan("pnpm ws dev"))}
     `);
 };
+
+export const isSveltekit = (appDir: string) => {
+  if (fs.existsSync(path.join(appDir, "package.json"))) {
+    const packageJson = fs.readJsonSync(path.join(appDir, "package.json"));
+    if (packageJson.devDependencies["@sveltejs/kit"]) {
+      return true;
+    }
+  }
+  return false;
+};
+
+export const checkCorrectSveltekitVersion = (version: string) => {
+  const versionRegex = /^1\.0\.0-next\.(\d{3})$/;
+  const error = Error(
+    `Please upgrade to a Sveltekit Version greater than 1.0.0-next.${minimalVersion}`
+  );
+  if (version === "next") return true;
+  const matches = version.match(versionRegex);
+  if (!matches) throw error;
+  const [, kitVersion] = matches;
+  if (parseInt(kitVersion) < minimalVersion) throw error;
+  return true;
+};

packages/create-webstone-app/src/tasks/1-create-app-directory/index.ts

@@ -1,7 +1,12 @@
 import fs from "fs-extra";
 import { ListrTask } from "listr2/dist/index";
 
-import { Ctx, WebstoneTask } from "../../helpers";
+import {
+  checkCorrectSveltekitVersion,
+  Ctx,
+  isSveltekit,
+  WebstoneTask,
+} from "../../helpers.js";
 
 const determineAppDirName = async (ctx: Ctx, task: WebstoneTask) => {
   const appName = process.argv[2];
@@ -16,6 +21,24 @@ export const createAppDir = async (ctx: Ctx, task: WebstoneTask) => {
   const appDir = ctx.appDir;
 
   if (fs.existsSync(appDir)) {
+    if (isSveltekit(appDir)) {
+      ctx.isSveltekit = true;
+      const isSveltekitResponse = await task.prompt({
+        type: "Confirm",
+        message:
+          "This directory already contains a Sveltekit project. Do you want to turn the existing project to a webstone app?",
+        initial: false,
+      });
+      if (!isSveltekitResponse) {
+        throw new Error("Exiting, app is already a Sveltekit project");
+      }
+      checkCorrectSveltekitVersion(
+        fs.readJsonSync(`${appDir}/package.json`).devDependencies[
+          "@sveltejs/kit"
+        ]
+      );
+      return appDir;
+    }
     if (fs.readdirSync(appDir).length > 0) {
       const response = await task.prompt({
         type: "confirm",

packages/create-webstone-app/src/tasks/2-prepare-project-structure/index.ts

@@ -2,12 +2,31 @@ import fs from "fs-extra";
 import path, { dirname } from "path";
 import { ListrTask } from "listr2/dist/index";
 import { fileURLToPath } from "url";
+import { temporaryDirectory } from "tempy";
+
+const ignorePaths = [
+  "node_modules",
+  "build",
+  ".svelte-kit",
+  "package",
+  "package-lock.json",
+  "yarn.lock",
+];
 
 import { Ctx } from "../../helpers";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
 export const copyTemplate = (ctx: Ctx) => {
+  ctx.webAppDir = `${ctx.appDir}/services/web`;
+  if (ctx.isSveltekit) {
+    ctx.tempDir = temporaryDirectory({ prefix: "webstone" });
+    ignorePaths.forEach((pathString: string) => {
+      fs.existsSync(path.join(ctx.appDir, pathString)) &&
+        fs.rmdirSync(path.join(ctx.appDir, pathString));
+    });
+    fs.moveSync(ctx.appDir, ctx.tempDir, { overwrite: true });
+  }
   const templateDir = path.join(__dirname, "../../..", "template");
   fs.copySync(templateDir, ctx.appDir);
 };

packages/create-webstone-app/src/tasks/3-install-app-dependencies/index.ts

@@ -8,9 +8,13 @@ import { Ctx } from "../../helpers";
 
 const initWebApp = async (ctx: Ctx) => {
   const webAppDir = `${ctx.appDir}/services/web`;
-  ctx.webAppDir = webAppDir;
   console.log(`Installing web app in ${webAppDir}...`);
-
+  if (ctx.isSveltekit) {
+    fs.emptyDirSync(ctx.webAppDir);
+    fs.moveSync(ctx.tempDir, ctx.webAppDir, { overwrite: true });
+    fs.removeSync(ctx.tempDir);
+    return;
+  }
   try {
     fs.removeSync(`${webAppDir}/.keep`);
 

packages/create-webstone-app/tests/helpers/create-app-dir.ts

@@ -18,7 +18,7 @@ test("app dir does not exist, no app dir provided", async () => {
     output: "",
   };
 
-  const fakeContext: Ctx = {
+  const fakeContext: Partial<Ctx> = {
     appDir: ".",
   };
 
@@ -51,7 +51,7 @@ test("app dir does not exist, app dir with space", async () => {
     output: "",
   };
 
-  const fakeContext: Ctx = {
+  const fakeContext: Partial<Ctx> = {
     appDir: "test-app",
   };
   const fakeFsExistsSync = sinon.fake.returns(false);
@@ -72,7 +72,7 @@ test("app dir does not exist", async () => {
     output: "",
   };
 
-  const fakeContext: Ctx = {
+  const fakeContext: Partial<Ctx> = {
     appDir: "test-app",
   };
 
@@ -94,7 +94,7 @@ test("app dir exists and is empty", async () => {
     output: "",
   };
 
-  const fakeContext: Ctx = {
+  const fakeContext: Partial<Ctx> = {
     appDir: "test-app",
   };
 
@@ -121,7 +121,7 @@ test("app dir exists and is not empty, overwrite it", async () => {
     prompt: fakeListrPrompt,
   };
 
-  const fakeContext: Ctx = {
+  const fakeContext: Partial<Ctx> = {
     appDir: "test-app",
   };
   const fakeFsExistsSync = sinon.fake.returns(true);
@@ -153,7 +153,7 @@ test("app dir exists and is not empty, do not overwrite it", async () => {
     prompt: fakeListrPrompt,
   };
 
-  const fakeContext: Ctx = {
+  const fakeContext: Partial<Ctx> = {
     appDir: "test-app",
   };
   const fakeFsExistsSync = sinon.fake.returns(true);

packages/create-webstone-app/tests/helpers/helpers.ts

@@ -0,0 +1,67 @@
+import sinon from "sinon";
+import { test } from "uvu";
+import * as assert from "uvu/assert";
+import fs from "fs-extra";
+import { isSveltekit, checkCorrectSveltekitVersion } from "../../src/helpers";
+
+test.before.each(() => {
+  sinon.replace(console, "log", sinon.fake());
+});
+
+test.after.each(() => {
+  sinon.restore();
+});
+
+test("successfully recognize Sveltekit app", async () => {
+  const fakePackageJson = {
+    devDependencies: {
+      "@sveltejs/kit": "1.0.0-next.999",
+    },
+  };
+  const fakeReadJsonSync = sinon.fake.returns(fakePackageJson);
+  const fakeExists = sinon.fake.returns(true);
+
+  sinon.replace(fs, "readJsonSync", fakeReadJsonSync);
+  sinon.replace(fs, "existsSync", fakeExists);
+
+  assert.equal(isSveltekit("testapp"), true);
+});
+
+test("recognize, that project is not a sveltekit app", async () => {
+  const fakePackageJson = {
+    devDependencies: {
+      react: "16.8.6",
+    },
+  };
+
+  const fakeExists = sinon.fake.returns(true);
+  const fakeReadJsonSync = sinon.fake.returns(fakePackageJson);
+  sinon.replace(fs, "readJsonSync", fakeReadJsonSync);
+  sinon.replace(fs, "existsSync", fakeExists);
+
+  assert.equal(isSveltekit("testapp"), false);
+});
+
+test("no package.json provided", async () => {
+  const fakeExists = sinon.fake.returns(false);
+  sinon.replace(fs, "existsSync", fakeExists);
+
+  assert.equal(isSveltekit("testapp"), false);
+});
+
+test("wrong version of sveltekit", async () => {
+  try {
+    checkCorrectSveltekitVersion("1.0.0.next.0");
+  } catch (e) {
+    assert.match(
+      e.message,
+      /Please upgrade to a Sveltekit Version greater than 1.0.0-next.\d{3}/
+    );
+  }
+});
+
+test("correct version of sveltekit", async () => {
+  assert.ok(checkCorrectSveltekitVersion("1.0.0-next.999"));
+});
+
+test.run();