Porsche Design SystemSearchNavigate to GitHub repository of Porsche Design SystemOpen sidebar
Loader Script Table of Contents Function name: getLoaderScript() When using porsche-design-system/components-{angular|react} our core loader gets bundled into your application. This impacts the loading behavior of Porsche Design System components because the code gets executed later, once the framework bootstraps. To achieve this bootstrapping earlier we provide a partial in all @porsche-design-system/components-{js|angular|react|vue} packages which needs to be injected into the <body> of your index.html. An in-depth optimization guide can be found at Vanilla Js Optimization. Supported options OptionDescriptionTypeDefaultprefixPrefix will be added to the component names.string | string[]undefinedformatDefines the output format of the partial. By default it returns a html string. For jsx it returns a jsx element. For sha256 it returns a SHA-256 hash of the innerHTML to use in a Content Security Policy (CSP).'html' | 'jsx' | 'sha256''html' When using jsx in the format option, it is necessary to have react/jsx-runtime as a dependency in the project included. Examples Project integration differs based on the project setup. The following showcases the most common ways. 
<!-- index.html -->
<body>
  <!--PLACEHOLDER_LOADER_SCRIPT-->
</body>

<!-- package.json (tested on macOS, the script may need to be adjusted depending on the operating system used) -->
<!-- make sure to adjust the path to the index.html file -->
"scripts": {
  "prestart": "yarn replace",
  "replace": "placeholder='<!--PLACEHOLDER_LOADER_SCRIPT-->' && partial=$placeholder$(node -e 'console.log(require(\"@porsche-design-system/components-js/partials\").getLoaderScript())') && regex=$placeholder'.*' && sed -i '' -E -e \"s^$regex^$partial^\" index.html"
  <!-- Alternative: With custom prefix -->
  "replace": "placeholder='<!--PLACEHOLDER_LOADER_SCRIPT-->' && partial=$placeholder$(node -e 'console.log(require(\"@porsche-design-system/components-js/partials\").getLoaderScript({ prefix: \"custom-prefix\" }))') && regex=$placeholder'.*' && sed -i '' -E -e \"s^$regex^$partial^\" index.html"
  <!-- Alternative: With multiple custom prefixes -->
  "replace": "placeholder='<!--PLACEHOLDER_LOADER_SCRIPT-->' && partial=$placeholder$(node -e 'console.log(require(\"@porsche-design-system/components-js/partials\").getLoaderScript({ prefix: [\"\", \"custom-prefix\", \"another-prefix\"] }))') && regex=$placeholder'.*' && sed -i '' -E -e \"s^$regex^$partial^\" index.html"
}
OutputThe result of this partial looks like this:
<script data-pds-loader-script>
var porscheDesignSystem;(()=>
{"use strict";var e={d:(t,n)=>
{for(var o in n)e.o(n,o)&&!e.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:n[o]})},o:(e,t)=>
Object.prototype.hasOwnProperty.call(e,t),r:e=>
{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{load:()=>
r});const n="porscheDesignSystem";function o(){return document[n]||(document[n]={}),document[n]}function s({script:e,version:t,prefix:s}){const r=function(e){const t=o(),{[e]:n}=t;if(!n){let n=()=>
{};const o=new Promise((e=>
n=e));t[e]={isInjected:!1,isReady:()=>
o,readyResolve:n,prefixes:[],registerCustomElements:null}}return t[e]}(t),{isInjected:i,prefixes:c=[],registerCustomElements:d}=r,[u]=Object.entries(o()).filter((([e,n])=>
e!==t&&"object"==typeof n&&n.prefixes.includes(s)));if(u)throw new Error(`[Porsche Design System v${t}] prefix '${s}' is already registered with version '${u[0]}' of the Porsche Design System. Please use a different one.\nTake a look at document.${n} for more details.`);i||(function(e){const t=document.createElement("script");t.src=e,t.setAttribute("crossorigin",""),document.body.appendChild(t)}(e),r.isInjected=!0),c.includes(s)||(c.push(s),d&&d(s))}const r=(e={})=>
{const t="PORSCHE_DESIGN_SYSTEM_CDN";window[t]=e.cdn||window[t]||(window.location.origin.match(/\.cn$/)?"cn":"auto");const n="porscheDesignSystem";document[n]||(document[n]={}),document[n].cdn={url:"https://cdn.ui.porsche."+("cn"===window[t]?"cn":"com"),prefixes:[]},s({version:"3.28.0",script:document[n].cdn.url+"/porsche-design-system/components/porsche-design-system.v3.28.0.bb0e1f205b7459f9181a.js",prefix:e.prefix||""})};porscheDesignSystem=t})();porscheDesignSystem.load()
</script>

