richytong / arche Goto Github PK
View Code? Open in Web Editor NEWHTML as JavaScript
License: MIT License
HTML as JavaScript
License: MIT License
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?
I would like to define behavior for createElement in all environments
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
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
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)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.