feat: Emit attribute groups in the runtime aggregate rewrite data.

Author: chriseppstein

packages/@css-blocks/ember-app/package.json

@@ -18,7 +18,7 @@
   ],
   "scripts": {
     "test": "yarn run test:runner",
-    "test:runner": "echo TODO",
+    "test:runner": "mocha --opts test/mocha.opts dist/test",
     "compile": "tsc --build && tsc --build runtime",
     "prepare": "tsc --build --force && tsc --build --force runtime",
     "pretest": "yarn run compile",

packages/@css-blocks/ember-app/src/AggregateRewriteData.ts

@@ -77,6 +77,19 @@ export interface AggregateRewriteData {
 }
 
 export interface BlockInfo {
+  // Maps the source name of the attribute (E.g. `.button[color]`) to a
+  // a map that maps the value of the attribute to the source name of that
+  // attribute value. Example:
+  // {
+  //   ":scope[mode]": {
+  //      "collapsed": ":scope[mode=collapsed]",
+  //      "open": ":scope[mode=open]",
+  //      "minimal": ":scope[mode=minimal]",
+  //   }
+  // }
+  // The value returned from this mapping is suitable for being passed as a key
+  // to `blockInterfaceStyles`.
+  groups: ObjectDictionary<ObjectDictionary<string>>;
   // The styles of this block
   // Note: this includes all the styles that are inherited but not overridden
   //       but does not include the styles that are inherited but then overridden.

packages/@css-blocks/ember-app/src/RuntimeDataGenerator.ts

@@ -1,4 +1,4 @@
-import { Block, Configuration, Style, isAttrValue, isBlockClass, isStyle } from "@css-blocks/core";
+import { AttrValue, Block, Configuration, Style, isAttrValue, isBlockClass, isStyle } from "@css-blocks/core";
 import { EmberAnalyzer } from "@css-blocks/ember-utils";
 import { SimpleAttribute, StyleMapping } from "@opticss/template-api";
 import { ObjectDictionary } from "@opticss/util";
@@ -184,6 +184,21 @@ export class RuntimeDataGenerator {
   generateBlockInfo(block: Block): BlockInfo {
     let blockInterfaceStyles: ObjectDictionary<LocalStyleIndex> = {};
     let resolvedInterface = block.resolvedStyleInterface();
+    let resolvedStyles = Object.values(resolvedInterface);
+    let attributes: Array<[string, ObjectDictionary<string>]> = resolvedStyles.filter(s => isAttrValue(s)).map((s) => {
+      let attrValue = <AttrValue>s;
+      let groupName = attrValue.attribute.asSource();
+      let attrName = attrValue.asSource();
+      return [groupName, {[attrValue.value]: attrName}];
+    });
+    let groups: ObjectDictionary<ObjectDictionary<string>> = attributes.reduce(
+      (v, [groupName, valueMap]) => {
+        if (!v[groupName]) v[groupName] = {};
+        Object.assign(v[groupName], valueMap);
+        return v;
+      },
+      {} as ObjectDictionary<ObjectDictionary<string>>,
+    );
     let styleNames = Object.keys(resolvedInterface).sort();
     let i = 0;
     for (let styleName of styleNames) {
@@ -196,6 +211,7 @@ export class RuntimeDataGenerator {
       implementations[this.blockIndex(impl)] = styleNames.map(n => this.styleIndex(implInterface[n]));
     }
     return {
+      groups,
       blockInterfaceStyles,
       implementations,
     };

packages/@css-blocks/ember-app/test/runtime-data-generator-test.ts

@@ -0,0 +1,59 @@
+import { Block, BlockFactory } from "@css-blocks/core";
+import { EmberAnalyzer } from "@css-blocks/ember-utils";
+import { StyleMapping } from "@opticss/template-api";
+import * as assert from "assert";
+
+import { RuntimeDataGenerator } from "../src/RuntimeDataGenerator";
+
+describe("Runtime Data Generator", function () {
+
+  beforeEach(async () => {
+  });
+
+  afterEach(async () => {
+  });
+
+  it("Generates block information", function () {
+    let factory = new BlockFactory({});
+    let analyzer = new EmberAnalyzer(factory);
+    let mapping = new StyleMapping({analyzedAttributes: ["class"], analyzedTagnames: false, rewriteIdents: {id: false, class: true}});
+    let block = new Block("test-block-1", "test-block-1", "abcde");
+    let aClass = block.ensureClass("a-class");
+    let attr = aClass.ensureAttribute("[an-attr]");
+    attr.ensureValue("one");
+    attr.ensureValue("two");
+    attr.ensureValue("three");
+    let subBlock = new Block("test-block-2", "test-block-2", "abcde");
+    subBlock.setBase(block);
+    let subClass = subBlock.ensureClass("a-class");
+    let subAttr = subClass.ensureAttribute("[an-attr]");
+    subAttr.ensureValue("three");
+    subAttr.ensureValue("four");
+    let generator = new RuntimeDataGenerator([block, subBlock], mapping, analyzer, factory.configuration, new Set());
+    let blockInfo = generator.generateBlockInfo(block);
+    assert.deepEqual(
+      blockInfo,
+      {
+        blockInterfaceStyles: {
+          ".a-class": 0,
+          ".a-class[an-attr=one]": 1,
+          ".a-class[an-attr=three]": 2,
+          ".a-class[an-attr=two]": 3,
+          ":scope": 4,
+        },
+        groups: {
+          ".a-class[an-attr]": {
+            one: ".a-class[an-attr=one]",
+            two: ".a-class[an-attr=two]",
+            three: ".a-class[an-attr=three]",
+          },
+        },
+        implementations: {
+          "0": [ 0, 1, 2, 3, 4 ],
+          "1": [ 5, 1, 6, 3, 7 ],
+        },
+      },
+    );
+  });
+
+});