✨ Integrate plugin runtime as npm library (#6852)

frontend/package.json

@@ -103,6 +103,7 @@
     "@penpot/draft-js": "portal:./vendor/draft-js",
     "@penpot/hljs": "portal:./vendor/hljs",
     "@penpot/mousetrap": "portal:./vendor/mousetrap",
+    "@penpot/plugins-runtime": "1.3.2",
     "@penpot/svgo": "penpot/svgo#v3.1",
     "@penpot/text-editor": "portal:./text-editor",
     "@tokens-studio/sd-transforms": "1.2.11",

frontend/resources/templates/index.mustache

@@ -29,8 +29,6 @@
     <script defer src="{{& polyfills}}"></script>
     {{/manifest}}
 
-    <script type="module" src="{{& pluginRuntimeUri}}"></script>
-
     <script>
       window.penpotTranslations = JSON.parse({{& translations}});
       window.penpotVersion = "%version%";

frontend/scripts/_helpers.js

@@ -440,17 +440,11 @@ async function generateTemplates() {
     "../public/images/sprites/assets.svg": assetsSprite,
   };
 
-  const pluginRuntimeUri =
-    process.env.PENPOT_PLUGIN_DEV === "true"
-      ? "http://localhost:4200/index.js?ts=" + manifest.ts
-      : "plugins-runtime/index.js?ts=" + manifest.ts;
-
   content = await renderTemplate(
     "resources/templates/index.mustache",
     {
       manifest: manifest,
       translations: JSON.stringify(translations),
-      pluginRuntimeUri,
       isDebug,
     },
     partials,
@@ -577,10 +571,6 @@ export async function copyAssets() {
 
   await syncDirs("resources/images/", "resources/public/images/");
   await syncDirs("resources/fonts/", "resources/public/fonts/");
-  await syncDirs(
-    "resources/plugins-runtime/",
-    "resources/public/plugins-runtime/",
-  );
 
   const end = process.hrtime(start);
   log.info("done: copy assets", `(${ppt(end)})`);

frontend/scripts/build-libs.js

@@ -32,6 +32,9 @@ const config = {
   entryPoints: ["target/index.js"],
   bundle: true,
   format: "iife",
+  banner: {
+    js: '"use strict";',
+  },
   outfile: "resources/public/js/libs.js",
   plugins: [fixReactVirtualized, rebuildNotify],
 };

frontend/scripts/watch-storybook.js

@@ -80,7 +80,7 @@ h.watch("translations", null, async function (path) {
 
 log.info("watch: assets (~)");
 h.watch(
-  ["resources/images", "resources/fonts", "resources/plugins-runtime"],
+  ["resources/images", "resources/fonts"],
   null,
   async function (path) {
     log.info("changed:", path);

frontend/scripts/watch.js

@@ -79,7 +79,7 @@ h.watch("translations", null, async function (path) {
 
 log.info("watch: assets (~)");
 h.watch(
-  ["resources/images", "resources/fonts", "resources/plugins-runtime"],
+  ["resources/images", "resources/fonts"],
   null,
   async function (path) {
     log.info("changed:", path);

frontend/src/app/plugins.cljs

@@ -7,6 +7,7 @@
 (ns app.plugins
   "RPC for plugins runtime."
   (:require
+   ["@penpot/plugins-runtime" :as runtime]
    [app.main.features :as features]
    [app.main.store :as st]
    [app.plugins.api :as api]
@@ -17,15 +18,12 @@
    [app.plugins.public-utils]
    [app.plugins.ruler-guides :as rg]
    [app.plugins.shape :as shape]
-   [app.util.globals :refer [global]]
-   [app.util.object :as obj]
    [beicon.v2.core :as rx]
    [potok.v2.core :as ptk]))
 
 (defn init-plugins-runtime!
   []
-  (when-let [init-runtime (obj/get global "initPluginsRuntime")]
+  (runtime/initPluginsRuntime (fn [plugin-id] (api/create-context plugin-id))))
-    (init-runtime (fn [plugin-id] (api/create-context plugin-id)))))
 
 (defn initialize
   []

frontend/yarn.lock

@@ -540,6 +540,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@endo/env-options@npm:^1.1.10":
+  version: 1.1.10
+  resolution: "@endo/env-options@npm:1.1.10"
+  checksum: 10c0/80624b9d6e2dc8faf6b58813d0ecddf0bac1d4e94abfa0de4db3a0cd7f2a678a7632ca6837cbd90bffb87223e2c8330eb0996e22a6cbd445c90a31f9e078aaee
+  languageName: node
+  linkType: hard
+
+"@endo/immutable-arraybuffer@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "@endo/immutable-arraybuffer@npm:1.1.1"
+  checksum: 10c0/7670c3dbaa3b6b996eb528ae9736fd3d3582879efdeb3483ae88ed1a04248537da35ecdf2e5937c5528ea79fe1cebfb04e130b735a45b357ad45792cc778c653
+  languageName: node
+  linkType: hard
+
 "@esbuild/aix-ppc64@npm:0.25.5":
   version: 0.25.5
   resolution: "@esbuild/aix-ppc64@npm:0.25.5"
@@ -1353,6 +1367,24 @@ __metadata:
   languageName: node
   linkType: soft
 
+"@penpot/plugin-types@npm:^1.3.2":
+  version: 1.3.2
+  resolution: "@penpot/plugin-types@npm:1.3.2"
+  checksum: 10c0/3f624472c260721ad89bf8d944e75acf6a9c9577271a757acb77574102213914051d1a32d5ab16e6ba16ae077fff78cf7a0f6d11d18351dfc214426677a67468
+  languageName: node
+  linkType: hard
+
+"@penpot/plugins-runtime@npm:1.3.2":
+  version: 1.3.2
+  resolution: "@penpot/plugins-runtime@npm:1.3.2"
+  dependencies:
+    "@penpot/plugin-types": "npm:^1.3.2"
+    ses: "npm:^1.1.0"
+    zod: "npm:^3.22.4"
+  checksum: 10c0/b6d2cb3a57bcbe58232db52b8224d1817495e96b34997bfa72421629b5f34a8c9cc71357c315dcab9d52ea036ed632a5efe0ac50f52e730901c02d498dfa1313
+  languageName: node
+  linkType: hard
+
 "@penpot/svgo@penpot/svgo#v3.1":
   version: 4.0.0
   resolution: "@penpot/svgo@https://github.com/penpot/svgo.git#commit=a46262c12c0d967708395972c374eb2adead4180"
@@ -5464,6 +5496,7 @@ __metadata:
     "@penpot/draft-js": "portal:./vendor/draft-js"
     "@penpot/hljs": "portal:./vendor/hljs"
     "@penpot/mousetrap": "portal:./vendor/mousetrap"
+    "@penpot/plugins-runtime": "npm:1.3.2"
     "@penpot/svgo": "penpot/svgo#v3.1"
     "@penpot/text-editor": "portal:./text-editor"
     "@playwright/test": "npm:1.52.0"
@@ -10146,6 +10179,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ses@npm:^1.1.0":
+  version: 1.13.1
+  resolution: "ses@npm:1.13.1"
+  dependencies:
+    "@endo/env-options": "npm:^1.1.10"
+    "@endo/immutable-arraybuffer": "npm:^1.1.1"
+  checksum: 10c0/bc76ed5fe446ab82f77a1b4341c378126586f1d3c52bb234edc88144edb5263fc7d8a2f3e2d74b13228a418b2a4b9ebe489fba5f2a44882e38278f2f7afa6fbf
+  languageName: node
+  linkType: hard
+
 "set-blocking@npm:^2.0.0":
   version: 2.0.0
   resolution: "set-blocking@npm:2.0.0"
@@ -12325,3 +12368,10 @@ __metadata:
   checksum: 10c0/5762caa3d0b421f4bdb7a1926b2ae2189fc6e4a14469258f183600028eb16db3e9e0306f46e8ebf5a52ff4b81a881f22637afefbef5399d6ad440824e9b27f9f
   languageName: node
   linkType: hard
+
+"zod@npm:^3.22.4":
+  version: 3.25.71
+  resolution: "zod@npm:3.25.71"
+  checksum: 10c0/ccb251859609e6eed04b83f96ad7b2b7a189ca78b47176cde2c368102a5416b9c472e91b3fd96ceaa5043b2e513b3aec39fd99c36686ad2ad84f6c440afca53a
+  languageName: node
+  linkType: hard