Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/leolanese/reactjs-interceptor
Web-Component is a web standard and can be used across different frameworks, as long as the target environment has support for web components. Exporting our Preact component as a web component, we can use it in other frameworks or environments that support web components.
https://github.com/leolanese/reactjs-interceptor
interceptor preact react
Last synced: 14 days ago
JSON representation
Web-Component is a web standard and can be used across different frameworks, as long as the target environment has support for web components. Exporting our Preact component as a web component, we can use it in other frameworks or environments that support web components.
- Host: GitHub
- URL: https://github.com/leolanese/reactjs-interceptor
- Owner: leolanese
- Created: 2023-07-19T15:37:03.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-07-20T08:54:54.000Z (over 1 year ago)
- Last Synced: 2025-01-12T04:37:30.675Z (16 days ago)
- Topics: interceptor, preact, react
- Language: TypeScript
- Homepage:
- Size: 27.1 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# PReact interceptor with Web-Component
> Web-Component is a web standard and can be used across different frameworks, as long as the target environment has support for web components. Exporting our Preact component as a `web component`, we can use it in other frameworks or environments that support web components.
```js
npm init preact
cd preact-app
// serve http://localhost:5173/
npm run dev
// produce portable `/dist`
npm run build
```
## Building the web-component using Vite
> `Preact-custom-element` is a library that allows you to turn any Preact component into a custom element. Custom elements are a powerful way to create reusable and encapsulated web components.
> This package allows you to turn your `Preact components into custom HTML elements that can be used in any HTML or JavaScript environment without requiring a Preact app`
```js
// run vite to bundle your Preact app
npm run build
vite v4.4.4 building for production...
✓ 52 modules transformed.
dist/index.html 0.37 kB │ gzip: 0.28 kB
dist/assets/index-b89854d8.js 47.46 kB │ gzip: 18.59 kB
```
## Consuming the Web-Component
```js
npm install -g http-server
// cd dist
http-server
// test index.html that load the web-component
http://localhost:5173/
```
---
## TIPS
```js
// Missing:
Uncaught TypeError: Cannot read properties of null (reading '__k')
at bn (index-18ebafdc.js:1:15413)
at index-18ebafdc.js:3:15918
```