yippee.fun
Precise DOM morphing
morphing
typescript
dom
0.0.3
joel.drapper.me
+11
-14
+8
-12
README.md
+8
-12
README.md
···
4
4
5
5
## Why are we doing this?
6
6
7
-
We were massively impressed by what [HTMZ](https://leanrada.com/htmz/) made possible in just 166 bytes, and we think there’s huge potential combining the HTMZ iframe proxy technique with a tiny DOM morphing function. Our goal is to combine this into a new powerful way to build web applications.
7
+
We were massively impressed by what HTMZ made possible in just 166 bytes, and we think there’s huge potential combining the HTMZ iframe proxy technique with a tiny DOM morphing function. Our goal is to combine this into a new powerful way to build web applications.
8
8
9
9
There are three parts:
10
10
11
-
1. iframe proxies for `prepend`, `append` and `morph` operations, targeted by normal HTML links and forms;
11
+
1. iframe proxies for `prepend`, `append`, `morph` and `replace` operations, targeted by normal HTML links and forms;
12
12
2. a tiny DOM morphing function that can handle complex cases;
13
13
3. a protocol for requesting the server return a specific fragment of a view by DOM id.
14
14
15
15
Initially, we will build support for rendering fragments into [phlex](https://github.com/phlex-ruby/phlex) and [phlex-rails](https://github.com/phlex-ruby/phlex-rails).
16
16
17
-
## Current status
18
-
19
-
We have a basic sketch of the morphing function in `src/morphlex.ts` that can handle simple cases. Now, we’re copying tests from [Morphdom](https://github.com/patrick-steele-idem/morphdom), [Idiomorph](https://github.com/bigskysoftware/idiomorph), [Alpine Morph](https://github.com/alpinejs/alpine/tree/main/packages/morph), and [nanomorph](https://github.com/choojs/nanomorph).
20
-
21
-
## Run tests
22
-
23
-
- `npm install`
24
-
- `npm watch`
25
-
- in another tab `npm run "test:watch"`
26
-
27
17
## Usage
28
18
29
19
```javascript
···
31
21
32
22
morph(currentNode, guideNode);
33
23
```
24
+
25
+
## Run tests
26
+
27
+
- `npm install`
28
+
- `npm watch`
29
+
- in another tab `npm run "test:watch"`
+3
-2
package.json
+3
-2
package.json
···
1
1
{
2
2
"name": "morphlex",
3
-
"version": "0.0.2",
3
+
"version": "0.0.3",
4
4
"type": "module",
5
5
"description": "Morphlex is an attempt to create a DOM morphing function in less than 100 lines of code.",
6
6
"main": "dist/morphlex.js",
···
12
12
"test:watch": "npm run test -- --watch",
13
13
"lint": "eslint ./src",
14
14
"minify": "terser dist/morphlex.js -o dist/morphlex.min.js -c -m --module",
15
-
"prepare": "npm run build && npm run minify"
15
+
"prepare": "npm run build && npm run minify",
16
+
"ship": "npm run prepare && npm run test && npm run lint && npm publish"
16
17
},
17
18
"author": "Joel Drapper",
18
19
"license": "MIT",