Make it easier to have a read only data tab without ever touching ducks.

import { asyncGet } from "@misk/common"
YourCompoennt<data: props> {
     <HTMLTable>
       ...
     </HTMLTable>
}
TabContainer<> {
	const data = asyncGet(url)
	if (data) {
	 	render() {
	 		<Your Component data={data}/> 		
	} else {
		<OfflineComponent>
	}
	render() {
		<ReadOnlyTab url={} render={}
	}
}

Currently we package remote static assets from respective NPM packages and remote URLs within @misk/common which are included in shipped compiled code.

@misk/common/styles.js and @misk/common/vendors.js are vital to each tab, thus if an error is shipped there should be a better way to force update all tabs to the new version than simply waiting for them to update the @misk/common locally installed NPM package.

@misk/ packages are shipped in Misk Jars so that may be sufficient. Otherwise a CDN with a static Url that can be used to point at the latest version of static assets may be a better solution.

• Should be very basic (ie. consumer/ from the kotlin-dsl samples)
• Show using the plugin in both Groovy and Kotlin DSL written build scripts
• Show how to add it as a dependsOn to jar critical path

When example tab was deleted from Misk, unchecked in files like lib and node_modules keep the deleted tab directory around. web.gradle assumes every directory in web/tabs/* is a valid tab and fails when package.json isn't present.

• export const fnName = async () => {} function declarations
• Remove chalk, commander, node-emoji libraries
• Use winston logger

Docker boot is slow. Check if anything has changed before Docker boots.

• makes all tabs compatible with Rush
• Allows restoring TSLint rules requiring imports to be explicitly included in package.json

Currently waits for all service-name instead of date-service-name-web.

Should only be present for development. In builds it slows down the process. If necessary, run it in the background so Gradle builds can continue.

Make sure it fails gracefully when used with non miskTabs (ie. in @misk/ package builds)

const TabContainer = styled(ResponsiveContainer)`
  position: relative;
  top: 110px;
  padding-left: 5px;
`

Duplicate definitions in any Loader tabs

https://docs.gradle.org/current/userguide/custom_plugins.html

Theory 1:

• eval the code so it registers the window variables
• execute the command to render the variables from window

Theory 2:

• all tab scripts stay on loader at all times
• div stays within loader router (ie. div config only when /_admin/config route match)
• within each tab's router, they only match on their subpath
• shift domains so that loader can use /_admin/{tab} paths and change each tab's to /_admin/tab/{tab} so that tab individual testing can still be done
• because of each tab only showing when the local router matches, the tabs will hide/reveal automatically without reloads since all navigation will resolve at the main /_admin router

Theory 3:

• Make all the tabs as externals, generate require or import statements in LoaderContainer code, enforce that all tabs have a main container which is loaded in. Thus, tabs aren't loaded as separate React apps but as components in the same Loader React app

Theory 4:

• Consider LoadJS? Use LoadJS to load tab code conditional on router location https://github.com/filamentgroup/loadJS (from #404)

Theory 5:

• Have a Window.MiskBinder object that stores the metadata for each tab, then uses listeners to check when the binder has new tabs added.
• https://react-cn.github.io/react/tips/dom-event-listeners.html
• https://stackoverflow.com/questions/32896624/react-js-best-practice-regarding-listening-to-window-events-from-components

Winston

Export a default logger creator function from @misk/dev or @misk/core.

• https://thisdavej.com/using-winston-a-versatile-logging-library-for-node-js/
• https://github.com/winstonjs/winston

export const logger = winston.createLogger({
  level: "debug",
  format: combine(
    colorize(),
    timestamp(),
    label({ label: "jheadx" }),
    printf(
      info => `${info.timestamp} [${info.label}][${info.level}]${info.message}`
    )
  ),
  transports: [new winston.transports.Console()]
})

• Rename package @misk/components -> @misk/core
• Move most TS code from @misk/common to @misk/components

• Palette Exemplar has two words to easier to see the rename rules as a template
• Leaves palette to be used for public demo since small changes between demo and what should be used as a template
• Palette demo currently broken because default build is to lib/web/_tab/... but lib is included in the .gitignore
• Review that relative_path_prefix in Palette should be _admin/ (probably should be _tab/). Make sure relative_path_prefix value is correct as a template.

Add CSP to prevent malicious takeover of admin dashboard Terril CSP Cash.me

Create function that consumes externals object and generates necessary require statements for vendors.js

[2018-11-29 17:04:01] waiting for [       2] misk-web-misk-web-web running containers to finish...
✖ ｢atl｣: Child process failed to process the request: Error: Debug Failure. Invalid cast. The supplied value [object Object] did not pass the test 'isJsonSourceFile'.
    at Object.cast (/node_modules/typescript/lib/typescript.js:1325:22)
    at getTypeOfVariableOrParameterOrPropertyWorker (/node_modules/typescript/lib/typescript.js:35591:41)
    at getTypeOfVariableOrParameterOrProperty (/node_modules/typescript/lib/typescript.js:35567:48)
    at getTypeOfSymbol (/node_modules/typescript/lib/typescript.js:35856:24)
    at resolveESModuleSymbol (/node_modules/typescript/lib/typescript.js:32928:36)
    at getTargetOfNamespaceImport (/node_modules/typescript/lib/typescript.js:32431:20)
    at getTargetOfAliasDeclaration (/node_modules/typescript/lib/typescript.js:32560:28)
    at resolveAlias (/node_modules/typescript/lib/typescript.js:32595:30)
    at getSymbol (/node_modules/typescript/lib/typescript.js:31689:38)
    at resolveNameHelper (/node_modules/typescript/lib/typescript.js:31843:34)
    at resolveName (/node_modules/typescript/lib/typescript.js:31829:20)
    at resolveEntityName (/node_modules/typescript/lib/typescript.js:32680:26)
    at resolveEntityName (/node_modules/typescript/lib/typescript.js:32688:33)
    at resolveTypeReferenceName (/node_modules/typescript/lib/typescript.js:38485:20)
    at getTypeFromTypeReference (/node_modules/typescript/lib/typescript.js:38670:30)
    at getTypeFromTypeNode (/node_modules/typescript/lib/typescript.js:40178:28)
    at tryGetTypeFromEffectiveTypeNode (/node_modules/typescript/lib/typescript.js:35562:24)
    at getTypeForVariableLikeDeclaration (/node_modules/typescript/lib/typescript.js:35192:32)
    at getWidenedTypeForVariableLikeDeclaration (/node_modules/typescript/lib/typescript.js:35531:56)
    at getTypeOfVariableOrParameterOrPropertyWorker (/node_modules/typescript/lib/typescript.js:35645:24)
    at getTypeOfVariableOrParameterOrProperty (/node_modules/typescript/lib/typescript.js:35567:48)
    at getTypeOfSymbol (/node_modules/typescript/lib/typescript.js:35856:24)
    at getPropertyTypeForIndexType (/node_modules/typescript/lib/typescript.js:39485:36)
    at getIndexedAccessType (/node_modules/typescript/lib/typescript.js:39685:20)
    at instantiateTypeWorker (/node_modules/typescript/lib/typescript.js:40634:24)
    at instantiateType (/node_modules/typescript/lib/typescript.js:40592:26)
    at addMemberForKeyType (/node_modules/typescript/lib/typescript.js:37127:32)
    at resolveMappedTypeMembers (/node_modules/typescript/lib/typescript.js:37106:21)
    at resolveStructuredTypeMembers (/node_modules/typescript/lib/typescript.js:37237:25)
    at getSingleCallSignature (/node_modules/typescript/lib/typescript.js:48694:32)
    at compareSignaturesRelated (/node_modules/typescript/lib/typescript.js:41128:61)
    at signatureRelatedTo (/node_modules/typescript/lib/typescript.js:42517:24)
    at signaturesRelatedTo (/node_modules/typescript/lib/typescript.js:42497:43)
    at structuredTypeRelatedTo (/node_modules/typescript/lib/typescript.js:42236:43)
    at recursiveTypeRelatedTo (/node_modules/typescript/lib/typescript.js:41959:64)
[2018-11-29 17:04:17] waiting for [       2] misk-web-misk-web-web running containers to finish...

• microsoft/TypeScript#25641

Will provide better long term performance when state gets large

https://github.com/jxnblk/styled-system

https://rushjs.io/

Get error code message / status from central object in @misk/core SimpleNetwork

if (code) {
 code = getErrorCodes(error.response, error.response.status)
}

Currently confusion how to wire up dispatchPalette whether it is supposed to be included in the rootDispatcher or not.

1. Make it work through curl | bash -s so a local shell file doesn't have to be updated
2. Prompt for new name in formats: foo-bar, fooBar, FooBar
3. Download .zip of palette src code from github
4. Unzips to pwd
5. Renames folder to `foo-bar
6. Recursive find/replace in directory of palette -> fooBar, Palette -> FooBar

Make Loader tab more abstract so that it doesn’t have any view and only does loading. Create new tab that has the dashboard view

Thus loader can then be used for any app regardless of the view.

Likely rename loader -> dashboard
Abstract the loading functionality out to functions in @misk/common

Make sure relative_path_prefix value is correct as a template.

• Have @misk/cli pull it in for build file generation

• Bake hash directory / conditional builds functionality and other directory walking into Misk-Web-Plugin and @misk/cli
  • #104 : only spin up docker images if a build will occur
  • #105 : make mirroring of node_modules from Docker container only occur after a ./gradlew web develop style command since it only needs to be there for code completion with VS Code. Doesn't need to happen on every build or anything else
• Less code to maintain
• More predictable and testable behavior inside of Docker container
• Simplify the required registered tasks in Misk-Web-Plugin. Currently mirrors the options in misk-web or used to take a -Pcmd= to pass in the options directly which is a poor DevEx

• Generates package json with latest packages determined from Docker image version in src/miskTab.json
• Put json file that is copied into Docker image that includes mappings of Docker image version to the @misk/ versions
• Make it so following files can pull slug from miskTab.json
  • Webpack
  • src/index.tsx::createIndex
  • index.html (through webpack)
  • gradlew (ports for Docker)

Eliminates need to already have perfect node/npm environment present

Resources

• https://github.com/zmwangx/homebrew-npm-noob
• https://github.com/Homebrew/brew/blob/728189d3e946b900720eca98d48fc2c9bc309116/docs/Node-for-Formula-Authors.md
• https://github.com/nexe/nexe

https://github.com/mixmaxhq/deyarn

• Reduces the amount of data being stored in the CLI code
• Leaves option for manual build file configuration still pulling from the templates that live in @misk/dev, @misk/tslint, or @misk/tsconfig

Wrap npm install command in CLI, run it if a pre-command verification of a node_modules folder isn't present.

User encountered errors that were a result of mismatched node version that didn't have clear errors pointing to the node version.