@splendidlabz/utils 1.5.0 → 1.6.0

package/node/sanitize.spec.js

@@ -0,0 +1,142 @@
+import { describe, expect, it } from 'vitest'
+import { sanitize } from './sanitize.js'
+
+describe('node sanitize', () => {
+  describe('sanitize', () => {
+    it('removes script tags', () => {
+      const input = '<script>alert("xss")</script>Hello'
+      expect(sanitize(input)).toBe('Hello')
+    })
+
+    it('allows safe HTML tags', () => {
+      const input = '<p>Hello <b>World</b></p>'
+      expect(sanitize(input, { allowedTags: ['b'] })).toBe('Hello <b>World</b>')
+    })
+
+    it('sanitizes unsafe attributes', () => {
+      const input = '<a href="javascript:alert(1)">Click me</a>'
+      expect(
+        sanitize(input, {
+          allowedTags: ['a'],
+          allowedAttributes: { a: ['href'] },
+        }),
+      ).toBe('<a>Click me</a>')
+    })
+
+    it('allows safe attributes', () => {
+      const input = '<a href="https://example.com">Safe link</a>'
+      expect(
+        sanitize(input, {
+          allowedTags: ['a'],
+          allowedAttributes: { a: ['href'] },
+        }),
+      ).toBe('<a href="https://example.com">Safe link</a>')
+    })
+
+    it('sanitizes HTML in string values', () => {
+      const input = {
+        name: '<script>alert("xss")</script>John',
+        bio: '<p>Hello <b>World</b> <script>alert("xss")</script></p>',
+        link: '<a href="javascript:alert(1)">Click me</a>',
+        safeLink: '<a href="https://example.com">Safe link</a>',
+      }
+
+      const expected = {
+        name: 'John',
+        bio: 'Hello <b>World</b> ',
+        link: '<a>Click me</a>',
+        safeLink: '<a href="https://example.com">Safe link</a>',
+      }
+
+      expect(
+        sanitize(input, {
+          allowedTags: ['b', 'i', 'em', 'strong', 'a'],
+          allowedAttributes: { a: ['href'] },
+        }),
+      ).toEqual(expected)
+    })
+
+    it('sanitizes nested objects with HTML', () => {
+      const input = {
+        user: {
+          name: '<script>alert("xss")</script>John',
+          profile: {
+            bio: '<p>Hello <b>World</b></p>',
+            links: [
+              '<a href="javascript:alert(1)">Bad</a>',
+              '<a href="https://good.com">Good</a>',
+            ],
+          },
+        },
+      }
+
+      const expected = {
+        user: {
+          name: 'John',
+          profile: {
+            bio: 'Hello <b>World</b>',
+            links: ['<a>Bad</a>', '<a href="https://good.com">Good</a>'],
+          },
+        },
+      }
+
+      expect(
+        sanitize(input, {
+          allowedTags: ['b', 'i', 'em', 'strong', 'a'],
+          allowedAttributes: { a: ['href'] },
+        }),
+      ).toEqual(expected)
+    })
+
+    it('preserves non-string values and sanitizes arrays correctly', () => {
+      const input = {
+        name: '<script>alert("xss")</script>John',
+        age: 25,
+        active: true,
+        email: null,
+        role: undefined,
+        tags: ['<script>alert(1)</script>admin', 'user'],
+        numbers: [1, 2, 3],
+        mixed: ['<b>bold</b>', 42, null, '<script>alert(1)</script>text'],
+      }
+
+      const expected = {
+        name: 'John',
+        age: 25,
+        active: true,
+        email: null,
+        role: undefined,
+        tags: ['admin', 'user'],
+        numbers: [1, 2, 3],
+        mixed: ['<b>bold</b>', 42, null, 'text'],
+      }
+
+      expect(
+        sanitize(input, {
+          allowedTags: ['b', 'i', 'em', 'strong', 'a'],
+          allowedAttributes: { a: ['href'] },
+        }),
+      ).toEqual(expected)
+    })
+
+    it('allows custom sanitizer options', () => {
+      const input = {
+        content: '<p>Hello <span>World</span> <script>alert(1)</script></p>',
+      }
+
+      // Test with custom allowed tags
+      const withSpan = sanitize(input, {
+        allowedTags: ['b', 'i', 'em', 'strong', 'a', 'span'],
+        allowedAttributes: { a: ['href'] },
+      })
+      expect(withSpan.content).toBe('Hello <span>World</span> ')
+
+      // Test with no allowed tags
+      const noTags = sanitize(input, {
+        allowedTags: [],
+        allowedAttributes: { a: ['href'] },
+      })
+      expect(noTags.content).toBe('Hello World ')
+    })
+  })
+})

