arche 0.2.5 → 0.3.0

package/CHANGELOG.md

@@ -1,2 +1,14 @@
-## v0.1.0 - latest
+## v0.3.0
+ * styled option enables the css parameter
+
+## v0.2.5
+ * mjs export
+
+## v0.2.2
+ * React Context Support
+
+## v0.2.0
+ * Element shorthands
+
+## v0.1.0
  * First release with proof of concept at [rubico.land](https://rubico.land/)

package/es.js

@@ -114,7 +114,9 @@ const creatorCreateElement = function (creator, type, props, children) {
  *     Pre: (props, children?)|children)=>element,
  *   }
  *
- * Arche(creator) -> rootElement
+ * Arche(creator, options {
+ *   styled?: Styled,
+ * }) -> rootElement
  * ```
  *
  * @description
@@ -184,23 +186,69 @@ const creatorCreateElement = function (creator, type, props, children) {
  * ```
  */
 
-const Arche = function (creator) {
-  const rootElement = type => function creatingElement(arg0, arg1) {
+const Arche = function (creator, options = {}) {
+  const { styled } = options
+
+  const originalRootElement = type => function creatingElement(arg0, arg1) {
     if (isArray(arg0)) {
       return creatorCreateElement(creator, type, {}, arg0)
     }
+
     if (typeof arg0 == 'string') {
       return creatorCreateElement(creator, type, {}, [arg0])
     }
+
     if (isArray(arg1)) {
       return creatorCreateElement(creator, type, arg0, arg1)
     }
+
     if (arg1 == null) {
       return creatorCreateElement(creator, type, arg0, [])
     }
+
     return creatorCreateElement(creator, type, arg0, [arg1])
   }
 
+  const styledRootElement = type => function creatingStyledElement(arg0, arg1) {
+    if (isArray(arg0)) {
+      return creatorCreateElement(creator, type, {}, arg0)
+    }
+
+    if (typeof arg0 == 'string') {
+      return creatorCreateElement(creator, type, {}, [arg0])
+    }
+
+    if (isArray(arg1)) {
+      if (arg0.css == null) {
+        return creatorCreateElement(creator, type, arg0, arg1)
+      }
+      const { css, ...props } = arg0
+      return creatorCreateElement(creator, styled[type](css), props, arg1)
+    }
+
+    if (arg1 == null) {
+      if (arg0.css == null) {
+        return creatorCreateElement(creator, type, arg0, [])
+      }
+      const { css, ...props } = arg0
+      return creatorCreateElement(creator, styled[type](css), props, [])
+    }
+
+    if (arg0.css == null) {
+      return creatorCreateElement(creator, type, arg0, [arg1])
+    }
+    const { css, ...props } = arg0
+    return creatorCreateElement(creator, styled[type](css), props, [arg1])
+  }
+
+  const rootElement = (
+    styled == null
+    ? originalRootElement
+    : type => typeof type == 'string'
+      ? styledRootElement(type)
+      : originalRootElement(type)
+  )
+
   rootElement.A = rootElement('a')
   rootElement.P = rootElement('p')
   rootElement.B = rootElement('b')

package/index.js

@@ -120,7 +120,9 @@ const creatorCreateElement = function (creator, type, props, children) {
  *     Pre: (props, children?)|children)=>element,
  *   }
  *
- * Arche(creator) -> rootElement
+ * Arche(creator, options {
+ *   styled?: Styled,
+ * }) -> rootElement
  * ```
  *
  * @description
@@ -190,23 +192,69 @@ const creatorCreateElement = function (creator, type, props, children) {
  * ```
  */
 
-const Arche = function (creator) {
-  const rootElement = type => function creatingElement(arg0, arg1) {
+const Arche = function (creator, options = {}) {
+  const { styled } = options
+
+  const originalRootElement = type => function creatingElement(arg0, arg1) {
     if (isArray(arg0)) {
       return creatorCreateElement(creator, type, {}, arg0)
     }
+
     if (typeof arg0 == 'string') {
       return creatorCreateElement(creator, type, {}, [arg0])
     }
+
     if (isArray(arg1)) {
       return creatorCreateElement(creator, type, arg0, arg1)
     }
+
     if (arg1 == null) {
       return creatorCreateElement(creator, type, arg0, [])
     }
+
     return creatorCreateElement(creator, type, arg0, [arg1])
   }
 
+  const styledRootElement = type => function creatingStyledElement(arg0, arg1) {
+    if (isArray(arg0)) {
+      return creatorCreateElement(creator, type, {}, arg0)
+    }
+
+    if (typeof arg0 == 'string') {
+      return creatorCreateElement(creator, type, {}, [arg0])
+    }
+
+    if (isArray(arg1)) {
+      if (arg0.css == null) {
+        return creatorCreateElement(creator, type, arg0, arg1)
+      }
+      const { css, ...props } = arg0
+      return creatorCreateElement(creator, styled[type](css), props, arg1)
+    }
+
+    if (arg1 == null) {
+      if (arg0.css == null) {
+        return creatorCreateElement(creator, type, arg0, [])
+      }
+      const { css, ...props } = arg0
+      return creatorCreateElement(creator, styled[type](css), props, [])
+    }
+
+    if (arg0.css == null) {
+      return creatorCreateElement(creator, type, arg0, [arg1])
+    }
+    const { css, ...props } = arg0
+    return creatorCreateElement(creator, styled[type](css), props, [arg1])
+  }
+
+  const rootElement = (
+    styled == null
+    ? originalRootElement
+    : type => typeof type == 'string'
+      ? styledRootElement(type)
+      : originalRootElement(type)
+  )
+
   rootElement.A = rootElement('a')
   rootElement.P = rootElement('p')
   rootElement.B = rootElement('b')
@@ -253,5 +301,6 @@ const Arche = function (creator) {
 
   return rootElement
 }
+
 return Arche
 }())))

package/index.mjs

@@ -114,7 +114,9 @@ const creatorCreateElement = function (creator, type, props, children) {
  *     Pre: (props, children?)|children)=>element,
  *   }
  *
