@viewfly/platform-browser 0.2.2 → 0.2.3

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.
Files changed (4) hide show
  1. package/bundles/dom-renderer.d.ts +10 -31
  2. package/bundles/index.esm.js +53 -136
  3. package/bundles/index.js +53 -136
  4. package/package.json +3 -3
package/bundles/dom-renderer.d.ts CHANGED
@@ -1,47 +1,26 @@
1
1
  import { NativeRenderer } from '@viewfly/core';
2
2
  export declare class DomRenderer extends NativeRenderer<HTMLElement, Text> {
3
- isSVG: RegExp;
4
- xlinkNameSpace: string;
5
- possibleXlinkNames: {
6
- xlinkActuate: string;
7
- xlinkactuate: string;
8
- 'xlink:actuate': string;
9
- xlinkArcrole: string;
10
- xlinkarcrole: string;
11
- 'xlink:arcrole': string;
12
- xlinkHref: string;
13
- xlinkhref: string;
14
- 'xlink:href': string;
15
- xlinkRole: string;
16
- xlinkrole: string;
17
- 'xlink:role': string;
18
- xlinkShow: string;
19
- xlinkshow: string;
20
- 'xlink:show': string;
21
- xlinkTitle: string;
22
- xlinktitle: string;
23
- 'xlink:title': string;
24
- xlinkType: string;
25
- xlinktype: string;
26
- 'xlink:type': string;
3
+ static NAMESPACES: {
4
+ svg: string;
5
+ html: string;
6
+ xml: string;
7
+ xlink: string;
8
+ xmlns: string;
27
9
  };
28
- booleanProps: Record<string, string[]>;
29
- valueProps: Record<string, string[]>;
30
- createElement(name: string): HTMLElement;
10
+ propMap: Record<string, Record<string, string>>;
11
+ createElement(name: string, isSvg: boolean): HTMLElement;
31
12
  createTextNode(textContent: string): Text;
32
13
  appendChild(parent: HTMLElement, newChild: any): void;
33
14
  prependChild(parent: HTMLElement, newChild: HTMLElement | Text): void;
34
15
  insertAfter(newNode: HTMLElement | Text, ref: HTMLElement | Text): void;
35
16
  remove(node: HTMLElement | Text): void;
36
- setProperty(node: HTMLElement, key: string, value: any): void;
37
- removeProperty(node: HTMLElement, key: string): void;
17
+ setProperty(node: HTMLElement, key: string, value: any, isSvg: boolean): void;
18
+ removeProperty(node: HTMLElement, key: string, isSvg: boolean): void;
38
19
  setClass(target: HTMLElement, className: string): void;
39
20
  setStyle(target: HTMLElement, key: string, value: any): void;
40
21
  removeStyle(target: HTMLElement, key: string): void;
41
22
  listen<T = any>(node: HTMLElement, type: string, callback: (ev: T) => any): void;
42
23
  unListen(node: HTMLElement, type: string, callback: (ev: any) => any): void;
43
24
  syncTextContent(target: Text, content: string): void;
44
- private setXlinkAttribute;
45
- private removeXlinkAttribute;
46
25
  private insertBefore;
47
26
  }
package/bundles/index.esm.js CHANGED
@@ -3,113 +3,24 @@ import { NativeRenderer, viewfly, makeError, inject, Injector, THROW_IF_NOT_FOUN
3
3
  class DomRenderer extends NativeRenderer {
4
4
  constructor() {
5
5
  super(...arguments);
6
- this.isSVG = new RegExp(`^(${[
7
- // 'a',
8
- 'animate',
9
- 'animateMotion',
10
- 'animateTransform',
11
- 'circle',
12
- 'clipPath',
13
- 'defs',
14
- 'desc',
15
- 'ellipse',
16
- 'feBlend',
17
- 'feColorMatrix',
18
- 'feComponentTransfer',
19
- 'feComposite',
20
- 'feConvolveMatrix',
21
- 'feDiffuseLighting',
22
- 'feDisplacementMap',
23
- 'feDistantLight',
24
- 'feDropShadow',
25
- 'feFlood',
26
- 'feFuncA',
27
- 'feFuncB',
28
- 'feFuncG',
29
- 'feFuncR',
30
- 'feGaussianBlur',
31
- 'feImage',
32
- 'feMerge',
33
- 'feMergeNode',
34
- 'feMorphology',
35
- 'feOffset',
36
- 'fePointLight',
37
- 'feSpecularLighting',
38
- 'feSpotLight',
39
- 'feTile',
40
- 'feTurbulence',
41
- 'filter',
42
- 'foreignObject',
43
- 'g',
44
- 'image',
45
- 'line',
46
- 'linearGradient',
47
- 'marker',
48
- 'mask',
49
- 'metadata',
50
- 'mpath',
51
- 'path',
52
- 'pattern',
53
- 'polygon',
54
- 'polyline',
55
- 'radialGradient',
56
- 'rect',
57
- // 'script',
58
- 'set',
59
- 'stop',
60
- // 'style',
61
- 'svg',
62
- 'switch',
63
- 'symbol',
64
- 'text',
65
- 'textPath',
66
- 'title',
67
- 'tspan',
68
- 'use',
69
- 'view'
70
- ].join('|')})$`, 'i');
71
- this.xlinkNameSpace = 'http://www.w3.org/1999/xlink';
72
- this.possibleXlinkNames = {
73
- xlinkActuate: 'xlink:actuate',
74
- xlinkactuate: 'xlink:actuate',
75
- 'xlink:actuate': 'xlink:actuate',
76
- xlinkArcrole: 'xlink:arcrole',
77
- xlinkarcrole: 'xlink:arcrole',
78
- 'xlink:arcrole': 'xlink:arcrole',
79
- xlinkHref: 'xlink:href',
80
- xlinkhref: 'xlink:href',
81
- 'xlink:href': 'xlink:href',
82
- xlinkRole: 'xlink:role',
83
- xlinkrole: 'xlink:role',
84
- 'xlink:role': 'xlink:role',
85
- xlinkShow: 'xlink:show',
86
- xlinkshow: 'xlink:show',
87
- 'xlink:show': 'xlink:show',
88
- xlinkTitle: 'xlink:title',
89
- xlinktitle: 'xlink:title',
90
- 'xlink:title': 'xlink:title',
91
- xlinkType: 'xlink:type',
92
- xlinktype: 'xlink:type',
93
- 'xlink:type': 'xlink:type'
94
- };
95
- this.booleanProps = {
96
- input: ['disabled', 'readonly'],
97
- select: ['disabled', 'multiple'],
98
- option: ['disabled', 'selected'],
99
- button: ['disabled'],
100
- video: ['controls', 'autoplay', 'loop', 'muted'],
101
- audio: ['controls', 'autoplay', 'loop', 'muted'],
102
- };
103
- this.valueProps = {
104
- input: ['value'],
105
- option: ['value'],
106
- video: ['src'],
107
- audio: ['src']
6
+ this.propMap = {
7
+ INPUT: {
8
+ readonly: 'readOnly'
9
+ },
10
+ TEXTAREA: {
11
+ readonly: 'readOnly'
12
+ }
108
13
  };
109
14
  }
110
- createElement(name) {
111
- if (this.isSVG.test(name)) {
112
- return document.createElementNS('http://www.w3.org/2000/svg', name);
15
+ // valueProps: Record<string, string[]> = {
16
+ // input: ['value'],
17
+ // option: ['value'],
18
+ // video: ['src'],
19
+ // audio: ['src']
20
+ // }
21
+ createElement(name, isSvg) {
22
+ if (isSvg) {
23
+ return document.createElementNS(DomRenderer.NAMESPACES.svg, name);
113
24
  }
114
25
  return document.createElement(name);
115
26
  }
@@ -133,43 +44,48 @@ class DomRenderer extends NativeRenderer {
133
44
  remove(node) {
134
45
  node.remove();
135
46
  }
136
- setProperty(node, key, value) {
137
- if (this.possibleXlinkNames[key]) {
138
- this.setXlinkAttribute(node, this.possibleXlinkNames[key], value);
47
+ setProperty(node, key, value, isSvg) {
48
+ const nameSpace = DomRenderer.NAMESPACES;
49
+ if (isSvg) {
50
+ const [prefix, ...unqualifiedName] = key.split(/(?=[A-Z])/);
51
+ let ns = null;
52
+ if (prefix === 'xmlns' || unqualifiedName.length && nameSpace[prefix]) {
53
+ ns = nameSpace[prefix];
54
+ }
55
+ node.setAttributeNS(ns, key, String(value));
139
56
  return;
140
57
  }
141
- node.setAttribute(key, value);
142
- const tag = node.tagName.toLowerCase();
143
- const booleanTagNames = this.booleanProps[tag];
144
- const valueTagNames = this.valueProps[tag];
145
- if (booleanTagNames && booleanTagNames.includes(key)) {
146
- node[key] = Boolean(value);
58
+ const map = this.propMap[node.tagName];
59
+ if (map) {
60
+ key = map[key] || key;
147
61
  }
148
- else if (valueTagNames && valueTagNames.includes(key)) {
149
- if (node[key] === value) {
150
- return;
151
- }
62
+ if (key in node) {
152
63
  node[key] = value;
153
64
  }
65
+ else {
66
+ node.setAttribute(key, value);
67
+ }
154
68
  }
155
- removeProperty(node, key) {
156
- if (this.possibleXlinkNames[key]) {
157
- this.removeXlinkAttribute(node, this.possibleXlinkNames[key]);
69
+ removeProperty(node, key, isSvg) {
70
+ if (isSvg) {
71
+ const nameSpace = DomRenderer.NAMESPACES;
72
+ const [prefix, ...unqualifiedName] = key.split(/(?=[A-Z])/);
73
+ let ns = null;
74
+ if (prefix === 'xmlns' || unqualifiedName.length && nameSpace[prefix]) {
75
+ ns = nameSpace[prefix];
76
+ }
77
+ node.removeAttributeNS(ns, key);
158
78
  return;
159
79
  }
160
- node.removeAttribute(key);
161
- const tag = node.tagName.toLowerCase();
162
- const booleanTagNames = this.booleanProps[tag];
163
- const valueTagNames = this.valueProps[tag];
164
- if (booleanTagNames && booleanTagNames.includes(key)) {
165
- node[key] = false;
166
- }
167
- else if (valueTagNames && valueTagNames.includes(key)) {
80
+ if (key in node) {
168
81
  node[key] = '';
169
82
  }
83
+ else {
84
+ node.removeAttribute(key);
85
+ }
170
86
  }
171
87
  setClass(target, className) {
172
- target.className = className || '';
88
+ target.setAttribute('class', className);
173
89
  }
174
90
  setStyle(target, key, value) {
175
91
  target.style[key] = value !== null && value !== void 0 ? value : '';
@@ -186,16 +102,17 @@ class DomRenderer extends NativeRenderer {
186
102
  syncTextContent(target, content) {
187
103
  target.textContent = content;
188
104
  }
189
- setXlinkAttribute(target, key, value) {
190
- target.setAttributeNS(this.xlinkNameSpace, key, value);
191
- }
192
- removeXlinkAttribute(target, key) {
193
- target.removeAttributeNS(this.xlinkNameSpace, key.split(':')[1]);
194
- }
195
105
  insertBefore(newNode, ref) {
196
106
  ref.parentNode.insertBefore(newNode, ref);
197
107
  }
198
108
  }
109
+ DomRenderer.NAMESPACES = {
110
+ svg: 'http://www.w3.org/2000/svg',
111
+ html: 'http://www.w3.org/1999/xhtml',
112
+ xml: 'http://www.w3.org/XML/1998/namespace',
113
+ xlink: 'http://www.w3.org/1999/xlink',
114
+ xmlns: 'http://www.w3.org/2000/xmlns/'
115
+ };
199
116
 
200
117
  function createApp(root, config = true) {
201
118
  const c = { autoUpdate: true };
package/bundles/index.js CHANGED
@@ -5,113 +5,24 @@ var core = require('@viewfly/core');
5
5
  class DomRenderer extends core.NativeRenderer {
6
6
  constructor() {
7
7
  super(...arguments);
8
- this.isSVG = new RegExp(`^(${[
9
- // 'a',
10
- 'animate',
11
- 'animateMotion',
12
- 'animateTransform',
13
- 'circle',
14
- 'clipPath',
15
- 'defs',
16
- 'desc',
17
- 'ellipse',
18
- 'feBlend',
19
- 'feColorMatrix',
20
- 'feComponentTransfer',
21
- 'feComposite',
22
- 'feConvolveMatrix',
23
- 'feDiffuseLighting',
24
- 'feDisplacementMap',
25
- 'feDistantLight',
26
- 'feDropShadow',
27
- 'feFlood',
28
- 'feFuncA',
29
- 'feFuncB',
30
- 'feFuncG',
31
- 'feFuncR',
32
- 'feGaussianBlur',
33
- 'feImage',
34
- 'feMerge',
35
- 'feMergeNode',
36
- 'feMorphology',
37
- 'feOffset',
38
- 'fePointLight',
39
- 'feSpecularLighting',
40
- 'feSpotLight',
41
- 'feTile',
42
- 'feTurbulence',
43
- 'filter',
44
- 'foreignObject',
45
- 'g',
46
- 'image',
47
- 'line',
48
- 'linearGradient',
49
- 'marker',
50
- 'mask',
51
- 'metadata',
52
- 'mpath',
53
- 'path',
54
- 'pattern',
55
- 'polygon',
56
- 'polyline',
57
- 'radialGradient',
58
- 'rect',
59
- // 'script',
60
- 'set',
61
- 'stop',
62
- // 'style',
63
- 'svg',
64
- 'switch',
65
- 'symbol',
66
- 'text',
67
- 'textPath',
68
- 'title',
69
- 'tspan',
70
- 'use',
71
- 'view'
72
- ].join('|')})$`, 'i');
73
- this.xlinkNameSpace = 'http://www.w3.org/1999/xlink';
74
- this.possibleXlinkNames = {
75
- xlinkActuate: 'xlink:actuate',
76
- xlinkactuate: 'xlink:actuate',
77
- 'xlink:actuate': 'xlink:actuate',
78
- xlinkArcrole: 'xlink:arcrole',
79
- xlinkarcrole: 'xlink:arcrole',
80
- 'xlink:arcrole': 'xlink:arcrole',
81
- xlinkHref: 'xlink:href',
82
- xlinkhref: 'xlink:href',
83
- 'xlink:href': 'xlink:href',
84
- xlinkRole: 'xlink:role',
85
- xlinkrole: 'xlink:role',
86
- 'xlink:role': 'xlink:role',
87
- xlinkShow: 'xlink:show',
88
- xlinkshow: 'xlink:show',
89
- 'xlink:show': 'xlink:show',
90
- xlinkTitle: 'xlink:title',
91
- xlinktitle: 'xlink:title',
92
- 'xlink:title': 'xlink:title',
93
- xlinkType: 'xlink:type',
94
- xlinktype: 'xlink:type',
95
- 'xlink:type': 'xlink:type'
96
- };
97
- this.booleanProps = {
98
- input: ['disabled', 'readonly'],
99
- select: ['disabled', 'multiple'],
100
- option: ['disabled', 'selected'],
101
- button: ['disabled'],
102
- video: ['controls', 'autoplay', 'loop', 'muted'],
103
- audio: ['controls', 'autoplay', 'loop', 'muted'],
104
- };
105
- this.valueProps = {
106
- input: ['value'],
107
- option: ['value'],
108
- video: ['src'],
109
- audio: ['src']
8
+ this.propMap = {
9
+ INPUT: {
10
+ readonly: 'readOnly'
11
+ },
12
+ TEXTAREA: {
13
+ readonly: 'readOnly'
14
+ }
110
15
  };
111
16
  }
112
- createElement(name) {
113
- if (this.isSVG.test(name)) {
114
- return document.createElementNS('http://www.w3.org/2000/svg', name);
17
+ // valueProps: Record<string, string[]> = {
18
+ // input: ['value'],
19
+ // option: ['value'],
20
+ // video: ['src'],
21
+ // audio: ['src']
22
+ // }
23
+ createElement(name, isSvg) {
24
+ if (isSvg) {
25
+ return document.createElementNS(DomRenderer.NAMESPACES.svg, name);
115
26
  }
116
27
  return document.createElement(name);
117
28
  }
@@ -135,43 +46,48 @@ class DomRenderer extends core.NativeRenderer {
135
46
  remove(node) {
136
47
  node.remove();
137
48
  }
138
- setProperty(node, key, value) {
139
- if (this.possibleXlinkNames[key]) {
140
- this.setXlinkAttribute(node, this.possibleXlinkNames[key], value);
49
+ setProperty(node, key, value, isSvg) {
50
+ const nameSpace = DomRenderer.NAMESPACES;
51
+ if (isSvg) {
52
+ const [prefix, ...unqualifiedName] = key.split(/(?=[A-Z])/);
53
+ let ns = null;
54
+ if (prefix === 'xmlns' || unqualifiedName.length && nameSpace[prefix]) {
55
+ ns = nameSpace[prefix];
56
+ }
57
+ node.setAttributeNS(ns, key, String(value));
141
58
  return;
142
59
  }
143
- node.setAttribute(key, value);
144
- const tag = node.tagName.toLowerCase();
145
- const booleanTagNames = this.booleanProps[tag];
146
- const valueTagNames = this.valueProps[tag];
147
- if (booleanTagNames && booleanTagNames.includes(key)) {
148
- node[key] = Boolean(value);
60
+ const map = this.propMap[node.tagName];
61
+ if (map) {
62
+ key = map[key] || key;
149
63
  }
150
- else if (valueTagNames && valueTagNames.includes(key)) {
151
- if (node[key] === value) {
152
- return;
153
- }
64
+ if (key in node) {
154
65
  node[key] = value;
155
66
  }
67
+ else {
68
+ node.setAttribute(key, value);
69
+ }
156
70
  }
157
- removeProperty(node, key) {
158
- if (this.possibleXlinkNames[key]) {
159
- this.removeXlinkAttribute(node, this.possibleXlinkNames[key]);
71
+ removeProperty(node, key, isSvg) {
72
+ if (isSvg) {
73
+ const nameSpace = DomRenderer.NAMESPACES;
74
+ const [prefix, ...unqualifiedName] = key.split(/(?=[A-Z])/);
75
+ let ns = null;
76
+ if (prefix === 'xmlns' || unqualifiedName.length && nameSpace[prefix]) {
77
+ ns = nameSpace[prefix];
78
+ }
79
+ node.removeAttributeNS(ns, key);
160
80
  return;
161
81
  }
162
- node.removeAttribute(key);
163
- const tag = node.tagName.toLowerCase();
164
- const booleanTagNames = this.booleanProps[tag];
165
- const valueTagNames = this.valueProps[tag];
166
- if (booleanTagNames && booleanTagNames.includes(key)) {
167
- node[key] = false;
168
- }
169
- else if (valueTagNames && valueTagNames.includes(key)) {
82
+ if (key in node) {
170
83
  node[key] = '';
171
84
  }
85
+ else {
86
+ node.removeAttribute(key);
87
+ }
172
88
  }
173
89
  setClass(target, className) {
174
- target.className = className || '';
90
+ target.setAttribute('class', className);
175
91
  }
176
92
  setStyle(target, key, value) {
177
93
  target.style[key] = value !== null && value !== void 0 ? value : '';
@@ -188,16 +104,17 @@ class DomRenderer extends core.NativeRenderer {
188
104
  syncTextContent(target, content) {
189
105
  target.textContent = content;
190
106
  }
191
- setXlinkAttribute(target, key, value) {
192
- target.setAttributeNS(this.xlinkNameSpace, key, value);
193
- }
194
- removeXlinkAttribute(target, key) {
195
- target.removeAttributeNS(this.xlinkNameSpace, key.split(':')[1]);
196
- }
197
107
  insertBefore(newNode, ref) {
198
108
  ref.parentNode.insertBefore(newNode, ref);
199
109
  }
200
110
  }
111
+ DomRenderer.NAMESPACES = {
112
+ svg: 'http://www.w3.org/2000/svg',
113
+ html: 'http://www.w3.org/1999/xhtml',
114
+ xml: 'http://www.w3.org/XML/1998/namespace',
115
+ xlink: 'http://www.w3.org/1999/xlink',
116
+ xmlns: 'http://www.w3.org/2000/xmlns/'
117
+ };
201
118
 
202
119
  function createApp(root, config = true) {
203
120
  const c = { autoUpdate: true };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@viewfly/platform-browser",
3
- "version": "0.2.2",
3
+ "version": "0.2.3",
4
4
  "description": "This project is used to enable the Viewfly framework to run in a browser.",
5
5
  "main": "./bundles/index.js",
6
6
  "module": "./bundles/index.esm.js",
@@ -12,7 +12,7 @@
12
12
  "license": "MIT",
13
13
  "keywords": [],
14
14
  "dependencies": {
15
- "@viewfly/core": "^0.2.2",
15
+ "@viewfly/core": "^0.2.3",
16
16
  "csstype": "^3.1.2"
17
17
  },
18
18
  "devDependencies": {
@@ -33,5 +33,5 @@
33
33
  "bugs": {
34
34
  "url": "https://github.com/viewfly/viewfly.git/issues"
35
35
  },
36
- "gitHead": "b66ca589f7662cd518fc2e5955b3e3ff9de83f94"
36
+ "gitHead": "1640dcd27dc51ead16d55964f95c56a94271ea8d"
37
37
  }