This is an example app
This app is preconfigured to use a local NPM repsository to hold the built version of this app for web-components-example-npm-consumer to consume at build time.
- build and install a verdaccio container. The repository maintainers recommend using the Docker container: https://verdaccio.org/docs/installation#docker-image.
npm publishthe current release to the container.
- delete .npmrc
- delete package-lock.json
npm install
From this point the application should still be usable by web-components-consumer once it has started up, but web-components-example-npm-consumer will need some file linking to work correctly.
npm run dev to start serving both the example web app and the web components
npm run build:wc to rebuild the contents of the public/ folder, both the web components and the bare Javascript React components.
The file next.config.js has a configuration to allow cross-domain script loading from this app from two categories:
- localhost on ports 3000-3009;
- any subdomain of ngrok-free.app. To use this subdomain, create a free account with ngrok and start a tunnel locally with the command line tools.
Edit the value: line of next.config.js to add more domains as needed. It's just a large regex.
All events listened to by this application's Web components will set up listeners on the document, and assume that events will be dispatched by the document or dispatched by a descendant element with bubbles: true. If event listeners are not firing, please ensure that the event is either dispatched at the document level or bubbling from below, and stopPropagation is not happening before reaching the document level.
the <bread-crumbs /> custom element is a tracker of the path elements of a URL. It may be configured to only respond to a certain subset of the path.
These properties may be set at the web component's initial render time in lieu of waiting for the component to render and firing an event to set initial state.
string, optional, defaults to "/". Bread crumbs will only display if the route root is a prefix of the current route (as defined by the initial-route property or the url detail property of a routechange event).
string, required. This represents the full route path or the portion that the bread-crumbs application should be aware of.
JSON string, optional. When parsed, the tokens should form an object with the shape:
{
$title: "a title for the breadcrumb"
aSubRouteName: { $title: "...", aSubSubRouteName: { /* and so on */ } },
anotherSubRouteName: { $title: "..." }
}To direct the bread-crumbs component to update its shown breadcrumbs, emit "routechange"
- url (string) [required] the new route path or fragment of the route path that the bread-crumbs component should be aware of
the <nav-links /> custom element is a set of top-level navigation links that might appear in a header or footer. If the route to be navigated by a link matches the current route, the link is highlighted.
These properties may be set at the web component's initial render time in lieu of waiting for the component to render and firing an event to set initial state.
string, optional, defaults to "/". Nav-links will only consider a matching route "current" and highlight a link if the route root is a prefix of the current route (as defined by the initial-route property or the url detail property of a routechange event).
string, required. This represents the full route path or the portion that the nav-links application should be aware of.
The routerequest event represents the nav links component's intent to update the host application's route.
- href (string) the intended full route path to navigate to
- originalEvent (React Event) the user event that triggered this request, for analytics or accessibility concerns.
The prefetchrequest event represents the nav links component's intent to notify the host application that a route may soon be navigated to, and any resources for the route that can be prefetched should be prefetched.
- href (string) the full route path that may be navigated to ascending or descending.
- originalEvent (React Event) the user event that triggered this request, for analytics or accessibility concerns.
To direct the nav-links component to update its higlighted current route link, emit "routechange"
- url (string) [required] the new route path or fragment of the route path that the nav-links component should be aware of