firepad-x icon indicating copy to clipboard operation
firepad-x copied to clipboard

Headless usage?

Open Blakeinstein opened this issue 4 years ago • 9 comments

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.

Blakeinstein avatar Sep 02 '21 10:09 Blakeinstein

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?

0xTheProDev avatar Sep 05 '21 14:09 0xTheProDev

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 avatar Sep 05 '21 15:09 Blakeinstein

@Blakeinstein Since it was a small effort fix, I took the ownership and fixed it E2E. Let me know if it's working now!.

0xTheProDev avatar Sep 05 '21 17:09 0xTheProDev

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.

Blakeinstein avatar Sep 05 '21 18:09 Blakeinstein

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.

0xTheProDev avatar Sep 06 '21 09:09 0xTheProDev

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)

Blakeinstein avatar Sep 06 '21 09:09 Blakeinstein

May I know the version of Node you are using?

0xTheProDev avatar Sep 07 '21 16:09 0xTheProDev

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

Blakeinstein avatar Sep 07 '21 16:09 Blakeinstein

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.

Blakeinstein avatar Sep 11 '21 19:09 Blakeinstein