Merge branch 'main' into marks

Author: keithamus

package.json

@@ -53,7 +53,7 @@
     {
       "path": "lib/index.js",
       "import": "{controller, attr, target, targets}",
-      "limit": "1.64kb"
+      "limit": "1.66kb"
     }
   ]
 }

src/dasherize.ts

@@ -1,6 +1,14 @@
 export const dasherize = (str: unknown): string =>
-  String(str)
+  String(typeof str === 'symbol' ? str.description : str)
     .replace(/([A-Z]($|[a-z]))/g, '-$1')
     .replace(/--/g, '-')
     .replace(/^-|-$/, '')
     .toLowerCase()
+
+export const mustDasherize = (str: unknown, type = 'property'): string => {
+  const dashed = dasherize(str)
+  if (!dashed.includes('-')) {
+    throw new DOMException(`${type}: ${String(str)} is not a valid ${type} name`, 'SyntaxError')
+  }
+  return dashed
+}

test/dasherize.ts

@@ -8,10 +8,11 @@ describe('dasherize', () => {
     ['FooBar', 'foo-bar'],
     ['autofocusWhenReady', 'autofocus-when-ready'],
     ['URLBar', 'url-bar'],
-    ['ClipX', 'clip-x']
+    ['ClipX', 'clip-x'],
+    [Symbol('helloWorld'), 'hello-world']
   ]
 
   tests.map(([input, output]) =>
-    it(`transforms ${input} to ${output}`, () => expect(dasherize(input)).to.equal(output))
+    it(`transforms ${String(input)} to ${output}`, () => expect(dasherize(input)).to.equal(output))
   )
 })

test/findtarget.ts

@@ -0,0 +1,98 @@
+import {expect, fixture, html} from '@open-wc/testing'
+import {target, targets} from '../src/target.js'
+import {controller} from '../src/controller.js'
+
+describe('Targetable', () => {
+  @controller
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  class TargetTestElement extends HTMLElement {
+    @target foo
+    bar = 'hello'
+    @target baz
+    @target qux
+    @target shadow
+
+    @target bing
+    @targets foos
+    bars = 'hello'
+    @target quxs
+    @target shadows
+  }
+
+  let instance
+  beforeEach(async () => {
+    instance = await fixture(html`<target-test>
+      <target-test>
+        <div id="el1" data-target="target-test.barfoo target-test.foobar"></div>
+        <div id="el2" data-target="target-test.foo" data-targets="target-test.foos"></div>
+        <div id="el3" data-target="target-test.bing"></div>
+      </target-test>
+      <div id="el4" data-target="target-test.foo" data-targets="target-test.foos"></div>
+      <div id="el5" data-target="target-test.baz" data-targets="target-test.foos"></div>
+      <div id="el6" data-target="target-test.bar target-test.bing"></div>
+      <div id="el7" data-target="target-test.bazbaz"></div>
+      <div id="el8" data-target="other-target.qux target-test.qux"></div>
+    </target-test>`)
+  })
+
+  describe('target', () => {
+    it('returns the first element where closest tag is the controller', async () => {
+      expect(instance).to.have.property('foo').exist.with.attribute('id', 'el4')
+      expect(instance.querySelector('target-test')).to.have.property('foo').exist.with.attribute('id', 'el2')
+    })
+
+    it('does not assign to non-target decorated properties', async () => {
+      expect(instance).to.have.property('bar', 'hello')
+    })
+
+    it('returns the first element that has the exact target name', async () => {
+      expect(instance).to.have.property('baz').exist.with.attribute('id', 'el5')
+    })
+
+    it('returns target when there are mutliple target values', async () => {
+      expect(instance).to.have.property('bing').exist.with.attribute('id', 'el6')
+    })
+
+    it('returns targets when there are mutliple target values with different controllers', async () => {
+      expect(instance).to.have.property('qux').exist.with.attribute('id', 'el8')
+    })
+
+    it('returns targets from the shadowRoot, if available', async () => {
+      instance.attachShadow({mode: 'open'})
+      const el = document.createElement('div')
+      el.setAttribute('data-target', 'target-test.shadow')
+      instance.shadowRoot.appendChild(el)
+      expect(instance).to.have.property('shadow', el)
+    })
+
+    it('prioritises shadowRoot targets over others', async () => {
+      instance.attachShadow({mode: 'open'})
+      const shadowEl = document.createElement('div')
+      shadowEl.setAttribute('data-target', 'target-test.foo')
+      instance.shadowRoot.appendChild(shadowEl)
+      expect(instance).to.have.property('foo', shadowEl)
+    })
+  })
+
+  describe('targets', () => {
+    it('returns all elements where closest tag is the controller', async () => {
+      expect(instance).to.have.property('foos').with.lengthOf(2)
+      expect(instance).to.have.nested.property('foos[0]').with.attribute('id', 'el4')
+      expect(instance).to.have.nested.property('foos[1]').with.attribute('id', 'el5')
+    })
+
+    it('returns all elements inside a shadow root', async () => {
+      instance.attachShadow({mode: 'open'})
+      const els = [document.createElement('div'), document.createElement('div'), document.createElement('div')]
+      for (const el of els) el.setAttribute('data-targets', 'target-test.foos')
+      instance.shadowRoot.append(...els)
+
+      expect(instance).to.have.property('foos').with.lengthOf(5)
+      expect(instance).to.have.nested.property('foos[0]', els[0])
+      expect(instance).to.have.nested.property('foos[1]', els[1])
+      expect(instance).to.have.nested.property('foos[2]', els[2])
+      expect(instance).to.have.nested.property('foos[3]').with.attribute('id', 'el4')
+      expect(instance).to.have.nested.property('foos[4]').with.attribute('id', 'el5')
+    })
+  })
+})

test/target.ts

@@ -2,5 +2,5 @@ import {esbuildPlugin} from '@web/dev-server-esbuild'
 
 export default {
   files: ['test/*'],
-  plugins: [esbuildPlugin({ts: true})]
+  plugins: [esbuildPlugin({ts: true, target: 'es2020'})]
 }