glue

Glue

Probably the first such complete mobile web components library in China

introduce

Glue is a component library built on web components. It can truly run a component library multi-framework in any front-end framework such as react, vue2, vue3, angular and html.

characteristic

• Provides more than 60 high-quality components, covering various mobile scenarios
• Excellent performance
• Unit test coverage rate 90%+, providing stability guarantee
• Complete Chinese and English documents and examples
• Supports all platforms
• Support on-demand introduction
• Supports theme customization
• Support TypeScript

Install

npm i glue-components -S

Get started quickly

Use in vue, refer to the guide to use in vue in stencil

 import Vue from 'vue' ;
import App from './App.vue' ;
import "glue-components/dist/glue-components/glue-components.css" ;
import { applyPolyfills , defineCustomElements } from 'glue-components/loader' ;

Vue . config . productionTip = false ;

// Tell Vue to ignore all components defined in the glue-components
// package. The regex assumes all components names are prefixed
// 'test'
Vue . config . ignoredElements = [ / test-w* / ] ;

// Bind the custom elements to the window object
applyPolyfills ( ) . then ( ( ) => {
  defineCustomElements ( ) ;
} ) ;

new Vue ( {
  render : h => h ( App )
} ) . $mount ( '#app' ) ; 

 render ( ) {
  return (
    < div >
      < glue-button > </ glue-button >
    </ div >
  )
}

React usage guide for using stencil

 import React from 'react' ;
import ReactDOM from 'react-dom' ;
import './index.css' ;
import App from './App' ;
import "glue-components/dist/glue-components/glue-components.css" ;
import registerServiceWorker from './registerServiceWorker' ;

// test-component is the name of our made up web components that we have
// published to npm:
import { applyPolyfills , defineCustomElements } from 'glue-components/loader' ;

ReactDOM . render ( < App /> , document . getElementById ( 'root' ) ) ;
registerServiceWorker ( ) ;

applyPolyfills ( ) . then ( ( ) => {
  defineCustomElements ( ) ;
} ) ; 

 render ( ) {
  return (
    < div >
      < glue-button > </ glue-button >
    </ div >
  )
}

Use in Angular, refer to the Angular Guide for Stencil

 import { enableProdMode } from '@angular/core' ;
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic' ;

import { AppModule } from './app/app.module' ;
import { environment } from './environments/environment' ;

// Note: loader import location set using "esmLoaderPath" within the output target config
import { defineCustomElements } from 'glue-components/loader' ;

if ( environment . production ) {
  enableProdMode ( ) ;
}

platformBrowserDynamic ( ) . bootstrapModule ( AppModule )
  . catch ( err => console . log ( err ) ) ;
defineCustomElements ( ) ; 

 import { Component , ElementRef , ViewChild } from '@angular/core' ;

import 'glue-components' ;

@ Component ( {
    selector : 'app-home' ,
    template : `<glue-button #test></glue-button>` ,
    styleUrls : [ './home.component.scss' ] ,
} )
export class HomeComponent {

    @ ViewChild ( 'test' ) myGlueButtonComponent : ElementRef < HTMLTestComponentElement > ;

    async onAction ( ) {
        await this . myGlueButtonComponent . nativeElement . testComponentMethod ( ) ;
    }
}

Use in Ember, refer to the Ember Guide for Stencil

ember install ember-cli-stencil

Glue also supports on-demand introduction, CDN introduction, etc. For detailed instructions, please see Get started quickly.

Contribution code

Please read our development guide to modify the code.

You can ask us any problems during use. Of course, you are also very welcome to send us a PR.

Browser support

Modern browsers and Android 4.0+, iOS 8.0+, chrome 60+, Safari 10.1+, Firefox 63+, Edge 79+

Link

• Detailed documentation
• Update log

Mobile preview

You can scan the QR code on your mobile phone to access the mobile demo: Subsequent support

WeChat discussion group

Everyone is welcome to join the Glue communication group to discuss. Add WeChat below and indicate "Join the Glue communication group"

Open Source Protocol

This project is based on the MIT protocol, please enjoy and participate in open source freely.