lightview 1.7.1-b → 1.7.2-b

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 (6) hide show
  1. package/README.md +2 -2
  2. package/components/chart/example.html +2 -4
  3. package/components/gantt/gantt.html +0 -1
  4. package/lightview.js +22 -20
  5. package/package.json +1 -1
  6. package/examples/duration.html +0 -279
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- # lightview v1.7.1b (BETA)
1
+ # lightview v1.7.2b (BETA)
2
2
 
3
3
  Small, simple, powerful web UI and micro front end creation ...
4
4
 
@@ -36,7 +36,7 @@ Meanwhile, here is what you get:
36
36
 
37
37
  1) SPA, and MPA friendly ... somewhat SEO friendly and short steps away from fully SEO friendly.
38
38
 
39
- 1) A [component library](https://lightview.dev/components) including charts and gauges.
39
+ 1) A [component library](https://lightview.dev/components) including charts and gauges that work in Markdown files.
40
40
 
41
41
  1) Lots of live [editable examples](https://lightview.dev/#examples).
42
42
 
package/components/chart/example.html CHANGED
@@ -5,11 +5,9 @@
5
5
  <script src="../../lightview.js"></script>
6
6
  </head>
7
7
  <body>
8
- <l-chart id="myChart" type="PieChart" style="height:500px;" title="How Much Pizza I Ate Last Night">
8
+ <l-chart id="myPieChart" type="PieChart" style="height:500px;" title="How Much Pizza I Ate Last Night">
9
9
  {
10
- options: {
11
-
12
- },
10
+ options: { },
13
11
  columns: [
14
12
  {label: "Topping", type: "string"},
15
13
  {label: "Slices", type: "number"}
package/components/gantt/gantt.html CHANGED
@@ -1,6 +1,5 @@
1
1
  <html>
2
2
  <head>
3
- <meta charset="UTF-8">
4
3
  <title>Lightview:Gantt</title>
5
4
  </head>
6
5
  <body>
package/lightview.js CHANGED
@@ -143,19 +143,17 @@ const {observe} = (() => {
143
143
  }
144
144
  instance.push(...parsed);
145
145
  } else if (instance instanceof Date) {
146
- const time = Date.parse(value);
147
- if(!isNaN(time)) instance.setTime(time);
148
- else return;
146
+ instance.setTime(Date.parse(value));
149
147
  } else {
150
148
  Object.assign(instance, JSON.parse(value));
151
149
  }
152
- /*if (toType !== Date) {
150
+ if (toType !== Date) {
153
151
  Object.defineProperty(instance, "constructor", {
154
152
  configurable: true,
155
153
  writable: true,
156
154
  value: toType.prototype.constructor || toType
157
155
  });
158
- }*/
156
+ }
159
157
  return instance;
160
158
  }
161
159
  return JSON.parse(value);
@@ -180,10 +178,8 @@ const {observe} = (() => {
180
178
  if (property === "toJSON") return function toJSON() { return [...target]; }
181
179
  if (property === "toString") return function toString() { return JSON.stringify([...target]); }
182
180
  }
181
+ if(target instanceof Date) return Reflect.get(target,property);
183
182
  let value = target[property];
184
- if(target instanceof Date && typeof(value)==="function") {
185
- value = value.bind(target);
186
- }
187
183
  const type = typeof (value);
188
184
  if (CURRENTOBSERVER && typeof (property) !== "symbol" && type !== "function") {
189
185
  const observers = dependents[property] ||= new Set();
@@ -276,6 +272,9 @@ const {observe} = (() => {
276
272
  throw new TypeError(`Can't assign instance of '${newValue.constructor.name}' to variable '${property}:${type.name.replace("bound ", "")}'`)
277
273
  }
278
274
  throw new TypeError(`Can't assign '${typeof (newValue)} ${newtype === "string" ? '"' + newValue + '"' : newValue}' to variable '${property}:${typetype === "function" ? type.name.replace("bound ", "") : type} ${type.required ? "required" : ""}'`)
275
+ },
276
+ keys() {
277
+ return [...Object.keys(vars)];
279
278
  }
280
279
  });
281
280
  }
