Seperate web-component bundle and include deps into it

skip-mev · Jul 4, 2024 · 9ae9627 · 9ae9627
1 parent c207fa1
commit 9ae9627
Show file tree

Hide file tree

Showing 7 changed files with 459 additions and 50 deletions.
diff --git a/examples/nextjs/pages/index.tsx b/examples/nextjs/pages/index.tsx
@@ -2,11 +2,9 @@ import { NextPage } from 'next';
 import '@skip-go/widget/style.css';
 import React from 'react';
 import dynamic from 'next/dynamic';
-import {
-  SwapWidget,
-  SwapWidgetProvider,
-  initializeSwapWidget,
-} from '@skip-go/widget';
+import { SwapWidget, SwapWidgetProvider } from '@skip-go/widget';
+
+import { initializeSwapWidget } from '@skip-go/widget/web-component';
 
 const NoSsrBase = (props: any) => <>{props.children}</>;
 

diff --git a/packages/widget/package.json b/packages/widget/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@skip-go/widget",
   "description": "Swap widget",
-  "version": "0.1.0",
+  "version": "0.1.1-alpha.0",
   "repository": "https://github.com/skip-mev/widget",
   "type": "module",
   "exports": {
@@ -12,6 +12,10 @@
     "./style.css": {
       "import": "./build/style.css",
       "default": "./build/style.css"
+    },
+    "./web-component": {
+      "types": "./build/web-component.d.ts",
+      "import": "./build/web-component.es.js"
     }
   },
   "types": "./build/index.d.ts",
@@ -24,8 +28,8 @@
   ],
   "scripts": {
     "start": "rollup --config rollup.config.js -w",
-    "dev": "rollup --config rollup.config.js -w",
-    "build": "rollup --config rollup.config.js",
+    "dev": "NODE_OPTIONS=--max-old-space-size=14000 rollup --config rollup.config.js -w",
+    "build": "NODE_OPTIONS=--max-old-space-size=14000 rollup --config rollup.config.js",
     "lint": "eslint src --ext .ts",
     "chains:generate": "tsx ./src/scripts/codegen.ts",
     "postpublish": "yarn run post",
@@ -87,6 +91,9 @@
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.7",
+    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
     "@skip-go/core": "workspace:packages/core",
     "@solana/spl-token": "^0.4.6",
     "@solana/wallet-adapter-react": "^0.15.35",

diff --git a/packages/widget/rollup.config.js b/packages/widget/rollup.config.js
@@ -1,6 +1,9 @@
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 import typescript from 'rollup-plugin-typescript2';
 import postcss from 'rollup-plugin-postcss';
+import json from '@rollup/plugin-json';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
 
 import packageJson from './package.json';
 
@@ -12,11 +15,6 @@ export default [
       file: packageJson.exports['.'].import,
       format: 'esm',
       sourcemap: true,
-      globals: {
-        react: 'react',
-        'react-dom': 'react-dom',
-        '@r2wc/react-to-web-component': '@r2wc',
-      },
     },
     plugins: [
       postcss({
@@ -32,9 +30,36 @@ export default [
         useTsconfigDeclarationDir: true,
         exclude: 'node_modules/**',
       }),
-      resolve({
+    ],
+  },
+  {
+    input: ['./src/web-component.ts'],
+    output: {
+      file: packageJson.exports['./web-component'].import,
+      format: 'esm',
+      sourcemap: true,
+      inlineDynamicImports: true,
+    },
+    plugins: [
+      postcss({
+        config: {
+          path: './postcss.config.js',
+        },
+        extensions: ['.css'],
+        minimize: true,
+        extract: 'style.css',
+      }),
+      peerDepsExternal(),
+      typescript({
+        useTsconfigDeclarationDir: true,
+        exclude: 'node_modules/**',
+      }),
+      nodeResolve({
         browser: true,
+        preferBuiltins: false,
       }),
+      json(),
+      commonjs(),
     ],
   },
 ];
diff --git a/packages/widget/src/index.ts b/packages/widget/src/index.ts
@@ -1,6 +1,5 @@
 import './styles/global.css';
 export { SwapWidgetProvider } from './provider';
 export { SwapWidget, SwapWidgetProps } from './ui';
-export { initializeSwapWidget } from './ui/WebComponent';
 export { useAssets } from './provider/assets';
 export { useChains, useChainByID } from './hooks/use-chains';
diff --git a/packages/widget/src/web-component.ts b/packages/widget/src/web-component.ts
@@ -0,0 +1 @@
+export { initializeSwapWidget } from './ui/WebComponent';
diff --git a/packages/widget/tsconfig.json b/packages/widget/tsconfig.json
@@ -7,7 +7,7 @@
     "declaration": true,
     "declarationDir": "build",
     "module": "ESNext",
-    "moduleResolution": "node",
+    "moduleResolution": "Bundler",
     "target": "ES2019",
     "lib": ["es6", "dom", "es2016", "es2017", "es2021"],
     "sourceMap": false,
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { initializeSwapWidget } from './ui/WebComponent';