Skip to content

Commit 7c9f3fb

Browse files
easafeeasafe
authored
New virtual node and renderer architecture (#36)
* New virtual node and renderer architecture _WIP: opening early for feedback and testing_ * Fixed class updating; added more tests for node data & lazy nodes * Class merging test; added benchmark implementations * Tests for creation/update of fragment/svg/lazy nodes; renamed innerHtml * Consistent changes; tests for root container; fixed node polution in tests * Fixed non message events; create extra nodes for server side rendering; added all tests back * Moved key & lazy to Html; added managed nodes for hooks * Fix server side inner html * Fix properties spilling into attributes; fix removing all node attributes * Support conditional views; fix hydration of missing element nodes; install events on the root, not document * Use node for managed html; fix removing all events * Add key to export list * Removed unneed Int32Arrays * Attempt at reusing objects * Fix hydration of fragment nodes * Fixed hydrating managed nodes * Test for child fragment hydration * More tests for keyed * Rebased * Multiple handlers per event; fix patching children of nodes that use innerHtml * Check for text changes * htmlFor => for * Clear current node if it uses innerHTML * Differentiate between bubbling and non bubbling events * Set it on parent if children is single text * Fix unsetting text nodes * Attempt at functors * Avoid text reference copy * list as attribute * dont use text if innerHtml has been set * Handle text content <=> child node reuse updates * First pass at new documentation * Second pass at documentation * Simplify example folders; add extra example; add clarification to documentation * Fix lazy nodes example
1 parent 80c0925 commit 7c9f3fb

File tree

161 files changed

+5684
-9463
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

161 files changed

+5684
-9463
lines changed

‎.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ _site/
1919

2020
scratchpad.*
2121
scratchpadloader.*
22-
22+
vendor
2323
.cache
24+
.bundle
2425

2526
.spago

‎README.md

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Flame [![Build Status](https://travis-ci.com/easafe/purescript-flame.svg?branch=master)](https://travis-ci.com/easafe/purescript-flame)
22

3-
Flame is a fast & simple framework for building web applications in PureScript inspired by [purescript-hedwig](https://github.com/utkarshkukreti/purescript-hedwig) and Elm
3+
Flame is a fast & simple framework inspired by the Elm architecture for building web applications in PureScript
44

55
## Documentation
66

@@ -15,23 +15,22 @@ See the [examples folder](/examples)
1515
Install:
1616

1717
```bash
18-
npm install snabbdom snabbdom-to-html # for server side rendering
1918
bower install purescript-flame
2019
```
2120

2221
Example counter app:
2322

2423
```purescript
25-
module App.Main where
24+
module Counter.Main where
2625
2726
import Prelude
2827
2928
import Effect (Effect)
3029
import Flame (Html, QuerySelector(..))
3130
-- Update strategy for side effects free functions; see docs for other strategies
3231
import Flame.Application.NoEffects as FAN
33-
import Flame.HTML.Element as HE
34-
import Flame.HTML.Attribute as HA
32+
import Flame.Html.Element as HE
33+
import Flame.Html.Attribute as HA
3534
3635
-- | The model represents the state of the app
3736
type Model = Int
@@ -46,23 +45,23 @@ init = 0
4645
-- | `update` is called to handle events
4746
update :: Model -> Message -> Model
4847
update model = case _ of
49-
Increment -> model + 1
50-
Decrement -> model - 1
48+
Increment -> model + 1
49+
Decrement -> model - 1
5150
5251
-- | `view` is called whenever the model is updated
5352
view :: Model -> Html Message
5453
view model = HE.main "main" [
55-
HE.button [HA.onClick Decrement] "-",
56-
HE.text $ show model,
57-
HE.button [HA.onClick Increment] "+"
54+
HE.button [HA.onClick Decrement] "-",
55+
HE.text $ show model,
56+
HE.button [HA.onClick Increment] "+"
5857
]
5958
6059
-- | Mount the application on the given selector
6160
main :: Effect Unit
62-
main = FAN.mount_ (QuerySelector "main") {
63-
init,
64-
update,
65-
view
61+
main = FAN.mount_ (QuerySelector "body") {
62+
init,
63+
update,
64+
view
6665
}
6766
```
6867

‎benchmarks/js-framework-benchmark/keyed/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Flame v0.9.0</title>
6+
<link href="/css/currentStyle.css" rel="stylesheet" />
7+
</head>
8+
<body>
9+
<div id=mount></div>
10+
<script src="dist/bundle.js"></script>
11+
</body>
12+
</html>

‎benchmarks/js-framework-benchmark/keyed/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
require('./dce-output/Main').main();

‎benchmarks/js-framework-benchmark/keyed/package.json

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "js-framework-benchmark-keyed-flame",
3+
"sideEffects": false,
4+
"version": "1.0.0",
5+
"description": "Purescript Flame JS Benchmark",
6+
"main": "index.js",
7+
"js-framework-benchmark": {
8+
"frameworkVersion": "0.9.0"
9+
},
10+
"scripts": {
11+
"postinstall": "spago install",
12+
"clean": "rm -rf dist output .spago node_modules",
13+
"build": "spago build",
14+
"build-prod": "spago build --purs-args '--codegen corefn,js' && zephyr -f Main.main && webpack --config=webpack.flame.config.js"
15+
},
16+
"keywords": [
17+
"purescript",
18+
"flame"
19+
],
20+
"author": "Eduardo Asafe <e@asafe.dev>",
21+
"license": "ISC",
22+
"homepage": "https://github.com/krausest/js-framework-benchmark",
23+
"repository": {
24+
"type": "git",
25+
"url": "https://github.com/krausest/js-framework-benchmark.git"
26+
},
27+
"devDependencies": {
28+
"purescript": "0.13.8",
29+
"snabbdom-to-html": "^5.1.1",
30+
"spago": "0.16.0",
31+
"webpack": "^4.44.1",
32+
"webpack-cli": "^3.3.12"
33+
}
34+
}

‎benchmarks/js-framework-benchmark/keyed/packages.dhall

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
let upstream =
2+
https://github.com/purescript/package-sets/releases/download/psc-0.13.8-20200822/packages.dhall sha256:b4f151f1af4c5cb6bf5437489f4231fbdd92792deaf32971e6bcb0047b3dd1f8
3+
4+
let overrides = { = }
5+
6+
let additions = {
7+
flame =
8+
{ dependencies =
9+
[ "prelude",
10+
"console",
11+
"effect",
12+
"web-events",
13+
"web-dom",
14+
"web-html",
15+
"nullable",
16+
"aff",
17+
"signal",
18+
"foreign-object",
19+
"argonaut-generic"
20+
]
21+
, repo =
22+
"https://github.com/easafe/purescript-flame.git"
23+
, version =
24+
"e04514f4a03d492896f01b93c2d6e403e39d354e"
25+
}
26+
}
27+
28+
in upstream // overrides // additions

‎benchmarks/js-framework-benchmark/keyed/spago.dhall

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{ name = "js-framework-benchmark-flame"
2+
, dependencies = [ "flame" ]
3+
, packages = ./packages.dhall
4+
, sources = [ "src/**/*.purs" ]
5+
}

‎benchmarks/js-framework-benchmark/keyed/src/Main.js

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
function _random(max) {
2+
return Math.round(Math.random() * 1000) % max;
3+
}
4+
5+
var adjectives = [
6+
"pretty",
7+
"large",
8+
"big",
9+
"small",
10+
"tall",
11+
"short",
12+
"long",
13+
"handsome",
14+
"plain",
15+
"quaint",
16+
"clean",
17+
"elegant",
18+
"easy",
19+
"angry",
20+
"crazy",
21+
"helpful",
22+
"mushy",
23+
"odd",
24+
"unsightly",
25+
"adorable",
26+
"important",
27+
"inexpensive",
28+
"cheap",
29+
"expensive",
30+
"fancy"
31+
],
32+
colours = [
33+
"red",
34+
"yellow",
35+
"blue",
36+
"green",
37+
"pink",
38+
"brown",
39+
"purple",
40+
"brown",
41+
"white",
42+
"black",
43+
"orange"
44+
],
45+
nouns = [
46+
"table",
47+
"chair",
48+
"house",
49+
"bbq",
50+
"desk",
51+
"car",
52+
"pony",
53+
"cookie",
54+
"sandwich",
55+
"burger",
56+
"pizza",
57+
"mouse",
58+
"keyboard"
59+
];
60+
61+
exports.createRandomNRows_ = function(count, lastId) {
62+
var data = [];
63+
64+
for (var i = 0; i < count; i++)
65+
data.push({
66+
id: ++lastId,
67+
selected: false,
68+
label:
69+
adjectives[_random(adjectives.length)] +
70+
" " +
71+
colours[_random(colours.length)] +
72+
" " +
73+
nouns[_random(nouns.length)]
74+
});
75+
76+
return data;
77+
}

0 commit comments

Comments
 (0)