{"id":17723594,"url":"https://github.com/doriantaylor/js-markup-mixup","last_synced_at":"2025-03-31T13:41:46.279Z","repository":{"id":142094153,"uuid":"361536695","full_name":"doriantaylor/js-markup-mixup","owner":"doriantaylor","description":"markup-mixup: A Sensible, Terse HTML/XML Markup Generator","archived":false,"fork":false,"pushed_at":"2021-04-25T21:51:04.000Z","size":12,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2023-03-12T10:11:35.430Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/doriantaylor.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":"2021-04-25T20:56:31.000Z","updated_at":"2021-12-02T13:11:57.000Z","dependencies_parsed_at":null,"dependency_job_id":"ad577d60-e29c-4b7c-9452-4faa3695ce36","html_url":"https://github.com/doriantaylor/js-markup-mixup","commit_stats":null,"previous_names":[],"tags_count":0,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doriantaylor%2Fjs-markup-mixup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doriantaylor%2Fjs-markup-mixup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doriantaylor%2Fjs-markup-mixup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doriantaylor%2Fjs-markup-mixup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/doriantaylor","download_url":"https://codeload.github.com/doriantaylor/js-markup-mixup/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246475862,"owners_count":20783741,"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-10-25T15:43:25.821Z","updated_at":"2025-03-31T13:41:46.252Z","avatar_url":"https://github.com/doriantaylor.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# markup-mixup: A Sensible, Terse HTML/XML Markup Generator\n\n```html\n\u003cscript type=\"text/javascript\" src=\"markup-mixup.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\"\u003e\n  // put something in the body\n  let lol = MARKUP({ parent: document.body, spec: 'lol' });\n\n  // lol is, unsurprisingly, the text node that says 'lol'\n  let hurr = MARKUP({ after: lol, spec: { '#strong': 'smelling' } });\n\n  // now we can put something in between these two; note `hurr`\n  // is actually the text node 'smelling', so we need its parent\n  let durr = MARKUP({ before: hurr.parentNode,\n    spec: { '#a': ['duhh ', { '#em': 'durr' }], href: '/derp' } });\n\n  // aaand finally we can cover up our mistakes\n  MARKUP({ replace: lol, spec: { '#h1': 'OBTRUSIVE MESSAGE' } });\n\u003c/script\u003e\n```\n\n## Yet another markup generator?\n\nMany years ago, [I](https://doriantaylor.com/) wrote a Perl module\ncalled\n[Role::Markup::XML](https://metacpan.org/pod/Role::Markup::XML). I did\nthis because I had a lot of markup to generate, I sure as heck wasn't\ngoing to use a bare DOM API, and I was dissatisfied with the terse\ngenerators currently on offer. Then [I solved the same problem for\nRuby](https://www.rubydoc.info/gems/xml-mixup/). _Now_ I have a lot of\nX/HTML to generate using JavaScript, and I have apparenetly cultivated\na habit. As with the other two, here are the key behaviours:\n\n### Write markup like you're writing data structures, because you are\n\nYou sketch out the markup using ordinary `Object`s and `Array`s, which\nyou can subsequently address and manipulate with ordinary subscript\noperators. Heck, if it had the correct structure, you could even slurp\nin a JSON file. When you're ready, you can \"bake\" the markup with a\nsingle `MARKUP` function.\n\n\u003e Also: everything that isn't a plain `Object` or `Array` gets\n\u003e flattened out into a sensible string, including complex objects\n\u003e found in attribute values.\n\n### Perform surgery on existing documents\n\nMix in and reuse existing DOM subtrees; they will automatically be\ncloned for you. Choose from any of four attachment modes:\n\n* Append to the end of a `parent` node,\n* Insert immediately `before` a sibling node,\n* Append immediately `after` a sibling node,\n* `replace` a target node.\n\n### Generate markup incrementally\n\nTerse markup generators often use nested functions and tend to very\nhard to segment and compartmentalize. In addition to being agnostic as\nto whether it receives DOM objects or plain ones, the `MARKUP`\nfunction has been designed to return the last (in document order) node\nit generates, to make it easier to break up operations.\n\nIf your markup only varies parametrically, you can put a callback\nfunction anywhere a node or attribute would go. This function will\nreceive `args` from the topmost invocation of `MARKUP`.\n\n## The rest of the document\n\n**TODO** lol\n\nIf you want to get a sense of what this thing does, go look at [the\nRuby version](https://github.com/doriantaylor/rb-xml-mixup).\n\n## Copyright \u0026 License\n\nCopyright 2021 [Dorian Taylor](https://doriantaylor.com/)\n\nThis software is provided under\nthe [Apache License, 2.0](https://www.apache.org/licenses/LICENSE-2.0).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoriantaylor%2Fjs-markup-mixup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdoriantaylor%2Fjs-markup-mixup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoriantaylor%2Fjs-markup-mixup/lists"}