Merge pull request #25 from davidecaruso/improvements

Improvements

.github/workflows/release.yaml

@@ -6,19 +6,22 @@ jobs:
     npm:
         runs-on: ubuntu-latest
         steps:
-            - name: Clone repository
+            - name: clone repository
               uses: actions/checkout@v3
 
-            - name: Set Node.js version
+            - name: set node.js version
               uses: actions/setup-node@v3
               with:
                   node-version: 16.x
                   registry-url: https://registry.npmjs.org
 
-            - name: Install dependencies
+            - name: install dependencies
               run: yarn install
 
-            - name: Publish to registry
-              run: npm publish
+            - name: build package
+              run: yarn build
+
+            - name: publish to registry
+              run: yarn publish
               env:
                   NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/test.yaml

@@ -7,22 +7,22 @@ jobs:
     eslint:
         runs-on: ubuntu-latest
         steps:
-            - name: Clone repository
+            - name: clone repository
               uses: actions/checkout@v3
 
-            - name: Set Node.js version
+            - name: set Node.js version
               uses: actions/setup-node@v3
               with:
                   node-version: 16.x
 
-            - name: Install dependencies
+            - name: install dependencies
               run: yarn install
 
             - name: Run ESLint
               run: yarn eslint
 
     test:
-        name: Node ${{ matrix.node }} on ${{ matrix.os }}
+        name: node ${{ matrix.node }} on ${{ matrix.os }}
         runs-on: ${{ matrix.os }}
 
         strategy:
@@ -32,21 +32,21 @@ jobs:
                 os: [ubuntu-latest]
 
         steps:
-            - name: Clone repository
+            - name: clone repository
               uses: actions/checkout@v3
 
-            - name: Set Node.js version
+            - name: set node.js version
               uses: actions/setup-node@v3
               with:
                   node-version: ${{ matrix.node }}
 
-            - name: Install dependencies
+            - name: install dependencies
               run: yarn install
 
-            - name: Run test coverage
+            - name: run test coverage
               run: yarn test:coverage
 
-            - name: Coveralls GitHub Action
+            - name: coveralls github action
               uses: coverallsapp/[email protected]
               with:
                   github-token: ${{ secrets.GITHUB_TOKEN }}
@@ -55,22 +55,22 @@ jobs:
     prettier:
         runs-on: ubuntu-latest
         steps:
-            - name: Clone repository
+            - name: clone repository
               uses: actions/checkout@v3
 
-            - name: Set Node.js version
+            - name: set node.js version
               uses: actions/setup-node@v3
               with:
                   node-version: 16.x
 
-            - name: Install dependencies
+            - name: install dependencies
               run: yarn install
 
-            - name: Run Prettier
+            - name: run prettier
               run: yarn prettier
 
     typescript:
-        name: Node ${{ matrix.node }} on ${{ matrix.os }}
+        name: node ${{ matrix.node }} on ${{ matrix.os }}
         runs-on: ${{ matrix.os }}
 
         strategy:
@@ -80,16 +80,16 @@ jobs:
                 os: [ubuntu-latest]
 
         steps:
-            - name: Clone repository
+            - name: clone repository
               uses: actions/checkout@v3
 
-            - name: Set Node.js version
+            - name: set node.js version
               uses: actions/setup-node@v3
               with:
                   node-version: ${{ matrix.node }}
 
-            - name: Install dependencies
+            - name: install dependencies
               run: yarn install
 
-            - name: Build
+            - name: build
               run: yarn build

README.md

