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

Add browser extension support #504

Merged
merged 31 commits into from
Apr 3, 2023
Merged

Add browser extension support #504

merged 31 commits into from
Apr 3, 2023

Conversation

bgins
Copy link
Member

@bgins bgins commented Mar 27, 2023

Summary

This PR fixes/implements the following features

  • Adds browser extension support
    • Add config.debugging.emitWindowPostMessages flag to gate window post messages intended for the extension
  • Move events to program.on and namespace them with string prefixes
  • Adds session event listeners
  • Rename window.__webnative to window.__odd

Browser extension support

This PR adds support for connecting and sending messages to the Webnative devtools extension. Messages are sent as window post messages when Webnative debug mode is set to true. Messages are tagged with the browser extension ID or as odd-devtools-ready-message to inform the extension that Webnative is ready to connect.

Window post messages can be completely disabled by setting config.debugging.emitWindowPostMessages to false.

Move events onto program

This PR moves events onto the top-level program and renames them. For example:

program.fileSystem.on("local-change", ({ path, root }) => { ... })
program.on("fileSystem:local-change", ({ path, root }) => { ... })

Session events

Two new events have been added:

export type Session<S> = {
  "session:create": { session: S }
  "session:destroy": { username: string }
}

These events are emitted when a session is created or destroyed. The S generic is filled in with a Session in the implementation.

Let the renaming begin

This PR accounts for renaming Webnative to ODD at points of interaction with the extension, but does not rename everything in the code base.

Test plan (required)

Install the extension locally as described in the Webnative devtools extension repo. Use the release-prep branch.

Run an app with Webnative debug mode set to true. Open the devtools and find the Webnative panel. The panel should show Webnative connected if the extension has successfully connected with Webnative.

See the Test Plan in this PR for a rundown of the functionality provided by the extension: oddsdk/odd-devtools#21.

Check that event emitters are properly exposed at program.on.

Closing issues

Closes #460

After Merge

  • Does this change invalidate any docs or tutorials? Yes, the guide will need some updates
  • Does this change require a release to be made? We will hold off on release until we have renamed everything internally to ODD and are ready to publish under the new name to npm

bgins added 24 commits February 22, 2023 16:04
We need to update the configuration used by the extension listeners when
a session is created. Adding the session to the event gets us access to
the session.
Version in the app object is confusing because it seems like it might be
the app version, not the Webnative version.
Moves the event listeners to the top level on the program, for example
`programl.on("fileSystem:publish", ...)`.
Breaks up circular dependencies with Session and Events by moving the
event map to session.ts. Also moved the FileSystem event map out of
Events for consistency.
Add event namespaces as strings to event names, for example
`fileSystem:publish`.
@bgins bgins marked this pull request as ready for review March 28, 2023 17:11
@bgins bgins requested review from icidasset and avivash March 28, 2023 17:11
Copy link
Member

@avivash avivash left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks awesome, this is going to be so useful for devs! 🚀

Copy link
Contributor

@icidasset icidasset left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some concerns and nitpicks, but overall looking great!
Yay for a great dev experience! 🎉 Next step:

src/components/auth/implementation/base.ts Outdated Show resolved Hide resolved
src/configuration.ts Show resolved Hide resolved
src/index.ts Outdated Show resolved Hide resolved
src/index.ts Show resolved Hide resolved
src/extension/index.ts Outdated Show resolved Hide resolved
src/extension/index.ts Outdated Show resolved Hide resolved
src/extension/index.ts Outdated Show resolved Hide resolved
src/extension/index.ts Outdated Show resolved Hide resolved
@bgins bgins merged commit 2784245 into main Apr 3, 2023
@bgins bgins deleted the add-browser-extension-support branch April 3, 2023 15:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add browser extension support
3 participants