feat: setup stencil development environment with component preview (#…

…1196) * feat: turborepo setup * feat: setup stencil dev
MetaMask · Jan 15, 2025 · 458c3fa · 458c3fa
1 parent 53af746
commit 458c3fa
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 0 deletions.
diff --git a/packages/sdk-install-modal-web/package.json b/packages/sdk-install-modal-web/package.json
@@ -25,6 +25,7 @@
     "generate": "stencil generate",
     "build:types": "tsc --project tsconfig.json --emitDeclarationOnly --outDir dist/types",
     "build:clean": "yarn clean && yarn build",
+    "dev": "stencil build --dev --watch --serve",
     "build": "stencil build --prod",
     "build:dev": "NODE_ENV=development stencil build --debug --dev",
     "build:tsc": "tsc --build tsconfig.json --verbose",

diff --git a/packages/sdk-install-modal-web/src/index.html b/packages/sdk-install-modal-web/src/index.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+    <title>SDK Install Modal Web</title>
+    <script type="module" src="/build/sdk-install-modal-web.esm.js"></script>
+    <script nomodule src="/build/sdk-install-modal-web.js"></script>
+    <style>
+      .nav {
+        padding: 20px;
+        background: #f5f5f5;
+        margin-bottom: 20px;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 100000;
+      }
+      .nav a {
+        margin-right: 15px;
+        color: #333;
+        text-decoration: none;
+      }
+      .nav a:hover {
+        text-decoration: underline;
+      }
+      .component-container {
+        padding: 20px;
+        margin-top: 60px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="nav">
+      <a href="#install">Install Modal</a>
+      <a href="#pending">Pending Modal</a>
+      <a href="#select">Select Modal</a>
+    </div>
+
+    <div class="component-container">
+      <div id="install" style="display: none">
+        <h2>Install Modal</h2>
+        <mm-install-modal
+          link="https://example.com/install"
+          sdk-version="1.0.0"
+          prefer-desktop="true"
+        ></mm-install-modal>
+      </div>
+
+      <div id="pending" style="display: none">
+        <h2>Pending Modal</h2>
+        <mm-pending-modal></mm-pending-modal>
+      </div>
+
+      <div id="select" style="display: none">
+        <h2>Select Modal</h2>
+        <mm-select-modal
+          link="https://example.com/select"
+          sdk-version="1.0.0"
+          prefer-desktop="true"
+        ></mm-select-modal>
+      </div>
+    </div>
+
+    <script>
+      function showComponent() {
+        const hash = window.location.hash || '#install';
+        document.querySelectorAll('.component-container > div').forEach(div => {
+          div.style.display = 'none';
+        });
+        const componentDiv = document.querySelector(hash);
+        if (componentDiv) {
+          componentDiv.style.display = 'block';
+        }
+      }
+
+      window.addEventListener('hashchange', showComponent);
+      showComponent();
+    </script>
+  </body>
+</html>
diff --git a/packages/sdk-install-modal-web/stencil.config.ts b/packages/sdk-install-modal-web/stencil.config.ts
@@ -9,6 +9,11 @@ export const config: Config = {
       type: 'dist',
       isPrimaryPackageOutputTarget: true,
     },
+    {
+      type: 'www',
+      serviceWorker: null,
+      baseUrl: 'http://localhost:4444/'
+    }
   ],
   enableCache: true,
   buildEs5: false,