release: WRNexusJS 0.3.5

editors/vscode/test/formatter.test.js

@@ -20,6 +20,15 @@ test("preserves nested prop defaults while formatting", () => {
   assert.equal(formatWrn(formatted, { insertSpaces: true, tabSize: 2 }), formatted);
 });
 
+test("formats public event declarations as individual props members", () => {
+  const source = `component Search {\nprops { value = "" @event search = function @event clear = function }\nview { <input/> }\n}\n`;
+  const formatted = formatWrn(source, { insertSpaces: true, tabSize: 2 });
+
+  assert.match(formatted, / {4}@event search = function/);
+  assert.match(formatted, / {4}@event clear = function/);
+  assert.equal(formatWrn(formatted, { insertSpaces: true, tabSize: 2 }), formatted);
+});
+
 test("keeps long inline-closing tags idempotent after multiline expansion", () => {
   const source = `component Status {
   view {
@@ -37,3 +46,139 @@ test("keeps long inline-closing tags idempotent after multiline expansion", () =
   assert.equal(formatWrn(formatted, options), formatted);
   assert.match(formatted, /<\/span>Loading/);
 });
+
+test("formats inline elements with one attribute per line", () => {
+  const source = `component Button {
+  view {
+    <button type="button" class="primary" @click='save()'>Save</button>
+  }
+}
+`;
+
+  const expected = `component Button {
+  view {
+    <button
+      type="button"
+      class="primary"
+      @click='save()'
+    >
+      Save
+    </button>
+  }
+}
+`;
+
+  const options = {
+    insertSpaces: true,
+    tabSize: 2,
+    printWidth: 100,
+    multilineAttributes: true,
+  };
+
+  assert.equal(formatWrn(source, options), expected);
+
+  assert.equal(formatWrn(expected, options), expected);
+});
+
+test("formats self-closing component props", () => {
+  const source = `component Demo {
+  view {
+    <FeatureList items='{[{ label: "A" }]}' emptyLabel="No items" />
+  }
+}
+`;
+
+  const formatted = formatWrn(source, {
+    insertSpaces: true,
+    tabSize: 2,
+    printWidth: 100,
+    multilineAttributes: true,
+  });
+
+  assert.match(formatted, /<FeatureList\n/);
+
+  assert.match(formatted, /items='\{\[\{ label: "A" \}\]\}'/);
+
+  assert.match(formatted, /^\s*\/>$/m);
+});
+
+test("indents if and each blocks", () => {
+  const source = `page Demo {
+  view {
+    {#if open}
+    {#each items as item}
+    <span>{item.label}</span>
+    {:empty}
+    <p>Empty</p>
+    {/each}
+    {:else}
+    <p>Closed</p>
+    {/if}
+  }
+}
+`;
+
+  const formatted = formatWrn(source, {
+    insertSpaces: true,
+    tabSize: 2,
+    multilineAttributes: true,
+  });
+
+  assert.match(formatted, /^ {6}\{#each items as item\}$/m);
+
+  assert.match(formatted, /^ {8}<span>/m);
+
+  assert.equal(
+    formatWrn(formatted, {
+      insertSpaces: true,
+      tabSize: 2,
+      multilineAttributes: true,
+    }),
+    formatted,
+  );
+});
+
+test("expands inline if blocks around HTML", () => {
+  const source = `component Button {
+  view {
+    <button>
+      {#if loading}<span class="wire-spinner wire-spinner--inline" aria-hidden="true"></span>{/if}
+      {#if icon}<span class="{icon}"></span>{:else}<span>Fallback</span>{/if}
+    </button>
+  }
+}
+`;
+
+  const expected = `component Button {
+  view {
+    <button>
+      {#if loading}
+        <span
+          class="wire-spinner wire-spinner--inline"
+          aria-hidden="true"
+        >
+        </span>
+      {/if}
+      {#if icon}
+        <span
+          class="{icon}"
+        >
+        </span>
+      {:else}
+        <span>Fallback</span>
+      {/if}
+    </button>
+  }
+}
+`;
+
+  const options = {
+    insertSpaces: true,
+    tabSize: 2,
+    printWidth: 100,
+    multilineAttributes: true,
+  };
+
+  assert.equal(formatWrn(source, options), expected);
+  assert.equal(formatWrn(expected, options), expected);
+});