@tigrbljs/tigrbl-lens 0.0.3 → 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +68 -6
- package/package.json +4 -2
package/README.md
CHANGED
|
@@ -28,9 +28,30 @@ npm run dev
|
|
|
28
28
|
docker compose up --build
|
|
29
29
|
```
|
|
30
30
|
|
|
31
|
+
### Deploy the demo client container
|
|
32
|
+
```bash
|
|
33
|
+
docker compose up --build -d client
|
|
34
|
+
docker compose ps client
|
|
35
|
+
```
|
|
36
|
+
The demo client deploys as container `tigrbl_lens_client`.
|
|
37
|
+
|
|
38
|
+
### Verify demo container deployment
|
|
39
|
+
Use this quick check to confirm the expected container name and state:
|
|
40
|
+
|
|
41
|
+
```bash
|
|
42
|
+
docker ps --filter "name=tigrbl_lens_client" --format "{{.Names}}\t{{.Status}}"
|
|
43
|
+
```
|
|
44
|
+
|
|
31
45
|
## Implementation guidance
|
|
32
|
-
###
|
|
33
|
-
|
|
46
|
+
### Build outputs
|
|
47
|
+
The client now supports two explicit build targets:
|
|
48
|
+
|
|
49
|
+
- `npm run build:demo` → static demo application output for Docker/nginx.
|
|
50
|
+
- `npm run build:lib` → distributable library artifacts for npm/CDN usage.
|
|
51
|
+
- `npm run build` → runs both targets.
|
|
52
|
+
|
|
53
|
+
### NPM install (TSX/ESM import)
|
|
54
|
+
Install from npm and import in your React app.
|
|
34
55
|
|
|
35
56
|
```bash
|
|
36
57
|
npm install @tigrbljs/tigrbl-lens
|
|
@@ -45,12 +66,14 @@ export default function App() {
|
|
|
45
66
|
}
|
|
46
67
|
```
|
|
47
68
|
|
|
48
|
-
|
|
49
|
-
|
|
69
|
+
This path is ideal for TSX projects where you bundle dependencies during application build.
|
|
70
|
+
|
|
71
|
+
### CDN usage (TSX import)
|
|
72
|
+
Use an npm-backed ESM CDN (for example `esm.sh`) and import directly.
|
|
50
73
|
|
|
51
74
|
```tsx
|
|
52
|
-
import React from 'react';
|
|
53
|
-
import ReactDOM from 'react-dom/client';
|
|
75
|
+
import React from 'https://esm.sh/react@19.2.4';
|
|
76
|
+
import ReactDOM from 'https://esm.sh/react-dom@19.2.4/client';
|
|
54
77
|
import Lens from 'https://esm.sh/@tigrbljs/tigrbl-lens@<version>';
|
|
55
78
|
|
|
56
79
|
ReactDOM.createRoot(document.getElementById('root')!).render(
|
|
@@ -60,6 +83,45 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
|
|
|
60
83
|
);
|
|
61
84
|
```
|
|
62
85
|
|
|
86
|
+
This path is ideal when you still author TSX modules but want to consume the package via CDN-hosted ESM.
|
|
87
|
+
|
|
88
|
+
### CDN usage (HTML + importmap)
|
|
89
|
+
You can also run without a bundler by using `type="module"` and an import map.
|
|
90
|
+
|
|
91
|
+
```html
|
|
92
|
+
<!doctype html>
|
|
93
|
+
<html>
|
|
94
|
+
<head>
|
|
95
|
+
<meta charset="UTF-8" />
|
|
96
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
97
|
+
<title>Tigrbl Lens CDN</title>
|
|
98
|
+
<script type="importmap">
|
|
99
|
+
{
|
|
100
|
+
"imports": {
|
|
101
|
+
"react": "https://esm.sh/react@19.2.4",
|
|
102
|
+
"react-dom/client": "https://esm.sh/react-dom@19.2.4/client",
|
|
103
|
+
"@tigrbljs/tigrbl-lens": "https://esm.sh/@tigrbljs/tigrbl-lens@<version>"
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
</script>
|
|
107
|
+
</head>
|
|
108
|
+
<body>
|
|
109
|
+
<div id="root"></div>
|
|
110
|
+
<script type="module">
|
|
111
|
+
import React from 'react';
|
|
112
|
+
import ReactDOM from 'react-dom/client';
|
|
113
|
+
import Lens from '@tigrbljs/tigrbl-lens';
|
|
114
|
+
|
|
115
|
+
ReactDOM.createRoot(document.getElementById('root')).render(
|
|
116
|
+
React.createElement(Lens, { url: '/openrpc.json' })
|
|
117
|
+
);
|
|
118
|
+
</script>
|
|
119
|
+
</body>
|
|
120
|
+
</html>
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
This path is ideal for plain HTML deployments that rely on native browser modules and import maps.
|
|
124
|
+
|
|
63
125
|
## Maintainer guidance
|
|
64
126
|
### Styles and structure
|
|
65
127
|
- Use TypeScript + React functional components.
|
package/package.json
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tigrbljs/tigrbl-lens",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.5",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"dev": "vite",
|
|
7
|
-
"build": "
|
|
7
|
+
"build": "npm run build:demo && npm run build:lib",
|
|
8
|
+
"build:demo": "vite build",
|
|
9
|
+
"build:lib": "vite build --mode lib",
|
|
8
10
|
"preview": "vite preview"
|
|
9
11
|
},
|
|
10
12
|
"dependencies": {
|