react-native-tauri 0.0.1

package/.eslintrc.json

@@ -0,0 +1,29 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended"
+  ],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "rules": {
+    "react/react-in-jsx-scope": "off",
+    "react/prop-types": "off",
+    "no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }]
+  }
+}

package/.gitignore

@@ -0,0 +1,49 @@
+# Dependencies
+node_modules/
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
+
+# Build outputs
+dist/
+build/
+*.tsbuildinfo
+
+# Vite
+.vite/
+
+# Environment variables
+.env
+.env.local
+.env.*.local
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+.DS_Store
+*.sublime-project
+*.sublime-workspace
+
+# OS
+Thumbs.db
+.DS_Store
+
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Coverage
+coverage/
+.nyc_output/
+
+# Testing
+.mocha-result.json
+
+# Tauri
+src-tauri/target/

package/.prettierignore

@@ -0,0 +1,2 @@
+node_modules/
+package-lock.json

package/.prettierrc

@@ -0,0 +1,10 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "printWidth": 100,
+  "endOfLine": "lf"
+}

package/CHANGELOG.md

@@ -0,0 +1,31 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.0.0] - 2025-03-16
+
+### Added
+- Initial release of React Native Tauri integration
+- Vite build configuration with React support
+- React Native Web compatibility layer
+- Tauri development and build commands
+- TypeScript support
+- React and React Native Web dependencies
+
+### Features
+- Fast development server with Vite
+- Cross-platform desktop application support
+- React 18 integration
+- React Native Web polyfills
+- Tauri API integration
+
+## Unreleased
+
+### Planned
+- Better documentation
+- Example applications
+- Unit testing setup
+- CI/CD pipeline

package/CONTRIBUTING.md

@@ -0,0 +1,78 @@
+# Contributing to React Native Tauri
+
+Thank you for your interest in contributing! We welcome contributions from the community.
+
+## How to Contribute
+
+1. **Fork the repository** on GitHub
+2. **Clone your fork** locally:
+   ```bash
+   git clone https://github.com/your-username/react-native-tauri.git
+   cd react-native-tauri
+   ```
+
+3. **Create a new branch** for your changes:
+   ```bash
+   git checkout -b feature/your-feature-name
+   # or for bug fixes:
+   git checkout -b fix/bug-description
+   ```
+
+4. **Install dependencies**:
+   ```bash
+   npm install
+   ```
+
+5. **Make your changes** and test them:
+   ```bash
+   npm run dev
+   npm run build
+   ```
+
+6. **Commit your changes** with clear messages:
+   ```bash
+   git commit -m "feat: add new feature" 
+   # or
+   git commit -m "fix: resolve issue description"
+   ```
+
+7. **Push to your fork**:
+   ```bash
+   git push origin feature/your-feature-name
+   ```
+
+8. **Create a Pull Request** on GitHub with a clear description
+
+## Code Style
+
+- Follow the existing code style
+- Use ESLint and Prettier for code formatting
+- Run `npm run format` before committing
+- Write clear commit messages
+- Add comments for complex logic
+
+## Testing
+
+- Ensure your changes don't break existing functionality
+- Test on multiple platforms if possible
+- Add tests for new features when applicable
+
+## Reporting Issues
+
+- Use GitHub Issues for bug reports
+- Provide clear descriptions and reproduction steps
+- Include your environment details (OS, Node version, etc.)
+- Attach screenshots or logs if relevant
+
+## Development Standards
+
+- Follow semantic versioning when tagging releases
+- Update CHANGELOG.md with your changes
+- Ensure all tests pass before submitting PR
+- Include documentation updates if needed
+
+## Questions?
+
+Feel free to open an issue or contact the maintainers.
+
+Thank you for contributing! 🎉

package/GETTING_STARTED.md

