elegance-js 1.14.0 → 1.15.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.
Files changed (14) hide show
  1. package/dist/build.mjs +35 -35
  2. package/dist/client/client.mjs +7 -3
  3. package/dist/compile_docs.mjs +35 -35
  4. package/dist/dynamic_page.mjs +35 -35
  5. package/dist/global.d.ts +1 -0
  6. package/dist/index.mjs +4 -3
  7. package/dist/page_compiler.mjs +35 -35
  8. package/dist/server/generateHTMLTemplate.d.ts +2 -2
  9. package/dist/server/generateHTMLTemplate.mjs +33 -33
  10. package/dist/server/render.mjs +20 -23
  11. package/dist/server/server.mjs +35 -35
  12. package/dist/server/state.mjs +4 -3
  13. package/package.json +1 -1
  14. package/scripts/bootstrap.js +19 -6
package/dist/build.mjs CHANGED
@@ -203,32 +203,29 @@ var renderRecursively = (element) => {
203
203
  return returnString + element.join(", ");
204
204
  }
205
205
  returnString += `<${element.tag}`;
206
- const {
207
- tag: elementTag,
208
- options: elementOptions,
209
- children: elementChildren
210
- } = element.options;
211
- if (elementTag && elementOptions && elementChildren) {
212
- const children = element.children;
213
- element.children = [
214
- element.options,
215
- ...children
216
- ];
217
- element.options = {};
218
- for (let i = 0; i < children.length + 1; i++) {
219
- const child2 = element.children[i];
220
- returnString += renderRecursively(child2);
221
- }
222
- returnString += `</${element.tag}>`;
223
- return returnString;
224
- }
225
206
  if (typeof element.options === "object") {
226
- for (const [attrName, attrValue] of Object.entries(element.options)) {
227
- if (typeof attrValue === "object") {
228
- throw `Attr ${attrName}, for element ${element.tag} has obj type. Got: ${JSON.stringify(element)}`;
207
+ const {
208
+ tag: elementTag,
209
+ options: elementOptions,
210
+ children: elementChildren
211
+ } = element.options;
212
+ if (elementTag !== void 0 && elementOptions !== void 0 && elementChildren !== void 0) {
213
+ const children = element.children;
214
+ element.children = [
215
+ element.options,
216
+ ...children
217
+ ];
218
+ element.options = {};
219
+ } else {
220
+ for (const [attrName, attrValue] of Object.entries(element.options)) {
221
+ if (typeof attrValue === "object") {
222
+ throw `Attr ${attrName}, for element ${element.tag} has obj type. Got: ${JSON.stringify(element, null, 2)}`;
223
+ }
224
+ returnString += ` ${attrName.toLowerCase()}="${attrValue}"`;
229
225
  }
230
- returnString += ` ${attrName.toLowerCase()}="${attrValue}"`;
231
226
  }
227
+ } else if (typeof element.options !== "object" && element.options !== void 0) {
228
+ element.children = [element.options, ...element.children || []];
232
229
  }
233
230
  if (element.children === null) {
234
231
  returnString += "/>";
@@ -255,7 +252,7 @@ var serverSideRenderPage = async (page, pathname) => {
255
252
  };
256
253
 
257
254
  // src/server/generateHTMLTemplate.ts
258
- var generateHTMLTemplate = ({
255
+ var generateHTMLTemplate = async ({
259
256
  pageURL,
260
257
  head: head2,
261
258
  serverData = null,
@@ -263,23 +260,26 @@ var generateHTMLTemplate = ({
263
260
  name,
264
261
  requiredClientModules = []
265
262
  }) => {
266
- let HTMLTemplate = `<head><meta name="viewport" content="width=device-width, initial-scale=1.0">`;
267
- HTMLTemplate += '<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"><meta charset="UTF-8">';
263
+ let StartTemplate = `<meta name="viewport" content="width=device-width, initial-scale=1.0">`;
264
+ StartTemplate += '<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"><meta charset="UTF-8">';
268
265
  for (const module of requiredClientModules) {
269
- HTMLTemplate += `<script data-module="true" src="/shipped/${module}.js" defer="true"></script>`;
266
+ StartTemplate += `<script data-module="true" src="/shipped/${module}.js" defer="true"></script>`;
270
267
  }
271
268
  if (addPageScriptTag === true) {
272
- HTMLTemplate += `<script data-tag="true" type="module" src="${pageURL === "" ? "" : "/"}${pageURL}/${name}_data.js" defer="true"></script>`;
269
+ StartTemplate += `<script data-tag="true" type="module" src="${pageURL === "" ? "" : "/"}${pageURL}/${name}_data.js" defer="true"></script>`;
273
270
  }
274
- HTMLTemplate += `<script type="module" src="/client.js" defer="true"></script>`;
275
- const builtHead = head2();
276
- for (const child2 of builtHead.children) {
277
- HTMLTemplate += renderRecursively(child2);
271
+ StartTemplate += `<script type="module" src="/client.js" defer="true"></script>`;
272
+ let builtHead;
273
+ if (head2.constructor.name === "AsyncFunction") {
274
+ builtHead = await head2(StartTemplate);
275
+ } else {
276
+ builtHead = head2(StartTemplate);
278
277
  }
278
+ let HTMLTemplate = renderRecursively(builtHead);
279
279
  if (serverData) {
280
280
  HTMLTemplate += serverData;
281
281
  }
282
- HTMLTemplate += "</head>";
282
+ HTMLTemplate += "";
283
283
  return HTMLTemplate;
284
284
  };
285
285
 
@@ -432,14 +432,14 @@ var generateSuitablePageElements = async (pageLocation, pageElements, metadata,
432
432
  processedPageElements,
433
433
  pageLocation
434
434
  );
435
- const template = generateHTMLTemplate({
435
+ const template = await generateHTMLTemplate({
436
436
  pageURL: path.relative(DIST_DIR, pageLocation),
437
437
  head: metadata,
438
438
  addPageScriptTag: true,
439
439
  name: pageName,
440
440
  requiredClientModules
441
441
  });
442
- const resultHTML = `<!DOCTYPE html><html>${template}${renderedPage.bodyHTML}</html>`;
442
+ const resultHTML = `<!DOCTYPE html>${template}${renderedPage.bodyHTML}`;
443
443
  return {
444
444
  objectAttributes,
445
445
  resultHTML
package/dist/client/client.mjs CHANGED
@@ -464,9 +464,12 @@ var renderRecursively = (element, attributes) => {
464
464
  return fragment;
465
465
  }
466
466
  const domElement = document.createElement(element.tag);
467
- if (typeof element.options === "object" && element.options !== null) {
467
+ if (typeof element.options !== "object" && element.options !== void 0) {
468
+ const childNode = renderRecursively(element.options, attributes);
469
+ if (childNode) domElement.appendChild(childNode);
470
+ } else if (typeof element.options === "object") {
468
471
  const { tag, options, children } = element.options;
469
- if (tag !== void 0 && options !== void 0 && children !== void 0) {
472
+ if (tag !== void 0 || options !== void 0 || children !== void 0) {
470
473
  const childNode = renderRecursively(element.options, attributes);
471
474
  if (childNode) domElement.appendChild(childNode);
472
475
  } else {
@@ -474,7 +477,8 @@ var renderRecursively = (element, attributes) => {
474
477
  if (typeof attrValue === "object") {
475
478
  const { isAttribute } = attrValue;
476
479
  if (isAttribute === void 0 || isAttribute === false) {
477
- throw "Objects are not valid option property values.";
480
+ console.error("Objects are not valid option property values.");
481
+ throw "";
478
482
  }
479
483
  attributes.push({
480
484
  ...attrValue,
package/dist/compile_docs.mjs CHANGED
@@ -206,32 +206,29 @@ var renderRecursively = (element) => {
206
206
  return returnString + element.join(", ");
207
207
  }
208
208
  returnString += `<${element.tag}`;
209
- const {
210
- tag: elementTag,
211
- options: elementOptions,
212
- children: elementChildren
213
- } = element.options;
214
- if (elementTag && elementOptions && elementChildren) {
215
- const children = element.children;
216
- element.children = [
217
- element.options,
218
- ...children
219
- ];
220
- element.options = {};
221
- for (let i = 0; i < children.length + 1; i++) {
222
- const child2 = element.children[i];
223
- returnString += renderRecursively(child2);
224
- }
225
- returnString += `</${element.tag}>`;
226
- return returnString;
227
- }
228
209
  if (typeof element.options === "object") {
229
- for (const [attrName, attrValue] of Object.entries(element.options)) {
230
- if (typeof attrValue === "object") {
231
- throw `Attr ${attrName}, for element ${element.tag} has obj type. Got: ${JSON.stringify(element)}`;
210
+ const {
211
+ tag: elementTag,
212
+ options: elementOptions,
213
+ children: elementChildren
214
+ } = element.options;
215
+ if (elementTag !== void 0 && elementOptions !== void 0 && elementChildren !== void 0) {
216
+ const children = element.children;
217
+ element.children = [
218
+ element.options,
219
+ ...children
220
+ ];
221
+ element.options = {};
222
+ } else {
223
+ for (const [attrName, attrValue] of Object.entries(element.options)) {
224
+ if (typeof attrValue === "object") {
225
+ throw `Attr ${attrName}, for element ${element.tag} has obj type. Got: ${JSON.stringify(element, null, 2)}`;
226
+ }
227
+ returnString += ` ${attrName.toLowerCase()}="${attrValue}"`;
232
228
  }
233
- returnString += ` ${attrName.toLowerCase()}="${attrValue}"`;
234
229
  }
230
+ } else if (typeof element.options !== "object" && element.options !== void 0) {
231
+ element.children = [element.options, ...element.children || []];
235
232
  }
236
233
  if (element.children === null) {
237
234
  returnString += "/>";
@@ -258,7 +255,7 @@ var serverSideRenderPage = async (page, pathname) => {
258
255
  };
259
256
 
260
257
  // src/server/generateHTMLTemplate.ts
261
- var generateHTMLTemplate = ({
258
+ var generateHTMLTemplate = async ({
262
259
  pageURL,
263
260
  head: head2,
264
261
  serverData = null,
@@ -266,23 +263,26 @@ var generateHTMLTemplate = ({
266
263
  name,
267
264
  requiredClientModules = []
268
265
  }) => {
269
- let HTMLTemplate = `<head><meta name="viewport" content="width=device-width, initial-scale=1.0">`;
270
- HTMLTemplate += '<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"><meta charset="UTF-8">';
266
+ let StartTemplate = `<meta name="viewport" content="width=device-width, initial-scale=1.0">`;
267
+ StartTemplate += '<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"><meta charset="UTF-8">';
271
268
  for (const module of requiredClientModules) {
272
- HTMLTemplate += `<script data-module="true" src="/shipped/${module}.js" defer="true"></script>`;
269
+ StartTemplate += `<script data-module="true" src="/shipped/${module}.js" defer="true"></script>`;
273
270
  }
274
271
  if (addPageScriptTag === true) {
275
- HTMLTemplate += `<script data-tag="true" type="module" src="${pageURL === "" ? "" : "/"}${pageURL}/${name}_data.js" defer="true"></script>`;
272
+ StartTemplate += `<script data-tag="true" type="module" src="${pageURL === "" ? "" : "/"}${pageURL}/${name}_data.js" defer="true"></script>`;
276
273
  }
277
- HTMLTemplate += `<script type="module" src="/client.js" defer="true"></script>`;
278
- const builtHead = head2();
279
- for (const child2 of builtHead.children) {
280
- HTMLTemplate += renderRecursively(child2);
274
+ StartTemplate += `<script type="module" src="/client.js" defer="true"></script>`;
275
+ let builtHead;
276
+ if (head2.constructor.name === "AsyncFunction") {
277
+ builtHead = await head2(StartTemplate);
278
+ } else {
279
+ builtHead = head2(StartTemplate);
281
280
  }
281
+ let HTMLTemplate = renderRecursively(builtHead);
282
282
  if (serverData) {
283
283
  HTMLTemplate += serverData;
284
284
  }
285
- HTMLTemplate += "</head>";
285
+ HTMLTemplate += "";
286
286
  return HTMLTemplate;
287
287
  };
288
288
 
@@ -435,14 +435,14 @@ var generateSuitablePageElements = async (pageLocation, pageElements, metadata,
435
435
  processedPageElements,
436
436
  pageLocation
437
437
  );
438
- const template = generateHTMLTemplate({
438
+ const template = await generateHTMLTemplate({
439
439
  pageURL: path.relative(DIST_DIR, pageLocation),
440
440
  head: metadata,
441
441
  addPageScriptTag: true,
442
442
  name: pageName,
443
443
  requiredClientModules
444
444
  });
445
- const resultHTML = `<!DOCTYPE html><html>${template}${renderedPage.bodyHTML}</html>`;
445
+ const resultHTML = `<!DOCTYPE html>${template}${renderedPage.bodyHTML}`;
446
446
  return {
447
447
  objectAttributes,
448
448
  resultHTML
package/dist/dynamic_page.mjs CHANGED
@@ -160,32 +160,29 @@ var renderRecursively = (element) => {
160
160
  return returnString + element.join(", ");
161
161
  }
162
162
  returnString += `<${element.tag}`;
163
- const {
164
- tag: elementTag,
165
- options: elementOptions,
166
- children: elementChildren
167
- } = element.options;
168
- if (elementTag && elementOptions && elementChildren) {
169
- const children = element.children;
170
- element.children = [
171
- element.options,
172
- ...children
173
- ];
174
- element.options = {};
175
- for (let i = 0; i < children.length + 1; i++) {
176
- const child = element.children[i];
177
- returnString += renderRecursively(child);
178
- }
179
- returnString += `</${element.tag}>`;
180
- return returnString;
181
- }
182
163
  if (typeof element.options === "object") {
183
- for (const [attrName, attrValue] of Object.entries(element.options)) {
184
- if (typeof attrValue === "object") {
185
- throw `Attr ${attrName}, for element ${element.tag} has obj type. Got: ${JSON.stringify(element)}`;
164
+ const {
165
+ tag: elementTag,
166
+ options: elementOptions,
167
+ children: elementChildren
168
+ } = element.options;
169
+ if (elementTag !== void 0 && elementOptions !== void 0 && elementChildren !== void 0) {
170
+ const children = element.children;
171
+ element.children = [
172
+ element.options,
173
+ ...children
174
+ ];
175
+ element.options = {};
176
+ } else {
177
+ for (const [attrName, attrValue] of Object.entries(element.options)) {
178
+ if (typeof attrValue === "object") {
179
+ throw `Attr ${attrName}, for element ${element.tag} has obj type. Got: ${JSON.stringify(element, null, 2)}`;
180
+ }
181
+ returnString += ` ${attrName.toLowerCase()}="${attrValue}"`;
186
182
  }
187
- returnString += ` ${attrName.toLowerCase()}="${attrValue}"`;
188
183
  }
184
+ } else if (typeof element.options !== "object" && element.options !== void 0) {
185
+ element.children = [element.options, ...element.children || []];
189
186
  }
190
187
  if (element.children === null) {
191
188
  returnString += "/>";
@@ -212,7 +209,7 @@ var serverSideRenderPage = async (page, pathname) => {
212
209
  };
213
210
 
214
211
  // src/server/generateHTMLTemplate.ts
215
- var generateHTMLTemplate = ({
212
+ var generateHTMLTemplate = async ({
216
213
  pageURL,
217
214
  head: head2,
218
215
  serverData = null,
@@ -220,23 +217,26 @@ var generateHTMLTemplate = ({
220
217
  name,
221
218
  requiredClientModules = []
222
219
  }) => {
223
- let HTMLTemplate = `<head><meta name="viewport" content="width=device-width, initial-scale=1.0">`;
224
- HTMLTemplate += '<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"><meta charset="UTF-8">';
220
+ let StartTemplate = `<meta name="viewport" content="width=device-width, initial-scale=1.0">`;
221
+ StartTemplate += '<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"><meta charset="UTF-8">';
225
222
  for (const module of requiredClientModules) {
226
- HTMLTemplate += `<script data-module="true" src="/shipped/${module}.js" defer="true"></script>`;
223
+ StartTemplate += `<script data-module="true" src="/shipped/${module}.js" defer="true"></script>`;
227
224
  }
228
225
  if (addPageScriptTag === true) {
229
- HTMLTemplate += `<script data-tag="true" type="module" src="${pageURL === "" ? "" : "/"}${pageURL}/${name}_data.js" defer="true"></script>`;
226
+ StartTemplate += `<script data-tag="true" type="module" src="${pageURL === "" ? "" : "/"}${pageURL}/${name}_data.js" defer="true"></script>`;
230
227
  }
231
- HTMLTemplate += `<script type="module" src="/client.js" defer="true"></script>`;
232
- const builtHead = head2();
233
- for (const child of builtHead.children) {
234
- HTMLTemplate += renderRecursively(child);
228
+ StartTemplate += `<script type="module" src="/client.js" defer="true"></script>`;
229
+ let builtHead;
230
+ if (head2.constructor.name === "AsyncFunction") {
231
+ builtHead = await head2(StartTemplate);
232
+ } else {
233
+ builtHead = head2(StartTemplate);
235
234
  }
235
+ let HTMLTemplate = renderRecursively(builtHead);
236
236
  if (serverData) {
237
237
  HTMLTemplate += serverData;
238
238
  }
239
- HTMLTemplate += "</head>";
239
+ HTMLTemplate += "";
240
240
  return HTMLTemplate;
241
241
  };
242
242
 
@@ -389,14 +389,14 @@ var generateSuitablePageElements = async (pageLocation, pageElements, metadata,
389
389
  processedPageElements,
390
390
  pageLocation
391
391
  );
392
- const template = generateHTMLTemplate({
392
+ const template = await generateHTMLTemplate({
393
393
  pageURL: path.relative(DIST_DIR, pageLocation),
394
394
  head: metadata,
395
395
  addPageScriptTag: true,
396
396
  name: pageName,
397
397
  requiredClientModules
398
398
  });
399
- const resultHTML = `<!DOCTYPE html><html>${template}${renderedPage.bodyHTML}</html>`;
399
+ const resultHTML = `<!DOCTYPE html>${template}${renderedPage.bodyHTML}`;
400
400
  return {
401
401
  objectAttributes,
402
402
  resultHTML
package/dist/global.d.ts CHANGED
@@ -28,6 +28,7 @@ declare global {
28
28
  options: Record<string, any> | Child;
29
29
  };
30
30
  type Page = (AnyBuiltElement) | (() => AnyBuiltElement) | (() => Promise<AnyBuiltElement>);
31
+ type Metadata = ((...children: Child[]) => (AnyBuiltElement)) | ((...children: Child[]) => Promise<AnyBuiltElement>);
31
32
  type ObjectAttribute<T> = T extends ObjectAttributeType.STATE ? {
32
33
  type: ObjectAttributeType;
33
34
  id: string | number;
package/dist/index.mjs CHANGED
@@ -76,7 +76,10 @@ var reactiveMap = function(template, deps) {
76
76
  const el = document.querySelector(
77
77
  `[map-id="${subject2.id}"]`
78
78
  );
79
- if (!el) throw new Error(`Couldn't find map tag with map-id=${subject2.id}`);
79
+ if (!el) {
80
+ console.error(`Couldn't find map tag with map-id=${subject2.id}`);
81
+ return;
82
+ }
80
83
  const parentElement = el.parentElement;
81
84
  const nextSibling = el.nextSibling;
82
85
  el.remove();
@@ -122,11 +125,9 @@ var reactiveMap = function(template, deps) {
122
125
  case 1 /* STATE */: {
123
126
  const { field, element, subjects, eventListener: eventListener2 } = attribute;
124
127
  const lc = field.toLowerCase();
125
- const state4 = pd[client.currentPage].stateManager;
126
128
  const fn = (event) => {
127
129
  eventListener2(event, ...subjects);
128
130
  };
129
- console.log(element);
130
131
  element[lc] = fn;
131
132
  break;
132
133
  }
package/dist/page_compiler.mjs CHANGED
@@ -160,32 +160,29 @@ var renderRecursively = (element) => {
160
160
  return returnString + element.join(", ");
161
161
  }
162
162
  returnString += `<${element.tag}`;
163
- const {
164
- tag: elementTag,
165
- options: elementOptions,
166
- children: elementChildren
167
- } = element.options;
168
- if (elementTag && elementOptions && elementChildren) {
169
- const children = element.children;
170
- element.children = [
171
- element.options,
172
- ...children
173
- ];
174
- element.options = {};
175
- for (let i = 0; i < children.length + 1; i++) {
176
- const child = element.children[i];
177
- returnString += renderRecursively(child);
178
- }
179
- returnString += `</${element.tag}>`;
180
- return returnString;
181
- }
182
163
  if (typeof element.options === "object") {
183
- for (const [attrName, attrValue] of Object.entries(element.options)) {
184
- if (typeof attrValue === "object") {
185
- throw `Attr ${attrName}, for element ${element.tag} has obj type. Got: ${JSON.stringify(element)}`;
164
+ const {
165
+ tag: elementTag,
166
+ options: elementOptions,
167
+ children: elementChildren
168
+ } = element.options;
169
+ if (elementTag !== void 0 && elementOptions !== void 0 && elementChildren !== void 0) {
170
+ const children = element.children;
171
+ element.children = [
172
+ element.options,
173
+ ...children
174
+ ];
175
+ element.options = {};
176
+ } else {
177
+ for (const [attrName, attrValue] of Object.entries(element.options)) {
178
+ if (typeof attrValue === "object") {
179
+ throw `Attr ${attrName}, for element ${element.tag} has obj type. Got: ${JSON.stringify(element, null, 2)}`;
180
+ }
181
+ returnString += ` ${attrName.toLowerCase()}="${attrValue}"`;
186
182
  }
187
- returnString += ` ${attrName.toLowerCase()}="${attrValue}"`;
188
183
  }
184
+ } else if (typeof element.options !== "object" && element.options !== void 0) {
185
+ element.children = [element.options, ...element.children || []];
189
186
  }
190
187
  if (element.children === null) {
191
188
  returnString += "/>";
@@ -212,7 +209,7 @@ var serverSideRenderPage = async (page, pathname) => {
212
209
  };
213
210
 
214
211
  // src/server/generateHTMLTemplate.ts
215
- var generateHTMLTemplate = ({
212
+ var generateHTMLTemplate = async ({
216
213
  pageURL,
217
214
  head: head2,
218
215
  serverData = null,
@@ -220,23 +217,26 @@ var generateHTMLTemplate = ({
220
217
  name,
221
218
  requiredClientModules = []
222
219
  }) => {
223
- let HTMLTemplate = `<head><meta name="viewport" content="width=device-width, initial-scale=1.0">`;
224
- HTMLTemplate += '<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"><meta charset="UTF-8">';
220
+ let StartTemplate = `<meta name="viewport" content="width=device-width, initial-scale=1.0">`;
221
+ StartTemplate += '<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"><meta charset="UTF-8">';
225
222
  for (const module of requiredClientModules) {
226
- HTMLTemplate += `<script data-module="true" src="/shipped/${module}.js" defer="true"></script>`;
223
+ StartTemplate += `<script data-module="true" src="/shipped/${module}.js" defer="true"></script>`;
227
224
  }
228
225
  if (addPageScriptTag === true) {
229
- HTMLTemplate += `<script data-tag="true" type="module" src="${pageURL === "" ? "" : "/"}${pageURL}/${name}_data.js" defer="true"></script>`;
226
+ StartTemplate += `<script data-tag="true" type="module" src="${pageURL === "" ? "" : "/"}${pageURL}/${name}_data.js" defer="true"></script>`;
230
227
  }
231
- HTMLTemplate += `<script type="module" src="/client.js" defer="true"></script>`;
232
- const builtHead = head2();
233
- for (const child of builtHead.children) {
234
- HTMLTemplate += renderRecursively(child);
228
+ StartTemplate += `<script type="module" src="/client.js" defer="true"></script>`;
229
+ let builtHead;
230
+ if (head2.constructor.name === "AsyncFunction") {
231
+ builtHead = await head2(StartTemplate);
232
+ } else {
233
+ builtHead = head2(StartTemplate);
235
234
  }
235
+ let HTMLTemplate = renderRecursively(builtHead);
236
236
  if (serverData) {
237
237
  HTMLTemplate += serverData;
238
238
  }
239
- HTMLTemplate += "</head>";
239
+ HTMLTemplate += "";
240
240
  return HTMLTemplate;
241
241
  };
242
242
 
@@ -530,14 +530,14 @@ var generateSuitablePageElements = async (pageLocation, pageElements, metadata,
530
530
  processedPageElements,
531
531
  pageLocation
532
532
  );
533
- const template = generateHTMLTemplate({
533
+ const template = await generateHTMLTemplate({
534
534
  pageURL: path.relative(DIST_DIR2, pageLocation),
535
535
  head: metadata,
536
536
  addPageScriptTag: true,
537
537
  name: pageName,
538
538
  requiredClientModules
539
539
  });
540
- const resultHTML = `<!DOCTYPE html><html>${template}${renderedPage.bodyHTML}</html>`;
540
+ const resultHTML = `<!DOCTYPE html>${template}${renderedPage.bodyHTML}`;
541
541
  const htmlLocation = path.join(pageLocation, (pageName === "page" ? "index" : pageName) + ".html");
542
542
  if (doWrite) {
543
543
  fs.writeFileSync(
package/dist/server/generateHTMLTemplate.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  export declare const generateHTMLTemplate: ({ pageURL, head, serverData, addPageScriptTag, name, requiredClientModules, }: {
2
2
  addPageScriptTag: boolean;
3
3
  pageURL: string;
4
- head: () => BuiltElement<"head">;
4
+ head: Metadata;
5
5
  serverData?: string | null;
6
6
  name: string;
7
7
  requiredClientModules: string[];
8
- }) => string;
8
+ }) => Promise<string>;
package/dist/server/generateHTMLTemplate.mjs CHANGED
@@ -154,32 +154,29 @@ var renderRecursively = (element) => {
154
154
  return returnString + element.join(", ");
155
155
  }
156
156
  returnString += `<${element.tag}`;
157
- const {
158
- tag: elementTag,
159
- options: elementOptions,
160
- children: elementChildren
161
- } = element.options;
162
- if (elementTag && elementOptions && elementChildren) {
163
- const children = element.children;
164
- element.children = [
165
- element.options,
166
- ...children
167
- ];
168
- element.options = {};
169
- for (let i = 0; i < children.length + 1; i++) {
170
- const child = element.children[i];
171
- returnString += renderRecursively(child);
172
- }
173
- returnString += `</${element.tag}>`;
174
- return returnString;
175
- }
176
157
  if (typeof element.options === "object") {
177
- for (const [attrName, attrValue] of Object.entries(element.options)) {
178
- if (typeof attrValue === "object") {
179
- throw `Attr ${attrName}, for element ${element.tag} has obj type. Got: ${JSON.stringify(element)}`;
158
+ const {
159
+ tag: elementTag,
160
+ options: elementOptions,
161
+ children: elementChildren
162
+ } = element.options;
163
+ if (elementTag !== void 0 && elementOptions !== void 0 && elementChildren !== void 0) {
164
+ const children = element.children;
165
+ element.children = [
166
+ element.options,
167
+ ...children
168
+ ];
169
+ element.options = {};
170
+ } else {
171
+ for (const [attrName, attrValue] of Object.entries(element.options)) {
172
+ if (typeof attrValue === "object") {
173
+ throw `Attr ${attrName}, for element ${element.tag} has obj type. Got: ${JSON.stringify(element, null, 2)}`;
174
+ }
175
+ returnString += ` ${attrName.toLowerCase()}="${attrValue}"`;
180
176
  }
181
- returnString += ` ${attrName.toLowerCase()}="${attrValue}"`;
182
177
  }
178
+ } else if (typeof element.options !== "object" && element.options !== void 0) {
179
+ element.children = [element.options, ...element.children || []];
183
180
  }
184
181
  if (element.children === null) {
185
182
  returnString += "/>";
@@ -194,7 +191,7 @@ var renderRecursively = (element) => {
194
191
  };
195
192
 
196
193
  // src/server/generateHTMLTemplate.ts
197
- var generateHTMLTemplate = ({
194
+ var generateHTMLTemplate = async ({
198
195
  pageURL,
199
196
  head,
200
197
  serverData = null,
@@ -202,23 +199,26 @@ var generateHTMLTemplate = ({
202
199
  name,
203
200
  requiredClientModules = []
204
201
  }) => {
205
- let HTMLTemplate = `<head><meta name="viewport" content="width=device-width, initial-scale=1.0">`;
206
- HTMLTemplate += '<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"><meta charset="UTF-8">';
202
+ let StartTemplate = `<meta name="viewport" content="width=device-width, initial-scale=1.0">`;
203
+ StartTemplate += '<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"><meta charset="UTF-8">';
207
204
  for (const module of requiredClientModules) {
208
- HTMLTemplate += `<script data-module="true" src="/shipped/${module}.js" defer="true"></script>`;
205
+ StartTemplate += `<script data-module="true" src="/shipped/${module}.js" defer="true"></script>`;
209
206
  }
210
207
  if (addPageScriptTag === true) {
211
- HTMLTemplate += `<script data-tag="true" type="module" src="${pageURL === "" ? "" : "/"}${pageURL}/${name}_data.js" defer="true"></script>`;
208
+ StartTemplate += `<script data-tag="true" type="module" src="${pageURL === "" ? "" : "/"}${pageURL}/${name}_data.js" defer="true"></script>`;
212
209
  }
213
- HTMLTemplate += `<script type="module" src="/client.js" defer="true"></script>`;
214
- const builtHead = head();
215
- for (const child of builtHead.children) {
216
- HTMLTemplate += renderRecursively(child);
210
+ StartTemplate += `<script type="module" src="/client.js" defer="true"></script>`;
211
+ let builtHead;
212
+ if (head.constructor.name === "AsyncFunction") {
213
+ builtHead = await head(StartTemplate);
214
+ } else {
215
+ builtHead = head(StartTemplate);
217
216
  }
217
+ let HTMLTemplate = renderRecursively(builtHead);
218
218
  if (serverData) {
219
219
  HTMLTemplate += serverData;
220
220
  }
221
- HTMLTemplate += "</head>";
221
+ HTMLTemplate += "";
222
222
  return HTMLTemplate;
223
223
  };
224
224
  export {
package/dist/server/render.mjs CHANGED
@@ -154,32 +154,29 @@ var renderRecursively = (element) => {
154
154
  return returnString + element.join(", ");
155
155
  }
156
156
  returnString += `<${element.tag}`;
157
- const {
158
- tag: elementTag,
159
- options: elementOptions,
160
- children: elementChildren
161
- } = element.options;
162
- if (elementTag && elementOptions && elementChildren) {
163
- const children = element.children;
164
- element.children = [
165
- element.options,
166
- ...children
167
- ];
168
- element.options = {};
169
- for (let i = 0; i < children.length + 1; i++) {
170
- const child = element.children[i];
171
- returnString += renderRecursively(child);
172
- }
173
- returnString += `</${element.tag}>`;
174
- return returnString;
175
- }
176
157
  if (typeof element.options === "object") {
177
- for (const [attrName, attrValue] of Object.entries(element.options)) {
178
- if (typeof attrValue === "object") {
179
- throw `Attr ${attrName}, for element ${element.tag} has obj type. Got: ${JSON.stringify(element)}`;
158
+ const {
159
+ tag: elementTag,
160
+ options: elementOptions,
161
+ children: elementChildren
162
+ } = element.options;
163
+ if (elementTag !== void 0 && elementOptions !== void 0 && elementChildren !== void 0) {
164
+ const children = element.children;
165
+ element.children = [
166
+ element.options,
167
+ ...children
168
+ ];
169
+ element.options = {};
170
+ } else {
171
+ for (const [attrName, attrValue] of Object.entries(element.options)) {
172
+ if (typeof attrValue === "object") {
173
+ throw `Attr ${attrName}, for element ${element.tag} has obj type. Got: ${JSON.stringify(element, null, 2)}`;
174
+ }
175
+ returnString += ` ${attrName.toLowerCase()}="${attrValue}"`;
180
176
  }
181
- returnString += ` ${attrName.toLowerCase()}="${attrValue}"`;
182
177
  }
178
+ } else if (typeof element.options !== "object" && element.options !== void 0) {
179
+ element.children = [element.options, ...element.children || []];
183
180
  }
184
181
  if (element.children === null) {
185
182
  returnString += "/>";
package/dist/server/server.mjs CHANGED
@@ -160,32 +160,29 @@ var renderRecursively = (element) => {
160
160
  return returnString + element.join(", ");
161
161
  }
162
162
  returnString += `<${element.tag}`;
163
- const {
164
- tag: elementTag,
165
- options: elementOptions,
166
- children: elementChildren
167
- } = element.options;
168
- if (elementTag && elementOptions && elementChildren) {
169
- const children = element.children;
170
- element.children = [
171
- element.options,
172
- ...children
173
- ];
174
- element.options = {};
175
- for (let i = 0; i < children.length + 1; i++) {
176
- const child = element.children[i];
177
- returnString += renderRecursively(child);
178
- }
179
- returnString += `</${element.tag}>`;
180
- return returnString;
181
- }
182
163
  if (typeof element.options === "object") {
183
- for (const [attrName, attrValue] of Object.entries(element.options)) {
184
- if (typeof attrValue === "object") {
185
- throw `Attr ${attrName}, for element ${element.tag} has obj type. Got: ${JSON.stringify(element)}`;
164
+ const {
165
+ tag: elementTag,
166
+ options: elementOptions,
167
+ children: elementChildren
168
+ } = element.options;
169
+ if (elementTag !== void 0 && elementOptions !== void 0 && elementChildren !== void 0) {
170
+ const children = element.children;
171
+ element.children = [
172
+ element.options,
173
+ ...children
174
+ ];
175
+ element.options = {};
176
+ } else {
177
+ for (const [attrName, attrValue] of Object.entries(element.options)) {
178
+ if (typeof attrValue === "object") {
179
+ throw `Attr ${attrName}, for element ${element.tag} has obj type. Got: ${JSON.stringify(element, null, 2)}`;
180
+ }
181
+ returnString += ` ${attrName.toLowerCase()}="${attrValue}"`;
186
182
  }
187
- returnString += ` ${attrName.toLowerCase()}="${attrValue}"`;
188
183
  }
184
+ } else if (typeof element.options !== "object" && element.options !== void 0) {
185
+ element.children = [element.options, ...element.children || []];
189
186
  }
190
187
  if (element.children === null) {
191
188
  returnString += "/>";
@@ -212,7 +209,7 @@ var serverSideRenderPage = async (page, pathname) => {
212
209
  };
213
210
 
214
211
  // src/server/generateHTMLTemplate.ts
215
- var generateHTMLTemplate = ({
212
+ var generateHTMLTemplate = async ({
216
213
  pageURL,
217
214
  head: head2,
218
215
  serverData = null,
@@ -220,23 +217,26 @@ var generateHTMLTemplate = ({
220
217
  name,
221
218
  requiredClientModules = []
222
219
  }) => {
223
- let HTMLTemplate = `<head><meta name="viewport" content="width=device-width, initial-scale=1.0">`;
224
- HTMLTemplate += '<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"><meta charset="UTF-8">';
220
+ let StartTemplate = `<meta name="viewport" content="width=device-width, initial-scale=1.0">`;
221
+ StartTemplate += '<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"><meta charset="UTF-8">';
225
222
  for (const module of requiredClientModules) {
226
- HTMLTemplate += `<script data-module="true" src="/shipped/${module}.js" defer="true"></script>`;
223
+ StartTemplate += `<script data-module="true" src="/shipped/${module}.js" defer="true"></script>`;
227
224
  }
228
225
  if (addPageScriptTag === true) {
229
- HTMLTemplate += `<script data-tag="true" type="module" src="${pageURL === "" ? "" : "/"}${pageURL}/${name}_data.js" defer="true"></script>`;
226
+ StartTemplate += `<script data-tag="true" type="module" src="${pageURL === "" ? "" : "/"}${pageURL}/${name}_data.js" defer="true"></script>`;
230
227
  }
231
- HTMLTemplate += `<script type="module" src="/client.js" defer="true"></script>`;
232
- const builtHead = head2();
233
- for (const child of builtHead.children) {
234
- HTMLTemplate += renderRecursively(child);
228
+ StartTemplate += `<script type="module" src="/client.js" defer="true"></script>`;
229
+ let builtHead;
230
+ if (head2.constructor.name === "AsyncFunction") {
231
+ builtHead = await head2(StartTemplate);
232
+ } else {
233
+ builtHead = head2(StartTemplate);
235
234
  }
235
+ let HTMLTemplate = renderRecursively(builtHead);
236
236
  if (serverData) {
237
237
  HTMLTemplate += serverData;
238
238
  }
239
- HTMLTemplate += "</head>";
239
+ HTMLTemplate += "";
240
240
  return HTMLTemplate;
241
241
  };
242
242
 
@@ -389,14 +389,14 @@ var generateSuitablePageElements = async (pageLocation, pageElements, metadata,
389
389
  processedPageElements,
390
390
  pageLocation
391
391
  );
392
- const template = generateHTMLTemplate({
392
+ const template = await generateHTMLTemplate({
393
393
  pageURL: path.relative(DIST_DIR, pageLocation),
394
394
  head: metadata,
395
395
  addPageScriptTag: true,
396
396
  name: pageName,
397
397
  requiredClientModules
398
398
  });
399
- const resultHTML = `<!DOCTYPE html><html>${template}${renderedPage.bodyHTML}</html>`;
399
+ const resultHTML = `<!DOCTYPE html>${template}${renderedPage.bodyHTML}`;
400
400
  return {
401
401
  objectAttributes,
402
402
  resultHTML
package/dist/server/state.mjs CHANGED
@@ -47,7 +47,10 @@ var reactiveMap = function(template, deps) {
47
47
  const el = document.querySelector(
48
48
  `[map-id="${subject2.id}"]`
49
49
  );
50
- if (!el) throw new Error(`Couldn't find map tag with map-id=${subject2.id}`);
50
+ if (!el) {
51
+ console.error(`Couldn't find map tag with map-id=${subject2.id}`);
52
+ return;
53
+ }
51
54
  const parentElement = el.parentElement;
52
55
  const nextSibling = el.nextSibling;
53
56
  el.remove();
@@ -93,11 +96,9 @@ var reactiveMap = function(template, deps) {
93
96
  case 1 /* STATE */: {
94
97
  const { field, element, subjects, eventListener: eventListener2 } = attribute;
95
98
  const lc = field.toLowerCase();
96
- const state4 = pd[client.currentPage].stateManager;
97
99
  const fn = (event) => {
98
100
  eventListener2(event, ...subjects);
99
101
  };
100
- console.log(element);
101
102
  element[lc] = fn;
102
103
  break;
103
104
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "elegance-js",
3
- "version": "1.14.0",
3
+ "version": "1.15.0",
4
4
  "description": "Web-Framework",
5
5
  "type": "module",
6
6
  "bin": {
package/scripts/bootstrap.js CHANGED
@@ -7,7 +7,7 @@ import { execSync } from "node:child_process";
7
7
 
8
8
  execSync("npm install tailwindcss @tailwindcss/cli");
9
9
 
10
- const dirs = ["pages", "public"];
10
+ const dirs = ["pages", "public", "pages/components"];
11
11
  dirs.forEach((dir) => {
12
12
  if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
13
13
  });
@@ -58,6 +58,17 @@ loadHook(
58
58
  },
59
59
  )
60
60
 
61
+ /*
62
+ This variable lets you determine whether your page is:
63
+ 1. Built at compile time (non dynamic page).
64
+ Meaning, the page is turned into HTML, CSS and JS *once*, and then served statically.
65
+
66
+ 2. Built per-request (dynamic page).
67
+ Meaning the page is *transpiled into JS*, and then every time someone requests the page,
68
+ it is built and then served.
69
+ */
70
+ export const isDynamicPage = true;
71
+
61
72
  /*
62
73
  State can also be an array!
63
74
  In which case, the reactiveMap() method is added onto the state.
@@ -114,7 +125,7 @@ export const page: Page = async () => {
114
125
  h1 ({
115
126
  class: "text-4xl font-inter font-semibold bg-clip-text text-transparent bg-gradient-to-tl from-[#EEB844] to-[#FF4FED] oveflow-clip",
116
127
  },
117
- `Welcome to ${pageName.value}!`,
128
+ \`Welcome to \${pageName.value}!\`,
118
129
  ),
119
130
 
120
131
  ReactiveMap(),
@@ -201,15 +212,17 @@ export const page: Page = async () => {
201
212
  In it, you should do things like link your stylesheets,
202
213
  set page titles, all that goodness.
203
214
  */
204
- export const metadata = () => head ({},
215
+ export const metadata: Metadata = (...children) => html ({
216
+ lang: "en",
217
+ },
205
218
  link ({
206
219
  rel: "stylesheet",
207
220
  href: "/index.css",
208
221
  }),
209
222
 
210
- title ({},
211
- "Elegance.JS Demo"
212
- ),
223
+ title ("Elegance.JS Demo"),
224
+
225
+ ...children,
213
226
  )
214
227
 
215
228
  `;