HTML as JavaScript


Keywords
react, reactjs, buildless, elements, components, arche, atom, component, dom, element, es6, esm, html, javascript, jsx-less
License
MIT
Install
npm install arche@0.2.5

Documentation

Arche

arche-logo

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)

Node.js CI codecov

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('heyo'),
  P('lorem ipsum'),
])

render(myElement)
// <div>
//   <h1>I am a heading</h1>
//   <p>heyo</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 src="https://via.placeholder.com/150x150" alt="placeholder">
//   <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 onclick="setCount(count + 1)">Click me</button>
// </div>

Installation

with npm

npm i arche

browser script, global Arche

<script src="https://unpkg.com/arche"></script>

browser module

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

Syntax

Arche(React {
  createElement: (type, props?, children?)=>ReactElement,
}) -> ReactElement

Usage

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

Don't see an element you need? Just create it!

const ReactElement = Arche(React)

const Aside = ReactElement('aside')

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 (
    <ThemeContext.Provider value={{
      theme,
      changeTheme: setTheme
    }}>
      <ThemeSwitcher />
      <Article />
    </ThemeContext.Provider>
  )
}

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()])
})