{"id":13672660,"url":"https://github.com/cgspine/Recos","last_synced_at":"2025-04-27T22:32:41.176Z","repository":{"id":42675934,"uuid":"368063560","full_name":"cgspine/Recos","owner":"cgspine","description":"Typescript to compose and swiftUI","archived":false,"fork":false,"pushed_at":"2023-04-23T13:55:11.000Z","size":7192,"stargazers_count":35,"open_issues_count":1,"forks_count":4,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-11-11T10:42:37.959Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cgspine.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2021-05-17T05:16:26.000Z","updated_at":"2024-10-31T15:58:20.000Z","dependencies_parsed_at":"2022-07-09T06:00:37.391Z","dependency_job_id":"b2dce671-c591-4978-b605-9ab2f4536248","html_url":"https://github.com/cgspine/Recos","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cgspine%2FRecos","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cgspine%2FRecos/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cgspine%2FRecos/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cgspine%2FRecos/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cgspine","download_url":"https://codeload.github.com/cgspine/Recos/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251219600,"owners_count":21554444,"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":[],"created_at":"2024-08-02T09:01:43.310Z","updated_at":"2025-04-27T22:32:36.164Z","avatar_url":"https://github.com/cgspine.png","language":"Swift","readme":"![Recos](imgs/logo.png)\n\n# Recos - experimental ts/jsx to Android Compose/SwiftUI compiler\n\nThis repository contains an early prototype of Recos, an experimental compiler, which would compile tx/jsx into Android Jetpack Compose and iOS SwiftUI.\n\nFor a long time, many technologies have been introduced to build cross-platform mobile apps using single codebase, and React-Native is the most popular framework in this area. However, React-Native has some kind of performance issues and relatively higher memory usage.\n\nThe main goal of Recos is to help us building high performance cross-platform mobile apps in a declarative manner.\n## Recos overview\n\n![Design](imgs/design.jpeg)\n\n## Getting started with Recos\n\nBefore starting this 101 tutorial, make sure our system have installed [node](https://nodejs.org/en/), and suppose we are using macOS, we may consider install it via [brew](https://formulae.brew.sh/formula/node):\n\n```\nbrew install node\nnpm install getopts --save\n```\n\nFor the Android side, in order to make Jetpack Compose works, we must use [Android Studio Preview version](https://developer.android.com/studio/preview) in this moment.\n\nSetting up the development environment is out of the scope of this tutorial, for more information, please read the latest official docs from [Facebook](https://reactnative.dev/docs/environment-setup) and [Google](https://developer.android.com/studio/preview/install-preview).\n\nUsing your convenient tool to write the first React app, we will use [TypeScript](https://reactnative.dev/docs/typescript) in this case and named it `hello.tsx`:\n\n```typescript\nfunction Item1(item, onItemClick) {\n    const onClick = useCallback(() =\u003e {\n        onItemClick(item)\n    })\n\n    return \u003cText style={{ color: '#fff' }} onClick={onClick}\u003e偶数：{item.name}, {item.count}\u003c/Text\u003e\n\n}\n\nfunction Item2(item, onItemClick) {\n    const onClick = useCallback(() =\u003e {\n        onItemClick(item)\n    })\n\n    return \u003cText style={{ color: '#fff' }} onClick={onClick}\u003e奇数：{item.name}, {item.count}\u003c/Text\u003e\n}\n\nfunction HelloWorld(current) {\n\n    const [data, setData] = useState([])\n\n    useEffect(() =\u003e {\n        let ret = []\n        for (let i = 0; i \u003c 1000; i++) {\n            ret.push({\n                name: 'item' + i,\n                index: i,\n                count: 0\n            })\n        }\n        setData(ret)\n    }, [current])\n\n    let render = function (i) {\n        let item = data[i]\n        if (item.index % 2 == 0) {\n            return Item1(item, (it) =\u003e {\n                it.count = it.count + 1\n                setData(data)\n            })\n        } else {\n            return Item2(item, (it) =\u003e {\n                it.count = it.count + 2\n                setData(data)\n            })\n        }\n    }\n\n    return \u003cRecyclerView count={data.length} render={render}\u003eHello World!\u003c/RecyclerView\u003e\n}\n```\n\nThe next step would be use `js/cli.js` to compile it into a bundle file:\n\n```shell\nnode cli.js -s hello.tsx -o hello.bundle\n```\n\nPut the output file `hello.bundle` into Android project's `app/src/main/assets`, compile the Android app and we will see:\n\n\u003cimg src=\"imgs/recyclerview_demo.gif\" width=\"300\"\u003e\n\nThe example for iOS:\n\n\u003cimg src=\"imgs/ios_demo.gif\" width=\"300\"\u003e\n","funding_links":[],"categories":["Swift"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcgspine%2FRecos","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcgspine%2FRecos","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcgspine%2FRecos/lists"}