@microsoft/fast-html 1.0.0-alpha.31 → 1.0.0-alpha.32

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 (51) hide show
  1. package/dist/dts/components/observer-map.d.ts +1 -1
  2. package/dist/dts/components/schema.d.ts +1 -1
  3. package/dist/dts/components/utilities.d.ts +20 -18
  4. package/dist/esm/components/element.js +0 -5
  5. package/dist/esm/components/utilities.js +116 -71
  6. package/package.json +17 -32
  7. package/dist/dts/fixtures/attribute/attribute.spec.d.ts +0 -1
  8. package/dist/dts/fixtures/attribute/main.d.ts +0 -1
  9. package/dist/dts/fixtures/binding/binding.spec.d.ts +0 -1
  10. package/dist/dts/fixtures/binding/main.d.ts +0 -1
  11. package/dist/dts/fixtures/children/children.spec.d.ts +0 -1
  12. package/dist/dts/fixtures/children/main.d.ts +0 -1
  13. package/dist/dts/fixtures/dot-syntax/dot-syntax.spec.d.ts +0 -1
  14. package/dist/dts/fixtures/dot-syntax/main.d.ts +0 -1
  15. package/dist/dts/fixtures/event/event.spec.d.ts +0 -1
  16. package/dist/dts/fixtures/event/main.d.ts +0 -1
  17. package/dist/dts/fixtures/lifecycle-callbacks/lifecycle-callbacks.spec.d.ts +0 -1
  18. package/dist/dts/fixtures/lifecycle-callbacks/main.d.ts +0 -5
  19. package/dist/dts/fixtures/observer-map/main.d.ts +0 -1
  20. package/dist/dts/fixtures/observer-map/observer-map.spec.d.ts +0 -1
  21. package/dist/dts/fixtures/ref/main.d.ts +0 -1
  22. package/dist/dts/fixtures/ref/ref.spec.d.ts +0 -1
  23. package/dist/dts/fixtures/repeat/main.d.ts +0 -1
  24. package/dist/dts/fixtures/repeat/repeat.spec.d.ts +0 -1
  25. package/dist/dts/fixtures/slotted/main.d.ts +0 -1
  26. package/dist/dts/fixtures/slotted/slotted.spec.d.ts +0 -1
  27. package/dist/dts/fixtures/when/main.d.ts +0 -1
  28. package/dist/dts/fixtures/when/when.spec.d.ts +0 -1
  29. package/dist/esm/fixtures/attribute/attribute.spec.js +0 -23
  30. package/dist/esm/fixtures/attribute/main.js +0 -20
  31. package/dist/esm/fixtures/binding/binding.spec.js +0 -23
  32. package/dist/esm/fixtures/binding/main.js +0 -30
  33. package/dist/esm/fixtures/children/children.spec.js +0 -37
  34. package/dist/esm/fixtures/children/main.js +0 -25
  35. package/dist/esm/fixtures/dot-syntax/dot-syntax.spec.js +0 -116
  36. package/dist/esm/fixtures/dot-syntax/main.js +0 -42
  37. package/dist/esm/fixtures/event/event.spec.js +0 -35
  38. package/dist/esm/fixtures/event/main.js +0 -32
  39. package/dist/esm/fixtures/lifecycle-callbacks/lifecycle-callbacks.spec.js +0 -166
  40. package/dist/esm/fixtures/lifecycle-callbacks/main.js +0 -126
  41. package/dist/esm/fixtures/observer-map/main.js +0 -375
  42. package/dist/esm/fixtures/observer-map/observer-map.spec.js +0 -251
  43. package/dist/esm/fixtures/ref/main.js +0 -15
  44. package/dist/esm/fixtures/ref/ref.spec.js +0 -9
  45. package/dist/esm/fixtures/repeat/main.js +0 -44
  46. package/dist/esm/fixtures/repeat/repeat.spec.js +0 -36
  47. package/dist/esm/fixtures/slotted/main.js +0 -33
  48. package/dist/esm/fixtures/slotted/slotted.spec.js +0 -24
  49. package/dist/esm/fixtures/when/main.js +0 -156
  50. package/dist/esm/fixtures/when/when.spec.js +0 -82
  51. package/dist/esm/tsconfig.tsbuildinfo +0 -1