@@ -0,0 +1,156 @@
+# Getting Started with React Native Tauri
+
+## Prerequisites
+
+- **Node.js**: 18.0.0 or higher ([Download](https://nodejs.org/))
+- **npm**: 9.0.0 or higher (usually comes with Node.js)
+- **Tauri CLI**: Install it with your project dependencies
+
+## Quick Start
+
+### 1. Installation
+
+```bash
+npm install
+```
+
+### 2. Development
+
+Start the development server:
+
+```bash
+npm run dev
+```
+
+This will start a Vite development server on `http://localhost:3000`.
+
+For Tauri development with hot reload:
+
+```bash
+npm run tauri:dev
+```
+
+### 3. Build for Production
+
+Create an optimized build:
+
+```bash
+npm run build
+```
+
+Build a desktop application with Tauri:
+
+```bash
+npm run tauri:build
+```
+
+### 4. Preview Production Build
+
+Preview the production build locally:
+
+```bash
+npm run preview
+```
+
+## Project Structure
+
+```
+react-native-tauri/
+├── index.html          # HTML entry point
+├── index.js            # React app entry point
+├── empty.js            # Polyfill for React Native modules
+├── vite.config.ts      # Vite configuration
+├── tsconfig.json       # TypeScript configuration
+├── package.json        # Dependencies and scripts
+└── README.md           # This file
+```
+
+## Available Scripts
+
+| Command | Description |
+|---------|-------------|
+| `npm run dev` | Start Vite development server |
+| `npm run build` | Build for production (web) |
+| `npm run preview` | Preview production build |
+| `npm run tauri:dev` | Start Tauri development mode |
+| `npm run tauri:build` | Build desktop application |
+
+## Technology Stack
+
+- **React 18.3.1** - UI library
+- **Vite 6.4.1** - Build tool
+- **React Native Web 0.19.0** - React Native compatibility
+- **Tauri 2.10.1** - Desktop app framework
+- **TypeScript** - Programming language
+
+## Key Features
+
+✨ **Fast Development** - Powered by Vite  
+📱 **Cross-Platform** - Build for web and desktop  
+⚛️ **React Native** - Use React Native components  
+🔗 **Native Integration** - Access system APIs via Tauri  
+📦 **Modern Stack** - Latest versions of all tools  
+
+## Configuration
+
+### Vite Config (`vite.config.ts`)
+
+The project includes special aliases for React Native modules:
+- `react-native` → `react-native-web`
+- `react-native-fs` → polyfill (empty.js)
+- `react-native-blob-util` → polyfill (empty.js)
+
+### TypeScript Config (`tsconfig.json`)
+
+Configured to support JSX and modern JavaScript features.
+
+## Environment Support
+
+- **macOS** - 10.13+
+- **Windows** - 10+
+- **Linux** - distributions supporting GTK 3.6+
+
+## Troubleshooting
+
+### Port 3000 already in use
+
+Change the port in `vite.config.ts`:
+```typescript
+server: {
+  port: 3001,  // Change this
+  host: 'localhost',
+}
+```
+
+### Module not found errors
+
+Ensure all dependencies are installed:
+```bash
+npm install
+```
+
+### Build failures
+
+Clear Vite cache and reinstall:
+```bash
+rm -rf node_modules
+npm install
+npm run build
+```
+
+## Additional Resources
+
+- [Tauri Documentation](https://tauri.app/)
+- [React Documentation](https://react.dev/)
+- [Vite Guide](https://vitejs.dev/guide/)
+- [React Native Web](https://necolas.github.io/react-native-web/)
+
+## Getting Help
+
+- 📖 Check the [documentation](README.md)
+- 🐛 Report bugs on [GitHub Issues](https://github.com/yourusername/react-native-tauri/issues)
+- 💬 Discuss on [GitHub Discussions](https://github.com/yourusername/react-native-tauri/discussions)
+
+## License
+
+MIT License - See [LICENSE](LICENSE) file for details

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,94 @@
+# React Native Tauri
+
+A modern JavaScript/TypeScript module that integrates React Native with Tauri for building cross-platform desktop applications with web technologies.
+
+## Features
+
+- 🚀 Built with Vite for fast development
+- ⚛️ React and React Native Web integration
+- 🔗 Seamless Tauri integration
+- 🎯 TypeScript support
+- 📦 Optimized for production builds
+
+## Installation
+
+```bash
+npm install tauri
+```
+
+## Usage
+
+### Basic Setup
+
+```javascript
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+
+const rootElement = document.getElementById('root')
+
+if (rootElement) {
+  createRoot(rootElement).render(<App />)
+}
+```
+
+### Tauri Integration
+
+```javascript
+import { invoke } from '@tauri-apps/api/tauri'
+
+// Call your Tauri commands
+invoke('your_command', { /* args */ })
+```
+
+## Development
+
+```bash
+# Start development server
+npm run dev
+
+# Start Tauri development environment
+npm run tauri:dev
+
+# Build for production
+npm run build
+
+# Build with Tauri
+npm run tauri:build
+
+# Preview production build
+npm run preview
+```
+
+## Requirements
+
+- Node.js 18.0.0 or higher
+- npm 9.0.0 or higher
+- Tauri 2.10.1 or higher
+
+## Dependencies
+
+- React 18.3.1
+- React DOM 18.3.1
+- React Native Web 0.19.0
+- Vite 6.4.1
+- Tauri Apps CLI & API 2.10.1
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## Bug Reports
+
+If you find a bug, please [open an issue](https://github.com/yourusername/react-native-tauri/issues) with a clear description.
+
+## Support
+
+For more information and documentation, visit:
+- [Tauri Documentation](https://tauri.app)
+- [React Documentation](https://react.dev)
+- [Vite Documentation](https://vitejs.dev)

package/empty.js

@@ -0,0 +1,4 @@
+// Minimal shim for native-only modules when running web/dev
+const empty = {};
+export default empty;
+module.exports = exports.default = empty;

package/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>MyApp</title>
+  <style id="react-native-stylesheet"></style>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="index.js"></script>
+</body>
+
+</html>

package/index.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import App from '../App'
+
+const rootElement = document.getElementById('root')
+
+console.log('Document ready, root element:', rootElement)
+
+if (rootElement) {
+  try {
+    createRoot(rootElement).render(<App />)
+    console.log('App rendered successfully')
+  } catch (error) {
+    console.error('Error rendering app:', error)
+    rootElement.innerHTML = `<div style="color: red; padding: 20px; font-family: monospace; white-space: pre-wrap;">Error: ${error.message}\n${error.stack}</div>`
+  }
+} else {
+  console.error('Root element not found')
+  document.body.innerHTML = '<div style="color: red; padding: 20px; font-family: monospace;">Root element not found</div>'
+}

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "react-native-tauri",
+  "version": "0.0.1",
+  "description": "A modern JavaScript/TypeScript module that integrates React Native with Tauri for building cross-platform desktop applications",
+  "main": "index.js",
+  "author": {
+    "name": "Your Name",
+    "email": "your.email@example.com",
+    "url": "https://github.com/yourusername"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yourusername/react-native-tauri.git"
+  },
+  "homepage": "https://github.com/yourusername/react-native-tauri#readme",
+  "bugs": {
+    "url": "https://github.com/yourusername/react-native-tauri/issues",
+    "email": "your.email@example.com"
+  },
+  "keywords": [
+    "react",
+    "react-native",
+    "tauri",
+    "desktop",
+    "cross-platform",
+    "vite",
+    "typescript",
+    "javascript",
+    "gui",
+    "app"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "tauri:dev": "tauri dev",
+    "tauri:build": "tauri build"
+  },
+  "files": [
+    "index.js",
+    "index.html",
+    "empty.js",
+    "vite.config.ts",
+    "tsconfig.json",
+    "package.json",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md",
+    "CONTRIBUTING.md",
+    "GETTING_STARTED.md",
+    ".eslintrc.json",
+    ".prettierrc",
+    ".prettierignore",
+    ".gitignore"
+  ],
+  "engines": {
+    "node": ">=18.0.0",
+    "npm": ">=9.0.0"
+  },
+  "devDependencies": {
+    "@tauri-apps/api": "^2.10.1",
+    "@tauri-apps/cli": "^2.10.1",
+    "@vitejs/plugin-react": "^4.7.0",
+    "vite": "^6.4.1"
+  },
+  "dependencies": {
+    "postcss-value-parser": "^4.2.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native-web": "0.19.0"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "resolveJsonModule": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "noEmit": false,
+    "outDir": "./dist",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "jsx": "react-jsx"
+  },
+  "include": ["index.js", "index.html", "vite.config.ts", "src/**/*"],
+  "exclude": ["node_modules", "dist", "build"]
+}

package/vite.config.ts

@@ -0,0 +1,46 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [
+    react({
+      include: /\.(jsx|js|tsx|ts)$/, // Use regex to include .js files
+    }),
+  ],
+  root: '.',
+  server: {
+    port: 3000,
+    host: 'localhost',
+  },
+  resolve: {
+    alias: [
+      { find: /^react-native$/, replacement: 'react-native-web' },
+      { find: /^react-native\/(.*)/, replacement: 'react-native-web/dist/index.js' },
+      { find: 'react-native-web', replacement: path.resolve(__dirname, 'node_modules/react-native-web/dist/index.js') },
+      { find: 'react-native-fs', replacement: path.resolve(__dirname, './empty.js') },
+      { find: 'react-native-blob-util', replacement: path.resolve(__dirname, './empty.js') },
+      { find: 'react-native-vector-icons', replacement: path.resolve(__dirname, 'node_modules/react-native-vector-icons/dist/index.es.js') },
+    ],
+    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
+  },
+  build: {
+    outDir: '../build',
+    target: 'es2020',
+  },
+  esbuild: {
+    loader: 'tsx',
+    include: /\.(jsx|js|tsx|ts)$/,
+    exclude: [],
+  },
+  optimizeDeps: {
+    include: ['react-native', 'react-native-web'],
+    exclude: [],
+    esbuildOptions: {
+      loader: {
+        '.js': 'tsx',
+        '.mjs': 'tsx',
+      },
+    },
+  },
+})