chore: use workspaces

README.md

@@ -7,7 +7,7 @@ Colored circles that can pulse. That's it. That's the component.
 Copy the following to your HTML page:
 
 ```html
-<script type="module" src="https://esm.sh/@ayo-run/status-indicator@2.1.2/es2022/status-indicator.mjs"></script>
+<script type="module" src="https://esm.sh/@ayo-run/status-indicator"></script>
 
 <status-indicator pulse status="positive">
   All systems operational
@@ -16,6 +16,9 @@ Copy the following to your HTML page:
 
 See example on CodePen: https://codepen.io/ayo-run/pen/RNorXrK
 
+> [!NOTE]
+> In this example, `esm.sh` bundles the base class together with the component. For most use cases, that is good enough but, still, "it depends". Copying the code will work just fine, but it woudn't hurt to read around about the trade-offs how bundling affects your application.
+
 ## Installation via NPM
 
 If you want to install the library as a node module, you can install the [published package](https://npmx.dev/@ayo-run/status-indicator) and the [base class](https://webcomponent.io) via NPM:
@@ -83,7 +86,7 @@ You can add the `pulse` attribute to make the circle... pulse
 
 ## Result
 
-![screenshot](https://raw.githubusercontent.com/ayo-run/status-indicator/refs/heads/main/screenshot.png)
+![screenshot](./screenshot.png)
 
 ---
 

lib/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@ayo-run/status-indicator",
+  "version": "2.0.3",
+  "type": "module",
+  "description": "Circles with color that can pulse to indicate status",
+  "license": "MIT",
+  "author": "Ayo Ayco",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ayo-run/status-indicator.git",
+    "directory": "lib"
+  },
+  "homepage": "https://status-indicator.webcomponent.io",
+  "module": "./dist/status-indicator.js",
+  "exports": {
+    ".": {
+      "default": "./dist/status-indicator.js",
+      "import": "./dist/status-indicator.js",
+      "require": "./dist/status-indicator.umd.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE",
+    "screenshot.png"
+  ],
+  "scripts": {
+    "test": "echo \"Warning: no test specified\"",
+    "build": "vite build",
+    "prepare": "husky"
+  },
+  "devDependencies": {
+    "@types/node": "^25.6.2",
+    "eslint": "^10.3.0",
+    "husky": "^9.1.7",
+    "unplugin-dts": "^1.0.0",
+    "vite": "^8.0.11"
+  },
+  "peerDependencies": {
+    "web-component-base": "^4.1.2"
+  }
+}

lib/src/status-indicator.ts

@@ -30,7 +30,6 @@ class StatusIndicator extends WebComponent {
     }
 
     get template(): any {
-        // @ts-ignore: Needs fixing on the base class
         const statusColor = this.#indicatorColor[this.props.status]
 
         return html`
@@ -44,8 +43,8 @@ class StatusIndicator extends WebComponent {
                 marginRight: '0.05rem',
                 ...(this.props.pulse ? this.#pulseAnimationCSSRules : [])
             }}> </div>
-
+            Weeeee
-            <span class="status-indicator-label"><slot></slot></span>
+            <span class="status-indicator-label">Wooooo <slot></slot></span>
 
             ${
             /** if pulse is set, add animation keyframes */

lib/vite.config.ts

@@ -1,12 +1,10 @@
 import { resolve } from 'node:path'
 import { defineConfig } from 'vite'
-import dts from 'vite-plugin-dts'
 
 export default defineConfig({
-    publicDir: false,
     build: {
         lib: {
-            entry: resolve(import.meta.dirname, 'src/status-indicator.ts'),
+            entry: resolve(import.meta.dirname, 'src/status-indicator.js'),
             name: 'StatusIndicator',
             fileName: 'status-indicator',
         },
@@ -14,10 +12,10 @@ export default defineConfig({
             external: ['web-component-base'],
             output: {
                 globals: {
-                    'web-component-base': 'web-component-base',
+                    'WebComponent': 'WebComponent',
+                    'html': 'html'
                 }
-            },
+            }
         }
-    },
+    }
-    plugins: [dts()]
 })

package.json

@@ -1,44 +1,20 @@
 {
-  "name": "@ayo-run/status-indicator",
+  "name": "status-indicator-monorepo",
-  "version": "2.1.2",
+  "version": "1.0.0",
+  "private": true,
   "type": "module",
-  "description": "Circles with color that can pulse to indicate status",
-  "license": "MIT",
-  "author": "Ayo Ayco",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/ayo-run/status-indicator.git"
-  },
-  "homepage": "https://status-indicator.webcomponent.io",
-  "module": "./dist/status-indicator.js",
-  "types": "./dist/status-indicator.d.ts",
-  "exports": {
-    ".": {
-      "default": "./dist/status-indicator.js",
-      "import": "./dist/status-indicator.js",
-      "require": "./dist/status-indicator.umd.cjs"
-    }
-  },
-  "files": [
-    "dist",
-    "README.md",
-    "LICENSE"
-  ],
   "scripts": {
     "test": "echo \"Warning: no test specified\"",
-    "build": "vite build",
+    "dev": "pnpm -F site run dev",
-    "build:lib": "vite build --config vite-lib.config.ts",
+    "build:site": "pnpm -F site run build",
-    "dev": "vite",
+    "build:lib": "pnpm -F @ayo-run/status-indicator run build",
     "prepare": "husky"
   },
   "devDependencies": {
     "@types/node": "^25.6.2",
     "eslint": "^10.3.0",
     "husky": "^9.1.7",
-    "vite": "^8.0.11",
+    "unplugin-dts": "^1.0.0",
-    "vite-plugin-dts": "^5.0.0"
+    "vite": "^8.0.11"
-  },
-  "peerDependencies": {
-    "web-component-base": "^4.1.2"
   }
 }

