Skip to content

Commit

Permalink
0.0.3
Browse files Browse the repository at this point in the history
  • Loading branch information
joeldrapper committed Feb 25, 2024
1 parent 41ecb85 commit 1fd2d07
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 14 deletions.
20 changes: 8 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,30 +4,26 @@ Morphlex is an attempt to create a DOM morphing function in less than 100 lines

## Why are we doing this?

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.
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.

There are three parts:

1. iframe proxies for `prepend`, `append` and `morph` operations, targeted by normal HTML links and forms;
1. iframe proxies for `prepend`, `append`, `morph` and `replace` operations, targeted by normal HTML links and forms;
2. a tiny DOM morphing function that can handle complex cases;
3. a protocol for requesting the server return a specific fragment of a view by DOM id.

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).

## Current status

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).

## Run tests

- `npm install`
- `npm watch`
- in another tab `npm run "test:watch"`

## Usage

```javascript
import { morph } from "morphlex";

morph(currentNode, guideNode);
```

## Run tests

- `npm install`
- `npm watch`
- in another tab `npm run "test:watch"`
5 changes: 3 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "morphlex",
"version": "0.0.2",
"version": "0.0.3",
"type": "module",
"description": "Morphlex is an attempt to create a DOM morphing function in less than 100 lines of code.",
"main": "dist/morphlex.js",
Expand All @@ -12,7 +12,8 @@
"test:watch": "npm run test -- --watch",
"lint": "eslint ./src",
"minify": "terser dist/morphlex.js -o dist/morphlex.min.js -c -m --module",
"prepare": "npm run build && npm run minify"
"prepare": "npm run build && npm run minify",
"ship": "npm run prepare && npm run test && npm run lint && npm publish"
},
"author": "Joel Drapper",
"license": "MIT",
Expand Down

0 comments on commit 1fd2d07

Please sign in to comment.