fix: Update vercel config & package

nepflow · Feb 3, 2024 · 6c34169 · 6c34169
1 parent 74f79bf
commit 6c34169
Show file tree

Hide file tree

Showing 9 changed files with 1,025 additions and 45 deletions.
diff --git a/README.md b/README.md
@@ -33,7 +33,7 @@ import IntegrationWidget from '@nepflow/integration-widget';
 You can load specific version of package from [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@nepflow/integration-widget).
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@nepflow/integration-widget@1/dist/cjs/index.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@nepflow/integration-widget@1/dist/lib.js"></script>
 ```
 
 ## Configuration
@@ -50,7 +50,7 @@ Create an element that should contain the widget
 If your app is integrated with [Zapier](https://zapier.com/):
 
 ```javascript
-const widget = IntegrationWidgetConfig(
+const widget = new NepflowIntegrationWidget(
   'integration-widget', // Element ID
   {
     zapierAppId: '<ZAPIER APP ID>', // Your Zapier app ID or slug
@@ -66,7 +66,7 @@ const widget = IntegrationWidgetConfig(
 You can use `customCards` parameter to show your native integrations:
 
 ```javascript
-const widget = IntegrationWidgetConfig(
+const widget = new NepflowIntegrationWidget(
   'integration-widget', // Element ID
   {
     zapierAppId: '<ZAPIER APP ID>', // Your Zapier app ID or slug
@@ -101,7 +101,7 @@ const widget = IntegrationWidgetConfig(
 If your app is not integrated with Zapier yet:
 
 ```javascript
-const widget = IntegrationWidgetConfig(
+const widget = new NepflowIntegrationWidget(
   'integration-widget', // Element ID
   {
     backgroundColor: '#f5f5f5',

diff --git a/package/README.md b/package/README.md
@@ -1,58 +1,86 @@
-<img alt="Nepflow widget with 6,000+ Zapier integrations" src="https://raw.githubusercontent.com/nepflow/integration-widget/main/web/assets/intro-v3.png" style="max-width: 800px; width: 100%; margin-bottom: 24px;" />
-
 # Integration Widget
 
 The widget allows your users to explore **6,000+ Zapier integrations** right inside your app.
 
 [![Production Deployment](https://github.com/nepflow/integration-widget/actions/workflows/production.yaml/badge.svg?branch=main)](https://github.com/nepflow/integration-widget/actions/workflows/production.yaml)
+[![@nepflow/integration-widget.svg](https://img.shields.io/npm/v/@nepflow/integration-widget.svg)](https://www.npmjs.com/package/@nepflow/integration-widget)
 [![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
 
-[Get started](#getting-started) • [Live Demo](https://demo.nepflow.dev/) • [Build Widget](https://demo.nepflow.dev/) • [Documentation](https://docs.nepflow.dev/)
+[Get started](#installation) • [Live Demo](https://demo.nepflow.dev/) • [Build Widget](https://demo.nepflow.dev/) • [Documentation](https://docs.nepflow.dev/)
+
+<img alt="Nepflow widget with 6,000+ Zapier integrations" src="https://raw.githubusercontent.com/nepflow/integration-widget/main/web/assets/intro-v3.png" style="max-width: 800px; width: 100%; margin: 12px 0;" />
 
-## Getting started
+## Installation
 
 You can use [the online builder](https://demo.nepflow.dev) to customize the widget and get the installation code.
 
-### Use installation script
+### Node.js package
 
-If your app is integrated with [Zapier](https://zapier.com/):
+Install the package via NPM or Yarn
+
+```bash
+npm i @nepflow/integration-widget --save
+```
+
+Include module in your application
+
+```
+import IntegrationWidget from '@nepflow/integration-widget';
+```
+
+### Load from CDN
+
+You can load specific version of package from [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@nepflow/integration-widget).
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@nepflow/integration-widget@1/dist/lib.js"></script>
+```
+
+## Configuration
 
+### Add element
+
+Create an element that should contain the widget
 ```html
 <div id="integration-widget"></div>
+```
+
+### Initialization
+
+If your app is integrated with [Zapier](https://zapier.com/):
 
-<script src="https://widget.nepflow.dev/loader-v1.js"></script>
-<script>
-  nepflowWidget.load('integration-widget', {
+```javascript
+const widget = new NepflowIntegrationWidget(
+  'integration-widget', // Element ID
+  {
     zapierAppId: '<ZAPIER APP ID>', // Your Zapier app ID or slug
     backgroundColor: '#f5f5f5',
     cardColor: '#fff',
     cardBorderColor: '#fff',
     innerSpace: 24,
     autoVerticalResize: true
-  });
-</script>
+  }
+);
 ```
 
-You can use `customIntegrations` parameter to show your native integrations:
+You can use `customCards` parameter to show your native integrations:
 
-```html
-<div id="integration-widget"></div>
-
-<script src="https://widget.nepflow.dev/loader-v1.js"></script>
-<script>
-  nepflowWidget.load('integration-widget', {
+```javascript
+const widget = new NepflowIntegrationWidget(
+  'integration-widget', // Element ID
+  {
     zapierAppId: '<ZAPIER APP ID>', // Your Zapier app ID or slug
     backgroundColor: '#f5f5f5',
     cardColor: '#fff',
     cardBorderColor: '#fff',
     innerSpace: '24px',
     autoVerticalResize: true,
-    customIntegrations: [
-      // Showing a new integration in the catalog
+    customCards: [
+      // Showing a custom integration in the catalog
       { 
-        id: 'new_integration', 
-        name: 'New Integration', 
-        iconURL: 'https://example.com/new_integration.png' 
+        id: 'custom_integration', 
+        name: 'Custom Integration', 
+        iconURL: 'https://example.com/foobar.png' 
       },
 
       // Replacing an existing Zapier app in the catalog
@@ -66,18 +94,16 @@ You can use `customIntegrations` parameter to show your native integrations:
     onCardClick: function(id) {
       alert(id + ' clicked!')
     }
-  });
-</script>
+  }
+);
 ```
 
 If your app is not integrated with Zapier yet:
 
-```html
-<div id="integration-widget"></div>
-
-<script src="https://widget.nepflow.dev/loader-v1.js"></script>
-<script>
-  nepflowWidget.load('integration-widget', {
+```javascript
+const widget = new NepflowIntegrationWidget(
+  'integration-widget', // Element ID
+  {
     backgroundColor: '#f5f5f5',
     cardColor: '#fff',
     cardBorderColor: '#fff',
@@ -86,8 +112,8 @@ If your app is not integrated with Zapier yet:
     onCardClick: function(id) {
       alert(id + ' clicked!')
     }
-  });
-</script>
+  }
+);
 ```
 
 ### Use with your existing framework

diff --git a/package/package.json b/package/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nepflow/integration-widget",
-  "version": "1.1.0",
+  "version": "1.2.2",
   "description": "",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -10,11 +10,12 @@
     "url": "git+https://github.com/nepflow/integration-widget.git"
   },
   "scripts": {
-    "build": "yarn build:esm && yarn build:cjs",
+    "build": "yarn build:esm && yarn build:cjs && yarn build:browser",
+    "build:browser": "webpack",
     "build:esm": "tsc",
     "build:cjs": "tsc --module commonjs --outDir dist/cjs",
     "copy-readme": "cp ../README.md ./README.md",
-    "prepare": "npm run build && npm run copy-readme"
+    "prepare": "yarn build && yarn copy-readme"
   },
   "files": [
     "dist",
@@ -32,6 +33,9 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@types/react": "^18.2.52",
-    "typescript": "^5.3.3"
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.3.3",
+    "webpack": "^5.90.1",
+    "webpack-cli": "^5.1.4"
   }
 }
diff --git a/package/src/index.ts b/package/src/index.ts
@@ -1,5 +1,5 @@
-import { IntegrationWidget } from './models/IntegrationWidget'
+import { IntegrationWidget as NepflowIntegrationWidget } from './models/IntegrationWidget'
 import { IntegrationWidgetConfig } from './models/IntegrationWidgetConfig'
 
 export { IntegrationWidgetConfig };
-export default IntegrationWidget;
+export default NepflowIntegrationWidget;
diff --git a/package/src/lib.ts b/package/src/lib.ts
@@ -0,0 +1,12 @@
+import { IntegrationWidget as NepflowIntegrationWidget } from './models/IntegrationWidget'
+
+declare global {
+  interface Window {
+    NepflowIntegrationWidget: Function;
+  }
+}
+
+// Prevent tree-shaking
+window.NepflowIntegrationWidget = NepflowIntegrationWidget;
+
+export default NepflowIntegrationWidget;
diff --git a/package/tsconfig.json b/package/tsconfig.json
@@ -15,12 +15,12 @@
     "strict": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
-    "noUnusedLocals": true,
+    "noUnusedLocals": false,
     "noUnusedParameters": true,
     "moduleResolution": "node",
     "jsx": "react",
     "esModuleInterop": true,
     "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
+    "forceConsistentCasingInFileNames": true
   }
 }
diff --git a/package/webpack.config.js b/package/webpack.config.js
@@ -0,0 +1,22 @@
+const path = require("path")
+
+module.exports = {
+  mode: "production",
+  entry : "./src/lib.ts",
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
+  output : {
+    path: path.resolve(__dirname, "dist"),
+    filename: "lib.js"
+  }
+}