https://github.com/marcoroth/stimulus-render

[PoC] HTML rendering mechanism for Stimulus Controllers
https://github.com/marcoroth/stimulus-render

dom html javascript jsx stimulus typescript

Last synced: 18 days ago
JSON representation

[PoC] HTML rendering mechanism for Stimulus Controllers

• Host: GitHub
• URL: https://github.com/marcoroth/stimulus-render
• Owner: marcoroth
• License: mit
• Created: 2022-01-19T00:08:02.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2022-09-04T13:33:19.000Z (over 2 years ago)
• Last Synced: 2024-12-31T08:52:09.876Z (23 days ago)
• Topics: dom, html, javascript, jsx, stimulus, typescript
• Language: TypeScript
• Homepage:
• Size: 194 KB
• Stars: 21
• Watchers: 3
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Stimulus Render

## Getting Started

```bash

yarn add stimulus-render

```

### Counter Example

```html



```


```js

// app/javascript/controllers/counter_controller.js

import { Controller } from '@hotwired/stimulus'

import { useRender, h } from 'stimulus-render'

/** @jsx h */

export default class extends Controller {

  static values = { counter: 1 }

  connect () {

    useRender(this)

  }

  increment () {

    this.counterValue += 1

  }

  render () {

    return (

      


        

          Count: {this.counterValue}

        

      

    )

  }

}

```


### List/Item Example

```html



  


    


    


    


  



```


```js

// app/javascript/controllers/list_controller.js

import { Controller } from '@hotwired/stimulus'

import { useRender, h } from 'stimulus-render'

import { processMarkdown } from 'some-markdown-rendering-package'

/** @jsx h */

export default class extends Controller {

  static targets = ['item']

  connect () {

    useRender(this)

  }

  renderItemTarget(target) {

    return (

      

        {processMarkdown(target.dataset.value)}

      

    )

  }

}

```