chore(web): main-thread remove global-bind usage, to preview this exampl…

.changeset/huge-baths-remain.md

@@ -0,0 +1,5 @@
+---
+"@lynx-example/main-thread": patch
+---
+
+chore: main-thread remove global-bind usage, to preview this example in the future

examples/main-thread/lynx.config.ts

@@ -16,4 +16,9 @@ export default defineConfig({
     pluginReactLynx(),
     pluginTypeCheck(),
   ],
+  environments: {
+    lynx: {},
+    // can open when web supports querySelector
+    // web: {},
+  },
 });

examples/main-thread/src/background-draggable/App.tsx

@@ -1,6 +1,18 @@
+import { useState } from "@lynx-js/react";
+import type { ScrollEvent } from "@lynx-js/types";
 import { BackgroundDraggable } from "./BackgroundDraggable.jsx";
 
 export function App() {
+  const [posStyle, setPosStyle] = useState({ x: 0, y: 500 });
+  const onScroll = (event: ScrollEvent) => {
+    const detail = event.detail.scrollTop;
+    const newPos = {
+      x: 0,
+      y: 500 - detail,
+    };
+    setPosStyle(newPos);
+  };
+
   return (
     <view
       style={{
@@ -13,7 +25,7 @@ export function App() {
       <view style="display:linear;linear-direction:row;width:100%;height:100%">
         <scroll-view
           id="scroll"
-          bindscroll={() => {}}
+          bindscroll={onScroll}
           scroll-y
           style="display:linear;linear-direction:row;width:50%;height:100%"
         >
@@ -22,7 +34,7 @@ export function App() {
           <view style="background:yellow;width:100%;height:1000px" />
         </scroll-view>
         <view style="width:50%;height:100%;display:linear;linear-direction:row;">
-          <BackgroundDraggable size={100} />
+          <BackgroundDraggable size={100} posStyle={posStyle} />
         </view>
       </view>
     </view>

examples/main-thread/src/background-draggable/BackgroundDraggable.tsx

@@ -1,22 +1,7 @@
-import { useState } from "@lynx-js/react";
-import type { ScrollEvent } from "@lynx-js/types";
-
-export function BackgroundDraggable({ size }: { size: number }) {
-  const [posStyle, setPosStyle] = useState({ x: 0, y: 500 });
-
-  let onScroll = (event: ScrollEvent) => {
-    const detail = event.detail.scrollTop;
-    const newPos = {
-      x: 0,
-      y: 500 - detail,
-    };
-    setPosStyle(newPos);
-  };
-
+export function BackgroundDraggable({ size, posStyle }: { size: number; posStyle: { x: number; y: number } }) {
   return (
     <view
       global-target="scroll"
-      global-bindscroll={onScroll}
       style={{
         height: size + "px",
         width: size + "px",

examples/main-thread/src/main-thread-draggable/App.tsx

@@ -1,7 +1,29 @@
+import { useState } from "@lynx-js/react";
+import type { ScrollEvent } from "@lynx-js/types";
 import { BackgroundDraggable } from "./BackgroundDraggable.jsx";
 import { MainThreadDraggable } from "./MainThreadDraggable.jsx";
 
 export function App() {
+  const [posStyle, setPosStyle] = useState({ x: 0, y: 500 });
+  const onBtsScroll = (event: ScrollEvent) => {
+    const detail = event.detail.scrollTop;
+    const newPos = {
+      x: 0,
+      y: 500 - detail,
+    };
+    setPosStyle(newPos);
+  };
+
+  const onMtsScroll = (event: any) => {
+    "main thread";
+    const detail = event.detail.scrollTop;
+    const newPos = {
+      x: 0,
+      y: 500 - detail,
+    };
+    lynx.querySelector("#intro")?.setStyleProperty("transform", `translate(${newPos.x}px, ${newPos.y}px)`);
+  };
+
   return (
     <view
       style={{
@@ -14,7 +36,8 @@ export function App() {
       <view style="display:linear;linear-direction:row;width:100%;height:100%">
         <scroll-view
           id="scroll"
-          bindscroll={() => {}}
+          bindscroll={onBtsScroll}
+          main-thread:bindscroll={onMtsScroll}
           scroll-y
           style="display:linear;linear-direction:row;width:50%;height:100%"
         >
@@ -24,7 +47,7 @@ export function App() {
         </scroll-view>
         <view style="width:50%;height:100%;display:linear;linear-direction:row;">
           <MainThreadDraggable size={100} />
-          <BackgroundDraggable size={100} />
+          <BackgroundDraggable size={100} posStyle={posStyle} />
         </view>
       </view>
     </view>

examples/main-thread/src/main-thread-draggable/BackgroundDraggable.tsx

@@ -1,22 +1,7 @@
-import { useState } from "@lynx-js/react";
-import type { ScrollEvent } from "@lynx-js/types";
-
-export function BackgroundDraggable({ size }: { size: number }) {
-  const [posStyle, setPosStyle] = useState({ x: 0, y: 500 });
-
-  let onScroll = (event: ScrollEvent) => {
-    const detail = event.detail.scrollTop;
-    const newPos = {
-      x: 0,
-      y: 500 - detail,
-    };
-    setPosStyle(newPos);
-  };
-
+export function BackgroundDraggable({ size, posStyle }: { size: number; posStyle: { x: number; y: number } }) {
   return (
     <view
       global-target="scroll"
-      global-bindscroll={onScroll}
       style={{
         height: size + "px",
         width: size + "px",

examples/main-thread/src/main-thread-draggable/MainThreadDraggable.tsx

@@ -1,23 +1,7 @@
-import type { MainThread, ScrollEvent } from "@lynx-js/types";
-
 export function MainThreadDraggable({ size }: { size: number }) {
-  let onScroll = (event: MainThread.TouchEvent & ScrollEvent) => {
-    "main thread";
-    const detail = event.detail.scrollTop;
-    const newPos = {
-      x: 0,
-      y: 500 - detail,
-    };
-    event.currentTarget.setStyleProperty(
-      "transform",
-      `translate(${newPos.x}px, ${newPos.y}px)`,
-    );
-  };
-
   return (
     <view
-      global-target="scroll"
-      main-thread:global-bindscroll={onScroll}
+      id="intro"
       style={{
         height: size + "px",
         width: size + "px",