create-rspeedy 0.9.2 → 0.9.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # create-rspeedy
 
+## 0.9.3
+
+### Patch Changes
+
+- Add testing library for ReactLynx ([#74](https://github.com/lynx-family/lynx-stack/pull/74))
+
+- Use `"jsx": "react-jsx"` with `"jsxImportSource": "@lynx-js/react"`. ([#545](https://github.com/lynx-family/lynx-stack/pull/545))
+
 ## 0.9.2
 
 ## 0.9.1

package/dist/index.js

@@ -6,7 +6,11 @@ import * as __WEBPACK_EXTERNAL_MODULE_create_rstack_aeeb76b8__ from "create-rsta
 const src_dirname = __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__["default"].dirname((0, __WEBPACK_EXTERNAL_MODULE_node_url_e96de089__.fileURLToPath)(import.meta.url));
 const src_require = (0, __WEBPACK_EXTERNAL_MODULE_node_module_ab9f2194__.createRequire)(import.meta.url);
 const { devDependencies } = src_require('../package.json');
-const composeTemplateName = ({ template, lang })=>`${template}-${lang}`;
+const composeTemplateName = ({ template, tools, lang })=>{
+    const toolsKeys = (tools ? Object.keys(tools) : []).sort();
+    const toolsStr = toolsKeys.length > 0 ? `-${toolsKeys.join('-')}` : '';
+    return `${template}${toolsStr}-${lang}`;
+};
 const TEMPLATES = [
     {
         template: 'react',
@@ -43,9 +47,26 @@ async function getTemplateName({ template }) {
             }
         ]
     }));
+    const tools = (0, __WEBPACK_EXTERNAL_MODULE_create_rstack_aeeb76b8__.checkCancel)(await (0, __WEBPACK_EXTERNAL_MODULE_create_rstack_aeeb76b8__.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
+        lang: language,
+        tools: Object.fromEntries(tools.map((tool)=>[
+                tool,
+                tool
+            ]))
     });
 }
 (0, __WEBPACK_EXTERNAL_MODULE_create_rstack_aeeb76b8__.create)({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-rspeedy",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "description": "Create Rspeedy-powered ReactLynx apps with one command",
   "keywords": [
     "webpack",
@@ -34,10 +34,10 @@
     "create-rstack": "1.4.0"
   },
   "devDependencies": {
-    "@lynx-js/qrcode-rsbuild-plugin": "^0.3.5",
-    "@lynx-js/react": "^0.106.5",
-    "@lynx-js/react-rsbuild-plugin": "^0.9.7",
-    "@lynx-js/rspeedy": "^0.9.2"
+    "@lynx-js/qrcode-rsbuild-plugin": "^0.3.6",
+    "@lynx-js/react": "^0.107.0",
+    "@lynx-js/react-rsbuild-plugin": "^0.9.8",
+    "@lynx-js/rspeedy": "^0.9.3"
   },
   "engines": {
     "node": ">=18"

package/template-react-ts/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
-    "jsx": "preserve",
-
+    "jsx": "react-jsx",
+    "jsxImportSource": "@lynx-js/react",
     "module": "node16",
     "moduleResolution": "node16",
 

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

@@ -0,0 +1,16 @@
+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({
+  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

@@ -0,0 +1,25 @@
+{
+  "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/qrcode-rsbuild-plugin": "workspace:*",
+    "@lynx-js/react-rsbuild-plugin": "workspace:*",
+    "@lynx-js/rspeedy": "workspace:*",
+    "@testing-library/jest-dom": "^6.6.3",
+    "jsdom": "^26.1.0",
+    "vitest": "^3.1.2"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

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

@@ -0,0 +1,46 @@
+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.onMounted?.()
+  }, [])
+
+  const onTap = useCallback(() => {
+    'background only'
+    setAlterLogo(!alterLogo)
+  }, [alterLogo])
+
+  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' }}>{' src/App.tsx '}</text>
+            to see updates!
+          </text>
+        </view>
+        <view style={{ flex: 1 }}></view>
+      </view>
+    </view>
+  )
+}

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

@@ -0,0 +1,102 @@
+// 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;"
+              >
+                 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.js

@@ -0,0 +1,9 @@
+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-js/vitest.config.js

@@ -0,0 +1,9 @@
+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)

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

@@ -0,0 +1,16 @@
+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({
+  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-ts/package.json

@@ -0,0 +1,28 @@
+{
+  "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/qrcode-rsbuild-plugin": "workspace:*",
+    "@lynx-js/react-rsbuild-plugin": "workspace:*",
+    "@lynx-js/rspeedy": "workspace:*",
+    "@lynx-js/types": "^3.2.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@types/react": "^18.3.20",
+    "jsdom": "^26.1.0",
+    "typescript": "~5.8.3",
+    "vitest": "^3.1.2"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

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

@@ -0,0 +1,48 @@
+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: {
+  onMounted?: () => void
+}) {
+  const [alterLogo, setAlterLogo] = useState(false)
+
+  useEffect(() => {
+    console.info('Hello, ReactLynx')
+    props.onMounted?.()
+  }, [])
+
+  const onTap = useCallback(() => {
+    'background only'
+    setAlterLogo(!alterLogo)
+  }, [alterLogo])
+
+  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' }}>{' src/App.tsx '}</text>
+            to see updates!
+          </text>
+        </view>
+        <view style={{ flex: 1 }}></view>
+      </view>
+    </view>
+  )
+}

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

@@ -0,0 +1,102 @@
+// 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;"
+              >
+                 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

@@ -0,0 +1,9 @@
+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

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

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

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "@lynx-js/react",
+
+    "module": "node18",
+    "moduleResolution": "node16",
+
+    "strict": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+  },
+  "exclude": ["dist/"],
+}

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

@@ -0,0 +1,9 @@
+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)