• Stars
    star
    90
  • Rank 356,232 (Top 8 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 2 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Morph action for Turbo Streams

Turbo Morph

NPM Version NPM Downloads NPM Bundle Size

Getting Started

turbo-morph is a morphdom integration for Turbo Streams. It provides a new Turbo Stream morph action.

Note: Requires Turbo 7.2+

yarn add turbo-morph
// application.js
import * as Turbo from '@hotwired/turbo'

+import TurboMorph from 'turbo-morph'
+TurboMorph.initialize(Turbo.StreamActions)

Example

<turbo-stream action="morph" targets="body">
  <template>
    <body data-updated="true">
      <h1>This is the new body</h1>
    </body>
  </template>
</turbo-stream>

children-only option

morphdom exposes a childrenOnly option that can be passed to a morph call.

With Turbo Streams you can apply this option by adding the [children-only] attribute to your <turbo-stream> element.

<turbo-stream action="morph" targets="body" children-only>
  ...
</turbo-stream>

Usage with Rails

The turbo_power-rails gem ships a Rails helper for using turbo_stream.morph in your application. Check out the Getting Started section over there.

Acknowledgments

tubro-morph is MIT-licensed open-source software from Marco Roth.

Turbo is MIT-licensed open-source software from Basecamp.

morphdom is MIT-licensed open-source software from Patrick Steele-Idem

More Repositories

1

turbo_power

Power-pack for Turbo Streams
TypeScript
323
star
2

turbo_power-rails

Power-pack for Turbo Streams
Ruby
219
star
3

current.js

A tiny 🀏 library (only 410 B) that allows you to access current `<meta>` elements
TypeScript
159
star
4

stimulus-lsp

Intelligent Stimulus tooling for Visual Studio Code and Neovim
TypeScript
127
star
5

gem.sh

Beautiful documentation for any Ruby gem.
Ruby
95
star
6

hotwire.io

Community-driven documentation and resource Hub for Hotwire.
HTML
94
star
7

boxdrop

Dropbox Clone built with StimulusReflex
Ruby
76
star
8

formulus

Client-side HTML form validations based on the browser HTML Form Validation API
TypeScript
72
star
9

phlexing

Simple ERB to Phlex converter
Ruby
71
star
10

turbo-ruby

Turbo helpers without the requirement for Rails
Ruby
41
star
11

cable-streams

Extend Turbo Streams with Custom Turbo Stream Actions and CableReady operations
TypeScript
26
star
12

stimulus-parser

Statically analyze Stimulus controllers in your project.
TypeScript
25
star
13

rails7-stimulus-reflex-esbuild

Example StimulusReflex installation using Rails 7 and esbuild
Ruby
24
star
14

stimulus-render

[PoC] HTML rendering mechanism for Stimulus Controllers
TypeScript
18
star
15

type_fusion

Collaborative Ruby type sampling
Ruby
16
star
16

local-time

Modern fork of Basecamp's `local-time`
TypeScript
12
star
17

easy_enum

Turn any Ruby class in an easy to use enum.
Ruby
12
star
18

cable_ready.cr

[WIP] CableReady Crystal port
Crystal
10
star
19

dependabot-bump-together-action

GitHub Action to bump multiple dependencies with dependabot in a single pull request
Ruby
8
star
20

rubocop-stimulus_reflex

Code style checking for StimulusReflex
Ruby
8
star
21

netatmo-ruby

Ruby gem to interact with the Netatmo REST API
Ruby
7
star
22

railsbytes-cli

CLI to apply Railsbytes.com templates to your Rails application
Ruby
7
star
23

cable-streams-rails

Rails companion gem for the `cable-streams` NPM package
Ruby
6
star
24

ShortLook-WhatsApp

Show WhatsApp users' profile pictures in ShortLook when you receive a WhatsApp notification
Objective-C
5
star
25

rubocop-cable_ready

Code style checking for CableReady
Ruby
4
star
26

ShortLook-Bandsintown

Show Bandsintown artists' profile pictures in ShortLook when you receive a Bandsintown notification
Objective-C
4
star
27

shortlook-cli

ShortLook CLI for scaffoling a ShortLook Provider
Ruby
3
star
28

stimulus-blurhash

Stimulus Controller for BlurHash
JavaScript
2
star
29

ShortLook-RocketChat

Show RocketChat users' profile pictures in ShortLook when you receive a RocketChat notification
Objective-C
2
star
30

ShortLook-VK

Show VK users' profile pictures in ShortLook when you receive a VK notification
Objective-C
2
star
31

ShortLook-GitHub

Show GitHub users' profile pictures in ShortLook when you receive a GitHub notification
Objective-C
2
star
32

ShortLook-Line

Show Line users' profile pictures in ShortLook when you receive a Line notification
Objective-C
2
star
33

ShortLook-KakaoTalk

Show KakaoTalk Contact Photos in ShortLook when you receive a KakaoTalk notification
Objective-C
2
star
34

usersnap-stimulus-repro

HTML
1
star
35

rcrdshp-market-extension

Small extension for the RCRDSHP Marketplace
JavaScript
1
star
36

POC2u

Ruby
1
star
37

cable_ready-dsl

[PoC] An opinionated DSL for CableReady.
Ruby
1
star
38

spritpreisrechner-ruby

Ruby Wrapper for the e-control.at Spritpreisrechner HTTP API
Ruby
1
star
39

tankerkoenig-ruby

Ruby Wrapper for the Tankerkoenig API
Ruby
1
star
40

async-websocket-with-inactive-tab

HTML
1
star
41

ShortLook-Mixcloud

Show Mixcloud covers in ShortLook when you receive a Mixcloud notification
Objective-C
1
star
42

stimulus_reflex-form-serialize-app

Ruby
1
star
43

mirrOS_spotify

Modul zum Anzeigen des zurzeit spielenden Track auf Spotify.
PHP
1
star
44

openmensa-parsers

OpenMensa.org parsers
Ruby
1
star
45

ShortLook-LinkedIn

Show LinkedIn users' profile pictures in ShortLook when you receive a LinkedIn notification
Objective-C
1
star
46

ShortLook-Slack

Show Slack users' profile pictures in ShortLook when you receive a Slack notification
Objective-C
1
star
47

ShortLook-SteamChat

Show SteamChat Profile Pictures in ShortLook when you receive a SteamChat notification!
Objective-C
1
star
48

ShortLook-Xing

Show Xing users' profile pictures in ShortLook when you receive a Xing notification
Objective-C
1
star
49

ShortLook-Viber

Show Viber users' profile pictures in ShortLook when you receive a Viber notification
Objective-C
1
star
50

mirrOS_todoist

Dieses mirrOS Modul zeigt deine Aufgaben aus einer Todoist-Liste an.
PHP
1
star