@fluid-app/portal-sdk 0.1.55 → 0.1.56

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/vite/index.cjs +69 -0
  2. package/dist/vite/index.cjs.map +1 -1
  3. package/dist/vite/index.d.cts +12 -1
  4. package/dist/vite/index.d.cts.map +1 -1
  5. package/dist/vite/index.d.mts +12 -1
  6. package/dist/vite/index.d.mts.map +1 -1
  7. package/dist/vite/index.mjs +69 -1
  8. package/dist/vite/index.mjs.map +1 -1
  9. package/package.json +12 -11
  10. package/styles/globals.css +1 -0
package/dist/vite/index.cjs CHANGED
@@ -71,6 +71,75 @@ async function loadManifests(server, logger) {
71
71
  return manifests.map(({ component: _component, ...rest }) => rest);
72
72
  }
73
73
  //#endregion
74
+ //#region src/vite/builder-preview-plugin.ts
75
+ const VIRTUAL_ENTRY_ID = "virtual:builder-preview-entry";
76
+ const RESOLVED_VIRTUAL_ID = "\0" + VIRTUAL_ENTRY_ID;
77
+ const RAW_HTML = `<!doctype html>
78
+ <html lang="en" data-theme-mode="dark">
79
+ <head>
80
+ <meta charset="UTF-8" />
81
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
82
+ <title>Custom Widget Preview</title>
83
+ <style>
84
+ body { margin: 0; font-family: system-ui, -apple-system, sans-serif; }
85
+ </style>
86
+ </head>
87
+ <body>
88
+ <div id="builder-preview-root"></div>
89
+ <script type="module" src="/@id/__x00__virtual:builder-preview-entry"><\/script>
90
+ <script type="module">import "/src/index.css";<\/script>
91
+ </body>
92
+ </html>`;
93
+ /**
94
+ * Vite plugin that serves a standalone widget preview page at /builder-preview.
95
+ *
96
+ * Dev mode only. Renders all customWidgets from portal.config.ts with
97
+ * a live preview and property editor — no auth, no iframe, no fluid-admin needed.
98
+ *
99
+ * Uses a virtual module to bridge the user's portal.config.ts into the preview app.
100
+ */
101
+ function fluidBuilderPreviewPlugin() {
102
+ return {
103
+ name: "fluid-builder-preview-plugin",
104
+ apply: "serve",
105
+ resolveId(id) {
106
+ if (id === VIRTUAL_ENTRY_ID) return RESOLVED_VIRTUAL_ID;
107
+ },
108
+ load(id) {
109
+ if (id === RESOLVED_VIRTUAL_ID) return `
110
+ import * as portalConfig from "/src/portal.config.ts";
111
+ import { createRoot } from "react-dom/client";
112
+ import { createElement } from "react";
113
+ import { BuilderPreviewApp } from "@fluid-app/portal-preview";
114
+
115
+ const widgets = portalConfig.customWidgets || [];
116
+ const root = document.getElementById("builder-preview-root");
117
+ if (root) {
118
+ createRoot(root).render(
119
+ createElement(BuilderPreviewApp, { widgets })
120
+ );
121
+ }
122
+ `;
123
+ },
124
+ configureServer(server) {
125
+ server.middlewares.use(async (req, res, next) => {
126
+ const pathname = (req.url ?? "").split("?")[0];
127
+ if (pathname !== "/builder-preview" && pathname !== "/builder-preview/") return next();
128
+ try {
129
+ const transformed = await server.transformIndexHtml("/builder-preview", RAW_HTML);
130
+ res.setHeader("Content-Type", "text/html");
131
+ res.end(transformed);
132
+ } catch (e) {
133
+ server.config.logger.error(`[fluid] Failed to serve builder preview: ${e}`);
134
+ res.statusCode = 500;
135
+ res.end("Builder preview failed to load");
136
+ }
137
+ });
138
+ }
139
+ };
140
+ }
141
+ //#endregion
142
+ exports.fluidBuilderPreviewPlugin = fluidBuilderPreviewPlugin;
74
143
  exports.fluidManifestPlugin = fluidManifestPlugin;
75
144
 
76
145
  //# sourceMappingURL=index.cjs.map
