feat: inject css from js

kevinchappell · kevinchappell · commit cf5eab810cbd · 2024-11-13T15:25:08.000-08:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -67,7 +67,6 @@
     "lint-staged": "^15.2.10",
     "semantic-release": "^24.1.3",
     "vite": "^5.4.9",
-    "vite-css-modules": "^1.6.0",
     "vite-plugin-banner": "^0.8.0",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-dts": "^4.3.0",
@@ -116,5 +115,8 @@
         ]
       ]
     }
+  },
+  "dependencies": {
+    "vite-plugin-css-injected-by-js": "^3.5.2"
   }
 }
diff --git a/src/css/demo.css b/src/css/demo.css
@@ -13,7 +13,7 @@ body {
   padding: 2rem;
 }
 
-.tooltip-trigger {
+button {
   padding: 0.5rem 1rem;
   background: #4f46e5;
   color: white;
diff --git a/src/css/tooltip.module.css b/src/css/tooltip.module.css
@@ -1,12 +1,3 @@
-.tooltip-trigger {
-  padding: 0.5rem 1rem;
-  background: #4f46e5;
-  color: white;
-  border: none;
-  border-radius: 0.25rem;
-  cursor: pointer;
-}
-
 .tooltip {
   position: absolute;
   background: #1f2937;
diff --git a/src/css/tooltip.module.css.d.ts b/src/css/tooltip.module.css.d.ts
@@ -5,15 +5,12 @@
  * Generated by vite-css-modules
  * https://npmjs.com/vite-css-modules
  */
-const tooltipTrigger: string
 const tooltip: string
 const visible: string
 
-export { tooltipTrigger, tooltip, visible }
+export { tooltip, visible }
 
 export default {
-  'tooltip-trigger': tooltipTrigger,
-  tooltipTrigger,
   tooltip,
   visible,
 }
diff --git a/src/index.html b/src/index.html
@@ -6,30 +6,26 @@
   <meta http-equiv="X-UA-Compatible" content="chrome=1" />
   <meta name="viewport"
     content="user-scalable=no, width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
-  <meta name="description" content="Language files for formeo drag and drop form editor" />
+  <meta name="description" content="Pure JS, zero dependency tooltip" />
   <meta name="theme-color" content="#232323" />
-  <title></title>
+  <title>Tooltip</title>
 </head>
 
 <body>
   <div class="container">
-    <button class="tooltip-trigger"
-      data-tooltip="<strong>Hello!</strong><br>This is a tooltip with <em>HTML</em> content.">
+    <button data-tooltip="<strong>Hello!</strong><br>This is a tooltip with <em>HTML</em> content.">
       Hover me (center)
     </button>
 
-    <button class="tooltip-trigger" style="align-self: flex-start;"
-      data-tooltip="This tooltip will adjust its position when near the top">
+    <button style="align-self: flex-start;" data-tooltip="This tooltip will adjust its position when near the top">
       Hover me (top)
     </button>
 
-    <button class="tooltip-trigger" style="align-self: flex-end;"
-      data-tooltip="This tooltip will only show on click" data-tooltip-type="click">
+    <button style="align-self: flex-end;" data-tooltip="This tooltip will only show on click" data-tooltip-type="click">
       Click Me
     </button>
 
-    <button class="tooltip-trigger" style="align-self: flex-end;"
-      data-tooltip="This tooltip will adjust when near the bottom">
+    <button style="align-self: flex-end;" data-tooltip="This tooltip will adjust when near the bottom">
       Hover me (bottom)
     </button>
 
diff --git a/src/js/index.test.ts b/src/js/index.test.ts
@@ -18,12 +18,12 @@ describe('SmartTooltip', () => {
 
   test('should initialize with default options', () => {
     const instance = new SmartTooltip()
-    assert.equal(instance['options'].triggerName, 'tooltip')
+    assert.equal(instance.triggerName, 'data-tooltip')
   })
 
   test('should initialize with custom options', () => {
     const instance = new SmartTooltip({ triggerName: 'custom-tooltip' })
-    assert.equal(instance['options'].triggerName, 'custom-tooltip')
+    assert.equal(instance.triggerName, 'data-custom-tooltip')
   })
 
   test('should show tooltip on hover', () => {
@@ -72,7 +72,18 @@ describe('SmartTooltip', () => {
 
   test('should fit tooltip in viewport', () => {
     const instance = new SmartTooltip()
-    assert.ok(instance['fitsInViewport'](10, 10, 100, 100))
-    assert.ok(!instance['fitsInViewport'](-10, -10, 100, 100))
+    const rect: DOMRect = {
+      x: 400,
+      y: 400,
+      width: 250,
+      height: 50,
+      top: 400,
+      right: 400,
+      bottom: 400,
+      left: 400,
+      toJSON: () => ({}),
+    }
+    assert.ok(instance['fitsInViewport']({ name: 'top', x: 100, y: 100 }, rect))
+    assert.ok(!instance['fitsInViewport']({ name: 'top', x: -100, y: -100 }, rect))
   })
 })
diff --git a/src/js/index.ts b/src/js/index.ts
@@ -1,22 +1,27 @@
 import styles from '../css/tooltip.module.css'
 
-console.log(styles)
-
 interface SmartTooltipOptions {
   triggerName: string
 }
 
+interface Position {
+  name: 'top' | 'bottom' | 'left' | 'right'
+  x: number
+  y: number
+}
+
 const defaultOptions = {
   triggerName: 'tooltip',
 }
 
 export class SmartTooltip {
-  private readonly options: SmartTooltipOptions
+  readonly triggerName: string
   private readonly tooltip: HTMLDivElement
   private activeTriggerType: string | null = null
+  private readonly spacing = 12
 
   constructor(options: SmartTooltipOptions = defaultOptions) {
-    this.options = options
+    this.triggerName = `data-${options.triggerName}`
     this.tooltip = document.createElement('div')
     this.tooltip.className = styles.tooltip
     document.body.appendChild(this.tooltip)
@@ -25,89 +30,102 @@ export class SmartTooltip {
   }
 
   private setupEventListeners() {
-    const triggerName = `data-${this.options.triggerName}`
-    // Handle hover-based tooltips
-    document.addEventListener('mouseover', e => {
-      const trigger = (e.target as Element).closest(`[${triggerName}]`)
-      if (this.activeTriggerType !== 'click' && trigger?.getAttribute(`${triggerName}-type`) !== 'click') {
-        const content = trigger?.getAttribute(`${triggerName}`)
-        if (content) {
-          this.show(trigger as HTMLElement, content)
-          this.activeTriggerType = 'hover'
-        }
-      }
-    })
+    document.addEventListener('mouseover', this.handleMouseOver)
+    document.addEventListener('mouseout', this.handleMouseOut)
+    document.addEventListener('click', this.handleClick)
+    window.addEventListener('resize', this.handleResize)
+    window.addEventListener('scroll', this.handleScroll, true)
+  }
 
-    document.addEventListener('mouseout', e => {
-      const trigger = (e.target as Element).closest(`[${triggerName}]`)
-      if (this.activeTriggerType !== 'click' && trigger?.getAttribute(`${triggerName}-type`) !== 'click') {
+  private readonly handleClick = (e: Event): void => {
+    const triggerName = this.triggerName
+    const trigger = (e.target as Element).closest(`[${triggerName}][${triggerName}-type="click"]`)
+    if (trigger) {
+      if (this.isVisible()) {
         this.hide()
-      }
-    })
-
-    // Handle click-based tooltips
-    document.addEventListener('click', e => {
-      const trigger = (e.target as Element).closest(`[${triggerName}][${triggerName}-type="click"]`)
-      if (trigger) {
-        if (this.isVisible()) {
-          this.hide()
-        } else {
-          const content = trigger.getAttribute(`${triggerName}`)
-          this.show(trigger as HTMLElement, content)
-          this.activeTriggerType = 'click'
-        }
       } else {
-        this.hide()
+        const content = trigger.getAttribute(`${triggerName}`)
+        this.show(trigger as HTMLElement, content)
+        this.activeTriggerType = 'click'
+      }
+    } else {
+      this.hide()
+    }
+  }
+
+  private readonly handleMouseOver = (e: Event): void => {
+    const triggerName = this.triggerName
+    const trigger = (e.target as Element).closest(`[${triggerName}]`)
+    if (this.activeTriggerType !== 'click' && trigger?.getAttribute(`${triggerName}-type`) !== 'click') {
+      const content = trigger?.getAttribute(`${triggerName}`)
+      if (content) {
+        this.show(trigger as HTMLElement, content)
+        this.activeTriggerType = 'hover'
       }
-    })
+    }
+  }
+
+  private readonly handleMouseOut = (e: Event): void => {
+    const triggerName = this.triggerName
+    const trigger = (e.target as Element).closest(`[${triggerName}]`)
+    if (this.activeTriggerType !== 'click' && trigger?.getAttribute(`${triggerName}-type`) !== 'click') {
+      this.hide()
+    }
+  }
+
+  private readonly handleResize = (): void => {
+    if (this.isVisible()) {
+      this.hide()
+    }
+  }
+
+  private readonly handleScroll = (): void => {
+    if (this.isVisible()) {
+      this.hide()
+    }
   }
 
   private isVisible(): boolean {
     return this.tooltip.classList.contains(styles.visible)
   }
 
-  calculatePosition(trigger: Element) {
+  private calculatePosition(trigger: HTMLElement): Position {
     const triggerRect = trigger.getBoundingClientRect()
     const tooltipRect = this.tooltip.getBoundingClientRect()
-    const spacing = 12 // Space between tooltip and trigger
 
-    // Try positions in order of preference
-    const positions = [
+    const positions: Position[] = [
       {
         name: 'top',
         x: triggerRect.left + (triggerRect.width - tooltipRect.width) / 2,
-        y: triggerRect.top - tooltipRect.height - spacing,
+        y: triggerRect.top - tooltipRect.height - this.spacing,
       },
       {
         name: 'bottom',
         x: triggerRect.left + (triggerRect.width - tooltipRect.width) / 2,
-        y: triggerRect.bottom + spacing,
+        y: triggerRect.bottom + this.spacing,
       },
       {
-        name: 'right',
-        x: triggerRect.right + spacing,
+        name: 'left',
+        x: triggerRect.left - tooltipRect.width - this.spacing,
         y: triggerRect.top + (triggerRect.height - tooltipRect.height) / 2,
       },
       {
-        name: 'left',
-        x: triggerRect.left - tooltipRect.width - spacing,
+        name: 'right',
+        x: triggerRect.right + this.spacing,
         y: triggerRect.top + (triggerRect.height - tooltipRect.height) / 2,
       },
     ]
 
-    // Find first position that fits in viewport
-    for (const pos of positions) {
-      if (this.fitsInViewport(pos.x, pos.y, tooltipRect.width, tooltipRect.height)) {
-        return pos
-      }
-    }
-
-    // If no position fits perfectly, default to top
-    return positions[0]
+    return positions.find(pos => this.fitsInViewport(pos, tooltipRect)) || positions[0]
   }
 
-  fitsInViewport(x: number, y: number, width: number, height: number): boolean {
-    return x >= 0 && y >= 0 && x + width <= window.innerWidth && y + height <= window.innerHeight
+  private fitsInViewport(pos: Position, tooltipRect: DOMRect): boolean {
+    return (
+      pos.x >= 0 &&
+      pos.y >= 0 &&
+      pos.x + tooltipRect.width <= window.innerWidth &&
+      pos.y + tooltipRect.height <= window.innerHeight
+    )
   }
 
   private show(trigger: HTMLElement, content: string | null) {
@@ -124,6 +142,25 @@ export class SmartTooltip {
     this.tooltip.classList.remove(styles.visible)
     this.activeTriggerType = null
   }
+
+  public destroy(): void {
+    document.removeEventListener('mouseover', this.handleMouseOver)
+    document.removeEventListener('mouseout', this.handleMouseOut)
+    document.removeEventListener('click', this.handleClick)
+    window.removeEventListener('resize', this.handleResize)
+    window.removeEventListener('scroll', this.handleScroll, true)
+    this.tooltip.remove()
+  }
+}
+
+declare global {
+  interface Window {
+    SmartTooltip: typeof SmartTooltip
+  }
+}
+
+if (window !== undefined) {
+  window.SmartTooltip = SmartTooltip
 }
 
 export default SmartTooltip
diff --git a/vite.config.lib.ts b/vite.config.lib.ts
@@ -3,15 +3,15 @@ import { defineConfig } from 'vite'
 import type { UserConfigExport } from 'vite'
 import banner from 'vite-plugin-banner'
 import compression from 'vite-plugin-compression'
-import { patchCssModules } from 'vite-css-modules'
-
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
 import dts from 'vite-plugin-dts'
 
 import { bannerTemplate, camelCaseName, isProduction, shortName } from './env'
 
 const config: UserConfigExport = defineConfig({
   root: './',
   plugins: [
+    cssInjectedByJsPlugin(),
     banner(bannerTemplate),
     compression({
       algorithm: 'brotliCompress',
@@ -20,14 +20,12 @@ const config: UserConfigExport = defineConfig({
     dts({
       insertTypesEntry: true,
     }),
-    patchCssModules({
-      generateSourceTypes: true,
-    }),
   ],
   css: {
     modules: {
       localsConvention: 'camelCase',
-      generateScopedName: isProduction ? '[hash:base64:8]' : '[local]_[hash:base64:5]',
+      scopeBehaviour: 'local',
+      generateScopedName: isProduction ? '[hash:base64:8]' : 'st_[local]_[hash:base64:5]',
     },
   },
   build: {
@@ -55,13 +53,7 @@ const config: UserConfigExport = defineConfig({
       output: {
         banner: bannerTemplate,
         exports: 'named',
-        // intro: 'import "./src/css/tooltip.module.css";',
-        assetFileNames: assetInfo => {
-          if (assetInfo.name === 'style.css') {
-            return `${shortName}.css`
-          }
-          return `${assetInfo.name}`
-        },
+        inlineDynamicImports: true,
       },
     },
     sourcemap: isProduction ? false : 'inline',

Original file line number	Diff line number	Diff line change
`@@ -67,7 +67,6 @@`
`67`	`67`	`"lint-staged": "^15.2.10",`
`68`	`68`	`"semantic-release": "^24.1.3",`
`69`	`69`	`"vite": "^5.4.9",`
`70`		`- "vite-css-modules": "^1.6.0",`
`71`	`70`	`"vite-plugin-banner": "^0.8.0",`
`72`	`71`	`"vite-plugin-compression": "^0.5.1",`
`73`	`72`	`"vite-plugin-dts": "^4.3.0",`
`@@ -116,5 +115,8 @@`
`116`	`115`	`]`
`117`	`116`	`]`
`118`	`117`	`}`
	`118`	`+ },`
	`119`	`+ "dependencies": {`
	`120`	`+ "vite-plugin-css-injected-by-js": "^3.5.2"`
`119`	`121`	`}`
`120`	`122`	`}`
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@ body {`
`13`	`13`	`padding: 2rem;`
`14`	`14`	`}`
`15`	`15`
`16`		`-.tooltip-trigger {`
	`16`	`+button {`
`17`	`17`	`padding: 0.5rem 1rem;`
`18`	`18`	`background: #4f46e5;`
`19`	`19`	`color: white;`