Headless usage?
Implementation should ideally been straightforward. As I could simply have made a client adapter that modifies an internal string.
class HeadlessAdapter implements IEditorAdapter {
protected _content: string;
constructor() {
this._content = "";
}
on(): void {
return;
}
off(): void {
return;
}
registerUndo(): void {
return;
}
registerRedo(): void {
return;
}
deregisterUndo(): void {
return;
}
deregisterRedo(): void {
return;
}
getCursor(): ICursor | null {
return null;
}
setCursor(): void {
return;
}
setOtherCursor(): IDisposable {
return {
dispose: () => {
return;
},
};
}
getText(): string {
return this._content;
}
setText(text: string): void {
this._content = text;
}
setInitiated(): void {
return;
}
applyOperation(operation: IPlainTextOperation): void {
if (!operation.isNoop()) {
return;
}
this._content = operation.apply(this._content);
}
invertOperation(operation: IPlainTextOperation): IPlainTextOperation {
return operation.invert(this._content);
}
dispose(): void {
return;
}
}
const headlessAdapter = new HeadlessAdapter();
const firebaseAdapter = new FirebaseAdapter(dbRef, 0, "#000000", "Admin");
const opts = <IFirepadConstructorOptions> {
userId: 0,
userColor: "#000000",
userName: "Admin"
};
const firepad = new Firepad(firebaseAdapter, headlessAdapter, opts);
Unfortunately this errors out with the following
ReferenceError: self is not defined
at Object.call (/workspace/template-typescript-node/node_modules/@hackerrank/firepad/dist/webpack:/node_modules/@operational-transformation/plaintext-editor/lib/index.js:1:515)
at require (/workspace/template-typescript-node/node_modules/@hackerrank/firepad/dist/webpack:/webpack/bootstrap:19:32)
at /workspace/template-typescript-node/node_modules/@hackerrank/firepad/dist/webpack:/lib/firepad-classic.js:3:26
at /workspace/template-typescript-node/node_modules/@hackerrank/firepad/dist/firepad.min.js:1:69312
Looks like its bundled with webpack, and the global object is set to self.
Hey @Blakeinstein, thanks a lot for bringing this to my notice. This most certainly should not be the case, and a fix will be released with next version.
Seems like a config issue with Webpack, but just to be sure, you got this error while running in Node?
Yes. The global this , is not window in case of a node env. The base firepad provides a headless api.
May I know an eta on the next release?
@Blakeinstein Since it was a small effort fix, I took the ownership and fixed it E2E. Let me know if it's working now!.
Nope I still get the very same error.
"dependencies": {
"@hackerrank/firepad": "^0.3.1",
"@operational-transformation/plaintext": "^0.1.1",
"@operational-transformation/plaintext-editor": "^0.1.1",
"dotenv": "8.2.0",
"firebase-admin": "^9.11.1"
},
"devDependencies": {
"@types/node": "14.14.25",
"nodemon": "2.0.7",
"ts-node": "9.1.1",
"typescript": "4.1.3"
}
/workspace/template-typescript-node/node_modules/@hackerrank/firepad/dist/webpack:/external {"root":"firebase.app","commonjs":"firebase/app","commonjs2":"firebase/app","amd":"firebase/app"}:1
module.exports = self[undefined];
^
ReferenceError: self is not defined
at Object.call (/workspace/template-typescript-node/node_modules/@hackerrank/firepad/dist/webpack:/external {"root":"firebase.app","commonjs":"firebase/app","commonjs2":"firebase/app","amd":"firebase/app"}:1:18)
at require (/workspace/template-typescript-node/node_modules/@hackerrank/firepad/dist/webpack:/webpack/bootstrap:19:32)
at Object.call (/workspace/template-typescript-node/node_modules/@hackerrank/firepad/dist/webpack:/lib/firebase-adapter.js:15:13)
at require (/workspace/template-typescript-node/node_modules/@hackerrank/firepad/dist/webpack:/webpack/bootstrap:19:32)
at /workspace/template-typescript-node/node_modules/@hackerrank/firepad/dist/webpack:/lib/firepad-classic.js:4:26
at /workspace/template-typescript-node/node_modules/@hackerrank/firepad/dist/firepad.min.js:1:69274
at Object.<anonymous> (/workspace/template-typescript-node/node_modules/@hackerrank/firepad/dist/firepad.min.js:1:69301)
at Module._compile (internal/modules/cjs/loader.js:1072:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
at Module.load (internal/modules/cjs/loader.js:937:32)
I figured this gitpod snapshot would be good to replicate the issue, https://gitpod.io/#snapshot/7e1892d1-cf16-421f-ac6e-ff9e0b906e29
You might need to add firebase creds there.
That's weird, seems like the error is emitted from Webpack bundle of Firepad, which should not be in use any place other than Browser as CDN. Can you check if you can import as ES Module?
PS: There is no need for using @operational-transformation packages directly.
Can you check if you can import as ES Module?
Not sure if I did it correctly, but with esm I get the following.
import Firepad, { FirebaseAdapter } from "@hackerrank/firepad";
^^^^^^^^^^^^^^^
SyntaxError: Named export 'FirebaseAdapter' not found. The requested module '@hackerrank/firepad' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from '@hackerrank/firepad';
const { FirebaseAdapter } = pkg;
at ModuleJob._instantiate (internal/modules/esm/module_job.js:121:21)
at ModuleJob.run (internal/modules/esm/module_job.js:166:5)
at Loader.import (internal/modules/esm/loader.js:178:24)
at Object.loadESM (internal/process/esm_loader.js:68:5)
May I know the version of Node you are using?
I am on Node 14.17.5
You can repro the issue in this gitpod btw. https://gitpod.io/#snapshot/7e1892d1-cf16-421f-ac6e-ff9e0b906e29
Is there an update on this? The base firepad had a headless api, and it would really benefit my usecase in using firepad on a node env.