{"id":14967725,"url":"https://github.com/tdumitrescu/virtual-jade","last_synced_at":"2025-05-07T09:45:40.117Z","repository":{"id":29910810,"uuid":"33456636","full_name":"tdumitrescu/virtual-jade","owner":"tdumitrescu","description":"Compile Jade templates to Hyperscript for Virtual DOM libraries","archived":false,"fork":false,"pushed_at":"2024-07-12T21:29:51.000Z","size":831,"stargazers_count":31,"open_issues_count":6,"forks_count":4,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-19T11:55:15.725Z","etag":null,"topics":["hyperscript","jade","pug","snabbdom","virtual-dom"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tdumitrescu.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-04-05T21:57:13.000Z","updated_at":"2023-09-08T16:56:24.000Z","dependencies_parsed_at":"2024-06-18T20:07:42.620Z","dependency_job_id":"74c667e1-2247-4fa9-8bf3-5ba0730bd1dd","html_url":"https://github.com/tdumitrescu/virtual-jade","commit_stats":{"total_commits":289,"total_committers":10,"mean_commits":28.9,"dds":0.5363321799307958,"last_synced_commit":"4b74843ed605787f542cabb32fb4742b1ae50c9f"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tdumitrescu%2Fvirtual-jade","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tdumitrescu%2Fvirtual-jade/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tdumitrescu%2Fvirtual-jade/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tdumitrescu%2Fvirtual-jade/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tdumitrescu","download_url":"https://codeload.github.com/tdumitrescu/virtual-jade/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252854099,"owners_count":21814628,"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":["hyperscript","jade","pug","snabbdom","virtual-dom"],"created_at":"2024-09-24T13:38:31.264Z","updated_at":"2025-05-07T09:45:40.098Z","avatar_url":"https://github.com/tdumitrescu.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# virtual-jade\n\n[![NPM version][npm-image]][npm-url]\n[![Build status][travis-image]][travis-url]\n[![Test coverage][coveralls-image]][coveralls-url]\n\nCompile your [jade](https://github.com/jadejs/jade) templates into Virtual DOM functions. Works with multiple Virtual DOM libraries, including:\n- [virtual-dom](https://github.com/Matt-Esch/virtual-dom)\n- [snabbdom](https://github.com/snabbdom/snabbdom)\n- [maquette](https://github.com/AFASSoftware/maquette)\n\nFor people who like declarative reactive templating, but don't like writing HTML or JSX.\n\nCreate a template:\n\n```jade\n.items\n  each item in items\n    .item(\n      class={active: item.active}\n      data-id=item.id\n    )\n      .item-title= item.title\n      .item-description= item.description\n```\n\n`require()` your template as a function\nand use a rendering system like [main-loop](https://github.com/Raynos/main-loop):\n\n```js\nconst mainLoop = require('main-loop');\n\nconst template = require('./items.jade');\n\nconst initState = {\n  items: [],\n};\n\nconst loop = mainLoop(initState, template, {\n    create: require(\"virtual-dom/create-element\"),\n    diff: require(\"virtual-dom/diff\"),\n    patch: require(\"virtual-dom/patch\"),\n});\ndocument.body.appendChild(loop.target);\n```\n\nThen update whenever you'd like!\n\n```js\nloop.update({\n  items: [\n    {\n      id: 'asdf',\n      title: 'some title',\n      description: 'some description',\n      active: false,\n    },\n  ],\n});\n```\n\n## Notes\n\n- For easy configuration with Webpack, use [virtual-jade-loader](https://github.com/tdumitrescu/virtual-jade-loader).\n- To translate with Babel, use [babel-plugin-virtual-jade](https://github.com/jbwyme/babel-plugin-virtual-jade).\n- Can be used with any CommonJS environment with client-side `require()`s.\n- All templates must return a single root element.\n- Requires you to install the appropriate virtual-dom library in your top-level app.\n\n## API\n\n### fnStr = render(str, options)\n\n`str` is the jade source as a string.\n`fnStr` is output JS that you should include as a CommonJS module.\n\nOptions are:\n\n- `filename`: path and name of Jade source file for `str`.\n  Required if you use `include` or `extends` in templates.\n- `marshalDataset=true`: whether to convert `data-` attributes\n  to `dataset` members. Set to false to treat as props with the same\n  name as the attributes (if your target Virtual DOM renderer does\n  not support the `dataset` API).\n- `pretty=false`: whether to beautify the resulting JS.\n  Requires you to install `js-beautify` yourself.\n- `propsWrapper`: optional object to wrap Jade attributes in; for example, with `propsWrapper = 'props'`, the template `div(foo=\"bar\")` will translate to something like `h('div', {props: {foo: 'bar'}})` rather than `h('div', {foo: 'bar'})`\n- `rawProps`: whether to skip Jade attribute -\u003e HTML property conversion; this is set to true in the default Snabbdom configuration\n- `serializeAttrsObjects`: special behavior for the Snabbdom-style `attrs` attribute object. If true, object values within an `attrs` attribute will be automatically stringified (since HTML element attributes are always strings); for example, in `div(attrs={foo: {hello: 'world'}})` the `foo` attr will end up in HTML as `\"{\u0026quot;hello\u0026quot;:\u0026quot;world\u0026quot;}\"` (rather than `\"[object Object]\"`).\n- `runtime`: optional override to include any arbitrary Virtual DOM library that defines the `h()` hyperscript function. E.g. `var h = require('my-special-lib/h');`\n- `vdom`: name of the Virtual DOM library configuration to load (currently either `virtual-dom` or `snabbdom`).\n\nReturns a string that looks like:\n\n```js\nfunction render(locals) {\n  var result_of_with = /* stuff */\n  if (result_of_with) return result_of_with.value;;\n}\n```\n\nYou are expected to `eval()` the string if you want the source as a function.\nOtherwise, just create a module in the following format:\n\n```js\nconst js = `module.exports = ${fnStr}`;\n```\n\nWithin code blocks in your template code, you can access Jade mixin functions via the `$mixins` variable.\nIn virtual-jade, mixins boil down to functions that take arguments and return a tree of `h(name, attrs, children)`.\nThey are like [React stateless components](https://reactjs.org/docs/components-and-props.html).\nAccessing them via `$mixins` is useful for special cases where you want to pass around handles to blocks of Jade code as callback functions (see example below).\n\n```jade\nmixin item(x)\n  .item\n    .more-tree= x + 1\n\nlist-virtual-scroll(props={itemRenderer: $mixins.item})\n```\n\n```jade\n// in list-virtual-scroll.jade\neach val in allItems.slice(startIdx, endIdx)\n  = props.itemRenderer(val)\n```\n\n## Development notes\n- Install deps: `npm install`\n- Run tests: `npm test`\n- Run linter: `npm run lint`\n- Generate coverage report: `npm run test-cov`\n- Run all the verifications together: `npm run test-ci`\n- Run tests with verbose debugging output (compiled functions as well as rendered HTML): `DEBUG=test npm test`\n\n[travis-image]: https://img.shields.io/travis/tdumitrescu/virtual-jade/master.svg?style=flat-square\n[travis-url]: https://travis-ci.org/tdumitrescu/virtual-jade\n[coveralls-image]: https://img.shields.io/coveralls/tdumitrescu/virtual-jade.svg?style=flat-square\n[coveralls-url]: https://coveralls.io/r/tdumitrescu/virtual-jade\n[npm-image]: https://img.shields.io/npm/v/virtual-jade.svg\n[npm-url]: https://www.npmjs.com/package/virtual-jade\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftdumitrescu%2Fvirtual-jade","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftdumitrescu%2Fvirtual-jade","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftdumitrescu%2Fvirtual-jade/lists"}