package/package.json

@@ -1,35 +1,60 @@
 {
   "name": "@splendidlabz/utils",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "",
   "type": "module",
   "sideEffects": false,
   "exports": {
-    ".": "./lib/index.js",
-    "./lib/*": "./lib/*.js",
-    "./dom": "./dom/index.js",
-    "./dom/*": "./dom/*.js",
-    "./actions": "./actions/index.js",
-    "./actions/*": "./actions/*.js",
-    "./node": "./node/index.js",
-    "./node/*": "./node/*.js"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./lib/index.js"
+    },
+    "./lib/*": {
+      "types": "./dist/lib/*.d.ts",
+      "import": "./lib/*.js"
+    },
+    "./dom": {
+      "types": "./dist/dom/index.d.ts",
+      "import": "./dom/index.js"
+    },
+    "./dom/*": {
+      "types": "./dist/dom/*.d.ts",
+      "import": "./dom/*.js"
+    },
+    "./node": {
+      "types": "./dist/node/index.d.ts",
+      "import": "./node/index.js"
+    },
+    "./node/*": {
+      "types": "./dist/node/*.d.ts",
+      "import": "./node/*.js"
+    }
   },
   "scripts": {
     "lint": "eslint . --fix",
-    "test": "vitest run",
-    "test:watch": "vitest"
+    "test": "npm run type-check && vitest run",
+    "test:watch": "vitest",
+    "type-check": "tsc --noEmit",
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
   },
   "author": "Zell Liew <zellwk@gmail.com>",
   "dependencies": {
+    "deep-eql": "^5.0.2",
     "dompurify": "^3.2.4",
     "glob-promise": "^6.0.7",
+    "marked": "^15.0.7",
+    "marked-gfm-heading-id": "^4.1.1",
+    "marked-mangle": "^1.1.10",
     "pluralize": "^8.0.0",
+    "sanitize-html": "^2.17.0",
     "statuses": "^2.0.1"
   },
   "devDependencies": {
-    "@splendidlabz/eslint-config": "*",
+    "@splendidlabz/eslint-config": "2.1.0",
     "jsdom": "^26.0.0",
     "np": "^10.2.0",
-    "vitest": "^3.0.7"
+    "typescript": "^5.4.2",
+    "vitest": "^3.1.1"
   }
 }

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowJs": true,
+    "checkJs": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "./dist",
+    "strict": false,
+    "noImplicitAny": false,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": false,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["lib/**/*", "dom/**/*", "node/**/*"],
+  "exclude": ["node_modules", "**/*.test.js", "**/*.spec.js"]
+} 

package/.eslintrc.cjs

@@ -1,3 +0,0 @@
-module.exports = {
-  extends: ['@splendidlabz/eslint-config'],
-}

package/.turbo/turbo-lint.log

@@ -1,10 +0,0 @@
-
-> @splendidlabs/utils@1.0.3 lint
-> eslint . --fix
-
-
-/Users/zellwk/projects/@splendidlabs/packages/utils/lib/index.test.js
-  4:10  error  'expect' is defined but never used  no-unused-vars
-
-✖ 1 problem (1 error, 0 warnings)
-

package/.turbo/turbo-test.log

@@ -1,10 +0,0 @@
-
-> @splendidlabs/utils@1.0.3 test
-> vitest run
-
-sh: vitest: command not found
-npm ERR! Lifecycle script `test` failed with error: 
-npm ERR! Error: command failed 
-npm ERR!   in workspace: @splendidlabs/utils@1.0.3 
-npm ERR!   at location: /Users/zellwk/projects/@splendidlabs/packages/utils 
-

package/actions/intersection-observer.js

@@ -1,37 +0,0 @@
-// See https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#options for options
-const options = {}
-
-export function intersectionObserver(node, options) {
-  const { callback, opts } = options
-  const observer = new IntersectionObserver(observerFn, opts)
-
-  function observerFn(entries, observer) {
-    entries.forEach(entry => {
-      for (const entry of entries) {
-        // Needs testing to see what's in entry
-        if (callback) callback({ node, entry, observer })
-        else {
-          node.dispatchEvent(
-            new CustomEvent('intersect', {
-              detail: { node, entry, observer },
-            }),
-          )
-        }
-      }
-    })
-  }
-
-  observer.observe(node)
-
-  return {
-    observer,
-    disconnect() {
-      observer.disconnect()
-    },
-
-    // Destroy is used for Svelte actions
-    destroy() {
-      observer.disconnect()
-    },
-  }
-}

