Comments (7)
Essentially writing hook and writing a component is almost the same:
function Form (props) {
return JSX
}
function useForm (props, deps) {
return JSX
}
Component is just a form of hook, returning JSX.
from spect.
! mod can directly depend on it's props, so that is called only when it's props changed
@mod
function content (el, props) {
@mod
let result = fx(subProps)
}
from spect.
! portals as
function App(props) {
render(<jsx.../>, target)
render(<jsx.../>, root)
}
same as
render(<jsx1> ...<jsx2/> </jsx1>)
each nested tag is mounted on the parent container.
The structure tries to repeat itself, to make parent match to the part of code
from spect.
useEffect
without dependencies is the same as useEffect(fn, [...props])
. Effect with blank deps should be equivalent to run-once, not run-always.
This way, hooks are just conditional execution decorators over functions
@deps(props)
fx(){}
or more generally
@condition(props => true|false)
fx() {}
in other words
if (propsChanged)
fx(){}
from spect.
Looking at https://github.com/dy/mods/blob/master/hooks-components.jsx, the pattern emerges.
Since component is a set of connections/subscriptions to model, triggering update; and update is a set of conditional reactions/effects - that can be organized as a class with decorators, not extending some generic class but just using entries.
Inspiration: https://github.com/tc39/proposal-decorators#tracked
class Mod {
// useState equivalent / @initialize
@state value = initial
@query
query,
@history
history,
// created once, therefore a sense to have it as decorator
@async(api.getCatalog)
catalog = api.getCatalog,
@async
categories = api.getCategories,
@deps(catalog, )
products,
// assigning new selectedProduct triggers rerendering
@state(null)
selectedProduct,
// rerender modal whenever any of the props change as an effect
@deps(props)
@mount(modal-root)
selectedModal = (props) => <dialog {...props} />
// reinit css whenever any of the props change
@css(a, b, c)
rootStyle (a, b, c) { return `.class-1 {} .class2 {}` }
// main render
render (props) {}
}
from spect.
ok, waiting for the decorators to come.
Better focus on mods- JSX now, there isn't going to be any updates.
!decorators for JSX
<div @provide() @css() >
</div>
from spect.
Hooks are not components, hooks are parts of the components/custom elements behavior/effects.
from spect.
Related Issues (20)
- h: cache element by stack instead of creating anew HOT 1
- h: drop parser, use htm HOT 2
- v β f, v. Shaving off API, v as proxy HOT 6
- operators HOT 1
- 0b HOT 1
- v ~~as proxy~~ as observable HOT 1
- v: access multiarg values as [0], [1] etc. HOT 1
- $ β selector-collection HOT 2
- h: keyed. Why not morphing? HOT 3
- v(v0, v1, v2) - observables as args HOT 1
- $: pseudos? HOT 1
- h/$ - a nice way to convert data to template? HOT 2
- add Github Corner to spect.ly and fix typo HOT 2
- v23: animevents-only $ HOT 1
- 23.0: API reconsiderations, half-a-year later
- $: stop infinite recursion HOT 1
- $: first run flickers
- $(parent, β> childβ)
- h: lists; diff algo is underused. Possible syntax HOT 1
- spect@24 breaks integration tests with subscribable-things HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from spect.