wasm-onlyoffice-sdk 0.1.5 → 0.1.6

package/README.md

@@ -8,40 +8,66 @@ Offline OnlyOffice document editor SDK for React and Vue, powered by WebAssembly
 
 This SDK requires two sets of static assets:
 
-**OnlyOffice web-apps** — the `v9.3.0.24-1/` directory from the WASM build. Can be served from the same origin or a CDN.
+**OnlyOffice web-apps scaffold** — a small set of HTML files (~2 MB) that must be served from the **same origin** as your app. These HTML files contain `<base href>` tags pointing to a CDN, so the browser loads the actual heavy content (SDK JS, fonts, CSS) from the CDN at runtime. You do not need to self-host the full OnlyOffice SDK.
 
-**x2t WASM converter** — the `x2t-1/` directory containing `x2t.js` and `x2t.wasm`. Must be served from the **same origin** as your app (required for the Web Worker).
+**x2t WASM converter** — `x2t.js` and `x2t.wasm`. Can be served from the same origin or a CDN.
 
-### Same-origin setup
+### Setup
 
-Place assets in your project's `public/` folder:
+Download the web-apps scaffold from the [demo repo](https://github.com/oonxt/wasm-onlyoffice-demo) (`public/` directory) and place it in your project:
 
 ```
 your-project/
   public/
-    v9.3.0.24-1/   ← OnlyOffice web-apps assets
-    x2t-1/         ← x2t WASM converter (x2t.js + x2t.wasm)
+    v9.3.0.24-1/   ← web-apps scaffold (HTML files + api.js, ~2 MB)
+    x2t-1/         ← x2t WASM converter (x2t.js + x2t.wasm), optional if using CDN
 ```
 
-Pass a relative path to `assetsPath`:
-
 ```tsx
 <OnlyOfficeEditor assetsPath="/v9.3.0.24-1" x2tPath="/x2t-1" ... />
 ```
 
-### CDN setup
+The scaffold's HTML files have `<base href>` tags pre-configured to load assets from a public CDN. You can swap those URLs to your own CDN if needed.
+
+### Using a CDN for x2t
 
-`assetsPath` also accepts a full URL. The SDK will automatically handle cross-origin restrictions by keeping the editor frame same-origin while loading web-apps assets from the CDN:
+`x2tPath` accepts either a local path or a full CDN URL:
 
 ```tsx
 <OnlyOfficeEditor
-  assetsPath="https://cdn.example.com/v9.3.0.24-1"
-  x2tPath="/x2t-1"
+  assetsPath="/v9.3.0.24-1"
+  x2tPath="https://cdn.example.com/x2t"
   ...
 />
 ```
 
-> **Note:** `x2tPath` must remain same-origin regardless of where `assetsPath` points.
+The x2t worker script is bundled inside the SDK (always same-origin). `x2tPath` only controls where the worker fetches `x2t.js` and `x2t.wasm`.
+
+Both files are brotli-compressed and must be served with the following headers:
+
+| File | `Content-Type` | `Content-Encoding` |
+|------|---------------|-------------------|
+| `x2t.js` | `application/javascript` | `br` |
+| `x2t.wasm` | `application/wasm` | `br` |
+
+When using a CDN, also add `Access-Control-Allow-Origin: *` on both files.
+
+### Vite setup
+
+```ts
+export default defineConfig({
+  optimizeDeps: {
+    exclude: ['wasm-onlyoffice-sdk'],
+  },
+  server: {
+    fs: {
+      allow: ['../..'],  // only needed when referencing the SDK via a local file: path
+    },
+  },
+})
+```
+
+`optimizeDeps.exclude` is required because the SDK resolves its bundled worker via `new URL(...)`, which Vite's pre-bundler would break.
 
 ## Installation
 

package/dist/react/OnlyOfficeEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OnlyOfficeEditor.d.ts","sourceRoot":"","sources":["../../src/react/OnlyOfficeEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsC,aAAa,EAAE,MAAM,OAAO,CAAA;AAKzE,OAAO,KAAK,EAAa,WAAW,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAEjE,MAAM,WAAW,qBAAqB;IACpC,qEAAqE;IACrE,UAAU,EAAE,MAAM,CAAA;IAClB,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB,mCAAmC;IACnC,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,CAAA;IAE9C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,IAAI,CAAC,EAAE,IAAI,CAAA;IAEX,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,qBAAqB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAClD,uDAAuD;IACvD,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAEhC,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,UAAU,EACV,OAAkB,EAClB,IAAI,EACJ,OAAO,EACP,WAAW,EACX,QAAe,EACf,KAAqB,EACrB,IAAkC,EAClC,OAAO,EACP,qBAAqB,EACrB,MAAM,EACN,OAAO,EACP,KAAK,EACL,SAAS,GACV,EAAE,qBAAqB,2CAqJvB"}
+{"version":3,"file":"OnlyOfficeEditor.d.ts","sourceRoot":"","sources":["../../src/react/OnlyOfficeEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsC,aAAa,EAAE,MAAM,OAAO,CAAA;AAKzE,OAAO,KAAK,EAAa,WAAW,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAEjE,MAAM,WAAW,qBAAqB;IACpC,qEAAqE;IACrE,UAAU,EAAE,MAAM,CAAA;IAClB,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB,mCAAmC;IACnC,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,CAAA;IAE9C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,IAAI,CAAC,EAAE,IAAI,CAAA;IAEX,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,qBAAqB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAClD,uDAAuD;IACvD,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAEhC,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,UAAU,EACV,OAAkB,EAClB,IAAI,EACJ,OAAO,EACP,WAAW,EACX,QAAe,EACf,KAAqB,EACrB,IAAkC,EAClC,OAAO,EACP,qBAAqB,EACrB,MAAM,EACN,OAAO,EACP,KAAK,EACL,SAAS,GACV,EAAE,qBAAqB,2CA2IvB"}

package/dist/react/index.mjs

@@ -1,61 +1,61 @@
-import { jsx as w } from "react/jsx-runtime";
-import { useRef as X, useEffect as j, useLayoutEffect as F } from "react";
-import { EditorServer as M, getDocumentType as N, MockSocket as l, createXHRProxy as $, io as B } from "../index.mjs";
-function J({
-  assetsPath: R,
-  x2tPath: S = "/x2t-1",
-  file: y,
-  fileUrl: v,
-  newDocument: g,
-  language: q = "en",
-  theme: x = "theme-light",
-  user: D = { id: "uid", name: "User" },
-  onReady: p,
-  onDocumentStateChange: u,
-  onSave: z,
-  onError: t,
-  style: A,
-  className: P
+import { jsx as u } from "react/jsx-runtime";
+import { useRef as W, useEffect as X, useLayoutEffect as j } from "react";
+import { EditorServer as F, getDocumentType as M, MockSocket as d, createXHRProxy as O, io as C } from "../index.mjs";
+function _({
+  assetsPath: T,
+  x2tPath: E = "/x2t-1",
+  file: h,
+  fileUrl: m,
+  newDocument: w,
+  language: R = "en",
+  theme: q = "theme-light",
+  user: y = { id: "uid", name: "User" },
+  onReady: l,
+  onDocumentStateChange: a,
+  onSave: N,
+  onError: n,
+  style: x,
+  className: A
 }) {
-  const d = X(!1), r = R.replace(/\/$/, ""), f = /^https?:\/\//.test(r);
-  j(() => {
-    const c = (a) => {
-      d.current && (a.preventDefault(), a.returnValue = "");
+  const r = W(!1), g = T.replace(/\/$/, "");
+  X(() => {
+    const c = (t) => {
+      r.current && (t.preventDefault(), t.returnValue = "");
     };
     return window.addEventListener("beforeunload", c), () => window.removeEventListener("beforeunload", c);
-  }, []), F(() => {
-    const c = r + "/web-apps/apps/api/documents/api.js", a = f ? r + "/web-apps/apps/api/documents/" : location.origin, n = new M({ x2tPath: S, user: D });
-    y ? n.open(y) : v ? n.openUrl(v) : g ? n.openNew(g) : n.openNew("docx");
-    const s = n.getDocument(), H = N(s.fileType);
-    let i = null;
-    const b = ({ socket: e }) => n.handleConnect({ socket: e }), k = ({ socket: e }) => n.handleDisconnect({ socket: e });
-    l.on("connect", b), l.on("disconnect", k);
-    const I = () => {
-      const e = document.querySelector('iframe[name="frameEditor"]'), o = e == null ? void 0 : e.contentWindow, h = e == null ? void 0 : e.contentDocument;
-      if (!h || !o) {
-        t == null || t(new Error("Iframe not loaded"));
+  }, []), j(() => {
+    const c = g + "/web-apps/apps/api/documents/api.js", t = new F({ x2tPath: E, user: y });
+    h ? t.open(h) : m ? t.openUrl(m) : w ? t.openNew(w) : t.openNew("docx");
+    const i = t.getDocument(), U = M(i.fileType);
+    let s = null;
+    const v = ({ socket: e }) => t.handleConnect({ socket: e }), D = ({ socket: e }) => t.handleDisconnect({ socket: e });
+    d.on("connect", v), d.on("disconnect", D);
+    const H = () => {
+      const e = document.querySelector('iframe[name="frameEditor"]'), o = e == null ? void 0 : e.contentWindow, p = e == null ? void 0 : e.contentDocument;
+      if (!p || !o) {
+        n == null || n(new Error("Iframe not loaded"));
         return;
       }
-      const T = $(o.XMLHttpRequest), O = o.Worker;
-      T.use((m) => n.handleRequest(m)), Object.assign(o, {
-        io: B,
-        XMLHttpRequest: T,
-        Worker: function(m, W) {
-          return new O(new URL(m, a).href, W);
+      const L = O(o.XMLHttpRequest), I = o.Worker;
+      L.use((f) => t.handleRequest(f)), Object.assign(o, {
+        io: C,
+        XMLHttpRequest: L,
+        Worker: function(f, P) {
+          return new I(new URL(f, location.origin).href, P);
         }
       });
-      const E = h.createElement("script");
-      E.src = new URL(c, location.origin).href, h.body.appendChild(E), p == null || p();
-    }, L = () => {
-      i = new window.DocsAPI.DocEditor("placeholder", {
+      const b = p.createElement("script");
+      b.src = new URL(c, location.origin).href, p.body.appendChild(b), l == null || l();
+    }, k = () => {
+      s = new window.DocsAPI.DocEditor("placeholder", {
         isLocalFile: !0,
         document: {
-          fileType: s.fileType,
-          key: s.key,
-          title: s.title,
-          url: s.url,
+          fileType: i.fileType,
+          key: i.key,
+          title: i.title,
+          url: i.url,
           permissions: {
-            edit: s.fileType !== "pdf",
+            edit: i.fileType !== "pdf",
             chat: !1,
             rename: !0,
             protect: !0,
@@ -63,27 +63,27 @@ function J({
             print: !1
           }
         },
-        documentType: H,
+        documentType: U,
         editorConfig: {
-          lang: q,
+          lang: R,
           coEditing: { mode: "fast", change: !1 },
-          user: { ...D },
+          user: { ...y },
           customization: {
-            uiTheme: x,
+            uiTheme: q,
             features: { spellcheck: { change: !1 } }
           }
         },
         events: {
-          onAppReady: () => I(),
+          onAppReady: () => H(),
           onDocumentStateChange: (e) => {
-            e.data && (d.current = !0), u == null || u(e.data);
+            e.data && (r.current = !0), a == null || a(e.data);
           },
-          onError: (e) => t == null ? void 0 : t(new Error(String(e))),
+          onError: (e) => n == null ? void 0 : n(new Error(String(e))),
           onSaveDocument: () => {
-            d.current = !1;
+            r.current = !1;
           },
           writeFile: () => {
-            d.current = !1;
+            r.current = !1;
           }
         },
         width: "100%",
@@ -93,26 +93,25 @@ function J({
     return (() => {
       var o;
       if ((o = window.DocsAPI) != null && o.DocEditor) {
-        L();
+        k();
         return;
       }
       let e = document.querySelector(`script[src="${c}"]`);
-      e || (e = document.createElement("script"), e.src = c, document.head.appendChild(e)), e.onload = () => L(), e.onerror = () => t == null ? void 0 : t(new Error("Failed to load DocsAPI script"));
+      e || (e = document.createElement("script"), e.src = c, document.head.appendChild(e)), e.onload = () => k(), e.onerror = () => n == null ? void 0 : n(new Error("Failed to load DocsAPI script"));
     })(), () => {
       var e;
-      l.off("connect", b), l.off("disconnect", k), (e = i == null ? void 0 : i.destroyEditor) == null || e.call(i), n.destroy();
+      d.off("connect", v), d.off("disconnect", D), (e = s == null ? void 0 : s.destroyEditor) == null || e.call(s), t.destroy();
     };
   }, []);
-  const U = f ? void 0 : r + "/web-apps/apps/api/documents/preload.html", C = f ? `<!DOCTYPE html><html><head><base href="${r}/web-apps/apps/api/documents/"></head><body></body></html>` : void 0;
-  return /* @__PURE__ */ w("div", { style: { width: "100%", height: "100%", ...A }, className: P, children: /* @__PURE__ */ w("div", { id: "placeholder", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ w(
+  const S = g + "/web-apps/apps/api/documents/preload.html";
+  return /* @__PURE__ */ u("div", { style: { width: "100%", height: "100%", ...x }, className: A, children: /* @__PURE__ */ u("div", { id: "placeholder", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ u(
     "iframe",
     {
       style: { width: 0, height: 0, display: "none" },
-      src: U,
-      srcDoc: C
+      src: S
     }
   ) }) });
 }
 export {
-  J as OnlyOfficeEditor
+  _ as OnlyOfficeEditor
 };

package/dist/vue/OnlyOfficeEditor.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OnlyOfficeEditor.vue.d.ts","sourceRoot":"","sources":["../../src/vue/OnlyOfficeEditor.vue"],"names":[],"mappings":"AAoLA,OAAO,KAAK,EAAa,WAAW,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAEjE,UAAU,KAAK;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,CAAA;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,IAAI,CAAC,EAAE,IAAI,CAAA;CACZ;;;;;;;;;;;;aAPW,MAAM;UAMT,IAAI;cAFA,MAAM;WACT,WAAW;;AAwMrB,wBAQG"}
+{"version":3,"file":"OnlyOfficeEditor.vue.d.ts","sourceRoot":"","sources":["../../src/vue/OnlyOfficeEditor.vue"],"names":[],"mappings":"AAsKA,OAAO,KAAK,EAAa,WAAW,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAEjE,UAAU,KAAK;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,CAAA;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,IAAI,CAAC,EAAE,IAAI,CAAA;CACZ;;;;;;;;;;;;aAPW,MAAM;UAMT,IAAI;cAFA,MAAM;WACT,WAAW;;AAyLrB,wBAQG"}