{"id":29539826,"url":"https://github.com/andremarcondesteixeira/data-target","last_synced_at":"2025-07-17T07:31:34.425Z","repository":{"id":110807361,"uuid":"332933202","full_name":"andremarcondesteixeira/data-target","owner":"andremarcondesteixeira","description":"Allows HTML anchors and forms to render the http response content inside another element through the usage of a data-target attribute","archived":false,"fork":false,"pushed_at":"2023-10-29T20:05:13.000Z","size":585,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-17T13:19:02.484Z","etag":null,"topics":["anchors","html","hyperlinks","navigation","utility"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/andremarcondesteixeira.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}},"created_at":"2021-01-26T01:18:16.000Z","updated_at":"2023-12-22T17:18:01.000Z","dependencies_parsed_at":null,"dependency_job_id":"fca7414f-28b0-4ea2-b1ba-6504b2fd3f46","html_url":"https://github.com/andremarcondesteixeira/data-target","commit_stats":null,"previous_names":["andremarcondesteixeira/data-target"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/andremarcondesteixeira/data-target","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andremarcondesteixeira%2Fdata-target","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andremarcondesteixeira%2Fdata-target/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andremarcondesteixeira%2Fdata-target/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andremarcondesteixeira%2Fdata-target/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andremarcondesteixeira","download_url":"https://codeload.github.com/andremarcondesteixeira/data-target/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andremarcondesteixeira%2Fdata-target/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265577329,"owners_count":23791139,"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":["anchors","html","hyperlinks","navigation","utility"],"created_at":"2025-07-17T07:30:58.106Z","updated_at":"2025-07-17T07:31:34.416Z","avatar_url":"https://github.com/andremarcondesteixeira.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# data-target\n\n## Basic functionality\n\nThis library allows HTML anchors and forms to render the response of the request inside another element.\n\nThe element in which the response will be rendered inside must have it's `id` attribute's value replicated in the `data-target` attribute of the corresponding anchor or form.\n\nAfter the response is rendered inside the target element, the library will look for more `data-target` attributes inside the inner HTML of the target element.\n\nBy default, the browser's URL will not be changed after rendering the response inside the target element, but this behavior can be changed. Look at the \"Configuration\" section below for more information.\n\nPlease note that if the rendered response contains javascript code, this code will not be executed by the browser. If you want to execute javascript code according to the rendered response, you could listen to the `data-target:loaded` event to create your logic to load your modules. To see an example see the \"Events\" section below.\n\n### Example using an anchor:\n\n``` HTML\n\u003ca href=\"/path\" data-target=\"the-target-element-id\"\u003eClick me!\u003c/a\u003e\n\u003cdiv id=\"the-target-element-id\"\u003e\n    The content of this div will be replaced by the response of the HTTP request\n\u003c/div\u003e\n```\n\n### Example using a form:\n\n``` HTML\n\u003cform action=\"/path\" method=\"post\" data-target=\"the-target-element-id\"\u003e\n    \u003cinput type=\"text\" name=\"name\" /\u003e\n    \u003cbutton\u003eSubmit\u003c/button\u003e\n\u003c/form\u003e\n\u003cdiv id=\"the-target-element-id\"\u003e\n    The content of this div will be replaced by the response of the HTTP request\n\u003c/div\u003e\n```\n\n## Events\n\n### `data-target:before-load`\n\nThis a `CustomEvent` that is dispatched by the target element before the library sends an HTTP request.\n\n``` javascript\ntargetElement.dispatchEvent(new CustomEvent('data-target:before-request', {\n    bubbles: true,\n    detail: {\n        url: url.href,\n    },\n}));\n```\n\nYou can get a reference of the target element by using the `target` property of the event.\n\n### `data-target:loaded`\n\nThis is a `CustomEvent` dispatched by the target element after it received the response of the HTTP request.\n\n``` javascript\ntargetElement.dispatchEvent(new CustomEvent('data-target:loaded', {\n    bubbles: true,\n    detail: {\n        url: url.href,\n        responseStatusCode: response.statusCode\n    }\n}));\n```\n\nYou can access the element which received the response through the `target` property of the event.\n\n### Example of using the events\n\nYou can, for example, use the events to show loading indicators and dynamically execute some functions from javascript modules:\n\n``` HTML\n\u003cscript type=\"module\"\u003e\n    window.addEventListener('DOMContentLoaded', () =\u003e {\n        const modulesMap = {\n            [`${location.origin}/test`]: '/modules/test.js',\n        };\n\n        window.addEventListener('data-target:before-load', async (event) =\u003e {\n            showLoadingIndicator(event.target);\n            const scriptPath = modulesMap[event.detail.url];\n            if (scriptPath) {\n                const exportedMembers = await import(scriptPath);\n                if (exportedMembers.onBeforeLoad) {\n                    exportedMembers.onBeforeLoad(event);\n                }\n            }\n        });\n\n        window.addEventListener('data-target:loaded', async (event) =\u003e {\n            const scriptPath = modulesMap[event.detail.url];\n            if (scriptPath) {\n                const exportedMembers = await import(scriptPath);\n                if (exportedMembers.onLoaded) {\n                    exportedMembers.onLoaded(event);\n                }\n            }\n        });\n    });\n\u003c/script\u003e\n```\n\n## Configuration and programmatic access\n\nThis library exposes a global object inside the `window` object called `dataTarget`, which you can use to configure the library's behavior and invoke the library programmatically.\n\nThe configuration is made by overriding the default implementations of the functions in `window.dataTarget.config` and the programmatic access is made through the `window.dataTarget.$` object, which is freezed and cannot be changed.\n\n``` Typescript\n// Typescript\nexport declare type DataTargetDefinitions = {\n    config: {\n        errorHandler: (\n            error: unknown,\n            urlOrInvokerElement?: string | URL | HTMLAnchorElement | HTMLFormElement\n        ) =\u003e void;\n        httpRequestDispatcher: (\n            input: RequestInfo | URL,\n            init?: RequestInit | undefined\n        ) =\u003e Promise\u003c{\n            content: string;\n            statusCode: number;\n        }\u003e;\n    };\n    $: {\n        request: (\n            urlOrInvokerElement: string | URL | HTMLAnchorElement | HTMLFormElement,\n            targetElementId?: string,\n            init?: RequestInit\n        ) =\u003e Promise\u003cvoid\u003e;\n        attach: (root: HTMLElement) =\u003e void;\n    }\n};\n\ndeclare global {\n    interface Window {\n        dataTarget: DataTargetDefinitions;\n    }\n}\n```\n\n### Configuration\n\n#### `window.dataTarget.config.errorHandler`\n\nThe library calls this function whenever an error occurs.\n\nUse this function to personalize your error logs capturing logic.\n\nThis is the default implementation:\n\n``` Typescript\n{\n    ...\n    errorHandler: (error, urlOrInvokerElement) =\u003e console.error({ error, urlOrInvokerElement }),\n    ...\n}\n```\n\n#### `window.dataTarget.config.httpRequestDispatcher`\n\nThis function is used by the library do dispatch http requests.\n\nYou can reimplement this function if you need a more strict security control or any other requirement that may affect the http request dispatching logic, like changing the browser's url or using a different fetching library.\n\nThis is the default implementation:\n\n``` Typescript\n{\n    ...\n    httpRequestDispatcher: async (input, init) =\u003e {\n        const response = await fetch(input, init);\n        return {\n            content: await response.text(),\n            statusCode: response.status,\n        };\n    },\n    ...\n}\n```\n\n### Programmatic access\n\n#### `window.dataTarget.$.request`\n\nThis function allows you to dispatch an HTTP request programmaticaly.\n\nBehind the scenes, it will also use the `window.dataTarget.config.httpRequestDispatcher` function.\n\nThere are some rules you need to follow to use this function:\n\n- If the first parameter is a string or a URL object, then you MUST pass the second parameter with the ID of the target element\n- If the first parameter is a referente to an anchor or form, and the referenced element does not have a `data-target` attribute, you MUST provide the ID of the target element through the second parameter\n\n#### `window.dataTarget.$.attach`\n\nThis function allows you to programmatically attach the library's event listeners:\n\n- `onClick` event listeners to anchor containing a non-empty data-target attribute\n- `onSubmit` event listeners to forms containing a non-empty data-target attribute\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandremarcondesteixeira%2Fdata-target","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandremarcondesteixeira%2Fdata-target","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandremarcondesteixeira%2Fdata-target/lists"}