Prepare Package for Distribution

.dockerignore

@@ -1,12 +1,11 @@
 node_modules/**
 npm-debug.log
+yarn-error.log
 Dockerfile*
 docker-compose*
 .dockerignore
-.git/**
-.gitignore
-README.md
-LICENSE
 .vscode/**
 .idea/**
-build/**
+build/**
+dist/**
+build.sh

.gitignore

@@ -2,4 +2,5 @@ node_modules/**
 build/**
 .idea/**
 yarn-error.log
-*.tgz
+*.tgz
+dist/**

.travis.yml

@@ -2,5 +2,12 @@ language: minimal
 dist: trusty
 sudo: false
 services:
-  - docker
+- docker
 script: "./build.sh"
+git:
+  depth: false
+env:
+  global:
+  - secure: HbNBtNiGTLcQQa8/ifX5cJJYj+8Kj7kZagO5aBi3MXkArzTb7V6qi33h8o6A6KaKDW9P+Z58AuJ85/+dMJMW0UAEWzNyGCddzXGVhIyqnu3og0WfWNPsUQZ+A7Qdid//tRpOyX+CfZzQNqWezStJPg0y0RaSJt/dCMCIhVq1YbZzjQijGEE3AdpjZJKWsXhaOofYksVRYoemPmnb5Emb0DHCZkQVl1J+00NKPdHOlFK7Jb/VRtJsLhlQ6oB2/xpXBbVHMa6ogG+sAaj/Qa8SyYhWvwUj9HP2mqKL5t85PmF7zBtG/yh85dKiQDKVGZgFEO9ZAh9i7MWMaJxdiPV/LN2+QA9IDtDjmdWJGsH9kSA24QzSxe/mv5B+MsiOU0trsBlJq2AnCProJSbKmeKavhtnuZ8W+KvBH7BI1LNyVBCRCh2YrCk5fbQQ2Te9ZwaBZd0mjNpsxjze1JYMjWXpgm/64zM8Mn0dmoU3WWmL+C8ZXZpi7/sdtroMFbcx5xxnqXojXUa1IHhCsO+hGmgHCOlpevMaOz+Ct4MYb5gmIAaEx3XpjSakmu5vHInvGrxTTAlq3Jf17OC/dWfOvVtRCNBnGWDSfojtZKrU85HzitDUPFVgLkLgt/btFI8O8OHZgJgb4wA/NGtpAdFzTuBN8kQCH0cvwVtXThTatgHqfGc=
+  - secure: EDzsth0OgLpG72wHRdtxpjImD/OHbe+7rYt9BHHQ9hAIauLJmND1+6uQmumWIxfIn2ulEhBKIp92OsV6XNpjU/WoKbGTnX3uR8ADjnS+/rlZgvGKP4SGdwhdZFwFlUV5BZeGL1bS6avWbMWb81kl0+RUArDPdN8nb5nx7tPLbeZmPF5zKJSRQHUzCN8vyEMpr1pDCNclU+S9awcibKa1EHKNDh5aZe1rpimwWlbx+xd3I1TRE2/n6TZ7GhBP6TTtLZGGsNlOF7rjCX9eRWYG+a4AD1h8htTT0Ag7DF/LCh5RFK+XCTA7MmQnc+CtPf34VUz9ftK+22EONMPv3P7hheZt4jZpc3qQ2SYu4rbI9bmzY9x8VyDtk60BLXoOmM99Q63rnzyRzawqrETGMyEIP1DCu8E6Fw4SVSzDSq+SBlbX7+oN8mj9+jR1d2yOax9QfwAJ+b5z9vSYc7g+rLCQgaoT5dOgNTZ7TvMnpJPB0VkdIWCuI5TfVBYa64PmYR2zZelVN9EWQ/Uqmgw1SR/FmwKwaaxxDFsfwR7vJynooWKyX6BIxrQH86DVCPFdsorT2ytZwPYNWymLiF/uV8bc4Awp0UYY82GKJ18QjWxEiQJf/mgY/OKpqvJ1EDnfXdhDkz+0BEi4hLByaprYy6brpbLo5RrH9DpRVwltK+zatmM=
+  - secure: dfbEiecPuE4pgqkWzEQQ7m5ZB0MPZ8QCeKKaO2LTqnUIaby9fdsmAcnD3dGNL1F28GVErSB6ySEmyglOdMY5cnvW0FZvKAg4awS7rMcsHMfVX0xgXp9kNzeH1wQBNB6nx4d9fcZUdpjC8V+6QCjNGs/Y/tmdOiwjuNyWR3tQkY4tvs1Qyg884lg3AS3e0qKw9gmX2Oe2Qe44Qkr/yCBwrXcOYTIut9mqF4Nzux+dY9wsbC2L3Qf8AegcjLVPEoT3UYcgtqZfHHFKcnTitDmKRQqzdi1mQW6QXfA8hzMkL5CZIiixvFj8iD4re4r68gcUNCfgP8HhuemvMQ3tmZYUix8TS7mgwZJpvc7GkADKtKvyKMS9zfnlYEOfsVUW8rAEvfUkSpjqaixq3M6Gz/fEuHZu5FW0S9Imcm3YLumLNV+J1gxW4UKkLYgLVFkOizw3CQG7+I90C/LS5zUwTRBGuj1B+Hf4QqmPOj3qtM/eCSbuGbOwEC5YV6s69UVl7nYmphza58Ha5RswsYiDOKiPO2yejMqaiCTS3B3+0F/LgGVvIZP2BVbIrG+6/eKLi/fMjzEEU8jI9Sg60hhaa4O3EtI2JjJN899pyxKQBYYdaNhSBkEDOMB5ydfbWwqr7T88BN/EQWHS7WWf3K+SHCWUiDvlFw2e4JLkWQ4Y2E0rN2k=

Dockerfile

@@ -1,6 +1,15 @@
-FROM node:10.12.0-alpine AS build
+FROM microsoft/dotnet:2.1.500-sdk-alpine3.7 as version
+
+WORKDIR /src
+
+COPY .git ./
+
+RUN apk add libcurl --no-cache && \
+    dotnet tool install -g minver-cli --version 1.0.0-beta.1 && \
+    /root/.dotnet/tools/minver > .version
 
-RUN apk add --no-cache git
+FROM node:10.12.0-alpine AS build
+ARG MYGET_API_KEY
 
 WORKDIR /app
 
@@ -10,17 +19,28 @@ RUN yarn --frozen-lockfile
 
 COPY . .
 
-RUN yarn build && \
+COPY --from=version /src/.version ./
+
+RUN REACT_APP_CLIENT_VERSION=$(cat .version) yarn build && \
+    yarn build:dist && \
     yarn cache clean
 
+RUN echo "https://www.myget.org/F/sqlstreamstore/npm/:_authToken=${MYGET_API_KEY}" > .npmrc && \
+    echo "@sql-stream-store:registry=https://www.myget.org/F/sqlstreamstore/npm/" >> .npmrc
+
+RUN test -z "$MYGET_API_KEY" || \
+    yarn publish --new-version $(cat .version) && \
+    echo "No API key found, skipping publishing..."
+
 FROM nginx:1.15.5-alpine AS runtime
 
-COPY ./nginx.conf /etc/nginx/nginx.conf
+COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
 
-COPY ./mime.types /etc/nginx/mime.types
+COPY ./nginx/mime.types /etc/nginx/mime.types
 
 COPY --from=build /app/build/ /var/www/
+COPY --from=version /src/.version /var/www
 
 EXPOSE 80
 
-ENTRYPOINT ["nginx", "-g", "daemon off;"]
+ENTRYPOINT ["nginx", "-g", "daemon off;"]

build.sh

@@ -1,6 +1,45 @@
 #!/usr/bin/env bash
-DOCKERTAG=${TRAVIS_TAG:-latest}
 
-docker build --build-arg semver=TRAVIS_TAG --tag sql-stream-store-browser:${DOCKERTAG} .
+set -e
 
-docker images --filter=reference="sql-stream-store-browser:${DOCKERTAG}"
+LOCAL_IMAGE="sql-stream-store-browser"
+LOCAL="${LOCAL_IMAGE}:latest"
+
+REMOTE_IMAGE="sqlstreamstore/browser"
+
+docker build \
+    --build-arg MYGET_API_KEY=$MYGET_API_KEY \
+    --tag ${LOCAL} \
+    .
+
+VERSION=$(docker run --entrypoint=cat ${LOCAL} /var/www/.version)
+
+SEMVER_REGEX="^(0|[1-9][0-9]*)\\.(0|[1-9][0-9]*)\\.(0|[1-9][0-9]*)(\\-[0-9A-Za-z-]+(\\.[0-9A-Za-z-]+)*)?(\\+[0-9A-Za-z-]+(\\.[0-9A-Za-z-]+)*)?$"
+
+[[ $VERSION =~ $SEMVER_REGEX ]]
+
+MAJOR="${REMOTE_IMAGE}:${BASH_REMATCH[1]}"
+MAJOR_MINOR="${REMOTE_IMAGE}:${BASH_REMATCH[1]}.${BASH_REMATCH[2]}"
+MAJOR_MINOR_PATCH="${REMOTE_IMAGE}:${BASH_REMATCH[1]}.${BASH_REMATCH[2]}.${BASH_REMATCH[3]}"
+MAJOR_MINOR_PATCH_PRE="${REMOTE_IMAGE}:${BASH_REMATCH[1]}.${BASH_REMATCH[2]}.${BASH_REMATCH[3]}${BASH_REMATCH[4]}"
+
+if [[ -n $TRAVIS_TAG && -z ${BASH_REMATCH[4]} ]]; then
+    echo "Detected a tag with no prerelease."
+    docker tag $LOCAL $MAJOR_MINOR_PATCH
+    docker tag $LOCAL $MAJOR_MINOR
+    if [[ ${BASH_REMATCH[1]} != "0" ]]; then
+        docker tag $LOCAL $MAJOR
+    else
+        echo "Detected unstable version."
+    fi
+else
+    echo "Detected a prerelease."
+    docker tag $LOCAL $MAJOR_MINOR_PATCH_PRE
+fi
+
+if [[ -n $DOCKER_USER ]]; then
+    echo "${DOCKER_PASS}" | docker login --username "${DOCKER_USER}" --password-stdin
+    docker push $REMOTE_IMAGE
+fi
+
+docker images --filter=reference="${REMOTE_IMAGE}"

package.json

@@ -1,16 +1,22 @@
 {
-  "name": "sql-stream-store-browser",
-  "version": "0.1.0",
+  "name": "@sqlstreamstore/browser",
   "description": "Sql Stream Store User Interface",
-  "repository": "https://github.com/thefringeninja/sql-stream-store-browser.git",
+  "repository": "https://github.com/SQLStreamStore/sql-stream-store-browser.git",
   "scripts": {
     "analyze": "source-map-explorer build/static/js/main.*",
     "start": "react-scripts-ts start",
     "build": "prettier --list-different \"src/**/*.js\" \"src/**/*.ts\" \"src/**/*.tsx\" && tslint --project ./ && react-scripts-ts build",