@@ -1,4 +1,4 @@
1
- import { Schema } from "./schema.js";
1
+ import type { Schema } from "./schema.js";
2
2
  /**
3
3
  * ObserverMap provides functionality for caching binding paths, extracting root properties,
4
4
  * and defining observable properties on class prototypes
@@ -1,4 +1,4 @@
1
- import { type ChildrenMap } from "./utilities.js";
1
+ import type { ChildrenMap } from "./utilities.js";
2
2
  type FastContextMetaData = "$fast_context";
3
3
  type FastContextsMetaData = "$fast_parent_contexts";
4
4
  export interface JSONSchemaDefinition extends JSONSchemaCommon {
@@ -1,4 +1,4 @@
1
- import { JSONSchema, JSONSchemaDefinition, Schema } from "./schema.js";
1
+ import { type JSONSchema, type JSONSchemaDefinition, Schema } from "./schema.js";
2
2
  type BehaviorType = "dataBinding" | "templateDirective";
3
3
  type TemplateDirective = "when" | "repeat";
4
4
  export type AttributeDirective = "children" | "slotted" | "ref";
@@ -40,6 +40,24 @@ export interface ChildrenMap {
40
40
  customElementName: string;
41
41
  attributeName: string;
42
42
  }
43
+ declare const LogicalOperator: {
44
+ AND: string;
45
+ OR: string;
46
+ };
47
+ type LogicalOperator = (typeof LogicalOperator)[keyof typeof LogicalOperator];
48
+ declare const Operator: {
49
+ readonly ACCESS: "access";
50
+ readonly EQUALS: "==";
51
+ readonly GREATER_THAN: ">";
52
+ readonly GREATER_THAN_OR_EQUALS: ">=";
53
+ readonly LESS_THAN: "<";
54
+ readonly LESS_THAN_OR_EQUALS: "<=";
55
+ readonly NOT: "!";
56
+ readonly NOT_EQUALS: "!=";
57
+ readonly AND: string;
58
+ readonly OR: string;
59
+ };
60
+ type Operator = (typeof Operator)[keyof typeof Operator];
43
61
  /**
44
62
  * Get the index of the next matching tag
45
63
  * @param openingTagStartSlice - The slice starting from the opening tag
@@ -71,22 +89,6 @@ export declare function expressionResolver(rootPropertyName: string | null, expr
71
89
  * @returns A Set containing all unique paths found in the expression chain
72
90
  */
73
91
  export declare function extractPathsFromChainedExpression(chainedExpression: ChainedExpression): Set<string>;
74
- /**
75
- * Available operators include:
76
- *
77
- * - access (no operator)
78
- * - not (!)
79
- * - equals (==)
80
- * - not equal (!=)
81
- * - greater than or equal (>=)
82
- * - greater than (>)
83
- * - less than or equal (<=)
84
- * - less than (<)
85
- * - or (||)
86
- * - and (&&) and the HTML character entity (&amp;&amp;)
87
- */
88
- type Operator = "access" | "!" | "==" | "!=" | ">=" | ">" | "<=" | "<";
89
- type ChainingOperator = "||" | "&&" | "&amp;&amp;";
90
92
  interface Expression {
91
93
  operator: Operator;
92
94
  left: string;
@@ -95,7 +97,7 @@ interface Expression {
95
97
  rightIsValue: boolean | null;
96
98
  }
97
99
  export interface ChainedExpression {
98
- operator?: ChainingOperator;
100
+ operator?: LogicalOperator;
99
101
  expression: Expression;
100
102
  next?: ChainedExpression;
101
103
  }
@@ -13,16 +13,11 @@ export function RenderableFASTElement(BaseCtor) {
13
13
  var _a, _b;
14
14
  super(...args);
15
15
  this.deferHydration = true;
16
- this.needsHydration = true;
17
- if (this.$fastController.hasExistingShadowRoot) {
18
- this.toggleAttribute("defer-hydration", true);
19
- }
20
16
  ((_b = (_a = this.prepare) === null || _a === void 0 ? void 0 : _a.call(this)) !== null && _b !== void 0 ? _b : Promise.resolve()).then(() => {
21
17
  this.deferHydration = false;
22
18
  });
23
19
  }
24
20
  };
