fix(template): switch to Android 14 and further debug CI issue

Update website, migrate Spline scene changes and switch setup to papua. release-npm

package.json

@@ -27,16 +27,16 @@
     }
   },
   "dependencies": {
-    "@react-native/eslint-config": "^0.73.1",
+    "@react-native/eslint-config": "^0.74.0",
     "@tsconfig/react-native": "^3.0.2",
     "arg": "^5.0.2",
     "command-exists": "^1.2.9",
     "deepmerge": "^4.3.1",
-    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
     "fast-glob": "^3.3.1",
     "global-cache-dir": "^5.0.0",
     "is-ci": "^3.0.1",
-    "logua": "^2.3.0",
+    "logua": "^3.0.2",
     "pakag": "^3.1.1",
     "parse-gitignore": "^2.0.0",
     "prettier": "^3.0.3",
@@ -47,10 +47,10 @@
   },
   "devDependencies": {
     "@types/command-exists": "^1.2.1",
-    "@types/prompts": "^2.4.5",
+    "@types/prompts": "^2.4.6",
     "@types/semver": "^7.5.3",
     "jest-fixture": "^4.1.0",
-    "padua": "^2.0.4",
+    "padua": "^2.0.6",
     "react-native": "^0.72.5",
     "vitest": "^0.34.6"
   },

template-cache.ts

