index.js

const Workflow = require("@saltcorn/data/models/workflow");
const Form = require("@saltcorn/data/models/form");
const File = require("@saltcorn/data/models/file");
const Plugin = require("@saltcorn/data/models/plugin");
const db = require("@saltcorn/data/db");
const { getState, features } = require("@saltcorn/data/db/state");
const { spawn } = require("child_process");
const fs = require("fs").promises;
const path = require("path");

const buildMainBundle = async (buildMode, libPath, libMain, timestamp) => {
  getState().log(6, `spawn ${buildMode} build of main bundle`);
  const tenant = db.getTenantSchema() || "public";
  return new Promise((resolve, reject) => {
    const child = spawn(
      "npm",
      [
        "run",
        buildMode === "development" ? "build_main_dev" : "build_main",
        "--",
        "--env",
        `user_lib_path=${libPath}`,
        "--env",
        `user_lib_main=${libMain}`,
        "--env",
        `tenant_name=${tenant}`,
        "--env",
        `timestamp=${timestamp}`,
      ],
      {
        cwd: __dirname,
      }
    );
    child.stdout.on("data", (data) => {
      getState().log(5, data.toString());
    });
    child.stderr?.on("data", (data) => {
      getState().log(2, data.toString());
    });
    child.on("exit", function (code, signal) {
      getState().log(5, `child process exited with code ${code}`);
      resolve(code);
    });
    child.on("error", (msg) => {
      getState().log(2, `child process failed: ${msg.code}`);
      reject(msg.code);
    });
  });
};

const prepareDirectory = async ({
  codeSource,
  codeLocation,
  buildMode,
  timestamp,
}) => {
  const userLibPath = async (source, location) => {
    switch (source) {
      case "local":
        return location;
      case "Saltcorn folder":
        const folder = await File.findOne(location);
        if (!folder)
          throw new Error(`Folder ${location} not found in Saltcorn folders`);
        return folder.location;
      case "Not set":
        return null;
      default:
        throw new Error("Unknown code source");
    }
  };
  const libPath = await userLibPath(codeSource, codeLocation);
  const userLibMain = async () => {
    const packageJson = JSON.parse(
      await fs.readFile(path.join(libPath, "package.json"), "utf8")
    );
    if (packageJson.main) return packageJson.main;
    else {
      throw new Error(
        "No main field in package.json, please specify the main file"
      );
    }
  };
  // ensure a tenant directory exists
  const tenant = db.getTenantSchema() || "public";
  const tenantDir = path.join(__dirname, "public", tenant);
  const tenantDirExists = await fs
    .access(tenantDir)
    .then(() => true)
    .catch(() => false);
  if (!tenantDirExists) {
    getState().log(5, `Creating tenant directory ${tenantDir}`);
    await fs.mkdir(tenantDir, { recursive: true });
  }

  if (
    (await buildMainBundle(
      buildMode,
      libPath,
      libPath ? await userLibMain() : null,
      timestamp
    )) !== 0
  ) {
    throw new Error("Webpack failed, please check your Server logs");
  }
  // remove all main_bundle files except the one with the current timestamp
  const files = await fs.readdir(tenantDir);
  for (const file of files) {
    if (file.startsWith("main_bundle_") && !file.endsWith(`${timestamp}.js`)) {
      await fs.unlink(path.join(tenantDir, file));
    }
  }
};