- * Arche(creator) -> rootElement
+ * Arche(creator, options {
+ *   styled?: Styled,
+ * }) -> rootElement
  * ```
  *
  * @description
@@ -184,23 +186,69 @@ const creatorCreateElement = function (creator, type, props, children) {
  * ```
  */
 
-const Arche = function (creator) {
-  const rootElement = type => function creatingElement(arg0, arg1) {
+const Arche = function (creator, options = {}) {
+  const { styled } = options
+
+  const originalRootElement = type => function creatingElement(arg0, arg1) {
     if (isArray(arg0)) {
       return creatorCreateElement(creator, type, {}, arg0)
     }
+
     if (typeof arg0 == 'string') {
       return creatorCreateElement(creator, type, {}, [arg0])
     }
+
     if (isArray(arg1)) {
       return creatorCreateElement(creator, type, arg0, arg1)
     }
+
     if (arg1 == null) {
       return creatorCreateElement(creator, type, arg0, [])
     }
+
     return creatorCreateElement(creator, type, arg0, [arg1])
   }
 
+  const styledRootElement = type => function creatingStyledElement(arg0, arg1) {
+    if (isArray(arg0)) {
+      return creatorCreateElement(creator, type, {}, arg0)
+    }
+
+    if (typeof arg0 == 'string') {
+      return creatorCreateElement(creator, type, {}, [arg0])
+    }
+
+    if (isArray(arg1)) {
+      if (arg0.css == null) {
+        return creatorCreateElement(creator, type, arg0, arg1)
+      }
+      const { css, ...props } = arg0
+      return creatorCreateElement(creator, styled[type](css), props, arg1)
+    }
+
+    if (arg1 == null) {
+      if (arg0.css == null) {
+        return creatorCreateElement(creator, type, arg0, [])
+      }
+      const { css, ...props } = arg0
+      return creatorCreateElement(creator, styled[type](css), props, [])
+    }
+
+    if (arg0.css == null) {
+      return creatorCreateElement(creator, type, arg0, [arg1])
+    }
+    const { css, ...props } = arg0
+    return creatorCreateElement(creator, styled[type](css), props, [arg1])
+  }
+
+  const rootElement = (
+    styled == null
+    ? originalRootElement
+    : type => typeof type == 'string'
+      ? styledRootElement(type)
+      : originalRootElement(type)
+  )
+
   rootElement.A = rootElement('a')
   rootElement.P = rootElement('p')
   rootElement.B = rootElement('b')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "arche",
-  "version": "0.2.5",
+  "version": "0.3.0",
   "description": "HTML as JavaScript",
   "author": "Richard Tong",
   "license": "MIT",

package/test.js

@@ -34,7 +34,7 @@ describe('Arche', () => {
           Article('yo'),
         ]),
       ])
-      // console.log(JSON.stringify(el))
+
       assert.strictEqual(
         JSON.stringify(el),
         '{"type":"div","children":[{"type":"h1","children":[{"type":"text","text":"header"}],"style":{}},{"type":"p","children":[{"type":"text","text":"description"}],"style":{"color":"grey"}},{"type":"span","children":[],"style":{},"id":"hey","excluded":null},{"type":"div","children":[{"type":"article","children":[{"type":"text","text":"yo"}],"style":{}}],"style":{},"id":"nested"}],"style":{}}')
@@ -59,10 +59,63 @@ describe('Arche', () => {
           Article('yo'),
         ]),
       ])
