(Runtime) Templates

[lukechu10]

Closes #19

Adds a template system where Template represents the structure of the view! with holes inside. These holes can then be binded to and filled in with the dynamic values.

This should give a big performance boost on the client side because we are cloning templates now instead of creating each and every element individually.
This could also give a performance boost on server-side by allowing us to cache the SSR-ed strings.

This also unlocks other exciting features such as some form of hot view-reloading.

[codecov]

Codecov Report

Base: 64.96% // Head: 63.15% // Decreases project coverage by -1.81% ⚠️

Coverage data is based on head (4dd1360) compared to base (3057f67).
Patch coverage: 61.22% of modified lines in pull request are covered.

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #536      +/-   ##
==========================================
- Coverage   64.96%   63.15%   -1.82%     
==========================================
  Files          53       54       +1     
  Lines        8515     8948     +433     
==========================================
+ Hits         5532     5651     +119     
- Misses       2983     3297     +314     

Impacted Files	Coverage Δ
packages/sycamore-macro/src/view/ir.rs	100.00% <ø> (ø)
packages/sycamore-macro/src/view/mod.rs	61.70% <0.00%> (-1.35%)	⬇️
packages/sycamore-web/src/dom_node.rs	0.00% <0.00%> (ø)
packages/sycamore-web/src/dom_node_template.rs	0.00% <0.00%> (ø)
packages/sycamore-web/src/hydrate_node.rs	0.00% <0.00%> (ø)
packages/sycamore/src/web/mod.rs	87.67% <ø> (-0.65%)	⬇️
packages/sycamore-web/src/lib.rs	21.42% <53.33%> (+17.72%)	⬆️
packages/sycamore/src/web/html.rs	69.65% <69.56%> (ø)
packages/sycamore-core/src/generic_node.rs	75.44% <74.37%> (-24.56%)	⬇️
packages/sycamore/src/builder.rs	24.51% <92.30%> (+1.99%)	⬆️
... and 17 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

[arctic-hen7]

I'd just like to briefly mention that Perseus also has a Template system...is it too late to consider another name for this perhaps to reduce confusion? (This looks fantastic btw!)

[lukechu10]

I'd just like to briefly mention that Perseus also has a Template system...is it too late to consider another name for this perhaps to reduce confusion? (This looks fantastic btw!)

This system should be mostly internal and should probably never be seen by the end-user. The example that I added was just temporary so that I could test the system manually before having the macro codegen it. However, if it does end up being confusing, we can definitely change it to a different name.

[arctic-hen7]

Ah understood! Fantastic, thank you very much! (Side note: this might be a great opportunity for some good architectural docs for Sycamore, which I'd be happy to help write. Would you like me to open a new tracking issue for this?)

[lukechu10]

Side note: this might be a great opportunity for some good architectural docs for Sycamore, which I'd be happy to help write. Would you like me to open a new tracking issue for this?

That sounds like a great idea.

There are some bare-bones docs here https://sycamore-rs.netlify.app/docs/contribute/architecture but they have been very neglected and are extremely outdated. It would be great to update them and also hopefully keep them in sync with whatever new changes that come up.

[lukechu10]

Ok all the core functionality should be here now. All the examples (seem) to work behavior wise.

Also the new hydration support is really nice! We only get 1 hydration key per template now, instead of 1 per element.

The builder API still needs to be fixed since hydration with builder will probably be broken now with the new hydration approach. Unfortunately, I don't think builder could use this new template system and so will probably continue with old system.

[lukechu10]

Benchmark report from CI since the post comment action is broken. Also note that the CI tends to be very noisy so take all this with a grain of salt.

Benchmark Report

• wasm-bindgen: the performance goal
• baseline: performance of sycamore-baseline (typically latest master)
• update: performance of sycamore (typically recent changes)
• diff: measures the improvement of update over the baseline

@@                           Performance Diff                           @@

##                          | wasm-bindgen | baseline |  update |  diff ##
##########################################################################
  01_run1k                  |       145.58 |   165.28 |  163.73 |   -0.94%
+ 02_replace1k              |       145.73 |   193.27 |  185.84 |   -3.84%
+ 03_update10th1k_x16       |       393.72 |   417.80 |  353.76 |  -15.33%
- 04_select1k               |        47.79 |    56.77 |   60.75 |   +7.01%
- 05_swap1k                 |        94.36 |    93.30 |   98.12 |   +5.16%
+ 06_remove-one-1k          |       157.63 |   162.37 |  154.92 |   -4.59%
+ 07_create10k              |      1582.95 |  2142.79 | 1994.91 |   -6.90%
  08_create1k-after1k_x2    |       355.88 |   423.19 |  414.01 |   -2.17%
+ 09_clear1k_x8             |       107.35 |   147.85 |  131.48 |  -11.07%
  21_ready-memory           |         1.87 |     1.83 |    1.85 |   +1.18%
  22_run-memory             |         2.85 |     5.74 |    5.73 |   -0.25%
  23_update5-memory         |         3.02 |     5.74 |    5.89 |   +2.44%
  25_run-clear-memory       |         1.92 |     4.53 |    4.53 |   +0.13%
  26_run-10k-memory         |        13.49 |    41.66 |   41.93 |   +0.64%
  31_startup-ci             |      1831.96 |  37.92 | 1982.52 |   -2.72%
  32_startup-bt             |         0.00 |     0.00 |    0.00 |     NaN%
+ 33_startup-mainthreadcost |        25.94 |    20.45 |   13.65 |  -33.%
- 34_startup-totalbytes     |       189.33 |   3.08 |  5.76 |   +8.01%