@superblocksteam/sdk 1.14.2 → 1.99.99-next.2

package/src/dbfs/client.ts

@@ -0,0 +1,162 @@
+import { unreachable } from "@superblocksteam/util";
+import { connectToISocketRPCServer } from "../socket/index.js";
+import { doDownloadDirectoryToLocal, doUploadLocalDirectory } from "./local.js";
+
+// TODO(code-mode): this is re-implemented in the vite-plugin-file-sync package
+// because SDK depends on vite-plugin-file-sync, but can't be circular
+export async function getApplicationDirectoryHash(
+  token: string,
+  superblocksBaseUrl: string,
+  applicationId: string,
+  branch: string | undefined,
+) {
+  const rpcClient = await connectToISocketRPCServer({
+    token,
+    superblocksBaseUrl,
+  });
+  try {
+    const response =
+      await rpcClient.call.v3.application.liveEditDirectoryContents.get({
+        applicationId,
+        branchName: branch,
+      });
+    const liveEditHash = response.data.hash;
+    if (!liveEditHash) {
+      throw new Error("No live edit hash found");
+    }
+    return liveEditHash;
+  } finally {
+    rpcClient.close();
+  }
+}
+
+export async function downloadApplicationDirectory(
+  token: string,
+  superblocksBaseUrl: string,
+  applicationId: string,
+  branch: string | undefined,
+  localDirectoryPath: string,
+): Promise<void> {
+  const rpcClient = await connectToISocketRPCServer({
+    token,
+    superblocksBaseUrl,
+  });
+  try {
+    const liveEditHash = await getApplicationDirectoryHash(
+      token,
+      superblocksBaseUrl,
+      applicationId,
+      branch,
+    );
+    await doDownloadDirectoryToLocal(
+      rpcClient,
+      liveEditHash,
+      localDirectoryPath,
+    );
+  } finally {
+    rpcClient.close();
+  }
+}
+
+export async function uploadLocalApplication(
+  token: string,
+  superblocksBaseUrl: string,
+  applicationId: string,
+  branch: string | undefined,
+  localDirectoryPath: string,
+): Promise<void> {
+  const rpcClient = await connectToISocketRPCServer({
+    token,
+    superblocksBaseUrl,
+  });
+  try {
+    const directoryHash = await doUploadLocalDirectory(
+      rpcClient,
+      localDirectoryPath,
+    );
+    console.log(`New application directory hash: ${directoryHash}`);
+    await rpcClient.call.v3.application.liveEditDirectoryContents.set({
+      applicationId,
+      branchName: branch,
+      hash: directoryHash,
+    });
+  } finally {
+    rpcClient.close();
+  }
+}
+
+export async function printDirectoryEntries(
+  token: string,
+  superblocksBaseUrl: string,
+  directoryHash: string,
+): Promise<void> {
+  const rpcClient = await connectToISocketRPCServer({
+    token,
+    superblocksBaseUrl,
+  });
+  try {
+    const directoryContentsResponse =
+      await rpcClient.call.v1.dbfs.directoryContents.get({
+        hash: directoryHash,
+      });
+    for (const entry of directoryContentsResponse.data.contents) {
+      let executable: boolean;
+      let hash: string;
+      let target: string | undefined;
+      switch (entry.type) {
+        case "-": {
+          executable = entry.executable;
+          hash = entry.hash;
+          break;
+        }
+        case "l": {
+          executable = false;
+          target = entry.target;
+          hash = " ".repeat(Math.ceil(256 / 24) * 4);
+          break;
+        }
+        case "d": {
+          executable = false;
+          hash = entry.hash;
+          break;
+        }
+        default: {
+          unreachable(entry);
+        }
+      }
+      console.log(
+        `${entry.type}${executable ? "x" : " "} ${hash} ${entry.name}${
+          target ? ` -> ${target}` : ""
+        }`,
+      );
+    }
+  } finally {
+    rpcClient.close();
+  }
+}
+
+export async function printFileContents(
+  token: string,
+  superblocksBaseUrl: string,
+  fileHash: string,
+): Promise<void> {
+  const rpcClient = await connectToISocketRPCServer({
+    token,
+    superblocksBaseUrl,
+  });
+  try {
+    const fileContentsResponse = await rpcClient.call.v1.dbfs.fileContents.get({
+      hash: fileHash,
+    });
+    // The file can contain binary data, do not interpret it as text
+    // Note: `Buffer.from` is a Node.js specific API
+    const fileContents = Buffer.from(
+      fileContentsResponse.data.contents,
+      "base64",
+    );
+    // Note: `process.stdout.write` is a Node.js specific API
+    process.stdout.write(fileContents);
+  } finally {
+    rpcClient.close();
+  }
+}

