@ixon-cdk/core 1.0.0-alpha.9 → 1.1.0-next.1

package/api/auth.service.js

@@ -1,30 +1,31 @@
-const fs = require("fs");
-const axios = require("axios");
-const ApiBaseService = require("./base.service");
+const fs = require('fs');
+const ApiBaseService = require('./base.service');
+const httpRequest = require('../http-request');
 
 module.exports = class AuthService extends ApiBaseService {
   logIn(credentials) {
     const c = credentials;
-    return axios.post(
-      `${this._getApiBaseUrl()}/access-tokens`,
-      { expiresIn: 86400 },
-      {
-        headers: {
-          ...this._getApiDefaultHeaders(),
-          "User-Agent": "ComponentDevKit",
-          Authorization: `Basic ${Buffer.from(
-            c.email + ":" + (c.otp || "") + ":" + c.password,
-            "utf-8"
-          ).toString("base64")}`,
-        },
-      }
-    );
+    return httpRequest({
+      method: 'POST',
+      url: `${this._getApiBaseUrl()}/access-tokens`,
+      data: { expiresIn: 86400 },
+      headers: {
+        ...this._getApiDefaultHeaders(),
+        'User-Agent': 'ComponentDevKit',
+        Authorization: `Basic ${Buffer.from(
+          `${c.email}:${c.otp || ''}:${c.password}`,
+          'utf-8',
+        ).toString('base64')}`,
+      },
+    });
   }
 
   logOut() {
     const secretId = this._getSecretId();
     if (secretId) {
-      return axios.delete(`${this._getApiBaseUrl()}/access-tokens/me`, {
+      return httpRequest({
+        method: 'DELETE',
+        url: `${this._getApiBaseUrl()}/access-tokens/me`,
         headers: {
           ...this._getApiDefaultHeaders(),
           Authorization: this._getApiAuthHeaderValue(),
@@ -40,8 +41,8 @@ module.exports = class AuthService extends ApiBaseService {
 
   remember(secretId) {
     fs.writeFileSync(this._getAccessTokenFilePath(), secretId, {
-      encoding: "utf8",
-      flag: "w",
+      encoding: 'utf8',
+      flag: 'w',
     });
   }
 

package/api/base.service.js

@@ -1,12 +1,12 @@
-const fs = require("fs");
-const path = require("path");
-const ConfigService = require("../config/config.service");
+const fs = require('fs');
+const path = require('path');
+const ConfigService = require('../config/config.service');
 
 module.exports = class ApiBaseService {
   _configSrv = new ConfigService();
 
   _getAccessTokenFilePath() {
-    return path.join(require("../utils").getRootDir(), ".accesstoken");
+    return path.join(require('../utils').getRootDir(), '.accesstoken');
   }
 
   _getApiAuthHeaderValue() {
@@ -19,9 +19,9 @@ module.exports = class ApiBaseService {
 
   _getApiDefaultHeaders() {
     return {
-      "Content-Type": "application/json",
-      "Api-Application": this._configSrv.getApiApplication(),
-      "Api-Version": this._configSrv.getApiVersion(),
+      'Content-Type': 'application/json',
+      'Api-Application': this._configSrv.getApiApplication(),
+      'Api-Version': this._configSrv.getApiVersion(),
     };
   }
 
@@ -29,7 +29,7 @@ module.exports = class ApiBaseService {
     let secretId;
     try {
       secretId = fs.readFileSync(this._getAccessTokenFilePath(), {
-        encoding: "utf-8",
+        encoding: 'utf-8',
       });
     } catch {
       // do nothing

package/api/deploy.service.js

@@ -1,38 +1,32 @@
-const fs = require("fs");
-const path = require("path");
-const axios = require("axios");
-const ApiBaseService = require("./base.service");
+const fs = require('fs');
+const path = require('path');
+const ApiBaseService = require('./base.service');
+const httpRequest = require('../http-request');
 
 module.exports = class DeployService extends ApiBaseService {
   deploy(companyId, templateId, file) {
     const url = `${this._getApiBaseUrl()}/page-component-templates/${templateId}/version-upload`;
-    const body = fs.readFileSync(
-      path.join(require("../utils").getRootDir(), file)
-    );
+    const body = fs.readFileSync(path.join(require('../utils').getRootDir(), file));
     const headers = {
       ...this._getApiDefaultHeaders(),
-      "Content-Type": "application/x-www-form-urlencoded",
-      "Api-Company": companyId,
+      'Content-Type': 'application/x-www-form-urlencoded',
+      'Api-Company': companyId,
       Authorization: this._getApiAuthHeaderValue(),
     };
-    return axios.post(url, body, { headers }).then((res) => res.data.data);
+    return httpRequest({ method: 'POST', url, data: body, headers }).then((res) => res.data.data);
   }
 
   deployAndPublish(companyId, templateId, file) {
     return this.deploy(companyId, templateId, file).then((data) =>
-      this._publish(companyId, data.publicId)
+      this._publish(companyId, data.publicId),
     );
   }
 
   fetchPublishable(companyId, templateId) {
-    return this._fetchDescTemplateVersions(companyId, templateId).then(
-      (versions) => {
-        const publishedIdx = versions.findIndex(
-          (v) => typeof v.publishedOn === "string"
-        );
-        return publishedIdx !== -1 ? versions.slice(0, publishedIdx) : versions;
-      }
-    );
+    return this._fetchDescTemplateVersions(companyId, templateId).then((versions) => {
+      const publishedIdx = versions.findIndex((v) => typeof v.publishedOn === 'string');
+      return publishedIdx !== -1 ? versions.slice(0, publishedIdx) : versions;
+    });
   }
 
   generatePreviewLink(companyId, versionId) {
@@ -40,32 +34,32 @@ module.exports = class DeployService extends ApiBaseService {
       this._fetchBrandingFqdn(companyId),
       this._fetchTemplateVersion(companyId, versionId),
     ])
-      .then(([fqdn, version]) => {
-        return this._fetchTemplate(companyId, version.template.publicId).then(
-          (template) => [fqdn, version, template]
-        );
-      })
+      .then(([fqdn, version]) =>
+        this._fetchTemplate(companyId, version.template.publicId).then((template) => [
+          fqdn,
+          version,
+          template,
+        ]),
+      )
       .then(([fqdn, version, template]) => {
-        const hash = require("../utils").generatePreviewHash(
+        const hash = require('../utils').generatePreviewHash(
           template.publicId,
           template.name,
           version.publicId,
           version.number,
-          version.mainPath
+          version.mainPath,
         );
         const search = `?pctpvw=${encodeURIComponent(hash)}`;
-        return `https://${fqdn || "[YOUR-PLATFORM-DOMAIN]"}/portal/${search}`;
+        return `https://${fqdn || '[YOUR-PLATFORM-DOMAIN]'}/portal/${search}`;
       });
   }
 
   publishLatestVersion(companyId, templateId) {
     return this.fetchPublishable(companyId, templateId).then((data) => {
       if (!data.length) {
-        return Promise.reject("Template has no publishable versions");
+        return Promise.reject('Template has no publishable versions');
       }
-      const latest = data.sort(
-        (v1, v2) => Number(v2.number) - Number(v1.number)
-      )[0];
+      const latest = data.sort((v1, v2) => Number(v2.number) - Number(v1.number))[0];
       return this._publish(companyId, latest.publicId);
     });
   }
@@ -73,26 +67,26 @@ module.exports = class DeployService extends ApiBaseService {
   publishVersion(companyId, templateId, versionNumber) {
     return this.fetchPublishable(companyId, templateId).then((data) => {
       if (!data.length) {
-        return Promise.reject("Template has no publishable versions");
+        return Promise.reject('Template has no publishable versions');
       }
       const _version = data.find((v) => v.number === String(versionNumber));
-      if (!!_version) {
+      if (_version) {
         return this._publish(companyId, _version.publicId);
       }
-      return Promise.reject("Could not match!");
+      return Promise.reject('Could not match!');
     });
   }
 
   _fetchBrandingFqdn(companyId) {
     const url = `${this._getApiBaseUrl()}/companies/me`;
-    const params = { fields: "branding(fqdn)" };
+    const params = { fields: 'branding(fqdn)' };
     const headers = {
       ...this._getApiDefaultHeaders(),
-      "Api-Company": companyId,
+      'Api-Company': companyId,
       Authorization: this._getApiAuthHeaderValue(),
     };
     // Lookup company FQDN (premium branding)
-    return axios.get(url, { params, headers }).then((res) => {
+    return httpRequest({ method: 'GET', url, params, headers }).then((res) => {
       const myCompany = res.data.data;
       if (myCompany.branding && myCompany.branding.fqdn) {
         return myCompany.branding.fqdn;
@@ -100,7 +94,7 @@ module.exports = class DeployService extends ApiBaseService {
       // Or fallback to sector FQDN
       const _url = `${this._getApiBaseUrl()}/sectors/me`;
       const _headers = { ...this._getApiDefaultHeaders() };
-      return axios.get(_url, { params, headers: _headers }).then((res) => {
+      return httpRequest({ method: 'GET', url: _url, params, headers: _headers }).then((res) => {
         const mySector = res.data.data;
         if (mySector.branding && mySector.branding.fqdn) {
           return mySector.branding.fqdn;
@@ -113,42 +107,40 @@ module.exports = class DeployService extends ApiBaseService {
   _fetchDescTemplateVersions(companyId, templateId) {
     const url = `${this._getApiBaseUrl()}/page-component-template-versions`;
     const params = {
-      fields: "*,template(*)",
+      fields: '*,template(*)',
       filters: `eq(template.publicId,"${templateId}")`,
-      "page-size": "100",
+      'page-size': '100',
     };
     const headers = {
       ...this._getApiDefaultHeaders(),
-      "Api-Company": companyId,
+      'Api-Company': companyId,
       Authorization: this._getApiAuthHeaderValue(),
     };
-    return axios.get(url, { params, headers }).then((res) => {
-      return res.data.data.sort(
-        (v1, v2) => Number(v2.number) - Number(v1.number)
-      );
-    });
+    return httpRequest({ method: 'GET', url, params, headers }).then((res) =>
+      res.data.data.sort((v1, v2) => Number(v2.number) - Number(v1.number)),
+    );
   }
 
   _fetchTemplate(companyId, templateId) {
     const url = `${this._getApiBaseUrl()}/page-component-templates/${templateId}`;
-    const params = { fields: "*" };
+    const params = { fields: '*' };
     const headers = {
       ...this._getApiDefaultHeaders(),
-      "Api-Company": companyId,
+      'Api-Company': companyId,
       Authorization: this._getApiAuthHeaderValue(),
     };
-    return axios.get(url, { params, headers }).then((res) => res.data.data);
+    return httpRequest({ method: 'GET', url, params, headers }).then((res) => res.data.data);
   }
 
   _fetchTemplateVersion(companyId, versionId) {
     const url = `${this._getApiBaseUrl()}/page-component-template-versions/${versionId}`;
-    const params = { fields: "*,template(*)" };
+    const params = { fields: '*,template(*)' };
     const headers = {
       ...this._getApiDefaultHeaders(),
-      "Api-Company": companyId,
+      'Api-Company': companyId,
       Authorization: this._getApiAuthHeaderValue(),
     };
-    return axios.get(url, { params, headers }).then((res) => res.data.data);
+    return httpRequest({ method: 'GET', url, params, headers }).then((res) => res.data.data);
   }
 
   _publish(companyId, versionId) {
@@ -156,9 +148,9 @@ module.exports = class DeployService extends ApiBaseService {
     const body = { published: true };
     const headers = {
       ...this._getApiDefaultHeaders(),
-      "Api-Company": companyId,
+      'Api-Company': companyId,
       Authorization: this._getApiAuthHeaderValue(),
     };
-    return axios.patch(url, body, { headers });
+    return httpRequest({ method: 'PATCH', url, data: body, headers });
   }
 };

package/config/config.service.js

@@ -1,25 +1,25 @@
-const fs = require("fs");
-const { merge } = require("lodash");
-const path = require("path");
-const { getRootDir, logFileCrudMessage, logErrorMessage } = require("../utils");
+const fs = require('fs');
+const { merge } = require('lodash');
+const path = require('path');
+const { getRootDir, logFileCrudMessage, logErrorMessage } = require('../utils');
 
 module.exports = class ConfigService {
   _config = { components: {} };
 
-  _path = path.join(getRootDir(), "config.json");
+  constructor(configFile = 'config.json') {
+    this._path = path.join(getRootDir(), configFile);
 
-  constructor() {
     let config;
 
     if (!fs.existsSync(this._path)) {
-      logErrorMessage(`No config file.`);
+      logErrorMessage('No config file.');
       process.exit();
     }
 
     try {
       config = require(this._path);
     } catch {
-      logErrorMessage(`Couldn't parse config file.`);
+      logErrorMessage("Couldn't parse config file.");
       process.exit();
     }
 
@@ -35,7 +35,7 @@ module.exports = class ConfigService {
   }
 
   getNewComponentRoot() {
-    return this._config.newComponentRoot || "components";
+    return this._config.newComponentRoot || 'components';
   }
 
   getPrefix() {
@@ -43,15 +43,15 @@ module.exports = class ConfigService {
   }
 
   getApiApplication() {
-    return this._config.apiApplication || "LtDdZKEPa5lK";
+    return this._config.apiApplication || 'LtDdZKEPa5lK';
   }
 
   getApiBaseUrl() {
-    return this._config.apiBaseUrl || "https://api.ayayot.com";
+    return this._config.apiBaseUrl || 'https://api.ayayot.com';
   }
 
   getApiVersion() {
-    return this._config.apiVersion || "2";
+    return this._config.apiVersion || '2';
   }
 
   addComponent(name, config) {
@@ -60,19 +60,15 @@ module.exports = class ConfigService {
   }
 
   extendComponent(name, config) {
-    this._config.components[name] = merge(
-      {},
-      this._config.components[name],
-      config
-    );
+    this._config.components[name] = merge({}, this._config.components[name], config);
     this._sync();
   }
 
   _sync() {
-    fs.writeFileSync(this._path, JSON.stringify(this._config, null, 2) + "\n", {
-      encoding: "utf8",
-      flag: "w",
+    fs.writeFileSync(this._path, `${JSON.stringify(this._config, null, 2)}\n`, {
+      encoding: 'utf8',
+      flag: 'w',
     });
-    logFileCrudMessage("UPDATE", "config.json");
+    logFileCrudMessage('UPDATE', 'config.json');
   }
 };

package/http-request.js

@@ -0,0 +1,28 @@
+const fs = require('fs');
+const path = require('path');
+const axios = require('axios');
+const { getRootDir, logErrorMessage } = require('./utils');
+
+module.exports = function request(options) {
+  const customPath = path.join(getRootDir(), 'http-request.js');
+
+  if (fs.existsSync(customPath)) {
+    const customRequest = require(customPath);
+
+    if (typeof customRequest !== 'function') {
+      logErrorMessage('The custom "http-request.js" file must export a function.');
+      process.exit();
+    }
+
+    const promise = customRequest(options);
+
+    if (typeof promise !== 'object' || typeof promise.then !== 'function') {
+      logErrorMessage('The exported function in the custom "http-request.js" file must return a Promise.');
+      process.exit();
+    }
+
+    return promise;
+  }
+
+  return axios.request(options);
+};

package/index.js

@@ -1,10 +1,10 @@
 module.exports = {
-  AuthService: require("./api/auth.service"),
-  DeployService: require("./api/deploy.service"),
-  ConfigService: require("./config/config.service"),
-  Server: require("./server"),
-  TemplateService: require("./template/template.service"),
-  ...require("./meta-files"),
-  ...require("./prompts"),
-  ...require("./utils"),
+  AuthService: require('./api/auth.service'),
+  DeployService: require('./api/deploy.service'),
+  ConfigService: require('./config/config.service'),
+  Server: require('./server'),
+  TemplateService: require('./template/template.service'),
+  ...require('./meta-files'),
+  ...require('./prompts'),
+  ...require('./utils'),
 };

package/meta-files.js

@@ -1,10 +1,14 @@
-const fs = require("fs");
-const path = require("path");
-const { debounce, uniq } = require("lodash");
-const rimraf = require("rimraf");
+const fs = require('fs');
+const path = require('path');
+const { debounce, uniq } = require('lodash');
+const rimraf = require('rimraf');
 
-const ICON_FILE_NAME = "icon.svg";
-const MANIFEST_FILE_NAME = "manifest.json";
+const ICON_FILE_NAME = 'icon.svg';
+const MANIFEST_FILE_NAME = 'manifest.json';
+const WATCH_OPTIONS = {
+  cwd: require('./utils').getRootDir(),
+  usePolling: process.platform !== 'darwin',
+};
 
 module.exports = {
   cleanDir(dir) {
@@ -14,11 +18,11 @@ module.exports = {
     fs.mkdirSync(dir, { recursive: true });
   },
   copyAssets(assets, inputDir, outputDir) {
-    const paths = uniq([MANIFEST_FILE_NAME, ICON_FILE_NAME, ...assets]).map(
-      (asset) => path.join(inputDir, asset)
+    const paths = uniq([MANIFEST_FILE_NAME, ICON_FILE_NAME, ...assets]).map((asset) =>
+      path.join(inputDir, asset),
     );
     paths.forEach((_path) => {
-      require("glob")
+      require('glob')
         .sync(_path)
         .forEach((file) => {
           const fileName = file.slice(inputDir.length + 1);
@@ -27,34 +31,36 @@ module.exports = {
     });
   },
   watchAssets(assets, inputDir, outputDir) {
-    const root = require("./utils").getRootDir();
-    return require("chokidar")
+    const root = require('./utils').getRootDir();
+    return require('chokidar')
       .watch(
         uniq([MANIFEST_FILE_NAME, ICON_FILE_NAME, ...assets]).map((asset) =>
-          path.join(inputDir, asset)
+          path.join(inputDir, asset),
         ),
-        { cwd: require("./utils").getRootDir(), ignoreInitial: true }
+        WATCH_OPTIONS,
       )
-      .on("all", (type, file) => {
+      .on('all', (type, file) => {
         const fileName = path.join(root, file).slice(inputDir.length + 1);
         switch (type) {
-          case "add":
-          case "change":
+          case 'add':
+          case 'change':
             _copyFileNameFromToSync(fileName, inputDir, outputDir);
             break;
-          case "unlink":
+          case 'unlink':
             if (fs.existsSync(path.join(outputDir, fileName))) {
               rimraf.sync(path.join(outputDir, fileName));
             }
             break;
+          default:
+            break;
         }
       });
   },
-  watchInputDir: function (dir, watchCallback) {
+  watchInputDir(dir, watchCallback) {
     const _debouncedCallback = debounce(() => watchCallback(), 300);
-    require("chokidar")
-      .watch([`${dir}/**`], { ignoreInitial: true })
-      .on("all", (_, _path) => {
+    require('chokidar')
+      .watch([`${dir}/**`], WATCH_OPTIONS)
+      .on('all', (_, _path) => {
         if (
           _path.endsWith(path.join(dir, MANIFEST_FILE_NAME)) ||
           _path.endsWith(path.join(dir, ICON_FILE_NAME))
@@ -67,11 +73,11 @@ module.exports = {
   },
   writeDemoFile: function writeDemoFile(tag, outputDir, outputFile) {
     const demoFileContent = `<meta charset="utf-8">\n<title>${tag} demo</title>\n<script src="./${path.basename(
-      outputFile
+      outputFile,
     )}"></script>\n\n\n<${tag}></${tag}>\n\n`;
     fs.writeFileSync(`${outputDir}/demo.html`, demoFileContent, {
-      encoding: "utf8",
-      flag: "w",
+      encoding: 'utf8',
+      flag: 'w',
     });
   },
 };

package/package.json

@@ -1,25 +1,24 @@
 {
   "name": "@ixon-cdk/core",
-  "version": "1.0.0-alpha.9",
+  "version": "1.1.0-next.1",
   "description": "",
   "main": "index.js",
   "author": "",
   "license": "ISC",
   "dependencies": {
     "app-root-dir": "^1.0.2",
-    "archiver": "^5.3.0",
-    "axios": "^0.21.4",
+    "archiver": "^5.3.1",
+    "axios": "^0.26.1",
     "chalk": "^4.1.2",
-    "chokidar": "^3.5.2",
+    "chokidar": "^3.5.3",
     "crypto-js": "^4.1.1",
-    "debounce": "^1.2.1",
-    "express": "^4.17.1",
-    "glob": "^7.2.0",
+    "express": "^4.17.3",
+    "glob": "^8.0.1",
     "livereload": "^0.9.3",
     "lodash": "^4.17.21",
     "opener": "^1.5.2",
-    "prompts": "^2.4.1",
+    "prompts": "^2.4.2",
     "rimraf": "^3.0.2",
-    "yargs": "^17.1.1"
+    "yargs": "^17.4.1"
   }
 }

package/prompts.js

@@ -1,31 +1,31 @@
 module.exports = {
-  promptCompanyId: function(name) {
+  promptCompanyId(name) {
     return {
-      type: "text",
+      type: 'text',
       name,
-      message: "What is the ID of your Company?",
+      message: 'What is the ID of your Company?',
       validate: (value) => {
         if (!value) {
-          return "Company ID is required.";
+          return 'Company ID is required.';
         }
         if (!/^[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{4}$/.test(value)) {
-          return "Invalid company ID.";
+          return 'Invalid company ID.';
         }
         return true;
       },
     };
   },
-  promptPageComponentTemplateId: function(name) {
+  promptPageComponentTemplateId(name) {
     return {
-      type: "text",
+      type: 'text',
       name,
-      message: "What is the ID of the PageComponentTemplate?",
+      message: 'What is the ID of the PageComponentTemplate?',
       validate: (value) => {
         if (!value) {
-          return "Template ID is required.";
+          return 'Template ID is required.';
         }
         if (!/^[a-zA-Z0-9]{12}$/.test(value)) {
-          return "Invalid template ID.";
+          return 'Invalid template ID.';
         }
         return true;
       },

package/server/index.js

@@ -1,32 +1,34 @@
-const path = require("path");
-const express = require("express");
-const ConfigService = require("../config/config.service");
+const path = require('path');
+const express = require('express');
+const liveReload = require('livereload');
+const ConfigService = require('../config/config.service');
+
+const LR_PORT_DEFAULT = 35729;
 
 module.exports = class Server {
   constructor(opts) {
     this._configSrv = new ConfigService();
-    this._opts = Object.assign(
-      { port: 8000, componentBasePath: "components" },
-      opts
-    );
+    this._rootDir = require('../utils').getRootDir();
+    this._opts = {
+      port: 8000,
+      componentBasePath: 'components',
+      ...opts,
+    };
   }
 
   serve(names) {
     const app = express();
 
     // Cache
-    app.use(function (_, res, next) {
-      res.header("Cache-Control", "no-store");
+    app.use((_, res, next) => {
+      res.header('Cache-Control', 'no-store');
       next();
     });
 
     // CORS
-    app.use(function (_, res, next) {
-      res.header("Access-Control-Allow-Origin", "*");
-      res.header(
-        "Access-Control-Allow-Headers",
-        "Origin, X-Requested-With, Content-Type, Accept"
-      );
+    app.use((_, res, next) => {
+      res.header('Access-Control-Allow-Origin', '*');
+      res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
       next();
     });
 
@@ -35,35 +37,33 @@ module.exports = class Server {
       names.forEach((name) => {
         const outputDir = this._getOutputDir(name);
         if (outputDir) {
-          const dir = path.resolve(require("../utils").getRootDir(), outputDir);
-          app.use(
-            `/${this._opts.componentBasePath}/${name}`,
-            express.static(dir)
-          );
+          const dir = path.resolve(this._rootDir, outputDir);
+          app.use(`/${this._opts.componentBasePath}/${name}`, express.static(dir));
         }
       });
     }
 
     // Adds live reload watchers
-    const lrServer = require("livereload").createServer();
-    const outputs = names.flatMap((name) => [
-      this._getOutput(name),
-      `dist/${name}/manifest.json`,
-    ]);
-
-    const watcher = require("chokidar").watch(outputs, { ignoreInitial: true, usePolling: true });
-    watcher.on("change", require("debounce")(() => lrServer,refresh("/"), 500));
-    process.on("exit", () => {
-      lrServer.close();
-      watcher.close();
+    const lrServer = liveReload.createServer({
+      port: this._opts.liveReloadPort,
     });
+    const _refresh = () => lrServer.refresh('/');
+    const _debouncedRefresh = require('lodash/debounce')(_refresh, 250);
+    names
+      .flatMap((name) => [
+        [path.join(this._rootDir, this._getOutput(name)), 100],
+        [path.join(this._rootDir, `dist/${name}/manifest.json`), 500],
+      ])
+      .forEach(([filename, interval]) =>
+        require('fs').watchFile(filename, { interval }, _debouncedRefresh),
+      );
 
     // Simulator app
-    const appDir = path.dirname(require.resolve("@ixon-cdk/simulator"));
-    app.get(`/${this._opts.componentBasePath}/*`, function (req, res) {
+    const appDir = path.dirname(require.resolve('@ixon-cdk/simulator'));
+    app.get(`/${this._opts.componentBasePath}/*`, (req, res) => {
       res.sendStatus(404);
     });
-    app.get(`/config.json`, (req, res) => {
+    app.get('/config.json', (req, res) => {
       res.send({
         api: {
           appId: this._configSrv.getApiApplication(),
@@ -72,22 +72,32 @@ module.exports = class Server {
         },
       });
     });
-    app.get("*.*", express.static(appDir));
-    app.all("*", function (req, res) {
-      res.status(200).sendFile(`/index.html`, { root: appDir });
+    app.get('*.*', express.static(appDir));
+    app.all('*', (req, res) => {
+      res.status(200).sendFile('/index.html', { root: appDir });
     });
 
-    app.listen(this._opts.port);
+    this.server = app.listen(this._opts.port);
   }
 
   openSimulator(name = null) {
     const url = this._getComponentUrl(name);
-    const queryString = url ? `?pct-url=${encodeURIComponent(url)}` : "";
-    require("opener")(`${this._getBaseUrl()}/${queryString}`);
+    const lrPort = this._opts.liveReloadPort;
+    const params = new URLSearchParams();
+    if (url) {
+      params.set('pct-url', url);
+    }
+    if (lrPort !== LR_PORT_DEFAULT) {
+      params.set('lr-port', lrPort);
+    }
+    const queryString = params.toString();
+    const openUrl = `${this._getBaseUrl()}/?${queryString}`;
+    require('opener')(openUrl);
   }
 
   _getBaseUrl() {
-    return `http://localhost:${this._opts.port}`;
+    const address = this.server.address();
+    return `http://localhost:${address.port}`;
   }
 
   _getComponentUrl(name) {

package/template/template.service.js

@@ -1,31 +1,152 @@
-const fs = require("fs");
-const path = require("path");
-const prompts = require("prompts");
+const fs = require('fs');
+const path = require('path');
+const prompts = require('prompts');
 
 const {
+  getFiles,
   getRootDir,
   ensureModule,
+  logErrorMessage,
   logFileCrudMessage,
   pascalCase,
-} = require("../utils");
-const ConfigService = require("../config/config.service");
+} = require('../utils');
+const ConfigService = require('../config/config.service');
 
 module.exports = class TemplateService {
   _configSrv = new ConfigService();
 
+  _rootDir = getRootDir();
+
   _schemas = {};
 
   constructor() {
     this._discover();
   }
 
+  async addFromExample(componentName, componentPrefix) {
+    const examplesRoot = path.join(this._rootDir, 'node_modules/component-examples');
+
+    if (!fs.existsSync(examplesRoot)) {
+      logErrorMessage("Package 'ixoncloud/component-examples' is not installed.");
+      process.exit();
+    }
+
+    const examplesConfigSrv = new ConfigService('node_modules/component-examples/config.json');
+    const { components } = examplesConfigSrv._config;
+
+    if (!Object.keys(components).length) {
+      logErrorMessage('No examples found.');
+      process.exit();
+    }
+
+    const exampleComponentRoot = examplesConfigSrv.getNewComponentRoot();
+    const examplePrefix = examplesConfigSrv.getPrefix();
+
+    const result = await prompts({
+      type: 'select',
+      name: 'name',
+      message: 'Pick a template',
+      choices: Object.keys(components).map((name) => ({ title: name, value: name })),
+      initial: 0,
+    });
+    const exampleName = result.name;
+
+    if (!exampleName) {
+      process.exit();
+    } else if (!components[exampleName]) {
+      logErrorMessage(`Example '${exampleName}' is not configured.`);
+      process.exit();
+    }
+
+    const { build } = components[exampleName].runner;
+    const { builder } = build;
+    const isVue = builder.startsWith('@ixon-cdk/vue-builder');
+    const isStatic = builder.startsWith('@ixon-cdk/static-builder');
+    const isSvelte = builder.startsWith('@ixon-cdk/svelte-builder');
+
+    // find source files, read and replace.
+    const exampleDir = path.join(examplesRoot, exampleComponentRoot, exampleName);
+    const inputFilePath = path.join(exampleDir, build.input);
+    let inputFileContents = fs.readFileSync(inputFilePath, { encoding: 'utf-8' });
+
+    if (isVue) {
+      inputFileContents = this._findAndReplaceVueInputFile(inputFileContents, componentName);
+    } else if (isStatic) {
+      inputFileContents = this._findAndReplaceStaticInputFile(
+        inputFileContents,
+        examplePrefix,
+        exampleName,
+        componentPrefix,
+        componentName,
+      );
+    }
+
+    // find manifest file, read and replace.
+    const manifestFilePath = path.join(path.dirname(inputFilePath), 'manifest.json');
+    const manifestFileContents = JSON.parse(fs.readFileSync(manifestFilePath));
+    manifestFileContents.main = `${this._getTag(componentPrefix, componentName)}.min.js`;
+    manifestFileContents.version = '1';
+
+    let input;
+    if (isVue) {
+      input = `${componentName}.vue`;
+    } else if (isStatic) {
+      input = `${componentName}.js`;
+    } else if (isSvelte) {
+      input = `${componentName}.svelte`;
+    }
+
+    const files = await getFiles(exampleDir).catch(logErrorMessage);
+
+    // find and install any missing dependencies.
+    files.forEach((file) => {
+      if (/\.(jsx?|tsx?|svelte|vue)$/i.test(file)) {
+        const fileContents = fs.readFileSync(file);
+        const { dependencies } = require(path.join(examplesRoot, 'package.json'));
+        this._checkDependencies(fileContents, dependencies || {});
+      }
+    });
+
+    // else start copying input, and menifest files
+    const componentRoot = this._configSrv.getNewComponentRoot();
+    const dir = path.join(this._rootDir, componentRoot, componentName);
+    const _logCreatedInDir = (fileName) => {
+      logFileCrudMessage('CREATE', path.join(componentRoot, componentName, fileName));
+    };
+    fs.mkdirSync(dir, { recursive: true });
+
+    files
+      .map((file) => file.slice(exampleDir.length + 1))
+      .forEach((file) => {
+        // create directory if it doesn't exist.
+        const _dir = path.dirname(path.join(dir, file));
+        if (!fs.existsSync(_dir)) {
+          fs.mkdirSync(_dir, { recursive: true });
+        }
+        // for the input-file and manifest use the replaced file contents.
+        if (file === build.input) {
+          fs.writeFileSync(path.join(dir, input), inputFileContents, { encoding: 'utf-8' });
+          _logCreatedInDir(input);
+        } else if (file === 'manifest.json') {
+          const json = `${JSON.stringify(manifestFileContents, null, 2)}\n`;
+          fs.writeFileSync(path.join(dir, file), json, { encoding: 'utf-8' });
+          _logCreatedInDir(file);
+        } else {
+          fs.copyFileSync(path.join(exampleDir, file), path.join(dir, file));
+          _logCreatedInDir(file);
+        }
+      });
+
+    return Promise.resolve({ config: { runner: { build: { builder, input } } } });
+  }
+
   async add(componentName, componentPrefix) {
     let schema;
 
     const result = await prompts({
-      type: "select",
-      name: "templateName",
-      message: "Pick a template",
+      type: 'select',
+      name: 'templateName',
+      message: 'Pick a template',
       choices: Object.keys(this._schemas).map((key) => ({
         title: this._schemas[key].name,
         value: key,
@@ -33,23 +154,19 @@ module.exports = class TemplateService {
       initial: 0,
     });
 
-    const tag = componentPrefix
-      ? `${componentPrefix}-${componentName}`
-      : componentName;
-
     if (result) {
       schema = this._schemas[result.templateName];
     }
 
     if (schema) {
-      const context = { name: componentName, tag };
+      const context = { name: componentName, tag: this._getTag(componentPrefix, componentName) };
       let variantIdx = null;
 
       if (schema.variants) {
         const _result = await prompts({
-          type: "select",
-          name: "variantIdx",
-          message: "Pick a variant",
+          type: 'select',
+          name: 'variantIdx',
+          message: 'Pick a variant',
           choices: schema.variants.map((variant, index) => ({
             title: variant.name,
             value: index,
@@ -65,31 +182,28 @@ module.exports = class TemplateService {
       schema = this._interpolateSchema(schema, context);
 
       if (schema.config.runner) {
-        const modulesNames = Object.keys(schema.config.runner).reduce(
-          (names, cmd) => {
-            if (schema.config.runner[cmd].builder) {
-              const name = schema.config.runner[cmd].builder.split(":")[0];
-              if (!names.includes(name)) {
-                return [...names, name];
-              }
+        const modulesNames = Object.keys(schema.config.runner).reduce((names, cmd) => {
+          if (schema.config.runner[cmd].builder) {
+            const name = schema.config.runner[cmd].builder.split(':')[0];
+            if (!names.includes(name)) {
+              return [...names, name];
             }
-            return names;
-          },
-          []
-        );
+          }
+          return names;
+        }, []);
         modulesNames.forEach((name) => ensureModule(name));
       }
 
-      const root = this._configSrv.getNewComponentRoot();
+      const componentRoot = this._configSrv.getNewComponentRoot();
 
       schema.files.forEach((file) => {
-        file.dest = `${root}/${componentName}/${file.dest}`;
+        file.dest = `${componentRoot}/${componentName}/${file.dest}`;
         this.createFile(file, context);
       });
 
       if (variantIdx !== null) {
         schema.variants[variantIdx].files.forEach((file) => {
-          file.dest = `${root}/${componentName}/${file.dest}`;
+          file.dest = `${componentRoot}/${componentName}/${file.dest}`;
           this.createFile(file, context);
         });
       }
@@ -99,56 +213,126 @@ module.exports = class TemplateService {
   }
 
   createFile(file, ctx) {
-    const rootDir = getRootDir();
-    fs.mkdirSync(path.dirname(path.join(rootDir, file.dest)), {
+    fs.mkdirSync(path.dirname(path.join(this._rootDir, file.dest)), {
       recursive: true,
     });
     if (file.interpolateContent) {
       const text = fs.readFileSync(
-        path.join(
-          path.dirname(require.resolve("@ixon-cdk/templates")),
-          file.source
-        ),
-        { encoding: "utf-8" }
+        path.join(path.dirname(require.resolve('@ixon-cdk/templates')), file.source),
+        { encoding: 'utf-8' },
       );
       const data = this._interpolateText(text, ctx);
-      fs.writeFileSync(path.join(rootDir, file.dest), data, {
-        encoding: "utf-8",
+      fs.writeFileSync(path.join(this._rootDir, file.dest), data, {
+        encoding: 'utf-8',
       });
     } else {
       fs.copyFileSync(
-        path.join(
-          path.dirname(require.resolve("@ixon-cdk/templates")),
-          file.source
-        ),
-        path.join(rootDir, file.dest)
+        path.join(path.dirname(require.resolve('@ixon-cdk/templates')), file.source),
+        path.join(this._rootDir, file.dest),
       );
     }
-    logFileCrudMessage("CREATE", file.dest);
+    logFileCrudMessage('CREATE', file.dest);
+  }
+
+  /**
+   * This script loops over a dependencies object and will check if the provided file contents is
+   * importing any. When that is the case, it will first check for that package whether it could
+   * already be a depencency in your workspace. If not, the package will get installed and saved.
+   */
+  _checkDependencies(fileContents, dependencies) {
+    const rootDeps = require(path.join(this._rootDir, 'package.json')).dependencies || {};
+    Object.keys(dependencies).forEach((pkg) => {
+      const matcher = new RegExp(`^\\s*import.*\\s['"]${pkg}\\S*['"]`, 'gm');
+      if (matcher.test(fileContents) && !(pkg in rootDeps)) {
+        const version = dependencies[pkg];
+        console.log(`Installing package '${pkg}'...`);
+        require('child_process').execSync(`npm i ${pkg}@${version} --save`);
+      }
+    });
+  }
+
+  /**
+   * This script will find and replace the component name definition in a vue (SFC) input file.
+   */
+  _findAndReplaceVueInputFile(fileContents, componentName) {
+    const matcher = /export\s+default\s+{\s+name:\s+['"](\S+)['"]/gm;
+    return fileContents.replaceAll(matcher, (match, p1) => match.replace(p1, componentName));
+  }
+
+  /**
+   * This script will find and replace the component class definition and the arguments for the
+   * custom element define method in a static input file.
+   *
+   * Given the example input file has the follwing contents:
+   *
+   * ```js
+   * class PctExample extends HTMLElement {
+   *   ...
+   * }
+   *
+   * customElements.define('pct-example', PctExample);
+   * ```
+   *
+   * ...if your workspace prefix is "abc" and your component name is "from-example", the content
+   * will be transformed into:
+   *
+   * ```js
+   * class AbcFromExample extends HTMLElement {
+   *   ...
+   * }
+   *
+   * customElements.define('abc-from-example', AbcFromExample);
+   * ```
+   */
+  _findAndReplaceStaticInputFile(
+    fileContents,
+    searchPrefix,
+    searchName,
+    replacementPrefix,
+    replacementName,
+  ) {
+    const searchTag = this._getTag(searchPrefix, searchName);
+    const replacementTag = this._getTag(replacementPrefix, replacementName);
+    return fileContents
+      .replaceAll(new RegExp(`class\\s+(${pascalCase(searchTag)})`, 'gm'), (match, p1) =>
+        match.replace(p1, pascalCase(replacementTag)),
+      )
+      .replaceAll(
+        new RegExp(
+          `define\\s*\\(\\s*['"](${searchTag})['"]\\s*,\\s+(${pascalCase(searchTag)})\\)`,
+          'gm',
+        ),
+        (match, p1, p2) =>
+          match.replace(p1, replacementTag).replace(p2, pascalCase(replacementTag)),
+      );
   }
 
   _discover() {
-    const dir = path.dirname(require.resolve("@ixon-cdk/templates"));
+    const dir = path.dirname(require.resolve('@ixon-cdk/templates'));
     const files = fs.readdirSync(dir);
     files.forEach((file) => {
       if (fs.lstatSync(path.join(dir, file)).isDirectory()) {
-        const schemaFile = path.join(dir, file, "schema.json");
+        const schemaFile = path.join(dir, file, 'schema.json');
         if (fs.existsSync(schemaFile)) {
           const schema = JSON.parse(fs.readFileSync(schemaFile));
-          this._schemas = Object.assign({}, this._schemas, { [file]: schema });
+          this._schemas = { ...this._schemas, [file]: schema };
         }
       }
     });
   }
 
+  _getTag(prefix, name) {
+    return prefix ? `${prefix}-${name}` : name;
+  }
+
   _interpolateSchema(schema, params) {
     return JSON.parse(this._interpolateText(JSON.stringify(schema), params));
   }
 
   _interpolateText(text, params) {
     return text
-      .replace(/\{name\}/g, params.name)
-      .replace(/\{tag\}/g, params.tag)
-      .replace(/\{pascalCase\(tag\)\}/g, pascalCase(params.tag));
+      .replace(/<%=\s*name\s*%>/g, params.name)
+      .replace(/<%=\s*tag\s*%>/g, params.tag)
+      .replace(/<%=\s*classify\(\s*tag\s*\)\s*%>/g, pascalCase(params.tag));
   }
 };

package/utils.js

@@ -1,20 +1,18 @@
-const fs = require("fs");
-const path = require("path");
-const chalk = require("chalk");
-const flow = require("lodash/flow");
-const camelCase = require("lodash/camelCase");
-const upperFirst = require("lodash/upperFirst");
+const fs = require('fs');
+const path = require('path');
+const chalk = require('chalk');
+const flow = require('lodash/flow');
+const camelCase = require('lodash/camelCase');
+const upperFirst = require('lodash/upperFirst');
 
 function getArgv() {
   const remain = process.argv.slice(2);
-  const argv = require("yargs/yargs")(remain).argv;
+  const { argv } = require('yargs/yargs')(remain);
 
   // version argument fix
-  if ("version" in argv) {
-    const versionArg = remain.find((arg) =>
-      /^--version=("[0-9]+"|'[0-9]+'|[0-9]+)$/.test(arg)
-    );
-    if (!!versionArg) {
+  if ('version' in argv) {
+    const versionArg = remain.find((arg) => /^--version=("[0-9]+"|'[0-9]+'|[0-9]+)$/.test(arg));
+    if (versionArg) {
       const matches = versionArg.match(/^--version=['"]?([0-9]+)['"]?$/);
       argv.version = Number(matches[1]);
     }
@@ -24,7 +22,7 @@ function getArgv() {
 }
 
 function getRootDir() {
-  return require("app-root-dir").get();
+  return require('app-root-dir').get();
 }
 
 function logErrorMessage(message) {
@@ -33,10 +31,12 @@ function logErrorMessage(message) {
 
 function logFileCrudMessage(crud, file) {
   switch (crud) {
-    case "CREATE":
-    case "UPDATE":
+    case 'CREATE':
+    case 'UPDATE':
       console.log(`${chalk.green(crud)} ${file}`);
       break;
+    default:
+      break;
   }
 }
 
@@ -55,24 +55,30 @@ function moduleExists(moduleName) {
 }
 
 function ensureModule(moduleName) {
-  if (!moduleName.startsWith("@ixon-cdk/")) {
-    return logErrorMessage("Cannot install this module.");
+  if (!moduleName.startsWith('@ixon-cdk/')) {
+    logErrorMessage('Cannot install this module.');
+    return;
   }
   if (!moduleExists(moduleName)) {
     console.log(`Installing package '${moduleName}'...`);
-    require("child_process").execSync(`npm install --save-dev ${moduleName}`);
+    if (moduleName.startsWith('@ixon-cdk/')) {
+      const cdkVersion = require('./package.json').version;
+      require('child_process').execSync(`npm install --save-dev ${moduleName}@${cdkVersion}`);
+    } else {
+      require('child_process').execSync(`npm install --save-dev ${moduleName}`);
+    }
   }
 }
 
 function zip(output, callback) {
   const outputDir = path.dirname(output);
-  const zipFile = path.join(outputDir + ".zip");
+  const zipFile = path.join(`${outputDir}.zip`);
   const stream = fs.createWriteStream(zipFile);
-  stream.on("close", () => {
-    require("rimraf").sync(outputDir);
+  stream.on('close', () => {
+    require('rimraf').sync(outputDir);
     callback(zipFile);
   });
-  const archive = require("archiver")("zip", { zlib: { level: 9 } });
+  const archive = require('archiver')('zip', { zlib: { level: 9 } });
   archive.pipe(stream);
   archive.directory(outputDir, path.basename(outputDir));
   archive.finalize();
@@ -81,7 +87,7 @@ function zip(output, callback) {
 const pascalCase = flow(camelCase, upperFirst);
 
 function apiHttpErrorToMessage(error) {
-  if (typeof error === "string") {
+  if (typeof error === 'string') {
     logErrorMessage(error);
     process.exit();
   }
@@ -90,28 +96,18 @@ function apiHttpErrorToMessage(error) {
     if (errors) {
       logErrorMessage(
         errors
-          .map((err) =>
-            !!err.propertyName
-              ? `${err.propertyName}: ${err.message}`
-              : err.message
-          )
-          .join("\n")
+          .map((err) => (err.propertyName ? `${err.propertyName}: ${err.message}` : err.message))
+          .join('\n'),
       );
       process.exit();
     }
   }
-  logErrorMessage("Unexpected error.");
+  logErrorMessage('Unexpected error.');
   console.log(error);
   process.exit();
 }
 
-function generatePreviewHash(
-  templateId,
-  templateName,
-  versionId,
-  versionNumber,
-  versionMainPath
-) {
+function generatePreviewHash(templateId, templateName, versionId, versionNumber, versionMainPath) {
   const ref = {
     tid: templateId,
     tnm: templateName,
@@ -119,14 +115,26 @@ function generatePreviewHash(
     vnr: versionNumber,
     vmp: versionMainPath,
   };
-  const salt = "A9qJ03jh";
-  return require("crypto-js").AES.encrypt(JSON.stringify(ref), salt).toString();
+  const salt = 'A9qJ03jh';
+  return require('crypto-js').AES.encrypt(JSON.stringify(ref), salt).toString();
+}
+
+async function getFiles(dir) {
+  const dirents = await fs.promises.readdir(dir, { withFileTypes: true });
+  const files = await Promise.all(
+    dirents.map((dirent) => {
+      const res = path.resolve(dir, dirent.name);
+      return dirent.isDirectory() ? getFiles(res) : res;
+    }),
+  );
+  return Array.prototype.concat(...files);
 }
 
 module.exports = {
   getArgv,
   getRootDir,
   logErrorMessage,
+  getFiles,
   logFileCrudMessage,
   logSuccessMessage,
   moduleExists,