@viewfly/platform-browser 2.1.0 → 2.2.0

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/bundles/index.js DELETED
@@ -1,497 +0,0 @@
1
- 'use strict';
2
-
3
- var core = require('@viewfly/core');
4
-
5
- class DomRenderer extends core.NativeRenderer {
6
- constructor() {
7
- super(...arguments);
8
- Object.defineProperty(this, "propMap", {
9
- enumerable: true,
10
- configurable: true,
11
- writable: true,
12
- value: {
13
- INPUT: {
14
- readonly: 'readOnly'
15
- },
16
- TEXTAREA: {
17
- readonly: 'readOnly'
18
- }
19
- }
20
- });
21
- }
22
- createElement(name, namespace) {
23
- const ns = namespace && DomRenderer.NAMESPACES[namespace];
24
- if (ns) {
25
- return document.createElementNS(ns, name);
26
- }
27
- return document.createElement(name);
28
- }
29
- createTextNode(textContent) {
30
- return document.createTextNode(textContent);
31
- }
32
- appendChild(parent, newChild) {
33
- parent.appendChild(newChild);
34
- }
35
- prependChild(parent, newChild) {
36
- parent.prepend(newChild);
37
- }
38
- insertAfter(newNode, ref) {
39
- if (ref.nextSibling) {
40
- this.insertBefore(newNode, ref.nextSibling);
41
- }
42
- else if (ref.parentNode) {
43
- this.appendChild(ref.parentNode, newNode);
44
- }
45
- else {
46
- // eslint-disable-next-line
47
- console.warn(`Element "${ref instanceof Text ? ref.textContent : ref.tagName}" was accidentally deleted, and viewfly is unable to update the current view`);
48
- }
49
- }
50
- remove(node) {
51
- node.remove();
52
- }
53
- cleanChildren(node) {
54
- node.textContent = '';
55
- }
56
- setProperty(node, key, value, namespace) {
57
- if (value == null) {
58
- this.removeProperty(node, key, namespace);
59
- return;
60
- }
61
- if (namespace) {
62
- const prefix = 'xlink:';
63
- if (key.startsWith(prefix)) {
64
- const ns = key.substring(prefix.length);
65
- node.setAttributeNS(ns, key, String(value));
66
- }
67
- else {
68
- node.setAttribute(key, String(value));
69
- }
70
- return;
71
- }
72
- const map = this.propMap[node.tagName];
73
- if (map) {
74
- key = map[key] || key;
75
- }
76
- if (key in node) {
77
- if (map && document.activeElement === node && key === 'value') {
78
- return;
79
- }
80
- node[key] = value;
81
- }
82
- else {
83
- node.setAttribute(key, value);
84
- }
85
- }
86
- removeProperty(node, key, namespace) {
87
- if (namespace) {
88
- const prefix = 'xlink:';
89
- if (key.startsWith(prefix)) {
90
- const ns = key.substring(prefix.length);
91
- node.removeAttributeNS(ns, key.substring(prefix.length));
92
- }
93
- else {
94
- node.removeAttribute(key);
95
- }
96
- return;
97
- }
98
- const map = this.propMap[node.tagName];
99
- const resolvedKey = map ? (map[key] || key) : key;
100
- const attrName = DomRenderer.REMOVE_VIA_ATTRIBUTE[resolvedKey];
101
- if (attrName) {
102
- node.removeAttribute(attrName);
103
- return;
104
- }
105
- if (resolvedKey in node) {
106
- node[resolvedKey] = '';
107
- }
108
- else {
109
- node.removeAttribute(key);
110
- }
111
- }
112
- setClass(target, className) {
113
- target.setAttribute('class', className);
114
- }
115
- setStyle(target, key, value) {
116
- if (key.startsWith('--')) {
117
- target.style.setProperty(key, value);
118
- return;
119
- }
120
- target.style[key] = value !== null && value !== void 0 ? value : '';
121
- }
122
- removeStyle(target, key) {
123
- if (key.startsWith('--')) {
124
- target.style.removeProperty(key);
125
- return;
126
- }
127
- target.style[key] = '';
128
- }
129
- listen(node, type, callback) {
130
- const normalizedType = this.normalizedEventType(type);
131
- node.addEventListener(normalizedType, callback);
132
- }
133
- unListen(node, type, callback) {
134
- const normalizedType = this.normalizedEventType(type);
135
- node.removeEventListener(normalizedType, callback);
136
- }
137
- syncTextContent(target, content) {
138
- target.textContent = content;
139
- }
140
- getNameSpace(type, namespace) {
141
- if (namespace === 'svg') {
142
- if (type === 'foreignObject') {
143
- return;
144
- }
145
- return namespace;
146
- }
147
- if (type === 'svg') {
148
- return type;
149
- }
150
- if (type === 'math') {
151
- return 'mathml';
152
- }
153
- return namespace;
154
- }
155
- normalizedEventType(type) {
156
- return type.substring(2).toLowerCase();
157
- }
158
- insertBefore(newNode, ref) {
159
- if (ref.parentNode) {
160
- ref.parentNode.insertBefore(newNode, ref);
161
- }
162
- else {
163
- // eslint-disable-next-line
164
- console.warn(`Element "${ref instanceof Text ? ref.textContent : ref.tagName}" was accidentally deleted, and viewfly is unable to update the current view`);
165
- }
166
- }
167
- }
168
- Object.defineProperty(DomRenderer, "NAMESPACES", {
169
- enumerable: true,
170
- configurable: true,
171
- writable: true,
172
- value: {
173
- svg: 'http://www.w3.org/2000/svg',
174
- html: 'http://www.w3.org/1999/xhtml',
175
- xml: 'http://www.w3.org/XML/1998/namespace',
176
- xlink: 'http://www.w3.org/1999/xlink',
177
- xmlns: 'http://www.w3.org/2000/xmlns/',
178
- mathml: 'http://www.w3.org/1998/Math/MathML',
179
- }
180
- });
181
- /**
182
- * IDL 属性赋 `''` 会被转成数字 0(如 maxLength/minLength),无法表示「未设置」。
183
- * 这些键在移除时应删掉对应 content attribute。
184
- */
185
- Object.defineProperty(DomRenderer, "REMOVE_VIA_ATTRIBUTE", {
186
- enumerable: true,
187
- configurable: true,
188
- writable: true,
189
- value: {
190
- maxLength: 'maxlength',
191
- minLength: 'minlength',
192
- size: 'size',
193
- cols: 'cols',
194
- rows: 'rows',
195
- tabIndex: 'tabindex',
196
- }
197
- });
198
-
199
- function createApp(root, config = true) {
200
- const c = { autoUpdate: true };
201
- if (typeof config === 'boolean') {
202
- c.autoUpdate = config;
203
- }
204
- else if (typeof config === 'object') {
205
- Object.assign(c, config);
206
- }
207
- return core.viewfly(Object.assign(Object.assign({}, c), { root, nativeRenderer: c.nativeRenderer || new DomRenderer() }));
208
- }
209
-
210
- /**
211
- * 用于创建脱离当前 DOM 树的子节点,常用于弹窗等
212
- * @deprecated 即将弃用,请使用 @viewfly/core 模块的 Portal 组件实现
213
- * @param childRender
214
- * @param host
215
- * @example
216
- * ```tsx
217
- * function App() {
218
- * const number = createSignal(0)
219
- *
220
- * setInterval(() => {
221
- * number.set(number() + 1)
222
- * }, 1000)
223
- *
224
- * const ModalPortal = function (props) {
225
- * return createPortal(() => {
226
- * return <div class="modal">parent data is {props.text}</div>
227
- * }, document.body)
228
- * }
229
- * return () => {
230
- * return (
231
- * <div>
232
- * <div>data is {number()}</div>
233
- * <ModalPortal text={number()}/>
234
- * </div>
235
- * )
236
- * }
237
- * }
238
- * ```
239
- */
240
- function createPortal(childRender, host) {
241
- return {
242
- $portalHost: host,
243
- $render: childRender
244
- };
245
- }
246
-
247
- class VDOMNode {
248
- constructor() {
249
- Object.defineProperty(this, "parent", {
250
- enumerable: true,
251
- configurable: true,
252
- writable: true,
253
- value: null
254
- });
255
- }
256
- remove() {
257
- if (this.parent) {
258
- const i = this.parent.children.indexOf(this);
259
- if (i > -1) {
260
- this.parent.children.splice(i, 1);
261
- }
262
- }
263
- this.parent = null;
264
- }
265
- }
266
- class VDOMElement extends VDOMNode {
267
- constructor(name) {
268
- super();
269
- Object.defineProperty(this, "name", {
270
- enumerable: true,
271
- configurable: true,
272
- writable: true,
273
- value: name
274
- });
275
- Object.defineProperty(this, "props", {
276
- enumerable: true,
277
- configurable: true,
278
- writable: true,
279
- value: new Map()
280
- });
281
- Object.defineProperty(this, "children", {
282
- enumerable: true,
283
- configurable: true,
284
- writable: true,
285
- value: []
286
- });
287
- Object.defineProperty(this, "style", {
288
- enumerable: true,
289
- configurable: true,
290
- writable: true,
291
- value: new Map()
292
- });
293
- Object.defineProperty(this, "className", {
294
- enumerable: true,
295
- configurable: true,
296
- writable: true,
297
- value: ''
298
- });
299
- }
300
- }
301
- class VDOMText extends VDOMNode {
302
- constructor(text) {
303
- super();
304
- Object.defineProperty(this, "text", {
305
- enumerable: true,
306
- configurable: true,
307
- writable: true,
308
- value: text
309
- });
310
- }
311
- }
312
- /**
313
- * 用于生成模拟轻量 DOM 节点的渲染器
314
- */
315
- class HTMLRenderer extends core.NativeRenderer {
316
- createElement(name) {
317
- return new VDOMElement(name);
318
- }
319
- createTextNode(textContent) {
320
- return new VDOMText(textContent);
321
- }
322
- setProperty(node, key, value) {
323
- node.props.set(key, value);
324
- }
325
- appendChild(parent, newChild) {
326
- newChild.remove();
327
- parent.children.push(newChild);
328
- newChild.parent = parent;
329
- }
330
- prependChild(parent, newChild) {
331
- newChild.remove();
332
- parent.children.unshift(newChild);
333
- newChild.parent = parent;
334
- }
335
- removeProperty(node, key) {
336
- node.props.delete(key);
337
- }
338
- setStyle(target, key, value) {
339
- target.style.set(key, value);
340
- }
341
- removeStyle(target, key) {
342
- target.style.delete(key);
343
- }
344
- setClass(target, value) {
345
- target.className = value;
346
- }
347
- listen() {
348
- //
349
- }
350
- unListen() {
351
- //
352
- }
353
- remove(node) {
354
- node.remove();
355
- }
356
- cleanChildren(node) {
357
- node.children.forEach(i => i.parent = null);
358
- node.children = [];
359
- }
360
- syncTextContent(target, content) {
361
- target.text = content;
362
- }
363
- insertAfter(newNode, ref) {
364
- newNode.remove();
365
- const parent = ref.parent;
366
- if (parent) {
367
- const i = parent.children.indexOf(ref);
368
- if (i > -1) {
369
- newNode.parent = parent;
370
- parent.children.splice(i + 1, 0, newNode);
371
- }
372
- }
373
- else {
374
- // eslint-disable-next-line
375
- console.warn(`Element "${ref instanceof VDOMText ? ref.text : ref.name}" was accidentally deleted, and viewfly is unable to update the current view`);
376
- }
377
- }
378
- getNameSpace() {
379
- //
380
- }
381
- }
382
- /**
383
- * 轻量 DOM 转换为 HTML 字符串的转换器
384
- */
385
- class OutputTranslator {
386
- constructor() {
387
- Object.defineProperty(this, "singleTagTest", {
388
- enumerable: true,
389
- configurable: true,
390
- writable: true,
391
- value: new RegExp(`^(${OutputTranslator.singleTags.join('|')})$`, 'i')
392
- });
393
- }
394
- /**
395
- * 将虚拟 DOM 转换为 HTML 字符串的方法
396
- * @param vDom 虚拟 DOM 节点
397
- */
398
- transform(vDom) {
399
- return vDom.children.map(child => {
400
- return this.vDomToHTMLString(child);
401
- }).join('');
402
- }
403
- vDomToHTMLString(vDom) {
404
- const xssFilter = OutputTranslator.simpleXSSFilter;
405
- if (vDom instanceof VDOMText) {
406
- return this.replaceEmpty(xssFilter.text(vDom.text), '&nbsp;');
407
- }
408
- const styles = Array.from(vDom.style.keys()).filter(key => {
409
- const v = vDom.style.get(key);
410
- return !(v === undefined || v === null || v === '');
411
- }).map(key => {
412
- const k = key.replace(/(?=[A-Z])/g, '-').toLowerCase();
413
- return xssFilter.attrValue(`${k}:${vDom.style.get(key)}`);
414
- }).join(';');
415
- const attrs = Array.from(vDom.props.keys()).filter(key => key !== 'ref' && vDom.props.get(key) !== false).map(k => {
416
- const key = xssFilter.attrName(k);
417
- const value = vDom.props.get(k);
418
- return (value === true && /^\w+$/.test(key) ? `${key}` : `${key}="${xssFilter.attrValue(`${value}`)}"`);
419
- });
420
- if (styles) {
421
- attrs.push(`style="${styles}"`);
422
- }
423
- if (vDom.className) {
424
- attrs.push(`class="${xssFilter.attrValue(vDom.className)}"`);
425
- }
426
- let attrStr = attrs.join(' ');
427
- attrStr = attrStr ? ' ' + attrStr : '';
428
- if (this.singleTagTest.test(vDom.name)) {
429
- return `<${vDom.name}${attrStr}>`;
430
- }
431
- const childHTML = vDom.children.map(child => {
432
- return this.vDomToHTMLString(child);
433
- }).join('');
434
- return [
435
- `<${vDom.name}${attrStr}>`,
436
- childHTML,
437
- `</${vDom.name}>`
438
- ].join('');
439
- }
440
- replaceEmpty(s, target) {
441
- return s.replace(/\s\s+/g, str => {
442
- return ' ' + Array.from({
443
- length: str.length - 1
444
- }).fill(target).join('');
445
- }).replace(/^\s|\s$/g, target);
446
- }
447
- }
448
- Object.defineProperty(OutputTranslator, "singleTags", {
449
- enumerable: true,
450
- configurable: true,
451
- writable: true,
452
- value: 'area,base,br,col,embed,hr,img,input,link,meta,source,track,wbr'.split(',')
453
- });
454
- Object.defineProperty(OutputTranslator, "simpleXSSFilter", {
455
- enumerable: true,
456
- configurable: true,
457
- writable: true,
458
- value: {
459
- text(text) {
460
- return text.replace(/[><&]/g, str => {
461
- return {
462
- '<': '&lt;',
463
- '>': '&gt;',
464
- '&': '&amp;'
465
- }[str];
466
- });
467
- },
468
- attrName(text) {
469
- return text.replace(/[><"'&]/g, str => {
470
- return {
471
- '<': '&lt;',
472
- '>': '&gt;',
473
- '"': '&quot;',
474
- '\'': '&#x27;',
475
- '&': '&amp;'
476
- }[str];
477
- });
478
- },
479
- attrValue(text) {
480
- return text.replace(/["']/g, str => {
481
- return {
482
- '"': '&quot;',
483
- '\'': '&#x27;'
484
- }[str];
485
- });
486
- }
487
- }
488
- });
489
-
490
- exports.DomRenderer = DomRenderer;
491
- exports.HTMLRenderer = HTMLRenderer;
492
- exports.OutputTranslator = OutputTranslator;
493
- exports.VDOMElement = VDOMElement;
494
- exports.VDOMNode = VDOMNode;
495
- exports.VDOMText = VDOMText;
496
- exports.createApp = createApp;
497
- exports.createPortal = createPortal;
@@ -1,14 +0,0 @@
1
- import dts from 'rollup-plugin-dts'
2
-
3
- export default {
4
- input: 'src/public-api.ts',
5
- output: [
6
- {
7
- file: './bundles/index.d.ts',
8
- format: 'es'
9
- }
10
- ],
11
- plugins: [
12
- dts(),
13
- ]
14
- }