https://github.com/bitovi/router-4-web-component
https://github.com/bitovi/router-4-web-component
web-components web-components-library
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/bitovi/router-4-web-component
- Owner: bitovi
- License: mit
- Created: 2023-08-14T19:12:27.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-10-24T18:14:52.000Z (over 2 years ago)
- Last Synced: 2025-10-19T08:50:01.521Z (8 months ago)
- Topics: web-components, web-components-library
- Language: TypeScript
- Homepage: https://www.bitovi.com/services/frontend-development-consulting
- Size: 376 KB
- Stars: 0
- Watchers: 22
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @bitovi/router-4-web-component
A router for web components.
## Usage
See the [package README](./package/README.md).
## Development
Let's change the code in this repo!
### Install
```sh
npm install
```
### Build
Build the source files (output to "dist" directory).
```sh
npm run build
```
### Scripts
- `build` - generate all run-time and publish-time files.
- `build:copy` - copy files to "dist" required for publishing.
- `build:source` - transpile source TypeScript to JavaScript.
- `build:types` - generate ".d.ts" files in "dist" from TypeScript source.
- `clean` - delete everything in "dist."
- `postbuild` - delete temp files that `tsc` creates.
- `start` - start the development server.
### Dev Server
_The server does not reload automatically._
First run the [build](#build) script then run the following command to start the
server.
```sh
npm run start
```
Open a browser and navigate to http://localhost:3000/.
The `local-web-server` is started with the following options:
- `--hostname` host = localhost
- `-p` port = 3000
- `-d` server root directory = ./ _(project root directory)_
- `-n` load resources from disk for every request
- `--spa` file to return for 404 = app/src/index.html
The server includes a custom middleware component to transpile TypeScript files
on the fly. See `server/lws-ts-get.mjs`.
The server reads from the `app` directory. The files in `app` import router
functionality from the `dist` directory.
## Learned
### Classes
- Private field syntax (prefixing a class member with "#"): for example `#data`
or `#getData()`
#### Mixins
- To invoke a base class use `super`; you may have to add magic comments to
ignore TS errors `// ts-ignore`