25
21
  attr({ mode: "boolean", attribute: "defer-hydration" })(C.prototype, "deferHydration");
26
- attr({ mode: "boolean", attribute: "defer-hydration" })(C.prototype, "needsHydration");
27
22
  return C;
28
23
  }
@@ -14,6 +14,21 @@ const startInnerHTMLDiv = `<div :innerHTML="{{`;
14
14
  const startInnerHTMLDivLength = startInnerHTMLDiv.length;
15
15
  const endInnerHTMLDiv = `}}"></div>`;
16
16
  const endInnerHTMLDivLength = endInnerHTMLDiv.length;
17
+ const LogicalOperator = {
18
+ AND: "&&",
19
+ OR: "||",
20
+ };
21
+ const ComparisonOperator = {
22
+ ACCESS: "access",
23
+ EQUALS: "==",
24
+ GREATER_THAN: ">",
25
+ GREATER_THAN_OR_EQUALS: ">=",
26
+ LESS_THAN: "<",
27
+ LESS_THAN_OR_EQUALS: "<=",
28
+ NOT: "!",
29
+ NOT_EQUALS: "!=",
30
+ };
31
+ const Operator = Object.assign(Object.assign({}, LogicalOperator), ComparisonOperator);
17
32
  /**
18
33
  * A map of proxied objects
19
34
  */
@@ -307,6 +322,22 @@ export function bindingResolver(previousString, rootPropertyName, path, parentCo
307
322
  return pathResolver(path, currentContext, level, schema.getSchema(rootPropertyName));
308
323
  }
309
324
  export function expressionResolver(rootPropertyName, expression, parentContext, level, schema) {
325
+ // Extract all paths from the expression and add them to the schema
326
+ if (rootPropertyName !== null) {
327
+ const paths = extractPathsFromChainedExpression(expression);
328
+ paths.forEach(path => {
329
+ schema.addPath({
330
+ pathConfig: {
331
+ type: "access",
332
+ currentContext: parentContext,
333
+ parentContext: null,
334
+ path,
335
+ },
336
+ rootPropertyName,
337
+ childrenMap: null,
338
+ });
339
+ });
340
+ }
310
341
  return (x, c) => resolveChainedExpression(x, c, level, parentContext || null, expression, schema.getSchema(rootPropertyName));
311
342
  }
312
343
  /**
@@ -384,17 +415,19 @@ function evaluatePartsInExpressionChain(parts, operator) {
384
415
  * @returns - A configuration object containing information about the expression
385
416
  */