const configuration_workflow = () =>
  new Workflow({
    onDone: async (context) => {
      const { app_code_source, app_code_path, sc_folder, build_mode } = context;
      const timestamp = new Date().valueOf();
      await prepareDirectory({
        codeSource: app_code_source,
        codeLocation:
          app_code_source === "local"
            ? app_code_path
            : app_code_source === "Saltcorn folder"
            ? sc_folder
            : null,
        buildMode: build_mode,
        timestamp,
      });
      context.timestamp = timestamp;
      return context;
    },
    steps: [
      {
        name: "React plugin",
        form: async (context) => {
          const directories = await File.find({ isDirectory: true });
          return new Form({
            blurb:
              "This plugin allows using React in Saltcorn views. " +
              "You need a global main bundle with React and your custom React components, " +
              "plus a bundle per view with some view-specific code. " +
              "Here you can create the main bundle, a view bundle comes from the view config dialog. " +
              "The 'Build' button generates the main bundle and stays on the page, " +
              "'Finish' builds and completes the process. For an example, " +
              "take a look at the <a href='https://github.com/saltcorn/react' target='_blank'>README</a>",
            additionalHeaders: [
              {
                headerTag: `<script>
  function runBuild(btn) {
    if (window.savingViewConfig) {
      notifyAlert({
        type: "danger",
        text: "Please wait until the config is saved",
      });
      return false;
    }
    $(btn).data("old-text", "build");
    $.ajax({
      type: "POST",
      headers: {
        "CSRF-Token": _sc_globalCsrf,
      },
      url: "/react/run_build",
      success: function (data) {
        emptyAlerts();
        if (data.notify_success)
          notifyAlert({ type: "success", text: data.notify_success })
        else
          notifyAlert({ type: "success", text: "Build successful" });
        setTimeout(() => {
          restore_old_button("build_button_id");
        }, 50);
      },
      error: function (data) {
        if (data.responseText)
          notifyAlert({ type: "danger", text: data.responseText });
        else
          notifyAlert({ type: "danger", text: "Build failed, please check your Server logs" });
        console.error(data);
        setTimeout(() => {
          restore_old_button("build_button_id");
        }, 50);
      },
    });
    return true;
  }
</script>`,
              },
            ],
            fields: [
              {
                name: "app_code_source",
                label: "Code source",
                sublabel: "Where do you want to get your React code from?",
                type: "String",
                required: true,
                attributes: {
                  options: ["Saltcorn folder", "local", "Not set"],
                },
                help: {
                  topic: "Code source",
                  plugin: "react",
                },
              },
              {
                name: "app_code_path",
                label: "Path to code",
                sublabel: "Please enter a local path to your React code",
                type: "String",
                // required: true (but has problems with app_code_source showIf)
                showIf: { app_code_source: "local" },
              },
              {
                name: "sc_folder",
                label: "Saltcorn folder",
                sublabel:
                  "Please select a Saltcorn folder with your React code",
                type: "String",
                // required: true (but has problems with app_code_source showIf)
                showIf: { app_code_source: "Saltcorn folder" },
                attributes: {
                  options: directories.map((d) => d.path_to_serve),
                },
              },
              {
                name: "build_mode",
                label: "Build mode",
                sublabel: "Bundle your code for production or development",
                type: "String",
                required: true,
                default: "production",
                attributes: {
                  options: ["production", "development"],
                },
              },
            ],
            additionalButtons: [
              {
                id: "build_button_id",
                label: "build",
                onclick: "if (runBuild(this)) press_store_button(this);",
                class: "btn btn-primary",
              },
            ],
          });
        },
      },
    ],
  });

// Only admins may trigger a rebuild of the main bundle. Uses the centralized
// authorize_api hook when the running core supports it (features.authorize_access_hooks),
// falling back to a plain role check on older cores.
const isRunBuildAuthorized = async (req) => {
  if (features?.authorize_access_hooks) {
    return await getState().authorizeApi(req.user, {
      route: "react/run_build",
      action: "post",
      req,
    });
  }
  return !!(req.user && req.user.role_id <= 1);
};

