@lobb-js/studio 0.6.0 → 0.7.1

package/README.md

@@ -1,47 +1 @@
-# Svelte + TS + Vite
-
-This template should help get you started developing with Svelte and TypeScript in Vite.
-
-## Recommended IDE Setup
-
-[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
-
-## Need an official Svelte framework?
-
-Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
-
-## Technical considerations
-
-**Why use this over SvelteKit?**
-
-- It brings its own routing solution which might not be preferable for some users.
-- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
-
-This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
-
-Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
-
-**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
-
-Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
-
-**Why include `.vscode/extensions.json`?**
-
-Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
-
-**Why enable `allowJs` in the TS template?**
-
-While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
-
-**Why is HMR not preserving my local component state?**
-
-HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
-
-If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
-
-```ts
-// store.ts
-// An extremely simple external store
-import { writable } from 'svelte/store'
-export default writable(0)
-```
+# @lobb-js/studio

package/dist/components/Studio.svelte

@@ -13,6 +13,7 @@
         executeExtensionsOnStartup,
         loadExtensions,
     } from "../extensions/extensionUtils";
+    import extensionMap from 'virtual:lobb-studio-extensions';
     import { mediaQueries } from "../utils";
     import Home from "./routes/home.svelte";
     import DataModel from "./routes/data_model/dataModel.svelte";
@@ -21,11 +22,10 @@
     import Extension from "./routes/extensions/extension.svelte";
 
     interface StudioProps {
-        extensions?: any[];
         lobbUrl?: string;
     }
 