386
417
  export function getExpressionChain(value) {
418
+ // Decode HTML entities in the expression value first
419
+ const decodedValue = decodeExpressionOperators(value);
387
420
  // Handle operator precedence: || has lower precedence than &&
388
421
  // First, split by || (lowest precedence)
389
- const orParts = value.split(" || ");
422
+ const orParts = decodedValue.split(/\s*\|\|\s*/);
390
423
  if (orParts.length > 1) {
391
- const firstPart = evaluatePartsInExpressionChain(orParts, "||");
424
+ const firstPart = evaluatePartsInExpressionChain(orParts, Operator.OR);
392
425
  if (firstPart) {
393
426
  return firstPart;
394
427
  }
395
428
  }
396
429
  // If no ||, check for && (higher precedence)
397
- const andParts = value.split(" && ");
430
+ const andParts = decodedValue.split(/\s*&&\s*/);
398
431
  if (andParts.length > 1) {
399
432
  // Process each part recursively and chain them with &&
400
433
  const firstPart = evaluatePartsInExpressionChain(andParts, "&&");
@@ -402,19 +435,10 @@ export function getExpressionChain(value) {
402
435
  return firstPart;
403
436
  }
404
437
  }
405
- // Handle HTML entity version of &&
406
- const ampParts = value.split(" &amp;&amp; ");
407
- if (ampParts.length > 1) {
408
- // Process each part recursively and chain them with &amp;&amp;
409
- const firstPart = evaluatePartsInExpressionChain(ampParts, "&amp;&amp;");
410
- if (firstPart) {
411
- return firstPart;
412
- }
413
- }
414
438
  // No chaining operators found, create a single expression
415
- if (value.trim()) {
439
+ if (decodedValue.trim()) {
416
440
  return {
417
- expression: getExpression(value.trim()),
441
+ expression: getExpression(decodedValue.trim()),
418
442
  };
419
443
  }
420
444
  return void 0;
@@ -425,18 +449,18 @@ export function getExpressionChain(value) {
425
449
  * @returns An Expression object containing the operator, operands, and whether operands are literal values
426
450
  */
427
451
  function getExpression(value) {
428
- if (value[0] === "!") {
452
+ if (value[0] === Operator.NOT) {
429
453
  const left = value.slice(1);
430
454
  const operandValue = isOperandValue(left);
431
455
  return {
432
- operator: "!",
456
+ operator: Operator.NOT,
433
457
  left,
434
458
  leftIsValue: operandValue.isValue,
435
459
  right: null,
436
460
  rightIsValue: null,
437
461
  };
438
462
  }
439
- const split = value.split(" ");
463
+ const split = value.split(/\s*([=!]=|[><]=?)\s*/);
440
464
  if (split.length === 3) {
441
465
  const operator = split[1];
442
466
  const right = split[2];
@@ -452,13 +476,26 @@ function getExpression(value) {
452
476
  };
453
477
  }
454
478
  return {
455
- operator: "access",
479
+ operator: Operator.ACCESS,
456
480
  left: value,
457
481
  leftIsValue: false,
458
482
  right: null,
459
483
  rightIsValue: null,
460
484
  };
461
485
  }
486
+ /**
487
+ * Decodes HTML entities within expression strings only (for operators like &&, <, >)
488
+ * This is safer than decoding the entire template as it preserves HTML-encoded content
489
+ * and only decodes operators needed for expression evaluation
490
+ * @param expression - The expression string to decode
491
+ * @returns The expression with operators decoded
492
+ */
493
+ function decodeExpressionOperators(expression) {
494
+ return expression
495
+ .replace(/&amp;&amp;/g, Operator.AND)
496
+ .replace(/&lt;/g, Operator.LESS_THAN)
497
+ .replace(/&gt;/g, Operator.GREATER_THAN);
498
+ }
462
499
  /**
463
500
  * Resolve a single expression by evaluating its operator and operands
464
501
  * @param x - The current data context
@@ -471,41 +508,36 @@ function getExpression(value) {
471
508
  */
472
509
  function resolveExpression(x, c, level, contextPath, expression, rootSchema) {
473
510
  const { operator, left, right, rightIsValue } = expression;
511
+ const resolvedLeft = pathResolver(left, contextPath, level, rootSchema)(x, c);
512
+ let resolvedRight = right;
513
+ if (!rightIsValue && typeof right === "string") {
514
+ resolvedRight = pathResolver(right, contextPath, level, rootSchema)(x, c);
515
+ }
474
516
  switch (operator) {
475
- case "!":
476
- return !pathResolver(left, contextPath, level, rootSchema)(x, c);
477
- case "==":
478
- return (pathResolver(left, contextPath, level, rootSchema)(x, c) ==
479
- (rightIsValue
480
- ? right
481
- : pathResolver(right, contextPath, level, rootSchema)(x, c)));
482
- case "!=":
483
- return (pathResolver(left, contextPath, level, rootSchema)(x, c) !=
484
- (rightIsValue
485
- ? right
486
- : pathResolver(right, contextPath, level, rootSchema)(x, c)));
487
- case ">=":
488
- return (pathResolver(left, contextPath, level, rootSchema)(x, c) >=
489
- (rightIsValue
490
- ? right
491
- : pathResolver(right, contextPath, level, rootSchema)(x, c)));
492
- case ">":
493
- return (pathResolver(left, contextPath, level, rootSchema)(x, c) >
494
- (rightIsValue
495
- ? right
496
- : pathResolver(right, contextPath, level, rootSchema)(x, c)));
497
- case "<=":
498
- return (pathResolver(left, contextPath, level, rootSchema)(x, c) <=
499
- (rightIsValue
500
- ? right
501
- : pathResolver(right, contextPath, level, rootSchema)(x, c)));
502
- case "<":
503
- return (pathResolver(left, contextPath, level, rootSchema)(x, c) <
504
- (rightIsValue
505
- ? right
506
- : pathResolver(right, contextPath, level, rootSchema)(x, c)));
507
- default:
508
- return pathResolver(left, contextPath, level, rootSchema)(x, c);
517
+ case Operator.NOT: {
518
+ return !resolvedLeft;
519
+ }
520
+ case Operator.EQUALS: {
521
+ return resolvedLeft == resolvedRight;
522
+ }
523
+ case Operator.NOT_EQUALS: {
524
+ return resolvedLeft != resolvedRight;
525
+ }
526
+ case Operator.GREATER_THAN_OR_EQUALS: {
527
+ return resolvedLeft >= resolvedRight;
528
+ }
529
+ case Operator.GREATER_THAN: {
530
+ return resolvedLeft > resolvedRight;
531
+ }
532
+ case Operator.LESS_THAN_OR_EQUALS: {
533
+ return resolvedLeft <= resolvedRight;
534
+ }
535
+ case Operator.LESS_THAN: {
536
+ return resolvedLeft < resolvedRight;
537
+ }
538
+ default: {
539
+ return resolvedLeft;
540
+ }
509
541
  }
510
542
  }
511
543
  /**
@@ -519,18 +551,20 @@ function resolveExpression(x, c, level, contextPath, expression, rootSchema) {
519
551
  * @returns The resolved boolean result of the chained expression
520
552
  */
521
553
  function resolveChainedExpression(x, c, level, contextPath, expression, rootSchema) {
522
- if (expression.next) {
523
- switch (expression.next.operator) {
524
- case "&&":
525
- case "&amp;&amp;":
526
- return (resolveExpression(x, c, level, contextPath, expression.expression, rootSchema) &&
527
- resolveChainedExpression(x, c, level, contextPath, expression.next, rootSchema));
528
- case "||":
529
- return (resolveExpression(x, c, level, contextPath, expression.expression, rootSchema) ||
530
- resolveChainedExpression(x, c, level, contextPath, expression.next, rootSchema));
554
+ const { expression: expr, next } = expression;
555
+ const resolvedLeft = resolveExpression(x, c, level, contextPath, expr, rootSchema);
556
+ if (next) {
557
+ const resolvedRight = resolveChainedExpression(x, c, level, contextPath, next, rootSchema);
558
+ switch (next.operator) {
559
+ case Operator.AND: {
560
+ return resolvedLeft && resolvedRight;
561
+ }
562
+ case Operator.OR: {
563
+ return resolvedLeft || resolvedRight;
564
+ }
531
565
  }
532
566
  }
533
- return resolveExpression(x, c, level, contextPath, expression.expression, rootSchema);
567
+ return resolvedLeft;
534
568
  }
535
569
  /**
536
570
  * This is the transform utility for rationalizing declarative HTML syntax
@@ -625,7 +659,7 @@ function getSchemaProperties(schema) {
625
659
  * @param rootSchema - The root schema for the entire data structure
626
660
  * @returns The array with observable properties and change notifications
627
661
  */
628
- function assignObservablesToArray(proxiedData, schema, rootSchema) {
662
+ function assignObservablesToArray(proxiedData, schema, rootSchema, target, rootProperty) {
629
663
  const data = proxiedData.map((item) => {
630
664
  const originalItem = Object.assign({}, item);
631
665
  assignProxyToItemsInArray(item, originalItem, schema, rootSchema);
@@ -639,8 +673,10 @@ function assignObservablesToArray(proxiedData, schema, rootSchema) {
639
673
  const item = subject[arg.index + i];
640
674
  const originalItem = Object.assign({}, item);
641
675
  assignProxyToItemsInArray(item, originalItem, schema, rootSchema);
642
- return Object.assign(item, originalItem);
676
+ Object.assign(item, originalItem);
643
677
  }
678
+ // Notify observers of the target object's root property
679
+ Observable.notify(target, rootProperty);
644
680
  }
645
681
  });
646
682
  },
@@ -714,11 +750,11 @@ export function assignObservables(schema, rootSchema, data, target, rootProperty
714
750
  case "array": {
715
751
  const context = findDef(schema);
716
752
  if (context) {
717
- proxiedData = assignObservablesToArray(proxiedData, (_a = rootSchema[defsPropertyName]) === null || _a === void 0 ? void 0 : _a[context], rootSchema);
753
+ proxiedData = assignObservablesToArray(proxiedData, (_a = rootSchema[defsPropertyName]) === null || _a === void 0 ? void 0 : _a[context], rootSchema, target, rootProperty);
718
754
  if (!observedArraysMap.has(proxiedData)) {
719
755
  observedArraysMap.set(proxiedData, assignSubscribeToObservableArray(proxiedData, () => {
720
756
  var _a;
721
- return assignObservablesToArray(proxiedData, (_a = rootSchema[defsPropertyName]) === null || _a === void 0 ? void 0 : _a[context], rootSchema);
757
+ return assignObservablesToArray(proxiedData, (_a = rootSchema[defsPropertyName]) === null || _a === void 0 ? void 0 : _a[context], rootSchema, target, rootProperty);
722
758
  }));
723
759
  }
724
760
  }
@@ -741,20 +777,29 @@ export function assignObservables(schema, rootSchema, data, target, rootProperty
741
777
  function assignProxyToItemsInArray(proxiableItem, originalItem, schema, rootSchema) {
742
778
  const schemaProperties = getSchemaProperties(schema);
743
779
  getObjectProperties(proxiableItem, schemaProperties).forEach(key => {
744
- Observable.defineProperty(proxiableItem, key);
780
+ // Initialize the property as undefined if it doesn't exist
781
+ if (!(key in originalItem)) {
782
+ originalItem[key] = undefined;
783
+ }
784
+ // Assign the proxy first
745
785
  originalItem[key] = assignProxyToItemsInObject(proxiableItem, key, originalItem[key], schemaProperties[key], rootSchema);
786
+ // Then make the property observable
787
+ Observable.defineProperty(proxiableItem, key);
746
788
  });
747
789
  }
748
790
  /**
749
791
  * Get an objects properties as agreed upon between the schema and data
750
792
  * @param data - The data
751
793
  * @param schemaProperties - The schema properties
752
- * @returns A list of strings the schema properties enumerate and is present in the data
794
+ * @returns A list of strings the schema properties enumerate (includes properties not present in data)
753
795
  */
754
796
  function getObjectProperties(data, schemaProperties) {
755
797
  const dataKeys = Object.keys(data);
756
798
  const schemaPropertyKeys = Object.keys(schemaProperties !== null && schemaProperties !== void 0 ? schemaProperties : {});
757
- return dataKeys.filter(function (key) {
799
+ // Return all schema properties that are either in the data or in the schema
800
+ // This ensures properties defined in schema but missing from data get initialized
801
+ const allKeys = new Set([...dataKeys, ...schemaPropertyKeys]);
802
+ return Array.from(allKeys).filter(function (key) {
758
803
  return schemaPropertyKeys.indexOf(key) !== -1;
759
804
  });
760
805
  }
@@ -787,9 +832,9 @@ function assignProxyToItemsInObject(target, rootProperty, data, schema, rootSche
787
832
  if (context) {
788
833
  const definition = (_a = rootSchema[defsPropertyName]) === null || _a === void 0 ? void 0 : _a[context];
789
834
  if ((definition === null || definition === void 0 ? void 0 : definition.type) === "object") {
790
- proxiedData = assignObservablesToArray(proxiedData, definition, rootSchema);
835
+ proxiedData = assignObservablesToArray(proxiedData, definition, rootSchema, target, rootProperty);
791
836
  if (!observedArraysMap.has(proxiedData)) {
792
- observedArraysMap.set(proxiedData, assignObservablesToArray(proxiedData, definition, rootSchema));
837
+ observedArraysMap.set(proxiedData, assignObservablesToArray(proxiedData, definition, rootSchema, target, rootProperty));
793
838
  }
794
839
  }
795
840
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@microsoft/fast-html",
3
- "version": "1.0.0-alpha.31",
3
+ "version": "1.0.0-alpha.32",
4
4
  "type": "module",
5
5
  "author": {
6
6
  "name": "Microsoft",
@@ -21,35 +21,25 @@
21
21
  "./rules/*.yml"
22
22
  ],
23
23
  "scripts": {
24
- "clean": "tsc -b --clean src",
25
- "clean:dist": "node ../../../build/clean.js dist",
26
- "build": "tsc -b src && npm run doc",
27
- "build:attribute": "webpack --config ./src/fixtures/attribute/webpack.config.js",
28
- "build:event": "webpack --config ./src/fixtures/event/webpack.config.js",
29
- "build:binding": "webpack --config ./src/fixtures/binding/webpack.config.js",
30
- "build:children": "webpack --config ./src/fixtures/children/webpack.config.js",
31
- "build:dot-syntax": "webpack --config ./src/fixtures/dot-syntax/webpack.config.js",
32
- "build:when": "webpack --config ./src/fixtures/when/webpack.config.js",
33
- "build:ref": "webpack --config ./src/fixtures/ref/webpack.config.js",
34
- "build:repeat": "webpack --config ./src/fixtures/repeat/webpack.config.js",
35
- "build:observer-map": "webpack --config ./src/fixtures/observer-map/webpack.config.js",
36
- "build:slotted": "webpack --config ./src/fixtures/slotted/webpack.config.js",
37
- "build:lifecycle-callbacks": "webpack --config ./src/fixtures/lifecycle-callbacks/webpack.config.js",
38
- "build-app": "npm run build:attribute && npm run build:dot-syntax && npm run build:event && npm run build:children && npm run build:binding && npm run build:when && npm run build:ref && npm run build:repeat && npm run build:observer-map && npm run build:slotted && npm run build:lifecycle-callbacks",
39
- "build-server": "tsc -b server",
40
- "doc": "api-extractor run --local",
24
+ "build:tsc": "tsc -p ./tsconfig.json",
25
+ "build": "npm run build:tsc && npm run doc",
26
+ "clean": "rimraf dist temp test-results",
27
+ "dev:full": "concurrently -k -n fast-element,fast-html,server \"npm run dev --workspace=@microsoft/fast-element\" \"npm:watch\" \"npm:test-server\"",
28
+ "dev": "concurrently -k -n tsc,server \"npm run watch\" \"npm run test-server\"",
41
29
  "doc:ci": "api-extractor run",
30
+ "doc": "npm run doc:ci -- --local",
31
+ "eslint:fix": "npm run eslint -- --fix",
42
32
  "eslint": "eslint . --ext .ts",
43
- "eslint:fix": "eslint . --ext .ts --fix",
33
+ "install-playwright-browsers": "npm run playwright install",
44
34
  "prepublishOnly": "npm run clean && npm run build",
45
- "pretest": "npm run build && npm run build-server",
46
35
  "prettier:diff": "prettier --config ../../../.prettierrc \"**/*.{ts,html}\" --list-different",
47
36
  "prettier": "prettier --config ../../../.prettierrc --write \"**/*.{ts,html}\"",
48
- "test": "npm run build-app && playwright test && npm run test:rules",
49
- "test-server": "node server/dist/server.js",
37
+ "test-server": "npx vite test/ --clearScreen false",
38
+ "test:playwright": "playwright test",
50
39
  "test:rules": "sg test --skip-snapshot-tests",
51
- "install-playwright-browsers": "npm run playwright install",
52
- "dev": "npm run build && npm run build-app && npm run build-server && npm run test-server"
40
+ "test": "npm run test:playwright && npm run test:rules",
41
+ "test:ui": "concurrently -k -n fast-element,fast-html,playwright \"npm run dev --workspace=@microsoft/fast-element\" \"npm:watch\" \"npx playwright test --ui\"",
42
+ "watch": "npm run build:tsc -- -w --preserveWatchOutput"
53
43
  },
54
44
  "description": "A package for facilitating rendering FAST Web Components in a non-browser environment.",
55
45
  "exports": {
@@ -64,20 +54,15 @@
64
54
  "./dist/esm/index.js"
65
55
  ],
66
56
  "peerDependencies": {
67
- "@microsoft/fast-element": "^2.8.1"
57
+ "@microsoft/fast-element": "^2.8.2"
68
58
  },
69
59
  "devDependencies": {
70
60
  "@ast-grep/cli": "^0.37.0",
71
61
  "@microsoft/api-extractor": "^7.47.0",
72
- "@microsoft/fast-element": "^2.8.1",
73
- "@playwright/test": "^1.49.0",
62
+ "@microsoft/fast-element": "^2.8.2",
74
63
  "@types/express": "^4.17.21",
75
64
  "@types/node": "^17.0.17",
76
- "express": "^4.19.2",
77
- "typescript": "~5.3.0",
78
- "webpack": "^5.97.1",
79
- "webpack-cli": "^6.0.1",
80
- "webpack-merge": "^6.0.1"
65
+ "typescript": "~5.3.0"
81
66
  },
82
67
  "beachball": {
83
68
  "disallowedChangeTypes": [
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1,5 +0,0 @@
1
- export declare const lifecycleEvents: Array<{
2
- callback: string;
3
- name?: string;
4
- }>;
5
- export declare let hydrationCompleteEmitted: boolean;
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1,23 +0,0 @@
1
- import { __awaiter } from "tslib";
2
- import { expect, test } from "@playwright/test";
3
- test.describe("f-template", () => __awaiter(void 0, void 0, void 0, function* () {
4
- test("create a non-binding attribute", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
5
- yield page.goto("/attribute");
6
- const customElement = page.locator("test-element");
7
- const customElementInput = customElement.locator("input");
8
- yield expect(customElementInput).toHaveAttribute("disabled");
9
- }));
10
- test("create an attribute binding", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
11
- yield page.goto("/attribute");
12
- const customElement = page.locator("test-element");
13
- yield expect(customElement).toHaveAttribute("type", "checkbox");
14
- yield expect(customElement.locator("input[type='checkbox']")).toHaveCount(1);
15
- yield page.evaluate(() => {
16
- var _a;
17
- const customElement = document.getElementsByTagName("test-element");
18
- (_a = customElement.item(0)) === null || _a === void 0 ? void 0 : _a.setAttribute("type", "radio");
19
- });
20
- yield expect(customElement).toHaveAttribute("type", "radio");
21
- yield expect(customElement.locator("input[type='radio']")).toHaveCount(1);
22
- }));
23
- }));
@@ -1,20 +0,0 @@
1
- import { __decorate, __metadata } from "tslib";
2
- import { RenderableFASTElement, TemplateElement } from "@microsoft/fast-html";
3
- import { attr, FASTElement } from "@microsoft/fast-element";
4
- class TestElement extends FASTElement {
5
- constructor() {
6
- super(...arguments);
7
- this.type = "radio";
8
- }
9
- }
10
- __decorate([
11
- attr,
12
- __metadata("design:type", String)
13
- ], TestElement.prototype, "type", void 0);
14
- RenderableFASTElement(TestElement).defineAsync({
15
- name: "test-element",
16
- templateOptions: "defer-and-hydrate",
17
- });
18
- TemplateElement.define({
19
- name: "f-template",
20
- });
@@ -1,23 +0,0 @@
1
- import { __awaiter } from "tslib";
2
- import { expect, test } from "@playwright/test";
3
- test.describe("f-template", () => __awaiter(void 0, void 0, void 0, function* () {
4
- test("create a binding", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
5
- yield page.goto("/binding");
6
- const customElement = yield page.locator("test-element");
7
- yield expect(yield customElement.getAttribute("text")).toEqual("Hello world");
8
- yield expect(customElement).toHaveText("Hello world");
9
- yield page.evaluate(() => {
10
- var _a;
11
- const customElement = document.getElementsByTagName("test-element");
12
- (_a = customElement.item(0)) === null || _a === void 0 ? void 0 : _a.setAttribute("text", "Hello pluto");
13
- });
14
- yield expect(yield customElement.getAttribute("text")).toEqual("Hello pluto");
15
- yield expect(customElement).toHaveText("Hello pluto");
16
- }));
17
- test("create an unescaped binding", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
18
- yield page.goto("/binding");
19
- const customElement = yield page.locator("test-element-unescaped");
20
- yield expect(yield customElement.locator("p").count()).toEqual(1);
21
- yield expect(customElement).toHaveText("Hello world");
22
- }));
23
- }));