@vue-lynx-example/css-features 0.2.2 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-lynx-example/css-features",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "private": false,
   "description": "Vue-Lynx CSS features demo — scoped, modules, v-bind()",
   "license": "Apache-2.0",
@@ -17,7 +17,7 @@
     "directory": "examples/css-features"
   },
   "dependencies": {
-    "vue-lynx": "0.2.0"
+    "vue-lynx": "0.3.1"
   },
   "devDependencies": {
     "@lynx-js/rspeedy": "^0.13.5",

package/src/App.vue

@@ -3,6 +3,7 @@ import PlainStyle from './PlainStyle.vue'
 import ScopedStyle from './ScopedStyle.vue'
 import CSSModules from './CSSModules.vue'
 import VBindCSS from './VBindCSS.vue'
+import VBindThreads from './VBindThreads.vue'
 import CSSVarsWorkaround from './CSSVarsWorkaround.vue'
 import ImportedCSS from './ImportedCSS.vue'
 </script>
@@ -19,15 +20,18 @@ import ImportedCSS from './ImportedCSS.vue'
     <!-- 1. Plain <style> — WORKS -->
     <PlainStyle />
 
-    <!-- 2. <style scoped> — DOES NOT WORK -->
+    <!-- 2a. <style scoped> — DOES NOT WORK -->
     <ScopedStyle />
 
     <!-- 3. <style module> — SHOULD WORK -->
     <CSSModules />
 
-    <!-- 4. v-bind() in CSS — DOES NOT WORK -->
+    <!-- 4. v-bind() in CSS — WORKS (useCssVars implemented in vue-lynx) -->
     <VBindCSS />
 
+    <!-- 4b. v-bind() thread comparison — BG (useCssVars) vs MT (setStyleProperty) -->
+    <VBindThreads />
+
     <!-- 5. Workaround: Reactive inline :style -->
     <CSSVarsWorkaround />
 

package/src/VBindCSS.vue

@@ -1,44 +1,166 @@
 <script setup lang="ts">
-// Test: v-bind() in <style>
-//
-// RESULT: BUILD ERROR — confirmed.
-//
-// Vue's v-bind() in CSS compiles to a `useCssVars()` call, which is a
-// @vue/runtime-dom API (not runtime-core). vue-lynx only re-exports from
-// @vue/runtime-core, so this API is unavailable.
-//
-// Error message:
-//   ESModulesLinkingError: export 'useCssVars' (imported as '_useCssVars')
-//   was not found in 'vue'
-//
-// Even if useCssVars were exported, it would not work because:
-//   1. useCssVars internally calls `document.getElementById()` — no document in Lynx
-//   2. It sets CSS vars via `el.style.setProperty()` — DOM API, not available
-//   3. The Background Thread cannot directly access native element styles
-//
-// WORKAROUND: Use computed() + reactive :style bindings instead.
-// See CSSVarsWorkaround.vue for the recommended pattern.
+import { ref, computed } from 'vue'
+
+const textColor = ref('#1565c0')
+const bgColor = ref('#e3f2fd')
+const fontSize = ref('14px')
+const opacity = ref(1)
+const borderStyle = ref({ color: '#1565c0' })
+
+const invertedColor = computed(() => {
+  const map: Record<string, string> = {
+    '#1565c0': '#f57f17',
+    '#c62828': '#2e7d32',
+    '#2e7d32': '#c62828',
+    '#f57f17': '#1565c0',
+  }
+  return map[textColor.value] ?? textColor.value
+})
+
+function cycleColor() {
+  const colors = ['#1565c0', '#c62828', '#2e7d32', '#f57f17']
+  const idx = colors.indexOf(textColor.value)
+  textColor.value = colors[(idx + 1) % colors.length]
+  const bgs = ['#e3f2fd', '#ffebee', '#e8f5e9', '#fffde7']
+  bgColor.value = bgs[(idx + 1) % bgs.length]
+  borderStyle.value = { color: colors[(idx + 1) % colors.length] }
+}
+
+function cycleFontSize() {
+  const sizes = ['12px', '14px', '16px', '20px']
+  const idx = sizes.indexOf(fontSize.value)
+  fontSize.value = sizes[(idx + 1) % sizes.length]
+}
+
+function cycleOpacity() {
+  const steps = [1, 0.7, 0.4, 0.1]
+  const idx = steps.indexOf(opacity.value)
+  opacity.value = steps[(idx + 1) % steps.length]
+}
 </script>
 
 <template>
   <view :style="{
     display: 'flex',
     flexDirection: 'column',
-    backgroundColor: '#ffebee',
+    backgroundColor: bgColor,
     padding: '12px',
     borderRadius: '8px',
     marginBottom: '12px',
   }">