@@ -3,10 +3,9 @@
 
 [![npm](https://img.shields.io/npm/v/shell.js.svg)](https://www.npmjs.com/package/shell.js)
 [![npm](https://img.shields.io/npm/dm/shell.js.svg)](https://www.npmjs.com/package/shell.js)
-[![snyk](https://snyk.io/test/github/davidecaruso/shell.js/badge.svg)](https://snyk.io/test/github/davidecaruso/shell.js)
-[![travis](https://travis-ci.org/davidecaruso/shell.js.svg?branch=master)](https://travis-ci.org/davidecaruso/shell.js)
-[![coveralls](https://coveralls.io/repos/github/davidecaruso/shell.js/badge.svg?branch=main)](https://coveralls.io/github/davidecaruso/shell.js?branch=main)
-![license](https://img.shields.io/github/license/davidecaruso/shell.js.svg)
+[![GitHub Workflow Status](https://img.shields.io/github/workflow/status/davidecaruso/shell.js/test/main)](https://github.com/davidecaruso/shell.js/actions)
+[![Coveralls](https://img.shields.io/coveralls/github/davidecaruso/shell.js/main)](https://coveralls.io/github/davidecaruso/shell.js?branch=main)
+![License](https://img.shields.io/github/license/davidecaruso/shell.js.svg)
 
 </p>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "shell.js",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "description": "A JavaScript library to create HTML terminals in web pages.",
   "author": "Davide Caruso <[email protected]>",
   "homepage": "https://shelljs.io",
@@ -17,6 +17,7 @@
     "eslint": "eslint --fix-dry-run ./",
     "eslint:fix": "eslint --fix ./",
     "prettier": "prettier --write ./src ./webpack.*.js",
+    "publish": "npm publish",
     "test": "mocha -r mocha.module.js -r ts-node/register --globals window **/*.test.ts",
     "test:watch": "npm run test -- --watch",
     "test:coverage": "nyc npm run test",

src/Config.ts

@@ -1,5 +1,9 @@
 type Engine = 'default' | 'macos' | 'ubuntu' | 'windows'
 type Theme = 'dark' | 'light'
+type Typing = {
+    ctor: new (...args: unknown[]) => unknown
+    opts?: Record<string, unknown>
+}
 
 export type Config = {
     user: string
@@ -12,10 +16,7 @@ export type Config = {
         responsive: boolean
         shadow: boolean
     }>
-    typing?: {
-        ctor: new (...args: unknown[]) => unknown
-        opts?: Record<string, unknown>
-    }
+    typing?: Typing
 }
 
 export const defaultConfig: Config = {
@@ -32,15 +33,29 @@ export const defaultConfig: Config = {
     typing: undefined,
 }
 
-export const isTyped = ({ typing }: Pick<Partial<Config>, 'typing'>): boolean =>
-    Boolean(typing && typeof typing.ctor === 'function')
-export const isRoot = ({ root }: Pick<Partial<Config>, 'root'>): boolean => Boolean(root)
-export const isResponsive = ({ style }: Pick<Partial<Config>, 'style'>): boolean => Boolean(style?.responsive)
-export const isWindows = ({ style }: Pick<Partial<Config>, 'style'>): boolean => style?.engine === 'windows'
-export const isMacOs = ({ style }: Pick<Partial<Config>, 'style'>): boolean => style?.engine === 'macos'
-export const isUbuntu = ({ style }: Pick<Partial<Config>, 'style'>): boolean => style?.engine === 'ubuntu'
-export const isDefault = ({ style }: Pick<Partial<Config>, 'style'>): boolean => style?.engine === 'default'
-export const hasShadow = ({ style }: Pick<Partial<Config>, 'style'>): boolean => Boolean(style?.shadow)
+export const isTyped = <C extends Pick<Partial<Config>, 'typing'>>(c: C): c is C & { typing: Typing } =>
+    Boolean(c.typing && typeof c.typing.ctor === 'function')
+
+export const isRoot = <C extends Pick<Partial<Config>, 'root'>>(c: C): c is C & { root: true } => Boolean(c.root)
+
+export const isResponsive = <C extends Pick<Partial<Config>, 'style'>>(
+    c: C
+): c is C & { style: { responsive: true } } => Boolean(c.style?.responsive)
+
+export const isWindows = <C extends Pick<Partial<Config>, 'style'>>(c: C): c is C & { style: { engine: 'windows' } } =>
+    c.style?.engine === 'windows'
+
+export const isMacOs = <C extends Pick<Partial<Config>, 'style'>>(c: C): c is C & { style: { engine: 'macos' } } =>
+    c.style?.engine === 'macos'
+
+export const isUbuntu = <C extends Pick<Partial<Config>, 'style'>>(c: C): c is C & { style: { engine: 'ubuntu' } } =>
+    c.style?.engine === 'ubuntu'
+
+export const isDefault = <C extends Pick<Partial<Config>, 'style'>>(c: C): c is C & { style: { engine: 'default' } } =>
+    c.style?.engine === 'default'
+
+export const hasShadow = <C extends Pick<Partial<Config>, 'style'>>(c: C): c is C & { style: { shadow: true } } =>
+    Boolean(c.style?.shadow)
 
 export const buildConfig = (config: Partial<Config>): Config => {
     const cfg: Config = { ...defaultConfig, ...config }

src/Shell.ts

@@ -6,11 +6,11 @@ import { buildContent } from './Content'
 import { buildStatusBar } from './StatusBar'
 
 const type =
-    ([el, { typing }]: [Element, Pick<Config, 'typing'>]) =>
+    ([el, config]: [Element, Pick<Config, 'typing'>]) =>
     (index = 0): void => {
-        const self = type([el, { typing }])
+        const self = type([el, config])
         const lines = el.querySelectorAll(`.${lineClass}`)
-        if (!isTyped({ typing })) {
+        if (!isTyped(config)) {
             return lines.forEach(line => (line.className = `${lineClass}--active ${line.className}`))
         }
 
@@ -23,15 +23,15 @@ const type =
         const commandContent = command.innerHTML
         line.className = `${lineClass}--active ${line.className}`
 
-        if (!command.className.includes(`${lineCommandClass}--output`) && index < lines.length - 1 && typing) {
+        if (!command.className.includes(`${lineCommandClass}--output`) && index < lines.length - 1) {
             command.innerHTML = ''
-            new typing.ctor(command, {
+            new config.typing.ctor(command, {
                 typeSpeed: 90,
                 cursorChar: '&nbsp;',
                 showCursor: true,
-                ...typing.opts,
+                ...config.typing.opts,
                 loop: false,
-                strings: [`${commandContent}^${typing.opts?.delay ?? 600}`],
+                strings: [`${commandContent}^${config.typing.opts?.delay ?? 600}`],
                 contentType: 'html',
                 onStringTyped: () => line.removeChild(line.querySelectorAll(`.${cursorClass}`)[0]),
                 onComplete: () => self(++index),