Commit Graph
6 Commits
Author SHA1 Message Date
phonedu 878e299724 M6: keep Vue attribute context and escape plain attribute entities
A quoted Vue attribute stays open across placeholders, so `title="{a} {b}"` escapes both values as attribute text. Plain Vue attribute values in instance calls now HTML-escape `&`, `<` and `>`, so a literal `&amp;` survives the round trip. Tests cover both.
2026-10-23 10:29:46 +08:00
phonedu a132eb3768 M6: fix Vue bindings, instance guards and slot catalogs
Vue connected templates keep a string's JS quotes inside bound attributes, so `:title={title}` becomes `:title="&quot;Buy&quot;"` rather than a bare identifier; static attributes take plain text. Nested instances no longer lose a boolean `v-if` guard, instance swaps render through `<component :is>`, slot names stay distinct when their idents lowercase alike, slot content CSS reaches the parent stylesheet, and text defaults escape `</script>` in the script block. The five locale catalogs the Vue key rename missed (bn, fi, ka, nl, pl) are updated, and the docs list Leptos/Vue consistently.
2026-10-22 19:52:58 +08:00
phonedu 7c211d8b0d Review: escape Vue binding attributes and use the template's indent
- usage: a non-plain Vue argument escapes " as &quot; in the attribute value (same rule as the connected-code path)
- usage: Vue pads with two spaces like the markup, not four
- test: an unconnected instance with a quoted title asserts inspect.componentCode and inspect.code
2026-10-22 14:46:07 +08:00
NetterSilverandClaude Haiku 5.5 e8a30df944 Give case-colliding variant properties distinct data attributes
Fixes #456

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-15 10:57:13 +02:00
24c5617230 feat(dev-mode): Leptos code with component properties, instance calls and Code Connect (#240)
* feat(dev-mode): Leptos code for a layer tree (#223)

inspect.code takes language: leptos, and the Inspect panel lists it: the
HTML markup inside a #[component] fn's view!, with the stylesheet after it
as for React. Text is Rust string literals (line breaks as <br/>) so the
macro parses it; px or rem like the other web languages.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* feat(dev-mode): Leptos components take their properties, instances are calls (#223)

Leptos joins React in component code: a component or set is a #[component]
fn with #[prop] defaults (variant enums with as_str, bool, String, ViewFn
for instance swaps, Option<ViewFn> for slots), layers bound to booleans
show through .then, variants differ by data-* CSS rules, and instances
(also inside layer trees) are calls passing the values they change. Names
are snake_case, Rust keywords get a trailing _. Code Connect takes leptos
too (use <path>::<Name>; view! markup). Markup now takes the language
instead of jsx/leptos flags; React and Leptos share the stylesheet pass.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

---------

Co-authored-by: Justin John <babyjjbabyjj549@gmail.com>
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
Co-authored-by: bflatastic <bombayapirat@gmail.com>
2026-10-14 10:32:14 +07:00
BFlatandClaude Opus 5.5 d16878588f M6: Dev Mode component code, annotations and ready for dev (#80)
* M6: Dev Mode component code, annotations and ready for dev

- Component code: React (new), SwiftUI and Compose write components as reusable
  units whose component properties are parameters (variant unions/enums,
  boolean flags, text strings, instance swaps as views, slots as optional
  content); variant sets share one definition (React: data-* rules for the
  other variants); instances are calls passing only the values they change.
  Escaped, unique identifiers. `inspect.componentCode` returns the parts.
- Annotations: notes with pinned properties on any layer, saved with the file
  (left out when empty), undoable `annotation.add/edit/remove`, `annotation.list`
  with live values; drawn as callouts on the canvas in the Inspect tab and
  edited in its Annotations section. Instances keep their own annotations.
- Ready for dev: `inspect.readyForDev` lists frames and sections by handoff
  status; the Inspect tab sets the status and lists them with a filter.
- Shared widgets: a multi-line field and the status dropdown are reused.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* M6: test that bound variables become CSS custom properties

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* M6: regenerate the parity report

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-10 14:55:33 +07:00