https://github.com/vtex/render-extension-loader

JavaScript lib to fetch and render a Render extension point in a given DOM element
https://github.com/vtex/render-extension-loader

xp-developer

Last synced: about 1 month ago
JSON representation

JavaScript lib to fetch and render a Render extension point in a given DOM element

• Host: GitHub
• URL: https://github.com/vtex/render-extension-loader
• Owner: vtex
• Created: 2018-02-15T17:42:49.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-07-18T23:09:34.000Z (over 1 year ago)
• Last Synced: 2024-11-23T14:40:54.031Z (about 1 month ago)
• Topics: xp-developer
• Language: TypeScript
• Size: 455 KB
• Stars: 3
• Watchers: 148
• Forks: 4
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# :construction: DEPRECATED - Please contact [email protected] if you need to use this. :upside_down_face:

# render-extension-loader

Use render components from the comfort of your client-side code.

### Quickstart

Create an app that serves a page under `/legacy-extensions/` path on `myvtex.com`.

```

// pages/pages.json

{

    "pages": {

        "legacy-getting-started": {

            "path": "/legacy-extensions/render-example",

            "theme": "theme"

        },

    },

    "extensions": {

        "legacy-getting-started": {

            "component": "index"

        },

    }

}

```

Assuming 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.

```



var loader = new RenderExtensionLoader({

    account: 'basedevmkp',

    workspace: 'loader',

    path: '/render-example',

    locale: 'pt-BR',

    verbose: true,

})

loader.load().then(function (data) {

    console.log(data) // runtime

    loader.render('legacy-getting-started', document.getElementById('getting-started'))

})

```

You can call `loader.render` passing a third argument, `props`, which will trigger a re-render of your extension point.

### Important: setting `publicEndpoint` when developing on staging

If 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).

This 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.

So, during development simply pass this option to guarantee the loader will point towards the correct public endpoint:

```

var loader = new RenderExtensionLoader({

    account: 'basedevmkp',

    workspace: 'loader',

    path: '/render-example',

    locale: 'pt-BR',

    publicEndpoint: 'myvtexdev.com',

    verbose: true,

})

```

### Getting context and assets only

You can get assets and context without actually fetching files in case you want only the runtime context before loading extension points.

```



var loader = new RenderExtensionLoader({

    account: 'basedevmkp',

    workspace: 'loader',

    path: '/render-example',

    locale: 'pt-BR',

    verbose: true,

})

loader.getRuntimeContext().then(function (data) {

    console.log(data) // { runtime, styles, scripts }

})

```

### Install

From _vtexassets.com_:

https://vtex.vtexassets.com/_v/public/assets/v1/npm/@vtex/[email protected]/lib/render-extension-loader.js