{"id":21880405,"url":"https://github.com/mjmsmith/connect-jade-client","last_synced_at":"2026-05-04T10:34:35.763Z","repository":{"id":11605604,"uuid":"14098984","full_name":"mjmsmith/connect-jade-client","owner":"mjmsmith","description":"Connect middleware for serving compiled Jade templates to clients.","archived":false,"fork":false,"pushed_at":"2013-12-11T04:43:48.000Z","size":220,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-09T14:05:07.752Z","etag":null,"topics":["jade","middleware","node","nodejs","npm-package"],"latest_commit_sha":null,"homepage":null,"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/mjmsmith.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":"2013-11-04T02:53:02.000Z","updated_at":"2025-02-24T07:12:36.000Z","dependencies_parsed_at":"2022-09-19T10:50:27.354Z","dependency_job_id":null,"html_url":"https://github.com/mjmsmith/connect-jade-client","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/mjmsmith/connect-jade-client","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mjmsmith%2Fconnect-jade-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mjmsmith%2Fconnect-jade-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mjmsmith%2Fconnect-jade-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mjmsmith%2Fconnect-jade-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mjmsmith","download_url":"https://codeload.github.com/mjmsmith/connect-jade-client/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mjmsmith%2Fconnect-jade-client/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260950526,"owners_count":23087626,"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":["jade","middleware","node","nodejs","npm-package"],"created_at":"2024-11-28T09:13:27.937Z","updated_at":"2026-05-04T10:34:35.723Z","avatar_url":"https://github.com/mjmsmith.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# connect-jade-client\n\n__connect-jade-client__ is Connect middleware for serving compiled Jade templates to clients with maximum flexibility and minimum hassle.\n\n## Installation\n\nInstall via npm:\n\n```\nnpm install connect-jade-client\n```\n\n## Required Settings\n\nAt a minimum, three settings must be provided to the middleware:\n\n```\nvar connectJadeClient = require(\"connect-jade-client\");\n...\napp.use(connectJadeClient({\n    source: \"/full/path/to/your/client/jade/directory\",\n    public: \"/full/path/to/your/site/public/directory\",\n    prefix: \"/url/prefix/for/client/views\"\n}));\n```\n\nIn other words,\n\n* `source` is the root directory for your client-side Jade template files,\n* `public` is the root directory for your site's public files, and\n* `prefix` is the path under `public` that identifies a relevant request.\n\n## Details\n\nAssume we have this example site structure.\n\n```\n/usr/local/mysite/\n    index.js\n    client/\n        views/\n            FirstView.jade\n            SecondView.jade\n            SecondView/\n                DateView.jade\n                TimeView.jade\n            ThirdView.jade\n    public/\n    ...\n```\n\n#### Configuration\n\nThe connect-jade-client middleware is configured in `index.js` like so:\n\n```\napp.use(connectJadeClient({\n    source: path.join(__dirname, \"client\", \"views\"),\n    public: path.join(__dirname, \"public\"),\n    prefix: \"/js/views\"\n}));\n```\n\n#### Compilation\n\nOn startup, the middleware searches for all file ending in \"__.jade__\" under the `source` root directory.  It compiles all of the files into a hash table of function objects, where the key names correspond to the source structure.  In the example, the resulting table looks like this:\n\n```\n{\n    FirstView:    function(args) {...}\n    SecondView:   function(args) {...}\n        DateView: function(args) {...}\n        TimeView: function(args) {...}\n    ThirdView:    function(args) {...}\n}\n```\n\nThe value associated with each key is the compiled template function. \n\nNote that to match the source structure, `SecondView` also defines the `DateView` and `TimeView` functions as properties.  This namespacing is supported to an arbitrary depth.\n\n#### Request / Response\n\nThe middleware looks for incoming HTTP requests where the path begins with the `prefix` setting and ends in \"__.js__\".  It generates a JavaScript response that creates a hash table of the compiled templates on the client.  In the example, the generated file/response for `http://mysite.com/js/views.js` looks like this:\n\n```\nvar T = {};\nT.FirstView = function(args) {...};\nT.SecondView = function(args) {...};\nT.SecondView.DateView = function(args) {...};\nT.SecondView.TimeView = function(args) {...};\nT.ThirdView = function(args) {...};\nwindow.Templates = T;\n```\n#### Example Use\n\nAssume that the contents of the __SecondView__ files are as follows:\n\n* SecondView.jade:\n\n```\ndiv Date and Time\n```\n\n* SecondView/DateView.jade\n  \n```\n.date The date is #{date}.\n```\n  \n* SecondView/TimeView.jade\n\n```\n.time The time is #{time}.\n```\n\nThese (rather contrived) templates could be used in a (similarly contrived) Backbone View like this:\n\n```\nvar DateView = Backbone.View.extend({\n    render: function() {\n        this.$el.html(Templates.SecondView.DateView(date: moment().format(\"MMM Do YY\")));\n        return this;\n    }\n});\n\nvar TimeView = Backbone.View.extend({\n    render: function() {\n        this.$el.html(Templates.SecondView.TimeView(time: moment().format(\"hh:mm:ss\")));\n        return this;\n    }\n});\n  \nvar SecondView = Backbone.View.extend({\n    render: function() {\n        this.$el.append(new DateView().render());\n        this.$el.append(new TimeView().render());\n        return this;\n     }\n});\n```\n\n#### Multiple Apps\n\nBecause you can request any subset of templates using the corresponding path, it's easy to support multiple client-side apps.  Given a `source` structure like this:\n\n```\n/usr/local/mysite/\n    client/\n        views/\n            FirstApp/\n                FooView.jade\n            SecondApp/\n                BarView.jade\n            ThirdApp/\n                BazView.jade\n    ...\n```\n\nThe subset of templates corresponding to each app can be requested with the URLs:\n\n```\nhttp://mysite.com/js/views/FirstApp.js\nhttp://mysite.com/js/views/SecondApp.js\nhttp://mysite.com/js/views/ThirdApp.js\n```\n\nSimilarly, the template(s) for a single view could be requested with the URL:\n\n```\nhttp://mysite.com/js/views/FirstApp/FooView.js\n```\n\n#### Alternate Template Format\n\nIn the example, sub-templates of the __SecondView__ template are stored in a corresponding subdirectory.  The middleware also supports a custom format where all templates are stored in the same file, with comments used to identify the sections.  The comment format is:\n\n```\n//-- TemplateName.jade\n```\n\nNote that the comment must begin with the string `//--` followed by at least one space, and end with the string `.jade`.  All text up to the first identifier comment is the template associated with the name of the file itself; all text following an identifier comment is the template associated with the filename specified in the comment.  Only one level of nesting is supported.\n\nIn the example, the templates in the __SecondView__ subdirectory could instead be included in __SecondView.jade__ as follows:\n\n```\ndiv Date and Time\n\n//-- DateView.jade\n  \n.date The date is #{date}.\n  \n//-- TimeView.jade\n\n.time The time is #{time}.\n```\n\n## Optional Settings\n\n* `global` The name of the client-side public variable. (string)\n   \n  default: __Templates__\n  \nInclude the `global` setting to specify an alternate name for the templates variable.\n\n* `jadeOptions` Options passed to the Jade compiler. (object)\n\n  default: __{ client: true, compileDebug: false, debug: false, pretty: true }__\n\nAny options you specify will be merged into the default options.\n\n* `reload` Search for and recompile  templates on every request. (boolean)\n\n  default: __false__\n\nBy default, the middleware will only generate a new JavaScript file if it doesn't exist, or if the file date is earlier than any of the source __.jade__ files it references.  This means that during development, it won't pick up changes to __.jade__ files made after the middleware was initialized.  Set the `reload` setting to `true` to have it rebuild the templates on every request.\n\n```\n  reload: (process.env.NODE_ENV === \"development\")\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmjmsmith%2Fconnect-jade-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmjmsmith%2Fconnect-jade-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmjmsmith%2Fconnect-jade-client/lists"}