pnpm-lock.yaml

@@ -7,6 +7,24 @@ settings:
 importers:
 
   .:
+    devDependencies:
+      '@types/node':
+        specifier: ^25.6.2
+        version: 25.6.2
+      eslint:
+        specifier: ^10.3.0
+        version: 10.3.0
+      husky:
+        specifier: ^9.1.7
+        version: 9.1.7
+      unplugin-dts:
+        specifier: ^1.0.0
+        version: 1.0.0(typescript@6.0.3)(vite@8.0.11(@types/node@25.6.2))
+      vite:
+        specifier: ^8.0.11
+        version: 8.0.11(@types/node@25.6.2)
+
+  lib:
     dependencies:
       web-component-base:
         specifier: ^4.1.2
@@ -21,15 +39,24 @@ importers:
       husky:
         specifier: ^9.1.7
         version: 9.1.7
+      unplugin-dts:
+        specifier: ^1.0.0
+        version: 1.0.0(typescript@6.0.3)(vite@8.0.11(@types/node@25.6.2))
       vite:
         specifier: ^8.0.11
         version: 8.0.11(@types/node@25.6.2)
-      vite-plugin-dts:
+
-        specifier: ^5.0.0
+  site:
-        version: 5.0.0(typescript@6.0.3)(vite@8.0.11(@types/node@25.6.2))
+    dependencies:
+      '@ayo-run/status-indicator':
+        specifier: '*'
+        version: 1.1.1
 
 packages:
 
+  '@ayo-run/status-indicator@1.1.1':
+    resolution: {integrity: sha512-ZxNEiTkrYAEZWbCNLKu7tHoPVWfGTPVRZXpe7Vxsu5s50ZOmu+bmdxQn5xGXljvSUWb8qNB8trCz7trm46/9xQ==}
+
   '@emnapi/core@1.10.0':
     resolution: {integrity: sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==}
 
@@ -665,20 +692,6 @@ packages:
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
-  vite-plugin-dts@5.0.0:
-    resolution: {integrity: sha512-VLNAUttBq7pLxxL/m/ztjd5zj5yiviiC7ijfPFVLK5c45FLcibvieBsdjSka3a4ag1qdrAF9K3OysH4/lW+rPQ==}
-    peerDependencies:
-      '@microsoft/api-extractor': '>=7'
-      rollup: '>=3'
-      vite: '>=3'
-    peerDependenciesMeta:
-      '@microsoft/api-extractor':
-        optional: true
-      rollup:
-        optional: true
-      vite:
-        optional: true
-
   vite@8.0.11:
     resolution: {integrity: sha512-Jz1mxtUBR5xTT65VOdJZUUeoyLtqljmFkiUXhPTLZka3RDc9vpi/xXkyrnsdRcm2lIi3l3GPMnAidTsEGIj3Ow==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -746,6 +759,10 @@ packages:
 
 snapshots:
 
+  '@ayo-run/status-indicator@1.1.1':
+    dependencies:
+      web-component-base: 4.1.2
+
   '@emnapi/core@1.10.0':
     dependencies:
       '@emnapi/wasi-threads': 1.2.1
@@ -1300,20 +1317,6 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
-  vite-plugin-dts@5.0.0(typescript@6.0.3)(vite@8.0.11(@types/node@25.6.2)):
-    dependencies:
-      unplugin-dts: 1.0.0(typescript@6.0.3)(vite@8.0.11(@types/node@25.6.2))
-    optionalDependencies:
-      vite: 8.0.11(@types/node@25.6.2)
-    transitivePeerDependencies:
-      - '@rspack/core'
-      - '@vue/language-core'
-      - esbuild
-      - rolldown
-      - supports-color
-      - typescript
-      - webpack
-
   vite@8.0.11(@types/node@25.6.2):
     dependencies:
       lightningcss: 1.32.0

pnpm-workspace.yaml

@@ -1,2 +1,5 @@
+packages:
+  - "site"
+  - "lib"
 allowBuilds:
   web-component-base: false

site/index.html

@@ -18,8 +18,12 @@
     <link rel="apple-touch-icon" href="apple-touch-icon.png"/>
     <link rel="shortcut icon" href="/favicon.svg" type="image/svg+xml"/>
 
+
+
     <link rel="stylesheet" href="pico.min.css">
-    <script type="module" src="./src/status-indicator.ts"></script>
+
+    <script type="module" src="./main.ts"></script>
+
     <style>
         html, body {
             height: 100%
@@ -94,7 +98,7 @@
                     Copy the following to your HTML page:
                 </p>
                 <code><pre>
-&lt;script type="module" src="https://esm.sh/@ayo-run/status-indicator@2.1.2/es2022/status-indicator.mjs"&gt;&lt;/script&gt;
+&lt;script type="module" src="https://esm.sh/@ayo-run/status-indicator"&gt;&lt;/script&gt;
 
 &lt;status-indicator pulse status="positive"&gt;
     All systems operational

site/main.ts

@@ -0,0 +1,3 @@
+import StatusIndicator from "@ayo-run/status-indicator";
+
+console.log(StatusIndicator)

site/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "site",
+  "private": true,
+  "version": "1.0.0",
+  "description": "demo site for the status-indicator web component",
+  "scripts": {
+    "dev": "vite"
+  },
+  "keywords": [
+    "web",
+    "component"
+  ],
+  "author": "Ayo Ayco",
+  "license": "MIT",
+  "dependencies": {
+    "@ayo-run/status-indicator": "*"
+  }
+}