-    <text :style="{ fontSize: '15px', fontWeight: 'bold', color: '#c62828', marginBottom: '4px' }">
-      v-bind() in &lt;style&gt; — BUILD ERROR
+    <text :style="{ fontSize: '15px', fontWeight: 'bold', marginBottom: '4px' }" class="title">
+      v-bind() in &lt;style&gt; — WORKS
+    </text>
+    <text class="description">
+      textColor: {{ textColor }} | fontSize: {{ fontSize }} | opacity: {{ opacity }}
+    </text>
+
+    <!-- ref binding -->
+    <text class="sample-text" :style="{ fontSize }">
+      ref — color: v-bind(textColor)
+    </text>
+
+    <!-- computed binding -->
+    <text class="computed-text" :style="{ fontSize }">
+      computed — inverted color
+    </text>
+
+    <!-- object property binding: v-bind('obj.prop') -->
+    <text class="border-text">
+      object prop — v-bind('borderStyle.color')
     </text>
-    <text :style="{ fontSize: '12px', color: '#555', marginBottom: '8px' }">
-      Vue's v-bind() in CSS compiles to useCssVars() which is a
-      @vue/runtime-dom API. vue-lynx only uses @vue/runtime-core,
-      so this causes an ESModulesLinkingError at build time.
+
+    <!-- opacity binding -->
+    <text class="opacity-text">
+      opacity — v-bind(opacity)
     </text>
-    <text :style="{ fontSize: '11px', color: '#888', fontStyle: 'italic' }">
-      Workaround: use computed() + :style bindings (see below)
+
+    <!-- CSS custom property via v-bind -->
+    <text class="var-text">
+      CSS var — --accent: v-bind(textColor)
     </text>
+
+    <view :style="{ display: 'flex', flexDirection: 'row', gap: '8px', marginTop: '8px', flexWrap: 'wrap' }">
+      <text
+        :style="{
+          backgroundColor: '#1565c0',
+          color: '#fff',
+          padding: '6px 12px',
+          borderRadius: '4px',
+          fontSize: '12px',
+        }"
+        :bindtap="cycleColor"
+      >
+        Cycle Color
+      </text>
+      <text
+        :style="{
+          backgroundColor: '#2e7d32',
+          color: '#fff',
+          padding: '6px 12px',
+          borderRadius: '4px',
+          fontSize: '12px',
+        }"
+        :bindtap="cycleFontSize"
+      >
+        Cycle Size
+      </text>
+      <text
+        :style="{
+          backgroundColor: '#6a1b9a',
+          color: '#fff',
+          padding: '6px 12px',
+          borderRadius: '4px',
+          fontSize: '12px',
+        }"
+        :bindtap="cycleOpacity"
+      >
+        Cycle Opacity
+      </text>
+    </view>
   </view>
 </template>
+
+<style>
+.title {
+  color: v-bind(textColor);
+}
+
+.description {
+  font-size: 11px;
+  color: #555;
+  margin-bottom: 8px;
+}
+
+.sample-text {
+  color: v-bind(textColor);
+  font-weight: bold;
+  margin-bottom: 4px;
+}
+
+.computed-text {
+  color: v-bind(invertedColor);
+  font-weight: bold;
+  margin-bottom: 4px;
+}
+
+.border-text {
+  color: v-bind('borderStyle.color');
+  font-weight: bold;
+  margin-bottom: 4px;
+}
+
+.opacity-text {
+  color: v-bind(textColor);
+  opacity: v-bind(opacity);
+  font-weight: bold;
+  margin-bottom: 4px;
+}
+
+.var-text {
+  --accent: v-bind(textColor);
+  color: var(--accent);
+  font-weight: bold;
+  margin-bottom: 8px;
+}
+</style>

