{"id":17988198,"url":"https://github.com/program-spiritual/maple-render","last_synced_at":"2025-04-04T03:24:42.021Z","repository":{"id":112520946,"uuid":"353198254","full_name":"program-spiritual/maple-render","owner":"program-spiritual","description":"an implement of VNode render  written by typescript.","archived":false,"fork":false,"pushed_at":"2021-04-06T06:16:51.000Z","size":247,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-09T15:12:43.461Z","etag":null,"topics":["typescript","vnode","vuejs"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/maplerender","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/program-spiritual.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2021-03-31T02:16:35.000Z","updated_at":"2021-04-05T10:29:43.000Z","dependencies_parsed_at":"2023-05-15T14:00:38.939Z","dependency_job_id":null,"html_url":"https://github.com/program-spiritual/maple-render","commit_stats":null,"previous_names":["yiyandaoren/maple-render","program-spiritual/maple-render"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/program-spiritual%2Fmaple-render","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/program-spiritual%2Fmaple-render/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/program-spiritual%2Fmaple-render/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/program-spiritual%2Fmaple-render/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/program-spiritual","download_url":"https://codeload.github.com/program-spiritual/maple-render/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247114486,"owners_count":20885945,"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":["typescript","vnode","vuejs"],"created_at":"2024-10-29T19:11:00.572Z","updated_at":"2025-04-04T03:24:42.003Z","avatar_url":"https://github.com/program-spiritual.png","language":"TypeScript","readme":"## Maple Render\n\n[![](./template/maplerender.svg)](https://github.com/xiaomiwujiecao/maple-render)\n\n\n### target:\n\n\u003e Handwritten implementation of VNode\n\n\n### todo:\n\n - [x] Patch function\n - [x] Diff algorithm\n - [x] User defined render\n - [x] Build Version\n### how\n\nInspired by this project:\n\n\n\u003e http://hcysun.me/vue-design/zh\n\n\n### tutorial \n\nusing in vue or any popular framework:\n\n### import method\n\n```js\nimport { h, render } from 'maplerender'\n```\n\n### create VNode\n```js\n function handler() {\n  alert('click me')\n}\nconst elVNode = h(\n  'div',\n  {\n    style: { height: '100px', width: '200px', background: 'red' },\n    // click event\n    onclick: handler,\n  },\n  h('div', {\n    style: {\n      height: '50px',\n      width: '50px',\n      background: 'green',\n    },\n    class: [\n      'class-a',\n      {\n        'class-b': true,\n        'class-c': false,\n      },\n    ],\n  }),\n)\n```\n\n### render VNode to DOM\n\n```js\nrender(elVNode, document.getElementById('demo5'))\n```\n\n## render Functional Component\n\n```js\nexport function MyFunctionalComponent() {\n  return h(\n    'div',\n    {\n      style: {\n        background: 'green',\n      },\n    },\n    [\n      h('span', null, 'component title 1...'),\n      h('span', null, 'component title 2...'),\n    ],\n  )\n}\nconst functionalComponent = h(MyFunctionalComponent)\nrender(functionalComponent, document.getElementById('functional-component'))\n```\n\n## render Stateful Component\n\n\n```ts\nexport default class MYSuperComponent {\n  render() {\n    throw 'lack of render function!'\n  }\n}\nexport class MyComponent extends MYSuperComponent {\n  render() {\n    return h(\n      'div',\n      {\n        style: {\n          background: 'green',\n        },\n      },\n      [\n        h('span', null, 'component title 1...'),\n        h('span', null, 'component title 2...'),\n      ],\n    )\n  }\n}\nconst elCLassComponentVNode = h(MyComponent)\nrender(\n  elCLassComponentVNode,\n  document.getElementById('customer-class-component'),\n)\n```\n\n## function: `h`   params:\n\n|param|desc|\n|------------|------------|\n|tag|create element such as 'div', 'svg', Component Object |\n|data|bind data to  current component , such as {style:{...},class:[....]}|\n|children|the child VNodes|\n\n## function: `render`  params:\n\n|param|desc|\n|------------|------------|\n|vnode|VNode Component Object|\n|container| in web platform , it means DOM Object|\n\n\n##  data struct\n\nthe VNode data struct show below:\n\n```ts\n{\n    _isVNode: boolean;\n    tag: any;\n    data: any;\n    key: any;\n    children: any;\n    flags: any;\n    childFlags: any;\n    el: any;\n}\n```\n\nyou can check it on `chrome devtools` or any other popular browser\n\n## interface\n\n### VNode\n\n```ts\nexport interface VNode {\n  handle?: IFunctionalComponentHandle;\n  data: any;\n  _isVNode: boolean;\n  tag: any;\n  key?: string;\n  children: any;\n  flags: number;\n  childFlags: number;\n  el: any;\n}\n```\n\n### IFunctionalComponentHandle\n\n```ts\nexport  interface IFunctionalComponentHandle {\n  prev: VNode;\n  next: VNode;\n  container: HTMLElement;\n  update: Function\n}\n```\n\n### Customer Render Options\n\n```ts\nexport interface CustomerRenderOptions {\n    nodeOps: NodeOps;\n    patchData: (el: any, key: any, prevValue: any, nextValue: any) =\u003e void;\n}\ninterface NodeOps {\n    appendChild: (parent: any, child: any) =\u003e void;\n    createText: (text: string) =\u003e any;\n    removeChild: (parent: any, child: any) =\u003e void;\n    querySelector: (selector: any) =\u003e any;\n    createElement: (tag: any, isSVG: number | boolean) =\u003e any;\n    parentNode: (node: any) =\u003e any;\n    nextSibling: (node: any) =\u003e any;\n    setText: (node: any, text: string) =\u003e void;\n    insertBefore: (parent: any, child: any, ref: any) =\u003e void;\n}\nexport {};\n\n```\n\n## customer render\n\nif U want to define your self render ,please clone the repo on github and change everything .\n\n```shell\nhttps://github.com/xiaomiwujiecao/maple-render\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprogram-spiritual%2Fmaple-render","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprogram-spiritual%2Fmaple-render","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprogram-spiritual%2Fmaple-render/lists"}