add more test cases

tests/bundle.ts

@@ -2,14 +2,18 @@ import spx from 'spx';
 import { Basic } from './bundle/basic';
 import { Incremental } from './bundle/incremental';
 import { Lifecycle } from './bundle/lifecycle';
+import { Merge } from './bundle/merge';
+import { Types } from './bundle/types';
 import { Async, Async2, AsyncFetch } from './bundle/async';
 
 spx.register(
   Basic,
   Incremental,
   Lifecycle,
+  Merge,
   Async,
   Async2,
+  Types,
   AsyncFetch
 );
 

tests/bundle/merge.ts

@@ -0,0 +1,39 @@
+/* eslint-disable no-use-before-define */
+
+import spx from 'spx';
+import relapse, { Relapse } from 'relapse';
+
+export class Merge extends spx.Component<typeof Merge.define> {
+
+  static define = {
+    merge: true,
+    nodes: [],
+    state: {
+      fade: Number,
+      mounted: Boolean,
+      multiple: {
+        typeof: Boolean,
+        default: false
+      },
+      open: {
+        default: 120,
+        typeof: Number
+      }
+    }
+  };
+
+  onmount () {
+
+    this.relapse = relapse(this.dom);
+
+  }
+
+  unmount () {
+
+    this.relapse.destroy();
+
+  }
+
+  public relapse: Relapse;
+
+}

tests/bundle/types.ts

@@ -0,0 +1,133 @@
+/* eslint-disable no-use-before-define */
+
+import spx from 'spx';
+
+export class Types extends spx.Component<typeof Types.define> {
+
+  static define = {
+    nodes: [
+      'string',
+      'boolean',
+      'number',
+      'object',
+      'array',
+      'ustring',
+      'uboolean',
+      'unumber',
+      'uobject',
+      'uarray',
+      'ustring',
+      'dboolean',
+      'dnumber',
+      'dobject',
+      'darray'
+    ],
+    state: {
+      undefinedString: String,
+      undefinedBoolean: Boolean,
+      undefinedNumber: Number,
+      undefinedObject: Object,
+      undefinedArray: Array,
+      string: String,
+      boolean: Boolean,
+      number: Number,
+      object: Object,
+      array: Array,
+      defaultString: {
+        typeof: String,
+        default: 'foo'
+      },
+      defaultBoolean: {
+        typeof: Boolean,
+        default: true
+      },
+      defaultNumber: {
+        typeof: Number,
+        default: 1000
+      },
+      defaultObject: {
+        typeof: Object,
+        default: {
+          foo: 'example',
+          bar: 1000,
+          baz: false
+        }
+      },
+      defaultArray: {
+        typeof: Array,
+        default: [
+          {
+            foo: 'example',
+            bar: 1000,
+            baz: false
+          }
+        ]
+      }
+    }
+  };
+
+  onmount () {
+
+    if (typeof this.state.undefinedString === 'string') {
+      this.ustringNode.innerHTML = `<code class="fs-md">${JSON.stringify(this.state.undefinedString)}</code>`;
+    }
+
+    if (typeof this.state.undefinedNumber === 'number') {
+      this.unumberNode.innerHTML = `<code class="fs-md">${this.state.undefinedNumber}</code>`;
+    }
+
+    if (typeof this.state.undefinedBoolean === 'boolean') {
+      this.ubooleanNode.innerHTML = `<code class="fs-md">${this.state.undefinedBoolean}</code>`;
+    }
+
+    if (typeof this.state.undefinedObject === 'object') {
+      this.uobjectNode.innerHTML = `<code class="fs-md">${JSON.stringify(this.state.undefinedObject)}</code>`;
+    }
+
+    if (Array.isArray(this.state.undefinedArray)) {
+      this.uarrayNode.innerHTML = `<code class="fs-md">${JSON.stringify(this.state.undefinedArray)}</code>`;
+    }
+
+    if (typeof this.state.string === 'string') {
+      this.stringNode.innerHTML = `<code class="fs-md">${JSON.stringify(this.state.string)}</code>`;
+    }
+
+    if (typeof this.state.number === 'number') {
+      this.numberNode.innerHTML = `<code class="fs-md">${this.state.number}</code>`;
+    }
+
+    if (typeof this.state.boolean === 'boolean') {
+      this.booleanNode.innerHTML = `<code class="fs-md">${this.state.boolean}</code>`;
+    }
+
+    if (typeof this.state.object === 'object') {
+      this.objectNode.innerHTML = `<code class="fs-md">${JSON.stringify(this.state.object)}</code>`;
+    }
+
+    if (Array.isArray(this.state.array)) {
+      this.arrayNode.innerHTML = `<code class="fs-md">${JSON.stringify(this.state.array)}</code>`;
+    }
+
+    if (typeof this.state.defaultString === 'string') {
+      this.dstringNode.innerHTML = `<code class="fs-md">${JSON.stringify(this.state.defaultString)}</code>`;
+    }
+
+    if (typeof this.state.defaultNumber === 'number') {
+      this.dnumberNode.innerHTML = `<code class="fs-md">${this.state.defaultNumber}</code>`;
+    }
+
+    if (typeof this.state.defaultBoolean === 'boolean') {
+      this.dbooleanNode.innerHTML = `<code class="fs-md">${this.state.defaultBoolean}</code>`;
+    }
+
+    if (typeof this.state.defaultObject === 'object') {
+      this.dobjectNode.innerHTML = `<code class="fs-md">${JSON.stringify(this.state.defaultObject)}</code>`;
+    }
+
+    if (Array.isArray(this.state.defaultArray)) {
+      this.darrayNode.innerHTML = `<code class="fs-md">${JSON.stringify(this.state.defaultArray)}</code>`;
+    }
+
+  }
+
+}

