diff options
| author | Hayleigh Thompson <me@hayleigh.dev> | 2022-05-14 10:26:15 +0100 |
|---|---|---|
| committer | Hayleigh Thompson <me@hayleigh.dev> | 2022-05-14 10:26:15 +0100 |
| commit | beab31ed70c81259cf4940232d7200d144d87e34 (patch) | |
| tree | 7397b5b75b93a8c049485839642ca0a609747be3 | |
| parent | 91ec4caad7fedff7859f5a695f977fb91e163e53 (diff) | |
| download | lustre-beab31ed70c81259cf4940232d7200d144d87e34.tar.gz lustre-beab31ed70c81259cf4940232d7200d144d87e34.zip | |
:sparkles: Create a special-case 'style' attribute because React is awkward.
| -rw-r--r-- | src/ffi.mjs | 10 | ||||
| -rw-r--r-- | src/lustre/attribute.gleam | 11 |
2 files changed, 18 insertions, 3 deletions
diff --git a/src/ffi.mjs b/src/ffi.mjs index 2352f01..89642c0 100644 --- a/src/ffi.mjs +++ b/src/ffi.mjs @@ -4,7 +4,7 @@ import * as Gleam from './gleam.mjs' // ----------------------------------------------------------------------------- -export const mount = ({ init, update, view }, selector) => { +export const mount = ({ init, update, render }, selector) => { const root = document.querySelector(selector) if (!root) { @@ -22,8 +22,12 @@ export const mount = ({ init, update, view }, selector) => { const App = React.createElement(() => { const [state, dispatch] = React.useReducer(update, init) + const el = render(state) - return view(state)(dispatch) + + return typeof el == 'string' + ? el + : el(dispatch) }) ReactDOM.render(App, root) @@ -108,4 +112,6 @@ export const map = (element, f) => (dispatch) => { // ----------------------------------------------------------------------------- +export const object = (entries) => Object.fromEntries(entries) + const capitalise = s => s && s[0].toUpperCase() + s.slice(1) diff --git a/src/lustre/attribute.gleam b/src/lustre/attribute.gleam index 745e834..c1fd213 100644 --- a/src/lustre/attribute.gleam +++ b/src/lustre/attribute.gleam @@ -18,4 +18,13 @@ pub fn property (name: String, value: Dynamic) -> Attribute(action) { pub fn event (name: String, handler: fn (Dynamic, fn (action) -> Nil) -> Nil) -> Attribute(action) { Event(name, handler) -}
\ No newline at end of file +} + +// + +pub fn style (properties: List(#(String, String))) -> Attribute(action) { + property("style", style_object(properties)) +} + +external fn style_object (properties: List(#(String, String))) -> Dynamic + = "../ffi.mjs" "object" |