package/src/VBindThreads.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+// VBindThreads — audits both style-update paths:
+//
+// LEFT  (Background Thread)
+//   tap → BG JS handler → reactive ref → useCssVars → SET_STYLE op → MT applies CSS var
+//
+// RIGHT (Main Thread)
+//   tap → MT worklet → setStyleProperty() directly (no ops round-trip)
+//         + runOnBackground(incrementMtCount) to sync tap count for display
+
+import { ref, watch } from 'vue'
+import { useMainThreadRef, runOnBackground, runOnMainThread } from 'vue-lynx'
+
+const COLORS = ['#1565c0', '#c62828', '#2e7d32', '#f57f17', '#6a1b9a']
+
+// --- Background thread ---
+const bgColorIdx = ref(0)
+const bgColor = ref(COLORS[0]!)
+const bgTapCount = ref(0)
+
+function onBgTap() {
+  bgTapCount.value++
+  bgColorIdx.value = (bgColorIdx.value + 1) % COLORS.length
+  bgColor.value = COLORS[bgColorIdx.value]!
+}
+
+// --- Main thread ---
+const mtBoxRef = useMainThreadRef(null)
+const mtTapCount = ref(0)
+
+// Incremented on BG by runOnBackground() from the MT tap handler
+function incrementMtCount() {
+  mtTapCount.value++
+}
+
+// MT-local index — lives in MT JS context, not shared with BG reactive state.
+// Captured by the SWC worklet transform into _c.
+let mtColorIdx = 0
+
+const onMtTap = () => {
+  'main thread'
+  // Cycle color directly on MT — no round-trip through BG
+  mtColorIdx = (mtColorIdx + 1) % COLORS.length
+  const el = (mtBoxRef as unknown as {
+    current?: { setStyleProperty?(k: string, v: string): void }
+  }).current
+  el?.setStyleProperty?.('background-color', COLORS[mtColorIdx]!)
+
+  // Sync tap count back to BG for display only
+  runOnBackground(incrementMtCount)()
+}
+</script>
+
+<template>
+  <view :style="{
+    display: 'flex',
+    flexDirection: 'column',
+    backgroundColor: '#f3e5f5',
+    padding: '12px',
+    borderRadius: '8px',
+    marginBottom: '12px',
+  }">
+    <text :style="{ fontSize: '15px', fontWeight: 'bold', marginBottom: '4px', color: '#4a148c' }">
+      Thread comparison — style updates
+    </text>
+    <text :style="{ fontSize: '11px', color: '#555', marginBottom: '10px' }">
+      Both boxes cycle colors on tap. BG path uses v-bind() in CSS; MT path calls setStyleProperty() directly.
+    </text>
+
+    <view :style="{ display: 'flex', flexDirection: 'row', gap: '12px' }">
+      <!-- Background thread box -->
+      <view :style="{ flex: 1 }">
+        <text :style="{ fontSize: '11px', color: '#555', marginBottom: '4px', textAlign: 'center' }">
+          Background thread
+        </text>
+        <view
+          class="bg-box"
+          :bindtap="onBgTap"
+          :style="{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '80px',
+            borderRadius: '8px',
+          }"
+        >
+          <text :style="{ fontSize: '12px', color: '#fff', fontWeight: 'bold' }">
+            Taps: {{ bgTapCount }}
+          </text>
+        </view>
+        <text :style="{ fontSize: '10px', color: '#888', marginTop: '4px', textAlign: 'center' }">
+          v-bind(bgColor) in CSS
+        </text>
+      </view>
+
+      <!-- Main thread box -->
+      <view :style="{ flex: 1 }">
+        <text :style="{ fontSize: '11px', color: '#555', marginBottom: '4px', textAlign: 'center' }">
+          Main thread
+        </text>
+        <view
+          :main-thread-ref="mtBoxRef"
+          :main-thread-bindtap="onMtTap"
+          :style="{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '80px',
+            borderRadius: '8px',
+            backgroundColor: '#1565c0',
+          }"
+        >
+          <text :style="{ fontSize: '12px', color: '#fff', fontWeight: 'bold' }">
+            Taps: {{ mtTapCount }}
+          </text>
+        </view>
+        <text :style="{ fontSize: '10px', color: '#888', marginTop: '4px', textAlign: 'center' }">
+          setStyleProperty() on MT
+        </text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style>
+.bg-box {
+  background-color: v-bind(bgColor);
+}
+</style>