perf: avoid using dataset entirely

danielroe · danielroe · commit d75b83f0b7a3 · 2022-02-23T00:24:15.000Z
diff --git a/src/index.ts b/src/index.ts
@@ -5,22 +5,18 @@ export const BindOnceDirective: Directive = {
   created(el, binding) {
     for (const key in binding.value) {
       const k = kebabCase(key)
-      el.setAttribute(k, el.dataset[k] || binding.value[key])
+      el.setAttribute(k, el.getAttribute(k) || binding.value[key])
     }
   },
   getSSRProps(binding) {
-    if (!binding.value) {
-      return {}
-    }
+    /* c8 ignore next */
+    if (!binding.value) return {}
 
     return Object.fromEntries(
-      Object.entries(binding.value).flatMap(([key, value]) => {
-        const k = kebabCase(key)
-        return [
-          [k, value],
-          [`data-${k}`, value],
-        ]
-      })
+      Object.entries(binding.value).map(([key, value]) => [
+        kebabCase(key),
+        value,
+      ])
     )
   },
 }
diff --git a/test/index.spec.ts b/test/index.spec.ts
@@ -58,12 +58,12 @@ describe('directive', () => {
     app.directive('bind-once', BindOnceDirective)
     const result = await renderToString(app)
     expect(result).toBe(
-      `<div id="test-value" data-id="test-value" num="42" data-num="42" bool="true" data-bool="true" camel-case="camel" data-camel-case="camel"></div>`
+      `<div id="test-value" num="42" bool="true" camel-case="camel"></div>`
     )
   })
 
   it('hydrates server-rendered data properly', async () => {
-    const body = `<body id="app"><div id="test-value" data-id="test-value" num="42" data-num="42" bool="true" data-bool="true" camel-case="camel" data-camel-case="camel"></div></body>`
+    const body = `<body id="app"><div id="test-value" num="42" bool="true" camel-case="camel"></div></body>`
     const html = `<html>${body}</html>`
     document.write(html)
     const app = createSSRApp({
