create-rspeedy 0.13.5 → 0.14.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # create-rspeedy
 
+## 0.14.0
+
+### Patch Changes
+
+- Add optional Lynx DevTool skill. ([#2421](https://github.com/lynx-family/lynx-stack/pull/2421))
+
+- move Vitest integration to create-rstack extraTools and merge the Vitest templates into a single incremental overlay ([#2408](https://github.com/lynx-family/lynx-stack/pull/2408))
+
+## 0.13.6
+
 ## 0.13.5
 
 ## 0.13.4

package/dist/index.js

@@ -2,24 +2,18 @@
 import { createRequire } from "node:module";
 import node_path from "node:path";
 import { fileURLToPath } from "node:url";
-import { checkCancel, create, multiselect, select as external_create_rstack_select } from "create-rstack";
+import { checkCancel, copyFolder, create, select as external_create_rstack_select } from "create-rstack";
 const src_dirname = node_path.dirname(fileURLToPath(import.meta.url));
 const src_require = createRequire(import.meta.url);
 const { devDependencies: devDependencies } = src_require('../package.json');
-const composeTemplateName = ({ template, tools, lang })=>{
-    const toolsKeys = (tools ? Object.keys(tools) : []).sort();
-    const toolsStr = toolsKeys.length > 0 ? `-${toolsKeys.join('-')}` : '';
-    return `${template}${toolsStr}-${lang}`;
-};
+const composeTemplateName = ({ template, lang })=>`${template}-${lang}`;
 const TEMPLATES = [
     {
         template: 'react',
-        tools: {},
         lang: 'ts'
     },
     {
         template: 'react',
-        tools: {},
         lang: 'js'
     }
 ];
@@ -30,7 +24,10 @@ async function getTemplateName({ template }) {
         if (lang && [
             'js',
             'ts'
-        ].includes(lang)) return template;
+        ].includes(lang)) {
+            if ('react' === pair[0]) return `react-${lang}`;
+            return template;
+        }
         return `${template}-ts`;
     }
     const language = checkCancel(await external_create_rstack_select({
@@ -47,41 +44,48 @@ async function getTemplateName({ template }) {
             }
         ]
     }));
-    const tools = checkCancel(await multiselect({
-        message: 'Select development tools (Use <space> to select, <enter> to continue)',
-        required: false,
-        options: [
-            {
-                value: 'vitest-rltl',
-                label: 'Add ReactLynx Testing Library for unit testing'
-            }
-        ],
-        initialValues: [
-            'vitest-rltl'
-        ]
-    }));
     return composeTemplateName({
         template: 'react',
-        lang: language,
-        tools: Object.fromEntries(tools.map((tool)=>[
-                tool,
-                tool
-            ]))
+        lang: language
     });
 }
 create({
     root: node_path.resolve(src_dirname, '..'),
     name: 'rspeedy',
-    templates: TEMPLATES.map(({ template, tools, lang })=>composeTemplateName({
+    templates: TEMPLATES.map(({ template, lang })=>composeTemplateName({
             template,
-            lang,
-            tools
+            lang
         })),
     version: devDependencies,
     getTemplateName: getTemplateName,
+    extraTools: [
+        {
+            value: 'vitest-rltl',
+            label: 'ReactLynx Testing Library - unit testing',
+            order: 'pre',
+            when: (templateName)=>'react-js' === templateName || 'react-ts' === templateName,
+            action: ({ distFolder, addAgentsMdSearchDirs })=>{
+                const from = node_path.resolve(src_dirname, '..', 'template-react-vitest-rltl');
+                copyFolder({
+                    from,
+                    to: distFolder,
+                    isMergePackageJson: true
+                });
+                addAgentsMdSearchDirs(from);
+            }
+        }
+    ],
+    extraSkills: [
+        {
+            label: 'Lynx DevTool',
+            skills: [
+                'lynx-community/skills/lynx-devtool'
+            ]
+        }
+    ],
     mapESLintTemplate (templateName) {
-        const lang = TEMPLATES.find(({ template })=>templateName.startsWith(template))?.lang;
-        if (!lang) return null;
+        const lang = templateName.split('-').at(-1);
+        if ('js' !== lang && 'ts' !== lang) return null;
         switch(lang){
             case 'js':
                 return 'react-js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-rspeedy",
-  "version": "0.13.5",
+  "version": "0.14.0",
   "description": "Create Rspeedy-powered ReactLynx apps with one command",
   "keywords": [
     "webpack",
@@ -31,14 +31,14 @@
     "README.md"
   ],
   "dependencies": {
-    "create-rstack": "1.8.0"
+    "create-rstack": "1.9.0"
   },
   "devDependencies": {
     "@rsbuild/plugin-type-check": "1.3.4",
     "@lynx-js/qrcode-rsbuild-plugin": "^0.4.6",
-    "@lynx-js/react": "^0.116.5",
-    "@lynx-js/react-rsbuild-plugin": "^0.12.10",
-    "@lynx-js/rspeedy": "^0.13.5"
+    "@lynx-js/react": "^0.117.1",
+    "@lynx-js/react-rsbuild-plugin": "^0.14.0",
+    "@lynx-js/rspeedy": "^0.14.0"
   },
   "engines": {
     "node": ">=18"

package/template-react-js/src/App.jsx

@@ -4,9 +4,11 @@ import './App.css'
 import arrow from './assets/arrow.png'
 import lynxLogo from './assets/lynx-logo.png'
 import reactLynxLogo from './assets/react-logo.png'
+import { useFlappy } from './useFlappy.js'
 
 export function App() {
   const [alterLogo, setAlterLogo] = useState(false)
+  const [logoY, jump] = useFlappy()
 
   useEffect(() => {
     console.info('Hello, ReactLynx')
@@ -18,11 +20,15 @@ export function App() {
   }, [])
 
   return (
-    <view>
+    <view bindtap={jump}>
       <view className='Background' />
       <view className='App'>
         <view className='Banner'>
-          <view className='Logo' bindtap={onTap}>
+          <view
+            className='Logo'
+            style={{ transform: `translateY(${logoY}px)` }}
+            bindtap={onTap}
+          >
             {alterLogo
               ? <image src={reactLynxLogo} className='Logo--react' />
               : <image src={lynxLogo} className='Logo--lynx' />}

package/template-react-js/src/lib/flappy.js

@@ -0,0 +1,58 @@
+/**
+ * Framework-agnostic flappy-bird physics engine.
+ *
+ * Manages gravity, jump impulse, and a 60fps game loop.
+ * Wire it up to any UI framework by calling `jump()` on tap
+ * and reading `getY()` in the loop callback.
+ *
+ * @param {(y: number) => void} onUpdate
+ * @param {object} [options]
+ * @param {number} [options.gravity=0.6]
+ * @param {number} [options.jumpForce=-12]
+ * @param {number} [options.stackFactor=0.6]
+ * @param {number} [options.frameMs=16]
+ * @returns {{ jump: () => void, getY: () => number, destroy: () => void }}
+ */
+export function createFlappy(onUpdate, options = {}) {
+  const {
+    gravity = 0.6,
+    jumpForce = -12,
+    stackFactor = 0.6,
+    frameMs = 16,
+  } = options
+
+  let y = 0
+  let velocity = 0
+  let timer = null
+
+  function loop() {
+    velocity += gravity
+    y += velocity
+    if (y >= 0) {
+      y = 0
+      velocity = 0
+      timer = null
+      onUpdate(y)
+      return
+    }
+    onUpdate(y)
+    timer = setTimeout(loop, frameMs)
+  }
+
+  function jump() {
+    // Stack impulse on rapid taps, clamped to one full jumpForce
+    velocity = Math.max(velocity + jumpForce * stackFactor, jumpForce)
+    if (!timer) {
+      loop()
+    }
+  }
+
+  function destroy() {
+    if (timer) {
+      clearTimeout(timer)
+      timer = null
+    }
+  }
+
+  return { jump, getY: () => y, destroy }
+}

package/template-react-js/src/useFlappy.js

@@ -0,0 +1,37 @@
+import { useCallback, useEffect, useRef, useState } from '@lynx-js/react'
+
+import { createFlappy } from './lib/flappy.js'
+
+/**
+ * React hook for flappy-bird physics.
+ *
+ * Returns `[y, jump]` — a state value and a stable callback.
+ * The game loop runs automatically; cleanup happens on unmount.
+ * Options are read once on mount and not reactive to later changes.
+ *
+ * @param {object} [options]
+ * @returns {[number, () => void]}
+ */
+export function useFlappy(options) {
+  const [y, setY] = useState(0)
+  const engineRef = useRef(null)
+
+  if (engineRef.current == null) {
+    engineRef.current = createFlappy((newY) => {
+      setY(newY)
+    }, options)
+  }
+
+  useEffect(() => {
+    return () => {
+      engineRef.current?.destroy()
+    }
+  }, [])
+
+  const jump = useCallback(() => {
+    'background only'
+    engineRef.current?.jump()
+  }, [])
+
+  return [y, jump]
+}

package/template-react-ts/src/App.tsx

@@ -4,9 +4,11 @@ import './App.css'
 import arrow from './assets/arrow.png'
 import lynxLogo from './assets/lynx-logo.png'
 import reactLynxLogo from './assets/react-logo.png'
+import { useFlappy } from './useFlappy.js'
 
 export function App() {
   const [alterLogo, setAlterLogo] = useState(false)
+  const [logoY, jump] = useFlappy()
 
   useEffect(() => {
     console.info('Hello, ReactLynx')
@@ -18,11 +20,15 @@ export function App() {
   }, [])
 
   return (
-    <view>
+    <view bindtap={jump}>
       <view className='Background' />
       <view className='App'>
         <view className='Banner'>
-          <view className='Logo' bindtap={onTap}>
+          <view
+            className='Logo'
+            style={{ transform: `translateY(${logoY}px)` }}
+            bindtap={onTap}
+          >
             {alterLogo
               ? <image src={reactLynxLogo} className='Logo--react' />
               : <image src={lynxLogo} className='Logo--lynx' />}

package/template-react-ts/src/lib/flappy.ts

@@ -0,0 +1,76 @@
+/**
+ * Framework-agnostic flappy-bird physics engine.
+ *
+ * Manages gravity, jump impulse, and a 60fps game loop.
+ * Wire it up to any UI framework by calling `jump()` on tap
+ * and reading `getY()` in the loop callback.
+ */
+
+export interface FlappyOptions {
+  /** Downward acceleration per frame (default 0.6) */
+  gravity?: number
+  /** Upward impulse per tap — negative value (default -12) */
+  jumpForce?: number
+  /** Impulse stacking factor for rapid taps (default 0.6) */
+  stackFactor?: number
+  /** Frame interval in ms (default 16 ≈ 60fps) */
+  frameMs?: number
+}
+
+export type OnUpdate = (y: number) => void
+
+export interface FlappyEngine {
+  /** Call on each tap to apply upward impulse. */
+  jump(): void
+  /** Current Y offset (0 = ground, negative = airborne). */
+  getY(): number
+  /** Stop the game loop and clean up. */
+  destroy(): void
+}
+
+export function createFlappy(
+  onUpdate: OnUpdate,
+  options: FlappyOptions = {},
+): FlappyEngine {
+  const {
+    gravity = 0.6,
+    jumpForce = -12,
+    stackFactor = 0.6,
+    frameMs = 16,
+  } = options
+
+  let y = 0
+  let velocity = 0
+  let timer: ReturnType<typeof setTimeout> | null = null
+
+  function loop() {
+    velocity += gravity
+    y += velocity
+    if (y >= 0) {
+      y = 0
+      velocity = 0
+      timer = null
+      onUpdate(y)
+      return
+    }
+    onUpdate(y)
+    timer = setTimeout(loop, frameMs)
+  }
+
+  function jump() {
+    // Stack impulse on rapid taps, clamped to one full jumpForce
+    velocity = Math.max(velocity + jumpForce * stackFactor, jumpForce)
+    if (!timer) {
+      loop()
+    }
+  }
+
+  function destroy() {
+    if (timer) {
+      clearTimeout(timer)
+      timer = null
+    }
+  }
+
+  return { jump, getY: () => y, destroy }
+}

package/template-react-ts/src/useFlappy.ts

@@ -0,0 +1,49 @@
+import { useCallback, useEffect, useRef, useState } from '@lynx-js/react'
+
+import { createFlappy } from './lib/flappy.js'
+import type { FlappyEngine, FlappyOptions } from './lib/flappy.js'
+
+/**
+ * React hook for flappy-bird physics.
+ *
+ * Returns `[y, jump]` — a state value and a stable callback.
+ * The game loop runs automatically; cleanup happens on unmount.
+ * Options are read once on mount and not reactive to later changes.
+ *
+ * @example
+ * ```tsx
+ * function Bird() {
+ *   const [y, jump] = useFlappy()
+ *   return (
+ *     <view bindtap={jump} style={{ transform: `translateY(${y}px)` }}>
+ *       <text>Tap me!</text>
+ *     </view>
+ *   )
+ * }
+ * ```
+ */
+export function useFlappy(
+  options?: FlappyOptions,
+): [number, () => void] {
+  const [y, setY] = useState(0)
+  const engineRef = useRef<FlappyEngine | null>(null)
+
+  if (engineRef.current == null) {
+    engineRef.current = createFlappy((newY) => {
+      setY(newY)
+    }, options)
+  }
+
+  useEffect(() => {
+    return () => {
+      engineRef.current?.destroy()
+    }
+  }, [])
+
+  const jump = useCallback(() => {
+    'background only'
+    engineRef.current?.jump()
+  }, [])
+
+  return [y, jump]
+}

package/template-react-vitest-rltl/package.json

@@ -0,0 +1,10 @@
+{
+  "scripts": {
+    "test": "vitest run"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "jsdom": "^27.4.0",
+    "vitest": "^3.2.4"
+  }
+}

package/template-react-vitest-rltl/src/__tests__/index.test.jsx

@@ -0,0 +1,17 @@
+// Copyright 2024 The Lynx Authors. 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.
+import '@testing-library/jest-dom'
+import { expect, test } from 'vitest'
+import { getQueriesForElement, render } from '@lynx-js/react/testing-library'
+
+import { App } from '../App'
+
+test('App', async () => {
+  render(<App />)
+
+  const { findByText } = getQueriesForElement(elementTree.root)
+  const element = await findByText('Tap the logo and have fun!')
+
+  expect(element).toBeInTheDocument()
+})

package/template-react-vitest-rltl-js/lynx.config.js

@@ -1,19 +0,0 @@
-import { defineConfig } from '@lynx-js/rspeedy'
-
-import { pluginQRCode } from '@lynx-js/qrcode-rsbuild-plugin'
-import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin'
-
-export default defineConfig({
-  source: {
-    entry: './src/index.jsx',
-  },
-  plugins: [
-    pluginQRCode({
-      schema(url) {
-        // We use `?fullscreen=true` to open the page in LynxExplorer in full screen mode
-        return `${url}?fullscreen=true`
-      },
-    }),
-    pluginReactLynx(),
-  ],
-})

package/template-react-vitest-rltl-js/package.json

@@ -1,26 +0,0 @@
-{
-  "name": "rspeedy-react-js",
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "build": "rspeedy build",
-    "dev": "rspeedy dev",
-    "preview": "rspeedy preview",
-    "test": "vitest run"
-  },
-  "dependencies": {
-    "@lynx-js/react": "workspace:*"
-  },
-  "devDependencies": {
-    "@lynx-js/preact-devtools": "^5.0.1",
-    "@lynx-js/qrcode-rsbuild-plugin": "workspace:*",
-    "@lynx-js/react-rsbuild-plugin": "workspace:*",
-    "@lynx-js/rspeedy": "workspace:*",
-    "@testing-library/jest-dom": "^6.9.1",
-    "jsdom": "^27.4.0",
-    "vitest": "^3.2.4"
-  },
-  "engines": {
-    "node": ">=18"
-  }
-}

package/template-react-vitest-rltl-js/src/App.jsx

@@ -1,53 +0,0 @@
-import { useCallback, useEffect, useState } from '@lynx-js/react'
-
-import './App.css'
-import arrow from './assets/arrow.png'
-import lynxLogo from './assets/lynx-logo.png'
-import reactLynxLogo from './assets/react-logo.png'
-
-export function App(props) {
-  const [alterLogo, setAlterLogo] = useState(false)
-
-  useEffect(() => {
-    console.info('Hello, ReactLynx')
-  }, [])
-  props.onRender?.()
-
-  const onTap = useCallback(() => {
-    'background only'
-    setAlterLogo(prevAlterLogo => !prevAlterLogo)
-  }, [])
-
-  return (
-    <view>
-      <view className='Background' />
-      <view className='App'>
-        <view className='Banner'>
-          <view className='Logo' bindtap={onTap}>
-            {alterLogo
-              ? <image src={reactLynxLogo} className='Logo--react' />
-              : <image src={lynxLogo} className='Logo--lynx' />}
-          </view>
-          <text className='Title'>React</text>
-          <text className='Subtitle'>on Lynx</text>
-        </view>
-        <view className='Content'>
-          <image src={arrow} className='Arrow' />
-          <text className='Description'>Tap the logo and have fun!</text>
-          <text className='Hint'>
-            Edit<text
-              style={{
-                fontStyle: 'italic',
-                color: 'rgba(255, 255, 255, 0.85)',
-              }}
-            >
-              {' src/App.tsx '}
-            </text>
-            to see updates!
-          </text>
-        </view>
-        <view style={{ flex: 1 }} />
-      </view>
-    </view>
-  )
-}

package/template-react-vitest-rltl-js/src/__tests__/index.test.jsx

@@ -1,102 +0,0 @@
-// Copyright 2024 The Lynx Authors. 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.
-import '@testing-library/jest-dom'
-import { expect, test, vi } from 'vitest'
-import { render, getQueriesForElement } from '@lynx-js/react/testing-library'
-
-import { App } from '../App.jsx'
-
-test('App', async () => {
-  const cb = vi.fn()
-
-  render(
-    <App
-      onMounted={() => {
-        cb(`__MAIN_THREAD__: ${__MAIN_THREAD__}`)
-      }}
-    />,
-  )
-  expect(cb).toBeCalledTimes(1)
-  expect(cb.mock.calls).toMatchInlineSnapshot(`
-    [
-      [
-        "__MAIN_THREAD__: false",
-      ],
-    ]
-  `)
-  expect(elementTree.root).toMatchInlineSnapshot(`
-    <page>
-      <view>
-        <view
-          class="Background"
-        />
-        <view
-          class="App"
-        >
-          <view
-            class="Banner"
-          >
-            <view
-              class="Logo"
-            >
-              <image
-                class="Logo--lynx"
-                src="/src/assets/lynx-logo.png"
-              />
-            </view>
-            <text
-              class="Title"
-            >
-              React
-            </text>
-            <text
-              class="Subtitle"
-            >
-              on Lynx
-            </text>
-          </view>
-          <view
-            class="Content"
-          >
-            <image
-              class="Arrow"
-              src="/src/assets/arrow.png"
-            />
-            <text
-              class="Description"
-            >
-              Tap the logo and have fun!
-            </text>
-            <text
-              class="Hint"
-            >
-              Edit
-              <text
-                style="font-style:italic;color:rgba(255, 255, 255, 0.85)"
-              >
-                 src/App.tsx 
-              </text>
-              to see updates!
-            </text>
-          </view>
-          <view
-            style="flex:1"
-          />
-        </view>
-      </view>
-    </page>
-  `)
-  const {
-    findByText,
-  } = getQueriesForElement(elementTree.root)
-  const element = await findByText('Tap the logo and have fun!')
-  expect(element).toBeInTheDocument()
-  expect(element).toMatchInlineSnapshot(`
-    <text
-      class="Description"
-    >
-      Tap the logo and have fun!
-    </text>
-  `)
-})

package/template-react-vitest-rltl-js/src/index.jsx

@@ -1,11 +0,0 @@
-import '@lynx-js/preact-devtools'
-import '@lynx-js/react/debug'
-import { root } from '@lynx-js/react'
-
-import { App } from './App.jsx'
-
-root.render(<App />)
-
-if (import.meta.webpackHot) {
-  import.meta.webpackHot.accept()
-}

package/template-react-vitest-rltl-ts/lynx.config.ts

@@ -1,18 +0,0 @@
-import { defineConfig } from '@lynx-js/rspeedy'
-
-import { pluginQRCode } from '@lynx-js/qrcode-rsbuild-plugin'
-import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin'
-import { pluginTypeCheck } from '@rsbuild/plugin-type-check'
-
-export default defineConfig({
-  plugins: [
-    pluginQRCode({
-      schema(url) {
-        // We use `?fullscreen=true` to open the page in LynxExplorer in full screen mode
-        return `${url}?fullscreen=true`
-      },
-    }),
-    pluginReactLynx(),
-    pluginTypeCheck(),
-  ],
-})

package/template-react-vitest-rltl-ts/package.json

@@ -1,30 +0,0 @@
-{
-  "name": "rspeedy-react-ts",
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "build": "rspeedy build",
-    "dev": "rspeedy dev",
-    "preview": "rspeedy preview",
-    "test": "vitest run"
-  },
-  "dependencies": {
-    "@lynx-js/react": "workspace:*"
-  },
-  "devDependencies": {
-    "@lynx-js/preact-devtools": "^5.0.1",
-    "@lynx-js/qrcode-rsbuild-plugin": "workspace:*",
-    "@lynx-js/react-rsbuild-plugin": "workspace:*",
-    "@lynx-js/rspeedy": "workspace:*",
-    "@lynx-js/types": "3.7.0",
-    "@rsbuild/plugin-type-check": "1.3.4",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@types/react": "^18.3.28",
-    "jsdom": "^27.4.0",
-    "typescript": "~5.9.3",
-    "vitest": "^3.2.4"
-  },
-  "engines": {
-    "node": ">=18"
-  }
-}

package/template-react-vitest-rltl-ts/src/App.tsx

@@ -1,55 +0,0 @@
-import { useCallback, useEffect, useState } from '@lynx-js/react'
-
-import './App.css'
-import arrow from './assets/arrow.png'
-import lynxLogo from './assets/lynx-logo.png'
-import reactLynxLogo from './assets/react-logo.png'
-
-export function App(props: {
-  onRender?: () => void
-}) {
-  const [alterLogo, setAlterLogo] = useState(false)
-
-  useEffect(() => {
-    console.info('Hello, ReactLynx')
-  }, [])
-  props.onRender?.()
-
-  const onTap = useCallback(() => {
-    'background only'
-    setAlterLogo(prevAlterLogo => !prevAlterLogo)
-  }, [])
-
-  return (
-    <view>
-      <view className='Background' />
-      <view className='App'>
-        <view className='Banner'>
-          <view className='Logo' bindtap={onTap}>
-            {alterLogo
-              ? <image src={reactLynxLogo} className='Logo--react' />
-              : <image src={lynxLogo} className='Logo--lynx' />}
-          </view>
-          <text className='Title'>React</text>
-          <text className='Subtitle'>on Lynx</text>
-        </view>
-        <view className='Content'>
-          <image src={arrow} className='Arrow' />
-          <text className='Description'>Tap the logo and have fun!</text>
-          <text className='Hint'>
-            Edit<text
-              style={{
-                fontStyle: 'italic',
-                color: 'rgba(255, 255, 255, 0.85)',
-              }}
-            >
-              {' src/App.tsx '}
-            </text>
-            to see updates!
-          </text>
-        </view>
-        <view style={{ flex: 1 }} />
-      </view>
-    </view>
-  )
-}

package/template-react-vitest-rltl-ts/src/__tests__/index.test.tsx

@@ -1,102 +0,0 @@
-// Copyright 2024 The Lynx Authors. 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.
-import '@testing-library/jest-dom'
-import { expect, test, vi } from 'vitest'
-import { render, getQueriesForElement } from '@lynx-js/react/testing-library'
-
-import { App } from '../App.jsx'
-
-test('App', async () => {
-  const cb = vi.fn()
-
-  render(
-    <App
-      onRender={() => {
-        cb(`__MAIN_THREAD__: ${__MAIN_THREAD__}`)
-      }}
-    />,
-  )
-  expect(cb).toBeCalledTimes(1)
-  expect(cb.mock.calls).toMatchInlineSnapshot(`
-    [
-      [
-        "__MAIN_THREAD__: false",
-      ],
-    ]
-  `)
-  expect(elementTree.root).toMatchInlineSnapshot(`
-    <page>
-      <view>
-        <view
-          class="Background"
-        />
-        <view
-          class="App"
-        >
-          <view
-            class="Banner"
-          >
-            <view
-              class="Logo"
-            >
-              <image
-                class="Logo--lynx"
-                src="/src/assets/lynx-logo.png"
-              />
-            </view>
-            <text
-              class="Title"
-            >
-              React
-            </text>
-            <text
-              class="Subtitle"
-            >
-              on Lynx
-            </text>
-          </view>
-          <view
-            class="Content"
-          >
-            <image
-              class="Arrow"
-              src="/src/assets/arrow.png"
-            />
-            <text
-              class="Description"
-            >
-              Tap the logo and have fun!
-            </text>
-            <text
-              class="Hint"
-            >
-              Edit
-              <text
-                style="font-style:italic;color:rgba(255, 255, 255, 0.85)"
-              >
-                 src/App.tsx 
-              </text>
-              to see updates!
-            </text>
-          </view>
-          <view
-            style="flex:1"
-          />
-        </view>
-      </view>
-    </page>
-  `)
-  const {
-    findByText,
-  } = getQueriesForElement(elementTree.root!)
-  const element = await findByText('Tap the logo and have fun!')
-  expect(element).toBeInTheDocument()
-  expect(element).toMatchInlineSnapshot(`
-    <text
-      class="Description"
-    >
-      Tap the logo and have fun!
-    </text>
-  `)
-})

package/template-react-vitest-rltl-ts/src/index.tsx

@@ -1,11 +0,0 @@
-import '@lynx-js/preact-devtools'
-import '@lynx-js/react/debug'
-import { root } from '@lynx-js/react'
-
-import { App } from './App.jsx'
-
-root.render(<App />)
-
-if (import.meta.webpackHot) {
-  import.meta.webpackHot.accept()
-}

package/template-react-vitest-rltl-ts/src/rspeedy-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="@lynx-js/rspeedy/client" />

package/template-react-vitest-rltl-ts/src/tsconfig.json

@@ -1,15 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "composite": true,
-
-    "jsx": "react-jsx",
-    "jsxImportSource": "@lynx-js/react",
-
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-
-    "noEmit": true,
-  },
-  "include": ["./**/*.ts", "./**/*.tsx"],
-}

package/template-react-vitest-rltl-ts/tsconfig.json

@@ -1,17 +0,0 @@
-{
-  "compilerOptions": {
-    "strict": true,
-    "isolatedModules": true,
-    "verbatimModuleSyntax": true,
-
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-
-    "noEmit": true,
-  },
-  "references": [
-    { "path": "./tsconfig.node.json" },
-    { "path": "./src" },
-  ],
-  "files": [],
-}

package/template-react-vitest-rltl-ts/tsconfig.node.json

@@ -1,21 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "composite": true,
-
-    // Rspeedy uses Node.js's module resolution
-    "module": "node16",
-    "moduleResolution": "node16",
-    "erasableSyntaxOnly": true,
-
-    // Node.js 18+
-    "lib": ["es2023"],
-    "target": "es2022",
-
-    "noEmit": true,
-  },
-  "include": [
-    "./lynx.config.ts",
-    "./vitest.config.ts",
-  ],
-}

package/template-react-vitest-rltl-ts/vitest.config.ts

@@ -1,9 +0,0 @@
-import { defineConfig, mergeConfig } from 'vitest/config'
-import { createVitestConfig } from '@lynx-js/react/testing-library/vitest-config'
-
-const defaultConfig = await createVitestConfig()
-const config = defineConfig({
-  test: {},
-})
-
-export default mergeConfig(defaultConfig, config)