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.

Sign up for GitHub

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 registry polyfill info to getting started #345

Merged
merged 7 commits into from
Jun 1, 2022
Merged

add registry polyfill info to getting started #345

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
56fa1e2
add registry polyfill info to getting started
May 13, 2022
20643d9
Update packages/pharos-site/src/pages/getting-started.mdx
May 16, 2022
ddefe6b
Merge branch 'develop' into docs/registry-polyfill
daneah May 17, 2022
3465732
Merge branch 'develop' into docs/registry-polyfill
May 31, 2022
db52184
chore(deps): add registry polyfill info to getting started
May 31, 2022
fa127ec
Revert "chore(deps): add registry polyfill info to getting started"
May 31, 2022
befbc19
chore(docs): fix linting using jsx
May 31, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion packages/pharos-site/src/pages/getting-started.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,14 @@ Once installed, the `node_modules/` directory should contain directories similar
Pharos uses <PharosLink href="https://developer.mozilla.org/en-US/docs/Web/Web_Components">Web Components</PharosLink> to remain compatible with modern JavaScript frameworks, such as Vue or React.
To accomodate patterns of each framework, the implementations vary slightly.

You need to first register components on the [custom element registry](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry) for them to be usable in your code.
You will first need to provide the scoped custom element registry to your application.
This is generally achieved by including this script tag in the head of your application.

```jsx
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/[email protected]/scoped-custom-element-registry.min.js"></script>
Copy link
Collaborator

Choose a reason for hiding this comment

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

The latest version is 0.0.5. Not sure if that should be the recommendation (perhaps should be tested first).

Copy link
Contributor Author

Choose a reason for hiding this comment

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

what would be a satisfactory way to test this?

Copy link
Collaborator

Choose a reason for hiding this comment

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

Use that version on a page that has at least a couple mfes registering components and ensure there aren't any console/JS errors I'd say.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

updating to version >= 0.0.4 ends up breaking some unit tests
specifically

https://github.com/ithaka/pharos/blob/docs/registry-polyfill/packages/pharos/src/components/dropdown-menu/pharos-dropdown-menu-item.test.ts#L117-L139

```

You then need to register components on the [custom element registry](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry) for them to be usable in your code.
To register components, you can use the `registerComponents` utility to define all the Pharos components your application uses, with a consistent scoping prefix:

```javascript
Expand Down