Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hellof2e/quark-core
Fast 4Kb size! Web Components with JSX. （Web Components 构建工具，4kb！）
https://github.com/hellof2e/quark-core
jsx quarkc webcomponents webcomponents-framework
Last synced: 6 days ago
JSON representation
Fast 4Kb size! Web Components with JSX. （Web Components 构建工具，4kb！）
- Host: GitHub
- URL: https://github.com/hellof2e/quark-core
- Owner: hellof2e
- License: mit
- Created: 2023-02-03T03:15:43.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-12T08:53:40.000Z (7 months ago)
- Last Synced: 2024-04-14T01:10:52.662Z (7 months ago)
- Topics: jsx, quarkc, webcomponents, webcomponents-framework
- Language: TypeScript
- Homepage: https://quark-ecosystem.github.io/quarkc-docs/#/
- Size: 1.35 MB
- Stars: 308
- Watchers: 4
- Forks: 27
- Open Issues: 6
-
Metadata Files:
- Readme: README.en-US.md
- License: LICENSE
Awesome Lists containing this project
README
Quarkc
Quarkc，跨技术栈/原生组件构建工具。
简体中文
| English
### outstanding case
| author | github address | screenshot / link
| ---- | ---- | ----- |
| @xsf0105 | https://xsf0105.github.io/piano/ | https://xsf0105.github.io/piano/ |
| @xsf0105 | https://github.com/xsf0105/dark-light-element | https://unpkg.com/dark-light-element@latest/demo.html |
| @yuhaiyang1 | https://github.com/yuhaiyang1/quarkc-time | https://unpkg.com/[email protected]/demo.html |
| @hellof2e | https://github.com/hellof2e/quark-doc-header |  https://quarkc.hellobike.com/#/ |
| @dyf19118 | https://github.com/dyf19118/quark-ui-rate |  |
| @hellof2e | https://github.com/hellof2e/quark-doc-home |  |
## introduce
Quarkc (Quark core abbreviation) is a web components framework with perfect development experience. With it, you can develop standard **cross-framework components**.
## Why Quarkc?
Background 1: [History of the front end]
The 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)
Background 2: [The future of the front end]
The 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).
The above background determines that the development and maintenance costs of **front-end general-purpose components** are relatively high.
## Quarkc target
Let web components implement technology stack independent!
## use
### Component starter template
1. Engineering installation
```bash
npm create quarkc@latest
cd project-name
npm install
npm start
```
2. Custom components
```jsx
import { QuarkElement, property, customElement } from "quarkc"
import style from "./index.less?inline"
@customElement({ tag: "my-element", style }) // custom tag/component, CSS
export default class MyElement extends QuarkElement {
@property() // external property
count
add = () => {
this.count += 1
}
render() {
return (
count is: { this.count }
)
}
}
```
3. use
All kinds of tech stacks work.
```html
```
### Component packaging
Package default output is UMD / ESM format
```bash
npm run build
```
At this point, the resources under the build product `lib/` can be used directly in the project. (Any front-end project can be used~)
```jsx
import "your-element"
```
### Component publishing
Components can be published to npm, installed with:
```bash
npm install your-element
```
Can be used as a CDN
```html
```
Also available as ES Module (recommended)
```js
import "your-element"
```
For more details about publishing, click [Publishing](https://quarkc.hellobike.com/#/zh-CN/docs/publishing)
### Features
* **Cross-Technology Stack**: Components can be used in any frame or frameless environment, making your code more reusable
* **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
* Web Components, Simple, Fast!
* Browser native API, components can be used across technology stacks
* There is no front-end framework Runtime, and the size of Web components is extremely small
* **High performance** design, integration of Shadow DOM and Virtual DOM
* Components are directly decoupled, polished independently, and referenced on demand
### Performance reference
Screenshot of a slightly complex component page running score:
### Documentation
For full documentation, please visit [quarkc.hellobike.com](https://quarkc.hellobike.com)