create-rspeedy 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # create-rspeedy
 
+## 0.8.0
+
+## 0.7.1
+
+### Patch Changes
+
+- 5acd2f4: Update templates to use CSS and static assets.
+- e0a8388: feat: add README.md for create-rspeedy
+
 ## 0.7.0
 
 ## 0.6.0

package/README.md

@@ -0,0 +1,34 @@
+<p align="center">
+  <a href="https://lynxjs.org/rspeedy" target="blank"><img src="https://lynxjs.org/assets/rspeedy-banner.png" alt="Rspeedy Logo" /></a>
+</p>
+
+# create-rspeedy
+
+Create a new Rspeedy x ReactLynx project.
+
+Using `npm create`:
+
+```bash
+npm create rspeedy@latest
+```
+
+Using CLI flags:
+
+```bash
+npx create-rspeedy --dir my-project
+
+# Using abbreviations
+npx create-rspeedy -d my-project
+```
+
+## Documentation
+
+https://lynxjs.org/rspeedy
+
+## Contributing
+
+Please read the [Contributing Guide](https://github.com/tiktok/lynx-stack/blob/main/CONTRIBUTING.md).
+
+## License
+
+Rsbuild is [MIT licensed](https://github.com/tiktok/lynx-stack/blob/main/LICENSE).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-rspeedy",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Create Rspeedy-powered ReactLynx apps with one command",
   "keywords": [
     "webpack",
@@ -29,10 +29,10 @@
     "create-rstack": "1.2.0"
   },
   "devDependencies": {
-    "@lynx-dev/qrcode-rsbuild-plugin": "^0.3.0",
-    "@lynx-dev/react": "^0.103.5",
-    "@lynx-dev/react-rsbuild-plugin": "^0.7.0",
-    "@lynx-dev/rspeedy": "^0.7.0"
+    "@lynx-dev/qrcode-rsbuild-plugin": "^0.3.1",
+    "@lynx-dev/react": "^0.104.0",
+    "@lynx-dev/react-rsbuild-plugin": "^0.8.0",
+    "@lynx-dev/rspeedy": "^0.8.0"
   },
   "engines": {
     "node": ">=18"

package/template-common/src/App.css

@@ -0,0 +1,76 @@
+.theme-dark {
+  --color-background: #282c34;
+  --color-text: #e0e0e0;
+}
+.theme-light {
+  --color-background: #e0e0e0;
+  --color-text: #282c34;
+}
+
+.App {
+  background-color: var(--color-background);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: red;
+}
+
+text {
+  color: var(--color-text);
+}
+
+.Logo {
+  width: 160px;
+  height: 160px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 8px;
+}
+
+.Logo--react {
+  width: 160px;
+  height: 160px;
+  animation: Logo--spin infinite 20s linear;
+}
+
+.Logo--lynx {
+  width: 120px;
+  height: 144px;
+  animation: Logo--shake infinite 0.5s ease;
+}
+
+.Title {
+  font-size: 36px;
+  font-weight: 700;
+}
+
+.Subtitle {
+  font-style: italic;
+  font-size: 22px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+@keyframes Logo--spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes Logo--shake {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(0.9);
+  }
+  100% {
+    transform: scale(1);
+  }
+}

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

@@ -1,13 +1,46 @@
-import { useEffect } from '@lynx-dev/react'
+import { useCallback, useEffect, useState } from '@lynx-dev/react'
+
+import './App.css'
+import lynxLogo from './assets/lynx-logo.png'
+import reactLynxLogo from './assets/react-logo.png'
 
 export function App() {
+  const [alterLogo, setAlterLogo] = useState(false)
+  const [theme, setTheme] = useState('dark')
+
   useEffect(() => {
     console.info('Hello, ReactLynx')
   }, [])
 
+  const onTap = useCallback(() => {
+    'background-only'
+    setAlterLogo(!alterLogo)
+    setTheme(theme === 'light' ? 'dark' : 'light')
+  }, [theme, alterLogo])
+
   return (
-    <view>
-      <text>Hello, ReactLynx</text>
-    </view>
+    <page className={`theme-${theme}`}>
+      <view className='App'>
+        <view className='Logo' bindtap={onTap}>
+          {alterLogo
+            ? <image src={lynxLogo} className='Logo--lynx' />
+            : <image src={reactLynxLogo} className='Logo--react' />}
+        </view>
+        <text className='Title'>React</text>
+        <text className='Subtitle'>on Lynx</text>
+        <text style={{ fontSize: '20px' }}>
+          Tap the logo and have fun!
+        </text>
+        <text
+          style={{
+            fontSize: '16px',
+            margin: '5px',
+          }}
+        >
+          Edit <text style={{ fontStyle: 'italic' }}>src/App.tsx</text>{' '}
+          to see updates!
+        </text>
+      </view>
+    </page>
   )
 }

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

@@ -1,13 +1,46 @@
-import { useEffect } from '@lynx-dev/react'
+import { useCallback, useEffect, useState } from '@lynx-dev/react'
+
+import './App.css'
+import lynxLogo from './assets/lynx-logo.png'
+import reactLynxLogo from './assets/react-logo.png'
 
 export function App() {
+  const [alterLogo, setAlterLogo] = useState(false)
+  const [theme, setTheme] = useState('dark')
+
   useEffect(() => {
     console.info('Hello, ReactLynx')
   }, [])
 
+  const onTap = useCallback(() => {
+    'background-only'
+    setAlterLogo(!alterLogo)
+    setTheme(theme === 'light' ? 'dark' : 'light')
+  }, [theme, alterLogo])
+
   return (
-    <view>
-      <text>Hello, ReactLynx</text>
-    </view>
+    <page className={`theme-${theme}`}>
+      <view className='App'>
+        <view className='Logo' bindtap={onTap}>
+          {alterLogo
+            ? <image src={lynxLogo} className='Logo--lynx' />
+            : <image src={reactLynxLogo} className='Logo--react' />}
+        </view>
+        <text className='Title'>React</text>
+        <text className='Subtitle'>on Lynx</text>
+        <text style={{ fontSize: '20px' }}>
+          Tap the logo and have fun!
+        </text>
+        <text
+          style={{
+            fontSize: '16px',
+            margin: '5px',
+          }}
+        >
+          Edit <text style={{ fontStyle: 'italic' }}>src/App.tsx</text>{' '}
+          to see updates!
+        </text>
+      </view>
+    </page>
   )
 }