Comments (3)
The lite version does not include an HTML parser, so you will need to precompile the string ahead of time using the Babel plugin. Alternatively, you can use createTree
to specify the tree.
innerHTML(someNode, createTree('#text', 'Some text'));
from diffhtml.
Alright, that makes some sense to me.
My use-case for diffhtml is to update a HTMLDivElement's innerHTML
with either a static HTML string (which I am currently assigning to my node's node.innerHTML
directly), or a ReactElement produced by vanilla React 16ish. Would the cheapest way to go about doing this be to use diffhtml/lite
plus the React VDom conversion code in https://github.com/tbranyen/diffhtml/blob/master/packages/diffhtml-react-compat/lib/index.js ?
I don't need synthetic events, components, etc - what would you suggest as a direction for me? Is there another library that you're aware of that will diff actual DOM nodes against an innerHTML string and/or a VDom tree? Your library was the only one I found from some cursory Googling.
The other thing on my wishlist is a way to turn off MutationObserver, since I will only call diffhtml.innerHTML
on nodes I know to be dirty.
Thanks 😃
from diffhtml.
-
Using strings will require parsing into some kind of object structure, so lite won't work for that, you'll need the parser from the core build. To support React elements and not components, you could do a transformation to put them into the correct shape:
{ nodeName: string, attributes: object, childNodes: array }
. -
As for diffing actual DOM nodes, I'm not entirely sure, maybe morphdom could aid your search: https://github.com/patrick-steele-idem/morphdom.
-
We don't have a way to turn off the mutation observer atm, but it's possible to implement that.
from diffhtml.
Related Issues (20)
- Issues with createState HOT 1
- More tests for babel transform plugin
- DevTools
- React compat layer HOT 1
- executeScripts does not work in Firefox HOT 8
- Function component: how to use props as slot like custom component? HOT 27
- Components do not mount if missing a return value HOT 1
- delete in removeAttribute causes TypeError HOT 7
- diffhtml: `process` is not defined HOT 6
- Tracking new HTML parser work HOT 3
- Cannot interpolate string attributes directly HOT 1
- createSideEffect runs on re-render even if already mounted HOT 3
- Parser bug where multiple elements on a single line fails
- Attributes without values breaks the parser HOT 3
- Can't run other packages with core using Deno HOT 2
- setHTML
- diffhtml.org is down HOT 6
- innerHTML fails to diff element when its children have been diffed previously HOT 5
- `window.diff` undefined on old iPad 9.3.5 Safari HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from diffhtml.