@pure-ds/core 0.5.19 → 0.5.20

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pure-ds/core",
   "shortname": "pds",
-  "version": "0.5.19",
+  "version": "0.5.20",
   "description": "Pure Design System - Why develop a Design System when you can generate one?",
   "repository": {
     "type": "git",

package/packages/pds-cli/bin/pds-bootstrap.js

@@ -303,32 +303,39 @@ customElements.define(
 }
 
 function buildAppJs() {
-  return `import { PDS } from '@pure-ds/core';
-import { config } from '../../pds.config.js';
+  return `import { PDS } from "@pure-ds/core";
+import { config } from "../../pds.config.js";
 
 await PDS.start(config);
-PDS.theme = 'light';
 
-const main = document.querySelector('main');
-if (main && !main.querySelector('my-home')) {
-  main.innerHTML = '<my-home></my-home>';
+const main = document.querySelector("main");
+if (main && !main.querySelector("my-home")) {
+  main.innerHTML = "<my-home></my-home>";
 }
 
-const settingsBtn = document.createElement('button');
-settingsBtn.id = 'settings-btn';
-settingsBtn.className = 'icon-only btn-xs btn-outline';
-settingsBtn.setAttribute('aria-label', 'Settings');
-settingsBtn.innerHTML = '<pds-icon icon="gear"></pds-icon>';
+/**
+ * Generates an HTML NodeList by parsing the given HTML string
+ * @param {String} html
+ * @returns {NodeListOf<ChildNode>} DOM element
+ */
+const parseHTML = (html) => {
+  return new DOMParser().parseFromString(html, "text/html").body.childNodes;
+};
+
+const settingsBtn = parseHTML(
+  /*html*/
+  \`\n  <button id="settings-btn" class="icon-only btn-xs btn-outline" aria-label="Settings">\n    <pds-icon icon="gear"></pds-icon>\n  </button>\`,
+)[0];
+
 document.body.appendChild(settingsBtn);
 
-const drawer = document.createElement('pds-drawer');
-drawer.setAttribute('position', 'right');
-drawer.innerHTML =
-  '<div slot="drawer-header">Settings</div>' +
-  '<div slot="drawer-content"><my-theme></my-theme></div>';
+const drawer = document.createElement("pds-drawer");
+drawer.setAttribute("position", "right");
+
+drawer.innerHTML = /*html*/ \`<div slot="drawer-header">Settings</div>\n  <div slot="drawer-content"><my-theme></my-theme></div>\`;
 document.body.appendChild(drawer);
 
-settingsBtn.addEventListener('click', () => {
+settingsBtn.addEventListener("click", () => {
   drawer.open = true;
 });
 `;