From b8fb81b4fb6ac1449656ca87e688ed152103853e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20L=C3=B3pez?= <35823445+alejandro25262@users.noreply.github.com> Date: Tue, 9 Jul 2024 17:24:56 -0600 Subject: [PATCH] S27/widget version (#5) * feat: set widgetVersion in react component #86dty6jh3 * feat: set widgetVersion in vue component #86dty6jh3 * feat: set widgetVersion in angular component #86dty6jh3 * feat: set widgetVersion in stencil component #86dty6jh3 * refactor: code improvements #86dty6jh3 * docs: update readme's #86dty6jh3 * feat: add npmignore in stencil package #86dty6jh3 * feat: remove source map in all packages #86dty6jh3 * docs: update main readme #86dtw66gd * refactor: rename "widget-stencil" to "widget" #86dty6jh3 * refactor: rename props of widget #86dty6jh3 * fix: fix some details in wrappers of widget #86dty6jh3 --- README.md | 24 +++++++ package.json | 2 +- packages/widget-angular/.gitignore | 2 + packages/widget-angular/README.md | 36 ++++++---- packages/widget-angular/angular.json | 4 +- packages/widget-angular/ng-package.json | 2 +- packages/widget-angular/package.json | 4 +- .../src/lib/stencil-generated/components.ts | 16 +++-- .../widget-angular/src/lib/widget-mifiel.ts | 44 ++++++++++++ .../src/lib/widget.angular.module.ts | 12 ++-- packages/widget-angular/src/public-api.ts | 2 +- packages/widget-angular/src/utils/version.js | 17 +++++ packages/widget-angular/tsconfig.json | 12 ++-- packages/widget-angular/tsconfig.lib.json | 12 ---- .../widget-angular/tsconfig.lib.prod.json | 10 --- packages/widget-angular/tsconfig.spec.json | 9 --- packages/widget-react/.gitignore | 1 + packages/widget-react/README.md | 61 ++++++++++------ .../lib/components/stencil-generated/index.ts | 2 +- packages/widget-react/lib/index.ts | 2 - packages/widget-react/lib/index.tsx | 16 +++++ packages/widget-react/package.json | 4 +- packages/widget-react/tsconfig.json | 5 +- packages/widget-react/utils/version.js | 17 +++++ packages/widget-stencil/.eslintrc.js | 3 + packages/widget-stencil/.gitignore | 3 + packages/widget-stencil/.npmignore | 1 + packages/widget-stencil/CHANGELOG.md | 16 ----- packages/widget-stencil/README.md | 72 +++++++++++++------ packages/widget-stencil/package.json | 10 +-- packages/widget-stencil/src/components.d.ts | 72 +++++++++++-------- .../src/components/mifiel-widget/index.tsx | 66 ++++++++++------- packages/widget-stencil/src/index.html | 4 +- packages/widget-stencil/src/utils/version.js | 17 +++++ packages/widget-stencil/stencil.config.ts | 8 +-- packages/widget-stencil/tsconfig.json | 5 +- packages/widget-vue/.gitignore | 1 + packages/widget-vue/README.md | 33 +++++---- packages/widget-vue/lib/components.ts | 19 ++--- packages/widget-vue/lib/index.ts | 2 +- packages/widget-vue/lib/mifiel-widget.ts | 21 ++++++ packages/widget-vue/lib/plugin.ts | 4 +- packages/widget-vue/package.json | 4 +- packages/widget-vue/tsconfig.json | 8 ++- packages/widget-vue/utils/version.js | 17 +++++ 45 files changed, 471 insertions(+), 231 deletions(-) create mode 100644 packages/widget-angular/src/lib/widget-mifiel.ts create mode 100644 packages/widget-angular/src/utils/version.js delete mode 100644 packages/widget-angular/tsconfig.lib.json delete mode 100644 packages/widget-angular/tsconfig.lib.prod.json delete mode 100644 packages/widget-angular/tsconfig.spec.json create mode 100644 packages/widget-react/.gitignore delete mode 100644 packages/widget-react/lib/index.ts create mode 100644 packages/widget-react/lib/index.tsx create mode 100644 packages/widget-react/utils/version.js create mode 100644 packages/widget-stencil/.eslintrc.js create mode 100644 packages/widget-stencil/.npmignore delete mode 100644 packages/widget-stencil/CHANGELOG.md create mode 100644 packages/widget-stencil/src/utils/version.js create mode 100644 packages/widget-vue/.gitignore create mode 100644 packages/widget-vue/lib/mifiel-widget.ts create mode 100644 packages/widget-vue/utils/version.js diff --git a/README.md b/README.md index f02d7c9..0f11f92 100644 --- a/README.md +++ b/README.md @@ -19,3 +19,27 @@ Library to authenticate Mifiel API calls. [![npm](https://img.shields.io/npm/v/@mifiel/api-client.svg?style=flat-square)](https://www.npmjs.com/package/@mifiel/api-client) Mifiel API Client for NodeJS. + +## [`@mifiel/widget`](https://github.com/Mifiel/mifiel-js/tree/main/packages/widget-stencil) + +[![npm](https://img.shields.io/npm/v/@mifiel/widget.svg?style=flat-square)](https://www.npmjs.com/package/@mifiel/widget) + +Web component for Mifiel Widget implemented with StencilJS. + +## [`@mifiel/widget-react`](https://github.com/Mifiel/mifiel-js/tree/main/packages/widget-react) + +[![npm](https://img.shields.io/npm/v/@mifiel/widget-react.svg?style=flat-square)](https://www.npmjs.com/package/@mifiel/widget-react) + +React component wrapper for Mifiel Widget implemented with StencilJS. + +## [`@mifiel/widget-vue`](https://github.com/Mifiel/mifiel-js/tree/main/packages/widget-vue) + +[![npm](https://img.shields.io/npm/v/@mifiel/widget-vue.svg?style=flat-square)](https://www.npmjs.com/package/@mifiel/widget-vue) + +Vue component wrapper for Mifiel Widget implemented with StencilJS. + +## [`@mifiel/widget-angular`](https://github.com/Mifiel/mifiel-js/tree/main/packages/widget-angular) + +[![npm](https://img.shields.io/npm/v/@mifiel/widget-angular.svg?style=flat-square)](https://www.npmjs.com/package/@mifiel/widget-angular) + +Angular component wrapper for Mifiel Widget implemented with StencilJS. diff --git a/package.json b/package.json index f02246e..6aed001 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ ], "scripts": { "build": "lerna run build --scope=@mifiel/{api-client,api-client-auth} && yarn build:widget", - "build:widget": "lerna run build --scope=@mifiel/widget-stencil && lerna run build --scope=@mifiel/{widget-react,widget-vue,widget-angular}", + "build:widget": "lerna run build --scope=@mifiel/widget && lerna run build --scope=@mifiel/{widget-react,widget-vue,widget-angular}", "husky": "husky", "lint": "lerna run lint", "postpublish": "pinst --enable", diff --git a/packages/widget-angular/.gitignore b/packages/widget-angular/.gitignore index 0711527..a839402 100644 --- a/packages/widget-angular/.gitignore +++ b/packages/widget-angular/.gitignore @@ -40,3 +40,5 @@ testem.log # System files .DS_Store Thumbs.db + +config.json diff --git a/packages/widget-angular/README.md b/packages/widget-angular/README.md index 8b6c54c..f9b3a59 100644 --- a/packages/widget-angular/README.md +++ b/packages/widget-angular/README.md @@ -14,7 +14,7 @@ npm install @mifiel/widget-angular Import the MifielWidgetModule in your Angular module and use the mifiel-widget component in your Angular application: -## Importing the Module +## Importing the Module in app.module.ts ```typescript import { NgModule } from '@angular/core'; @@ -51,11 +51,11 @@ import { Component } from '@angular/core'; @@ -66,8 +66,8 @@ export class AppComponent { widgetId = 'your-widget-id'; environment = 'production'; successBtnText = 'Proceed to next step'; - callToActionSuccess = 'https://example.com/next-step'; - callToActionError = 'https://example.com/error-page'; + successBtnAction = 'https://example.com/next-step'; + errorBtnAction = 'https://example.com/error-page'; containerClass = 'widget-container'; onSuccessHandler() { @@ -85,17 +85,25 @@ export class AppComponent { ## Props -- **`id`**: (string, required) The ID of the widget. -- **`environment`**: (string, optional) The environment to use for the widget (`production` by default). -- **`onSuccess`**: (function, optional) Function to be called when the document is signed successfully. -- **`onError`**: (function, optional) Listener for errors that occur during the signing flow. -- **`successBtnText`**: (string, optional) Text for the success button (`Proceed to next step` by default). -- **`callToActionSuccess`**: (string | function, optional) Main button action in the success view. -- **`callToActionError`**: (string | function, optional) Main button action in the error view. +- **`id`**: (string, required) The widget ID +- **`environment`**: (string, optional) The environment where the widget will be used: sandbox or production. By default, production. +- **`onSignSuccess`**: (function, optional) Function will be called when the document is signed successfully +- **`onSignError`**: (function, optional) Function that will be called whenever an error occurs during the signing flow. +- **`successBtnText`**: (string, optional) Text that will display in the main button in the success page. By default, Proceed to next step +- **`successBtnAction`**: (string | function, optional) Function to be executed when the main button is clicked in the success page. It can also be a string containing a URL to redirect to. +- **`errorBtnAction`**: (string | function, optional) Function to be executed when the main button is clicked in the error page. It can also be a string containing a URL to redirect to. - **`containerClass`**: (string, optional) CSS class to be applied to the widget container. +## Listeners + +In addition to using the `onSignSuccess` and `onSignError` props, listeners for `signSuccess` and `signError` events can also be added to achieve the same outcome. This approach is recommended for handling successful document signing and errors during the signing process. + # Important Information ## ESM Compatibility This wrapper is built using ECMAScript Modules (ESM) and therefore only works in environments that support ESM. If you're using a build tool like Webpack or Rollup, they typically support ESM out of the box. + +## tsconfig.json configuration + +To prevent errors within the `node_modules` directory, set the `skipLibCheck` option to `true` in your TypeScript configuration file (`tsconfig.json`). This will skip type checking for all declaration files (`.d.ts`), improving the build time and reducing unnecessary errors from third-party libraries. diff --git a/packages/widget-angular/angular.json b/packages/widget-angular/angular.json index d0e17db..d46f38f 100644 --- a/packages/widget-angular/angular.json +++ b/packages/widget-angular/angular.json @@ -16,10 +16,10 @@ }, "configurations": { "production": { - "tsConfig": "tsconfig.lib.prod.json" + "tsConfig": "tsconfig.json" }, "development": { - "tsConfig": "tsconfig.lib.json" + "tsConfig": "tsconfig.json" } }, "defaultConfiguration": "production" diff --git a/packages/widget-angular/ng-package.json b/packages/widget-angular/ng-package.json index 9219d3e..3eb4d9a 100644 --- a/packages/widget-angular/ng-package.json +++ b/packages/widget-angular/ng-package.json @@ -14,6 +14,6 @@ "@angular/router", "rxjs", "zone.js", - "@mifiel/widget-stencil" + "@mifiel/widget" ] } diff --git a/packages/widget-angular/package.json b/packages/widget-angular/package.json index 01ad17b..f174037 100644 --- a/packages/widget-angular/package.json +++ b/packages/widget-angular/package.json @@ -19,7 +19,7 @@ }, "scripts": { "prebuild": "rimraf dist", - "build": "ng build", + "build": "node ./src/utils/version.js && ng build", "ng": "ng" }, "exports": { @@ -43,7 +43,7 @@ "@angular/platform-browser": "^16.2.0", "@angular/platform-browser-dynamic": "^16.2.0", "@angular/router": "^16.2.0", - "@mifiel/widget-stencil": "^0.0.1", + "@mifiel/widget": "^0.0.1", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.13.0" diff --git a/packages/widget-angular/src/lib/stencil-generated/components.ts b/packages/widget-angular/src/lib/stencil-generated/components.ts index b0b4353..58272a0 100644 --- a/packages/widget-angular/src/lib/stencil-generated/components.ts +++ b/packages/widget-angular/src/lib/stencil-generated/components.ts @@ -4,11 +4,11 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Even import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils'; -import { Components } from '@mifiel/widget-stencil'; +import { Components } from '@mifiel/widget'; @ProxyCmp({ - inputs: ['callToActionError', 'callToActionSuccess', 'containerClass', 'environment', 'id', 'onError', 'onSuccess', 'successBtnText'], + inputs: ['containerClass', 'environment', 'errorBtnAction', 'id', 'onSignError', 'onSignSuccess', 'successBtnAction', 'successBtnText', 'widgetVersion'], methods: ['getIframe'] }) @Component({ @@ -16,23 +16,27 @@ import { Components } from '@mifiel/widget-stencil'; changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['callToActionError', 'callToActionSuccess', 'containerClass', 'environment', 'id', 'onError', 'onSuccess', 'successBtnText'], + inputs: ['containerClass', 'environment', 'errorBtnAction', 'id', 'onSignError', 'onSignSuccess', 'successBtnAction', 'successBtnText', 'widgetVersion'], }) export class MifielWidget { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; - proxyOutputs(this, this.el, ['error', 'success']); + proxyOutputs(this, this.el, ['signError', 'sign-error', 'signSuccess', 'sign-success']); } } export declare interface MifielWidget extends Components.MifielWidget { - error: EventEmitter>; + signError: EventEmitter>; - success: EventEmitter>; + 'sign-error': EventEmitter>; + + signSuccess: EventEmitter>; + + 'sign-success': EventEmitter>; } diff --git a/packages/widget-angular/src/lib/widget-mifiel.ts b/packages/widget-angular/src/lib/widget-mifiel.ts new file mode 100644 index 0000000..8517435 --- /dev/null +++ b/packages/widget-angular/src/lib/widget-mifiel.ts @@ -0,0 +1,44 @@ +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ElementRef, + EventEmitter, + // eslint-disable-next-line @typescript-eslint/no-unused-vars + Input, + NgZone, + OnInit, +} from '@angular/core'; +import { Components } from '@mifiel/widget'; +import dataWidget from './config.json'; + +import { MifielWidget as Mifiel } from './stencil-generated/components'; + +@Component({ + selector: 'mifiel-widget', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', +}) +export class MifielWidget extends Mifiel implements OnInit { + protected override el!: HTMLElement; + + @Input() override widgetVersion?: string; + + constructor( + c: ChangeDetectorRef, + r: ElementRef, + protected override z: NgZone + ) { + super(c, r, z); + } + + ngOnInit() { + this.widgetVersion = `${dataWidget.appName}@${dataWidget.appVersion}`; + } +} + +export declare interface MifielWidget extends Components.MifielWidget { + error: EventEmitter>; + + success: EventEmitter>; +} diff --git a/packages/widget-angular/src/lib/widget.angular.module.ts b/packages/widget-angular/src/lib/widget.angular.module.ts index 88c7069..bf22c58 100644 --- a/packages/widget-angular/src/lib/widget.angular.module.ts +++ b/packages/widget-angular/src/lib/widget.angular.module.ts @@ -1,6 +1,8 @@ -import {APP_INITIALIZER, NgModule } from '@angular/core'; -import { DIRECTIVES } from './stencil-generated'; -import { defineCustomElements } from '@mifiel/widget-stencil/dist/loader'; +import { APP_INITIALIZER, NgModule } from '@angular/core'; +import { defineCustomElements } from '@mifiel/widget/dist/loader'; +import { MifielWidget } from './widget-mifiel'; + +const DIRECTIVES = [MifielWidget]; @NgModule({ declarations: [...DIRECTIVES], @@ -9,8 +11,8 @@ import { defineCustomElements } from '@mifiel/widget-stencil/dist/loader'; { provide: APP_INITIALIZER, useFactory: () => defineCustomElements, - multi: true + multi: true, }, - ] + ], }) export class MifielWidgetModule {} diff --git a/packages/widget-angular/src/public-api.ts b/packages/widget-angular/src/public-api.ts index 923a53b..a94db33 100644 --- a/packages/widget-angular/src/public-api.ts +++ b/packages/widget-angular/src/public-api.ts @@ -3,5 +3,5 @@ */ export * from './lib/widget.angular.module'; +export * from './lib/widget-mifiel'; export { DIRECTIVES } from './lib/stencil-generated'; -export * from './lib/stencil-generated/components'; diff --git a/packages/widget-angular/src/utils/version.js b/packages/widget-angular/src/utils/version.js new file mode 100644 index 0000000..58f9881 --- /dev/null +++ b/packages/widget-angular/src/utils/version.js @@ -0,0 +1,17 @@ +const fs = require('fs'); +const path = require('path'); + +const packageJsonPath = path.resolve(__dirname, '../../package.json'); +const packageJsonContent = fs.readFileSync(packageJsonPath, 'utf8'); +const packageJson = JSON.parse(packageJsonContent); + +const { name, version } = packageJson; + +const configObject = { + appName: name, + appVersion: version, +}; + +const configFilePath = path.resolve(__dirname, '../lib/config.json'); + +fs.writeFileSync(configFilePath, JSON.stringify(configObject, null, 2), 'utf8'); diff --git a/packages/widget-angular/tsconfig.json b/packages/widget-angular/tsconfig.json index 4fd83a4..51e355d 100644 --- a/packages/widget-angular/tsconfig.json +++ b/packages/widget-angular/tsconfig.json @@ -10,20 +10,22 @@ "noPropertyAccessFromIndexSignature": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, - "sourceMap": true, + "sourceMap": false, "declaration": false, "downlevelIteration": true, "experimentalDecorators": true, "moduleResolution": "node", "importHelpers": true, - "target": "ES2022", - "module": "ES2022", + "target": "esnext", + "module": "esnext", "useDefineForClassFields": false, - "lib": ["ES2022", "dom"], + "lib": ["ES2021", "dom"], "paths": { "widget-angular": ["dist/widget-angular"] }, - "skipLibCheck": true + "skipLibCheck": true, + "resolveJsonModule": true, + "allowSyntheticDefaultImports": true }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, diff --git a/packages/widget-angular/tsconfig.lib.json b/packages/widget-angular/tsconfig.lib.json deleted file mode 100644 index e742e1f..0000000 --- a/packages/widget-angular/tsconfig.lib.json +++ /dev/null @@ -1,12 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "./out-tsc/lib", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["**/*.spec.ts"] -} diff --git a/packages/widget-angular/tsconfig.lib.prod.json b/packages/widget-angular/tsconfig.lib.prod.json deleted file mode 100644 index 06de549..0000000 --- a/packages/widget-angular/tsconfig.lib.prod.json +++ /dev/null @@ -1,10 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } -} diff --git a/packages/widget-angular/tsconfig.spec.json b/packages/widget-angular/tsconfig.spec.json deleted file mode 100644 index 1567c04..0000000 --- a/packages/widget-angular/tsconfig.spec.json +++ /dev/null @@ -1,9 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "./out-tsc/spec", - "types": ["jasmine"] - }, - "include": ["**/*.spec.ts", "**/*.d.ts"] -} diff --git a/packages/widget-react/.gitignore b/packages/widget-react/.gitignore new file mode 100644 index 0000000..d344ba6 --- /dev/null +++ b/packages/widget-react/.gitignore @@ -0,0 +1 @@ +config.json diff --git a/packages/widget-react/README.md b/packages/widget-react/README.md index 7fa010a..af83710 100644 --- a/packages/widget-react/README.md +++ b/packages/widget-react/README.md @@ -15,13 +15,11 @@ npm install @mifiel/widget-react Import the MifielWidget component and use it in your React application: ```jsx -import React, {useEffect} from 'react'; +import { useEffect, useRef } from 'react'; import { MifielWidget, defineCustomElements } from '@mifiel/widget-react'; -function App() { - useEffect(() => { - defineCustomElements(window) - },[]); +const YourComponent = () => { + const widgetRef = useRef(null); const onSuccessHandler = () => { console.log('Document signed successfully'); @@ -33,37 +31,60 @@ function App() { // Your custom error handling logic here }; + // This should only be done once throughout your entire project + useEffect(() => { + defineCustomElements(window) + },[]); + + + useEffect(() => { + const widgetElement = widgetRef?.current; + + if (widgetElement) { + widgetElement.addEventListener('signSuccess', onSuccessHandler); + widgetElement.addEventListener('signError', onErrorHandler); + } + + return () => { + if (widgetElement) { + widgetElement.removeEventListener('signSuccess', onSuccessHandler); + widgetElement.removeEventListener('signError', onErrorHandler); + } + }; + }, [widgetRef]); + return ( -
-

Sign Document

+
); -} +}; + +export default YourComponent; -export default App; ``` ## Props -- **`id`**: (string, required) The ID of the widget. -- **`environment`**: (string, optional) The environment to use for the widget (`production` by default). -- **`onSuccess`**: (function, optional) Function to be called when the document is signed successfully. -- **`onError`**: (function, optional) Listener for errors that occur during the signing flow. -- **`successBtnText`**: (string, optional) Text for the success button (`Proceed to next step` by default). -- **`callToActionSuccess`**: (string | function, optional) Main button action in the success view. -- **`callToActionError`**: (string | function, optional) Main button action in the error view. +- **`id`**: (string, required) The widget ID +- **`environment`**: (string, optional) The environment where the widget will be used: sandbox or production. By default, production. +- **`onSignSuccess`**: (function, optional) Function will be called when the document is signed successfully +- **`onSignError`**: (function, optional) Function that will be called whenever an error occurs during the signing flow. +- **`successBtnText`**: (string, optional) Text that will display in the main button in the success page. By default, Proceed to next step +- **`successBtnAction`**: (string | function, optional) Function to be executed when the main button is clicked in the success page. It can also be a string containing a URL to redirect to. +- **`errorBtnAction`**: (string | function, optional) Function to be executed when the main button is clicked in the error page. It can also be a string containing a URL to redirect to. - **`containerClass`**: (string, optional) CSS class to be applied to the widget container. +## Listeners + +In addition to using the `onSignSuccess` and `onSignError` props, listeners for `signSuccess` and `signError` events can also be added to achieve the same outcome. This approach is recommended for handling successful document signing and errors during the signing process. # Important Information diff --git a/packages/widget-react/lib/components/stencil-generated/index.ts b/packages/widget-react/lib/components/stencil-generated/index.ts index e3a43da..170c911 100644 --- a/packages/widget-react/lib/components/stencil-generated/index.ts +++ b/packages/widget-react/lib/components/stencil-generated/index.ts @@ -3,7 +3,7 @@ /* auto-generated react proxies */ import { createReactComponent } from './react-component-lib'; -import type { JSX } from '@mifiel/widget-stencil'; +import type { JSX } from '@mifiel/widget'; diff --git a/packages/widget-react/lib/index.ts b/packages/widget-react/lib/index.ts deleted file mode 100644 index 5dca24f..0000000 --- a/packages/widget-react/lib/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './components/stencil-generated'; -export { defineCustomElements } from '@mifiel/widget-stencil/dist/loader'; diff --git a/packages/widget-react/lib/index.tsx b/packages/widget-react/lib/index.tsx new file mode 100644 index 0000000..9f688d7 --- /dev/null +++ b/packages/widget-react/lib/index.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { MifielWidget as Widget } from './components/stencil-generated'; +import dataWidget from './config.json'; + +export { defineCustomElements } from '@mifiel/widget/dist/loader'; + +export const MifielWidget = (props) => { + const widgetVersion = `${dataWidget.appName}@${dataWidget.appVersion}`; + + const newProps = { + ...props, + widgetVersion, + }; + + return ; +}; diff --git a/packages/widget-react/package.json b/packages/widget-react/package.json index 287ad16..6a4b2eb 100644 --- a/packages/widget-react/package.json +++ b/packages/widget-react/package.json @@ -20,12 +20,12 @@ }, "scripts": { "prebuild": "rimraf dist", - "build": "npm run tsc", + "build": "node utils/version.js && npm run tsc", "tsc": "tsc -p . --outDir ./dist" }, "types": "dist/types/index.d.ts", "dependencies": { - "@mifiel/widget-stencil": "^0.0.1" + "@mifiel/widget": "^0.0.1" }, "devDependencies": { "@types/react": "^18.3.3", diff --git a/packages/widget-react/tsconfig.json b/packages/widget-react/tsconfig.json index 54ee597..58d94b8 100644 --- a/packages/widget-react/tsconfig.json +++ b/packages/widget-react/tsconfig.json @@ -1,13 +1,14 @@ { "compilerOptions": { "module": "es2015", + "resolveJsonModule": true, "declaration": true, "noImplicitAny": false, "removeComments": true, "noLib": false, "emitDecoratorMetadata": true, "experimentalDecorators": true, - "sourceMap": true, + "sourceMap": false, "outDir": "./dist", "lib": ["dom", "es2015"], "moduleResolution": "node", @@ -17,6 +18,6 @@ "allowSyntheticDefaultImports": true, "declarationDir": "./dist/types" }, - "include": ["lib"], + "include": ["lib", "utils/version.js"], "exclude": ["node_modules"] } diff --git a/packages/widget-react/utils/version.js b/packages/widget-react/utils/version.js new file mode 100644 index 0000000..10b4fa3 --- /dev/null +++ b/packages/widget-react/utils/version.js @@ -0,0 +1,17 @@ +const fs = require('fs'); +const path = require('path'); + +const packageJsonPath = path.resolve(__dirname, '../package.json'); +const packageJsonContent = fs.readFileSync(packageJsonPath, 'utf8'); +const packageJson = JSON.parse(packageJsonContent); + +const { name, version } = packageJson; + +const configObject = { + appName: name, + appVersion: version, +}; + +const configFilePath = path.resolve(__dirname, '../lib/config.json'); + +fs.writeFileSync(configFilePath, JSON.stringify(configObject, null, 2), 'utf8'); diff --git a/packages/widget-stencil/.eslintrc.js b/packages/widget-stencil/.eslintrc.js new file mode 100644 index 0000000..40d7690 --- /dev/null +++ b/packages/widget-stencil/.eslintrc.js @@ -0,0 +1,3 @@ +module.exports = { + extends: '../widget-react/.eslintrc.js', +}; diff --git a/packages/widget-stencil/.gitignore b/packages/widget-stencil/.gitignore index c3ea58a..9669763 100644 --- a/packages/widget-stencil/.gitignore +++ b/packages/widget-stencil/.gitignore @@ -24,3 +24,6 @@ $RECYCLE.BIN/ Thumbs.db UserInterfaceState.xcuserstate .env + + +config.json diff --git a/packages/widget-stencil/.npmignore b/packages/widget-stencil/.npmignore new file mode 100644 index 0000000..782e6d1 --- /dev/null +++ b/packages/widget-stencil/.npmignore @@ -0,0 +1 @@ +stencil.config.js diff --git a/packages/widget-stencil/CHANGELOG.md b/packages/widget-stencil/CHANGELOG.md deleted file mode 100644 index e55881b..0000000 --- a/packages/widget-stencil/CHANGELOG.md +++ /dev/null @@ -1,16 +0,0 @@ -# Change Log - -All notable changes to this project will be documented in this file. -See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. - -## [0.0.1](https://github.com/Mifiel/mifiel-js/compare/@mifiel/widget-stencil@1.0.1...@mifiel/widget-stencil@0.0.1) (2024-06-27) - -**Note:** Version bump only for package @mifiel/widget-stencil - - - - - -## 1.0.1 (2024-06-26) - -**Note:** Version bump only for package @mifiel/widget-stencil diff --git a/packages/widget-stencil/README.md b/packages/widget-stencil/README.md index 8226ddb..99dfee4 100644 --- a/packages/widget-stencil/README.md +++ b/packages/widget-stencil/README.md @@ -7,12 +7,28 @@ Web component for Mifiel Widget implemented with StencilJS. Install the package using npm: ```bash -npm install @mifiel/widget-stencil +npm install @mifiel/widget ``` ## Usage -Use mifiel-widget component in your web application +### Using the `mifiel-widget` Component + +To integrate the `mifiel-widget` component into your web application, follow these steps: + +1. **Using Node Modules:** + Compile the code and import our library using: + ```javascript + import { defineCustomElements } from '@mifiel/widget/loader'; + ``` + +2. **Using CDN:** + Alternatively, you can include the component via CDN: + ```javascript + + ``` + This method allows you to directly use the component without compilation steps. + ```html @@ -21,10 +37,13 @@ Use mifiel-widget component in your web application Mifiel Widget Example - + + + +

