Partial views ts

src/cli/domain/clean.ts

@@ -5,19 +5,19 @@ import path from 'path';
 
 const getComponentsByDir = makeGetComponentsByDir();
 
-export function fetchList(dirPath: string, callback: Callback<string[]>) {
+export function fetchList(dirPath: string, callback: Callback<string[]>): void {
   return getComponentsByDir(dirPath, (err, list) => {
     if (err) return (callback as any)(err);
     if (list.length === 0) return callback(null, []);
 
     const toRemove = list.map(folder => path.join(folder, 'node_modules'));
-    const folderExists = (folder, cb) =>
+    const folderExists = (folder: string, cb: Callback<boolean>) =>
       fs.exists(folder, exists => cb(null, exists));
 
     async.filterSeries(toRemove, folderExists, callback as any);
   });
 }
 
-export function remove(list: string[], callback: Callback<string>) {
+export function remove(list: string[], callback: Callback<string>): void {
   return async.eachSeries(list, fs.remove, callback as any);
 }

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/routes/index.js

@@ -8,7 +8,7 @@ const dateStringified = require('../../utils/date-stringify').default;
 const getComponentsHistory = require('./helpers/get-components-history')
   .default;
 const getAvailableDependencies = require('./helpers/get-available-dependencies');
-const indexView = require('../views');
+const indexView = require('../views').default;
 // @ts-ignore
 const packageInfo = require('../../../package.json');
 const urlBuilder = require('../domain/url-builder');

src/registry/views/index.js → src/registry/views/index.ts

@@ -1,17 +1,28 @@
-module.exports = vm => {
+import dependencies from './partials/components-dependencies';
+import history from './partials/components-history';
+import list from './partials/components-list';
+import templates from './partials/components-templates';
+import plugins from './partials/components-plugins';
+import indexJS from './static/index';
+
+import getLayout from './partials/layout';
+import getProperty from './partials/property';
+import { VM } from '../../types';
+
+export default function indexView(vm: VM): string {
   const tabs = {
-    dependencies: require('./partials/components-dependencies').default(vm),
-    history: require('./partials/components-history').default(vm),
-    list: require('./partials/components-list').default(vm),
-    templates: require('./partials/components-templates').default(vm),
-    plugins: require('./partials/components-plugins').default(vm)
+    dependencies: dependencies(vm),
+    history: history(vm),
+    list: list(vm),
+    templates: templates(vm),
+    plugins: plugins(vm)
   };
 
-  const indexJS = require('./static/index').default;
-  const layout = require('./partials/layout').default(vm);
-  const property = require('./partials/property').default();
+  const layout = getLayout(vm);
+  const property = getProperty();
 
-  const getCount = state => vm.stateCounts[state] || 0;
+  const getCount = (state: 'deprecated' | 'experimental') =>
+    vm.stateCounts[state] || 0;
   const isLocal = vm.type !== 'oc-registry';
 
   const componentsValue = `${vm.components.length} (${getCount(
@@ -52,4 +63,4 @@ module.exports = vm => {
 ${indexJS}</script>`;
 
   return layout({ content, scripts });
-};
+}

src/registry/views/info.js → src/registry/views/info.ts

@@ -1,14 +1,33 @@
-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';
 
-  const showArray = (title, arr) =>
+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: string, arr?: string[]) =>
     property(title, !!arr && arr.length > 0 ? arr.join(', ') : 'none');
 
   const { component, dependencies, href, repositoryUrl, sandBoxDefaultQs } = vm;
@@ -64,4 +83,4 @@ module.exports = vm => {
   </script>`;
 
   return layout({ content, scripts });
-};
+}

src/registry/views/partials/component-author.js → 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 → src/registry/views/partials/component-parameters.ts

@@ -1,20 +1,24 @@
-module.exports = ({ component }) => () => {
+import { Component, OcParameter } from '../../../types';
+
+const componentParameters = ({
+  component
+}: {
+  component: Component;
+}) => (): string => {
   let parameters = `<h3>Parameters</h3>`;
 
   if (!component.oc.parameters) {
     return `${parameters}<p class="w-100">none</p>`;
   }
 
-  const parameterRow = (param, paramName) => {
+  const parameterRow = (param: OcParameter, paramName: string) => {
     const mandatory = param.mandatory ? 'mandatory' : 'optional';
     const description = param.description
       ? `<span>${param.description}</span><br /><br />`
       : '';
     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 → 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 → src/registry/views/partials/component-versions.ts

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

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

@@ -1,6 +1,6 @@
 import { VM } from '../../../types';
 
-export default function componentsHistory(vm: VM) {
+export default function componentsHistory(vm: VM): string {
   const componentRow = ({
     name,
     publishDate,

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

@@ -1,4 +1,4 @@
-import { VM } from '../../../types';
+import { Component, VM } from '../../../types';
 import getSelectedCheckbox from './selected-checkbox';
 
 export default function componentsList(vm: VM): string {
@@ -9,7 +9,7 @@ export default function componentsList(vm: VM): string {
     ? '<div class="date">Updated</div><div class="activity">Activity</div>'
     : '';
 
-  const componentRow = component => {
+  const componentRow = (component: Component) => {
     const componentState = component.oc.state
       ? `<div class="state component-state-${component.oc.state.toLowerCase()}">${
           component.oc.state

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

@@ -1,6 +1,6 @@
 import { VM } from '../../../types';
 
-export default function componentsPlugins(vm: VM) {
+export default function componentsPlugins(vm: VM): string {
   const pluginRow = ([
     name,
     description

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

@@ -1,8 +1,13 @@
 import { VM } from '../../../types';
 
 export default function componentsTemplates(vm: VM): string {
-  const externalLink = ({ global, url }) =>
-    `<a href="${url}" target="_blank">${global}</a>`;
+  const externalLink = ({
+    global,
+    url
+  }: {
+    global: string | string[];
+    url: string;
+  }) => `<a href="${url}" target="_blank">${global}</a>`;
 
   const templateRow = ({
     externals,

src/registry/views/partials/layout.ts

@@ -6,7 +6,7 @@ const layout = (vm: { title: string; href: string }) => ({
 }: {
   content: string;
   scripts: string;
-}) => {
+}): string => {
   const href = vm.href.replace('http://', '//').replace('https://', '//');
 
   return `<!DOCTYPE html><html>

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 → 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>`;
-};
+}