package/src/dbfs/local.ts

@@ -0,0 +1,163 @@
+import * as fsp from "node:fs/promises";
+import {
+  hashDirectoryContents,
+  hashFileContents,
+  type DirectoryEntry,
+} from "@superblocksteam/shared";
+import { unreachable } from "@superblocksteam/util";
+import { listLocalDirectory } from "@superblocksteam/vite-plugin-file-sync/list-dir";
+import type { StdISocketRPCClient } from "../socket/index.js";
+
+export async function doDownloadDirectoryToLocal(
+  rpcClient: StdISocketRPCClient,
+  directoryHash: string,
+  localDirectoryPath: string,
+): Promise<void> {
+  // ensure that the top-level local directory exists
+  await fsp.mkdir(localDirectoryPath, { recursive: true });
+  await doDownloadDirectoryToLocalRec(
+    rpcClient,
+    directoryHash,
+    localDirectoryPath,
+  );
+}
+
+async function doDownloadDirectoryToLocalRec(
+  rpcClient: StdISocketRPCClient,
+  directoryHash: string,
+  localDirectoryPath: string,
+): Promise<void> {
+  const directoryContentsResponse =
+    await rpcClient.call.v1.dbfs.directoryContents.get({ hash: directoryHash });
+  if (!directoryContentsResponse.data) {
+    throw new Error("Failed to get directory contents");
+  }
+
+  for (const entry of directoryContentsResponse.data.contents) {
+    const localFilePath = `${localDirectoryPath}/${entry.name}`;
+    switch (entry.type) {
+      case "-": {
+        const fileContentsResponse =
+          await rpcClient.call.v1.dbfs.fileContents.get({ hash: entry.hash });
+        const fileContents = Buffer.from(
+          fileContentsResponse.data.contents,
+          "base64",
+        );
+        await fsp.writeFile(localFilePath, fileContents);
+        break;
+      }
+      case "l": {
+        await fsp.symlink(entry.target, localFilePath);
+        break;
+      }
+      case "d": {
+        await fsp.mkdir(localFilePath, {
+          recursive: true /* do not reject if exists */,
+        });
+        await doDownloadDirectoryToLocalRec(
+          rpcClient,
+          entry.hash,
+          localFilePath,
+        );
+        break;
+      }
+      default: {
+        unreachable(entry);
+      }
+    }
+  }
+}
+
+/**
+ * Computes the hash of a local directory, including the hashes of all its contents recursively.
+ *
+ * @param localDirectoryPath - The path to the local directory to hash.
+ * @returns A promise that resolves to the hash of the directory and its contents.
+ */
+export async function hashLocalDirectory(localDirectoryPath: string): Promise<{
+  hash: string;
+  contents: DirectoryEntry[];
+}> {
+  const directoryContents: any[] = [];
+  const localDirListing = listLocalDirectory(localDirectoryPath);
+  for await (const localDirEntry of localDirListing) {
+    let entry: any;
+    switch (localDirEntry.type) {
+      case "-": {
+        const hash = await hashFileContents(localDirEntry.contents);
+        entry = {
+          type: "-",
+          executable: localDirEntry.executable,
+          name: localDirEntry.name,
+          hash,
+        };
+        break;
+      }
+      case "d": {
+        const { hash, contents: subdirectoryContents } =
+          await hashLocalDirectory(localDirEntry.localPath);
+        entry = {
+          type: "d",
+          name: localDirEntry.name,
+          hash,
+          contents: subdirectoryContents,
+        };
+        break;
+      }
+      case "l": {
+        entry = {
+          type: "l",
+          target: localDirEntry.target,
+          name: localDirEntry.name,
+        };
+        break;
+      }
+      default:
+        unreachable(localDirEntry);
+    }
+    directoryContents.push(entry);
+  }
+  const hash = await hashDirectoryContents(directoryContents);
+  return { contents: directoryContents, hash };
+}
+
+export async function doUploadLocalDirectory(
+  rpcClient: StdISocketRPCClient,
+  localDirectoryPath: string,
+): Promise<string> {
+  const directoryContents: DirectoryEntry[] = [];
+  const localDirListing = listLocalDirectory(localDirectoryPath);
+  for await (const localDirEntry of localDirListing) {
+    let entry: DirectoryEntry;
+    if (localDirEntry.type === "-") {
+      const putFileResponse = await rpcClient.call.v1.dbfs.fileContents.put({
+        contents: localDirEntry.contents.toString("base64"),
+      });
+      entry = {
+        type: "-",
+        hash: putFileResponse.data.hash,
+        executable: localDirEntry.executable,
+        name: localDirEntry.name,
+      };
+    } else if (localDirEntry.type === "d") {
+      const childHash = await doUploadLocalDirectory(
+        rpcClient,
+        localDirEntry.localPath,
+      );
+      entry = { type: "d", name: localDirEntry.name, hash: childHash };
+    } else if (localDirEntry.type === "l") {
+      entry = {
+        type: "l",
+        target: localDirEntry.target,
+        name: localDirEntry.name,
+      };
+    } else {
+      unreachable(localDirEntry);
+    }
+    directoryContents.push(entry);
+  }
+  const putDirResponse = await rpcClient.call.v1.dbfs.directoryContents.put({
+    contents: directoryContents,
+  });
+  return putDirResponse.data.hash;
+}

