Make SDK Modal with StencilJS (#1124)

* feat: convert sdk-install-modal-web to stenciljs

* fix: remove sdk-install-modal-web deps in devnext + devreact

* chore: remove stencil doc gen

* feat: implement stenciljs sdk-install-modal-web into sdk

* chore: clean up

* fix: tab style

* fix: select modal

* fix: default tab + send link to select modal

* chore: remove px

* chore: do not add browser tag to packagejson (see commit msg)

stenciljs will throw a warning if the browser option is defined in the
package.json file. To get rid of the warning, the browser option is removed

packages/devnext/next.config.js

@@ -24,7 +24,6 @@ const nextConfig = withExpo({
     '@expo/vector-icons',
     '@metamask/sdk-communication-layer',
     '@metamask/sdk',
-    '@metamask/sdk-install-modal-web',
     '@metamask/sdk-react',
     '@metamask/sdk-react-ui',
     '@metamask/sdk-ui',

packages/devnext/package.json

@@ -24,7 +24,6 @@
     "@metamask/providers": "16.1.0",
     "@metamask/sdk": "workspace:^",
     "@metamask/sdk-communication-layer": "workspace:^",
-    "@metamask/sdk-install-modal-web": "workspace:^",
     "@metamask/sdk-lab": "workspace:^",
     "@metamask/sdk-react": "workspace:^",
     "@metamask/sdk-react-ui": "workspace:^",

packages/devnext/tsconfig.json

@@ -23,9 +23,6 @@
       "@metamask/sdk-communication-layer": [
         "../sdk-communication-layer/src"
       ],
-      "@metamask/sdk-install-modal-web": [
-        "../sdk-install-modal-web/src"
-      ],
       "@metamask/sdk-react": [
         "../sdk-react/src"
       ],

packages/devreact/tsconfig.json

@@ -23,7 +23,6 @@
     "typeRoots": ["./types", "./node_modules/@types"],
     "paths": {
       "@metamask/sdk-communication-layer": ["../sdk-communication-layer/src"],
-      "@metamask/sdk-install-modal-web": ["../sdk-install-modal-web/src"],
       "@metamask/sdk-react": ["../sdk-react/src"],
       "@metamask/sdk-react-ui": ["../sdk-react-ui/src"],
       "@metamask/sdk": ["../sdk/src"],

packages/sdk-install-modal-web/.eslintrc.js

@@ -15,6 +15,9 @@ module.exports = {
     '**/coverage/**',
     'postcss.config.js',
     'jest-preload.js',
+    'loader',
+    '.stencil',
+    'stencil.config.ts',
   ],
 
   parserOptions: {

packages/sdk-install-modal-web/.gitignore

@@ -54,3 +54,32 @@ node_modules/
 # lock files
 yarn.lock
 package-lock.json
+
+# == Stencil ==
+dist/
+www/
+loader/
+
+*~
+*.sw[mnpcod]
+*.log
+*.lock
+*.tmp
+*.tmp.*
+log.txt
+*.sublime-project
+*.sublime-workspace
+
+.stencil/
+.idea/
+.vscode/
+.sass-cache/
+.versions/
+node_modules/
+$RECYCLE.BIN/
+
+.DS_Store
+Thumbs.db
+UserInterfaceState.xcuserstate
+.env
+# ====

packages/sdk-install-modal-web/package.json

@@ -13,26 +13,52 @@
   },
   "author": "MetaMask",
   "packageManager": "[email protected]",
-  "main": "dist/cjs/index.js",
-  "module": "dist/es/index.js",
-  "unpkg": "dist/umd/index.js",
-  "browser": "dist/es/index.js",
-  "types": "dist/types/src/index.d.ts",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "unpkg": "dist/sdk-install-modal-web/index.esm.js",
+  "types": "dist/types/index.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
   "files": [
-    "/dist"
+    "./dist",
+    "./loader"
   ],
+  "exports": {
+    ".": {
+      "import": "./dist/sdk-install-modal-web/index.esm.js",
+      "require": "./dist/cjs/sdk-install-modal-web.cjs.js"
+    },
+    "./mm-install-modal": {
+      "import": "./dist/components/mm-install-modal.js",
+      "types": "./dist/components/mm-install-modal.d.ts"
+    },
+    "./mm-pending-modal": {
+      "import": "./dist/components/mm-pending-modal.js",
+      "types": "./dist/components/mm-pending-modal.d.ts"
+    },
+    "./mm-select-modal": {
+      "import": "./dist/components/mm-select-modal.js",
+      "types": "./dist/components/mm-select-modal.d.ts"
+    },
+    "./loader": {
+      "import": "./loader/index.js",
+      "require": "./loader/index.cjs",
+      "types": "./loader/index.d.ts"
+    }
+  },
   "scripts": {
+    "allow-scripts": "",
+    "generate": "stencil generate",
     "build:types": "tsc --project tsconfig.json --emitDeclarationOnly --outDir dist/types",
     "build:clean": "yarn clean && yarn build",
-    "build": "yarn build:types && rollup -c --bundleConfigAsCjs",
-    "build:dev": "yarn build:types && NODE_ENV=dev rollup -c --bundleConfigAsCjs",
+    "build": "stencil build --prod",
+    "build:dev": "stencil build --debug --dev",
     "build:tsc": "tsc --build tsconfig.json --verbose",
-    "build:watch": "webpack-cli --watch",
+    "build:watch": "stencil build --watchAll",
     "build:post-tsc": "echo 'N/A'",
     "build:pre-tsc": "echo 'N/A'",
-    "size": "size-limit",
-    "build:release": "yarn version && webpack-cli --mode production",
-    "clean": "rimraf ./dist",
+    "build:release": "yarn version && stencil build",
+    "clean": "rimraf ./dist && rimraf ./loader",
     "lint": "yarn lint:eslint && yarn lint:misc --check",
     "lint:changelog": "../../scripts/validate-changelog.sh @metamask/sdk-install-modal-web",
     "lint:eslint": "eslint . --cache --ext js,ts",
@@ -41,23 +67,22 @@
     "prepack": "../../scripts/prepack.sh",
     "publish:preview": "yarn npm publish --tag preview",
     "reset": "yarn clean && rimraf ./node_modules/",
-    "start": "webpack-dev-server",
-    "test": "echo \"Running tests for version $npm_package_version...\"",
+    "start": "stencil build --dev --watch --serve",
+    "test": "stencil test --spec --e2e",
+    "test:watch": "stencil test --spec --e2e --watchAll",
     "test:ci": "jest --coverage --passWithNoTests --setupFilesAfterEnv ./jest-preload.js",
     "preversion": "yarn test",
     "postversion": "git push --tags && yarn publish . --tag $npm_package_version && git push && echo \"Successfully released version $npm_package_version!\""
   },
   "devDependencies": {
     "@lavamoat/allow-scripts": "^2.3.1",
     "@metamask/auto-changelog": "3.1.0",
-    "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-node-resolve": "^15.0.2",
-    "@rollup/plugin-terser": "^0.4.1",
-    "@rollup/plugin-typescript": "^11.1.1",
     "@size-limit/preset-big-lib": "^11.0.2",
+    "@stencil/core": "^4.22.2",
+    "@types/i18n": "^0.13.12",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.9.0",
     "@types/prettier": "^2",
-    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.15",
     "@typescript-eslint/eslint-plugin": "^5.56.0",
     "@typescript-eslint/parser": "^5.56.0",
     "eslint": "^8.36.0",
@@ -70,36 +95,14 @@
     "eslint-plugin-react": "^7.32.2",
     "i18next": "23.11.5",
     "jest": "^29.6.4",
-    "postcss": "^8.4.35",
     "prettier": "^2.8.8",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "puppeteer": "^23.8.0",
     "rimraf": "^5.0.0",
-    "rollup": "^4.26.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-sizes": "^1.0.6",
-    "rollup-plugin-typescript2": "^0.36.0",
-    "rollup-plugin-visualizer": "^5.12.0",
     "size-limit": "^11.0.2",
     "typescript": "^5.6.3"
   },
   "peerDependencies": {
-    "i18next": "23.11.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-native": "*"
-  },
-  "peerDependenciesMeta": {
-    "react": {
-      "optional": true
-    },
-    "react-dom": {
-      "optional": true
-    },
-    "react-native": {
-      "optional": true
-    }
+    "i18next": "23.11.5"
   },
   "publishConfig": {
     "access": "public",