@@ -356,7 +355,7 @@ const {observe} = (() => {
356
355
  const name = getTemplateVariableName(template);
357
356
  try {
358
357
  let value = (name
359
- ? walk(extras,name.split(".")) || walk(component.varsProxy,name.split(".")) || component[name]
358
+ ? component[name] || walk(extras,name.split(".")) || walk(component.varsProxy,name.split("."))
360
359
  : Function("context", "extras", "with(context) { with(extras) { return `" + (safe ? template : Lightview.sanitizeTemplate(template)) + "` } }")(component.varsProxy,extras));
361
360
  //let value = Function("context", "with(context) { return `" + Lightview.sanitizeTemplate(template) + "` }")(component.varsProxy);
362
361
  if(typeof(value)==="function") return value;
@@ -414,7 +413,7 @@ const {observe} = (() => {
414
413
  if(!existing || existing.type!==type || !existing.reactive) component.variables({[variableName]: type},{reactive});
415
414
  if(inputtype!=="radio") {
416
415
  if(typeof(value)==="string" && value.includes("${")) input.attributes.value.value = "";
417
- else if(value!=="") component.setVariableValue(variableName, coerce(value,type));
416
+ else component.setVariableValue(variableName, coerce(value,type));
418
417
  }
419
418
  }
420
419
  let eventname = "change";
@@ -533,7 +532,7 @@ const {observe} = (() => {
533
532
  value: imported
534
533
  }
535
534
  };
536
- const createClass = (domElementNode, {observer, framed}) => {
535
+ const createClass = (domElementNode, {observer, framed, href}) => {
537
536
  const instances = new Set(),
538
537
  dom = domElementNode.tagName === "TEMPLATE"
539
538
  ? domElementNode.content.cloneNode(true)
@@ -616,11 +615,11 @@ const {observe} = (() => {
616
615
  promises = [];
617
616
  for (const script of [...scripts]) {
618
617
  if (script.attributes.src?.value?.includes("/lightview.js")) continue;
619
- // remove comments;
620
618
  const text = script.innerHTML
621
- .replaceAll(/\/\*[\s\S]*?\*\/|([^:]|^)\/\/.*$/gm, "$1")
622
- .replaceAll(/\r?\n/g, "")
623
- .replaceAll(/'(([^'\\]|\\.)*)'/g,"\\'$1\\'");
619
+ .replaceAll(/\/\*[\s\S]*?\*\/|([^:]|^)\/\/.*$/gm, "$1") // remove comments;
620
+ .replaceAll(/\r?\n/g, "") // remove \n
621
+ .replaceAll(/import\s*\((\s*["'][\.\/].*["'])\)/g,`import(new URL($1,"${href ? href : window.location.href}").href)`) // handle relative paths
622
+ .replaceAll(/'(([^'\\]|\\.)*)'/g,"\\'$1\\'"); // handle quotes
624
623
  const currentScript = document.createElement("script");
625
624
  if (script.className !== "lightview" && !((script.attributes.type?.value || "").includes("lightview/"))) {
626
625
  for (const attr of script.attributes) currentScript.setAttribute(attr.name,attr.value);
@@ -673,7 +672,7 @@ const {observe} = (() => {
673
672
  if (name) {
674
673
  const nameparts = name.split(".");
675
674
  if(node.extras && node.extras[nameparts[0]]) {
676
- object = node.extras[nameparts[0]];
675
+ object = node.extras[nameparts[0]];
677
676
  }
678
677
  if(!this.vars[nameparts[0]] || this.vars[nameparts[0]].reactive || object) {
679
678
  bindInput(node, name, this, resolveNodeOrText(attr, this,false,node.extras), object);
@@ -713,7 +712,6 @@ const {observe} = (() => {
713
712
  }
714
713
  [...node.attributes].forEach(async (attr) => {
715
714
  if (attr.name === "value" && attr.template) return;
716
- attr.template ||= attr.nodeValue?.includes("${") ? attr.nodeValue : undefined;
717
715
  const {name, value} = attr,
718
716
  vname = node.attributes.name?.value;
719
717
  if (name === "type" && value=="radio" && vname) {
@@ -798,10 +796,14 @@ const {observe} = (() => {
798
796
  while (node.lastElementChild) node.lastElementChild.remove();
799
797
  }
800
798
  }
799
+ //const nodes = getNodes(parsed.body);
801
800
  children.forEach((child) => {
801
+ //while (parsed.body.firstChild) {
802
+ //const child = parsed.body.firstChild;
802
803
  if (after) node.parentElement.insertBefore(child, node);
803
804
  else node.appendChild(child);
804
805
  })
806
+ //processNodes(nodes);
805
807
  })
806
808
  } else if(attr.template) {
807
809
  observe(() => {
@@ -930,14 +932,14 @@ const {observe} = (() => {
930
932
  }
931
933
  }
932
934
 
933
- const createComponent = (name, node, {framed, observer} = {}) => {
935
+ const createComponent = (name, node, {framed, observer, href} = {}) => {
934
936
  let ctor = customElements.get(name);
935
937
  if (ctor) {
936
938
  if (framed && !ctor.lightviewFramed) ctor.lightviewFramed = true;
937
939
  else console.warn(new Error(`${name} is already a CustomElement. Not redefining`));
938
940
  return ctor;
939
941
  }
940
- ctor = createClass(node, {observer, framed});
942
+ ctor = createClass(node, {observer, framed, href});
941
943
  customElements.define(name, ctor);
942
944
  Lightview.customElements.set(name, ctor);
943
945
  return ctor;
@@ -963,7 +965,7 @@ const {observe} = (() => {
963
965
  await importLink(childlink, observer);
964
966
  }
965
967
  if (unhide) dom.body.removeAttribute("hidden");
966
- createComponent(as, dom.body, {observer});
968
+ createComponent(as, dom.body, {observer,href:url.href});
967
969
  }
968
970
  return {as};
969
971
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lightview",
3
- "version": "1.7.1b",
3
+ "version": "1.7.2b",
4
4
  "description": "Small, simple, powerful web UI and micro front end creation ... Great ideas from Svelte, React, Vue and Riot combined.",
5
5
  "main": "lightview.js",
6
6
  "scripts": {
package/examples/duration.html DELETED
@@ -1,279 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Lightview:Examples:Duration timewave timeview</title>
6
- </head>
7
- <body>
8
- <script>
9
- const isDate = (value) => value && typeof(value)==="object" && value instanceof Date;
10
- const durationMilliseconds = {
11
- ms: 1,
12
- s: 1000,
13
- m: 1000 * 60,
14
- h: 1000 * 60 * 60,
15
- d: 1000 * 60 * 60 * 24,
16
- w: 1000 * 60 * 60 * 24 * 7,
17
- mo: 1000 * 60 * 60 * 2 * 365.2424177, // (1000 * 60 * 60 * 24 * 365.2424177)/12
18
- q: 1000 * 60 * 60 * 6 * 365.2424177, // (1000 * 60 * 60 * 24 * 365.2424177)/4
19
- y: 1000 * 60 * 60 * 24 * 365.2424177
20
- };
21
- const dateMath = {
22
- y(date,y) {
23
- date.setYear(date.getYear()+y);
24
- },
25
- q(date,q) {
26
- const newmonth = (q * 3) + date.getMonth();
27
- date.setMonth(newmonth>11 ? newmonth - 12 : newmonth);
28
- },
29
- mo(date,mo) {
30
- const newmonth = mo + date.getMonth();
31
- date.setMonth(newmonth>11 ? newmonth - 12 : newmonth);
32
- },
33
- w(date,w) {
34
- const dayofyear = Math.floor((date - new Date(date.getFullYear(), 0, 0)) / durationMilliseconds["d"]),
35
- newdayofyear = dayofyear + (w * 7),
36
- newtime = date.getTime() + (newdayofyear + durationMilliseconds["d"])
37
- date.setTime(newtime);
38
- },
39
- d(date,d) {
40
- const dayofyear = Math.floor((date - new Date(date.getFullYear(), 0, 0)) / durationMilliseconds["d"]),
41
- newdayofyear = dayofyear + d,
42
- newtime = date.getTime() + (newdayofyear + durationMilliseconds["d"])
43
- date.setTime(newtime);
44
- },
45
- h(date,h) {
46
- const newhour = h + date.getHours();
47
- date.setHours(newhour>23 ? 24-newhour : newhour);
48
- },
49
- m(date,m) {
50
- const newminutes = m + date.getMinutes();
51
- date.setMinutes(newminutes>59 ? 60-newminutes : newminutes);
52
- },
53
- s(date,s) {
54
- const newseconds = s + date.getSeconds();
55
- date.setSeconds(newseconds>59 ? 60-newseconds : newseconds);
56
- },
57
- ms(date,ms) {
58
- const newmseconds = ms + date.getMilliseconds()
59
- date.setMilliseconds(newmseconds>999 ? 1000-newmseconds : newmseconds);
60
- }
61
- }
62
- const parseDuration = (value) => {
63
- const type = typeof(value);
64
- if(value && type==="object" && value instanceof D) return value.valueOf();
65
- if(type==="number") return value;
66
- if(type==="string") {
67
- const parts = value.split(" ");
68
- let ms = 0;
69
- for(const part of parts) {
70
- const num = parseFloat(part),
71
- suffix = part.substring((num+"").length);
72
- if(typeof(num)==="number" && !isNaN(num) && suffix in durationMilliseconds) {
73
- ms += durationMilliseconds[suffix] * num;
74
- } else {
75
- throw new TypeError(`${part} in ${value} is not a valid duration`)
76
- }
77
- }
78
- return ms;
79
- }
80
- if(isDate(value)) return value.getTime();
81
- return null;
82
- };
83
- function Period(start,end) {
84
- if(!this || !(this instanceof Period)) return new Period(start,end);
85
- Object.defineProperty(this,"start",{
86
- set(value) {
87
- if (!value || typeof (value) !== "object" || !(value instanceof Date)) throw new TypeError(`Period boundary must be a Date`);
88
- start = value;
89
- }
90
- });
91
- Object.defineProperty(this,"end",{
92
- set(value) {
93
- if (!value || typeof (value) !== "object" || !(value instanceof Date)) throw new TypeError(`Period boundary must be a Date`);
94
- end = value;
95
- }
96
- });
97
- Object.defineProperty(this,"valueOf",{ value:() => {
98
- const t1 = start.getTime(),
99
- t2 = end.getTime();
100
- return D(Math.max(t1,t2)-Math.min(t1,t2))
101
- }});
102
- Object.defineProperty(this,"length",{get() { return this.valueOf();}});
103
- this.start = start;
104
- this.end = end;
105
- }
106
- function Clock(date=new Date(),{tz,hz}={}) {
107
- if(typeof(date)==="number") date = new Date(date);
108
- if(!date || typeof(date)!=="object" || !(date instanceof Date)) throw new TypeError(`Clock() expects a Date not ${JSON.stringify(date)}`);
109
- let tzoffset = now.getTimezoneOffset(),
110
- diff = 0;
111
- if(tz) {
112
- const thereLocaleStr = date.toLocaleString('en-US', {timeZone: tz}),
113
- thereDate = new Date(thereLocaleStr);
114
- diff = thereDate.getTime() - date.getTime();
115
- tzoffset = Math.round(tzoffset - (diff / (1000 * 60)));
116
- } else {
117
- tzoffset = date.getTimezoneOffset();
118
- }
119
- if(hz) {
120
- if(hz>60) console.warn(`Clock set to run faster than ${hz}hz. Excess CPU load beyond typical DOM refresh rate.`);
121
- const warp = date.getTime() - Date.now();
122
- setInterval(() => {
123
- date = new Date(Date.now() + warp);
124
- },1000/Math.abs(hz))
125
- }
126
- const extensions = {
127
- plus(duration,times=1) {
128
- if(typeof(duration)==="number") duration = D(duration);
129
- if(!D.is(duration)) throw new TypeError(`${JSON.stringify(duration)} is not a duration`);
130
- const parts = duration.toJSON().split(" "),
131
- result = new Date(date);
132
- Object.entries(dateMath).forEach(([key,math]) => {
133
- parts.some((part) => {
134
- if(part.endsWith(key)) {
135
- math(result,parseFloat(part)*times);
136
- return true;
137
- }
138
- })
139
- });
140
- return new Clock(result,{tz},true);
141
- },
142
- minus(duration) {
143
- this.plus(duration,-1);
144
- },
145
- clone({tz,hz}={}) {
146
- const thereDate = new Clock(new Date(),{tz}),
147
- thereOffset = thereDate.getTimezoneOffset(),
148
- offset = tzoffset - thereOffset,
149
- newDate = new Date(date.getTime() + offset * 1000 * 60)
150
- return new Clock(newDate,{tz,hz});
151
- },
152
- getTimezoneOffset() {
153
- return tzoffset;
154
- },
155
- toString() {
156
- const string = date.toString(),
157
- offset = tzoffset / 60,
158
- fraction = offset % 1,
159
- minutes = (1 - fraction) >= .017 ? `${Math.round(fraction * 60)}` : "00", // .017 = 1 minute
160
- hours = `${Math.abs(Math.round(offset))}`,
161
- gmt = `GMT${offset>0 ? "-" : "+"}${hours.padStart(2,"0")}${minutes.padStart(2,"0")}`,
162
- zone = tz ? ` (${tz})` : "";
163
- return string.replace(/GMT.*/g,gmt) + zone;
164
- }
165
- };
166
- const proxy = new Proxy(date,{
167
- get(target,property) {
168
- let value = extensions[property];
169
- if(value!==undefined) return value;
170
- if(property==="weekDay") {
171
- return target.getDay()+1;
172
- }
173
- if(property==="dayOfMonth") {
174
- return target.getDate();
175
- }
176
- if(property==="dayOfYear" || property==="ordinal") {
177
- return Math.floor((target - new Date(target.getFullYear(), 0, 0)) / durationMilliseconds["d"])
178
- }
179
- if(property==="isInLeapYear") {
180
- const year = date.getFullYear();
181
- return !(year % 4 || !(year % 100) && year % 400);
182
- }
183
- if(property==="offset") {
184
- return tzoffset;
185
- }
186
- if(property==="weekOfYear") {
187
- return Math.floor(((target - new Date(target.getFullYear(), 0, 0)) / durationMilliseconds["d"]) / 7)
188
- }
189
- value = date[property];
190
- if(typeof(value)==="function") return value.bind(target);
191
- if(typeof(property)==="string" && !property.startsWith("get")) {
192
- let fname = "get" + property[0].toUpperCase() + property.substring(1);
193
- if(typeof(target[fname])==="function") return target[fname]();
194
- fname += "s";
195
- if(typeof(target[fname])==="function") return target[fname]();
196
- }
197
- return value;
198
- }
199
- });
200
- return proxy;
201
- }
202
- Clock.min = (...clocks) => {
203
- const mintime = clocks.reduce((mintime,clock) => {
204
- const t = clock.getTime() + clock.getTimezoneOffset() * 1000 * 60;
205
- mintime = Math.min(t,mintime);
206
- },Infinity);
207
- return clocks.reduce((min,clock) => {
208
- if((clock.getTime() + clock.getTimezoneOffset() * 1000 * 60)===mintime) {
209
- min.push(clock);
210
- }
211
- return min;
212
- },[])
213
- }
214
- Clock.max = (...clocks) => {
215
- const maxtime = clocks.reduce((mintime,clock) => {
216
- const t = clock.getTime() + clock.getTimezoneOffset() * 1000 * 60;
217
- mintime = Math.max(t,mintime);
218
- },-Infinity);
219
- return clocks.reduce((min,clock) => {
220
- if((clock.getTime() + clock.getTimezoneOffset() * 1000 * 60)===maxtime) {
221
- min.push(clock);
222
- }
223
- return min;
224
- },[])
225
- }
226
- function D(value,type) {
227
- if(!this || !(this instanceof D)) return new D(value,type);
228
- let duration = value;
229
- if(isDate(duration)) {
230
- if(type && type!=="ms") throw new TypeError(`A date can't be used to initialize ${type}`);
231
- duration = value.getTime()+"ms";
232
- } else if(typeof(duration)==="number") {
233
- duration += type||"ms";
234
- }
235
- const valueof = parseDuration(duration);
236
- if(valueof==null) throw new TypeError(`${typeof(value)==="string" ? value : JSON.stringify(value)}${type!==undefined ? type :""} is not a valid duration`);
237
- Object.defineProperty(this,"type",{get() { return type; }});
238
- Object.defineProperty(this,"valueOf",{value:() => valueof});
239
- Object.defineProperty(this,"toJSON",{value:() => duration});
240
- return this;
241
- }
242
- D.is = (value) => value && typeof(value)==="object" && value instanceof D;
243
- D.prototype.to = function(type="ms") {
244
- const value = this.valueOf();
245
- if(type==="Date") {
246
- if(this instanceof Period) throw new TypeError(`Cannot convert Period to Date`);
247
- return new Date(value);
248
- }
249
- if(!(type in durationMilliseconds)) throw new TypeError(`${type} is not a valid duration type`);
250
- return value / durationMilliseconds[type];
251
- }
252
- D.prototype.days = function() { return this.to("d"); }
253
- D.prototype.Date = function() { return this.to("Date"); }
254
- D.Period = Period;
255
- Period.is = (value) => value && typeof(value)==="object" && value instanceof Period;
256
- Period.prototype = {...D.prototype};
257
- delete Period.prototype.Date;
258
-
259
-
260
- console.log(JSON.stringify(D(D("1d") + D("1w") + D("1w 2d")).days()));
261
- const now = new Date(),
262
- d = D(now) + D("1d"),
263
- nyc = Clock(now,{tz:"America/New_York",hz:60}),
264
- chicago = nyc.clone({tz:"America/Chicago"}),
265
- toronto = nyc.clone({tz:"America/Toronto"}),
266
- seattle = toronto.clone({tz:"America/Los_Angeles"});
267
- console.log(now,new Date(D(d)),new Date(d));
268
- console.log(D(1) instanceof D);
269
- console.log(now.getTime(),D(now,"ms").valueOf());
270
- console.log(JSON.stringify(Clock(now).plus(D("1mo"))));
271
- console.log(Clock(now).weekOfYear,Clock(now).dayOfYear);
272
- console.log(nyc.toString());
273
- console.log(toronto.toString());
274
- console.log(chicago.toString());
275
- console.log(seattle.toString());
276
- setInterval(() => console.log(nyc.toString()),1000*60);
277
- </script>
278
- </body>
279
- </html>