create-pika-minigame 2.6.0 → 2.6.1

package/bin/cli.js

@@ -222,10 +222,12 @@ ${colors.reset}
   // Copy scripts folder
   if (fs.existsSync(scriptsTemplateDir)) {
     copyDir(scriptsTemplateDir, path.join(targetDir, 'scripts'), replacements);
-    // Make deploy script executable
-    const deployScript = path.join(targetDir, 'scripts', 'deploy-vercel.sh');
-    if (fs.existsSync(deployScript)) {
-      fs.chmodSync(deployScript, '755');
+    // Make shell scripts executable
+    const scriptsDir = path.join(targetDir, 'scripts');
+    for (const file of fs.readdirSync(scriptsDir)) {
+      if (file.endsWith('.sh')) {
+        fs.chmodSync(path.join(scriptsDir, file), '755');
+      }
     }
   }
 
@@ -253,32 +255,36 @@ ${colors.reset}
   const pkgPath = path.join(targetDir, 'package.json');
   const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
 
+  // Only keep peer dependencies - actual deps come from pika-build workspace
   pkg.dependencies = {
-    ...pkg.dependencies,
-    'react-native-gesture-handler': '~2.20.0',
+    react: pkg.dependencies.react,
+    'react-native': pkg.dependencies['react-native'],
+  };
+
+  // These are peerDependencies for the game
+  pkg.peerDependencies = {
+    'react': '18.3.1',
+    'react-native': '0.77.0',
     'react-native-reanimated': '~3.16.0',
-    'react-native-safe-area-context': '4.12.0',
   };
 
   pkg.devDependencies = {
     ...pkg.devDependencies,
-    '@callstack/repack': '^5.2.5',
-    '@callstack/repack-plugin-reanimated': '^5.2.5',
-    '@module-federation/enhanced': '^2.7.0',
-    '@rspack/core': '^1.7.12',
-    '@swc/helpers': '^0.5.19',
-    'ajv': '^8.17.0',
+    '@types/react': '~18.3.0',
+    'typescript': '~5.3.0',
     'serve': '^14.2.0',
+    'eslint': '^8.0.0',
   };
 
-  // Add build and deploy scripts
+  // Add build and deploy scripts (use pika-build.sh for MF compatibility)
   pkg.scripts = {
     ...pkg.scripts,
-    'build:ios': `npx react-native webpack-bundle --platform ios --entry-file index.js --dev false --bundle-output build/outputs/ios/remotes/${snakeName}.container.js.bundle`,
-    'build:android': `npx react-native webpack-bundle --platform android --entry-file index.js --dev false --bundle-output build/outputs/android/remotes/${snakeName}.container.js.bundle`,
+    'build:ios': './scripts/pika-build.sh ios',
+    'build:android': './scripts/pika-build.sh android',
     'build:all': 'npm run build:ios && npm run build:android',
     'serve:ios': 'npx serve build/outputs/ios/remotes -l 9000 --cors',
     'serve:android': 'npx serve build/outputs/android/remotes -l 9000 --cors',
+    'dev': 'npm run build:ios && npm run serve:ios',
     'deploy': './scripts/deploy-vercel.sh',
     'deploy:prod': './scripts/deploy-vercel.sh --prod',
   };
@@ -290,26 +296,36 @@ ${colors.reset}
   console.log(`
 ${colors.green}Success!${colors.reset} Created ${colors.bright}${pascalName}${colors.reset} at ${targetDir}
 
+${colors.bright}Prerequisites:${colors.reset}
+
+  Make sure you have the Pika host repo cloned at ~/robotapp (or set PIKA_HOST_DIR)
+  The build script uses the host's node_modules for Module Federation compatibility.
+
 ${colors.bright}Next steps:${colors.reset}
 
   ${colors.cyan}cd ${projectName}${colors.reset}
-  ${colors.cyan}npm install --legacy-peer-deps${colors.reset}
-  ${colors.cyan}cd ios && pod install && cd ..${colors.reset}
-  ${colors.cyan}npm run ios${colors.reset}
+  ${colors.cyan}npm install${colors.reset}
+  ${colors.cyan}npm run build:ios${colors.reset}      # Build the game
+  ${colors.cyan}npm run serve:ios${colors.reset}      # Serve on port 9000
 
 ${colors.bright}Available commands:${colors.reset}
 
-  ${colors.cyan}npm run ios${colors.reset}         Run on iOS simulator
-  ${colors.cyan}npm run android${colors.reset}     Run on Android emulator
-  ${colors.cyan}npm start${colors.reset}           Start Metro bundler
-  ${colors.cyan}npm run deploy${colors.reset}      Deploy to Vercel (preview)
-  ${colors.cyan}npm run deploy:prod${colors.reset} Deploy to Vercel (production)
+  ${colors.cyan}npm run build:ios${colors.reset}     Build for iOS (uses pika-build.sh)
+  ${colors.cyan}npm run build:android${colors.reset} Build for Android
+  ${colors.cyan}npm run serve:ios${colors.reset}     Serve build on localhost:9000
+  ${colors.cyan}npm run dev${colors.reset}           Build + serve (one command)
+  ${colors.cyan}npm run deploy${colors.reset}        Deploy to Vercel (preview)
+  ${colors.cyan}npm run deploy:prod${colors.reset}   Deploy to Vercel (production)
 
 ${colors.bright}Project structure:${colors.reset}
 
   src/           Game source code (edit this!)
-  dev/           Development helpers (MockHost)
-  scripts/       Deploy scripts
+  scripts/       Build and deploy scripts
+
+${colors.bright}Environment:${colors.reset}
+
+  PIKA_HOST_DIR  Path to robotapp (default: ~/robotapp)
+  MF_PUBLIC_PATH Public URL for production builds
 
 Happy coding! ${colors.yellow}🎮${colors.reset}
 `);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-pika-minigame",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "description": "CLI to scaffold Pika mini-game projects (bare React Native 0.77)",
   "author": "Pika Team",
   "license": "MIT",

package/templates/package.json.template

@@ -5,32 +5,28 @@
   "description": "Pika mini-game: {{PROJECT_NAME_PASCAL}}",
   "main": "index.js",
   "scripts": {
-    "start": "react-native start",
-    "ios": "react-native run-ios",
-    "android": "react-native run-android",
-    "build:ios": "npx react-native webpack-bundle --platform ios --entry-file index.js --dev false --bundle-output build/outputs/ios/remotes/{{PROJECT_NAME_SNAKE}}.container.js.bundle",
-    "build:android": "npx react-native webpack-bundle --platform android --entry-file index.js --dev false --bundle-output build/outputs/android/remotes/{{PROJECT_NAME_SNAKE}}.container.js.bundle",
+    "build:ios": "./scripts/pika-build.sh ios",
+    "build:android": "./scripts/pika-build.sh android",
+    "build:ios:prod": "./scripts/pika-build.sh ios --prod",
+    "build:android:prod": "./scripts/pika-build.sh android --prod",
     "build:all": "npm run build:ios && npm run build:android",
     "serve:ios": "npx serve build/outputs/ios/remotes -l 9000 --cors",
     "serve:android": "npx serve build/outputs/android/remotes -l 9000 --cors",
     "deploy": "./scripts/deploy-vercel.sh",
     "deploy:prod": "./scripts/deploy-vercel.sh --prod",
+    "dev": "npm run build:ios && npm run serve:ios",
     "lint": "eslint src/",
     "typecheck": "tsc --noEmit"
   },
-  "dependencies": {
+  "peerDependencies": {
     "react": "18.3.1",
     "react-native": "0.77.0",
-    "react-native-gesture-handler": "~2.20.0",
-    "react-native-reanimated": "~3.16.0",
-    "react-native-safe-area-context": "4.12.0",
-    "react-native-screens": "~4.0.0"
+    "react-native-reanimated": "~3.16.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.25.0",
-    "@callstack/repack": "^5.0.0",
     "@types/react": "~18.3.0",
     "typescript": "~5.3.0",
-    "serve": "^14.2.0"
+    "serve": "^14.2.0",
+    "eslint": "^8.0.0"
   }
 }

package/templates/rspack.config.mjs

@@ -62,6 +62,8 @@ export default Repack.defineRspackConfig((env) => {
           './App': './src/App.tsx',
         },
         shared: {
+          // eager: false = load from host's share scope (smaller bundle)
+          // Requires building with pika-build.sh to ensure correct paths
           react: { singleton: true, eager: false, requiredVersion: '18.3.1' },
           'react-native': { singleton: true, eager: false, requiredVersion: '0.77.0' },
           'react-native-reanimated': { singleton: true, eager: false },

package/templates/scripts/deploy-vercel.sh

@@ -8,10 +8,17 @@ set -e
 # Usage:
 #   ./scripts/deploy-vercel.sh [--prod]
 #
+# Environment variables:
+#   VERCEL_PROD_URL - Production URL (e.g., https://my-game.vercel.app)
+#                     Required for --prod to set correct publicPath
+#
 # Prerequisites:
 #   - Vercel CLI: npm i -g vercel
 #   - Logged in: vercel login
 #
+# Example:
+#   VERCEL_PROD_URL=https://deploy-pink-mu.vercel.app ./scripts/deploy-vercel.sh --prod
+#
 # =============================================================================
 
 # Colors
@@ -37,6 +44,14 @@ PROD_FLAG=""
 if [[ "$1" == "--prod" ]]; then
     PROD_FLAG="--prod"
     log_info "Deploying to PRODUCTION"
+
+    # Check for VERCEL_PROD_URL
+    if [[ -z "$VERCEL_PROD_URL" ]]; then
+        log_warn "VERCEL_PROD_URL not set. Will try to auto-detect, but may not work correctly."
+        log_warn "For reliable deploys, set: VERCEL_PROD_URL=https://your-project.vercel.app"
+    else
+        log_info "Production URL: $VERCEL_PROD_URL"
+    fi
 else
     log_info "Deploying to PREVIEW (add --prod for production)"
 fi
@@ -48,7 +63,7 @@ PROJECT_VERSION=$(node -p "require('./package.json').version")
 log_info "Project: $PROJECT_NAME v$PROJECT_VERSION"
 
 # =============================================================================
-# Step 1: Build for all platforms
+# Step 1: Build for all platforms using pika-build.sh
 # =============================================================================
 log_info "Building mini-game bundles..."
 
@@ -57,24 +72,14 @@ BUILD_DIR="build/deploy"
 rm -rf "$BUILD_DIR"
 mkdir -p "$BUILD_DIR/ios" "$BUILD_DIR/android"
 
-# We'll set MF_PUBLIC_PATH after we know the Vercel URL
-# For now, build with a placeholder that we'll update
+# Use pika-build.sh which builds in host's workspace for MF compatibility
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
 
 log_info "Building iOS bundle..."
-npx react-native webpack-bundle \
-    --platform ios \
-    --entry-file index.js \
-    --dev false \
-    --bundle-output build/outputs/ios/remotes/${PROJECT_NAME//-/_}.container.js.bundle \
-    2>&1 | tail -5
+"$SCRIPT_DIR/pika-build.sh" ios 2>&1 | tail -10
 
 log_info "Building Android bundle..."
-npx react-native webpack-bundle \
-    --platform android \
-    --entry-file index.js \
-    --dev false \
-    --bundle-output build/outputs/android/remotes/${PROJECT_NAME//-/_}.container.js.bundle \
-    2>&1 | tail -5
+"$SCRIPT_DIR/pika-build.sh" android 2>&1 | tail -10
 
 # Copy to deploy directory with platform subdirs
 cp -r build/outputs/ios/remotes/* "$BUILD_DIR/ios/"
@@ -147,9 +152,12 @@ log_success "Build complete: $BUILD_DIR"
 # =============================================================================
 log_info "Deploying to Vercel..."
 
-# Deploy and capture the URL
+# First deploy to get the project linked and get a URL
+log_info "Initial deployment..."
 DEPLOY_OUTPUT=$(vercel "$BUILD_DIR" $PROD_FLAG --yes 2>&1)
-DEPLOY_URL=$(echo "$DEPLOY_OUTPUT" | grep -E "https://" | tail -1 | tr -d ' ')
+
+# Extract URL more carefully - look for vercel.app deployment URLs
+DEPLOY_URL=$(echo "$DEPLOY_OUTPUT" | grep -oE 'https://[a-zA-Z0-9._-]+\.vercel\.app' | head -1)
 
 if [[ -z "$DEPLOY_URL" ]]; then
     log_error "Failed to get deployment URL"
@@ -157,10 +165,74 @@ if [[ -z "$DEPLOY_URL" ]]; then
     exit 1
 fi
 
+# For production, use VERCEL_PROD_URL if set, otherwise try to auto-detect
+if [[ "$PROD_FLAG" == "--prod" ]]; then
+    if [[ -n "$VERCEL_PROD_URL" ]]; then
+        # Use the explicitly set production URL
+        DEPLOY_URL="$VERCEL_PROD_URL"
+        log_info "Using provided production URL: $DEPLOY_URL"
+    else
+        log_info "Trying to detect production alias..."
+        # Try to get alias from the deployed URL
+        PROD_DOMAIN=$(vercel inspect "$DEPLOY_URL" --json 2>/dev/null | node -e "
+            const data = JSON.parse(require('fs').readFileSync('/dev/stdin', 'utf8'));
+            const alias = data.alias || data.aliases || [];
+            const prod = Array.isArray(alias) ? alias[0] : alias;
+            if (prod) console.log(prod);
+        " 2>/dev/null || echo "")
+
+        if [[ -n "$PROD_DOMAIN" ]]; then
+            PROD_DOMAIN=$(echo "$PROD_DOMAIN" | sed 's|^https://||')
+            DEPLOY_URL="https://$PROD_DOMAIN"
+            log_info "Detected production alias: $DEPLOY_URL"
+        else
+            log_warn "Could not detect production alias, using deployment URL: $DEPLOY_URL"
+        fi
+    fi
+fi
+
+log_info "Deployment URL: $DEPLOY_URL"
+
+# =============================================================================
+# Step 3: Update mf-manifest.json with correct publicPath and redeploy
+# =============================================================================
+log_info "Updating publicPath in manifests..."
+
+# Update iOS manifest
+if [[ -f "$BUILD_DIR/ios/mf-manifest.json" ]]; then
+    node -e "
+    const fs = require('fs');
+    const manifest = JSON.parse(fs.readFileSync('$BUILD_DIR/ios/mf-manifest.json', 'utf8'));
+    manifest.metaData.publicPath = '$DEPLOY_URL/ios/';
+    fs.writeFileSync('$BUILD_DIR/ios/mf-manifest.json', JSON.stringify(manifest, null, 2));
+    console.log('Updated iOS publicPath to: $DEPLOY_URL/ios/');
+    "
+fi
+
+# Update Android manifest
+if [[ -f "$BUILD_DIR/android/mf-manifest.json" ]]; then
+    node -e "
+    const fs = require('fs');
+    const manifest = JSON.parse(fs.readFileSync('$BUILD_DIR/android/mf-manifest.json', 'utf8'));
+    manifest.metaData.publicPath = '$DEPLOY_URL/android/';
+    fs.writeFileSync('$BUILD_DIR/android/mf-manifest.json', JSON.stringify(manifest, null, 2));
+    console.log('Updated Android publicPath to: $DEPLOY_URL/android/');
+    "
+fi
+
+# Redeploy with updated manifests
+log_info "Redeploying with updated manifests..."
+FINAL_OUTPUT=$(vercel "$BUILD_DIR" $PROD_FLAG --yes 2>&1)
+FINAL_URL=$(echo "$FINAL_OUTPUT" | grep -oE 'https://[a-zA-Z0-9._-]+\.vercel\.app' | head -1)
+
+if [[ -n "$FINAL_URL" ]]; then
+    DEPLOY_URL="$FINAL_URL"
+fi
+
 log_success "Deployed to: $DEPLOY_URL"
 
 # =============================================================================
-# Step 3: Show integration info
+# Step 4: Show integration info
 # =============================================================================
 echo ""
 echo "=============================================="

package/templates/scripts/pika-build.sh

@@ -0,0 +1,112 @@
+#!/bin/bash
+#
+# Pika Mini-Game Build Script
+#
+# Builds the mini-game using the Pika host's build environment to ensure
+# Module Federation compatibility.
+#
+# Usage:
+#   ./scripts/pika-build.sh ios
+#   ./scripts/pika-build.sh android
+#
+
+set -e
+
+PLATFORM=${1:-ios}
+
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+PROJECT_DIR="$(dirname "$SCRIPT_DIR")"
+PROJECT_NAME=$(node -e "console.log(require('./app.json').name)" 2>/dev/null || basename "$PROJECT_DIR" | sed 's/-/_/g')
+
+# Pika host repo - contains the correct node_modules
+# Change this to your robotapp location or set PIKA_HOST_DIR env var
+PIKA_HOST_DIR="${PIKA_HOST_DIR:-$HOME/robotapp}"
+
+echo "🎮 Pika Mini-Game Builder"
+echo "========================="
+echo "Project: ${PROJECT_NAME}"
+echo "Platform: ${PLATFORM}"
+echo "Host dir: ${PIKA_HOST_DIR}"
+echo ""
+
+# Verify host directory exists
+if [ ! -d "${PIKA_HOST_DIR}/node_modules/@callstack/repack" ]; then
+    echo "❌ Error: Pika host not found at ${PIKA_HOST_DIR}"
+    echo ""
+    echo "Please either:"
+    echo "  1. Set PIKA_HOST_DIR environment variable to your robotapp location"
+    echo "  2. Or clone robotapp to ~/robotapp and run 'npm install'"
+    echo ""
+    echo "Example:"
+    echo "  export PIKA_HOST_DIR=/path/to/robotapp"
+    echo "  ./scripts/pika-build.sh ios"
+    exit 1
+fi
+
+# Create workspace in host's mini-games folder (temporarily)
+WORKSPACE_DIR="${PIKA_HOST_DIR}/mini-games/_build_${PROJECT_NAME}"
+
+echo "📁 Setting up build workspace..."
+rm -rf "${WORKSPACE_DIR}"
+mkdir -p "${WORKSPACE_DIR}"
+
+# Copy source files
+cp -r "${PROJECT_DIR}/src" "${WORKSPACE_DIR}/"
+cp "${PROJECT_DIR}/index.js" "${WORKSPACE_DIR}/"
+cp "${PROJECT_DIR}/app.json" "${WORKSPACE_DIR}/"
+cp "${PROJECT_DIR}/babel.config.js" "${WORKSPACE_DIR}/"
+cp "${PROJECT_DIR}/rspack.config.mjs" "${WORKSPACE_DIR}/"
+cp "${PROJECT_DIR}/tsconfig.json" "${WORKSPACE_DIR}/" 2>/dev/null || true
+
+# Create react-native.config.js
+cat > "${WORKSPACE_DIR}/react-native.config.js" << 'EOF'
+module.exports = {
+  commands: require('@callstack/repack/commands/rspack'),
+};
+EOF
+
+# Create package.json with peerDependencies
+cat > "${WORKSPACE_DIR}/package.json" << EOF
+{
+  "name": "${PROJECT_NAME}",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "build:ios": "npx react-native webpack-bundle --platform ios --entry-file index.js --dev false --bundle-output build/outputs/ios/local/index.ios.bundle --assets-dest build/outputs/ios/local",
+    "build:android": "npx react-native webpack-bundle --platform android --entry-file index.js --dev false --bundle-output build/outputs/android/local/index.android.bundle --assets-dest build/outputs/android/local"
+  },
+  "peerDependencies": {
+    "react": "18.3.1",
+    "react-native": "0.77.0"
+  }
+}
+EOF
+
+echo "🔨 Building for ${PLATFORM}..."
+
+cd "${WORKSPACE_DIR}"
+
+# Set public path if MF_PUBLIC_PATH is set
+if [ -n "$MF_PUBLIC_PATH" ]; then
+    export MF_PUBLIC_PATH
+fi
+
+npm run build:${PLATFORM}
+
+echo "📁 Copying build output..."
+mkdir -p "${PROJECT_DIR}/build/outputs/${PLATFORM}"
+cp -r "${WORKSPACE_DIR}/build/outputs/${PLATFORM}/remotes" "${PROJECT_DIR}/build/outputs/${PLATFORM}/"
+
+# Cleanup workspace
+rm -rf "${WORKSPACE_DIR}"
+
+echo ""
+echo "✅ Build successful!"
+echo ""
+echo "Output: ${PROJECT_DIR}/build/outputs/${PLATFORM}/remotes/"
+echo ""
+echo "Container size:"
+ls -lh "${PROJECT_DIR}/build/outputs/${PLATFORM}/remotes/"*container*.bundle 2>/dev/null || echo "  (no container found)"
+echo ""
+echo "To test locally:"
+echo "  npx serve build/outputs/${PLATFORM}/remotes -l 9000 --cors"