refactor to TS rest of partial views, preview and info view

Author: ricardo-devis-agullo

src/registry/routes/component-info.js

@@ -4,7 +4,7 @@ const parseAuthor = require('parse-author');
 const _ = require('lodash');
 
 const getComponentFallback = require('./helpers/get-component-fallback');
-const infoView = require('../views/info');
+const infoView = require('../views/info').default;
 const isUrlDiscoverable = require('./helpers/is-url-discoverable').default;
 const urlBuilder = require('../domain/url-builder');
 

src/registry/routes/component-preview.js

@@ -3,7 +3,7 @@
 const _ = require('lodash');
 
 const getComponentFallback = require('./helpers/get-component-fallback');
-const previewView = require('../views/preview');
+const previewView = require('../views/preview').default;
 const urlBuilder = require('../domain/url-builder');
 
 function componentPreview(err, req, res, component, templates) {
@@ -25,6 +25,7 @@ function componentPreview(err, req, res, component, templates) {
     return res.send(
       previewView({
         component,
+        // @ts-ignore
         dependencies: Object.keys(component.dependencies || {}),
         href: res.conf.baseUrl,
         liveReload,

src/registry/views/info.js renamed to src/registry/views/info.ts

@@ -1,12 +1,31 @@
-module.exports = vm => {
-  const componentAuthor = require('./partials/component-author')(vm);
-  const componentParameters = require('./partials/component-parameters')(vm);
-  const componentState = require('./partials/component-state')(vm);
-  const componentVersions = require('./partials/component-versions')(vm);
-  const infoJS = require('./static/info').default;
-  const layout = require('./partials/layout').default(vm);
-  const property = require('./partials/property').default();
-  const isTemplateLegacy = require('../../utils/is-template-legacy').default;
+import { Component } from '../../types';
+
+import getComponentAuthor from './partials/component-author';
+import getComponentParameters from './partials/component-parameters';
+import getComponentState from './partials/component-state';
+import getComponentVersions from './partials/component-versions';
+import infoJS from './static/info';
+import getLayout from './partials/layout';
+import getProperty from './partials/property';
+import isTemplateLegacy from '../../utils/is-template-legacy';
+
+interface Vm {
+  parsedAuthor: { name?: string; email?: string; url?: string };
+  component: Component;
+  dependencies: string[];
+  href: string;
+  sandBoxDefaultQs: string;
+  title: string;
+  repositoryUrl: string;
+}
+
+export default function info(vm: Vm): string {
+  const componentAuthor = getComponentAuthor(vm);
+  const componentParameters = getComponentParameters(vm);
+  const componentState = getComponentState(vm);
+  const componentVersions = getComponentVersions(vm);
+  const layout = getLayout(vm);
+  const property = getProperty();
 
   const showArray = (title, arr) =>
     property(title, !!arr && arr.length > 0 ? arr.join(', ') : 'none');
@@ -64,4 +83,4 @@ module.exports = vm => {
   </script>`;
 
   return layout({ content, scripts });
-};
+}

src/registry/views/partials/component-author.js renamed to src/registry/views/partials/component-author.ts

@@ -1,4 +1,10 @@
-module.exports = vm => () => {
+const componentAuthor = (vm: {
+  parsedAuthor: {
+    name?: string;
+    email?: string;
+    url?: string;
+  };
+}) => (): string => {
   const author = vm.parsedAuthor;
   let placeholder = '';
 
@@ -11,16 +17,14 @@ module.exports = vm => () => {
   }
 
   if (author.email) {
-    placeholder += `<span><a href="mailto:${author.email}">${
-      author.email
-    }</a>&nbsp;</span>`;
+    placeholder += `<span><a href="mailto:${author.email}">${author.email}</a>&nbsp;</span>`;
   }
 
   if (author.url) {
-    placeholder += `<span><a href="${author.url}" target="_blank">${
-      author.url
-    }</a></span>`;
+    placeholder += `<span><a href="${author.url}" target="_blank">${author.url}</a></span>`;
   }
 
   return `<div class="field"><p>Author:</p>${placeholder}</div>`;
 };
+
+export default componentAuthor;

src/registry/views/partials/component-parameters.js renamed to src/registry/views/partials/component-parameters.ts

@@ -1,4 +1,10 @@
-module.exports = ({ component }) => () => {
+import { Component } from '../../../types';
+
+const componentParameters = ({
+  component
+}: {
+  component: Component;
+}) => (): string => {
   let parameters = `<h3>Parameters</h3>`;
 
   if (!component.oc.parameters) {
@@ -12,9 +18,7 @@ module.exports = ({ component }) => () => {
       : '';
     const defaultParam =
       !param.mandatory && param.default
-        ? `<br /><br /><span class="bold">Default:</span><span>${
-          param.default
-        }</span>`
+        ? `<br /><br /><span class="bold">Default:</span><span>${param.default}</span>`
         : '';
 
     return `<div class="row">
@@ -41,9 +45,11 @@ module.exports = ({ component }) => () => {
     <div class="row header">
       <div class="parameter">Parameters</div>
       <div class="parameter-description"></div>
-    </div>  
+    </div>
     ${rows}
   </div>`;
 
   return parameters;
 };
+
+export default componentParameters;

src/registry/views/partials/component-state.js renamed to src/registry/views/partials/component-state.ts

@@ -1,8 +1,16 @@
-module.exports = ({ component }) => () =>
+import { Component } from '../../../types';
+
+const componentState = ({
+  component
+}: {
+  component: Component;
+}) => (): string =>
   !component.oc.state
     ? ''
     : `<span class="details-state">
      <span class="component-state-${component.oc.state.toLowerCase()}">
        ${component.oc.state}
      </span>
    </span>`;
+
+export default componentState;

src/registry/views/partials/component-versions.js renamed to src/registry/views/partials/component-versions.ts

@@ -1,4 +1,10 @@
-module.exports = ({ component }) => () => {
+import { Component } from '../../../types';
+
+const componentVersions = ({
+  component
+}: {
+  component: Component;
+}) => (): string => {
   const componentOption = version =>
     `<option value="${version}"${
       version === component.version ? ' selected="selected"' : ''
@@ -8,3 +14,5 @@ module.exports = ({ component }) => () => {
     .map(componentOption)
     .join('')}</select>`;
 };
+
+export default componentVersions;

src/registry/views/partials/components-templates.ts

@@ -11,7 +11,7 @@ export default function componentsTemplates(vm: VM): string {
   }: {
     type: string;
     version: string;
-    externals: Array<{ global: string; url: string }>;
+    externals: Array<{ global: string | string[]; url: string }>;
   }) => {
     const externalLinks = externals.map(externalLink).join(', ');
     const externalsLabel = externalLinks ? `(Externals: ${externalLinks})` : '';

src/registry/views/partials/property.ts

@@ -1,6 +1,6 @@
 const property = () => (
   display: string,
-  value?: Date | string,
+  value?: Date | string | number,
   linked?: boolean
 ): string => {
   if (!value) return '';

src/registry/views/preview.js renamed to src/registry/views/preview.ts

@@ -1,12 +1,20 @@
-module.exports = vm => {
+import { Component, TemplateInfo } from '../../types';
+
+export default function preview(vm: {
+  href: string;
+  component: Component;
+  qs: string;
+  liveReload: string;
+  templates: TemplateInfo[];
+}): string {
   const baseUrl = vm.href.replace('http://', '//').replace('https://', '//');
   const { name, version } = vm.component;
   const componentHref = `${baseUrl}${name}/${version}/${vm.qs}`;
 
   return `<!DOCTYPE html>
   <html>
     <head>
-      <style>        
+      <style>
         html, body {
           width: 100%;
           height: 100%;
@@ -20,10 +28,10 @@ module.exports = vm => {
     <body>
       <oc-component href="${componentHref}"></oc-component>
       <script>window.oc=window.oc||{};oc.conf=oc.conf||{};oc.conf.templates=(oc.conf.templates||[]).concat(${JSON.stringify(
-    vm.templates
-  )});</script>
+        vm.templates
+      )});</script>
       <script src="${baseUrl}oc-client/client.js"></script>
       ${vm.liveReload}
     </body>
   </html>`;
-};
+}