@@ -29,6 +29,8 @@ const removeExpiredTemplates = (version: string) => {
 export const cacheTemplate = (nativeOptions: NativeOptions) => {
   const directory = join(cacheDirectory, nativeOptions.version, nativeOptions.appName)
 
+  console.log(directory)
+
   removeExpiredTemplates(nativeOptions.version)
 
   if (existsSync(directory)) {

template/app/package.json

@@ -9,8 +9,8 @@
       "androidBackgroundColor": "#e9e9e9"
     },
     "android-sdk-numic-plugin": {
-      "compileSdkVersion": 33,
-      "targetSdkVersion": 33
+      "compileSdkVersion": 34,
+      "targetSdkVersion": 34
     }
   },
   "dependencies": {
@@ -22,18 +22,18 @@
     "responsive-react-native": "^1.0.1"
   },
   "devDependencies": {
-    "@react-native/eslint-config": "^0.73.1",
+    "@react-native/eslint-config": "^0.74.0",
     "@testing-library/jest-native": "^5.4.3",
     "@testing-library/react-native": "^12.3.0",
     "@tsconfig/react-native": "^3.0.2",
     "@types/jest": "^29.5.5",
     "@types/react-native": "^0.72.3",
-    "@typescript-eslint/eslint-plugin": "^6.7.3",
-    "@typescript-eslint/parser": "^6.7.3",
-    "android-sdk-numic-plugin": "^1.0.2",
+    "@typescript-eslint/eslint-plugin": "^6.7.5",
+    "@typescript-eslint/parser": "^6.7.5",
+    "android-sdk-numic-plugin": "^1.0.3",
     "babel-jest": "^29.7.0",
-    "eslint": "^8.50.0",
-    "eslint-plugin-prettier": "^5.0.0",
+    "eslint": "^8.51.0",
+    "eslint-plugin-prettier": "^5.0.1",
     "icon-numic-plugin": "^1.4.3",
     "jest": "^29.7.0",
     "metro-react-native-babel-preset": "^0.77.0",

template/default/package.json

@@ -9,29 +9,29 @@
       "androidBackgroundColor": "#e9e9e9"
     },
     "android-sdk-numic-plugin": {
-      "compileSdkVersion": 33,
-      "targetSdkVersion": 33
+      "compileSdkVersion": 34,
+      "targetSdkVersion": 34
     }
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-native": "^0.72.4"
+    "react-native": "^0.72.5"
   },
   "type": "module",
   "devDependencies": {
-    "@react-native/eslint-config": "^0.72.2",
+    "@react-native/eslint-config": "^0.74.0",
     "@tsconfig/react-native": "^3.0.2",
-    "@types/jest": "^29.5.4",
-    "@types/react-native": "^0.72.2",
-    "@types/react-test-renderer": "^18.0.1",
-    "@typescript-eslint/eslint-plugin": "^6.6.0",
-    "@typescript-eslint/parser": "^6.6.0",
-    "android-sdk-numic-plugin": "^1.0.2",
-    "babel-jest": "^29.6.4",
-    "eslint": "^8.48.0",
-    "eslint-plugin-prettier": "^5.0.0",
+    "@types/jest": "^29.5.5",
+    "@types/react-native": "^0.72.3",
+    "@types/react-test-renderer": "^18.0.3",
+    "@typescript-eslint/eslint-plugin": "^6.7.5",
+    "@typescript-eslint/parser": "^6.7.5",
+    "android-sdk-numic-plugin": "^1.0.3",
+    "babel-jest": "^29.7.0",
+    "eslint": "^8.51.0",
+    "eslint-plugin-prettier": "^5.0.1",
     "icon-numic-plugin": "^1.4.3",
-    "jest": "^29.6.4",
+    "jest": "^29.7.0",
     "metro-react-native-babel-preset": "^0.77.0",
     "numic": "latest",
     "react-test-renderer": "18.2.0",

website/helper/refs.ts

@@ -15,9 +15,10 @@ export function useRefs<T extends Tuple>(initialValue: T extends IsTuple<T> ? nu
 
   return {
     next() {
-      if (++count > MAX_ITERATIONS_COUNT) {
+      count += 1
+      if (count > MAX_ITERATIONS_COUNT) {
         throw new Error(
-          'useMultipleRefs: reached more than 50 refs. This hook can be used exclusively with the array destructuring syntax.'
+          'useMultipleRefs: reached more than 50 refs. This hook can be used exclusively with the array destructuring syntax.',
         )
       }
 

website/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import { Title } from './markup/Title'

website/markup/Description.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { useBreakpoint } from '../helper/breakpoint'
 
 export function Description() {

website/markup/Features.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Color } from '../style'
 import { useBreakpoint } from '../helper/breakpoint'
 
@@ -26,9 +25,9 @@ const features = {
     title: 'Native Code as a Patch',
     description: (
       <span>
-        This plugin will manage the native <InlineCode>{`/android`}</InlineCode> and{' '}
-        <InlineCode>{`/ios`}</InlineCode> folders for you. No need to commit dozens of files. Only
-        the changes made have to be committed to the repository in the form of a patch.
+        This plugin will manage the native <InlineCode>/android</InlineCode> and{' '}
+        <InlineCode>/ios</InlineCode> folders for you. No need to commit dozens of files. Only the
+        changes made have to be committed to the repository in the form of a patch.
       </span>
     ),
     next: 'plugin',
@@ -113,13 +112,15 @@ export function Features({
           style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 10 }}
         >
           <button
+            type="button"
             disabled={!feature.previous}
             style={buttonStyles(feature.previous, mobile)}
             onClick={() => setFeature(feature.previous)}
           >
             Previous
           </button>
           <button
+            type="button"
             disabled={!feature.next}
             style={buttonStyles(feature.next, mobile)}
             onClick={() => setFeature(feature.next)}

website/markup/GettingStarted.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { useBreakpoint } from '../helper/breakpoint'
 import { Color } from '../style'
 
@@ -28,7 +28,8 @@ export function GettingStarted() {
 
   return (
     <>
-      <a
+      <button
+        type="button"
         style={{
           position: 'absolute',
           textDecoration: 'none',
@@ -39,14 +40,17 @@ export function GettingStarted() {
           fontWeight: 'bold',
           lineHeight: 1,
           cursor: 'pointer',
+          border: 'none',
+          outline: 'none',
+          background: 'none',
         }}
         onClick={(event) => {
           event.preventDefault()
           setOpen(true)
         }}
       >
         {mobile ? 'Guide' : 'Getting Started'} ➜
-      </a>
+      </button>
       {open && (
         <div
           style={{
@@ -75,6 +79,7 @@ export function GettingStarted() {
             .
           </p>
           <button
+            type="button"
             style={{
               position: 'absolute',
               top: mobile ? 10 : 20,

website/markup/GitHubButton.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect, useRef, useState } from 'react'
+import { Suspense, useEffect, useRef, useState } from 'react'
 import { Canvas, Dpr, useFrame } from '@react-three/fiber'
 import { Vector3 } from 'three'
 import { OrthographicCamera, useGLTF } from '@react-three/drei'
@@ -16,7 +16,7 @@ function Scene({ rotate = true, hovered, ...props }) {
   // This ensures the rotation happens around the center.
   useEffect(() => {
     mesh.current.geometry.computeBoundingBox()
-    const boundingBox = mesh.current.geometry.boundingBox
+    const { boundingBox } = mesh.current.geometry
     const center = new Vector3()
     boundingBox.getCenter(center)
     mesh.current.geometry.translate(-center.x, -center.y, -center.z)
@@ -66,6 +66,7 @@ export function GitHubButton({ quality = 1, rotate = false }: { quality?: Dpr; r
 
   return (
     <button
+      type="button"
       style={{
         border: 'none',
         outline: 'none',
@@ -87,7 +88,7 @@ export function GitHubButton({ quality = 1, rotate = false }: { quality?: Dpr; r
           <Scene hovered={hovered} rotate={rotate} />
           <OrthographicCamera
             name="1"
-            makeDefault={true}
+            makeDefault
             zoom={1}
             far={100000}
             near={-100000}

website/markup/Items.tsx

@@ -66,31 +66,12 @@ function Android({
     <Float speed={float ? undefined : 0} rotationIntensity={0.2}>
       <group position={position} rotation={rotation}>
         <mesh
-          geometry={nodes['Boolean_2'].geometry}
-          castShadow
-          receiveShadow
-          position={[0, 50, 0]}
-          rotation={[0, 0, 0]}
-        >
-          <MeshReflectorMaterial mirror={0} color={Color.highlight} />
-        </mesh>
-        <mesh
-          geometry={nodes['Cylinder_2'].geometry}
-          material={Material.highlight}
-          castShadow
-          receiveShadow
-          position={[-52.45, 83.03, 0]}
-          rotation={[0, 0, Math.PI / 6]}
-        >
-          <MeshReflectorMaterial mirror={0} color={Color.highlight} />
-        </mesh>
-        <mesh
-          geometry={nodes.Cylinder.geometry}
+          name="Merged Geometry"
+          geometry={nodes.Merged_Geometry.geometry}
           material={Material.highlight}
           castShadow
           receiveShadow
-          position={[52.45, 83.03, 0]}
-          rotation={[0, 0, -Math.PI / 6]}
+          position={[0, 43.25, 0]}
         >
           <MeshReflectorMaterial mirror={0} color={Color.highlight} />
         </mesh>

website/markup/Loader.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Html, useProgress } from '@react-three/drei'
 
 function Spinner() {

website/markup/Quality.tsx

@@ -1,4 +1,4 @@
-import React, { DetailedHTMLProps, HTMLAttributes } from 'react'
+import { DetailedHTMLProps, HTMLAttributes } from 'react'
 import { proxy, useSnapshot, subscribe } from 'valtio'
 import { useBreakpoint } from '../helper/breakpoint'
 
@@ -47,14 +47,21 @@ export function Quality({ dpr, onDpr }) {
     >
       <span style={{ fontSize: mobile ? 10 : 12, lineHeight: 1.2 }}>
         Quality - {fps} FPS -{' '}
-        <label
-          style={{ fontWeight: 'bold', cursor: 'pointer' }}
+        <button
+          type="button"
+          style={{
+            fontWeight: 'bold',
+            cursor: 'pointer',
+            background: 'none',
+            outline: 'none',
+            border: 'none',
+          }}
           onClick={() => {
             Performance.physics = !physics
           }}
         >
           {physics ? 'Disable' : 'Enable'} Physics
-        </label>
+        </button>
       </span>
       <div style={{ display: 'flex', gap: mobile ? 5 : 10 }}>
         <Button active={dpr === 0.5} onClick={() => onDpr(0.5)}>