const routes = ({ app_code_source, app_code_path, sc_folder, build_mode }) => {
  return [
    {
      url: "/react/run_build",
      method: "post",
      callback: async (req, res) => {
        if (!(await isRunBuildAuthorized(req))) {
          res.status(401).json({ error: "Not authorized" });
          return;
        }
        getState().log(5, "Building your React code");
        getState().log(
          6,
          `app_code_source: ${app_code_source}, app_code_path: ${app_code_path}, ` +
            `sc_folder: ${sc_folder}, build_mode: ${build_mode}, `
        );
        const timestamp = new Date().valueOf();
        await prepareDirectory({
          codeSource: app_code_source,
          codeLocation:
            app_code_source === "local"
              ? app_code_path
              : app_code_source === "Saltcorn folder"
              ? sc_folder
              : null,
          buildMode: build_mode,
          timestamp,
        });
        let plugin = await Plugin.findOne({ name: "react" });
        if (!plugin) {
          plugin = await Plugin.findOne({
            name: "@saltcorn/react",
          });
        }
        plugin.configuration.timestamp = timestamp;
        await plugin.upsert();
        getState().processSend({
          refresh_plugin_cfg: plugin.name,
          tenant: db.getTenantSchema(),
        });
        res.json({ notify_success: "Build successful" });
      },
    },
  ];
};

module.exports = {
  sc_plugin_api_version: 1,
  plugin_name: "react",
  configuration_workflow,
  routes,
  authorize_api: (cfg) => async (request, user) => {
    if (request.route !== "react/run_build") return null;
    return user && user.role_id <= 1
      ? { decision: "allow" }
      : {
          decision: "deny",
          reason: "Only admins may rebuild the React bundle",
        };
  },
  // Gates the "React" viewtemplate's build_user_code route (react_view.js) -
  // only admins may rebuild a view's per-view bundle. Scoped to that one
  // route so it never weighs in on the view's regular get/post rendering.
  authorize_view: (cfg) => async (request, user) => {
    if (
      request.action !== "post" ||
      request.route !== "build_user_code" ||
      request.view?.viewtemplate !== "React"
    )
      return null;
    return user && user.role_id <= 1
      ? { decision: "allow" }
      : {
          decision: "deny",
          reason: "Only admins may rebuild the React view bundle",
        };
  },
  viewtemplates: (cfg) => [require("./react_view")],
  headers: (cfg) => {
    const tenant = db.getTenantSchema() || "public";
    return [
      {
        headerTag: `<script>var tenant_name = "${tenant}";</script>`,
      },
      {
        script: `/plugins/public/react/${tenant}/main_bundle_${cfg.timestamp}.js`,
      },
    ];
  },
  copilot_skills: (cfg) => [require("./copilot-skill-legacy")(cfg)],
  exchange: (cfg) => ({ agent_skills: [require("./agent-skill")] }),
  onLoad: async (configuration) => {
    if (!require("cluster").isMaster) return;
    try {
      const tenant = db.getTenantSchema() || "public";
      const mainBundlePath = path.join(
        __dirname,
        "public",
        tenant,
        `main_bundle_${configuration.timestamp}.js`
      );
      const mainBundleExists = await fs
        .access(mainBundlePath)
        .then(() => true)
        .catch(() => false);
      if (!mainBundleExists) {
        getState().log(5, "Main bundle does not exist, building it now");
        const { app_code_source, app_code_path, sc_folder, build_mode } =
          configuration;
        const timestamp = new Date().valueOf();
        await prepareDirectory({
          codeSource: app_code_source,
          codeLocation:
            app_code_source === "local"
              ? app_code_path
              : app_code_source === "Saltcorn folder"
              ? sc_folder
              : null,
          buildMode: build_mode,
          timestamp,
        });
        let plugin = await Plugin.findOne({ name: "react" });
        if (!plugin) {
          plugin = await Plugin.findOne({
            name: "@saltcorn/react",
          });
        }
        plugin.configuration.timestamp = timestamp;
        await plugin.upsert();
        getState().processSend({
          refresh_plugin_cfg: plugin.name,
          tenant: db.getTenantSchema(),
        });
      }
    } catch (e) {
      getState().log(2, `Error building main bundle: ${e.message}`);
    }
  },
  ready_for_mobile: true,
};