Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Headless usage? #43

Open
Blakeinstein opened this issue Sep 2, 2021 · 9 comments
Open

Headless usage? #43

Blakeinstein opened this issue Sep 2, 2021 · 9 comments

Comments

@Blakeinstein
Copy link

Blakeinstein commented Sep 2, 2021

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.

@0xTheProDev
Copy link

0xTheProDev commented Sep 5, 2021

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?

@Blakeinstein
Copy link
Author

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?

@0xTheProDev
Copy link

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

@Blakeinstein
Copy link
Author

Blakeinstein commented Sep 5, 2021

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.

@0xTheProDev
Copy link

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.

@Blakeinstein
Copy link
Author

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)

@0xTheProDev
Copy link

May I know the version of Node you are using?

@0xTheProDev 0xTheProDev reopened this Sep 7, 2021
@Blakeinstein
Copy link
Author

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
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

2 participants