tinywidgets 1.0.8 → 1.0.10
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/bun.lockb +0 -0
- package/package.json +5 -4
- package/patches/prismjs@1.29.0.patch +376 -0
- package/src/components/Code/index.tsx +7 -2
package/bun.lockb
CHANGED
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,20 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tinywidgets",
|
|
3
3
|
"description": "A collection of tiny, reusable, React components",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.10",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"prePublishPackage": "eslint . && cspell --quiet . && tsc"
|
|
7
7
|
},
|
|
8
8
|
"author": "jamesgpearce",
|
|
9
9
|
"repository": "github:tinyplex/tinywidgets",
|
|
10
10
|
"type": "module",
|
|
11
|
-
"module": "./src/index.ts",
|
|
12
11
|
"devDependencies": {
|
|
13
12
|
"@types/react": "^18.3.8",
|
|
14
13
|
"@types/react-dom": "^18.3.0",
|
|
15
14
|
"@typescript-eslint/eslint-plugin": "^8.7.0",
|
|
16
15
|
"@typescript-eslint/parser": "^8.7.0",
|
|
17
|
-
"@vanilla-extract/css": "^1.15.5",
|
|
18
16
|
"cspell": "^8.14.4",
|
|
19
17
|
"eslint": "^8.57.0",
|
|
20
18
|
"eslint-config-prettier": "^9.1.0",
|
|
@@ -30,10 +28,13 @@
|
|
|
30
28
|
},
|
|
31
29
|
"license": "MIT",
|
|
32
30
|
"dependencies": {
|
|
33
|
-
"highlight.js": "^11.10.0",
|
|
34
31
|
"lucide-react": "^0.445.0",
|
|
32
|
+
"prismjs": "^1.29.0",
|
|
35
33
|
"react": "^18.3.1",
|
|
36
34
|
"react-dom": "^18.3.1",
|
|
37
35
|
"tinybase": "^5.3.1"
|
|
36
|
+
},
|
|
37
|
+
"patchedDependencies": {
|
|
38
|
+
"prismjs@1.29.0": "patches/prismjs@1.29.0.patch"
|
|
38
39
|
}
|
|
39
40
|
}
|
|
@@ -0,0 +1,376 @@
|
|
|
1
|
+
diff --git a/prism.js b/prism.js
|
|
2
|
+
index 4b9c9a0f8a0356a2dfbf4446bbd4bfe01498ce91..8da899b29173bec65c9176e93612a439103fe04c 100644
|
|
3
|
+
--- a/prism.js
|
|
4
|
+
+++ b/prism.js
|
|
5
|
+
@@ -5,14 +5,6 @@
|
|
6
|
+
|
|
7
|
+
/// <reference lib="WebWorker"/>
|
|
8
|
+
|
|
9
|
+
-var _self = (typeof window !== 'undefined')
|
|
10
|
+
- ? window // if in browser
|
|
11
|
+
- : (
|
|
12
|
+
- (typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope)
|
|
13
|
+
- ? self // if in worker
|
|
14
|
+
- : {} // if in node js
|
|
15
|
+
- );
|
|
16
|
+
-
|
|
17
|
+
/**
|
|
18
|
+
* Prism: Lightweight, robust, elegant syntax highlighting
|
|
19
|
+
*
|
|
20
|
+
@@ -21,7 +13,7 @@ var _self = (typeof window !== 'undefined')
|
|
21
|
+
* @namespace
|
|
22
|
+
* @public
|
|
23
|
+
*/
|
|
24
|
+
-var Prism = (function (_self) {
|
|
25
|
+
+export const Prism = (function () {
|
|
26
|
+
|
|
27
|
+
// Private helper vars
|
|
28
|
+
var lang = /(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i;
|
|
29
|
+
@@ -32,51 +24,6 @@ var Prism = (function (_self) {
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
var _ = {
|
|
33
|
+
- /**
|
|
34
|
+
- * By default, Prism will attempt to highlight all code elements (by calling {@link Prism.highlightAll}) on the
|
|
35
|
+
- * current page after the page finished loading. This might be a problem if e.g. you wanted to asynchronously load
|
|
36
|
+
- * additional languages or plugins yourself.
|
|
37
|
+
- *
|
|
38
|
+
- * By setting this value to `true`, Prism will not automatically highlight all code elements on the page.
|
|
39
|
+
- *
|
|
40
|
+
- * You obviously have to change this value before the automatic highlighting started. To do this, you can add an
|
|
41
|
+
- * empty Prism object into the global scope before loading the Prism script like this:
|
|
42
|
+
- *
|
|
43
|
+
- * ```js
|
|
44
|
+
- * window.Prism = window.Prism || {};
|
|
45
|
+
- * Prism.manual = true;
|
|
46
|
+
- * // add a new <script> to load Prism's script
|
|
47
|
+
- * ```
|
|
48
|
+
- *
|
|
49
|
+
- * @default false
|
|
50
|
+
- * @type {boolean}
|
|
51
|
+
- * @memberof Prism
|
|
52
|
+
- * @public
|
|
53
|
+
- */
|
|
54
|
+
- manual: _self.Prism && _self.Prism.manual,
|
|
55
|
+
- /**
|
|
56
|
+
- * By default, if Prism is in a web worker, it assumes that it is in a worker it created itself, so it uses
|
|
57
|
+
- * `addEventListener` to communicate with its parent instance. However, if you're using Prism manually in your
|
|
58
|
+
- * own worker, you don't want it to do this.
|
|
59
|
+
- *
|
|
60
|
+
- * By setting this value to `true`, Prism will not add its own listeners to the worker.
|
|
61
|
+
- *
|
|
62
|
+
- * You obviously have to change this value before Prism executes. To do this, you can add an
|
|
63
|
+
- * empty Prism object into the global scope before loading the Prism script like this:
|
|
64
|
+
- *
|
|
65
|
+
- * ```js
|
|
66
|
+
- * window.Prism = window.Prism || {};
|
|
67
|
+
- * Prism.disableWorkerMessageHandler = true;
|
|
68
|
+
- * // Load Prism's script
|
|
69
|
+
- * ```
|
|
70
|
+
- *
|
|
71
|
+
- * @default false
|
|
72
|
+
- * @type {boolean}
|
|
73
|
+
- * @memberof Prism
|
|
74
|
+
- * @public
|
|
75
|
+
- */
|
|
76
|
+
- disableWorkerMessageHandler: _self.Prism && _self.Prism.disableWorkerMessageHandler,
|
|
77
|
+
-
|
|
78
|
+
/**
|
|
79
|
+
* A namespace for utility methods.
|
|
80
|
+
*
|
|
81
|
+
@@ -216,48 +163,6 @@ var Prism = (function (_self) {
|
|
82
|
+
element.classList.add('language-' + language);
|
|
83
|
+
},
|
|
84
|
+
|
|
85
|
+
- /**
|
|
86
|
+
- * Returns the script element that is currently executing.
|
|
87
|
+
- *
|
|
88
|
+
- * This does __not__ work for line script element.
|
|
89
|
+
- *
|
|
90
|
+
- * @returns {HTMLScriptElement | null}
|
|
91
|
+
- */
|
|
92
|
+
- currentScript: function () {
|
|
93
|
+
- if (typeof document === 'undefined') {
|
|
94
|
+
- return null;
|
|
95
|
+
- }
|
|
96
|
+
- if ('currentScript' in document && 1 < 2 /* hack to trip TS' flow analysis */) {
|
|
97
|
+
- return /** @type {any} */ (document.currentScript);
|
|
98
|
+
- }
|
|
99
|
+
-
|
|
100
|
+
- // IE11 workaround
|
|
101
|
+
- // we'll get the src of the current script by parsing IE11's error stack trace
|
|
102
|
+
- // this will not work for inline scripts
|
|
103
|
+
-
|
|
104
|
+
- try {
|
|
105
|
+
- throw new Error();
|
|
106
|
+
- } catch (err) {
|
|
107
|
+
- // Get file src url from stack. Specifically works with the format of stack traces in IE.
|
|
108
|
+
- // A stack will look like this:
|
|
109
|
+
- //
|
|
110
|
+
- // Error
|
|
111
|
+
- // at _.util.currentScript (http://localhost/components/prism-core.js:119:5)
|
|
112
|
+
- // at Global code (http://localhost/components/prism-core.js:606:1)
|
|
113
|
+
-
|
|
114
|
+
- var src = (/at [^(\r\n]*\((.*):[^:]+:[^:]+\)$/i.exec(err.stack) || [])[1];
|
|
115
|
+
- if (src) {
|
|
116
|
+
- var scripts = document.getElementsByTagName('script');
|
|
117
|
+
- for (var i in scripts) {
|
|
118
|
+
- if (scripts[i].src == src) {
|
|
119
|
+
- return scripts[i];
|
|
120
|
+
- }
|
|
121
|
+
- }
|
|
122
|
+
- }
|
|
123
|
+
- return null;
|
|
124
|
+
- }
|
|
125
|
+
- },
|
|
126
|
+
-
|
|
127
|
+
/**
|
|
128
|
+
* Returns whether a given class is active for `element`.
|
|
129
|
+
*
|
|
130
|
+
@@ -487,156 +392,6 @@ var Prism = (function (_self) {
|
|
131
|
+
|
|
132
|
+
plugins: {},
|
|
133
|
+
|
|
134
|
+
- /**
|
|
135
|
+
- * This is the most high-level function in Prism’s API.
|
|
136
|
+
- * It fetches all the elements that have a `.language-xxxx` class and then calls {@link Prism.highlightElement} on
|
|
137
|
+
- * each one of them.
|
|
138
|
+
- *
|
|
139
|
+
- * This is equivalent to `Prism.highlightAllUnder(document, async, callback)`.
|
|
140
|
+
- *
|
|
141
|
+
- * @param {boolean} [async=false] Same as in {@link Prism.highlightAllUnder}.
|
|
142
|
+
- * @param {HighlightCallback} [callback] Same as in {@link Prism.highlightAllUnder}.
|
|
143
|
+
- * @memberof Prism
|
|
144
|
+
- * @public
|
|
145
|
+
- */
|
|
146
|
+
- highlightAll: function (async, callback) {
|
|
147
|
+
- _.highlightAllUnder(document, async, callback);
|
|
148
|
+
- },
|
|
149
|
+
-
|
|
150
|
+
- /**
|
|
151
|
+
- * Fetches all the descendants of `container` that have a `.language-xxxx` class and then calls
|
|
152
|
+
- * {@link Prism.highlightElement} on each one of them.
|
|
153
|
+
- *
|
|
154
|
+
- * The following hooks will be run:
|
|
155
|
+
- * 1. `before-highlightall`
|
|
156
|
+
- * 2. `before-all-elements-highlight`
|
|
157
|
+
- * 3. All hooks of {@link Prism.highlightElement} for each element.
|
|
158
|
+
- *
|
|
159
|
+
- * @param {ParentNode} container The root element, whose descendants that have a `.language-xxxx` class will be highlighted.
|
|
160
|
+
- * @param {boolean} [async=false] Whether each element is to be highlighted asynchronously using Web Workers.
|
|
161
|
+
- * @param {HighlightCallback} [callback] An optional callback to be invoked on each element after its highlighting is done.
|
|
162
|
+
- * @memberof Prism
|
|
163
|
+
- * @public
|
|
164
|
+
- */
|
|
165
|
+
- highlightAllUnder: function (container, async, callback) {
|
|
166
|
+
- var env = {
|
|
167
|
+
- callback: callback,
|
|
168
|
+
- container: container,
|
|
169
|
+
- selector: 'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'
|
|
170
|
+
- };
|
|
171
|
+
-
|
|
172
|
+
- _.hooks.run('before-highlightall', env);
|
|
173
|
+
-
|
|
174
|
+
- env.elements = Array.prototype.slice.apply(env.container.querySelectorAll(env.selector));
|
|
175
|
+
-
|
|
176
|
+
- _.hooks.run('before-all-elements-highlight', env);
|
|
177
|
+
-
|
|
178
|
+
- for (var i = 0, element; (element = env.elements[i++]);) {
|
|
179
|
+
- _.highlightElement(element, async === true, env.callback);
|
|
180
|
+
- }
|
|
181
|
+
- },
|
|
182
|
+
-
|
|
183
|
+
- /**
|
|
184
|
+
- * Highlights the code inside a single element.
|
|
185
|
+
- *
|
|
186
|
+
- * The following hooks will be run:
|
|
187
|
+
- * 1. `before-sanity-check`
|
|
188
|
+
- * 2. `before-highlight`
|
|
189
|
+
- * 3. All hooks of {@link Prism.highlight}. These hooks will be run by an asynchronous worker if `async` is `true`.
|
|
190
|
+
- * 4. `before-insert`
|
|
191
|
+
- * 5. `after-highlight`
|
|
192
|
+
- * 6. `complete`
|
|
193
|
+
- *
|
|
194
|
+
- * Some the above hooks will be skipped if the element doesn't contain any text or there is no grammar loaded for
|
|
195
|
+
- * the element's language.
|
|
196
|
+
- *
|
|
197
|
+
- * @param {Element} element The element containing the code.
|
|
198
|
+
- * It must have a class of `language-xxxx` to be processed, where `xxxx` is a valid language identifier.
|
|
199
|
+
- * @param {boolean} [async=false] Whether the element is to be highlighted asynchronously using Web Workers
|
|
200
|
+
- * to improve performance and avoid blocking the UI when highlighting very large chunks of code. This option is
|
|
201
|
+
- * [disabled by default](https://prismjs.com/faq.html#why-is-asynchronous-highlighting-disabled-by-default).
|
|
202
|
+
- *
|
|
203
|
+
- * Note: All language definitions required to highlight the code must be included in the main `prism.js` file for
|
|
204
|
+
- * asynchronous highlighting to work. You can build your own bundle on the
|
|
205
|
+
- * [Download page](https://prismjs.com/download.html).
|
|
206
|
+
- * @param {HighlightCallback} [callback] An optional callback to be invoked after the highlighting is done.
|
|
207
|
+
- * Mostly useful when `async` is `true`, since in that case, the highlighting is done asynchronously.
|
|
208
|
+
- * @memberof Prism
|
|
209
|
+
- * @public
|
|
210
|
+
- */
|
|
211
|
+
- highlightElement: function (element, async, callback) {
|
|
212
|
+
- // Find language
|
|
213
|
+
- var language = _.util.getLanguage(element);
|
|
214
|
+
- var grammar = _.languages[language];
|
|
215
|
+
-
|
|
216
|
+
- // Set language on the element, if not present
|
|
217
|
+
- _.util.setLanguage(element, language);
|
|
218
|
+
-
|
|
219
|
+
- // Set language on the parent, for styling
|
|
220
|
+
- var parent = element.parentElement;
|
|
221
|
+
- if (parent && parent.nodeName.toLowerCase() === 'pre') {
|
|
222
|
+
- _.util.setLanguage(parent, language);
|
|
223
|
+
- }
|
|
224
|
+
-
|
|
225
|
+
- var code = element.textContent;
|
|
226
|
+
-
|
|
227
|
+
- var env = {
|
|
228
|
+
- element: element,
|
|
229
|
+
- language: language,
|
|
230
|
+
- grammar: grammar,
|
|
231
|
+
- code: code
|
|
232
|
+
- };
|
|
233
|
+
-
|
|
234
|
+
- function insertHighlightedCode(highlightedCode) {
|
|
235
|
+
- env.highlightedCode = highlightedCode;
|
|
236
|
+
-
|
|
237
|
+
- _.hooks.run('before-insert', env);
|
|
238
|
+
-
|
|
239
|
+
- env.element.innerHTML = env.highlightedCode;
|
|
240
|
+
-
|
|
241
|
+
- _.hooks.run('after-highlight', env);
|
|
242
|
+
- _.hooks.run('complete', env);
|
|
243
|
+
- callback && callback.call(env.element);
|
|
244
|
+
- }
|
|
245
|
+
-
|
|
246
|
+
- _.hooks.run('before-sanity-check', env);
|
|
247
|
+
-
|
|
248
|
+
- // plugins may change/add the parent/element
|
|
249
|
+
- parent = env.element.parentElement;
|
|
250
|
+
- if (parent && parent.nodeName.toLowerCase() === 'pre' && !parent.hasAttribute('tabindex')) {
|
|
251
|
+
- parent.setAttribute('tabindex', '0');
|
|
252
|
+
- }
|
|
253
|
+
-
|
|
254
|
+
- if (!env.code) {
|
|
255
|
+
- _.hooks.run('complete', env);
|
|
256
|
+
- callback && callback.call(env.element);
|
|
257
|
+
- return;
|
|
258
|
+
- }
|
|
259
|
+
-
|
|
260
|
+
- _.hooks.run('before-highlight', env);
|
|
261
|
+
-
|
|
262
|
+
- if (!env.grammar) {
|
|
263
|
+
- insertHighlightedCode(_.util.encode(env.code));
|
|
264
|
+
- return;
|
|
265
|
+
- }
|
|
266
|
+
-
|
|
267
|
+
- if (async && _self.Worker) {
|
|
268
|
+
- var worker = new Worker(_.filename);
|
|
269
|
+
-
|
|
270
|
+
- worker.onmessage = function (evt) {
|
|
271
|
+
- insertHighlightedCode(evt.data);
|
|
272
|
+
- };
|
|
273
|
+
-
|
|
274
|
+
- worker.postMessage(JSON.stringify({
|
|
275
|
+
- language: env.language,
|
|
276
|
+
- code: env.code,
|
|
277
|
+
- immediateClose: true
|
|
278
|
+
- }));
|
|
279
|
+
- } else {
|
|
280
|
+
- insertHighlightedCode(_.highlight(env.code, env.grammar, env.language));
|
|
281
|
+
- }
|
|
282
|
+
- },
|
|
283
|
+
-
|
|
284
|
+
/**
|
|
285
|
+
* Low-level function, only use if you know what you’re doing. It accepts a string of text as input
|
|
286
|
+
* and the language definitions to use, and returns a string with the HTML produced.
|
|
287
|
+
@@ -766,8 +521,6 @@ var Prism = (function (_self) {
|
|
288
|
+
|
|
289
|
+
Token: Token
|
|
290
|
+
};
|
|
291
|
+
- _self.Prism = _;
|
|
292
|
+
-
|
|
293
|
+
|
|
294
|
+
// Typescript note:
|
|
295
|
+
// The following can be used to import the Token type in JSDoc:
|
|
296
|
+
@@ -1144,79 +897,9 @@ var Prism = (function (_self) {
|
|
297
|
+
return array;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
-
|
|
301
|
+
- if (!_self.document) {
|
|
302
|
+
- if (!_self.addEventListener) {
|
|
303
|
+
- // in Node.js
|
|
304
|
+
- return _;
|
|
305
|
+
- }
|
|
306
|
+
-
|
|
307
|
+
- if (!_.disableWorkerMessageHandler) {
|
|
308
|
+
- // In worker
|
|
309
|
+
- _self.addEventListener('message', function (evt) {
|
|
310
|
+
- var message = JSON.parse(evt.data);
|
|
311
|
+
- var lang = message.language;
|
|
312
|
+
- var code = message.code;
|
|
313
|
+
- var immediateClose = message.immediateClose;
|
|
314
|
+
-
|
|
315
|
+
- _self.postMessage(_.highlight(code, _.languages[lang], lang));
|
|
316
|
+
- if (immediateClose) {
|
|
317
|
+
- _self.close();
|
|
318
|
+
- }
|
|
319
|
+
- }, false);
|
|
320
|
+
- }
|
|
321
|
+
-
|
|
322
|
+
- return _;
|
|
323
|
+
- }
|
|
324
|
+
-
|
|
325
|
+
- // Get current script and highlight
|
|
326
|
+
- var script = _.util.currentScript();
|
|
327
|
+
-
|
|
328
|
+
- if (script) {
|
|
329
|
+
- _.filename = script.src;
|
|
330
|
+
-
|
|
331
|
+
- if (script.hasAttribute('data-manual')) {
|
|
332
|
+
- _.manual = true;
|
|
333
|
+
- }
|
|
334
|
+
- }
|
|
335
|
+
-
|
|
336
|
+
- function highlightAutomaticallyCallback() {
|
|
337
|
+
- if (!_.manual) {
|
|
338
|
+
- _.highlightAll();
|
|
339
|
+
- }
|
|
340
|
+
- }
|
|
341
|
+
-
|
|
342
|
+
- if (!_.manual) {
|
|
343
|
+
- // If the document state is "loading", then we'll use DOMContentLoaded.
|
|
344
|
+
- // If the document state is "interactive" and the prism.js script is deferred, then we'll also use the
|
|
345
|
+
- // DOMContentLoaded event because there might be some plugins or languages which have also been deferred and they
|
|
346
|
+
- // might take longer one animation frame to execute which can create a race condition where only some plugins have
|
|
347
|
+
- // been loaded when Prism.highlightAll() is executed, depending on how fast resources are loaded.
|
|
348
|
+
- // See https://github.com/PrismJS/prism/issues/2102
|
|
349
|
+
- var readyState = document.readyState;
|
|
350
|
+
- if (readyState === 'loading' || readyState === 'interactive' && script && script.defer) {
|
|
351
|
+
- document.addEventListener('DOMContentLoaded', highlightAutomaticallyCallback);
|
|
352
|
+
- } else {
|
|
353
|
+
- if (window.requestAnimationFrame) {
|
|
354
|
+
- window.requestAnimationFrame(highlightAutomaticallyCallback);
|
|
355
|
+
- } else {
|
|
356
|
+
- window.setTimeout(highlightAutomaticallyCallback, 16);
|
|
357
|
+
- }
|
|
358
|
+
- }
|
|
359
|
+
- }
|
|
360
|
+
-
|
|
361
|
+
return _;
|
|
362
|
+
|
|
363
|
+
-}(_self));
|
|
364
|
+
-
|
|
365
|
+
-if (typeof module !== 'undefined' && module.exports) {
|
|
366
|
+
- module.exports = Prism;
|
|
367
|
+
-}
|
|
368
|
+
-
|
|
369
|
+
-// hack for components to work correctly in node.js
|
|
370
|
+
-if (typeof global !== 'undefined') {
|
|
371
|
+
- global.Prism = Prism;
|
|
372
|
+
-}
|
|
373
|
+
+}());
|
|
374
|
+
|
|
375
|
+
// some additional documentation/types
|
|
376
|
+
|
|
@@ -1,9 +1,14 @@
|
|
|
1
|
-
import * as hljs from 'highlight.js';
|
|
2
1
|
/* eslint-disable max-len */
|
|
2
|
+
// import 'prismjs/components/prism-jsx';
|
|
3
|
+
// import 'prismjs/components/prism-typescript';
|
|
4
|
+
// import 'prismjs/components/prism-tsx';
|
|
5
|
+
import {Prism} from 'prismjs';
|
|
3
6
|
import React from 'react';
|
|
4
7
|
import {classNames} from '../../common/functions.tsx';
|
|
5
8
|
import {pre} from './index.css.ts';
|
|
6
9
|
|
|
10
|
+
const {highlight, languages} = Prism;
|
|
11
|
+
|
|
7
12
|
/**
|
|
8
13
|
* The `Code` component displays a block of pre-formatted code, and uses PrismJS
|
|
9
14
|
* to parse its syntax. The coloring is based on the [prism-one-dark](https://github.com/PrismJS/prism-themes/blob/master/themes/prism-one-dark.css) and [prism-one-light](https://github.com/PrismJS/prism-themes/blob/master/themes/prism-one-light.css) themes.
|
|
@@ -75,7 +80,7 @@ export const Code = ({
|
|
|
75
80
|
<code
|
|
76
81
|
// eslint-disable-next-line react/no-danger
|
|
77
82
|
dangerouslySetInnerHTML={{
|
|
78
|
-
__html:
|
|
83
|
+
__html: highlight(code.trim(), languages['clike'], 'clike'),
|
|
79
84
|
}}
|
|
80
85
|
/>
|
|
81
86
|
</pre>
|