Giter VIP home page Giter VIP logo

arche's Introduction

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,
}, 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.

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

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;
    `,
  })
})

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

arche's People

Contributors

richytong avatar

Stargazers

avatar avatar avatar avatar avatar

Watchers

avatar avatar

Forkers

toshvelaga claimyr-repo

arche's Issues

Guards idea

some time ago I was discussing the possibility of typed validation of childrens and components that are passed through props.

my discussion finish with creating this package https://github.com/lulldev/prop-types-required-nodes, where in dev mode and prop-types we can check specific components in props. After that i research type-safe realisation but i was not able to narrow the ReactElement type.

what you think about it? sometimes i play with https://github.com/hyperhype/hyperscript and types.
final idea: strict jsx like arche or hyperscript with garanties in props and make jsx testable on function level (if we had nested typed functions - we can create structure to expect it in tests)

Combinators 

    H1('Compare Values'),
    Div([
      DocsEq(props),
      DocsGt(props),
      DocsLt(props),
      DocsGte(props),
      DocsLte(props),
    ]),

Would be nice if I didn't have to write props over and over. Maybe some API like

    H1('Compare Values'),
    Div([Arche.all([
      DocsEq,
      DocsGt,
      DocsLt,
      DocsGte,
      DocsLte,
   ])(props)]))

Some more ideas

    H1('Compare Values'),
    Div.all([DocsEq, DocsGt, DocsLt, DocsGte, DocsLte])(props),

    Div([DocsEq, DocsGt, DocsLt, DocsGte, DocsLte])(props),

This might also be a bad idea

useContext Hook Support

Hey there I was wondering if Arche had built in support for the useContext hook? I tried to replicate this jsfiddle using Arche but was having some trouble. I included my code below which is most of the code in the jsfiddle with Arche.

Here is also a quick explanation of the useContext hook if needed.

const { useState, useEffect, useReducer, createContext, useContext } = React
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, Footer, Span, Div, Img, Video,
  Form, Fieldset, Input, Label, Textarea, Select, Option,
  Button, Iframe, Blockquote, Code, Pre,
} = ReactElement

const themes = ['light', 'dark', 'pink']

// error: not a function
const ThemeContext = React.createContext({
  theme: themes[0],
  changeTheme: () => {},
})

const ThemeSwitcher = () => {
  const { theme, changeTheme } = React.useContext(ThemeContext)

  const handleThemeChange = (e) => {
    changeTheme(e.target.value)
  }

  return Div({ class: 'themeSwitcher', id: '' }, [
    P('Select theme:'),
    Select(
      {
        value: theme,
        onChange(e) {
          handleThemeChange(e)
        },
      },
      [
        themes.map((themeOption) => {
          return Option({ value: themeOption, key: themeOption }, themeOption)
        }),
      ]
    ),
  ])
}

const Article = () => {
  const { theme } = React.useContext(ThemeContext)

  return Div({ class: `article ${theme}`, id: '' }, [
    H2({ class: '', id: '' }, 'Fun facts about sloths'),
    P(`Sloths are tropical mammals that live in Central and South America.`),
    P(`There are six species of sloth`),
  ])
}

// how do I do ThemeContext.Provider?
const ArticleWrapper = () => {
  const [theme, setTheme] = React.useState(themes[0])

  return ThemeContext({}, [ThemeSwitcher(), Article()])
}

export default ArticleWrapper

Adding to docs

Is there a way we can add an example in the docs of passing a function as a prop?

For example in a child component how would we pass a function in an onChange event to the parent component?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.