{"id":15285464,"url":"https://github.com/plotdb/pug-browser","last_synced_at":"2025-06-24T08:34:39.741Z","repository":{"id":38059128,"uuid":"231248369","full_name":"plotdb/pug-browser","owner":"plotdb","description":"Builder for Pug running in Browsers. ","archived":false,"fork":false,"pushed_at":"2022-12-13T20:00:27.000Z","size":4325,"stargazers_count":3,"open_issues_count":14,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-11T19:24:11.054Z","etag":null,"topics":["html2pug","pug","template"],"latest_commit_sha":null,"homepage":"https://plotdb.github.io/pug-browser/","language":"JavaScript","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/plotdb.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-01T18:10:23.000Z","updated_at":"2025-04-08T01:37:35.000Z","dependencies_parsed_at":"2022-08-18T07:16:52.401Z","dependency_job_id":null,"html_url":"https://github.com/plotdb/pug-browser","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/plotdb/pug-browser","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plotdb%2Fpug-browser","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plotdb%2Fpug-browser/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plotdb%2Fpug-browser/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plotdb%2Fpug-browser/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/plotdb","download_url":"https://codeload.github.com/plotdb/pug-browser/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plotdb%2Fpug-browser/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261636484,"owners_count":23188036,"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":["html2pug","pug","template"],"created_at":"2024-09-30T15:05:17.218Z","updated_at":"2025-06-24T08:34:39.708Z","avatar_url":"https://github.com/plotdb.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# pug-browser\n\nBuilder for Pug running in Browsers. [Live Demo](https://plotdb.github.io/pug-browser/)\n\n## Usage\n\nexecute the following:\n\n```\n    npm install; npm run build\n```\n\nGenerated pug file will be available in `dist/` folder. Besides Pug, we also bundle html2pug from [this repo](https://github.com/izolate/html2pug).\n\n\n## Why\n\nClient side Pug is useful for purpose like online pug editing and realtime preview. One can simply use browserify to generate a bundle js file for running Pug in browser, yet \n\n * `fs` is not available in browser.\n * bundle file is quite huge.\n\nHere is a size statistics of a bundled pug js file, generated with discify from hughsk/disc:\n\n![module size statistics](https://raw.githubusercontent.com/plotdb/pug-browser/master/index.png)\n\n\nFollowing are the modules to be blamed for:\n\n * constantinople - for checking if a expression is constant. for performance optimization. 445KB\n * uglify-js - use to minfiy js in pug-filters and pug-runtime. 400KB\n * clean-css - use to minify css in pug-filters. 394KB\n * with - for mimic `with` syntax. 149KB\n * is-expression - 123KB\n\nAnd the result bundle file can be 1.4MB(tinyified) to 2MB. Removing `constantinople`, `uglify-js`, `clean-css` and `with` can reduce the file size to 170KB, nearly 1/10 in size.\n\n## How\n\nWe use browserify to overwrite and replace above modules with following behavior, which could be found in `src/`:\n\n * clean-css and uglify-js - return original string without minifying.\n * constantinople - always return false for constant testing.\n * with - use language feature `with` directly.\n\n## Sample Usage\n\nPug:\n```\n    script(src=\"\u003cpath-to-pugjs\u003e\")\n    script.\n      pug = require(\"pug\");\n      result_html = pug.render(\"header: h1.title Hello World!\", {filename: \"index.pug\", basedir: \".\"});\n```\n\nhtml2pug:\n\n```\n    script(src=\"\u003cpath-to-html2pugjs\u003e\")\n    script.\n      html2pug = require(\"html2pug\");\n      result_pug = html2pug('\u003cheader\u003e\u003ch1 class=\"title\"\u003eHello World!\u003c/h1\u003e\u003c/header\u003e')\n```\n\n\n## FileSystem\n\nWe don't provide `fs` module for browser but you can use `BrowserFS` for supporting include / extend directly in browser. Following is a sample code to make it work:\n\n```\n    script(src=\"https://cdnjs.cloudflare.com/ajax/libs/BrowserFS/2.0.0/browserfs.min.js\")\n    script(src=\"\u003cpath-to-pugjs\u003e\")\n    script.\n      BrowserFS.install(window)\n      BrowserFS.configure({fs: \"LocalStorage\"}, function() {\n        window.fs = fs = require(\"fs\");\n        fs.writeFileSync(\"sample.pug\", \"h1 Hello World!\");\n      });\n      pug = require(\"pug\");\n      result_html = pug.render(\"include sample.pug\", {filename: \"index.pug\", basedir: \".\"});\n```\n\n## html2pug\n\nSimilarly, html2pug is built with following modules excluded:\n\n * source-map\n * stream-http\n * uglify-js\n * clean-css\n\n\n## Discussion \n\nThe minimized Pug.js works at least for some simple cases with include, var interpolation, mixin, \u0026attributes and loop, yet It's more like just an experiment and removing these modules will possibly cause some major issues like in performance. We need more tests about it before actually using it in production site.\n\nAdditionally, since constantinople is for optimization, it's possible that we optionally use some nondeterministic algorithms as alternatives instead of including a whole js parser when size is a major concern.\n\n\n## License\n\nMIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplotdb%2Fpug-browser","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fplotdb%2Fpug-browser","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplotdb%2Fpug-browser/lists"}