{"id":19670398,"url":"https://github.com/mat-sz/dui","last_synced_at":"2025-08-02T20:33:16.796Z","repository":{"id":128693335,"uuid":"242229741","full_name":"mat-sz/DUI","owner":"mat-sz","description":"✏️ Developing under influence... (of SwiftUI) - Declarative UI syntax for JS.","archived":false,"fork":false,"pushed_at":"2020-02-22T14:51:00.000Z","size":10,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-29T00:40:08.698Z","etag":null,"topics":["babel","babel-plugin","javascript","jsx","jsx-syntax","parser","reactjs","swiftui"],"latest_commit_sha":null,"homepage":null,"language":null,"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/mat-sz.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-02-21T21:00:08.000Z","updated_at":"2021-02-11T05:46:10.000Z","dependencies_parsed_at":"2023-06-04T14:45:24.357Z","dependency_job_id":null,"html_url":"https://github.com/mat-sz/DUI","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mat-sz/DUI","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mat-sz%2FDUI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mat-sz%2FDUI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mat-sz%2FDUI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mat-sz%2FDUI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mat-sz","download_url":"https://codeload.github.com/mat-sz/DUI/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mat-sz%2FDUI/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268448362,"owners_count":24252019,"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","status":"online","status_checked_at":"2025-08-02T02:00:12.353Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["babel","babel-plugin","javascript","jsx","jsx-syntax","parser","reactjs","swiftui"],"created_at":"2024-11-11T17:06:07.703Z","updated_at":"2025-08-02T20:33:16.788Z","avatar_url":"https://github.com/mat-sz.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/mat-sz/DUI/master/logo.png\" alt=\"DUI\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  Declarative UI syntax for JS (inspired by SwiftUI).\n\u003c/p\u003e\n\n----\n\nDUI is an experimental project focused on bringing [SwiftUI-like syntax](https://developer.apple.com/xcode/swiftui/) to JavaScript.\n\nThe project is focused on:\n\n* full compatibility with current JSX ecosystem,\n* interoperability with JSX code (DUI doesn't prevent you from using JSX in the same file),\n* providing the full feature set of JSX.\n\nMany elements of the DUI ecosystem are currently undergoing development. The syntax should stay the same, but there's no guarantee that absolutely nothing will change.\n\n**Quickstart:**\n\n```sh\nnpx create-react-app name --template dui\n```\n\n## Table of Contents\n\n1. [Examples](#examples)\n2. [Usage](#usage)\n3. [Ecosystem](#ecosystem)\n\n## Examples\n\n```js\nimport React, { useState } from 'react';\nimport logo from './logo.svg';\nimport './App.css';\n\nfunction App() {\n  const [ redBackground, setRedBackground ] = useState(false);\n\n  const toggleRedBackground = () =\u003e {\n    setRedBackground(isRed =\u003e !isRed);\n  };\n\n  const imgProps = {\n    src: logo,\n    className: \"App-logo\",\n    alt: \"logo\"\n  };\n\n  return (\n    div (className: \"App\") {\n      header (className: \"App-header\") {\n        img (...imgProps, style: {\n          background: redBackground ? 'red' : null\n        }) {\n          // Unfortunately, self-closing tags aren't supported yet.\n        }\n        p {\n          \"Hello, world.\"\n        }\n        button (onClick: toggleRedBackground) {\n          \"Click me!\"\n        }\n      }\n    }\n  );\n}\n\nexport default App;\n```\n\nInline functions can be added in a following fashion:\n\n```js\nbutton (onClick: () =\u003e doSomething()) {\n  // The parentheses around the function are required.\n}\n\n// async:\n\nbutton (onClick: async () =\u003e await doSomething()) {\n  // The parentheses around the function are required.\n}\n```\n\nReact Fragment is `@` instead of `\u003c\u003e`:\n\n```js\n@ {\n  ul {\n    li { \"Item 1\" }\n    li { \"Item 2\" }\n    li { \"Item 3\" }\n  }\n  p {\n    \"Hello, world!\"\n  }\n}\n```\n\nSpread operator (`...`) is supported as well:\n\n```js\ndiv (...props) {}\n// or:\ndiv (hello: \"world\", ...props) {}\n```\n\n## Usage\n\nThe Babel plugin works with ejected React apps and also customize-cra. More detailed configuration information is coming soon, after the critical bugs are resolved.\n\n### create-react-app template\n\n```sh\nnpx create-react-app name --template dui\n```\n\n### Manual installation with react-app-rewired and customize-cra\n\nFirst, install all required packages:\n\n```sh\nyarn add customize-cra react-app-rewired babel-plugin-syntax-dui\n```\n\nReplace `scripts` in `package.json`:\n\n```json\n\"scripts\": {\n  \"start\": \"react-app-rewired start\",\n  \"build\": \"react-app-rewired build\",\n  \"test\": \"react-app-rewired test\"\n},\n```\n\nCreate `.babelrc` in project's root directory:\n\n```json\n{\n  \"plugins\": [\"babel-plugin-syntax-dui\"]\n}\n```\n\nAnd, finally, create a `config-overrides.js` file:\n\n```js\nconst { override, useBabelRc, disableEsLint } = require('customize-cra');\n\nmodule.exports = override(\n  disableEsLint(),\n  useBabelRc()\n);\n```\n\n`disableEsLint` is required because the ESLint parser/plugin is not ready yet.\n\n## Ecosystem\n\n* Babel syntax plugin: [babel-plugin-syntax-dui](https://github.com/mat-sz/babel-plugin-syntax-dui) [\\[npm\\]](https://npmjs.com/package/babel-plugin-syntax-dui)\n* Babel parser fork: [babel-parser-dui](https://github.com/mat-sz/babel/tree/master/packages/babel-parser) [\\[npm\\]](https://npmjs.com/package/babel-parser-dui)\n* CRA template: [cra-template-dui](https://github.com/mat-sz/cra-template-dui) [\\[npm\\]](https://npmjs.com/package/cra-template-dui)\n\nMissing:\n\n* VS Code syntax highlighting/checking extension,\n* ESLint plugin,\n* Prettier plugin,\n* documentation.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmat-sz%2Fdui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmat-sz%2Fdui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmat-sz%2Fdui/lists"}