Is it possible to use `[target.static]` without TS? #300

omohokcoj · 2023-01-18T14:11:09Z

I'm following the v2 documentation (https://catalyst.rocks/guide-v2/targets) but the following code snippet doesn't work with JS:

import { actionable, targetable, target } from '@github/catalyst'

export default actionable(targetable(class extends HTMLElement {
  [target.static] = ['fullAddressField'] // on html template there is a data-target="controller-name.fullAddressField" attr
  
  toggleAddressField () {
    this.fullAddressField.required = false
  }
}))

Is this possible to use this feature in JS or it works only via TS?

keithamus · 2023-01-18T14:33:56Z

It should be possible. If it doesn't work it may be a bug. I will add a test shortly.

omohokcoj · 2023-01-23T20:04:34Z

@keithamus turns out with my babel configs which include @babel/plugin-proposal-class-properties the missing static keyword was causing the issue - everything works well with static [target.static] = [] to define targets.
Another solution for babel js is to use decorators plugin https://babeljs.io/docs/en/babel-plugin-proposal-decorators

keithamus · 2023-01-24T10:50:36Z

Thanks for replying back @omohokcoj! Glad you got this solved 🙌

omohokcoj · 2023-01-24T11:05:14Z

@keithamus btw looks like the issue was not with my babel setup but just in general for JS in browser without any transpiler static [target.static] = ['name'] is the correct way to define the targets (static keyword is missing in the documentation).

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <script type="importmap">
  {
    "imports": {
      "@github/catalyst": "https://ga.jspm.io/npm:@github/[email protected]/lib/index.js"
    }
  }
  </script>
  <script async src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js" crossorigin="anonymous"></script>
  <script type="module">
    import { controller, target } from "@github/catalyst";

    controller(class TestElem extends HTMLElement {
      static [target.static] = ['test'] // static keyword is required

      connectedCallback () {
        console.log(this.test)
      }
    })
  </script>
  <test-elem>
    <div data-target="test-elem.test">
    </div>
  </test-elem>
</body>
</html>

Anyway, thanks for maintaining such a useful library - github/catalyst with native web components looks much better for rails app than hotwire/stimulus 😄

keithamus · 2023-01-24T14:28:03Z

Thanks! I've fixed the docs in 173a241

omohokcoj closed this as completed Jan 23, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Is it possible to use `[target.static]` without TS? #300

Is it possible to use `[target.static]` without TS? #300

omohokcoj commented Jan 18, 2023 •

edited

Loading

keithamus commented Jan 18, 2023

omohokcoj commented Jan 23, 2023

keithamus commented Jan 24, 2023

omohokcoj commented Jan 24, 2023 •

edited

Loading

keithamus commented Jan 24, 2023

Is it possible to use [target.static] without TS? #300

Is it possible to use [target.static] without TS? #300

Comments

omohokcoj commented Jan 18, 2023 • edited Loading

keithamus commented Jan 18, 2023

omohokcoj commented Jan 23, 2023

keithamus commented Jan 24, 2023

omohokcoj commented Jan 24, 2023 • edited Loading

keithamus commented Jan 24, 2023

Is it possible to use `[target.static]` without TS? #300

Is it possible to use `[target.static]` without TS? #300

omohokcoj commented Jan 18, 2023 •

edited

Loading

omohokcoj commented Jan 24, 2023 •

edited

Loading