How TypeScript to React Native Schema compiler should work
- Dominant language
- TypeScript
- Stars
- 3
- Forks
- 0
- PR merge metrics
- No merged PRs in 30d
Description
The general idea is to build a TypeScript to React Native Schema compiler that can convert a module (that contains a native UI component usage) to a schema that will be used to define the native interface.
When a user writes a React Native UI component that requires some native (platform-specific) code, the tool can generate C++ classes and interfaces/protocols that are necessary for this component. To do so, we need to traverse a component file in a way that:
~~- [ ] Compiler can determine whether the given file exports a function or a class (for now this is a definition of a "valid" component module). A function supposed to take only one parameter (`props`), while class might have both (`props` and `state`) parameters. ([task](https://github.com/Kureev/schemify/issues/1))~~ This is no longer relevant as discussed with @rickhanlonii on Discord. Instead, we are going to look up for a specific `NativeComponent` type. See [an example here](https://gist.github.com/Kureev/38301bb8e38064e4e80e9cc2c38fc2a3).
~~- [ ] Based on the assumption that a given module contains a "valid" native UI component, the compiler should be able to determine the appropriate type/interface definitions by checking the first parameter of an exported function or a class. When compiler has all the information it needs, we can fill in the `props` section of the schema.~~
- ✅Compiler checks if given module contains a class that complies with `NativeComponent` type. If it does, the module gets a "valid" status.
- ✅Based on the assumption that we work with a "valid" module, compiler should be able to parse type/interface definition and extract schema's `props` and `events`. Under `events` we understand `props` that starts with `on` prefix, followed by a capital letter and have a function type.
- ✅Get a name of the exported function/class so it can compiler can put it under `components` section.
- ✅Compose a new JSON that complies to React Native Schema definition and print it out.
~~- **[OPTIONAL]** Exported component has a `NativeComponent` type or contains a component that has a `NativeComponent` type.~~
~~- **[OPTIONAL]** Compiler can determine whether or not given native UI module exports anything~~
Contributor guide
No contributing guide indexed for this repository
Research direction
The issue does not name implementation files, tests, or a compiler entry point. Start by reviewing the linked NativeComponent example and the listed schema requirements, then locate the existing compiler flow. Done means the compiler recognizes valid NativeComponent modules and produces React Native schema JSON with the component name, props, and events.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- compilers, mobile
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100