arche 0.3.2 → 0.3.5

package/README.md

@@ -96,27 +96,57 @@ import Arche from 'https://unpkg.com/arche/es.js'
 ```coffeescript [specscript]
 Arche(React {
   createElement: (type, props?, children?)=>ReactElement,
+}, options? {
+  styled?: {
+    div: function,
+    p: funcion,
+    span: function,
+    // etc
+  },
+  styledMemoizationCap?: number, // defaults to 1000
 }) -> ReactElement
 ```
 
 # Usage
+Set Arche elements globally for a great developer experience.
 ```javascript
+// global.js
+
 const ReactElement = Arche(React)
 
-const {
-  A, P, B, Q, I, Ul, Ol, Li,
-  H1, H2, H3, H4, H5, H6, Hr, Br,
-  Script, Html, Body, Nav, Section, Article, Footer, Span, Div, Img, Video,
-  Form, Fieldset, Input, Label, Textarea, Select, Option,
-  Button, Iframe, Blockquote, Code, Pre,
-} = ReactElement
+window.ReactElement = ReactElement
+
+for (const elementName in ReactElement) {
+  window[elementName] = ReactElement[elementName]
+}
+
+// Arche for now does not export every element
+// create the ones you need like so
+window.Aside = ReactElement('aside')
+window.Svg = ReactElement('svg')
+window.Path = ReactElement('path')
 ```
 
-Don't see an element you need? Just create it!
-```javascript [playground]
-const ReactElement = Arche(React)
+## Using styled
+Arche accepts a `styled` option from css-in-js libraries like [Styled Components](https://styled-components.com/) to enable a `css` prop on the base elements. This does not apply to composite components (those created with `ReactElement(props => {...})` syntax)
 
-const Aside = ReactElement('aside')
+```javascript
+// global.js
+const ReactElement = Arche(React, { styled })
+```
+
+Elements can now specify a `css` prop to use css-in-js.
+
+```javascript
+// MyComponent.js
+const MyComponent = ReactElement(props => {
+  return Div({
+    css: `
+      width: 500px;
+      background-color: pink;
+    `,
+  })
+})
 ```
 
 ## Using React Context

package/es.js

@@ -1,5 +1,5 @@
 /**
- * Arche v0.3.2
+ * Arche v0.3.5
  * https://github.com/richytong/arche
  * (c) 2020-2023 Richard Tong
  * Arche may be freely distributed under the MIT license.
@@ -264,7 +264,7 @@ const Arche = function (creator, options = {}) {
       }
 
       if (isArray(arg1)) {
-        if (arg0.css == null) {
+        if (arg0 == null || arg0.css == null) {
           return creatorCreateElement(creator, type, arg0, arg1)
         }
         const { css, ...props } = arg0
@@ -272,14 +272,14 @@ const Arche = function (creator, options = {}) {
       }
 
       if (arg1 == null) {
-        if (arg0.css == null) {
+        if (arg0 == null || arg0.css == null) {
           return creatorCreateElement(creator, type, arg0, [])
         }
         const { css, ...props } = arg0
         return creatorCreateElement(creator, styledComponent([css]), props, [])
       }
 
-      if (arg0.css == null) {
+      if (arg0 == null || arg0.css == null) {
         return creatorCreateElement(creator, type, arg0, [arg1])
       }
       const { css, ...props } = arg0

package/index.js

@@ -1,5 +1,5 @@
 /**
- * Arche v0.3.2
+ * Arche v0.3.5
  * https://github.com/richytong/arche
  * (c) 2020-2023 Richard Tong
  * Arche may be freely distributed under the MIT license.
@@ -270,7 +270,7 @@ const Arche = function (creator, options = {}) {
       }
 
       if (isArray(arg1)) {
-        if (arg0.css == null) {
+        if (arg0 == null || arg0.css == null) {
           return creatorCreateElement(creator, type, arg0, arg1)
         }
         const { css, ...props } = arg0
@@ -278,14 +278,14 @@ const Arche = function (creator, options = {}) {
       }
 
       if (arg1 == null) {
-        if (arg0.css == null) {
+        if (arg0 == null || arg0.css == null) {
           return creatorCreateElement(creator, type, arg0, [])
         }
         const { css, ...props } = arg0
         return creatorCreateElement(creator, styledComponent([css]), props, [])
       }
 
-      if (arg0.css == null) {
+      if (arg0 == null || arg0.css == null) {
         return creatorCreateElement(creator, type, arg0, [arg1])
       }
       const { css, ...props } = arg0

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * Arche v0.3.2
+ * Arche v0.3.5
  * https://github.com/richytong/arche
  * (c) 2020-2023 Richard Tong
  * Arche may be freely distributed under the MIT license.
@@ -264,7 +264,7 @@ const Arche = function (creator, options = {}) {
       }
 
       if (isArray(arg1)) {
-        if (arg0.css == null) {
+        if (arg0 == null || arg0.css == null) {
           return creatorCreateElement(creator, type, arg0, arg1)
         }
         const { css, ...props } = arg0
@@ -272,14 +272,14 @@ const Arche = function (creator, options = {}) {
       }
 
       if (arg1 == null) {
-        if (arg0.css == null) {
+        if (arg0 == null || arg0.css == null) {
           return creatorCreateElement(creator, type, arg0, [])
         }
         const { css, ...props } = arg0
         return creatorCreateElement(creator, styledComponent([css]), props, [])
       }
 
-      if (arg0.css == null) {
+      if (arg0 == null || arg0.css == null) {
         return creatorCreateElement(creator, type, arg0, [arg1])
       }
       const { css, ...props } = arg0

package/package.json

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

package/test.js

@@ -117,11 +117,12 @@ describe('Arche', () => {
         Div({ css: 'article', id: 'nested' }, [
           Article('yo'),
         ]),
+        Span(),
       ])
 
       assert.strictEqual(
         JSON.stringify(el),
-        '["div",{},[["h1",{},["header"]],["h3",{"style":{"color":"grey"}},["description"]],["b",{"id":"hey","excluded":null},[]],["article",{"id":"nested"},[["article",{},["yo"]]]]]]')
+        '["div",{},[["h1",{},["header"]],["h3",{"style":{"color":"grey"}},["description"]],["b",{"id":"hey","excluded":null},[]],["article",{"id":"nested"},[["article",{},["yo"]]]],["span",{},[]]]]')
     })
   })
 })