@vue-lynx-example/main-thread 0.1.1

package/src/main-thread-draggable-raw/index.ts

@@ -0,0 +1,6 @@
+import { createApp } from 'vue-lynx';
+
+import App from './App.vue';
+
+const app = createApp(App);
+app.mount();

package/src/shared-module/App.vue

@@ -0,0 +1,77 @@
+<!-- Copyright 2026 Xuan Huang (huxpro). All rights reserved.
+     Licensed under the Apache License Version 2.0 that can be found in the
+     LICENSE file in the root directory of this source tree. -->
+
+<!--
+  Shared Module Demo
+
+  Tap the colored box to cycle through colors. The color-utils module is
+  imported with `with { runtime: 'shared' }` so both threads can use the
+  same `getNextColor()` function — the Main Thread calls it directly in
+  the tap handler, and the Background Thread calls it to display the name.
+-->
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import {
+  useMainThreadRef,
+  runOnBackground,
+} from 'vue-lynx'
+import { getNextColor, getColorCount } from './color-utils' with { runtime: 'shared' }
+
+// --- Background Thread state ---
+const count = ref(0)
+const currentColor = computed(() => getNextColor(count.value))
+
+// --- Main Thread function ---
+const boxRef = useMainThreadRef(null)
+
+const onTap = () => {
+  'main thread'
+  // Use shared function directly on the Main Thread to get color
+  const idx = (boxRef as unknown as { current?: { __colorIdx?: number } }).current?.__colorIdx ?? 0
+  const nextIdx = idx + 1
+  const color = getNextColor(nextIdx)
+
+  const el = (boxRef as unknown as {
+    current?: {
+      setStyleProperty?(k: string, v: string): void
+      __colorIdx?: number
+    }
+  }).current
+  el?.setStyleProperty?.('background-color', color)
+  if (el) el.__colorIdx = nextIdx
+
+  // Also update BG state so the text reflects the change
+  runOnBackground(incrementCount)()
+}
+
+function incrementCount() {
+  count.value++
+}
+</script>
+
+<template>
+  <view :style="{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: 'white' }">
+    <view
+      :main-thread-ref="boxRef"
+      :main-thread-bindtap="onTap"
+      :style="{
+        width: '200px',
+        height: '200px',
+        backgroundColor: currentColor,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: '16px',
+      }"
+    >
+      <text :style="{ fontSize: 16, color: 'white', fontWeight: 'bold' }">
+        Tap to cycle
+      </text>
+      <text :style="{ fontSize: 14, color: 'white', marginTop: '8px' }">
+        Color {{ (count % getColorCount()) + 1 }}/{{ getColorCount() }}
+      </text>
+    </view>
+  </view>
+</template>

package/src/shared-module/color-utils.ts

@@ -0,0 +1,21 @@
+// Copyright 2026 Xuan Huang (huxpro). All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+/**
+ * Shared color utilities — available on both Main Thread and Background Thread.
+ *
+ * This module does NOT contain a 'main thread' directive. It is imported
+ * with `with { runtime: 'shared' }` so that its code is included in both
+ * thread bundles.
+ */
+
+const COLORS = ['#4FC3F7', '#81C784', '#FFB74D', '#E57373', '#BA68C8']
+
+export function getNextColor(index: number): string {
+  return COLORS[index % COLORS.length]!
+}
+
+export function getColorCount(): number {
+  return COLORS.length
+}

package/src/shared-module/index.ts

@@ -0,0 +1,17 @@
+// Copyright 2026 Xuan Huang (huxpro). All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+/**
+ * Shared Module Demo
+ *
+ * Demonstrates `import ... with { runtime: 'shared' }` to share plain
+ * utility functions between the Main Thread and Background Thread.
+ */
+
+import { createApp } from 'vue-lynx';
+
+import App from './App.vue';
+
+const app = createApp(App);
+app.mount();

package/src/shims-vue.d.ts

@@ -0,0 +1,11 @@
+declare module '*.vue' {
+  import type { Component } from 'vue-lynx';
+
+  const component: Component;
+  export default component;
+}
+
+declare module '*.png' {
+  const src: string;
+  export default src;
+}

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "noEmit": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false
+  },
+  "include": ["src", "lynx.config.ts"]
+}