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

package/config/config.service.js

@@ -6,9 +6,9 @@ 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)) {
@@ -19,7 +19,7 @@ module.exports = class ConfigService {
     try {
       config = require(this._path);
     } catch {
-      logErrorMessage('Couldn\'t parse config file.');
+      logErrorMessage("Couldn't parse config file.");
       process.exit();
     }
 
@@ -60,11 +60,7 @@ 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();
   }
 

package/package.json

@@ -1,24 +1,24 @@
 {
   "name": "@ixon-cdk/core",
-  "version": "1.0.0",
+  "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",
-    "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/server/index.js

@@ -1,7 +1,10 @@
 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();
@@ -25,10 +28,7 @@ module.exports = class Server {
     // CORS
     app.use((_, res, next) => {
       res.header('Access-Control-Allow-Origin', '*');
-      res.header(
-        'Access-Control-Allow-Headers',
-        'Origin, X-Requested-With, Content-Type, Accept',
-      );
+      res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
       next();
     });
 
@@ -38,16 +38,15 @@ module.exports = class Server {
         const outputDir = this._getOutputDir(name);
         if (outputDir) {
           const dir = path.resolve(this._rootDir, outputDir);
-          app.use(
-            `/${this._opts.componentBasePath}/${name}`,
-            express.static(dir),
-          );
+          app.use(`/${this._opts.componentBasePath}/${name}`, express.static(dir));
         }
       });
     }
 
     // Adds live reload watchers
-    const lrServer = require('livereload').createServer();
+    const lrServer = liveReload.createServer({
+      port: this._opts.liveReloadPort,
+    });
     const _refresh = () => lrServer.refresh('/');
     const _debouncedRefresh = require('lodash/debounce')(_refresh, 250);
     names
@@ -55,7 +54,9 @@ module.exports = class Server {
         [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));
+      .forEach(([filename, interval]) =>
+        require('fs').watchFile(filename, { interval }, _debouncedRefresh),
+      );
 
     // Simulator app
     const appDir = path.dirname(require.resolve('@ixon-cdk/simulator'));
@@ -76,17 +77,27 @@ module.exports = class Server {
       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

@@ -3,8 +3,10 @@ const path = require('path');
 const prompts = require('prompts');
 
 const {
+  getFiles,
   getRootDir,
   ensureModule,
+  logErrorMessage,
   logFileCrudMessage,
   pascalCase,
 } = require('../utils');
@@ -13,12 +15,131 @@ 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;
 
@@ -33,16 +154,12 @@ 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) {
@@ -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,34 +213,100 @@ 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,
-        ),
+        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, {
+      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);
   }
 
+  /**
+   * 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 files = fs.readdirSync(dir);
@@ -141,14 +321,18 @@ module.exports = class TemplateService {
     });
   }
 
+  _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

@@ -61,7 +61,12 @@ function ensureModule(moduleName) {
   }
   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}`);
+    }
   }
 }
 
@@ -114,10 +119,22 @@ function generatePreviewHash(templateId, templateName, versionId, versionNumber,
   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,