{"id":29024497,"url":"https://github.com/kingjethro999/ignite","last_synced_at":"2026-05-07T03:36:46.623Z","repository":{"id":300867857,"uuid":"1007391232","full_name":"kingjethro999/Ignite","owner":"kingjethro999","description":"Ignite - A Custom React Native DSL Framework, Runs on Expo Go","archived":false,"fork":false,"pushed_at":"2025-06-24T01:44:40.000Z","size":2426,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-24T02:35:58.366Z","etag":null,"topics":["expo","extensions","framework","javascript","programming-language","react-native","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kingjethro999.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-23T23:31:54.000Z","updated_at":"2025-06-24T01:44:43.000Z","dependencies_parsed_at":"2025-06-24T02:36:00.063Z","dependency_job_id":"e34f93cb-1d65-4686-9247-ff6d00b36775","html_url":"https://github.com/kingjethro999/Ignite","commit_stats":null,"previous_names":["kingjethro999/ignite"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kingjethro999/Ignite","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kingjethro999%2FIgnite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kingjethro999%2FIgnite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kingjethro999%2FIgnite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kingjethro999%2FIgnite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kingjethro999","download_url":"https://codeload.github.com/kingjethro999/Ignite/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kingjethro999%2FIgnite/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261595549,"owners_count":23182229,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["expo","extensions","framework","javascript","programming-language","react-native","typescript"],"created_at":"2025-06-26T04:02:02.936Z","updated_at":"2026-05-07T03:36:46.589Z","avatar_url":"https://github.com/kingjethro999.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ignite - A Custom React Native DSL Framework\n\n## About the Project\n\nIgnite is a domain-specific language (DSL) and compiler framework designed to simplify React Native development by providing a more declarative, XML-like syntax for building mobile applications. It transforms custom `.ignite` files into standard React Native components, complete with navigation, state management, and styling.\n\n## What Inspired This Project\n\nThe inspiration for Ignite came from the complexity of setting up and maintaining React Native applications, especially for developers who prefer a more declarative approach similar to HTML/XML. Traditional React Native development requires extensive boilerplate code for navigation setup, state management, and component structure. Ignite aims to bridge this gap by providing:\n\n- **Simplified Syntax**: Write UI components using familiar XML-like tags\n- **Automatic State Management**: Built-in state binding without manual useState setup\n- **Seamless Navigation**: Simple navigation declarations that generate proper React Navigation code\n- **Convention over Configuration**: Sensible defaults for common patterns\n- **Flexible Package Support**: Use any npm package or custom component seamlessly\n\n## How I Built the Project\n\nThe Ignite framework consists of four main components:\n\n### 1. **Parser (`parser.ts`)**\nThe parser is the heart of the system, responsible for:\n- Converting `.ignite` files into an Abstract Syntax Tree (AST)\n- Extracting screen metadata (titles, navigation options, tab configurations)\n- Parsing import statements (default, named, namespace imports)\n- Handling state declarations with type inference\n- Preserving stylesheets and handling component hierarchy\n- Supporting complex prop parsing including state bindings and navigation actions\n\n```typescript\n// Example of parsing imports and custom components\nimport { LinearGradient } from 'expo-linear-gradient'\nimport firebase from 'firebase'\n\nstate user=null\nstate loading=false\n\n\u003cLinearGradient colors={['#ff6b6b', '#4ecdc4']} style=\"gradient\"\u003e\n  \u003cText\u003eHello World\u003c/Text\u003e\n\u003c/LinearGradient\u003e\n```\n\n### 2. **Generator (`generator.ts`)**\nThe generator transforms parsed AST into valid React Native code:\n- Maps custom components to React Native equivalents (`Button` → `TouchableOpacity`)\n- Generates automatic state management with proper TypeScript types\n- Handles complex prop transformations (style references, navigation bindings)\n- Creates complete functional components with hooks and imports\n- Supports any npm package or custom component\n\n### 3. **Router System (`router.ts`)**\nAutomatically generates navigation configuration:\n- Creates tab navigators for screens marked as tab screens\n- Builds stack navigators for modal and push screens\n- Handles screen options like titles and header visibility\n- Supports custom tab icons and ordering\n\n### 4. **Compiler (`index.ts`)**\nThe main orchestrator that:\n- Discovers all `.ignite` files in the project\n- Manages the compilation pipeline\n- Handles file system operations and directory structure\n- Coordinates between parser, generator, and router\n\n## What I Learned\n\nBuilding Ignite taught me several valuable lessons:\n\n### **Language Design Complexity**\nCreating a DSL involves careful consideration of syntax choices. I learned that:\n- Familiar syntax (XML-like) reduces the learning curve\n- Implicit behaviors (automatic state generation) can be powerful but need clear documentation\n- Error handling and debugging become crucial when abstracting away complexity\n\n### **AST Manipulation and Code Generation**\nWorking with Abstract Syntax Trees deepened my understanding of:\n- How to preserve source code structure while transforming it\n- The importance of maintaining proper indentation and formatting in generated code\n- Balancing flexibility with opinionated defaults\n\n### **React Native Architecture**\nThe project required deep knowledge of:\n- React Navigation patterns and best practices\n- State management patterns in functional components\n- Component mapping and prop transformation strategies\n- File system organization for React Native projects\n\n### **Toolchain Integration**\nBuilding a compiler taught me about:\n- File watching and incremental compilation\n- Managing output directories and build artifacts\n- Integration with existing React Native development workflows\n\n## Challenges I Faced\n\n### **Complex Prop Parsing**\nOne of the biggest challenges was handling the variety of prop types and formats:\n- Boolean attributes (`multiline` vs `multiline=\"true\"`)\n- Style references (`style=\"container\"` → `style={styles.container}`)\n- Navigation bindings (`onPress=\"go('/path')\"`)\n- State bindings (`bind=\"username\"`)\n- Custom expressions (`{value}`, `{styles.container}`)\n\n**Solution**: Implemented a character-by-character parser that handles quotes, braces, and different value types appropriately.\n\n### **State Management Inference**\nAutomatically generating the right state types based on component usage:\n- Switch components should generate boolean states\n- Numeric inputs should generate number states\n- Text inputs should generate string states\n- Theme switches needed special handling\n\n**Solution**: Created a type inference system that analyzes component types and prop combinations to determine appropriate state types.\n\n### **Navigation Integration**\nReact Navigation has complex setup requirements that needed to be abstracted:\n- Tab navigators vs stack navigators\n- Screen options and configurations\n- Deep linking and route parameters\n\n**Solution**: Built a route analysis system that categorizes screens and generates appropriate navigator structures.\n\n### **File System Management**\nManaging the relationship between source `.ignite` files and generated React Native files:\n- Maintaining directory structures\n- Handling file dependencies\n- Cleaning up old generated files\n\n**Solution**: Implemented a systematic approach using the `.ignite` output directory and careful path mapping.\n\n## Technical Innovations\n\n### **Component Mapping System**\n```typescript\nconst COMPONENT_MAP: Record\u003cstring, string\u003e = {\n  View: 'View',\n  Text: 'Text',\n  Button: 'TouchableOpacity', // Custom mapping\n  Input: 'TextInput',\n  // ... more mappings\n};\n```\n\n### **Automatic State Generation**\n```typescript\n// From: \u003cInput bind=\"username\" /\u003e\n// Generates: const [username, setUsername] = useState('');\n```\n\n### **Smart Navigation Handling**\n```typescript\n// From: onPress=\"go('/settings')\"\n// Generates: onPress={() =\u003e navigation.navigate('SettingsIndex')}\n```\n\n### **Flexible Import System**\n```typescript\n// Supports any npm package\nimport { LinearGradient } from 'expo-linear-gradient'\nimport firebase from 'firebase'\nimport * as Three from 'three'\n```\n\n## Version Comparison\n\n| Feature | v0.1.0 | v0.2.0 |\n|---------|--------|--------|\n| **Basic Components** | ✅ View, Text, Button, Input | ✅ All v0.1.0 + Pressable, Modal, SafeAreaView |\n| **State Management** | ✅ Basic state binding | ✅ Advanced state types (string, number, boolean, object, array) |\n| **Navigation** | ✅ Basic tab/stack navigation | ✅ Enhanced navigation with custom options |\n| **Styling** | ✅ StyleSheet integration | ✅ Advanced style expressions and references |\n| **Import System** | ❌ Hardcoded imports only | ✅ **Flexible imports (default, named, namespace)** |\n| **Custom Components** | ❌ Limited to predefined components | ✅ **Any component or npm package** |\n| **Function Support** | ❌ No custom functions | ✅ **Async and regular functions** |\n| **Package Support** | ❌ React Native only | ✅ **Any npm package (Firebase, Expo, etc.)** |\n| **Expression Support** | ❌ Limited expressions | ✅ **Full JSX expression support** |\n| **Type Safety** | ❌ Basic type inference | ✅ **Advanced type inference and validation** |\n| **Error Handling** | ❌ Basic error messages | ✅ **Comprehensive error handling** |\n| **Documentation** | ❌ Basic README | ✅ **Complete documentation with examples** |\n\n## Installation\n\n```bash\nnpm install -g the-ignite\n```\n\n## CLI Commands\n\nIgnite provides a powerful command-line interface to create, develop, and build your applications.\n\n### Available Commands\n\n| Command | Description | Usage |\n|---------|-------------|-------|\n| `ignite create \u003cname\u003e` | Create a new Ignite app | `ignite create my-app` |\n| `ignite dev` | Start development server | `ignite dev` |\n| `ignite dev --android` | Start development server for Android | `ignite dev -a` |\n| `ignite dev --ios` | Start development server for iOS | `ignite dev -i` |\n| `ignite build` | Build for production | `ignite build` |\n| `ignite build --android` | Build for Android | `ignite build -a` |\n| `ignite build --ios` | Build for iOS | `ignite build -i` |\n\n### Command Details\n\n#### `ignite create \u003cname\u003e`\nCreates a new Ignite application with a complete project structure.\n\n**What it does:**\n- Creates a new directory with your app name\n- Sets up a complete Expo project with React Navigation\n- Downloads starter `.ignite` files (Home, About, Developers screens)\n- Downloads app assets (icons, splash screen)\n- Installs all necessary dependencies\n- Creates configuration files (babel.config.js, app.config.js, App.js)\n\n**Generated Project Structure:**\n```\nmy-app/\n├── app/\n│   └── (tabs)/\n│       ├── Home/\n│       │   └── index.ignite\n│       ├── About/\n│       │   └── index.ignite\n│       └── Developers/\n│           └── index.ignite\n├── assets/\n│   ├── icon.png\n│   ├── adaptive-icon.png\n│   └── splash.png\n├── .ignite/          # Generated React Native files\n├── package.json      # Dependencies and scripts\n├── babel.config.js   # Babel configuration\n├── app.config.js     # Expo configuration\n├── App.js           # Main app entry point\n└── ignite.json      # Ignite project configuration\n```\n\n**Example:**\n```bash\nignite create my-awesome-app\ncd my-awesome-app\n```\n\n#### `ignite dev`\nStarts the development server with hot reloading and file watching.\n\n**What it does:**\n- Compiles all `.ignite` files to React Native components\n- Starts file watcher for automatic recompilation\n- Launches Expo development server\n- Provides real-time feedback and error handling\n\n**Options:**\n- `--android` or `-a`: Opens the app on Android emulator/device\n- `--ios` or `-i`: Opens the app on iOS simulator/device\n\n**Example:**\n```bash\n# Start development server\nignite dev\n\n# Start with Android\nignite dev --android\n\n# Start with iOS\nignite dev --ios\n```\n\n**Development Workflow:**\n1. Edit `.ignite` files in the `app/` directory\n2. Changes are automatically compiled to `.ignite/` directory\n3. Expo hot reloads the changes instantly\n4. See results immediately on your device/simulator\n\n#### `ignite build`\nBuilds your application for production deployment.\n\n**What it does:**\n- Compiles all `.ignite` files\n- Sets up EAS Build configuration (if not present)\n- Builds for specified platforms using Expo Application Services (EAS)\n- Creates production-ready app bundles\n\n**Options:**\n- `--android` or `-a`: Build only for Android\n- `--ios` or `-i`: Build only for iOS\n- No options: Build for both platforms\n\n**Example:**\n```bash\n# Build for all platforms\nignite build\n\n# Build for Android only\nignite build --android\n\n# Build for iOS only\nignite build --ios\n```\n\n**Build Output:**\n- Android: APK/AAB files via EAS Build\n- iOS: IPA files via EAS Build\n- Web: Static files in `web-build/` directory\n\n### Project Structure After Creation\n\nWhen you run `ignite create \u003cname\u003e`, you get a complete project with:\n\n```\nmy-app/\n├── app/                          # Your .ignite source files\n│   └── (tabs)/                   # Tab navigation screens\n│       ├── Home/\n│       │   └── index.ignite      # Home screen with welcome content\n│       ├── About/\n│       │   └── index.ignite      # About screen with app info\n│       └── Developers/\n│           └── index.ignite      # Developers screen with team info\n├── assets/                       # App assets\n│   ├── icon.png                  # App icon\n│   ├── adaptive-icon.png         # Android adaptive icon\n│   └── splash.png                # Splash screen\n├── .ignite/                      # Generated React Native files\n│   ├── screens/                  # Compiled screen components\n│   │   ├── HomeIndex.js\n│   │   ├── AboutIndex.js\n│   │   └── DevelopersIndex.js\n│   └── router.js                 # Navigation configuration\n├── package.json                  # Dependencies and scripts\n├── babel.config.js              # Babel configuration\n├── app.config.js                # Expo configuration\n├── App.js                       # Main app entry point\n└── ignite.json                  # Ignite project metadata\n```\n\n### Dependencies Installed\n\nThe `create` command automatically installs:\n\n**Core Dependencies:**\n- `expo` - Expo framework\n- `react` \u0026 `react-dom` - React core\n- `react-native` - React Native\n- `@react-navigation/native` - Navigation library\n- `@react-navigation/stack` - Stack navigator\n- `@react-navigation/bottom-tabs` - Tab navigator\n- `@expo/vector-icons` - Icon library\n\n**Development Dependencies:**\n- `@babel/core` - Babel compiler\n- `@types/react` - TypeScript types\n- `typescript` - TypeScript support\n\n### Getting Started Workflow\n\n1. **Create a new project:**\n   ```bash\n   ignite create my-app\n   cd my-app\n   ```\n\n2. **Start development:**\n   ```bash\n   ignite dev\n   ```\n\n3. **Edit your screens:**\n   - Open `app/(tabs)/Home/index.ignite`\n   - Make changes to the `.ignite` file\n   - See changes instantly in your app\n\n4. **Build for production:**\n   ```bash\n   ignite build --android\n   ignite build --ios\n   ```\n\n### Troubleshooting\n\n**Common Issues:**\n\n1. **\"This is not an Ignite project\"**\n   - Make sure you're in the correct directory\n   - Check for `ignite.json` file in project root\n\n2. **\"App directory not found\"**\n   - Ensure you have an `app/` directory with `.ignite` files\n   - Run `ignite create` to set up a new project\n\n3. **Build failures**\n   - Check your EAS Build configuration\n   - Ensure you have proper Expo account setup\n   - Verify all dependencies are installed\n\n**Getting Help:**\n- Check the generated files in `.ignite/` directory\n- Review Expo documentation for platform-specific issues\n- Ensure all dependencies are properly installed with `npm install`\n\n## Usage\n\n1. Create `.ignite` files in your app directory:\n\n```xml\n\u003c!-- app/home/index.ignite --\u003e\nimport { LinearGradient } from 'expo-linear-gradient'\nimport firebase from 'firebase'\n\nscreen title=\"Home\" isTabScreen=\"true\" tabOrder=\"1\" tabIcon=\"home\"\n\nstate user=null\nstate loading=false\n\nasync handleLogin() {\n  const result = await firebase.auth().signInWithEmailAndPassword(email, password)\n  setUser(result.user)\n  go('/profile')\n}\n\n\u003cView style=\"container\"\u003e\n  \u003cLinearGradient colors={['#ff6b6b', '#4ecdc4']} style=\"gradient\"\u003e\n    \u003cText style=\"title\"\u003eWelcome to Ignite\u003c/Text\u003e\n    \u003cInput bind=\"username\" placeholder=\"Enter username\" /\u003e\n    \u003cButton onPress=\"handleLogin()\"\u003eLogin\u003c/Button\u003e\n  \u003c/LinearGradient\u003e\n\u003c/View\u003e\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    padding: 20,\n  },\n  title: {\n    fontSize: 24,\n    fontWeight: 'bold',\n  },\n  gradient: {\n    flex: 1,\n    borderRadius: 10,\n  },\n});\n```\n\n2. Compile your project:\n\n```bash\nnpx ignite dev\n```\n\n3. The framework generates React Native components in the `.ignite` directory.\n\n## Features\n\n- **Declarative Syntax**: XML-like component definitions\n- **Automatic State Management**: Smart state inference and generation\n- **Built-in Navigation**: Simple navigation with automatic route generation\n- **Style Integration**: Seamless stylesheet handling\n- **Hot Reloading**: Real-time compilation during development\n- **Advanced State Management**: Integration with Redux or Zustand\n- **Tab Navigation**: Easy tab-based navigation setup\n- **Type Safety**: Generated code with proper TypeScript support\n- **Flexible Imports**: Support for any npm package (default, named, namespace imports)\n- **Custom Components**: Use any React Native component or third-party library\n- **Function Support**: Write async and regular functions directly in `.ignite` files\n- **Expression Support**: Full JSX expression support with curly braces\n- **Package Integration**: Seamless integration with Firebase, Expo, and other popular libraries\n\n## Advanced Examples\n\n### Firebase Integration\n```xml\nimport firebase from 'firebase'\n\nstate user=null\nstate messages=[]\n\nasync loadMessages() {\n  const snapshot = await firebase.firestore().collection('messages').get()\n  setMessages(snapshot.docs.map(doc =\u003e doc.data()))\n}\n\n\u003cList data={messages} renderItem=\"renderMessage\" /\u003e\n```\n\n### Custom Components\n```xml\nimport MyCustomButton from './components/MyCustomButton'\n\n\u003cMyCustomButton onPress=\"handlePress()\" customProp=\"value\"\u003e\n  Click me\n\u003c/MyCustomButton\u003e\n```\n\n### Complex State Management\n```xml\nstate user={}\nstate settings={darkMode: false, notifications: true}\nstate items=[]\n\nasync updateSettings(newSettings) {\n  setSettings({...settings, ...newSettings})\n  await AsyncStorage.setItem('settings', JSON.stringify(settings))\n}\n```\n\n## Project Structure\n\n```\nyour-project/\n├── app/\n│   ├── home/\n│   │   └── index.ignite\n│   ├── (tabs)/\n│   │   ├── profile/\n│   │   │   └── index.ignite\n│   │   └── settings/\n│   │       └── index.ignite\n│   └── components/\n│       └── MyCustomButton.ignite\n└── .ignite/\n    ├── screens/\n    ├── router.js\n    └── ...generated files\n```\n\n## Future Enhancements\n\nThe Ignite framework could be extended with:\n- **Documentation Generation**: Auto-generated component documentation\n- **Visual Editor**: Drag-and-drop interface for building `.ignite` files\n\n## Contributing\n\nWe welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## Conclusion\n\nIgnite represents a unique approach to React Native development that prioritizes developer experience and rapid prototyping. While it abstracts away some of the complexity of React Native, it maintains the power and flexibility needed for real-world applications. The project demonstrates how thoughtful language design can significantly improve developer productivity while maintaining the underlying platform's capabilities.\n\nThe framework successfully bridges the gap between simple declarative syntax and complex React Native applications, making mobile development more accessible to developers from web backgrounds while providing powerful features for experienced React Native developers.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkingjethro999%2Fignite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkingjethro999%2Fignite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkingjethro999%2Fignite/lists"}