package/src/dev-utils/custom-build.mts

@@ -0,0 +1,113 @@
+import path from "node:path";
+import watcher, { type FSWatcher } from "chokidar";
+import { red } from "colorette";
+import fs from "fs-extra";
+import semver from "semver";
+import { build } from "vite";
+import { getLegacyComponentsConfig } from "./custom-config.mjs";
+import type { Plugin, UserConfig, ViteDevServer } from "vite";
+
+// we only need to build if not on React 18
+export async function isCustomComponentsEnabled() {
+  try {
+    const packageJson = await fs.readJson(
+      path.join(process.cwd(), "custom", "package.json"),
+    );
+    const reactVersion =
+      packageJson.dependencies?.["react"] ||
+      packageJson.devDependencies?.["react"];
+    if (!reactVersion) {
+      return false;
+    }
+    return semver.lt(semver.coerce(reactVersion)!, "18.0.0");
+  } catch {
+    return false;
+  }
+}
+
+async function buildCustomComponents(config: UserConfig) {
+  try {
+    console.log("Building custom components...");
+    await build(config);
+    console.log("Custom components build complete");
+    return true;
+  } catch (error) {
+    console.error(red("Custom components build failed:"), "\n", error);
+    return false;
+  }
+}
+
+let __watcher: FSWatcher | undefined;
+
+async function watchCustomComponents(folder: string) {
+  if (__watcher) {
+    return __watcher;
+  }
+  __watcher = watcher.watch(folder, {
+    ignored: [/dist/, /node_modules/],
+    persistent: true,
+    ignoreInitial: true,
+  });
+  return __watcher;
+}
+
+async function buildCustomComponentsProject() {
+  const customComponentsFolder = path.join(process.cwd(), "custom");
+  const config = getLegacyComponentsConfig(customComponentsFolder);
+  await buildCustomComponents(config);
+}
+
+// on file changes, we want to rebuild the custom components library
+// and let our vite server process that the file as changed, which triggers HMR
+// Related reading: https://vite.dev/changes/hotupdate-hook.html
+// TODO: can we run a vite dev server instead of a vite build in order to use hotUpdate to get changes?
+async function watchForChanges(server: ViteDevServer) {
+  const customComponentsFolder = path.join(process.cwd(), "custom");
+  const watcher = await watchCustomComponents(customComponentsFolder);
+
+  const handleChange = async (filePath: string) => {
+    // We need to rebuild the configuration to pick up on any file system changes
+    const config = getLegacyComponentsConfig(customComponentsFolder);
+
+    console.log(`Custom component file changed: ${filePath}`);
+    const url = path.relative(customComponentsFolder, filePath);
+    await buildCustomComponents(config);
+
+    const module = await server.moduleGraph.getModuleByUrl(
+      `/custom/dist/${url}`.replace(/\.tsx?$/, ".js"),
+    );
+    if (module) {
+      server.reloadModule(module);
+    }
+  };
+
+  watcher.on("change", handleChange);
+  watcher.on("add", handleChange);
+  watcher.on("unlink", handleChange);
+}
+
+export const customComponentsPlugin = (): Plugin => {
+  return {
+    enforce: "pre",
+    name: "custom-components",
+    // vite is calling this twice during the initial dev server start due to how remix loads
+    // configs via resolveConfig
+    async buildStart() {
+      const enabled = await isCustomComponentsEnabled();
+      if (!enabled) {
+        return;
+      }
+      await buildCustomComponentsProject();
+    },
+    async configureServer(server) {
+      const enabled = await isCustomComponentsEnabled();
+      if (!enabled) {
+        return;
+      }
+      await watchForChanges(server);
+    },
+    buildEnd() {
+      __watcher?.close();
+    },
+  };
+};