-      // console.log(JSON.stringify(el))
+
       assert.strictEqual(
         JSON.stringify(el),
         '["div",{},[["h1",{},["header"]],["p",{"style":{"color":"grey"}},["description"]],["span",{"id":"hey","excluded":null},[]],["div",{"id":"nested"},[["article",{},["yo"]]]]]]')
     })
   })
+
+  describe('styled 3-ary creator.createElement', () => {
+    const mockReact = {
+      createElement(type, props, ...children) {
+        return [type, props || {}, children || []]
+      },
+    }
+
+    const identity = value => value
+
+    const styled = {
+      h1: identity,
+      h2: identity,
+      div: identity,
+      p: identity,
+      b: identity,
+      span: identity,
+      article: identity,
+    }
+
+    const rootElement = Arche(mockReact, { styled })
+    const { Div, H1, P, Span, Article } = rootElement
+
+    it('tree structure 1', () => {
+      const el = Div([
+        H1({ css: 'h2' }, 'header'), // should swap with h2
+        P({ style: { color: 'grey' } }, 'description'),
+        Span({ id: 'hey', excluded: null }),
+        Div({ id: 'nested' }, [
+          Article('yo'),
+        ]),
+      ])
+
+      assert.strictEqual(
+        JSON.stringify(el),
+        '["div",{},[["h2",{},["header"]],["p",{"style":{"color":"grey"}},["description"]],["span",{"id":"hey","excluded":null},[]],["div",{"id":"nested"},[["article",{},["yo"]]]]]]')
+    })
+
+    it('tree structure 2', () => {
+      const el = Div([
+        H1('header'),
+        P({ css: 'h3', style: { color: 'grey' } }, 'description'),
+        Span({ css: 'b', id: 'hey', excluded: null }),
+        Div({ css: 'article', id: 'nested' }, [
+          Article('yo'),
+        ]),
+      ])
+
+      assert.strictEqual(
+        JSON.stringify(el),
+        '["div",{},[["h1",{},["header"]],["h3",{"style":{"color":"grey"}},["description"]],["b",{"id":"hey","excluded":null},[]],["article",{"id":"nested"},[["article",{},["yo"]]]]]]')
+    })
+  })
 })