1.0.0 • Published 11 months ago
qilab-widgets-v2 v1.0.0
Start in Dev mode
cd qilab-widgets
npm run dev
Use your components on library's index.html to test it!
Start in Dev mode on Angular
Build library to test it on external projects
cd qilab-widgets
npm run build
Create new Angular project
ng new [PROJECT_NAME]
cd [PROJECT_NAME]
npm i lit
npm link qilab-widgets
npm run start
in AppModule (or any other Angular module you want import library)
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import "node_modules/qilab-widgets/dist/widgets"
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
Use components in html files
<div class="container">
<div class="row my-4">
<div class="col">
<widget-input-integer
[validationMsg]="validationMsg" #validation
[required]="true" label="Integer Input"
id="integer" name="integer" [value]="formValues.integer"
(valueChange)=" valueChange($event)">
</widget-input-integer>
</div>
</div>
</div>
Start in Dev mode on React
Build library to test it on external projects
cd qilab-widgets
npm run build
Create new React project
npx create-react-app [PROJECT_NAME] --template typescript
cd [PROJECT_NAME]
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
npm i @lit-labs/react
npm link qilab-widgets
npm run start
in App.tsx
import { createComponent } from '@lit-labs/react';
import * as Compo from '../node_modules/qilab-widgets/dist/widgets'
export const WidgetSwitchReact = createComponent({
tagName: 'widget-switch',
elementClass: Compo.WidgetSwitch,
react: React,
events: {
input: 'valueChange',
},
});
export const WidgetInputTextReact = createComponent({
tagName: 'widget-input-text',
elementClass: Compo.WidgetInputText,
react: React,
events: {
input: 'valueChange',
},
});
function App() {
return (
<>
<WidgetSwitchReact></WidgetSwitchReact>
<WidgetInputTextReact></WidgetInputTextReact>
</>
)
}
Start in Dev mode on Vanilla
Create Vanilla Project using parcel js
mkdir [PROJECT_NAME]
cd [PROJECT_NAME]
npm init
npm install --save-dev parcel
touch index.html
npm link qilab-widgets
parcel index.html
in index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--Import lib module with type=module -->
<script type="module" src="../node_modules/qilab-widgets/dist/widgets.js"></script>
</head>
<body>
<widget-switch></widget-switch>
<widget-input-text label="Test Label"></widget-input-text>
</body>
</html>
1.0.0
11 months ago