Sign Document

@@ -32,8 +51,8 @@ Use mifiel-widget component in your web application id="your-widget-id" environment="production" success-btn-text="Proceed to next step" - call-to-action-success="https://example.com/next-step" - call-to-action-error="https://example.com/error-page" + success-btn-action="https://example.com/next-step" + error-btn-action="https://example.com/error-page" container-class="widget-container" > @@ -50,8 +69,8 @@ Use mifiel-widget component in your web application document.addEventListener('DOMContentLoaded', () => { const widget = document.querySelector('mifiel-widget'); - widget.addEventListener('success', onSuccessHandler); - widget.addEventListener('error', onErrorHandler); + widget.addEventListener('signSuccess', onSuccessHandler); + widget.addEventListener('signError', onErrorHandler); }); @@ -61,9 +80,12 @@ Use mifiel-widget component in your web application ## Using with JavaScript ```javascript -import { defineCustomElements } from '@mifiel/widget-stencil/loader'; +// Only use this if you are using node_modules. +// Start +import { defineCustomElements } from '@mifiel/widget/loader'; defineCustomElements(window); +// End function onSuccessHandler() { console.log('Document signed successfully'); @@ -80,12 +102,12 @@ document.addEventListener('DOMContentLoaded', () => { widget.setAttribute('id', 'your-widget-id'); widget.setAttribute('environment', 'production'); widget.setAttribute('success-btn-text', 'Proceed to next step'); - widget.setAttribute('call-to-action-success', 'https://example.com/next-step'); - widget.setAttribute('call-to-action-error', 'https://example.com/error-page'); + widget.setAttribute('success-btn-action', 'https://example.com/next-step'); + widget.setAttribute('error-btn-action', 'https://example.com/error-page'); widget.setAttribute('container-class', 'widget-container'); - widget.addEventListener('success', onSuccessHandler); - widget.addEventListener('error', onErrorHandler); + widget.addEventListener('signSuccess', onSuccessHandler); + widget.addEventListener('signError', onErrorHandler); document.body.appendChild(widget); }); @@ -94,11 +116,15 @@ document.addEventListener('DOMContentLoaded', () => { ## Props -- **`id`**: (string, required) The ID of the widget. -- **`environment`**: (string, optional) The environment to use for the widget (`production` by default). -- **`onSuccess`**: (function, optional) Function to be called when the document is signed successfully. -- **`onError`**: (function, optional) Listener for errors that occur during the signing flow. -- **`successBtnText`**: (string, optional) Text for the success button (`Proceed to next step` by default). -- **`callToActionSuccess`**: (string | function, optional) Main button action in the success view. -- **`callToActionError`**: (string | function, optional) Main button action in the error view. -- **`containerClass`**: (string, optional) CSS class to be applied to the widget container. +- **`id`**: (string, required) The widget ID +- **`environment`**: (string, optional) The environment where the widget will be used: sandbox or production. By default, production. +- **`on-sign-success`**: (function, optional) Function will be called when the document is signed successfully +- **`on-sign-error`**: (function, optional) Function that will be called whenever an error occurs during the signing flow. +- **`success-btn-text`**: (string, optional) Text that will display in the main button in the success page. By default, Proceed to next step +- **`success-btn-action`**: (string | function, optional) Function to be executed when the main button is clicked in the success page. It can also be a string containing a URL to redirect to. +- **`error-btn-action`**: (string | function, optional) Function to be executed when the main button is clicked in the error page. It can also be a string containing a URL to redirect to. +- **`container-class`**: (string, optional) CSS class to be applied to the widget container. + +## Listeners + +In addition to using the `on-sign-success` and `on-sign-error` props, listeners for `signSuccess` and `signError` events can also be added to achieve the same outcome. This approach is recommended for handling successful document signing and errors during the signing process. diff --git a/packages/widget-stencil/package.json b/packages/widget-stencil/package.json index d6d62a7..3996d31 100644 --- a/packages/widget-stencil/package.json +++ b/packages/widget-stencil/package.json @@ -1,5 +1,5 @@ { - "name": "@mifiel/widget-stencil", + "name": "@mifiel/widget", "version": "0.0.1", "description": "Mifiel Widget component built with StencilJS for easy integration into web applications.", "license": "MIT", @@ -20,15 +20,15 @@ }, "scripts": { "prebuild": "rimraf dist", - "build": "stencil build", + "build": "node src/utils/version.js && stencil build", "start": "stencil build --dev --watch --serve" }, "collection": "dist/collection/collection-manifest.json", "collection:main": "dist/collection/index.js", "exports": { ".": { - "import": "./dist/esm/widget-stencil.js", - "require": "./dist/cjs/widget-stencil.cjs.js", + "import": "./dist/esm/widget.js", + "require": "./dist/cjs/widget.cjs.js", "types": "./dist/types/index.d.ts" }, "./dist/loader": { @@ -38,7 +38,7 @@ } }, "types": "dist/types/index.d.ts", - "unpkg": "dist/widget-stencil/widget-stencil.esm.js", + "unpkg": "dist/widget/widget.esm.js", "devDependencies": { "@stencil/angular-output-target": "^0.8.4", "@stencil/core": "^4.7.0", diff --git a/packages/widget-stencil/src/components.d.ts b/packages/widget-stencil/src/components.d.ts index ceb5736..8f25afa 100644 --- a/packages/widget-stencil/src/components.d.ts +++ b/packages/widget-stencil/src/components.d.ts @@ -7,14 +7,6 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; export namespace Components { interface MifielWidget { - /** - * Main button action in the full screen error view. Can be a URL or a function. - */ - "callToActionError"?: string | Function; - /** - * Main button action in the success view. Can be a URL or a function. - */ - "callToActionSuccess"?: string | Function; /** * Set classes to the iframe container */ @@ -24,24 +16,36 @@ export namespace Components { * @default 'production' */ "environment": keyof typeof environments; + /** + * Function to be executed when the main button is clicked in the error page. It can also be a string containing a URL to redirect to. + */ + "errorBtnAction"?: string | Function; "getIframe": () => Promise; /** - * The ID of the widget. + * The widget ID. */ "id": string; /** - * Listener for errors that occur during the signing flow. + * Function that will be called whenever an error occurs during the signing flow. + */ + "onSignError"?: Function; + /** + * Function will be called when the document is signed successfully. */ - "onError"?: Function; + "onSignSuccess"?: Function; /** - * Function to be called when the document is signed successfully. + * Function to be executed when the main button is clicked on the success page. It can also be a string containing a URL to redirect to. */ - "onSuccess"?: Function; + "successBtnAction"?: string | Function; /** * The text of the success button. * @default 'Proceed to next step' */ "successBtnText": string; + /** + * Set widget version + */ + "widgetVersion"?: string; } } export interface MifielWidgetCustomEvent extends CustomEvent { @@ -50,8 +54,10 @@ export interface MifielWidgetCustomEvent extends CustomEvent { } declare global { interface HTMLMifielWidgetElementEventMap { - "error": any; - "success": any; + "signError": any; + "sign-error": any; + "signSuccess": any; + "sign-success": any; } interface HTMLMifielWidgetElement extends Components.MifielWidget, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLMifielWidgetElement, ev: MifielWidgetCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; @@ -73,14 +79,6 @@ declare global { } declare namespace LocalJSX { interface MifielWidget { - /** - * Main button action in the full screen error view. Can be a URL or a function. - */ - "callToActionError"?: string | Function; - /** - * Main button action in the success view. Can be a URL or a function. - */ - "callToActionSuccess"?: string | Function; /** * Set classes to the iframe container */ @@ -91,24 +89,38 @@ declare namespace LocalJSX { */ "environment"?: keyof typeof environments; /** - * The ID of the widget. + * Function to be executed when the main button is clicked in the error page. It can also be a string containing a URL to redirect to. + */ + "errorBtnAction"?: string | Function; + /** + * The widget ID. */ "id"?: string; + "onSign-error"?: (event: MifielWidgetCustomEvent) => void; + "onSign-success"?: (event: MifielWidgetCustomEvent) => void; + /** + * Function that will be called whenever an error occurs during the signing flow. + */ + "onSignError"?: Function; + "onSignError"?: (event: MifielWidgetCustomEvent) => void; /** - * Listener for errors that occur during the signing flow. + * Function will be called when the document is signed successfully. */ - "onError"?: Function; - "onError"?: (event: MifielWidgetCustomEvent) => void; + "onSignSuccess"?: Function; + "onSignSuccess"?: (event: MifielWidgetCustomEvent) => void; /** - * Function to be called when the document is signed successfully. + * Function to be executed when the main button is clicked on the success page. It can also be a string containing a URL to redirect to. */ - "onSuccess"?: Function; - "onSuccess"?: (event: MifielWidgetCustomEvent) => void; + "successBtnAction"?: string | Function; /** * The text of the success button. * @default 'Proceed to next step' */ "successBtnText"?: string; + /** + * Set widget version + */ + "widgetVersion"?: string; } interface IntrinsicElements { "mifiel-widget": MifielWidget; diff --git a/packages/widget-stencil/src/components/mifiel-widget/index.tsx b/packages/widget-stencil/src/components/mifiel-widget/index.tsx index f2a82cd..ff0a489 100644 --- a/packages/widget-stencil/src/components/mifiel-widget/index.tsx +++ b/packages/widget-stencil/src/components/mifiel-widget/index.tsx @@ -1,5 +1,6 @@ import { h, Component, Prop, Element, Host, Method, Event, EventEmitter } from '@stencil/core'; import { loadScript } from '../../utils/load-script'; +import dataWidget from '../config.json'; const idComponent = 'mifiel-widget'; const environments = { @@ -11,6 +12,11 @@ const environments = { tag: 'mifiel-widget', }) export class MifielWidget { + /** + * The widget ID. + */ + @Prop() id: string; + /** * The environment to use for the widget. * @default 'production' @@ -18,46 +24,50 @@ export class MifielWidget { @Prop() environment: keyof typeof environments = 'production'; /** - * The ID of the widget. + * Function will be called when the document is signed successfully. */ - @Prop() id: string; + @Prop() onSignSuccess?: Function; /** - * The text of the success button. - * @default 'Proceed to next step' + * Function that will be called whenever an error occurs during the signing flow. */ - @Prop() successBtnText = 'Proceed to next step'; + @Prop() onSignError?: Function; /** - * Function to be called when the document is signed successfully. + * The text of the success button. + * @default 'Proceed to next step' */ - @Prop() onSuccess?: Function; + @Prop() successBtnText = 'Proceed to next step'; /** - * Main button action in the success view. Can be a URL or a function. + * Function to be executed when the main button is clicked on the success page. It can also be a string containing a URL to redirect to. */ - @Prop() callToActionSuccess?: string | Function; + @Prop() successBtnAction?: string | Function; /** - * Listener for errors that occur during the signing flow. + * Function to be executed when the main button is clicked in the error page. It can also be a string containing a URL to redirect to. */ - @Prop() onError?: Function; + @Prop() errorBtnAction?: string | Function; /** - * Main button action in the full screen error view. Can be a URL or a function. + * Set classes to the iframe container */ - @Prop() callToActionError?: string | Function; + @Prop() containerClass?: string; /** - * Set classes to the iframe container + * Set widget version */ - @Prop() containerClass?: string; + @Prop() widgetVersion?: string = `${dataWidget.appName}@${dataWidget.appVersion}`; @Element() element: HTMLElement; - @Event() error: EventEmitter; + @Event() signError: EventEmitter; + + @Event({ eventName: 'sign-error' }) signErrorVue: EventEmitter; - @Event() success: EventEmitter; + @Event() signSuccess: EventEmitter; + + @Event({ eventName: 'sign-success' }) signSuccessVue: EventEmitter; @Method() async getIframe() { @@ -98,31 +108,39 @@ export class MifielWidget { } private handleOnError = error => { - if (this.onError) this.onError(error); + if (this.onSignError) this.onSignError(error); + + if (this.widgetVersion.includes('@mifiel/widget-vue')) { + return this.signErrorVue.emit(error); + } - this.error.emit(error); + return this.signError.emit(error); }; private getOnError() { return { - ...(this.callToActionError ? { callToAction: this.callToActionError } : {}), + ...(this.errorBtnAction ? { callToAction: this.errorBtnAction } : {}), listener: this.handleOnError, }; } private handleOnSuccess = () => { - if (this.success) this.onSuccess(); + if (this.onSignSuccess) this.onSignSuccess(); + + if (this.widgetVersion.includes('@mifiel/widget-vue')) { + return this.signSuccessVue.emit(); + } - this.success.emit(); + return this.signSuccess.emit(); }; private getOnSuccess() { - if (!this.callToActionSuccess && !this.onSuccess) { + if (!this.successBtnAction && !this.onSignSuccess) { return null; } return { - ...(this.callToActionSuccess ? { callToAction: this.callToActionSuccess } : {}), + ...(this.successBtnAction ? { callToAction: this.successBtnAction } : {}), listener: this.handleOnSuccess, }; } diff --git a/packages/widget-stencil/src/index.html b/packages/widget-stencil/src/index.html index 50d66ae..e7ae7d5 100644 --- a/packages/widget-stencil/src/index.html +++ b/packages/widget-stencil/src/index.html @@ -5,8 +5,8 @@ Stencil Component Starter - - + + diff --git a/packages/widget-stencil/src/utils/version.js b/packages/widget-stencil/src/utils/version.js new file mode 100644 index 0000000..485132c --- /dev/null +++ b/packages/widget-stencil/src/utils/version.js @@ -0,0 +1,17 @@ +const fs = require('fs'); +const path = require('path'); + +const packageJsonPath = path.resolve(__dirname, '../../package.json'); +const packageJsonContent = fs.readFileSync(packageJsonPath, 'utf8'); +const packageJson = JSON.parse(packageJsonContent); + +const { name, version } = packageJson; + +const configObject = { + appName: name, + appVersion: version, +}; + +const configFilePath = path.resolve(__dirname, '../components/config.json'); + +fs.writeFileSync(configFilePath, JSON.stringify(configObject, null, 2), 'utf8'); diff --git a/packages/widget-stencil/stencil.config.ts b/packages/widget-stencil/stencil.config.ts index 8c2380c..98a96c2 100644 --- a/packages/widget-stencil/stencil.config.ts +++ b/packages/widget-stencil/stencil.config.ts @@ -5,7 +5,7 @@ import { angularOutputTarget } from '@stencil/angular-output-target'; import { vueOutputTarget } from '@stencil/vue-output-target'; export const config: Config = { - namespace: 'widget-stencil', + namespace: 'widget', outputTargets: [ { type: 'dist', @@ -15,17 +15,17 @@ export const config: Config = { serviceWorker: null, // disable service workers }, reactOutputTarget({ - componentCorePackage: '@mifiel/widget-stencil', + componentCorePackage: '@mifiel/widget', proxiesFile: '../widget-react/lib/components/stencil-generated/index.ts', }), angularOutputTarget({ - componentCorePackage: '@mifiel/widget-stencil', + componentCorePackage: '@mifiel/widget', outputType: 'component', directivesProxyFile: '../widget-angular/src/lib/stencil-generated/components.ts', directivesArrayFile: '../widget-angular/src/lib/stencil-generated/index.ts', }), vueOutputTarget({ - componentCorePackage: '@mifiel/widget-stencil', + componentCorePackage: '@mifiel/widget', proxiesFile: '../widget-vue/lib/components.ts', }), ], diff --git a/packages/widget-stencil/tsconfig.json b/packages/widget-stencil/tsconfig.json index 12033fb..f247ec3 100644 --- a/packages/widget-stencil/tsconfig.json +++ b/packages/widget-stencil/tsconfig.json @@ -7,7 +7,7 @@ "jsxFactory": "h", "declaration": true, "declarationMap": true, - "sourceMap": true, + "sourceMap": false, "composite": true, "removeComments": true, "importHelpers": true, @@ -29,5 +29,6 @@ "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "resolveJsonModule": true - } + }, + "include": ["src", "src/components/config.json"] } diff --git a/packages/widget-vue/.gitignore b/packages/widget-vue/.gitignore new file mode 100644 index 0000000..d344ba6 --- /dev/null +++ b/packages/widget-vue/.gitignore @@ -0,0 +1 @@ +config.json diff --git a/packages/widget-vue/README.md b/packages/widget-vue/README.md index f46bfe9..457cbb7 100644 --- a/packages/widget-vue/README.md +++ b/packages/widget-vue/README.md @@ -34,12 +34,12 @@ app.mount('#app');
@@ -71,14 +71,19 @@ export default { ## Props -- **`id`**: (string, required) The ID of the widget. -- **`environment`**: (string, optional) The environment to use for the widget (`production` by default). -- **`@success`**: (function, optional) Function to be called when the document is signed successfully. -- **`@error`**: (function, optional) Listener for errors that occur during the signing flow. -- **`successBtnText`**: (string, optional) Text for the success button (`Proceed to next step` by default). -- **`callToActionSuccess`**: (string | function, optional) Main button action in the success view. -- **`callToActionError`**: (string | function, optional) Main button action in the error view. -- **`containerClass`**: (string, optional) CSS class to be applied to the widget container. +- **`id`**: (string, required) The widget ID +- **`environment`**: (string, optional) The environment where the widget will be used: sandbox or production. By default, production. +- **`on-sign-success`**: (function, optional) Function will be called when the document is signed successfully +- **`on-sign-error`**: (function, optional) Function that will be called whenever an error occurs during the signing flow. +- **`success-btn-text`**: (string, optional) Text that will display in the main button in the success page. By default, Proceed to next step +- **`success-btn-action`**: (string | function, optional) Function to be executed when the main button is clicked in the success page. It can also be a string containing a URL to redirect to. +- **`error-btn-action`**: (string | function, optional) Function to be executed when the main button is clicked in the error page. It can also be a string containing a URL to redirect to. +- **`container-class`**: (string, optional) CSS class to be applied to the widget container. + +## Listeners + +In addition to using the `on-sign-success` and `on-sign-error` props, listeners for `sign-success` and `sign-error` events can also be added to achieve the same outcome. This approach is recommended for handling successful document signing and errors during the signing process. + # Important Information diff --git a/packages/widget-vue/lib/components.ts b/packages/widget-vue/lib/components.ts index 92be842..6301374 100644 --- a/packages/widget-vue/lib/components.ts +++ b/packages/widget-vue/lib/components.ts @@ -3,21 +3,24 @@ /* auto-generated vue proxies */ import { defineContainer } from './vue-component-lib/utils'; -import type { JSX } from '@mifiel/widget-stencil'; +import type { JSX } from '@mifiel/widget'; export const MifielWidget = /*@__PURE__*/ defineContainer('mifiel-widget', undefined, [ - 'environment', 'id', + 'environment', + 'onSignSuccess', + 'onSignError', 'successBtnText', - 'onSuccess', - 'callToActionSuccess', - 'onError', - 'callToActionError', + 'successBtnAction', + 'errorBtnAction', 'containerClass', - 'error', - 'success' + 'widgetVersion', + 'signError', + 'sign-error', + 'signSuccess', + 'sign-success' ]); diff --git a/packages/widget-vue/lib/index.ts b/packages/widget-vue/lib/index.ts index 263e28e..ea40baf 100644 --- a/packages/widget-vue/lib/index.ts +++ b/packages/widget-vue/lib/index.ts @@ -1,2 +1,2 @@ -export * from './components'; +export * from './mifiel-widget'; export * from './plugin'; diff --git a/packages/widget-vue/lib/mifiel-widget.ts b/packages/widget-vue/lib/mifiel-widget.ts new file mode 100644 index 0000000..fbfd9b9 --- /dev/null +++ b/packages/widget-vue/lib/mifiel-widget.ts @@ -0,0 +1,21 @@ +/* eslint-disable */ +/* tslint:disable */ +import { defineComponent, h } from 'vue'; +import { defineContainer } from './vue-component-lib/utils'; +import type { JSX } from '@mifiel/widget'; +import dataWidget from './config.json'; + +const widgetVersion = `${dataWidget.appName}@${dataWidget.appVersion}` + +const Widget = /*@__PURE__*/ defineContainer( + 'mifiel-widget', + undefined, +); + +export const MifielWidget = defineComponent({ + name: 'MifielWidget', + setup(props, { slots }) { + return () => + h(Widget, { ...props, 'widget-version': widgetVersion }, slots); + }, +}); diff --git a/packages/widget-vue/lib/plugin.ts b/packages/widget-vue/lib/plugin.ts index 7215d2c..18f5972 100644 --- a/packages/widget-vue/lib/plugin.ts +++ b/packages/widget-vue/lib/plugin.ts @@ -1,8 +1,8 @@ import { Plugin } from 'vue'; -import { defineCustomElements } from '@mifiel/widget-stencil/dist/loader'; +import { defineCustomElements } from '@mifiel/widget/dist/loader'; export const MifielWidgetPlugin: Plugin = { install() { - defineCustomElements(); + defineCustomElements(window); }, }; diff --git a/packages/widget-vue/package.json b/packages/widget-vue/package.json index 95d4ae4..078ceed 100644 --- a/packages/widget-vue/package.json +++ b/packages/widget-vue/package.json @@ -19,12 +19,12 @@ }, "scripts": { "prebuild": "rimraf dist", - "build": "npm run tsc", + "build": "node utils/version.js && npm run tsc", "tsc": "tsc -p . --outDir ./dist" }, "types": "dist/index.d.ts", "dependencies": { - "@mifiel/widget-stencil": "^0.0.1" + "@mifiel/widget": "^0.0.1" }, "devDependencies": { "vue": "^3.4.29" diff --git a/packages/widget-vue/tsconfig.json b/packages/widget-vue/tsconfig.json index 30ad124..0ae6cd7 100644 --- a/packages/widget-vue/tsconfig.json +++ b/packages/widget-vue/tsconfig.json @@ -9,11 +9,13 @@ "emitDecoratorMetadata": true, "experimentalDecorators": true, "target": "es2017", - "sourceMap": true, + "sourceMap": false, "lib": ["dom", "es2020"], "moduleResolution": "node", - "skipLibCheck": true + "skipLibCheck": true, + "resolveJsonModule": true, + "allowSyntheticDefaultImports": true }, - "include": ["lib/**/*.ts"], + "include": ["lib", "utils/version.js"], "exclude": ["node_modules"] } diff --git a/packages/widget-vue/utils/version.js b/packages/widget-vue/utils/version.js new file mode 100644 index 0000000..10b4fa3 --- /dev/null +++ b/packages/widget-vue/utils/version.js @@ -0,0 +1,17 @@ +const fs = require('fs'); +const path = require('path'); + +const packageJsonPath = path.resolve(__dirname, '../package.json'); +const packageJsonContent = fs.readFileSync(packageJsonPath, 'utf8'); +const packageJson = JSON.parse(packageJsonContent); + +const { name, version } = packageJson; + +const configObject = { + appName: name, + appVersion: version, +}; + +const configFilePath = path.resolve(__dirname, '../lib/config.json'); + +fs.writeFileSync(configFilePath, JSON.stringify(configObject, null, 2), 'utf8');