{"id":19602894,"url":"https://github.com/nodegui/parcel-plugin-nodegui","last_synced_at":"2025-04-27T17:32:25.678Z","repository":{"id":57319043,"uuid":"205698556","full_name":"nodegui/parcel-plugin-nodegui","owner":"nodegui","description":"official parcel plugin for using and bundling assets with your nodegui app","archived":false,"fork":false,"pushed_at":"2019-09-02T16:55:23.000Z","size":7,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-24T07:49:05.479Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/nodegui.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}},"created_at":"2019-09-01T15:50:27.000Z","updated_at":"2022-04-21T08:18:09.000Z","dependencies_parsed_at":"2022-08-26T01:10:21.936Z","dependency_job_id":null,"html_url":"https://github.com/nodegui/parcel-plugin-nodegui","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/nodegui%2Fparcel-plugin-nodegui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nodegui%2Fparcel-plugin-nodegui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nodegui%2Fparcel-plugin-nodegui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nodegui%2Fparcel-plugin-nodegui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nodegui","download_url":"https://codeload.github.com/nodegui/parcel-plugin-nodegui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251178044,"owners_count":21548154,"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-11-11T09:26:50.344Z","updated_at":"2025-04-27T17:32:25.358Z","avatar_url":"https://github.com/nodegui.png","language":"JavaScript","readme":"# 📦 parcel-plugin-nodegui\n\u003e Use and bundle assets with your nodegui app\n\n## General\nThis plugin allows you to import actual assets, such as css and image files, into your NodeGUI app and utilize them in your app.\n\nYou can see an example project that uses parcel and this plugin [here](https://github.com/illBeRoy/nodegui-parcel-example).\n\n\u003e Disclaimer: this plugin is in its early stages. Bugs are probable. Feature requests, bug reports and contributions are most welcome!\n\n## Features\n* Utilize CSS files in your code using `require` (much like web and React Native) 🎨\n* Import image assets and utilize them with QImage widgets using `require` 🖼\n\n## Getting Started\n### Prerequisites\nAs this is a `parcel` plugin, your project has to use `parcel` for managing its bundle. Read about it [here](https://parceljs.org/).\n\n### Installation\nRun the following command inside your project to install this :\n```bash\nnpm install --save-dev parcel-plugin-nodegui\n```\n\n### Building for NodeGUI\nMake sure that you select the `node` target when bundling your projects for the NodeGUI platform (using the `build` and `watch` commands). Read about project targets [here](https://parceljs.org/cli.html#target).\n\n#### Example\nBuilding for node target:\n```bash\nnpx parcel build --target node src/index.tsx\n```\n\nWatching for node target (auto bundle build upon file save):\n```bash\nnpx parcel watch --target node src/index.tsx\n```\n\n## Plugins\n### CSS\nImport and use css with your NodeGUI windows's `styleSheet` prop.\n\n#### Usage\nIn order to use CSS in your NodeGUI app, simply require it:\n```js\nconst style = require('./style.css');\n```\n\nAnd use it with the `Window` widget's `styleSheet` property:\n\n```jsx\n\u003cWindow styleSheet={style}\u003e\n  ...\n\u003c/Window\u003e\n```\n\n\u003e Note: Do not forget that selectors in NodeGUI apps are the elements' ids, and therefore you should use the `#thisIsId` selector in your stylesheets.\n\n#### Example\n_style.css_\n```css\n#container {\n  flex: 1;\n  flex-direction: column;\n  min-height: '100%';\n  background: #4B4B4B;\n}\n\n#text {\n  color: white;\n}\n```\n\n_app.jsx_\n```jsx\nconst App = () =\u003e {\n  return (\n    \u003cWindow\n      styleSheet={require('./style.css')}\n    \u003e\n      \u003cView id=\"container\"\u003e\n        \u003cText id=\"text\"\u003eHello, world\u003c/Text\u003e\n      \u003c/View\u003e\n    \u003c/Window\u003e\n  );\n};\n```\n\n#### Using with pre-processors (SASS \\ LESS)\nSimply follow the regular guide regarding how to use said pre-processors in your project:\n* SASS: https://parceljs.org/scss.html\n* LESS: https://parceljs.org/less.html\n* Stylus: https://parceljs.org/stylus.html\n\nThe plugin will automatically utilize their output CSS in your project.\n\n### Images\nImport and use image files with your NodeGUI's `Image` components.\n\n#### Usage\nIn order to use image assets in your NodeGUI app, simply require them:\n```js\nconst image = require('./image.png');\n```\n\nAnd use them with the `Image` widget's `src` property:\n\n```jsx\n\u003cImage src={image} /\u003e\n```\n\n\n## Maintainers ✨\n\nPeople maintaining this project.\n\n\u003c!-- prettier-ignore --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n\u003ctd align=\"center\"\u003e\u003ca href=\"https://www.linkedin.com/in/roysommer/\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/6681893?v=4\" width=\"100px;\" alt=\"Roy Sommer\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRoy Sommer\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnodegui%2Fparcel-plugin-nodegui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnodegui%2Fparcel-plugin-nodegui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnodegui%2Fparcel-plugin-nodegui/lists"}