-    const { lobbUrl, extensions }: StudioProps = $props();
+    const { lobbUrl }: StudioProps = $props();
 
     const ctx = $state({
         lobbUrl: lobbUrl ?? "",
@@ -46,7 +46,7 @@
         cleanupRouter = initRouter();
         try {
             ctx.meta = await lobb.getMeta();
-            ctx.extensions = await loadExtensions(lobb, ctx, extensions);
+            ctx.extensions = await loadExtensions(lobb, ctx, extensionMap);
             await executeExtensionsOnStartup(lobb, ctx);
             status = "ready";
         } catch (err) {

package/dist/components/Studio.svelte.d.ts

@@ -1,5 +1,4 @@
 interface StudioProps {
-    extensions?: any[];
     lobbUrl?: string;
 }
 declare const Studio: import("svelte").Component<StudioProps, {}, "">;

package/dist/components/dataTable/utils.js

@@ -62,6 +62,8 @@ export function getField(ctx, fieldName, collectionName) {
     return getFields(ctx, collectionName)[fieldName];
 }
 export function getCollectionPrimaryField(ctx, collectionName) {
+    if (!ctx.meta.collections[collectionName])
+        return undefined;
     var collectionFields = ctx.meta.collections[collectionName].fields;
     var primaryFieldObject = Object.values(collectionFields).find(function (field) { return field.type === "string"; });
     if (primaryFieldObject &&
@@ -87,7 +89,7 @@ export function getCollectionParamsFields(ctx, collectionName, allFields) {
     var columns = [];
     for (var index = 0; index < foreignFields.length; index++) {
         var foreignField = foreignFields[index];
-        if (!foreignField.collection) {
+        if (!foreignField.collection || !ctx.meta.collections[foreignField.collection]) {
             continue;
         }
         columns.push("".concat(foreignField.field, ".id"));

package/dist/extensions/extensionUtils.d.ts

@@ -3,8 +3,7 @@ import type { LobbClient } from "@lobb-js/sdk";
 import type { CTX } from "../store.types";
 export declare function getComponents(): Components;
 export declare function getExtensionUtils(lobb: LobbClient, ctx: CTX): ExtensionUtils;
-export declare function getExtensionsThatHasDash(ctx: CTX): string[];
-export declare function loadExtensions(lobb: LobbClient, ctx: CTX, studioExtensions?: any[]): Promise<Record<string, Extension>>;
+export declare function loadExtensions(lobb: LobbClient, ctx: CTX, extensionMap?: Record<string, any>): Promise<Record<string, Extension>>;
 export declare function loadExtensionComponents(ctx: CTX, name: string, filterByExtensions?: string[]): any[];
 export declare function executeExtensionsOnStartup(lobb: LobbClient, ctx: CTX): Promise<void>;
 export declare function getDashboardNavs(ctx: CTX): DashboardNavs;

package/dist/extensions/extensionUtils.js

@@ -104,61 +104,19 @@ export function getExtensionUtils(lobb, ctx) {
         intlDate: intlDate,
     };
 }
-export function getExtensionsThatHasDash(ctx) {
-    var extensionNames = Object.keys(ctx.meta.extensions);
-    var extensionsWithDashExt = [];
-    for (var index = 0; index < extensionNames.length; index++) {
-        var extensionName = extensionNames[index];
-        var extensionMeta = ctx.meta.extensions[extensionName];
-        if (extensionMeta.hasDashboardExtension) {
-            extensionsWithDashExt.push(extensionName);
-        }
-    }
-    return extensionsWithDashExt;
-}
-export function loadExtensions(lobb, ctx, studioExtensions) {
-    return __awaiter(this, void 0, Promise, function () {
-        var extensions, index, studioExtension, extensionsThatHasDash, index, extensionName, _a, _b, error_1;
-        var _c;
-        return __generator(this, function (_d) {
-            switch (_d.label) {
-                case 0:
-                    extensions = {};
-                    if (studioExtensions) {
-                        for (index = 0; index < studioExtensions.length; index++) {
-                            studioExtension = studioExtensions[index](getExtensionUtils(lobb, ctx));
-                            extensions[studioExtension.name] = studioExtension;
-                        }
-                    }
-                    extensionsThatHasDash = getExtensionsThatHasDash(ctx);
-                    index = 0;
-                    _d.label = 1;
-                case 1:
-                    if (!(index < extensionsThatHasDash.length)) return [3 /*break*/, 6];
-                    extensionName = extensionsThatHasDash[index];
-                    // Try to import locally-installed extension by name first
-                    if (extensionName && extensions[extensionName]) {
-                        return [3 /*break*/, 5];
-                    }
-                    _d.label = 2;
-                case 2:
-                    _d.trys.push([2, 4, , 5]);
-                    _a = extensions;
-                    _b = extensionName;
-                    return [4 /*yield*/, import(
-                        /* @vite-ignore */ "".concat(ctx.lobbUrl, "/api/extensions/").concat(extensionName, "/dashboard?v=").concat((_c = ctx.meta.extensions[extensionName]) === null || _c === void 0 ? void 0 : _c.version))];
-                case 3:
-                    _a[_b] = (_d.sent()).extension(getExtensionUtils(lobb, ctx));
-                    return [3 /*break*/, 5];
-                case 4:
-                    error_1 = _d.sent();
-                    console.warn("Failed to load remote extension ".concat(extensionName), error_1);
-                    return [3 /*break*/, 5];
-                case 5:
-                    index++;
-                    return [3 /*break*/, 1];
-                case 6: return [2 /*return*/, extensions];
+export function loadExtensions(lobb_1, ctx_1) {
+    return __awaiter(this, arguments, Promise, function (lobb, ctx, extensionMap) {
+        var extensions, extensionNames, index, extensionName, studioExtension;
+        if (extensionMap === void 0) { extensionMap = {}; }
+        return __generator(this, function (_a) {
+            extensions = {};
+            extensionNames = Object.keys(extensionMap).filter(function (name) { return ctx.meta.extensions[name] != null; });
+            for (index = 0; index < extensionNames.length; index++) {
+                extensionName = extensionNames[index];
+                studioExtension = extensionMap[extensionName](getExtensionUtils(lobb, ctx));
+                extensions[studioExtension.name] = studioExtension;
             }
+            return [2 /*return*/, extensions];
         });
     });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobb-js/studio",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -14,7 +14,11 @@
       "svelte": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
-    "./vite-plugins": "./vite-plugins/index.js"
+    "./app.css": "./src/app.css",
+    "./vite-plugins": {
+      "types": "./vite-plugins/index.d.ts",
+      "default": "./vite-plugins/index.js"
+    }
   },
   "scripts": {
     "dev": "vite",
@@ -79,7 +83,7 @@
     "@codemirror/theme-one-dark": "^6.1.3",
     "@codemirror/view": "^6.39.12",
     "@dagrejs/dagre": "^1.1.5",
-    "@lobb-js/sdk": "0.1.3",
+    "@lobb-js/sdk": "0.1.4",
     "@lucide/svelte": "^0.563.1",
     "@tailwindcss/vite": "^4.1.18",
     "@wjfe/n-savant": "^0.3.0",

package/vite-plugins/index.d.ts

@@ -0,0 +1,8 @@
+declare module "virtual:lobb-studio-extensions" {
+  const extensions: Record<string, (utils: any) => any>;
+  export default extensions;
+}
+
+// Returns an array of Vite plugins. Typed as any[] to avoid version conflicts
+// between the vite version used by packages/studio and the consumer's vite version.
+export function lobbStudioPlugins(): any[];

package/vite-plugins/index.js

@@ -1,16 +1,11 @@
 import { contextualLibAlias } from "./contextual-lib-alias.js";
+import { lobbWorkspaceOptimize } from "./monorepo-workspace.js";
+import { lobbExtensionsPlugin } from "./lobb-extensions.js";
 
-/**
- * Returns an array of Vite plugins needed for Lobb Studio integration.
- *
- * Includes:
- * - monorepoImportResolver: Resolves @lobb-js/studio to /internal (monorepo) or default (standalone)
- * - contextualLibAlias: Resolves $lib imports contextually
- *
- * @returns {import('vite').Plugin[]}
- */
 export function lobbStudioPlugins() {
   return [
     contextualLibAlias(),
+    lobbWorkspaceOptimize(),
+    lobbExtensionsPlugin(),
   ];
 }

package/vite-plugins/lobb-extensions.js

@@ -0,0 +1,73 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+// Generates a virtual module `virtual:lobb-studio-extensions` that:
+// 1. Reads the consumer project's package.json
+// 2. Finds all @lobb-js/lobb-ext-* deps that have a ./studio subpath export
+// 3. Statically imports them as a name->factory map
+// 4. Also globs local extension studio entry points
+// Result: { "auth": authFactory, "storage": storageFactory, "myext": localFactory }
+export function lobbExtensionsPlugin() {
+  const virtualModuleId = "virtual:lobb-studio-extensions";
+  const resolvedVirtualModuleId = "\0" + virtualModuleId;
+
+  return {
+    name: "lobb-studio-extensions",
+    resolveId(id) {
+      if (id === virtualModuleId) return resolvedVirtualModuleId;
+    },
+    load(id) {
+      if (id !== resolvedVirtualModuleId) return;
+
+      let pkg;
+      try {
+        pkg = JSON.parse(readFileSync(resolve(process.cwd(), "package.json"), "utf-8"));
+      } catch {
+        return `export default {};`;
+      }
+
+      const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+
+      // Find @lobb-js/lobb-ext-* packages that have a ./studio export
+      const extPackages = [];
+      for (const pkgName of Object.keys(deps)) {
+        if (!pkgName.startsWith("@lobb-js/lobb-ext-")) continue;
+        try {
+          const pkgJsonPath = resolve(process.cwd(), "node_modules", pkgName, "package.json");
+          const extPkg = JSON.parse(readFileSync(pkgJsonPath, "utf-8"));
+          if (extPkg.exports?.["./studio"]) {
+            const name = pkgName.replace("@lobb-js/lobb-ext-", "");
+            extPackages.push({ name, pkgName });
+          }
+        } catch {}
+      }
+
+      const imports = extPackages
+        .map(({ name, pkgName }) => `import ext_${name} from "${pkgName}/studio";`)
+        .join("\n");
+
+      const mapEntries = extPackages
+        .map(({ name }) => `  "${name}": ext_${name}`)
+        .join(",\n");
+
+      return `${imports}
+
+const localModules = import.meta.glob('/extensions/*/studio/index.ts', { eager: true });
+const localExtensions = Object.fromEntries(
+  Object.entries(localModules)
+    .map(([path, mod]) => {
+      const name = path.match(/\\/extensions\\/([^\\/]+)\\/studio/)?.[1];
+      return [name, mod.default];
+    })
+    .filter(([name]) => name != null)
+);
+
+const npmExtensions = {
+${mapEntries}
+};
+
+export default { ...npmExtensions, ...localExtensions };
+`;
+    },
+  };
+}

package/vite-plugins/monorepo-workspace.js

@@ -0,0 +1,138 @@
+import { readdirSync, lstatSync, readFileSync, realpathSync } from "node:fs";
+import { join, resolve, dirname } from "node:path";
+
+/**
+ * Auto-detects workspace-linked @lobb-js/* packages and configures Vite so
+ * that monorepo dev and standalone npm-install users both work without manual
+ * configuration:
+ *
+ * - exclude:              Prevents vite-plugin-svelte's optimize-module from
+ *                         running esbuild on raw .svelte source files.
+ * - entries:              Tells Vite to crawl workspace packages at startup so
+ *                         all their deps are discovered and pre-bundled upfront
+ *                         (avoids 504 timeouts on first browser load).
+ * - include:              Re-includes leaf CJS deps of excluded packages so
+ *                         Vite still pre-bundles them for the browser.
+ * - holdUntilCrawlEnd:    Blocks the first response until optimization is done.
+ * - server.fs.allow:      Allows Vite to serve files from the monorepo root
+ *                         (needed to follow symlinks into workspace packages).
+ *
+ * For standalone users (real npm install, no symlinks) all lists are empty and
+ * the config has no effect.
+ *
+ * @returns {import('vite').Plugin}
+ */
+export function lobbWorkspaceOptimize() {
+  return {
+    name: "lobb-workspace-optimize",
+    config(_, { command }) {
+      if (command !== "serve") return;
+
+      const workspacePkgs = getLobbWorkspacePackages();
+      if (workspacePkgs.length === 0) return;
+
+      return {
+        optimizeDeps: {
+          holdUntilCrawlEnd: true,
+          entries: getWorkspaceEntries(workspacePkgs),
+          exclude: workspacePkgs,
+          include: getCjsDepsOf(workspacePkgs),
+        },
+        server: {
+          fs: {
+            allow: [getMonorepoRoot(workspacePkgs)].filter(Boolean),
+          },
+        },
+      };
+    },
+  };
+}
+
+function getLobbWorkspacePackages() {
+  const dir = resolve("node_modules/@lobb-js");
+  try {
+    return readdirSync(dir)
+      .filter((pkg) => lstatSync(join(dir, pkg)).isSymbolicLink())
+      .map((pkg) => `@lobb-js/${pkg}`);
+  } catch {
+    return [];
+  }
+}
+
+function getMonorepoRoot(pkgNames) {
+  for (const name of pkgNames) {
+    try {
+      const realPath = realpathSync(resolve(`node_modules/${name}`));
+      // realPath is e.g. /root/lobb/packages/studio — go up to find the monorepo root
+      let dir = realPath;
+      for (let i = 0; i < 5; i++) {
+        const parent = dirname(dir);
+        if (parent === dir) break;
+        const pkgJson = tryReadJson(join(parent, "package.json"));
+        if (pkgJson?.workspaces) return parent;
+        dir = parent;
+      }
+    } catch { /* skip */ }
+  }
+  return null;
+}
+
+function getWorkspaceEntries(pkgNames) {
+  const entries = [];
+  for (const name of pkgNames) {
+    try {
+      const realPath = realpathSync(resolve(`node_modules/${name}`));
+      const pkg = tryReadJson(join(realPath, "package.json"));
+      if (!pkg) continue;
+      const exportsField = pkg.exports;
+      const entry =
+        pkg.svelte ??
+        pkg.module ??
+        pkg.main ??
+        (typeof exportsField?.["."] === "string"
+          ? exportsField["."]
+          : exportsField?.["."]?.default);
+      if (typeof entry === "string") entries.push(join(realPath, entry));
+    } catch { /* skip */ }
+  }
+  return entries;
+}
+
+function readPkgFrom(name, baseDir) {
+  let dir = baseDir;
+  for (let i = 0; i < 8; i++) {
+    const pkg = tryReadJson(join(dir, "node_modules", name, "package.json"));
+    if (pkg) return pkg;
+    const parent = dirname(dir);
+    if (parent === dir) break;
+    dir = parent;
+  }
+  return null;
+}
+
+function getCjsDepsOf(pkgNames) {
+  const deps = [];
+  for (const name of pkgNames) {
+    try {
+      const realPath = realpathSync(resolve(`node_modules/${name}`));
+      const pkg = tryReadJson(join(realPath, "package.json"));
+      if (!pkg) continue;
+      for (const dep of Object.keys(pkg.dependencies ?? {})) {
+        const depPkg = readPkgFrom(dep, realPath);
+        if (!depPkg) continue;
+        const isCjs = depPkg.type !== "module";
+        const isLeaf = Object.keys(depPkg.dependencies ?? {}).length === 0;
+        if (isCjs && isLeaf) deps.push(dep);
+      }
+    } catch { /* skip */ }
+  }
+  return [...new Set(deps)];
+}
+
+function tryReadJson(filePath) {
+  try {
+    return JSON.parse(readFileSync(filePath, "utf-8"));
+  } catch {
+    return null;
+  }
+}