Arche

> Arche (/ˈɑːrki/; Ancient Greek: ἀρχή) is a Greek word with primary senses "beginning", "origin" or "source of action" (ἐξ' ἀρχῆς: from the beginning, οr ἐξ' ἀρχῆς λόγος: the original argument), and later "first principle" or "element". (wikipedia)

HTML as JavaScript.

const ReactElement = Arche(React)
// supply the React library

const { Div, H1, P } = ReactElement
// some common building blocks are provided on ReactElement
// as property functions.

const myElement = Div([
  H1('I am a heading'),
  P('paragraph'),
  P('lorem ipsum'),
])

render(myElement)
// <div>
//   <h1>I am a heading</h1>
//   <p>paragraph</p>
//   <p>lorem ipsum</p>
// </div>

Create dynamic components with props:

const ReactElement = Arche(React)
const { Div, H1, P, Button, Img } = ReactElement

const UserCard = ReactElement(({
  firstName, lastName, age,
}) => Div([
  H1(`${firstName} ${lastName}`),
  Img({ src: 'https://via.placeholder.com/150x150', alt: 'placeholder' }),
  P({ style: { color: 'lightgrey' } }, `age: ${age}`),
]))

render(UserCard({ firstName: 'George', lastName: 'Henry', age: 32 }))
// <div>
//   <h1>George Henry</h1>
//   <img alt="placeholder" src="https://via.placeholder.com/150x150">
//   <p style="color: lightgrey">age: 32</p>
// </div>

Complete interoperability with React hooks (converted from this example):

const ReactElement = Arche(React)
const { Div, P, Button } = ReactElement
const { useState } = React

const Example = ReactElement(() => {
  const [count, setCount] = useState(0)

  return Div([
    P(`You clicked ${count} times`),
    Button({
      onClick() {
        setCount(count + 1)
      },
    }, 'Click me'),
  ])
})

render(Example())
// <div>
//   <p>You clicked {count} times</p>
//   <button>Click me</button>
// </div>

Installation

with npm

npm i arche

browser script, global Arche

browser module

import Arche from 'https://unpkg.com/arche/es.js'

Usage

Set Arche elements globally for a better developer experience.

// global.js

const ReactElement = Arche(React)

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')

Syntax

Arche() -> DocumentElement
Arche(document Document) -> DocumentElement

DocumentElement(elementType string) -> Element
DocumentElement(elementType string, props object, text string) -> Element

Arche(React {
  createElement: (
    elementType string,
    props? object,
    children? string|Array
  )=>ReactElement
}) -> ReactElement

ReactElement(elementType string, props object, text string) -> React.Element

ReactElement(
  elementType string,
  props object,
  children Array
) -> React.Element

ReactElement(elementType string) -> TypedReactElement function

TypedReactElement(props object, text string) -> React.Element
TypedReactElement(text string)-> React.Element
TypedReactElement(children Array)-> React.Element

ReactElement.A -> TypedReactElement
ReactElement.P -> TypedReactElement
ReactElement.B -> TypedReactElement
ReactElement.Q -> TypedReactElement
ReactElement.I -> TypedReactElement
ReactElement.Ul -> TypedReactElement
ReactElement.Ol -> TypedReactElement
ReactElement.Li -> TypedReactElement
ReactElement.H1 -> TypedReactElement
ReactElement.H2 -> TypedReactElement
ReactElement.H3 -> TypedReactElement
ReactElement.H4 -> TypedReactElement
ReactElement.H5 -> TypedReactElement
ReactElement.H6 -> TypedReactElement
ReactElement.Hr -> TypedReactElement
ReactElement.Br -> TypedReactElement
ReactElement.Script -> TypedReactElement
ReactElement.Html -> TypedReactElement
ReactElement.Body -> TypedReactElement
ReactElement.Nav -> TypedReactElement
ReactElement.Section -> TypedReactElement
ReactElement.Article -> TypedReactElement
ReactElement.Footer -> TypedReactElement
ReactElement.Span -> TypedReactElement
ReactElement.Div -> TypedReactElement
ReactElement.Img -> TypedReactElement
ReactElement.Video -> TypedReactElement
ReactElement.Form -> TypedReactElement
ReactElement.Fieldset -> TypedReactElement
ReactElement.Input -> TypedReactElement
ReactElement.Label -> TypedReactElement
ReactElement.Textarea -> TypedReactElement
ReactElement.Select -> TypedReactElement
ReactElement.Option -> TypedReactElement
ReactElement.Button -> TypedReactElement
ReactElement.Iframe -> TypedReactElement
ReactElement.Blockquote -> TypedReactElement
ReactElement.Code -> TypedReactElement
ReactElement.Pre -> TypedReactElement

Using styled

Arche accepts a styled option from css-in-js libraries like Styled Components to enable a css prop on the base elements. This does not apply to composite components (those created with ReactElement(props => {...}) syntax)

// global.js
const ReactElement = Arche(React, { styled })

Elements can now specify a css prop to use css-in-js.

// MyComponent.js
const MyComponent = ReactElement(props => {
  return Div({
    css: `
      width: 500px;
      background-color: pink;
    `,
  })
})

Syntax with styled

strings Array
values Array
tagFunctionArgs Array

type Styled = {
  h1: (...tagFunctionArgs)=>React.Element,
  h2: (...tagFunctionArgs)=>React.Element,
  h3: (...tagFunctionArgs)=>React.Element,
  h4: (...tagFunctionArgs)=>React.Element,
  h5: (...tagFunctionArgs)=>React.Element,
  div: (...tagFunctionArgs)=>React.Element,
  button: (...tagFunctionArgs)=>React.Element,
  a: (...tagFunctionArgs)=>React.Element,
  p: (...tagFunctionArgs)=>React.Element,
  span: (...tagFunctionArgs)=>React.Element,
  img: (...tagFunctionArgs)=>React.Element,
  ul: (...tagFunctionArgs)=>React.Element,
  ol: (...tagFunctionArgs)=>React.Element,
  li: (...tagFunctionArgs)=>React.Element,
  form: (...tagFunctionArgs)=>React.Element,
  article: (...tagFunctionArgs)=>React.Element,
  main: (...tagFunctionArgs)=>React.Element,
  section: (...tagFunctionArgs)=>React.Element,
  nav: (...tagFunctionArgs)=>React.Element,
}

Arche(React {
  createElement: (
    elementType string,
    props? object,
    children? string|Array,
  )=>ReactElement
}, options {
  styled: Styled,
  styledMemoizationCap?: number
}) -> ReactElement

Using React Context

To use React Context with Arche, wrap YourContext.Provider with ReactElement and supply value as a prop, specifying children in the next argument.

JSX example:

function ArticleWrapper () {
  const [theme, setTheme] = React.useState(themes[0])

  return (
    
      
      <article>
    
  )
}

Translates to the following with Arche:

const ArticleWrapper = ReactElement(() => {
  const [theme, setTheme] = React.useState(themes[0])

  return ReactElement(ThemeContext.Provider)({
    value: { theme, changeTheme: setTheme },
  }, [ThemeSwitcher(), Article()])
})
```</article>