{"id":20022229,"url":"https://github.com/lucifier129/vdom-engine","last_synced_at":"2025-05-05T01:31:23.800Z","repository":{"id":57391208,"uuid":"55902701","full_name":"Lucifier129/vdom-engine","owner":"Lucifier129","description":"Rethink and redesign React for Web","archived":false,"fork":false,"pushed_at":"2016-12-09T07:26:55.000Z","size":619,"stargazers_count":14,"open_issues_count":0,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-29T02:04:18.300Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Lucifier129.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-04-10T14:11:53.000Z","updated_at":"2016-12-09T07:26:56.000Z","dependencies_parsed_at":"2022-09-19T05:01:31.650Z","dependency_job_id":null,"html_url":"https://github.com/Lucifier129/vdom-engine","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lucifier129%2Fvdom-engine","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lucifier129%2Fvdom-engine/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lucifier129%2Fvdom-engine/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lucifier129%2Fvdom-engine/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Lucifier129","download_url":"https://codeload.github.com/Lucifier129/vdom-engine/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252423125,"owners_count":21745547,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T08:39:37.296Z","updated_at":"2025-05-05T01:31:18.791Z","avatar_url":"https://github.com/Lucifier129.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vdom-engine\nvirtual-dom engine that help everyone to build their own modern view library and user interfaces\n\nReact is awesome, but also too huge to be a view library, its way of handle props to dom is very limit and hard to extend by user. Sometimes we need a smaller and extensible virtual-dom library.\n\n# Installation\n\n```shell\nnpm install vdom-engine\n```\n\n# Getting Start\n\nvdom-engine is a react-like library, but only support `virtual-dom` and `stateless functional component`, these make it smaller and faster. Its api are the subset of React's api with a few different points.\n\n## Handle props\n\nUnlike react, vdom-engine use `directive-style` to handle its props, now it has five build-in directives, `attr|prop|on|css|hook`. The `prop in props` which did not match any directive would be ignored.\n\n```javascript\nimport React from 'vdom-engine'\nconst vdom = (\n  \u003cdiv\n    attr-class=\"my-class\"\n    prop-id=\"myId\"\n    on-click={handleClick}\n    css-width={100}\n    otherProp=\"will be ignore\"\n  /\u003e\n)\n\nReact.render(vdom, document.body) // always return undefined\n\n// use native dom api to get the dom created by vdom-engine\nlet target = documnent.body.firstElementChild\ntarget.nodeName // div\ntarget.getAttribute('class') // my-class\ntarget.id // myId\ntarget.style.width // 100px\ntarget.removeEventListener('click', handleClick, false) // remove the event\n```\n\n## Handle directives\n\nYou can use the api `addDirective` to add a new directive, and use `removeDirective` to remove one of them.\n\n```javascript\nimport React from 'vdom-engine'\n\n/**\n* when in initialize, vdom-engine use directive.attach to map propValue to dom\n* when in update\n* if  newValue is undefined or null, call directive.detach\n* else if newValue is not equal to preValue, call directive.attatch with newValue\n* propName in each method is \n*/\n\n// now jsx support a namespace attribute of http://www.w3.org/1999/xlink\nReact.addDirective('attrns', {\n  // how to use: attrns-propName={propValue}\n  attach: (elem, propName, propValue) =\u003e {\n    elem.setAttributeNS('http://www.w3.org/1999/xlink', propName, propValue)\n  },\n  detach: (elem, propName) =\u003e {\n    elem.removeAttribute(propName)\n  }\n})\n\nlet vdom = \u003cdiv attrns-test=\"test attrns\" /\u003e\n\n// remove the directive\n// React.removeDirective('attrns')\n```\n## Handle component\n\nvdom-engine support stateless functional component, the same as React.\n\n```javascript\nimport React from 'vdom-engine'\nlet MyComponent = (props) =\u003e {\n  return (\n    \u003cdiv {...props}\u003e{ props.children }\u003c/div\u003e\n  )\n}\nReact.render(\n  \u003cMyComponent prop-id=\"myId\"\u003etest children\u003c/MyComponent\u003e,\n  document.body\n)\n```\n## Handle life-cycle methods\n\nUnlike React, vdom-engine do not support stateful component(`React.Component` or `React.createClass`), but every native-tag of virtual-dom has its life-cycle, sush as `div`, `span`, `p`, etc.\n\nUse the directive 'hook-lifyCycle' like below:\n\n```javascript\nimport React from 'vdom-engine'\n\nReact.render(\n  \u003cdiv\n    hook-willMount={onWillMount}\n    hook-didMount={onDidMount}\n    hook-willUpdate={onWillUpdate}\n    hook-didUpdate={onDidUpdate}\n  \u003esome text\u003c/div\u003e,\n  document.body\n)\n\n// call onWillMount\n// call onDidMount\n\nReact.render(\n  \u003cdiv\n    hook-willMount={onWillMount}\n    hook-didMount={onDidMount}\n    hook-willUpdate={onWillUpdate}\n    hook-didUpdate={onDidUpdate}\n  \u003eupdate text\u003c/div\u003e,\n  document.body\n)\n\n// call onWillUpdate\n// call onDidUpdate\n```\n\n## Handle shouldComponentUpdate\n\nPlease follow the [React-basic Memoization Section](https://github.com/reactjs/react-basic#memoization)\n\n## Handle context\n\nUnlike React, context is out of `Component#getChildContext`, it pass by `React.render` from top to bottom, just like `props`.\n\n```javascript\nimport React from 'vdom-engine'\n// just add context argument explicitly\nlet MyComponent = (props, context) =\u003e {\n  return \u003cdiv\u003eprops: {JSON.stringify(props)}, context: {JSON.stringify(context)}\u003c/div\u003e\n}\n\nlet myContext = {\n  a: 1,\n  b: 2,\n  c: 3\n}\n\nReact.render(\u003cMyComponent /\u003e, document.body, myContext, () =\u003e {\n  console.log('callback')\n})\n\n```\n\n# Examples\n\n- [js-repaint-perf](http://lucifier129.github.io/vdom-engine/examples/js-repaint-perf)\n- [counter](http://lucifier129.github.io/vdom-engine/examples/counter-vanilla)\n\n# License\nMIT","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucifier129%2Fvdom-engine","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flucifier129%2Fvdom-engine","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucifier129%2Fvdom-engine/lists"}