package/src/dev-utils/custom-config.mts

@@ -0,0 +1,66 @@
+import path from "node:path";
+import react from "@vitejs/plugin-react";
+import glob from "fast-glob";
+import { defineConfig } from "vite";
+
+export function getLegacyComponentsConfig(componentsFolder: string) {
+  const entries = glob.sync("**/*.{jsx,tsx}", {
+    cwd: componentsFolder,
+    absolute: true,
+    ignore: ["node_modules/**", "dist/**"],
+  });
+
+  const entryPoints = entries.reduce(
+    (acc, entry) => {
+      const relativePath = path.relative(path.join(componentsFolder), entry);
+      const entryName = relativePath.replace(/\.(jsx|tsx)$/, "");
+      acc[entryName] = relativePath;
+      return acc;
+    },
+    {} as Record<string, string>,
+  );
+
+  // we build a copy of react and react-dom because we need to import the old versions
+  // inside our vite plugins virtual wrapper
+  entryPoints["react"] = path.join(componentsFolder, "node_modules/react");
+  entryPoints["react-dom"] = path.join(
+    componentsFolder,
+    "node_modules/react-dom",
+  );
+
+  return defineConfig({
+    root: componentsFolder,
+    logLevel: "warn",
+    resolve: {
+      preserveSymlinks: true,
+      alias: {
+        react: path.join(componentsFolder, "node_modules/react"),
+        "react-dom": path.join(componentsFolder, "node_modules/react-dom"),
+      },
+    },
+    build: {
+      sourcemap: true,
+      outDir: path.resolve(componentsFolder, "dist"),
+      lib: {
+        entry: entryPoints,
+        formats: ["es"],
+        fileName: (format, entryName) => `${entryName}.js`,
+      },
+      modulePreload: false,
+      minify: false,
+      rollupOptions: {
+        output: {
+          preserveModules: true,
+          preserveModulesRoot: ".",
+          entryFileNames: "[name].js",
+        },
+      },
+    },
+    optimizeDeps: {
+      include: ["react", "react-dom"],
+      force: true,
+    },
+    // TODO(omar): there is a type mismatch in the monorepo
+    plugins: [react() as any],
+  });
+}

package/src/dev-utils/dev-logger.mts

@@ -0,0 +1,39 @@
+import { createLogger, format, transports } from "winston";
+
+export type DevLogger = {
+  debug: (message: string, ...meta: any[]) => void;
+  info: (message: string, ...meta: any[]) => void;
+  warn: (message: string, ...meta: any[]) => void;
+  error: (message: string, ...meta: any[]) => void;
+};
+
+const winstonLogger = createLogger({
+  level: "info",
+  exitOnError: false,
+  format: format.json(),
+  transports: [
+    new transports.File({ filename: `/tmp/dev-server.log`, level: "info" }),
+    new transports.Console({
+      format: format.combine(
+        format.printf(({ message }) => `${message}`),
+        format.colorize({ message: true }),
+      ),
+      level: "debug",
+    }),
+  ],
+});
+
+export function getLogger(
+  loggerOverride?: (message: string) => void,
+): DevLogger {
+  if (!loggerOverride) {
+    return winstonLogger;
+  }
+
+  return {
+    debug: loggerOverride,
+    info: loggerOverride,
+    warn: loggerOverride,
+    error: loggerOverride,
+  };
+}