{"id":22119979,"url":"https://github.com/maxpleaner/static_dom","last_synced_at":"2025-03-24T06:25:42.909Z","repository":{"id":57370158,"uuid":"93210309","full_name":"MaxPleaner/static_dom","owner":"MaxPleaner","description":"tiny DSL for mapping DOM to JS","archived":false,"fork":false,"pushed_at":"2017-06-05T22:33:36.000Z","size":8,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-02T05:55:46.260Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MaxPleaner.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}},"created_at":"2017-06-02T23:10:54.000Z","updated_at":"2017-06-02T23:47:36.000Z","dependencies_parsed_at":"2022-09-09T15:12:27.846Z","dependency_job_id":null,"html_url":"https://github.com/MaxPleaner/static_dom","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/MaxPleaner%2Fstatic_dom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaxPleaner%2Fstatic_dom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaxPleaner%2Fstatic_dom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaxPleaner%2Fstatic_dom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MaxPleaner","download_url":"https://codeload.github.com/MaxPleaner/static_dom/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245219754,"owners_count":20579646,"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-12-01T14:19:37.816Z","updated_at":"2025-03-24T06:25:42.891Z","avatar_url":"https://github.com/MaxPleaner.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"**What is it, in summary?**\n\nIt's a little DSL for mapping the DOM to Javascript variables.\n\n**Dependencies**\n\njQuery (`$` needs to be available as a global/window property)\n\n**How is it installed?**\n\nEasiest way is to `npm install --save static_dom` after initializing a\n`package.json` for the project.\n\nHowever the source is only three functions and \u003c 40 lines so it can easily\nbe taken straight from Github:\n\n- `static_dom_COFFEE.coffee` is the source;\n- `static_dom_NODE.js` is for plain JS requiring\n- `static_dom_BROWSER.js` is for use in the browser with no compiler.\n\n**What does the API look like** \n\nThere is only one required function to call, with one input and one output.\n\nThe input is a hash which maps the elements on the DOM:\n\n```js\ntree = {\n  body: {\n    selector: \"body\",\n    children: {\n      navbar: { selector: \"#navbar\" },\n      main_content: { selector: \"#main-content\" }\n    }\n  }\n}\n```\n\nThis is structured like so:\n\n```txt\ntree = \u003cgenerated function name\u003e: {\n  selector: \u003ccss selector\u003e,\n  children: \u003canother tree, optional\u003e\n}\n```\n\nHere's how this would be used:\n\n```js\nvar StaticDom = require(\"static_dom\");\ntree = { ... }; // shown above\ndsl = StaticDom.build_dom_methods(tree)\n```\n\nNow the `dsl` has functions `navbar`, `body`, and `main_content`.\n\nThe generated methods can be copied to another other using `Object.assign` or\nthe spread operator.\n\nThe generated functions have the DOM lookup scoped to the parent and are\ncached by default.\n\nThis generated function can be configured in one of two ways:\n\n1. passing a `false` argument when it's invoked, to disable cache\n2. by overwriting it completely\n\nWhat follows is the default function, which can be overwritten by reassigning\n`StaticDom.build_fn` (this source code is in coffeescript, by the way,\nbut the version pushed to NPM is plain JS). It's a higher-level function\n(a function that returns a function). The returned function is the one added to\nthe DSL.\n\nThe arguments are:\n\n- _memo_ (object), where the function should be added to, also a way to call\npreviously added functions\n- _name_ (string) name of the function to be added\n- _selector_ (string) css selector\n- _parent_ (string) function name of the parent (will be undefined or a string)\n\n```coffee\n  @build_fn = (memo, name, selector, parent) =\u003e\n    (allow_cache = true) =\u003e\n      get_val = =\u003e\n        val = if parent then memo[parent]().find(selector) else $(selector)\n        @missing_dom_element(selector) if val.length \u003c 1    \n        val\n      if allow_cache then (memo[\"_#{name}\"] ||= get_val()) else get_val()\n```\n\nThe other configurable method is only invoked from the default `build_fn`:\nit's `missing_dom_element(selector)` which, in its default state, just prints\na warning message to the console when the length of a jQuery result is 0.\nThis can be helpful in development, but can be easily disabled using\n`StaticDom.missing_dom_element = function(){}`\n\nTo give an example of all this, here's how the generated function could be \ncustomized to not cache or precaution against empty result sets; this would make\nit more suitable for dynamic content:\n\n```js\nStaticDom.build_fn = function(memo, name, selector, parent) {\n  return function() {\n    if (parent){\n      return memo[parent]().find(selector)\n    } else {\n      return $(selector)\n    }\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxpleaner%2Fstatic_dom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaxpleaner%2Fstatic_dom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxpleaner%2Fstatic_dom/lists"}