{"id":17845756,"url":"https://github.com/guidevloper/nullstack-to-njs","last_synced_at":"2025-04-02T15:25:05.934Z","repository":{"id":112877292,"uuid":"437026735","full_name":"GuiDevloper/nullstack-to-njs","owner":"GuiDevloper","description":"Parser from something to the Nullstack njs file","archived":false,"fork":false,"pushed_at":"2021-12-11T00:11:35.000Z","size":1871,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-08T06:27:15.181Z","etag":null,"topics":["cli","nullstack","parser"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/GuiDevloper.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2021-12-10T15:32:04.000Z","updated_at":"2021-12-15T19:52:29.000Z","dependencies_parsed_at":null,"dependency_job_id":"e84600f8-8712-415b-89ee-b384013cc02e","html_url":"https://github.com/GuiDevloper/nullstack-to-njs","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/GuiDevloper%2Fnullstack-to-njs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GuiDevloper%2Fnullstack-to-njs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GuiDevloper%2Fnullstack-to-njs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GuiDevloper%2Fnullstack-to-njs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GuiDevloper","download_url":"https://codeload.github.com/GuiDevloper/nullstack-to-njs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246839360,"owners_count":20842224,"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":["cli","nullstack","parser"],"created_at":"2024-10-27T21:36:55.264Z","updated_at":"2025-04-02T15:25:05.911Z","avatar_url":"https://github.com/GuiDevloper.png","language":"JavaScript","readme":"# nullstack-to-njs\nParser from something to the Nullstack **njs** file\n\n[!nullstack-tsx-example video](https://user-images.githubusercontent.com/31557312/145647166-0f0e019b-ddc8-4ab9-9234-6b6d6daa885e.mp4)\n\n## Use\n\n[See the repository of the example project shown in video](https://github.com/GuiDevloper/nullstack-tsx-example)\n\nThis is a CLI that watches everything in current directory **src** folder, copying to a **out** folder and converting/cleaning **tsx** files into **njs** ones.\n\nIt takes the place of the `start` script, keeps the Nullstack own CLI running and re-compiles whenever a file inside **src** changes.\n\n```diff\n# package.json scripts\n- \"start\": \"npx nullstack start\"\n+ \"start\": \"npx nullstack-to-njs\"\n```\n\n\u003e 💡 It even accepts whatever args you would pass to the Nullstack CLI\n\nThen everything you need is to update whatever path that would point to **src**, but now to **out** folder (e.g. `Application` component called in **client.js**/**server.js**).\n\n## Features\n\nWriting code in TSX brings the known TS features in editor, and some are very fitting for Nullstack development experience:\n\n### Typing of Component Props\n\n![Typing of Component Props Example](https://github.com/GuiDevloper/nullstack-to-njs/blob/master/assets/component-props-typing.png?raw=true)\n\nWhen declared in component `constructor`, editors understands which props it requires and their respective types.\n\n```tsx\ntype Props = Context \u0026 {\n  /**\n   * The project name that Home needs\n   */\n  projectName: string\n}\n\nclass Home extends Nullstack {\n  constructor(_: Props) {\n    super();\n  }\n  ...\n}\n```\n\nAfter conversion to **njs**, the above code becomes:\n\n```jsx\nclass Home extends Nullstack {\n  constructor(_) {\n    super();\n  }\n  ...\n}\n```\n\n### Docs inside Context typings\n\n![Docs inside Context typings Example](https://github.com/GuiDevloper/nullstack-to-njs/blob/master/assets/context-typing-docs.png?raw=true)\n\nThe Nullstack Team have been working in concepts like joining the docs and code, TS typing files came as the target to invest to best achieve this.\n\nCurrently in improvement, our typing files are ready for some tests in the [nullstack-types repo](https://github.com/GuiDevloper/nullstack-types) and as [npm package](https://npmjs.com/package/nullstack-types).\n\nTyping files finally found it's perfect use inside TSX files, to use them, currently you should install as follows:\n\n```\nnpm install nullstack-types -D\n```\n\nand add this reference line on top of files where you want to consume it:\n\n```jsx\n/// \u003creference types=\"nullstack-types\"/\u003e\n```\n\n### Example of Conversion\n\n```diff\n- App.tsx\n+ App.njs\n- /// \u003creference types=\"nullstack-types\"/\u003e\nimport Nullstack from 'nullstack';\n\n- type Props = {};\n- type myCtx = Context \u0026 Props;\n- interface mineCtx extends Context {}\n\n- const value1: string = '';\n+ const value1 = '';\n- const value2: Array\u003cnumber\u003e = [1, 2];\n+ const value2 = [1, 2];\n- const value3: number[] = [1, 2];\n+ const value3 = [1, 2];\n\nclass App extends Nullstack {\n- constructor(_: Props) {\n+ constructor(_) {\n    super();\n  }\n\n- componentValue: string = '';\n+ componentValue = '';\n\n- render(ctx: mineCtx) {}\n+ render(ctx) {}\n}\n```\n\n## Motivation\n\nBy default [Nullstack framework](https://nullstack.app) uses a **.njs** file  and specific syntax, which limits the recognition of it's scripts by file editors with strict rules (e.g. VSCode with TSServer).\n\nThere's many ways to implement this support, this project is an example of one that invests on converting and cleaning a file type (**.tsx**) for it to become a simple **njs** file understandable by Nullstack.\n\nMaking possible the use of TSX file features without even knowing deeply or messing with the framework insides.","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguidevloper%2Fnullstack-to-njs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fguidevloper%2Fnullstack-to-njs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguidevloper%2Fnullstack-to-njs/lists"}