package/actions/masonry.js

@@ -1,75 +0,0 @@
-import { getChildrenElements, mediaLoaded } from '../dom'
-
-import { resizeObserver } from './resize-observer'
-
-export async function masonry(node) {
-  if (nativeMasonrySupport(node)) return
-
-  const colGap = parseFloat(getComputedStyle(node).columnGap)
-  const items = getChildrenElements(node)
-
-  node.style.setProperty('row-gap', '1px', 'important')
-  node.style.gridAutoRows = '0px'
-
-  try {
-    await mediaLoaded(node)
-  } catch (e) {}
-
-  layout({ colGap, items })
-
-  const obs = resizeObserver(node, {
-    async callback(opts) {
-      layout({ colGap, items })
-    },
-  })
-
-  async function layout({ colGap, items }) {
-    items.forEach(item => {
-      const ib = item.getBoundingClientRect()
-      item.style.gridRowEnd = `span ${Math.round(ib.height + colGap)}`
-    })
-  }
-
-  return {
-    destroy() {
-      obs.disconnect()
-    },
-  }
-}
-
-// export async function masonry(node) {
-//   if (typeof window === 'undefined') return
-//   if (nativeMasonrySupport(node)) return
-
-//   let items
-//   let gap
-
-//   node.style.setProperty('row-gap', '1px', 'important')
-//   node.style.gridAutoRows = '0px'
-//   // await mediaLoaded(node)
-
-//   const obs = resizeObserver(node, {
-//     async callback(opts) {
-//       items = getChildrenElements(node)
-//       gap = parseFloat(getComputedStyle(node).columnGap)
-//       layout(node)
-//     },
-//   })
-
-//   async function layout() {
-//     items.forEach(item => {
-//       const itemBox = item.getBoundingClientRect()
-//       // item.style.gridRowEnd = `span ${Math.round(itemBox.height + gap)}`
-//     })
-//   }
-
-//   return {
-//     destroy() {
-//       obs.disconnect()
-//     },
-//   }
-// }
-
-function nativeMasonrySupport(node) {
-  return getComputedStyle(node).gridTemplateRows === 'masonry'
-}

package/actions/mutation-observer.js

@@ -1,42 +0,0 @@
-/* eslint-env browser */
-// https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe
-
-// These are simply options that will often be used. Check the docs for other options.
-const defaultOptions = {
-  attributes: false,
-  childList: false,
-  subtree: false,
-}
-
-export function mutationObserver(node, options) {
-  options = { ...defaultOptions, ...options }
-  const { callback, ...opts } = options
-  const observer = new MutationObserver(observerFn)
-
-  function observerFn(entries) {
-    for (const entry of entries) {
-      if (callback) callback({ node, entry, observer })
-      else {
-        node.dispatchEvent(
-          new CustomEvent('mutate', {
-            detail: { node, entry, observer },
-          }),
-        )
-      }
-    }
-  }
-
-  if (node === window) node = document.body
-  observer.observe(node, opts)
-
-  return {
-    disconnect() {
-      observer.disconnect()
-    },
-
-    // Destroy is used for Svelte actions
-    destroy() {
-      observer.disconnect()
-    },
-  }
-}

package/actions/resize-observer.js

@@ -1,33 +0,0 @@
-/* eslint-env browser */
-export function resizeObserver(node, options) {
-  // We set the option here to prevent observer from being created unless necessary.
-  options = { observe: true, ...options }
-  if (!options.observe) return
-
-  const observer = new ResizeObserver(observerFn)
-
-  function observerFn(entries) {
-    for (const entry of entries) {
-      if (options.callback) options.callback({ node, entry, entries, observer })
-      else {
-        node.dispatchEvent(
-          new CustomEvent('resize-obs', {
-            detail: { node, entry, entries, observer },
-          }),
-        )
-      }
-    }
-  }
-
-  observer.observe(node)
-
-  return {
-    disconnect() {
-      observer.unobserve(node)
-    },
-
-    destroy() {
-      observer.unobserve(node)
-    },
-  }
-}

package/lib/index.test.js

@@ -1,9 +0,0 @@
-// Possible to test???
-import * as test from './index.js'
-
-import { expect, it } from 'vitest'
-
-it('Import Test', () => {
-  console.log(test)
-  console.log('hello')
-})