(fix) allow data attributes

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/element-attributes.only/expected.json

@@ -0,0 +1,10 @@
+[
+    {
+        "range": { "start": { "line": 10, "character": 4 }, "end": { "line": 10, "character": 4 } },
+        "severity": 1,
+        "source": "ts",
+        "message": "Type '{ bar: string; }' is not assignable to type 'HTMLProps<HTMLDivElement>'.\n  Property 'bar' does not exist on type 'HTMLProps<HTMLDivElement>'.",
+        "code": 2322,
+        "tags": []
+    }
+]

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/element-attributes.only/expectedv2.json

@@ -0,0 +1,18 @@
+[
+    {
+        "range": { "start": { "line": 9, "character": 5 }, "end": { "line": 9, "character": 19 } },
+        "severity": 1,
+        "source": "ts",
+        "message": "Argument of type '{ \"this-is\": string; }' is not assignable to parameter of type 'HTMLProps<HTMLDivElement>'.\n  Object literal may only specify known properties, and '\"this-is\"' does not exist in type 'HTMLProps<HTMLDivElement>'.",
+        "code": 2345,
+        "tags": []
+    },
+    {
+        "range": { "start": { "line": 10, "character": 6 }, "end": { "line": 10, "character": 9 } },
+        "severity": 1,
+        "source": "ts",
+        "message": "Argument of type '{ bar: string; }' is not assignable to parameter of type 'HTMLProps<HTMLDivElement>'.\n  Object literal may only specify known properties, and 'bar' does not exist in type 'HTMLProps<HTMLDivElement>'.",
+        "code": 2345,
+        "tags": []
+    }
+]

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/element-attributes.only/input.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    let bar = "bar";
+</script>
+
+<!-- valid -->
+<div data-foo data-bar={bar} />
+<div class={bar} />
+
+<!-- invalid -->
+<div this-is="wrong" />
+<div {bar} />

packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Attribute.ts

@@ -69,8 +69,18 @@ export function handleAttribute(
 
     const addAttribute =
         element instanceof Element
-            ? (name: TransformationArray, value?: TransformationArray) =>
-                  element.addAttribute(name, value)
+            ? (name: TransformationArray, value?: TransformationArray) => {
+                  if (attr.name.startsWith('data-')) {
+                      // any attribute prefixed with data- is valid, but we can't
+                      // type that statically, so we need this workaround
+                      name.unshift('...__sveltets_2_empty({');
+                      if (!value) {
+                          value = ['__sveltets_2_any()'];
+                      }
+                      value.push('})');
+                  }
+                  element.addAttribute(name, value);
+              }
             : (name: TransformationArray, value?: TransformationArray) => {
                   if (attr.name.startsWith('--') && attr.value !== true) {
                       // CSS custom properties are not part of the props

packages/svelte2tsx/svelte-shims.d.ts

@@ -222,6 +222,7 @@ declare function __sveltets_2_createCreateSlot<Slots = Record<string, Record<str
 declare function __sveltets_2_createComponentAny(props: Record<string, any>): Svelte2TsxComponent<any, any, any>;
 
 declare function __sveltets_2_any(...dummy: any[]): any;
+declare function __sveltets_2_empty(...dummy: any[]): {};
 
 declare function __sveltets_2_cssProp(prop: Record<string, any>): {};
 

packages/svelte2tsx/test/htmlx2jsx/samples/attribute-data/expected.jsx

@@ -0,0 +1 @@
+<><div data-foo={true} data-bare data-bar="to" /></>

packages/svelte2tsx/test/htmlx2jsx/samples/attribute-data/input.svelte

@@ -0,0 +1 @@
+<div data-foo={true} data-bare data-bar="to" />