Steve/v3-editors

packages/brick-playground/package.json

@@ -26,7 +26,8 @@
     "@next-core/doc-helpers": "^0.2.12",
     "@next-core/serve-helpers": "^1.2.3",
     "compression": "^1.7.4",
-    "express": "^4.19.2"
+    "express": "^4.19.2",
+    "glob": "^8.1.0"
   },
   "devDependencies": {
     "@next-core/build-next-bricks": "^1.22.0",

packages/brick-playground/scripts/start.js

@@ -1,6 +1,8 @@
 import path from "node:path";
+import { existsSync } from "node:fs";
 import WebpackDevServer from "webpack-dev-server";
 import express from "express";
+import glob from "glob";
 import { build } from "@next-core/build-next-bricks";
 import config from "../build.config.js";
 import bootstrapJson from "../serve/bootstrapJson.js";
@@ -9,25 +11,57 @@ import examplesJson from "../serve/examplesJson.js";
 const compiler = await build(config);
 const packageDir = process.cwd();
 const rootDir = path.resolve(packageDir, "../..");
+
+let brickFolders = ["node_modules/@next-bricks", "node_modules/@bricks"];
+const devConfigMjs = path.join(rootDir, "dev.config.mjs");
+let configuredBrickFolders = false;
+
+if (existsSync(devConfigMjs)) {
+  const devConfig = (await import(devConfigMjs)).default;
+  if (devConfig) {
+    if (Array.isArray(devConfig.brickFolders)) {
+      brickFolders = devConfig.brickFolders;
+      configuredBrickFolders = true;
+    }
+  }
+}
+
+const localBrickFolders = (
+  await Promise.all(
+    brickFolders.map(
+      (folder) =>
+        new Promise((resolve, reject) => {
+          glob(path.resolve(rootDir, folder), {}, (err, matches) => {
+            if (err) {
+              reject(err);
+            } else {
+              resolve(matches);
+            }
+          });
+        })
+    )
+  )
+).flat();
+
+if (configuredBrickFolders) {
+  console.log("local brick folders:", localBrickFolders);
+}
+
 const server = new WebpackDevServer(
   {
     open: true,
     port: 8082,
     setupMiddlewares(middlewares) {
-      middlewares.push({
-        path: "/preview/bricks/",
-        middleware: express.static(
-          path.join(rootDir, "node_modules/@next-bricks")
-        ),
-      });
-      middlewares.push({
-        path: "/preview/bricks/",
-        middleware: express.static(path.join(rootDir, "node_modules/@bricks")),
-      });
+      for (const folder of localBrickFolders) {
+        middlewares.push({
+          path: "/preview/bricks/",
+          middleware: express.static(folder),
+        });
+      }
 
       middlewares.push({
         path: "/preview/",
-        middleware: bootstrapJson(rootDir),
+        middleware: bootstrapJson(localBrickFolders),
       });
       middlewares.push(examplesJson(rootDir));
 

packages/brick-playground/serve/bootstrapJson.js

@@ -1,18 +1,13 @@
-import path from "node:path";
 import { getBrickPackages } from "@next-core/serve-helpers";
 
-export default function bootstrapJson(rootDir) {
+export default function bootstrapJson(localBrickFolders) {
   return async function (req, res, next) {
     if (req.path !== "/bootstrap.hash.json") {
       next();
       return;
     }
     res.json({
-      brickPackages: await getBrickPackages(
-        ["@next-bricks", "@bricks"].map((scope) =>
-          path.join(rootDir, "node_modules", scope)
-        )
-      ),
+      brickPackages: await getBrickPackages(localBrickFolders),
       settings: {
         misc: {
           weather_api_key: "9e08e5e99e0c4b4c89023605231804",

packages/brick-playground/serve/index.js

@@ -1,7 +1,9 @@
 import path from "node:path";
 import { fileURLToPath } from "node:url";
+import { existsSync } from "node:fs";
 import express from "express";
 import compression from "compression";
+import glob from "glob";
 import bootstrapJson from "./bootstrapJson.js";
 import examplesJson from "./examplesJson.js";
 
@@ -13,21 +15,50 @@ app.use(compression());
 
 const rootDir = process.cwd();
 
-app.use(
-  "/preview/bricks/",
-  express.static(path.join(rootDir, "node_modules/@next-bricks"))
-);
+let brickFolders = ["node_modules/@next-bricks", "node_modules/@bricks"];
+const devConfigMjs = path.join(rootDir, "dev.config.mjs");
+let configuredBrickFolders = false;
 
-app.use(
-  "/preview/bricks/",
-  express.static(path.join(rootDir, "node_modules/@bricks"))
-);
+if (existsSync(devConfigMjs)) {
+  const devConfig = (await import(devConfigMjs)).default;
+  if (devConfig) {
+    if (Array.isArray(devConfig.brickFolders)) {
+      brickFolders = devConfig.brickFolders;
+      configuredBrickFolders = true;
+    }
+  }
+}
 
-app.use("/preview/", bootstrapJson(rootDir));
+const localBrickFolders = (
+  await Promise.all(
+    brickFolders.map(
+      (folder) =>
+        new Promise((resolve, reject) => {
+          glob(path.resolve(rootDir, folder), {}, (err, matches) => {
+            if (err) {
+              reject(err);
+            } else {
+              resolve(matches);
+            }
+          });
+        })
+    )
+  )
+).flat();
+
+for (const folder of localBrickFolders) {
+  app.use("/preview/bricks/", express.static(folder));
+}
+
+app.use("/preview/", bootstrapJson(localBrickFolders));
 app.use(examplesJson(rootDir));
 
 app.use("/", express.static(path.join(__dirname, "../dist")));
 
 app.listen(8082);
 
+if (configuredBrickFolders) {
+  console.log("local brick folders:", localBrickFolders);
+}
+
 console.log("open http://localhost:8082/");

packages/loader/src/stableLoadBricks.spec.ts

@@ -722,20 +722,28 @@ describe("loadEditorsImperatively", () => {
   });
 
   test("load multiple editors", async () => {
+    const brickPackages = [
+      {
+        id: "bricks/basic",
+        filePath: "bricks/basic/dist/index.hash.js",
+        editors: ["eo-button"],
+      },
+      {
+        id: "bricks/v2-adapter",
+        filePath: "bricks/v2-adapter/dist/index.hash.js",
+      },
+      // v2 packages
+      {
+        editors: ["basic-bricks.general-button--editor"],
+        filePath: "bricks/basic-bricks/dist/index.hash.js",
+        propertyEditorsJsFilePath:
+          "bricks/basic-bricks/dist/property-editors/index.hash.js",
+        propertyEditors: ["basic-bricks.general-button"],
+      } as any,
+    ];
     const promise = loadEditorsImperatively(
-      ["eo-button-editor", "eo-card-editor"],
-      [
-        {
-          id: "bricks/basic",
-          filePath: "bricks/basic/dist/index.hash.js",
-          editors: ["eo-button-editor"],
-        },
-        {
-          id: "bricks/containers",
-          filePath: "bricks/containers/dist/index.hash.js",
-          editors: ["eo-card-editor"],
-        },
-      ]
+      ["eo-button", "basic-bricks.general-button"],
+      brickPackages
     );
     expect(requestsCount).toBe(1);
     await promise;
@@ -750,20 +758,29 @@ describe("loadEditorsImperatively", () => {
     expect(consoleInfo).toHaveBeenNthCalledWith(
       2,
       "loadScript done:",
-      "bricks/containers/dist/index.hash.js",
+      "bricks/v2-adapter/dist/index.hash.js",
       ""
     );
     expect(consoleInfo).toHaveBeenNthCalledWith(
       3,
       "loadSharedModule done:",
       "bricks/basic",
-      "./editors/eo-button-editor"
+      "./editors/eo-button"
     );
     expect(consoleInfo).toHaveBeenNthCalledWith(
       4,
       "loadSharedModule done:",
-      "bricks/containers",
-      "./editors/eo-card-editor"
+      "bricks/v2-adapter",
+      "./load-bricks"
+    );
+    expect(consoleError).toBeCalledTimes(0);
+    expect(loadV2Bricks).toBeCalledTimes(1);
+    expect(loadV2Bricks).toBeCalledWith(
+      "bricks/v2-adapter/dist/index.hash.js",
+      "bricks/basic-bricks/dist/property-editors/index.hash.js",
+      [],
+      undefined,
+      brickPackages
     );
   });
 });

packages/loader/src/stableLoadBricks.ts

@@ -8,6 +8,10 @@ interface BrickPackage {
   editors?: string[];
   dependencies?: Record<string, string[]>;
   deprecatedElements?: string[];
+
+  // Legacy v2 packages
+  propertyEditorsJsFilePath?: string;
+  propertyEditors?: string[];
 }
 
 let resolveBasicPkg: () => void;
@@ -120,7 +124,7 @@ function getItemsByPkg(
     } else if (type === "editors") {
       lastName = item;
       for (const p of brickPackagesMap.values()) {
-        if (p.editors?.some((e) => e === lastName)) {
+        if ((p.propertyEditors ?? p.editors)?.some((e) => e === lastName)) {
           pkg = p;
         }
       }
@@ -288,7 +292,9 @@ async function enqueueStableLoad(
             const pkgNamespace = pkgId.split("/")[1];
             return adapter.resolve(
               v2Adapter.filePath,
-              pkg.filePath,
+              type === "editors"
+                ? pkg.propertyEditorsJsFilePath ?? pkg.filePath
+                : pkg.filePath,
               type === "bricks"
                 ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                   itemsByPkg