Related Issue

resolves #108

demo PR available at thescientist13/greenwood-counter-jsx#3

Summary of Changes

1. Fine grained observability for basic textContent replacements

TODO

1. Fine grained observability for Shadow DOM
2. Attributes
3. Testing
4. Documentation
   • JSX expressions must be wrapped in a tag
5. rebase + validate all sandbox examples
6. sync with upstream example (get it working for dev and build)
7. expressions result in unexpected placeholders, e.g. counter-dsd.tsx (separate issue is that the width prop is missing!)

   <img width={10} />

   <img data-wcc-undefined="width" data-wcc-ins="attr">

8. more test cases
9. handle this patch for proper attributes update tracking (rebase after fix: #219 preserve JSX literal attribute expressions #220 and add test case) - https://github.com/thescientist13/wcc-jsx-to-signals/commit/c1e8b161e53626b9433fee3b03691a9bff30337a#diff-e9c5473d52ced93bb8c448f6c0acd03932ade34ce1d2ed0a17d42ff8badcc051R102
10. handle this patch for empty strings breaking change detection - https://github.com/thescientist13/wcc-jsx-to-signals/commit/7f6ea885f267c3d4d7045fa07f27cbe36f10478d#diff-e9c5473d52ced93bb8c448f6c0acd03932ade34ce1d2ed0a17d42ff8badcc051R442
11. greenwood upstream testing
12. clean up console logs / comments / etc
13. track all TODOs / nice to haves - will save these for the signals hacking

NICE TO HAVE

1. Can it handle things like loops, like a list? (e.g. Todo App)
   • actually, when / if everything is just "signals" does the initial render matter?
2. (nice to have) Co-mingled interpolations - make it so JSX expressions don't have to be wrapped in DOM elements, e.g.

   // does not work
   <h1>Hello, {greeting}!</h1>
   
   <span class={conditionalClass}>{count}{conditionalText}</span>
   
   // works
   <h1>Hello, <span>{greeting}</span>!</h1>
   
   <span class={conditionalClass}><span>{count}</span>{conditionalText}</span>

3. be able to remove this extra data attribute (name and instruction), e.g.

   // string = `${string.slice(0, string.lastIndexOf('>'))} data-wcc-${name} data-wcc-ins="text">`