{"id":21835742,"url":"https://github.com/vtex/render-extension-loader","last_synced_at":"2025-04-14T09:15:22.731Z","repository":{"id":37692781,"uuid":"121660459","full_name":"vtex/render-extension-loader","owner":"vtex","description":"JavaScript lib to fetch and render a Render extension point in a given DOM element","archived":false,"fork":false,"pushed_at":"2023-07-18T23:09:34.000Z","size":466,"stargazers_count":3,"open_issues_count":13,"forks_count":4,"subscribers_count":146,"default_branch":"master","last_synced_at":"2025-03-27T22:39:18.425Z","etag":null,"topics":["xp-developer"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/vtex.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-02-15T17:42:49.000Z","updated_at":"2020-08-06T12:45:03.000Z","dependencies_parsed_at":"2024-06-21T02:13:24.153Z","dependency_job_id":"6d88c881-a05b-4926-8c23-92446b921ef7","html_url":"https://github.com/vtex/render-extension-loader","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex%2Frender-extension-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex%2Frender-extension-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex%2Frender-extension-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex%2Frender-extension-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vtex","download_url":"https://codeload.github.com/vtex/render-extension-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248613183,"owners_count":21133457,"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":["xp-developer"],"created_at":"2024-11-27T20:24:18.887Z","updated_at":"2025-04-14T09:15:22.704Z","avatar_url":"https://github.com/vtex.png","language":"TypeScript","readme":"# :construction: DEPRECATED - Please contact guilherme@vtex.com if you need to use this. :upside_down_face:\n\n# render-extension-loader\n\nUse render components from the comfort of your client-side code.\n\n### Quickstart\n\nCreate an app that serves a page under `/legacy-extensions/` path on `myvtex.com`.\n\n```\n// pages/pages.json\n{\n    \"pages\": {\n        \"legacy-getting-started\": {\n            \"path\": \"/legacy-extensions/render-example\",\n            \"theme\": \"theme\"\n        },\n    },\n    \"extensions\": {\n        \"legacy-getting-started\": {\n            \"component\": \"index\"\n        },\n    }\n}\n```\n\nAssuming you're logged in the account `basedevmkp` and workspace `loader` with this app installed, you can use `window.RenderExtensionLoader` to load and render that extension point.\n\n```\n\u003cdiv id=\"getting-started\"\u003e\u003c/div\u003e\n\u003cscript\u003e\nvar loader = new RenderExtensionLoader({\n    account: 'basedevmkp',\n    workspace: 'loader',\n    path: '/render-example',\n    locale: 'pt-BR',\n    verbose: true,\n})\nloader.load().then(function (data) {\n    console.log(data) // runtime\n    loader.render('legacy-getting-started', document.getElementById('getting-started'))\n})\n\u003c/script\u003e\n```\n\nYou can call `loader.render` passing a third argument, `props`, which will trigger a re-render of your extension point.\n\n### Important: setting `publicEndpoint` when developing on staging\n\nIf you're logged in the toolbelt with a `@vtex.com.br` email address, you are automatically configured to use the `staging` environment, which serves all traffic through the alternate `myvtexdev.com` (as opposed to `myvtex.com` for prod traffic).\n\nThis means that during development, if you are linking your app in the `staging` environment, you _must_ pass the `publicEndpoint` option to `RenderExtensionLoader` with the value of `myvtexdev.com`. Otherwise, your assets will be fetched from the production env and there might be inconsistencies during development, i.e. you will not see changes immediately.\n\nSo, during development simply pass this option to guarantee the loader will point towards the correct public endpoint:\n\n```\nvar loader = new RenderExtensionLoader({\n    account: 'basedevmkp',\n    workspace: 'loader',\n    path: '/render-example',\n    locale: 'pt-BR',\n    publicEndpoint: 'myvtexdev.com',\n    verbose: true,\n})\n```\n\n### Getting context and assets only\n\nYou can get assets and context without actually fetching files in case you want only the runtime context before loading extension points.\n\n```\n\u003cdiv id=\"getting-started\"\u003e\u003c/div\u003e\n\u003cscript\u003e\nvar loader = new RenderExtensionLoader({\n    account: 'basedevmkp',\n    workspace: 'loader',\n    path: '/render-example',\n    locale: 'pt-BR',\n    verbose: true,\n})\nloader.getRuntimeContext().then(function (data) {\n    console.log(data) // { runtime, styles, scripts }\n})\n\u003c/script\u003e\n```\n\n### Install\n\nFrom _vtexassets.com_:\n\nhttps://vtex.vtexassets.com/_v/public/assets/v1/npm/@vtex/render-extension-loader@0.1.6/lib/render-extension-loader.js\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex%2Frender-extension-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvtex%2Frender-extension-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex%2Frender-extension-loader/lists"}