+    "build:dist": "rm -rf dist && tsc --project tsconfig.publish.json && cp src/index.d.ts ./dist",
     "eject": "react-scripts-ts eject",
     "format": "prettier --write \"src/**/*.js\" \"src/**/*.ts\" \"src/**/*.tsx\" && tslint --project ./ --fix"
   },
-  "main": "src/index.tsx",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "src"
+  ],
   "private": false,
   "devDependencies": {
     "@types/array.prototype.flatmap": "^1.2.0",
@@ -27,32 +33,31 @@
     "@types/remarkable": "^1.7.1",
     "@types/uuid": "^3.4.4",
     "babel-plugin-module-resolver": "3.1.1",
-    "prettier": "1.15.1",
+    "prettier": "1.15.2",
     "react-scripts-ts": "3.1.0",
     "source-map-explorer": "1.6.0",
-    "tslint-config-prettier": "1.15.0",
-    "tslint-immutable": "4.8.0",
+    "tslint-config-prettier": "1.17.0",
+    "tslint-immutable": "5.0.0",
     "tslint-react": "3.6.0",
     "typescript": "3.1.6",
     "typesync": "0.4.0"
   },
   "dependencies": {
-    "@material-ui/core": "3.2.1",
+    "@material-ui/core": "3.6.0",
     "@material-ui/icons": "3.0.1",
     "array.prototype.flatmap": "1.2.1",
     "base16": "1.0.0",
     "classnames": "2.2.6",
     "history": "4.7.2",
     "inflector-js": "1.0.1",
-    "invert-color": "1.5.0",
+    "invert-color": "2.0.0",
     "json-schema": "0.2.3",
     "jss": "9.4.0",
-    "react": "16.5.2",
-    "react-dom": "16.5.2",
+    "react": "16.6.3",
+    "react-dom": "16.6.3",
     "react-json-view": "1.19.1",
     "react-remarkable": "1.1.3",
-    "react-schema-form": "0.5.0",
-    "react-tap-event-plugin": "3.0.2",
+    "react-schema-form": "0.6.2",
     "rxjs": "5.4.3",
     "uri-js": "4.2.2",
     "uri-template": "1.0.1",

src/components/HyperMediaControls/TextAreaField.tsx

@@ -29,4 +29,4 @@ const TextAreaField: StatelessComponent<ReactSchemaFormInputProps> = ({
     </div>
 );
 
-export default ComposedComponent.default(TextAreaField);
+export default ComposedComponent(TextAreaField);

src/components/HyperMediaControls/UuidField.tsx

@@ -48,4 +48,4 @@ class UuidField extends React.PureComponent<ReactSchemaFormInputProps> {
     }
 }
 
-export default ComposedComponent.default(UuidField);
+export default ComposedComponent(UuidField);

src/index.d.ts

@@ -0,0 +1,5 @@
+import { ComponentType } from 'react';
+
+export type SqlStreamStoreBrowser = ComponentType<{
+    authorization?: string;
+}>;

src/stream-store/Viewer/HalViewer/Home.tsx

@@ -6,19 +6,47 @@ import { Observable as obs } from 'rxjs';
 import rels from 'stream-store/rels';
 import store from 'stream-store/store';
 import { HalResource } from 'types';
+import { clientVersion } from 'utils';
 import { HalViewerProps } from './types';
 
 const provider$ = store.hal$.body$.map(({ provider }) => provider);
 
 const versions$ = store.hal$.body$.map(({ versions }) => versions);
 
+const info$ = provider$.zip(versions$).map(([provider, versions]) =>
+    [
+        {
+            id: 'Provider',
+            value: inflector.camel2words(
+                inflector.underscore(provider),
+            ) as string,
+        },
+    ]
+        .concat(
+            Object.keys(versions).map(key => ({
+                id: `${inflector.camel2words(
+                    inflector.underscore(key),
+                )} Version`,
+                value: versions[key] as string,
+            })),
+        )
+        .concat({
+            id: 'Client Version',
+            value: clientVersion as string,
+        }),
+);
+
 interface RecentState {
     recent: HalResource[];
 }
 
+interface InfoLineProps {
+    id: string;
+    value: string;
+}
+
 interface InfoState {
-    provider: string;
-    versions: { [key: string]: string };
+    info: InfoLineProps[];
 }
 
 interface IndexState extends RecentState, InfoState {}
@@ -29,50 +57,39 @@ const recent$ = store.hal$.body$.map(
 
 const state$ = createState<IndexState>(
     obs.merge(
-        provider$.map(provider => ['provider', () => provider]),
-        versions$.map(versions => ['versions', () => versions]),
+        info$.map(info => ['info', () => info]),
         recent$.map(recent => ['recent', () => recent]),
     ),
-    obs.of<IndexState>({ recent: [], provider: '', versions: {} }),
+    obs.of<IndexState>({ recent: [], info: [] }),
 );
 
-const Info: StatelessComponent<InfoState> = ({ provider, versions }) => (
+const InfoLine: StatelessComponent<InfoLineProps> = ({ id, value }) => (
+    <Table.Row>
+        <Table.Cell>
+            <strong>{id}</strong>
+        </Table.Cell>
+        <Table.Cell>{value}</Table.Cell>
+    </Table.Row>
+);
+
+const Info: StatelessComponent<InfoState> = ({ info }) => (
     <Table>
         <Table.Head>
             <Table.Row>
                 <Table.Cell colSpan={2}>{'Server Information'}</Table.Cell>
             </Table.Row>
         </Table.Head>
         <Table.Body>
-            <Table.Row>
-                <Table.Cell>
-                    <strong>{'Provider'}</strong>
-                </Table.Cell>
-                <Table.Cell>
-                    {inflector.camel2words(inflector.underscore(provider))}
-                </Table.Cell>
-            </Table.Row>
-            {Object.keys(versions).map(key => (
-                <Table.Row key={key}>
-                    <Table.Cell>
-                        <strong>
-                            {inflector.camel2words(inflector.underscore(key))}{' '}
-                            {'Version'}
-                        </strong>
-                    </Table.Cell>
-                    <Table.Cell>{versions[key]}</Table.Cell>
-                </Table.Row>
+            {info.map(({ id, value }) => (
+                <InfoLine key={id} id={id} value={value} />
             ))}
         </Table.Body>
     </Table>
 );
 
-const Index: ComponentType<IndexState & HalViewerProps> = ({
-    provider,
-    versions,
-}) => (
+const Index: ComponentType<IndexState & HalViewerProps> = ({ info }) => (
     <section>
-        <Info provider={provider} versions={versions} />
+        <Info info={info} />
     </section>
 );
 

src/types/react-schema-form.d.ts

@@ -42,9 +42,7 @@ declare module 'react-schema-form' {
 
     export const SchemaForm: ComponentType<ReactSchemaFormProps>;
 
-    export const ComposedComponent: {
-        default: <T>(
-            component: ComponentType<T>,
-        ) => ComponentType<ReactSchemaFormInputProps>;
-    };
+    export const ComposedComponent: <T>(
+        component: ComponentType<T>,
+    ) => ComponentType<ReactSchemaFormInputProps>;
 }

src/utils/clientVersion.ts

@@ -0,0 +1,3 @@
+const clientVersion: string | undefined = process.env.REACT_APP_CLIENT_VERSION;
+
+export default clientVersion;

src/utils/index.ts

@@ -9,3 +9,5 @@ export { default as mediaTypes } from './mediaTypes';
 export { default as hal } from './hal';
 
 export { default as reactJsonTheme } from './reactJsonTheme';
+
+export { default as clientVersion } from './clientVersion';

tsconfig.publish.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declaration": false,
+    "declarationMap": false,
+    "outDir": "dist"
+  }
+}