tests/cases/_layouts/index.liquid

@@ -21,6 +21,14 @@
           "title": "Async",
           "url": "/components/async/"
         },
+        {
+          "title": "Types",
+          "url": "/components/types/"
+        },
+        {
+          "title": "Merge",
+          "url": "/components/merge/"
+        },
         {
           "title": "Alias",
           "url": "/components/alias/"

tests/cases/component-merge/index.liquid

@@ -0,0 +1,60 @@
+---
+title: 'Merge'
+layout: index.liquid
+group: 'directive'
+permalink: '/components/merge/index.html'
+---
+
+<div id="example">
+
+  <h4 class="fw-bold pb-3 mb-4 bb">
+    Merge Tests
+  </h4>
+
+  <p>
+    The component augments the DOM after mounting. The static
+    <code class="fs-md">{ define: { merge: true } }</code>
+    is passed, so the snapshot will be saved in its current state. The snapshot will reflect the augmentations applied.
+  </p>
+
+  <div class="row ai-center jc-start my-5">
+    <div class="col-6">
+      <section
+        class="accordion"
+        spx-component="merge">
+        <details open>
+          <summary class="accordion-btn py-2 px-4">Foo</summary>
+          <div>
+            <p class="p-4">
+              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo voluptatem cum error quidem necessitatibus, doloribus suscipit esse quasi nihil nemo laudantium, voluptatum eius magnam? Harum quis repellendus explicabo nobis. Officia?
+            </p>
+          </div>
+        </details>
+        <details>
+          <summary class="accordion-btn py-2 px-4">Bar</summary>
+          <div>
+            <p class="p-4">
+              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo voluptatem cum error quidem necessitatibus, doloribus suscipit esse quasi nihil nemo laudantium, voluptatum eius magnam? Harum quis repellendus explicabo nobis. Officia?
+            </p>
+          </div>
+        </details>
+        <details>
+          <summary class="accordion-btn py-2 px-4">Baz</summary>
+          <div>
+            <p class="p-4">
+              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo voluptatem cum error quidem necessitatibus, doloribus suscipit esse quasi nihil nemo laudantium, voluptatum eius magnam? Harum quis repellendus explicabo nobis. Officia?
+            </p>
+          </div>
+        </details>
+        <details>
+          <summary class="accordion-btn py-2 px-4">Qux</summary>
+          <div>
+            <p class="p-4">
+              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo voluptatem cum error quidem necessitatibus, doloribus suscipit esse quasi nihil nemo laudantium, voluptatum eius magnam? Harum quis repellendus explicabo nobis. Officia?
+            </p>
+          </div>
+        </details>
+      </section>
+    </div>
+  </div>
+</div>

tests/cases/component-types/index.liquid

@@ -0,0 +1,65 @@
+---
+title: 'Types'
+layout: index.liquid
+group: 'directive'
+permalink: '/components/types/index.html'
+---
+
+{% assign types = 'string,number,boolean,object,array' | split: ',' %}
+
+<div id="example">
+
+  <h4 class="fw-bold pb-3 mb-4 bb">
+    Type Tests
+  </h4>
+  <p>
+    Validates component
+    <code class="fs-md">{ define: { state: {} } }</code>
+    defined state types. This ensures that component type conversion is handled correctly.
+  </p>
+  <div
+    class="row"
+    spx-component="types"
+    spx-types:string="lorem ipsum"
+    spx-types:number="5000"
+    spx-types:boolean="true"
+    spx-types:object="{ a: 100, b: 'xxx', c: false }"
+    spx-types:array="['hello', 'world']">
+    <div class="col-7 mb-5">
+      {% for type in types %}
+        <div class="row py-2 bb">
+          <div class="col-4 fs-md fw-bold">
+            {{ type | capitalize }}
+          </div>
+          <div
+            class="col-8"
+            spx-node="types.{{ type | prepend: 'u' }}"></div>
+        </div>
+      {% endfor %}
+    </div>
+    <div class="col-7 mb-5">
+      {% for type in types %}
+        <div class="row py-2 bb">
+          <div class="col-4 fs-md fw-bold">
+            Defined {{ type | capitalize }}
+          </div>
+          <div
+            class="col-8"
+            spx-node="types.{{ type }}"></div>
+        </div>
+      {% endfor %}
+    </div>
+    <div class="col-7">
+      {% for type in types %}
+        <div class="row py-2 bb">
+          <div class="col-4 fs-md fw-bold">
+            Default {{ type | capitalize }}
+          </div>
+          <div
+            class="col-8"
+            spx-node="types.{{ type | prepend: 'd' }}"></div>
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+</div>