{"id":14981988,"url":"https://github.com/hellof2e/quark-core","last_synced_at":"2025-10-25T02:34:15.826Z","repository":{"id":136968915,"uuid":"596842124","full_name":"hellof2e/quark-core","owner":"hellof2e","description":"Fast 4Kb size!  Web Components with JSX. （Web Components 构建工具，4kb！）","archived":false,"fork":false,"pushed_at":"2024-04-12T08:53:40.000Z","size":1419,"stargazers_count":308,"open_issues_count":6,"forks_count":27,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-04-14T01:10:52.662Z","etag":null,"topics":["jsx","quarkc","webcomponents","webcomponents-framework"],"latest_commit_sha":null,"homepage":"https://quark-ecosystem.github.io/quarkc-docs/#/","language":"TypeScript","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/hellof2e.png","metadata":{"files":{"readme":"README.en-US.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}},"created_at":"2023-02-03T03:15:43.000Z","updated_at":"2024-08-20T11:40:22.955Z","dependencies_parsed_at":"2023-09-23T04:27:57.053Z","dependency_job_id":"c731d69e-8704-4e70-8b1d-0b9bdc9f1904","html_url":"https://github.com/hellof2e/quark-core","commit_stats":null,"previous_names":["hellof2e/quark-core","hellof2e/quark"],"tags_count":65,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hellof2e%2Fquark-core","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hellof2e%2Fquark-core/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hellof2e%2Fquark-core/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hellof2e%2Fquark-core/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hellof2e","download_url":"https://codeload.github.com/hellof2e/quark-core/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247411235,"owners_count":20934653,"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":["jsx","quarkc","webcomponents","webcomponents-framework"],"created_at":"2024-09-24T14:04:36.949Z","updated_at":"2025-10-25T02:34:15.740Z","avatar_url":"https://github.com/hellof2e.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\r\n\u003cp align=\"center\"\u003e\r\n  \u003ca href=\"https://quark-ecosystem.github.io/quarkc-docs/\"\u003e\r\n    \u003cimg src=\"https://github.com/hellof2e/quark-core/assets/14307551/5968d0ed-6d60-4b13-b05b-1e9ba30a5708\" \u003e\r\n  \u003c/a\u003e\r\n\u003c/p\u003e\r\n\u003ch2 align=\"center\"\u003e Quarkc \u003c/h2\u003e\r\n\u003cdiv align=\"center\"\u003e\r\n\r\nQuarkc，跨技术栈/原生组件构建工具。\r\n\r\n\u003c/div\u003e\r\n\r\n\u003cp align=\"center\"\u003e\r\n  \u003ca href=\"https://www.npmjs.com/package/quarkc\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/quarkc.svg\" alt=\"Total Downloads\"\u003e\u003c/a\u003e\r\n  \u003ca href=\"https://www.npmjs.com/package/quarkc\"\u003e\r\n    \u003cimg src=\"https://img.shields.io/npm/v/quarkc.svg\" alt=\"Published on NPM\"\u003e\r\n  \u003c/a\u003e\r\n  \u003ca href=\"https://github.com/hellof2e/quark-core/blob/main/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/quark-core.svg\" alt=\"License\"\u003e\u003c/a\u003e\r\n\u003c/p\u003e\r\n\r\n\r\n\u003cp align=\"center\"\u003e\r\n  \u003ca href=\"https://github.com/hellof2e/quark-design/blob/main/README.md\"\u003e\r\n    简体中文\r\n  \u003c/a\u003e\r\n  \u003cspan\u003e | English \u003c/span\u003e\r\n\u003c/p\u003e\r\n\r\n### outstanding case\r\n\r\n| author | github address | screenshot / link\r\n| ---- | ---- | ----- |\r\n| @xsf0105  | https://xsf0105.github.io/piano/ |  https://xsf0105.github.io/piano/ |\r\n| @xsf0105 | https://github.com/xsf0105/dark-light-element | https://unpkg.com/dark-light-element@latest/demo.html |\r\n| @yuhaiyang1 | https://github.com/yuhaiyang1/quarkc-time | https://unpkg.com/quark-timer@0.0.2/demo.html |\r\n| @hellof2e | https://github.com/hellof2e/quark-doc-header | ![1685501041275](https://github.com/hellof2e/quark-core/assets/14307551/24dd5626-e6a9-452c-9c95-c2cdb8891573 ) https://quarkc.hellobike.com/#/ |\r\n| @dyf19118 | https://github.com/dyf19118/quark-ui-rate | ![image](https://github.com/hellof2e/quark-cli/assets/14307551/e11e6c49-4c18-4bca-adc3 -01a7198ab2e2) |\r\n| @hellof2e | https://github.com/hellof2e/quark-doc-home | ![1686575964690](https://github.com/hellof2e/quark-core/assets/14307551/9618427c-916b-4dfd-b28b-0e8e0f6ce744 ) |\r\n\r\n\r\n## introduce\r\n\r\nQuarkc (Quark core abbreviation) is a web components framework with perfect development experience. With it, you can develop standard **cross-framework components**.\r\n\r\n## Why Quarkc?\r\n\r\nBackground 1: [History of the front end]\r\nThe front-end has been developed for many years. Regardless of the size of the company, there are generally various technology stacks (React, Angular, Jq, Vue) / different versions of the same technology stack (Vue2, Vue3). If you want to develop a common component (for example: marketing pop-up window), the workload is double+ (different technical frameworks need to be developed/maintained/launched separately, and different versions of the same technology may also need to be developed/maintained/launched separately)\r\n\r\nBackground 2: [The future of the front end]\r\nThe front-end framework will continue to iterate/develop, and there will be new versions and new frameworks. Using Quarkc to develop \"universal components\" will not update and iterate along with the \"wave of front-end frameworks\" (greatly reducing component development/maintenance costs).\r\n\r\nThe above background determines that the development and maintenance costs of **front-end general-purpose components** are relatively high.\r\n\r\n## Quarkc target\r\n\r\nLet web components implement technology stack independent!\r\n\r\n## use\r\n\r\n### Component starter template\r\n\r\n1. Engineering installation\r\n```bash\r\nnpm create quarkc@latest\r\ncd project-name\r\n\r\nnpm install\r\nnpm start\r\n```\r\n\r\n2. Custom components\r\n```jsx\r\nimport { QuarkElement, property, customElement } from \"quarkc\"\r\nimport style from \"./index.less?inline\"\r\n\r\n@customElement({ tag: \"my-element\", style }) // custom tag/component, CSS\r\nexport default class MyElement extends QuarkElement {\r\n   @property() // external property\r\n   count\r\n\r\n   add = () =\u003e {\r\n     this.count += 1\r\n   }\r\n\r\n   render() {\r\n     return (\r\n       \u003cbutton onClick={this.add}\u003ecount is: { this.count }\u003c/button\u003e\r\n     )\r\n   }\r\n}\r\n```\r\n\r\n3. use\r\n\r\nAll kinds of tech stacks work.\r\n```html\r\n\u003cmy-element count=\"count\" /\u003e\r\n\r\n\u003c!-- vue --\u003e\r\n\u003cmy-element:count=\"count\" /\u003e\r\n\r\n\u003c!-- react --\u003e\r\n\u003cmy-element count={count} /\u003e\r\n\r\n\u003c!-- svelte --\u003e\r\n\u003cmy-element {count} /\u003e\r\n\r\n\u003c!-- angular --\u003e\r\n\u003cmy-element [count]=\"count\" /\u003e\r\n```\r\n\r\n### Component packaging\r\n\r\nPackage default output is UMD / ESM format\r\n\r\n```bash\r\nnpm run build\r\n```\r\n\r\nAt this point, the resources under the build product `lib/` can be used directly in the project. (Any front-end project can be used~)\r\n\r\n```jsx\r\nimport \"your-element\"\r\n\r\n\u003cmy-element\u003e\u003c/my-element\u003e\r\n```\r\n\r\n### Component publishing\r\n\r\nComponents can be published to npm, installed with:\r\n\r\n```bash\r\nnpm install your-element\r\n```\r\n\r\nCan be used as a CDN\r\n\r\n```html\r\n\u003cscript src=\"https://fastly.jsdelivr.net/npm/quarkc\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"https://fastly.jsdelivr.net/npm/your-element\"\u003e\u003c/script\u003e\r\n```\r\n\r\nAlso available as ES Module (recommended)\r\n```js\r\nimport \"your-element\"\r\n```\r\n\r\nFor more details about publishing, click [Publishing](https://quarkc.hellobike.com/#/zh-CN/docs/publishing)\r\n\r\n### Features\r\n\r\n* **Cross-Technology Stack**: Components can be used in any frame or frameless environment, making your code more reusable\r\n* **The component size is very small and the performance is extremely high**: Because Quarkc uses the browser's native API, your component can achieve optimal performance and small size\r\n* Web Components, Simple, Fast!\r\n* Browser native API, components can be used across technology stacks\r\n* There is no front-end framework Runtime, and the size of Web components is extremely small\r\n* **High performance** design, integration of Shadow DOM and Virtual DOM\r\n* Components are directly decoupled, polished independently, and referenced on demand\r\n\r\n### Performance reference\r\n\r\nScreenshot of a slightly complex component page running score:\r\n\r\n\u003cimg width=\"600\" alt=\"image\" src=\"https://github.com/hellof2e/quark-core/assets/14307551/8eda52c8-4ad7-4e92-ab09-602cf7771d96\"\u003e\r\n\r\n### Documentation\r\n\r\nFor full documentation, please visit [quarkc.hellobike.com](https://quarkc.hellobike.com)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhellof2e%2Fquark-core","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhellof2e%2Fquark-core","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhellof2e%2Fquark-core/lists"}