// Alternative: With custom prefix
<script data-pds-loader-script>
var porscheDesignSystem;(()=>
{"use strict";var e={d:(t,n)=>
{for(var o in n)e.o(n,o)&&!e.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:n[o]})},o:(e,t)=>
Object.prototype.hasOwnProperty.call(e,t),r:e=>
{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{load:()=>
r});const n="porscheDesignSystem";function o(){return document[n]||(document[n]={}),document[n]}function s({script:e,version:t,prefix:s}){const r=function(e){const t=o(),{[e]:n}=t;if(!n){let n=()=>
{};const o=new Promise((e=>
n=e));t[e]={isInjected:!1,isReady:()=>
o,readyResolve:n,prefixes:[],registerCustomElements:null}}return t[e]}(t),{isInjected:i,prefixes:c=[],registerCustomElements:d}=r,[u]=Object.entries(o()).filter((([e,n])=>
e!==t&&"object"==typeof n&&n.prefixes.includes(s)));if(u)throw new Error(`[Porsche Design System v${t}] prefix '${s}' is already registered with version '${u[0]}' of the Porsche Design System. Please use a different one.\nTake a look at document.${n} for more details.`);i||(function(e){const t=document.createElement("script");t.src=e,t.setAttribute("crossorigin",""),document.body.appendChild(t)}(e),r.isInjected=!0),c.includes(s)||(c.push(s),d&&d(s))}const r=(e={})=>
{const t="PORSCHE_DESIGN_SYSTEM_CDN";window[t]=e.cdn||window[t]||(window.location.origin.match(/\.cn$/)?"cn":"auto");const n="porscheDesignSystem";document[n]||(document[n]={}),document[n].cdn={url:"https://cdn.ui.porsche."+("cn"===window[t]?"cn":"com"),prefixes:[]},s({version:"3.28.0",script:document[n].cdn.url+"/porsche-design-system/components/porsche-design-system.v3.28.0.bb0e1f205b7459f9181a.js",prefix:e.prefix||""})};porscheDesignSystem=t})();porscheDesignSystem.load({prefix:'custom-prefix'})
</script>

// Alternative: With multiple custom prefixes
<script data-pds-loader-script>
var porscheDesignSystem;(()=>
{"use strict";var e={d:(t,n)=>
{for(var o in n)e.o(n,o)&&!e.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:n[o]})},o:(e,t)=>
Object.prototype.hasOwnProperty.call(e,t),r:e=>
{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{load:()=>
r});const n="porscheDesignSystem";function o(){return document[n]||(document[n]={}),document[n]}function s({script:e,version:t,prefix:s}){const r=function(e){const t=o(),{[e]:n}=t;if(!n){let n=()=>
{};const o=new Promise((e=>
n=e));t[e]={isInjected:!1,isReady:()=>
o,readyResolve:n,prefixes:[],registerCustomElements:null}}return t[e]}(t),{isInjected:i,prefixes:c=[],registerCustomElements:d}=r,[u]=Object.entries(o()).filter((([e,n])=>
e!==t&&"object"==typeof n&&n.prefixes.includes(s)));if(u)throw new Error(`[Porsche Design System v${t}] prefix '${s}' is already registered with version '${u[0]}' of the Porsche Design System. Please use a different one.\nTake a look at document.${n} for more details.`);i||(function(e){const t=document.createElement("script");t.src=e,t.setAttribute("crossorigin",""),document.body.appendChild(t)}(e),r.isInjected=!0),c.includes(s)||(c.push(s),d&&d(s))}const r=(e={})=>
{const t="PORSCHE_DESIGN_SYSTEM_CDN";window[t]=e.cdn||window[t]||(window.location.origin.match(/\.cn$/)?"cn":"auto");const n="porscheDesignSystem";document[n]||(document[n]={}),document[n].cdn={url:"https://cdn.ui.porsche."+("cn"===window[t]?"cn":"com"),prefixes:[]},s({version:"3.28.0",script:document[n].cdn.url+"/porsche-design-system/components/porsche-design-system.v3.28.0.bb0e1f205b7459f9181a.js",prefix:e.prefix||""})};porscheDesignSystem=t})();porscheDesignSystem.load({prefix:''});porscheDesignSystem.load({prefix:'custom-prefix'});porscheDesignSystem.load({prefix:'another-prefix'})
</script>
Global settingsThemeChanges the theme of the application and any Porsche Design System component. It's possible to choose between forced theme light and dark. It's also possible to use auto, which applies light or dark theme depending on the operating system settings automatically.LightDarkAuto (sync with operating system)DirectionChanges the direction of HTML elements, mostly used on<html> tag to support languages which are read from right to left like e.g. Arabic.LTR (left-to-right)RTL (right-to-left)AutoText ZoomChanges the text size and values with unit rem or em relatively. This setting can be defined in browser settings for any website or by an application itself on<html> tag. To achieve WCAG 2.2 AA compliance it's obligatory to support text zoom up to at least 200%.100%130%150%200%