package/dist/vite/index.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","names":[],"sources":["../../src/vite/manifest-plugin.ts"],"sourcesContent":["import type { Plugin, ViteDevServer, Logger } from \"vite\";\nimport { validateManifest } from \"@fluid-app/portal-core/validation\";\n\n/**\n * Vite plugin that serves widget manifest metadata.\n *\n * Dev mode: middleware serves /__manifests__ dynamically via ssrLoadModule.\n * Re-reads portal.config.ts on every request (HMR-aware).\n *\n * Build mode: emits an empty __manifests__.json as a static asset in dist/.\n * The CLI extraction utility (extract-manifests.ts) handles build-time\n * extraction via tsx subprocess for `fluid build` and `fluid deploy`.\n *\n * The builder fetches this endpoint/file to discover custom widgets.\n */\nexport function fluidManifestPlugin(): Plugin {\n return {\n name: \"fluid-manifest-plugin\",\n\n configureServer(server) {\n server.middlewares.use(\"/__manifests__\", async (_req, res) => {\n try {\n const serializable = await loadManifests(\n server,\n server.config.logger,\n );\n\n res.setHeader(\"Content-Type\", \"application/json\");\n res.setHeader(\"Access-Control-Allow-Origin\", \"*\");\n res.end(JSON.stringify(serializable));\n } catch (err) {\n server.config.logger.error(\n `[fluid] Failed to load manifests: ${err}`,\n );\n res.statusCode = 500;\n res.end(JSON.stringify({ error: String(err) }));\n }\n });\n },\n\n generateBundle() {\n // Build mode: emit placeholder. The CLI extraction utility handles\n // actual build-time manifest extraction via tsx subprocess.\n this.warn(\n \"[fluid] fluidManifestPlugin: emitting empty __manifests__.json. \" +\n \"Run `fluid build` instead of `vite build` to include widget manifests.\",\n );\n this.emitFile({\n type: \"asset\",\n fileName: \"__manifests__.json\",\n source: JSON.stringify([]),\n });\n },\n };\n}\n\n/**\n * Load and serialize manifests from portal.config.ts via Vite's ssrLoadModule.\n * Validates each manifest before stripping the `component` field.\n * Returns an empty array if the config module or export is missing/invalid.\n */\nasync function loadManifests(\n server: ViteDevServer,\n logger?: Logger,\n): Promise<unknown[]> {\n let mod: Record<string, unknown>;\n try {\n mod = await server.ssrLoadModule(\"/src/portal.config.ts\");\n } catch (err) {\n logger?.warn(\n `[fluid] Could not load portal.config.ts: ${err instanceof Error ? err.message : err}`,\n );\n return [];\n }\n\n const rawWidgets = mod.customWidgets;\n if (!rawWidgets) return [];\n\n if (!Array.isArray(rawWidgets)) {\n logger?.warn(\n `[fluid] customWidgets export is not an array (got ${typeof rawWidgets}). Skipping manifest serving.`,\n );\n return [];\n }\n\n const manifests = rawWidgets as Record<string, unknown>[];\n\n // Validate full manifests (with component) before stripping\n if (logger) {\n for (const manifest of manifests) {\n const result = validateManifest(manifest);\n if (!result.success) {\n const type = (manifest as { type?: string }).type ?? \"unknown\";\n logger.warn(\n `[fluid] Invalid manifest for \"${type}\":\\n` +\n result.errors.map((e) => ` - ${e.path}: ${e.message}`).join(\"\\n\"),\n );\n }\n }\n }\n\n return manifests.map(\n ({ component: _component, ...rest }: Record<string, unknown>) => rest,\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAeA,SAAgB,sBAA8B;AAC5C,QAAO;EACL,MAAM;EAEN,gBAAgB,QAAQ;AACtB,UAAO,YAAY,IAAI,kBAAkB,OAAO,MAAM,QAAQ;AAC5D,QAAI;KACF,MAAM,eAAe,MAAM,cACzB,QACA,OAAO,OAAO,OACf;AAED,SAAI,UAAU,gBAAgB,mBAAmB;AACjD,SAAI,UAAU,+BAA+B,IAAI;AACjD,SAAI,IAAI,KAAK,UAAU,aAAa,CAAC;aAC9B,KAAK;AACZ,YAAO,OAAO,OAAO,MACnB,qCAAqC,MACtC;AACD,SAAI,aAAa;AACjB,SAAI,IAAI,KAAK,UAAU,EAAE,OAAO,OAAO,IAAI,EAAE,CAAC,CAAC;;KAEjD;;EAGJ,iBAAiB;AAGf,QAAK,KACH,yIAED;AACD,QAAK,SAAS;IACZ,MAAM;IACN,UAAU;IACV,QAAQ,KAAK,UAAU,EAAE,CAAC;IAC3B,CAAC;;EAEL;;;;;;;AAQH,eAAe,cACb,QACA,QACoB;CACpB,IAAI;AACJ,KAAI;AACF,QAAM,MAAM,OAAO,cAAc,wBAAwB;UAClD,KAAK;AACZ,UAAQ,KACN,4CAA4C,eAAe,QAAQ,IAAI,UAAU,MAClF;AACD,SAAO,EAAE;;CAGX,MAAM,aAAa,IAAI;AACvB,KAAI,CAAC,WAAY,QAAO,EAAE;AAE1B,KAAI,CAAC,MAAM,QAAQ,WAAW,EAAE;AAC9B,UAAQ,KACN,qDAAqD,OAAO,WAAW,+BACxE;AACD,SAAO,EAAE;;CAGX,MAAM,YAAY;AAGlB,KAAI,OACF,MAAK,MAAM,YAAY,WAAW;EAChC,MAAM,UAAA,GAAA,kCAAA,kBAA0B,SAAS;AACzC,MAAI,CAAC,OAAO,SAAS;GACnB,MAAM,OAAQ,SAA+B,QAAQ;AACrD,UAAO,KACL,iCAAiC,KAAK,QACpC,OAAO,OAAO,KAAK,MAAM,OAAO,EAAE,KAAK,IAAI,EAAE,UAAU,CAAC,KAAK,KAAK,CACrE;;;AAKP,QAAO,UAAU,KACd,EAAE,WAAW,YAAY,GAAG,WAAoC,KAClE"}
1
+ {"version":3,"file":"index.cjs","names":[],"sources":["../../src/vite/manifest-plugin.ts","../../src/vite/builder-preview-plugin.ts"],"sourcesContent":["import type { Plugin, ViteDevServer, Logger } from \"vite\";\nimport { validateManifest } from \"@fluid-app/portal-core/validation\";\n\n/**\n * Vite plugin that serves widget manifest metadata.\n *\n * Dev mode: middleware serves /__manifests__ dynamically via ssrLoadModule.\n * Re-reads portal.config.ts on every request (HMR-aware).\n *\n * Build mode: emits an empty __manifests__.json as a static asset in dist/.\n * The CLI extraction utility (extract-manifests.ts) handles build-time\n * extraction via tsx subprocess for `fluid build` and `fluid deploy`.\n *\n * The builder fetches this endpoint/file to discover custom widgets.\n */\nexport function fluidManifestPlugin(): Plugin {\n return {\n name: \"fluid-manifest-plugin\",\n\n configureServer(server) {\n server.middlewares.use(\"/__manifests__\", async (_req, res) => {\n try {\n const serializable = await loadManifests(\n server,\n server.config.logger,\n );\n\n res.setHeader(\"Content-Type\", \"application/json\");\n res.setHeader(\"Access-Control-Allow-Origin\", \"*\");\n res.end(JSON.stringify(serializable));\n } catch (err) {\n server.config.logger.error(\n `[fluid] Failed to load manifests: ${err}`,\n );\n res.statusCode = 500;\n res.end(JSON.stringify({ error: String(err) }));\n }\n });\n },\n\n generateBundle() {\n // Build mode: emit placeholder. The CLI extraction utility handles\n // actual build-time manifest extraction via tsx subprocess.\n this.warn(\n \"[fluid] fluidManifestPlugin: emitting empty __manifests__.json. \" +\n \"Run `fluid build` instead of `vite build` to include widget manifests.\",\n );\n this.emitFile({\n type: \"asset\",\n fileName: \"__manifests__.json\",\n source: JSON.stringify([]),\n });\n },\n };\n}\n\n/**\n * Load and serialize manifests from portal.config.ts via Vite's ssrLoadModule.\n * Validates each manifest before stripping the `component` field.\n * Returns an empty array if the config module or export is missing/invalid.\n */\nasync function loadManifests(\n server: ViteDevServer,\n logger?: Logger,\n): Promise<unknown[]> {\n let mod: Record<string, unknown>;\n try {\n mod = await server.ssrLoadModule(\"/src/portal.config.ts\");\n } catch (err) {\n logger?.warn(\n `[fluid] Could not load portal.config.ts: ${err instanceof Error ? err.message : err}`,\n );\n return [];\n }\n\n const rawWidgets = mod.customWidgets;\n if (!rawWidgets) return [];\n\n if (!Array.isArray(rawWidgets)) {\n logger?.warn(\n `[fluid] customWidgets export is not an array (got ${typeof rawWidgets}). Skipping manifest serving.`,\n );\n return [];\n }\n\n const manifests = rawWidgets as Record<string, unknown>[];\n\n // Validate full manifests (with component) before stripping\n if (logger) {\n for (const manifest of manifests) {\n const result = validateManifest(manifest);\n if (!result.success) {\n const type = (manifest as { type?: string }).type ?? \"unknown\";\n logger.warn(\n `[fluid] Invalid manifest for \"${type}\":\\n` +\n result.errors.map((e) => ` - ${e.path}: ${e.message}`).join(\"\\n\"),\n );\n }\n }\n }\n\n return manifests.map(\n ({ component: _component, ...rest }: Record<string, unknown>) => rest,\n );\n}\n","import type { Plugin } from \"vite\";\n\nconst VIRTUAL_ENTRY_ID = \"virtual:builder-preview-entry\";\nconst RESOLVED_VIRTUAL_ID = \"\\0\" + VIRTUAL_ENTRY_ID;\nconst VIRTUAL_MODULE_URL = \"/@id/__x00__virtual:builder-preview-entry\";\n\nconst RAW_HTML = `<!doctype html>\n<html lang=\"en\" data-theme-mode=\"dark\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Custom Widget Preview</title>\n <style>\n body { margin: 0; font-family: system-ui, -apple-system, sans-serif; }\n </style>\n </head>\n <body>\n <div id=\"builder-preview-root\"></div>\n <script type=\"module\" src=\"${VIRTUAL_MODULE_URL}\"></script>\n <script type=\"module\">import \"/src/index.css\";</script>\n </body>\n</html>`;\n\n/**\n * Vite plugin that serves a standalone widget preview page at /builder-preview.\n *\n * Dev mode only. Renders all customWidgets from portal.config.ts with\n * a live preview and property editor — no auth, no iframe, no fluid-admin needed.\n *\n * Uses a virtual module to bridge the user's portal.config.ts into the preview app.\n */\nexport function fluidBuilderPreviewPlugin(): Plugin {\n return {\n name: \"fluid-builder-preview-plugin\",\n apply: \"serve\",\n\n resolveId(id) {\n if (id === VIRTUAL_ENTRY_ID) return RESOLVED_VIRTUAL_ID;\n },\n\n load(id) {\n if (id === RESOLVED_VIRTUAL_ID) {\n return `\nimport * as portalConfig from \"/src/portal.config.ts\";\nimport { createRoot } from \"react-dom/client\";\nimport { createElement } from \"react\";\nimport { BuilderPreviewApp } from \"@fluid-app/portal-preview\";\n\nconst widgets = portalConfig.customWidgets || [];\nconst root = document.getElementById(\"builder-preview-root\");\nif (root) {\n createRoot(root).render(\n createElement(BuilderPreviewApp, { widgets })\n );\n}\n`;\n }\n },\n\n configureServer(server) {\n server.middlewares.use(async (req, res, next) => {\n const pathname = (req.url ?? \"\").split(\"?\")[0];\n if (pathname !== \"/builder-preview\" && pathname !== \"/builder-preview/\")\n return next();\n try {\n const transformed = await server.transformIndexHtml(\n \"/builder-preview\",\n RAW_HTML,\n );\n res.setHeader(\"Content-Type\", \"text/html\");\n res.end(transformed);\n } catch (e) {\n server.config.logger.error(\n `[fluid] Failed to serve builder preview: ${e}`,\n );\n res.statusCode = 500;\n res.end(\"Builder preview failed to load\");\n }\n });\n },\n };\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAeA,SAAgB,sBAA8B;AAC5C,QAAO;EACL,MAAM;EAEN,gBAAgB,QAAQ;AACtB,UAAO,YAAY,IAAI,kBAAkB,OAAO,MAAM,QAAQ;AAC5D,QAAI;KACF,MAAM,eAAe,MAAM,cACzB,QACA,OAAO,OAAO,OACf;AAED,SAAI,UAAU,gBAAgB,mBAAmB;AACjD,SAAI,UAAU,+BAA+B,IAAI;AACjD,SAAI,IAAI,KAAK,UAAU,aAAa,CAAC;aAC9B,KAAK;AACZ,YAAO,OAAO,OAAO,MACnB,qCAAqC,MACtC;AACD,SAAI,aAAa;AACjB,SAAI,IAAI,KAAK,UAAU,EAAE,OAAO,OAAO,IAAI,EAAE,CAAC,CAAC;;KAEjD;;EAGJ,iBAAiB;AAGf,QAAK,KACH,yIAED;AACD,QAAK,SAAS;IACZ,MAAM;IACN,UAAU;IACV,QAAQ,KAAK,UAAU,EAAE,CAAC;IAC3B,CAAC;;EAEL;;;;;;;AAQH,eAAe,cACb,QACA,QACoB;CACpB,IAAI;AACJ,KAAI;AACF,QAAM,MAAM,OAAO,cAAc,wBAAwB;UAClD,KAAK;AACZ,UAAQ,KACN,4CAA4C,eAAe,QAAQ,IAAI,UAAU,MAClF;AACD,SAAO,EAAE;;CAGX,MAAM,aAAa,IAAI;AACvB,KAAI,CAAC,WAAY,QAAO,EAAE;AAE1B,KAAI,CAAC,MAAM,QAAQ,WAAW,EAAE;AAC9B,UAAQ,KACN,qDAAqD,OAAO,WAAW,+BACxE;AACD,SAAO,EAAE;;CAGX,MAAM,YAAY;AAGlB,KAAI,OACF,MAAK,MAAM,YAAY,WAAW;EAChC,MAAM,UAAA,GAAA,kCAAA,kBAA0B,SAAS;AACzC,MAAI,CAAC,OAAO,SAAS;GACnB,MAAM,OAAQ,SAA+B,QAAQ;AACrD,UAAO,KACL,iCAAiC,KAAK,QACpC,OAAO,OAAO,KAAK,MAAM,OAAO,EAAE,KAAK,IAAI,EAAE,UAAU,CAAC,KAAK,KAAK,CACrE;;;AAKP,QAAO,UAAU,KACd,EAAE,WAAW,YAAY,GAAG,WAAoC,KAClE;;;;ACrGH,MAAM,mBAAmB;AACzB,MAAM,sBAAsB,OAAO;AAGnC,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;AAyBjB,SAAgB,4BAAoC;AAClD,QAAO;EACL,MAAM;EACN,OAAO;EAEP,UAAU,IAAI;AACZ,OAAI,OAAO,iBAAkB,QAAO;;EAGtC,KAAK,IAAI;AACP,OAAI,OAAO,oBACT,QAAO;;;;;;;;;;;;;;;EAiBX,gBAAgB,QAAQ;AACtB,UAAO,YAAY,IAAI,OAAO,KAAK,KAAK,SAAS;IAC/C,MAAM,YAAY,IAAI,OAAO,IAAI,MAAM,IAAI,CAAC;AAC5C,QAAI,aAAa,sBAAsB,aAAa,oBAClD,QAAO,MAAM;AACf,QAAI;KACF,MAAM,cAAc,MAAM,OAAO,mBAC/B,oBACA,SACD;AACD,SAAI,UAAU,gBAAgB,YAAY;AAC1C,SAAI,IAAI,YAAY;aACb,GAAG;AACV,YAAO,OAAO,OAAO,MACnB,4CAA4C,IAC7C;AACD,SAAI,aAAa;AACjB,SAAI,IAAI,iCAAiC;;KAE3C;;EAEL"}
package/dist/vite/index.d.cts CHANGED
@@ -15,5 +15,16 @@ import { Plugin } from "vite";
15
15
  */
16
16
  declare function fluidManifestPlugin(): Plugin;
17
17
  //#endregion
18
- export { fluidManifestPlugin };
18
+ //#region src/vite/builder-preview-plugin.d.ts
19
+ /**
20
+ * Vite plugin that serves a standalone widget preview page at /builder-preview.
21
+ *
22
+ * Dev mode only. Renders all customWidgets from portal.config.ts with
23
+ * a live preview and property editor — no auth, no iframe, no fluid-admin needed.
24
+ *
25
+ * Uses a virtual module to bridge the user's portal.config.ts into the preview app.
26
+ */
27
+ declare function fluidBuilderPreviewPlugin(): Plugin;
28
+ //#endregion
29
+ export { fluidBuilderPreviewPlugin, fluidManifestPlugin };
19
30
  //# sourceMappingURL=index.d.cts.map
package/dist/vite/index.d.cts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.cts","names":[],"sources":["../../src/vite/manifest-plugin.ts"],"mappings":";;;;;AAeA;;;;;;;;;;iBAAgB,mBAAA,CAAA,GAAuB,MAAA"}
1
+ {"version":3,"file":"index.d.cts","names":[],"sources":["../../src/vite/manifest-plugin.ts","../../src/vite/builder-preview-plugin.ts"],"mappings":";;;;;AAeA;;;;;;;;ACgBA;;iBDhBgB,mBAAA,CAAA,GAAuB,MAAA;;;;;AAAvC;;;;;;iBCgBgB,yBAAA,CAAA,GAA6B,MAAA"}
package/dist/vite/index.d.mts CHANGED
@@ -15,5 +15,16 @@ import { Plugin } from "vite";
15
15
  */
16
16
  declare function fluidManifestPlugin(): Plugin;
17
17
  //#endregion
18
- export { fluidManifestPlugin };
18
+ //#region src/vite/builder-preview-plugin.d.ts
19
+ /**
20
+ * Vite plugin that serves a standalone widget preview page at /builder-preview.
21
+ *
22
+ * Dev mode only. Renders all customWidgets from portal.config.ts with
23
+ * a live preview and property editor — no auth, no iframe, no fluid-admin needed.
24
+ *
25
+ * Uses a virtual module to bridge the user's portal.config.ts into the preview app.
26
+ */
27
+ declare function fluidBuilderPreviewPlugin(): Plugin;
28
+ //#endregion
29
+ export { fluidBuilderPreviewPlugin, fluidManifestPlugin };
19
30
  //# sourceMappingURL=index.d.mts.map
package/dist/vite/index.d.mts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.mts","names":[],"sources":["../../src/vite/manifest-plugin.ts"],"mappings":";;;;;AAeA;;;;;;;;;;iBAAgB,mBAAA,CAAA,GAAuB,MAAA"}
1
+ {"version":3,"file":"index.d.mts","names":[],"sources":["../../src/vite/manifest-plugin.ts","../../src/vite/builder-preview-plugin.ts"],"mappings":";;;;;AAeA;;;;;;;;ACgBA;;iBDhBgB,mBAAA,CAAA,GAAuB,MAAA;;;;;AAAvC;;;;;;iBCgBgB,yBAAA,CAAA,GAA6B,MAAA"}
package/dist/vite/index.mjs CHANGED
@@ -69,6 +69,74 @@ async function loadManifests(server, logger) {
69
69
  return manifests.map(({ component: _component, ...rest }) => rest);
70
70
  }
71
71
  //#endregion
72
- export { fluidManifestPlugin };
72
+ //#region src/vite/builder-preview-plugin.ts
73
+ const VIRTUAL_ENTRY_ID = "virtual:builder-preview-entry";
74
+ const RESOLVED_VIRTUAL_ID = "\0" + VIRTUAL_ENTRY_ID;
75
+ const RAW_HTML = `<!doctype html>
76
+ <html lang="en" data-theme-mode="dark">
77
+ <head>
78
+ <meta charset="UTF-8" />
79
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
80
+ <title>Custom Widget Preview</title>
81
+ <style>
82
+ body { margin: 0; font-family: system-ui, -apple-system, sans-serif; }
83
+ </style>
84
+ </head>
85
+ <body>
86
+ <div id="builder-preview-root"></div>
87
+ <script type="module" src="/@id/__x00__virtual:builder-preview-entry"><\/script>
88
+ <script type="module">import "/src/index.css";<\/script>
89
+ </body>
90
+ </html>`;
91
+ /**
92
+ * Vite plugin that serves a standalone widget preview page at /builder-preview.
93
+ *
94
+ * Dev mode only. Renders all customWidgets from portal.config.ts with
95
+ * a live preview and property editor — no auth, no iframe, no fluid-admin needed.
96
+ *
97
+ * Uses a virtual module to bridge the user's portal.config.ts into the preview app.
98
+ */
99
+ function fluidBuilderPreviewPlugin() {
100
+ return {
101
+ name: "fluid-builder-preview-plugin",
102
+ apply: "serve",
103
+ resolveId(id) {
104
+ if (id === VIRTUAL_ENTRY_ID) return RESOLVED_VIRTUAL_ID;
105
+ },
106
+ load(id) {
107
+ if (id === RESOLVED_VIRTUAL_ID) return `
108
+ import * as portalConfig from "/src/portal.config.ts";
109
+ import { createRoot } from "react-dom/client";
110
+ import { createElement } from "react";
111
+ import { BuilderPreviewApp } from "@fluid-app/portal-preview";
112
+
113
+ const widgets = portalConfig.customWidgets || [];
114
+ const root = document.getElementById("builder-preview-root");
115
+ if (root) {
116
+ createRoot(root).render(
117
+ createElement(BuilderPreviewApp, { widgets })
118
+ );
119
+ }
120
+ `;
121
+ },
122
+ configureServer(server) {
123
+ server.middlewares.use(async (req, res, next) => {
124
+ const pathname = (req.url ?? "").split("?")[0];
125
+ if (pathname !== "/builder-preview" && pathname !== "/builder-preview/") return next();
126
+ try {
127
+ const transformed = await server.transformIndexHtml("/builder-preview", RAW_HTML);
128
+ res.setHeader("Content-Type", "text/html");
129
+ res.end(transformed);
130
+ } catch (e) {
131
+ server.config.logger.error(`[fluid] Failed to serve builder preview: ${e}`);
132
+ res.statusCode = 500;
133
+ res.end("Builder preview failed to load");
134
+ }
135
+ });
136
+ }
137
+ };
138
+ }
139
+ //#endregion
140
+ export { fluidBuilderPreviewPlugin, fluidManifestPlugin };
73
141
 
74
142
  //# sourceMappingURL=index.mjs.map
package/dist/vite/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","names":[],"sources":["../../src/vite/manifest-plugin.ts"],"sourcesContent":["import type { Plugin, ViteDevServer, Logger } from \"vite\";\nimport { validateManifest } from \"@fluid-app/portal-core/validation\";\n\n/**\n * Vite plugin that serves widget manifest metadata.\n *\n * Dev mode: middleware serves /__manifests__ dynamically via ssrLoadModule.\n * Re-reads portal.config.ts on every request (HMR-aware).\n *\n * Build mode: emits an empty __manifests__.json as a static asset in dist/.\n * The CLI extraction utility (extract-manifests.ts) handles build-time\n * extraction via tsx subprocess for `fluid build` and `fluid deploy`.\n *\n * The builder fetches this endpoint/file to discover custom widgets.\n */\nexport function fluidManifestPlugin(): Plugin {\n return {\n name: \"fluid-manifest-plugin\",\n\n configureServer(server) {\n server.middlewares.use(\"/__manifests__\", async (_req, res) => {\n try {\n const serializable = await loadManifests(\n server,\n server.config.logger,\n );\n\n res.setHeader(\"Content-Type\", \"application/json\");\n res.setHeader(\"Access-Control-Allow-Origin\", \"*\");\n res.end(JSON.stringify(serializable));\n } catch (err) {\n server.config.logger.error(\n `[fluid] Failed to load manifests: ${err}`,\n );\n res.statusCode = 500;\n res.end(JSON.stringify({ error: String(err) }));\n }\n });\n },\n\n generateBundle() {\n // Build mode: emit placeholder. The CLI extraction utility handles\n // actual build-time manifest extraction via tsx subprocess.\n this.warn(\n \"[fluid] fluidManifestPlugin: emitting empty __manifests__.json. \" +\n \"Run `fluid build` instead of `vite build` to include widget manifests.\",\n );\n this.emitFile({\n type: \"asset\",\n fileName: \"__manifests__.json\",\n source: JSON.stringify([]),\n });\n },\n };\n}\n\n/**\n * Load and serialize manifests from portal.config.ts via Vite's ssrLoadModule.\n * Validates each manifest before stripping the `component` field.\n * Returns an empty array if the config module or export is missing/invalid.\n */\nasync function loadManifests(\n server: ViteDevServer,\n logger?: Logger,\n): Promise<unknown[]> {\n let mod: Record<string, unknown>;\n try {\n mod = await server.ssrLoadModule(\"/src/portal.config.ts\");\n } catch (err) {\n logger?.warn(\n `[fluid] Could not load portal.config.ts: ${err instanceof Error ? err.message : err}`,\n );\n return [];\n }\n\n const rawWidgets = mod.customWidgets;\n if (!rawWidgets) return [];\n\n if (!Array.isArray(rawWidgets)) {\n logger?.warn(\n `[fluid] customWidgets export is not an array (got ${typeof rawWidgets}). Skipping manifest serving.`,\n );\n return [];\n }\n\n const manifests = rawWidgets as Record<string, unknown>[];\n\n // Validate full manifests (with component) before stripping\n if (logger) {\n for (const manifest of manifests) {\n const result = validateManifest(manifest);\n if (!result.success) {\n const type = (manifest as { type?: string }).type ?? \"unknown\";\n logger.warn(\n `[fluid] Invalid manifest for \"${type}\":\\n` +\n result.errors.map((e) => ` - ${e.path}: ${e.message}`).join(\"\\n\"),\n );\n }\n }\n }\n\n return manifests.map(\n ({ component: _component, ...rest }: Record<string, unknown>) => rest,\n );\n}\n"],"mappings":";;;;;;;;;;;;;;AAeA,SAAgB,sBAA8B;AAC5C,QAAO;EACL,MAAM;EAEN,gBAAgB,QAAQ;AACtB,UAAO,YAAY,IAAI,kBAAkB,OAAO,MAAM,QAAQ;AAC5D,QAAI;KACF,MAAM,eAAe,MAAM,cACzB,QACA,OAAO,OAAO,OACf;AAED,SAAI,UAAU,gBAAgB,mBAAmB;AACjD,SAAI,UAAU,+BAA+B,IAAI;AACjD,SAAI,IAAI,KAAK,UAAU,aAAa,CAAC;aAC9B,KAAK;AACZ,YAAO,OAAO,OAAO,MACnB,qCAAqC,MACtC;AACD,SAAI,aAAa;AACjB,SAAI,IAAI,KAAK,UAAU,EAAE,OAAO,OAAO,IAAI,EAAE,CAAC,CAAC;;KAEjD;;EAGJ,iBAAiB;AAGf,QAAK,KACH,yIAED;AACD,QAAK,SAAS;IACZ,MAAM;IACN,UAAU;IACV,QAAQ,KAAK,UAAU,EAAE,CAAC;IAC3B,CAAC;;EAEL;;;;;;;AAQH,eAAe,cACb,QACA,QACoB;CACpB,IAAI;AACJ,KAAI;AACF,QAAM,MAAM,OAAO,cAAc,wBAAwB;UAClD,KAAK;AACZ,UAAQ,KACN,4CAA4C,eAAe,QAAQ,IAAI,UAAU,MAClF;AACD,SAAO,EAAE;;CAGX,MAAM,aAAa,IAAI;AACvB,KAAI,CAAC,WAAY,QAAO,EAAE;AAE1B,KAAI,CAAC,MAAM,QAAQ,WAAW,EAAE;AAC9B,UAAQ,KACN,qDAAqD,OAAO,WAAW,+BACxE;AACD,SAAO,EAAE;;CAGX,MAAM,YAAY;AAGlB,KAAI,OACF,MAAK,MAAM,YAAY,WAAW;EAChC,MAAM,SAAS,iBAAiB,SAAS;AACzC,MAAI,CAAC,OAAO,SAAS;GACnB,MAAM,OAAQ,SAA+B,QAAQ;AACrD,UAAO,KACL,iCAAiC,KAAK,QACpC,OAAO,OAAO,KAAK,MAAM,OAAO,EAAE,KAAK,IAAI,EAAE,UAAU,CAAC,KAAK,KAAK,CACrE;;;AAKP,QAAO,UAAU,KACd,EAAE,WAAW,YAAY,GAAG,WAAoC,KAClE"}
1
+ {"version":3,"file":"index.mjs","names":[],"sources":["../../src/vite/manifest-plugin.ts","../../src/vite/builder-preview-plugin.ts"],"sourcesContent":["import type { Plugin, ViteDevServer, Logger } from \"vite\";\nimport { validateManifest } from \"@fluid-app/portal-core/validation\";\n\n/**\n * Vite plugin that serves widget manifest metadata.\n *\n * Dev mode: middleware serves /__manifests__ dynamically via ssrLoadModule.\n * Re-reads portal.config.ts on every request (HMR-aware).\n *\n * Build mode: emits an empty __manifests__.json as a static asset in dist/.\n * The CLI extraction utility (extract-manifests.ts) handles build-time\n * extraction via tsx subprocess for `fluid build` and `fluid deploy`.\n *\n * The builder fetches this endpoint/file to discover custom widgets.\n */\nexport function fluidManifestPlugin(): Plugin {\n return {\n name: \"fluid-manifest-plugin\",\n\n configureServer(server) {\n server.middlewares.use(\"/__manifests__\", async (_req, res) => {\n try {\n const serializable = await loadManifests(\n server,\n server.config.logger,\n );\n\n res.setHeader(\"Content-Type\", \"application/json\");\n res.setHeader(\"Access-Control-Allow-Origin\", \"*\");\n res.end(JSON.stringify(serializable));\n } catch (err) {\n server.config.logger.error(\n `[fluid] Failed to load manifests: ${err}`,\n );\n res.statusCode = 500;\n res.end(JSON.stringify({ error: String(err) }));\n }\n });\n },\n\n generateBundle() {\n // Build mode: emit placeholder. The CLI extraction utility handles\n // actual build-time manifest extraction via tsx subprocess.\n this.warn(\n \"[fluid] fluidManifestPlugin: emitting empty __manifests__.json. \" +\n \"Run `fluid build` instead of `vite build` to include widget manifests.\",\n );\n this.emitFile({\n type: \"asset\",\n fileName: \"__manifests__.json\",\n source: JSON.stringify([]),\n });\n },\n };\n}\n\n/**\n * Load and serialize manifests from portal.config.ts via Vite's ssrLoadModule.\n * Validates each manifest before stripping the `component` field.\n * Returns an empty array if the config module or export is missing/invalid.\n */\nasync function loadManifests(\n server: ViteDevServer,\n logger?: Logger,\n): Promise<unknown[]> {\n let mod: Record<string, unknown>;\n try {\n mod = await server.ssrLoadModule(\"/src/portal.config.ts\");\n } catch (err) {\n logger?.warn(\n `[fluid] Could not load portal.config.ts: ${err instanceof Error ? err.message : err}`,\n );\n return [];\n }\n\n const rawWidgets = mod.customWidgets;\n if (!rawWidgets) return [];\n\n if (!Array.isArray(rawWidgets)) {\n logger?.warn(\n `[fluid] customWidgets export is not an array (got ${typeof rawWidgets}). Skipping manifest serving.`,\n );\n return [];\n }\n\n const manifests = rawWidgets as Record<string, unknown>[];\n\n // Validate full manifests (with component) before stripping\n if (logger) {\n for (const manifest of manifests) {\n const result = validateManifest(manifest);\n if (!result.success) {\n const type = (manifest as { type?: string }).type ?? \"unknown\";\n logger.warn(\n `[fluid] Invalid manifest for \"${type}\":\\n` +\n result.errors.map((e) => ` - ${e.path}: ${e.message}`).join(\"\\n\"),\n );\n }\n }\n }\n\n return manifests.map(\n ({ component: _component, ...rest }: Record<string, unknown>) => rest,\n );\n}\n","import type { Plugin } from \"vite\";\n\nconst VIRTUAL_ENTRY_ID = \"virtual:builder-preview-entry\";\nconst RESOLVED_VIRTUAL_ID = \"\\0\" + VIRTUAL_ENTRY_ID;\nconst VIRTUAL_MODULE_URL = \"/@id/__x00__virtual:builder-preview-entry\";\n\nconst RAW_HTML = `<!doctype html>\n<html lang=\"en\" data-theme-mode=\"dark\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Custom Widget Preview</title>\n <style>\n body { margin: 0; font-family: system-ui, -apple-system, sans-serif; }\n </style>\n </head>\n <body>\n <div id=\"builder-preview-root\"></div>\n <script type=\"module\" src=\"${VIRTUAL_MODULE_URL}\"></script>\n <script type=\"module\">import \"/src/index.css\";</script>\n </body>\n</html>`;\n\n/**\n * Vite plugin that serves a standalone widget preview page at /builder-preview.\n *\n * Dev mode only. Renders all customWidgets from portal.config.ts with\n * a live preview and property editor — no auth, no iframe, no fluid-admin needed.\n *\n * Uses a virtual module to bridge the user's portal.config.ts into the preview app.\n */\nexport function fluidBuilderPreviewPlugin(): Plugin {\n return {\n name: \"fluid-builder-preview-plugin\",\n apply: \"serve\",\n\n resolveId(id) {\n if (id === VIRTUAL_ENTRY_ID) return RESOLVED_VIRTUAL_ID;\n },\n\n load(id) {\n if (id === RESOLVED_VIRTUAL_ID) {\n return `\nimport * as portalConfig from \"/src/portal.config.ts\";\nimport { createRoot } from \"react-dom/client\";\nimport { createElement } from \"react\";\nimport { BuilderPreviewApp } from \"@fluid-app/portal-preview\";\n\nconst widgets = portalConfig.customWidgets || [];\nconst root = document.getElementById(\"builder-preview-root\");\nif (root) {\n createRoot(root).render(\n createElement(BuilderPreviewApp, { widgets })\n );\n}\n`;\n }\n },\n\n configureServer(server) {\n server.middlewares.use(async (req, res, next) => {\n const pathname = (req.url ?? \"\").split(\"?\")[0];\n if (pathname !== \"/builder-preview\" && pathname !== \"/builder-preview/\")\n return next();\n try {\n const transformed = await server.transformIndexHtml(\n \"/builder-preview\",\n RAW_HTML,\n );\n res.setHeader(\"Content-Type\", \"text/html\");\n res.end(transformed);\n } catch (e) {\n server.config.logger.error(\n `[fluid] Failed to serve builder preview: ${e}`,\n );\n res.statusCode = 500;\n res.end(\"Builder preview failed to load\");\n }\n });\n },\n };\n}\n"],"mappings":";;;;;;;;;;;;;;AAeA,SAAgB,sBAA8B;AAC5C,QAAO;EACL,MAAM;EAEN,gBAAgB,QAAQ;AACtB,UAAO,YAAY,IAAI,kBAAkB,OAAO,MAAM,QAAQ;AAC5D,QAAI;KACF,MAAM,eAAe,MAAM,cACzB,QACA,OAAO,OAAO,OACf;AAED,SAAI,UAAU,gBAAgB,mBAAmB;AACjD,SAAI,UAAU,+BAA+B,IAAI;AACjD,SAAI,IAAI,KAAK,UAAU,aAAa,CAAC;aAC9B,KAAK;AACZ,YAAO,OAAO,OAAO,MACnB,qCAAqC,MACtC;AACD,SAAI,aAAa;AACjB,SAAI,IAAI,KAAK,UAAU,EAAE,OAAO,OAAO,IAAI,EAAE,CAAC,CAAC;;KAEjD;;EAGJ,iBAAiB;AAGf,QAAK,KACH,yIAED;AACD,QAAK,SAAS;IACZ,MAAM;IACN,UAAU;IACV,QAAQ,KAAK,UAAU,EAAE,CAAC;IAC3B,CAAC;;EAEL;;;;;;;AAQH,eAAe,cACb,QACA,QACoB;CACpB,IAAI;AACJ,KAAI;AACF,QAAM,MAAM,OAAO,cAAc,wBAAwB;UAClD,KAAK;AACZ,UAAQ,KACN,4CAA4C,eAAe,QAAQ,IAAI,UAAU,MAClF;AACD,SAAO,EAAE;;CAGX,MAAM,aAAa,IAAI;AACvB,KAAI,CAAC,WAAY,QAAO,EAAE;AAE1B,KAAI,CAAC,MAAM,QAAQ,WAAW,EAAE;AAC9B,UAAQ,KACN,qDAAqD,OAAO,WAAW,+BACxE;AACD,SAAO,EAAE;;CAGX,MAAM,YAAY;AAGlB,KAAI,OACF,MAAK,MAAM,YAAY,WAAW;EAChC,MAAM,SAAS,iBAAiB,SAAS;AACzC,MAAI,CAAC,OAAO,SAAS;GACnB,MAAM,OAAQ,SAA+B,QAAQ;AACrD,UAAO,KACL,iCAAiC,KAAK,QACpC,OAAO,OAAO,KAAK,MAAM,OAAO,EAAE,KAAK,IAAI,EAAE,UAAU,CAAC,KAAK,KAAK,CACrE;;;AAKP,QAAO,UAAU,KACd,EAAE,WAAW,YAAY,GAAG,WAAoC,KAClE;;;;ACrGH,MAAM,mBAAmB;AACzB,MAAM,sBAAsB,OAAO;AAGnC,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;AAyBjB,SAAgB,4BAAoC;AAClD,QAAO;EACL,MAAM;EACN,OAAO;EAEP,UAAU,IAAI;AACZ,OAAI,OAAO,iBAAkB,QAAO;;EAGtC,KAAK,IAAI;AACP,OAAI,OAAO,oBACT,QAAO;;;;;;;;;;;;;;;EAiBX,gBAAgB,QAAQ;AACtB,UAAO,YAAY,IAAI,OAAO,KAAK,KAAK,SAAS;IAC/C,MAAM,YAAY,IAAI,OAAO,IAAI,MAAM,IAAI,CAAC;AAC5C,QAAI,aAAa,sBAAsB,aAAa,oBAClD,QAAO,MAAM;AACf,QAAI;KACF,MAAM,cAAc,MAAM,OAAO,mBAC/B,oBACA,SACD;AACD,SAAI,UAAU,gBAAgB,YAAY;AAC1C,SAAI,IAAI,YAAY;aACb,GAAG;AACV,YAAO,OAAO,OAAO,MACnB,4CAA4C,IAC7C;AACD,SAAI,aAAa;AACjB,SAAI,IAAI,iCAAiC;;KAE3C;;EAEL"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluid-app/portal-sdk",
3
- "version": "0.1.55",
3
+ "version": "0.1.56",
4
4
  "description": "SDK for building custom Fluid portals",
5
5
  "files": [
6
6
  "dist",
@@ -63,43 +63,44 @@
63
63
  "typescript": "^5",
64
64
  "zod": "4.3.5",
65
65
  "@fluid-app/api-client-core": "0.1.0",
66
- "@fluid-app/company-switcher-core": "0.1.0",
67
- "@fluid-app/auth": "0.1.0",
68
66
  "@fluid-app/company-switcher-ui": "0.1.0",
67
+ "@fluid-app/company-switcher-core": "0.1.0",
69
68
  "@fluid-app/contacts-ui": "0.1.0",
69
+ "@fluid-app/auth": "0.1.0",
70
70
  "@fluid-app/file-picker-api-client": "0.1.0",
71
71
  "@fluid-app/fluid-pay-api-client": "0.1.0",
72
- "@fluid-app/messaging-core": "0.1.0",
73
- "@fluid-app/messaging-api-client": "0.1.0",
74
72
  "@fluid-app/fluidos-api-client": "0.1.0",
73
+ "@fluid-app/messaging-api-client": "0.1.0",
75
74
  "@fluid-app/messaging-ui": "0.1.0",
75
+ "@fluid-app/messaging-core": "0.1.0",
76
76
  "@fluid-app/mysite-ui": "0.1.0",
77
77
  "@fluid-app/orders-api-client": "0.1.0",
78
78
  "@fluid-app/orders-core": "0.1.0",
79
79
  "@fluid-app/orders-ui": "0.1.0",
80
80
  "@fluid-app/permissions": "0.1.0",
81
- "@fluid-app/portal-app-download-ui": "0.1.0",
81
+ "@fluid-app/portal-preview": "0.1.0",
82
82
  "@fluid-app/portal-core": "0.1.23",
83
83
  "@fluid-app/portal-pro-upgrade-ui": "0.1.0",
84
+ "@fluid-app/portal-app-download-ui": "0.1.0",
84
85
  "@fluid-app/portal-react": "0.1.0",
85
86
  "@fluid-app/portal-widgets": "0.1.22",
86
- "@fluid-app/products-core": "0.1.0",
87
87
  "@fluid-app/products-api-client": "0.1.0",
88
88
  "@fluid-app/profile-core": "0.1.0",
89
+ "@fluid-app/products-core": "0.1.0",
89
90
  "@fluid-app/profile-ui": "0.1.0",
90
- "@fluid-app/shareables-api-client": "0.1.0",
91
91
  "@fluid-app/query-persister": "0.1.0",
92
+ "@fluid-app/shareables-api-client": "0.1.0",
92
93
  "@fluid-app/shareables-core": "0.1.0",
93
94
  "@fluid-app/shareables-ui": "0.1.0",
94
95
  "@fluid-app/shop-ui": "0.1.0",
95
96
  "@fluid-app/subscriptions-api-client": "0.1.0",
96
97
  "@fluid-app/subscriptions-core": "0.1.0",
97
- "@fluid-app/subscriptions-ui": "0.1.0",
98
98
  "@fluid-app/typescript-config": "0.0.0",
99
+ "@fluid-app/subscriptions-ui": "0.1.0",
99
100
  "@fluid-app/ui-primitives": "0.1.13",
100
- "@fluid-app/user-contacts-api-client": "0.1.0",
101
101
  "@fluid-app/user-notes-api-client": "0.1.0",
102
- "@fluid-app/user-tasks-api-client": "0.1.0"
102
+ "@fluid-app/user-tasks-api-client": "0.1.0",
103
+ "@fluid-app/user-contacts-api-client": "0.1.0"
103
104
  },
104
105
  "peerDependencies": {
105
106
  "@hookform/resolvers": "^5.2.2",
package/styles/globals.css CHANGED
@@ -17,6 +17,7 @@
17
17
  @import "@fluid-app/mysite-ui/styles/mysite.css";
18
18
  @import "@fluid-app/ui-primitives/styles/ui-primitives.css";
19
19
  @import "@fluid-app/portal-widgets/globals.css";
20
+ @import "@fluid-app/portal-preview/styles/preview.css";
20
21
  @import "@fluid-app/portal-react/globals.css";
21
22
 
22
23
  /* ── Source ──────────────────────────────────────────────────────────────── */