Skip to content

Commit 85fabc9

Browse files
marcorothmarcoroth
committed
Initial commit
0 parents  commit 85fabc9

File tree

9 files changed

+2076
-0
lines changed

9 files changed

+2076
-0
lines changed

‎.gitignore‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
*.tgz
2+
*.tsbuildinfo
3+
*.log
4+
*~
5+
6+
/dist
7+
node_modules/
8+
9+
yarn-error.log
10+
11+
.DS_Store
12+
.rollup.cache

‎.npmignore‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.babelrc
2+
.babelrc.js
3+
.DS_Store
4+
.gitignore
5+
.yarn.lock
6+
7+
*.log
8+
*.tsbuildinfo
9+
10+
README.md
11+
rollup.config.js
12+
tsconfig.json
13+
webpack.config.js
14+
yarn-error.log
15+
16+
/.git
17+
/.github
18+
19+
/node_modules
20+
/playground
21+
/src

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2022 Marco Roth
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
# Turbo Morph
2+
3+
`turbo-morph` is a [morphdom](https://github.com/patrick-steele-idem/morphdom) integration for [Turbo Streams](https://turbo.hotwired.dev/reference/streams). It provides a new Turbo Stream `morph` action.
4+
5+
Note: Requires Turbo **7.2+**
6+
7+
## Getting Started
8+
9+
```bash
10+
yarn add turbo-morph
11+
```
12+
13+
```diff
14+
// application.js
15+
import * as Turbo from '@hotwired/turbo'
16+
17+
+import { registerMorph } from 'turbo-morph'
18+
+registerMorph()
19+
```
20+
21+
## Example
22+
23+
```html
24+
<turbo-stream action="morph" target="body">
25+
<template>
26+
<h1>This is the new body</h1>
27+
</template>
28+
</turbo-stream>
29+
```
30+
31+
### `children-only` option
32+
33+
[`morphdom` exposes a `childrenOnly` option](https://github.com/patrick-steele-idem/morphdom#morphdomfromnode-tonode-options--node) that can be passed to a morph call.
34+
35+
With Turbo Streams you can apply this option by adding the `[children-only]` attribute to your `<turbo-stream>` element.
36+
37+
```html
38+
<turbo-stream action="morph" target="body" children-only>
39+
...
40+
</turbo-stream>
41+
```
42+
43+
## Usage with Rails
44+
45+
TBD
46+
47+
48+
## Acknowledgments
49+
50+
tubro-morph is [MIT-licensed](LICENSE) open-source software from [Marco Roth](https://github.com/marcoroth).
51+
52+
Turbo is [MIT-licensed](https://github.com/hotwired/turbo/blob/main/MIT-LICENSE) open-source software from [Basecamp](https://basecamp.com/).
53+
54+
morphdom is [MIT-licensed](https://github.com/patrick-steele-idem/morphdom/blob/master/LICENSE) open-source software from [Patrick Steele-Idem](https://github.com/patrick-steele-idem)

‎package.json‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"name": "turbo-morph",
3+
"version": "0.1.0-beta1",
4+
"description": "Morphdom integration for Turbo Streams",
5+
"main": "dist/index.js",
6+
"module": "dist/index.js",
7+
"unpkg": "dist/index.umd.js",
8+
"types": "dist/types/index.d.ts",
9+
"author": "Marco Roth",
10+
"license": "MIT",
11+
"repository": "https://github.com/marcoroth/turbo-morph",
12+
"sideEffects": false,
13+
"scripts": {
14+
"prebuild": "yarn clean",
15+
"build": "tsc --noEmit false --declaration true --emitDeclarationOnly true --outDir dist/types --jsx react && rollup -c",
16+
"watch": "rollup -wc",
17+
"dev": "concurrently 'yarn run watch' 'yarn run start'",
18+
"clean": "rimraf dist",
19+
"prerelease": "yarn build"
20+
},
21+
"devDependencies": {
22+
"@hotwired/turbo": "^7.2.0-beta.1",
23+
"@rollup/plugin-node-resolve": "^13.0.5",
24+
"@rollup/plugin-typescript": "^8.2.5",
25+
"concurrently": "^7.1.0",
26+
"rimraf": "^3.0.2",
27+
"rollup": "^2.57.0",
28+
"rollup-plugin-filesize": "^9.1.1",
29+
"rollup-plugin-terser": "^7.0.2",
30+
"sourcemap": "^0.1.0",
31+
"tslib": "^2.3.1",
32+
"typescript": "^3.9.7",
33+
"morphdom": "^2.6.1"
34+
},
35+
"peerDependencies": {
36+
"@hotwired/turbo": ">= 7.1",
37+
"morphdom": ">= 2.6"
38+
}
39+
}

‎rollup.config.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import resolve from '@rollup/plugin-node-resolve'
2+
import typescript from '@rollup/plugin-typescript'
3+
import filesize from 'rollup-plugin-filesize'
4+
import { terser } from 'rollup-plugin-terser'
5+
6+
import { version } from './package.json'
7+
const year = new Date().getFullYear()
8+
const banner = `/*\TurboMorph ${version}\n*/`
9+
10+
const minify = () => {
11+
return terser({
12+
mangle: true,
13+
compress: true
14+
})
15+
}
16+
17+
export default [
18+
{
19+
input: 'src/index.ts',
20+
external: [
21+
'@hotwired/turbo'
22+
],
23+
output: [
24+
{
25+
name: 'TurboMorph',
26+
file: 'dist/index.umd.js',
27+
format: 'umd',
28+
banner,
29+
globals: {
30+
'@hotwired/turbo': 'Turbo'
31+
}
32+
},
33+
{
34+
file: 'dist/index.js',
35+
format: 'es',
36+
banner
37+
}
38+
],
39+
plugins: [
40+
resolve(),
41+
typescript(),
42+
filesize(),
43+
minify()
44+
],
45+
watch: {
46+
include: 'src/**'
47+
}
48+
}
49+
]

‎src/index.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import morphdom from "morphdom"
2+
3+
import { StreamActions } from "@hotwired/turbo"
4+
5+
function morph() {
6+
const options = {
7+
// @ts-ignore
8+
childrenOnly: this.hasAttribute("children-only"),
9+
onBeforeElUpdated: () => { console.log("before"); return true },
10+
onElUpdated: () => { console.log("after") }
11+
}
12+
13+
// @ts-ignore
14+
this.targetElements.forEach(element => {
15+
// @ts-ignore
16+
morphdom(element, this.templateContent, options)
17+
})
18+
}
19+
20+
const registerMorph = () => {
21+
StreamActions.morph = morph
22+
}
23+
24+
export {
25+
morph,
26+
registerMorph
27+
}

‎tsconfig.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"compilerOptions": {
3+
"lib": ["dom", "es2015", "scripthost"],
4+
"module": "es2015",
5+
"moduleResolution": "node",
6+
"noUnusedLocals": true,
7+
"rootDir": "src",
8+
"strict": true,
9+
"target": "es2017",
10+
"removeComments": true,
11+
"outDir": "dist",
12+
"baseUrl": ".",
13+
"noEmit": false,
14+
"declaration": false,
15+
"esModuleInterop": true,
16+
"allowSyntheticDefaultImports": true,
17+
}
18+
}

0 commit comments

Comments
 (0)