{"id":26084384,"url":"https://github.com/c8r/jsx-loader","last_synced_at":"2025-04-12T00:55:14.177Z","repository":{"id":57103602,"uuid":"134170591","full_name":"c8r/jsx-loader","owner":"c8r","description":null,"archived":false,"fork":false,"pushed_at":"2018-06-13T14:50:20.000Z","size":13,"stargazers_count":24,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-12T00:55:02.970Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/c8r.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":"2018-05-20T17:12:29.000Z","updated_at":"2021-12-09T15:42:35.000Z","dependencies_parsed_at":"2022-08-20T17:10:46.939Z","dependency_job_id":null,"html_url":"https://github.com/c8r/jsx-loader","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c8r%2Fjsx-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c8r%2Fjsx-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c8r%2Fjsx-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c8r%2Fjsx-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/c8r","download_url":"https://codeload.github.com/c8r/jsx-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248501880,"owners_count":21114683,"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":"2025-03-09T04:56:53.625Z","updated_at":"2025-04-12T00:55:14.154Z","avatar_url":"https://github.com/c8r.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# @compositor/jsx-loader\n\nWebpack loader for Compositor JSX\n\n```sh\nnpm i @compositor/jsx-loader\n```\n\n```js\n// webpack.config.js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.jsx$/,\n        use: [\n          'babel-loader',\n          '@compositor/jsx-loader'\n        ]\n      }\n    ]\n  }\n}\n```\n\n## JSX Format\n\nCompositor JSX is a static file format that uses JSX, without any wrapping JavaScript syntax.\nThis format is well suited for creating prototypes, demos, and pages that use a common set of React UI components.\n\n```jsx\n---\ntitle: Hello\nscope: import * as scope from 'rebass'\n---\n\u003cBox\u003e\n  \u003cHeading\u003e{props.title}\u003c/Heading\u003e\n\u003c/Box\u003e\n```\n\nJSX files are converted to pure functional components,\nwhich helps to develop UI compositions decoupled from application state.\n\n### Front Matter\n\nFront matter is used to specify default props and component scope for the file.\n\n### Scope\n\nScope can be specified with the `scope` field in front matter,\nor with the `scope` option in a webpack configuration.\nThe `scope` value is included at the top of the transpiled component module and any valid JavaScript expression should work.\nThe scope string should evaluate to an object where the keys are provided in scope to the component.\n\n```js\n// example scope.js file\nimport { Box, Flex } from 'grid-styled'\n\nexport default {\n  Box,\n  Flex\n}\n```\n\nSpecified in JSX front matter:\n\n```jsx\n---\nscope: import scope from './scope'\n---\n```\n\nOr specified as a loader option in webpack configuration:\n\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.jsx$/,\n        use: [\n          'babel-loader',\n          {\n            loader: '@compositor/jsx-loader',\n            options: {\n              scope: `import scope from './scope'`\n            }\n          }\n        ]\n      }\n    ]\n  }\n}\n```\n\n## Raw JSX Source\n\nThe transpiled module will also include a named export `jsx` for access to the source JSX content.\n\n```js\nimport { jsx } from './Hello.jsx'\n```\n\nMIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fc8r%2Fjsx-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fc8r%2Fjsx-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fc8r%2Fjsx-loader/lists"}