|
1 | 1 | # javascript-debug-ids |
2 | 2 |
|
3 | | -JavaScript Polyfills and Bundler Plugins for the [TC39 Debug ID proposal](https://github.com/tc39/source-map/blob/main/proposals/debug-id.md). |
| 3 | +JavaScript polyfills, bundler plugins and utils for the [TC39 Debug ID proposal](https://github.com/tc39/source-map/blob/main/proposals/debug-id.md). |
4 | 4 |
|
5 | | -## Polyfills |
6 | | - |
7 | | -### Browser |
8 | | - |
9 | | -```ts |
10 | | -import { getDebugIdForUrl } from "debug-id/browser"; |
11 | 5 |
|
12 | | -const debugId = await getDebugIdForUrl("https://example.com/main.js"); |
13 | | -``` |
14 | | - |
15 | | -### Node.js |
16 | | - |
17 | | -```ts |
18 | | -import { getDebugIdForUrl } from "debug-id/node"; |
| 6 | +## Polyfills |
19 | 7 |
|
20 | | -const debugId = await getDebugIdForUrl("./path/to/main.js"); |
21 | | -``` |
| 8 | +Polyfills for `getDebugIdForUrl` |
22 | 9 |
|
23 | | -### CLI |
| 10 | + - [`@debugids/browser`](./packages/browser/) |
| 11 | + - [`@debugids/node`](./packages/node/) |
24 | 12 |
|
25 | | -The CLI can be used to add Debug IDs to source files and corresponding source-maps. |
| 13 | +## CLI |
26 | 14 |
|
27 | | -``` |
28 | | -> debugids ./dist |
| 15 | +CLI to inject Debug IDs into both source and sourcemap files. |
29 | 16 |
|
30 | | -Adding debug IDs: 22.86ms |
31 | | -21 source files modified |
32 | | -┌─────────┬────────────────────────┬────────────────────────────┬────────────────────────────────────────┐ |
33 | | -│ (index) │ source │ map │ debugId │ |
34 | | -├─────────┼────────────────────────┼────────────────────────────┼────────────────────────────────────────┤ |
35 | | -│ 0 │ 'dist/cjs/browser.js' │ 'dist/cjs/browser.js.map' │ '5d789753-09fa-477c-80f6-6cfe447c9d9c' │ |
36 | | -│ 1 │ 'dist/cjs/cli.js' │ 'dist/cjs/cli.js.map' │ '9e422107-9efe-43e9-b689-2a4ab4b433fd' │ |
37 | | -│ 2 │ 'dist/cjs/common.js' │ 'dist/cjs/common.js.map' │ 'edbf08d3-65e4-4ba4-bc1e-89dad07dee83' │ |
38 | | -│ 3 │ 'dist/cjs/esbuild.js' │ 'dist/cjs/esbuild.js.map' │ 'ba079d7a-bf61-4d37-b0b8-d9a4b6a78b25' │ |
39 | | -│ 4 │ 'dist/cjs/node.js' │ 'dist/cjs/node.js.map' │ '8afaca7e-2109-4c76-9f06-aa4aaf838038' │ |
40 | | -│ 5 │ 'dist/cjs/parcel.js' │ 'dist/cjs/parcel.js.map' │ 'fcf05632-597b-4c44-8399-2de02a2dc8cc' │ |
41 | | -│ 6 │ 'dist/cjs/rolldown.js' │ 'dist/cjs/rolldown.js.map' │ '8186821c-f0ae-4fc2-8f58-d293f543b912' │ |
42 | | -│ 7 │ 'dist/cjs/rollup.js' │ 'dist/cjs/rollup.js.map' │ 'b10c5745-792b-4791-9053-f29f891bcd2a' │ |
43 | | -│ 8 │ 'dist/cjs/rspack.js' │ 'dist/cjs/rspack.js.map' │ 'c86a146b-13c9-42f9-8ce7-022b6a14041e' │ |
44 | | -│ 9 │ 'dist/cjs/vite.js' │ 'dist/cjs/vite.js.map' │ '01a2e113-63e4-4cfe-8e28-ab7b1c9ad4da' │ |
45 | | -│ 10 │ 'dist/cjs/webpack.js' │ 'dist/cjs/webpack.js.map' │ '76e02ae5-b2f5-4b86-a8aa-b10c8fe22cae' │ |
46 | | -│ 11 │ 'dist/esm/browser.js' │ 'dist/esm/browser.js.map' │ '1132afdb-5d3e-4306-a152-d944227e6c0b' │ |
47 | | -│ 12 │ 'dist/esm/common.js' │ 'dist/esm/common.js.map' │ '33975f78-e815-499d-b1c7-30d30a5dadff' │ |
48 | | -│ 13 │ 'dist/esm/esbuild.js' │ 'dist/esm/esbuild.js.map' │ '1ee53fe8-75d8-4d2d-a42c-cdd797b9938c' │ |
49 | | -│ 14 │ 'dist/esm/node.js' │ 'dist/esm/node.js.map' │ '36afeb8e-347d-47d4-9090-86c49677f099' │ |
50 | | -│ 15 │ 'dist/esm/parcel.js' │ 'dist/esm/parcel.js.map' │ '34de941f-bbe1-462b-a12a-d127492ff33b' │ |
51 | | -│ 16 │ 'dist/esm/rolldown.js' │ 'dist/esm/rolldown.js.map' │ 'f907c9c7-e5f6-4e9c-ae16-e1910b5f5f22' │ |
52 | | -│ 17 │ 'dist/esm/rollup.js' │ 'dist/esm/rollup.js.map' │ '2e809256-e2d2-4ab7-a9d1-f8a0ef960196' │ |
53 | | -│ 18 │ 'dist/esm/rspack.js' │ 'dist/esm/rspack.js.map' │ '390da573-a94d-46fc-a005-90680847e7c4' │ |
54 | | -│ 19 │ 'dist/esm/vite.js' │ 'dist/esm/vite.js.map' │ 'b1c9503c-b550-4528-9927-4a51e4968bea' │ |
55 | | -│ 20 │ 'dist/esm/webpack.js' │ 'dist/esm/webpack.js.map' │ '760e8f6b-b7d6-4775-819c-91804cb035cb' │ |
56 | | -└─────────┴────────────────────────┴────────────────────────────┴────────────────────────────────────────┘ |
57 | | -``` |
| 17 | + - [`@debugids/cli`](./packages/cli/) |
58 | 18 |
|
59 | 19 | ## Bundler Plugins |
60 | 20 |
|
61 | | -Bundler plugins to inject Debug IDs into both source and source-maps. |
62 | | - |
63 | | -### Rollup |
64 | | - |
65 | | -`rollup.config.mjs` |
66 | | -```ts |
67 | | -import debugIds from "debug-id/rollup"; |
68 | | - |
69 | | -export default { |
70 | | - input: "./src/main.js", |
71 | | - plugins: [debugIds()], |
72 | | - output: { |
73 | | - dir: "dist", |
74 | | - format: "esm", |
75 | | - sourcemap: true, |
76 | | - }, |
77 | | -}; |
78 | | -``` |
79 | | - |
80 | | -### webpack |
81 | | - |
82 | | -`webpack.config.mjs` |
83 | | -```ts |
84 | | -import { DebugIdWebpackPlugin } from "debug-id/webpack"; |
85 | | - |
86 | | -export default { |
87 | | - entry: "./src/main.js", |
88 | | - plugins: [new DebugIdWebpackPlugin()], |
89 | | - mode: "production", |
90 | | - devtool: "source-map", |
91 | | - output: { |
92 | | - filename: "main.js", |
93 | | - path: "./dist", |
94 | | - }, |
95 | | -}; |
96 | | -``` |
97 | | - |
98 | | -### esbuild |
99 | | - |
100 | | -`build.mjs` |
101 | | -```ts |
102 | | -import * as esbuild from "esbuild"; |
103 | | -import debugIds from "debug-id/esbuild"; |
104 | | - |
105 | | -await esbuild.build({ |
106 | | - entryPoints: ["./src/main.js"], |
107 | | - bundle: true, |
108 | | - format: "esm", |
109 | | - sourcemap: true, |
110 | | - minify: true, |
111 | | - plugins: [debugIds], |
112 | | - outdir: "./dist", |
113 | | -}); |
114 | | -``` |
115 | | - |
116 | | -### vite |
117 | | - |
118 | | -`vite.config.mjs` |
119 | | -```ts |
120 | | -import debugIds from "debug-id/vite"; |
121 | | - |
122 | | -export default { |
123 | | - root: "./src", |
124 | | - mode: "production", |
125 | | - plugins: [debugIds()], |
126 | | - build: { |
127 | | - outDir: "./dist", |
128 | | - sourcemap: true, |
129 | | - }, |
130 | | -}; |
131 | | -``` |
132 | | - |
133 | | -### rspack |
134 | | - |
135 | | -`rspack.config.mjs` |
136 | | -```ts |
137 | | -import { DebugIdRspackPlugin } from "debug-id/rspack"; |
138 | | - |
139 | | -export default { |
140 | | - entry: "./src/main.js", |
141 | | - plugins: [new DebugIdRspackPlugin()], |
142 | | - mode: "production", |
143 | | - devtool: "source-map", |
144 | | - output: { |
145 | | - filename: "main.js", |
146 | | - path: "./dist", |
147 | | - }, |
148 | | -}; |
149 | | -``` |
150 | | - |
151 | | -### Rolldown |
152 | | - |
153 | | -`rolldown.config.mjs` |
154 | | -```ts |
155 | | -import debugIds from "debug-id/rolldown"; |
156 | | - |
157 | | -export default { |
158 | | - input: "./src/main.js", |
159 | | - plugins: [debugIds()], |
160 | | - output: { |
161 | | - dir: "dist", |
162 | | - format: "esm", |
163 | | - sourcemap: true, |
164 | | - }, |
165 | | -}; |
166 | | -``` |
| 21 | +Bundler plugins to inject Debug IDs into both source and sourcemap files. |
167 | 22 |
|
168 | | -### Parcel |
| 23 | + - [`@debugids/rollup`](./packages/rollup/) |
| 24 | + - [`@debugids/webpack`](./packages/webpack/) |
| 25 | + - [`@debugids/esbuild`](./packages/esbuild/) |
| 26 | + - [`@debugids/vite`](./packages/vite/) |
| 27 | + - [`@debugids/rspack`](./packages/rspack/) |
| 28 | + - [`@debugids/rolldown`](./packages/rolldown/) |
| 29 | + - [`@debugids/parcel`](./packages/parcel/) |
169 | 30 |
|
170 | | -`.parcelrc` |
171 | | -```json |
172 | | -{ |
173 | | - "extends": "@parcel/config-default", |
174 | | - "optimizers": { |
175 | | - "*.{js,cjs,mjs}": ["...", "debug-id/parcel"] |
176 | | - } |
177 | | -} |
178 | | -``` |
0 commit comments