├── .editorconfig ├── .gitattributes ├── .gitignore ├── .npmignore ├── .travis.yml ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── alm.json ├── bin └── alm ├── book.json ├── cover.jpg ├── docs ├── README.md ├── SUMMARY.md ├── config │ ├── README.md │ ├── command-line.md │ ├── editorconfig.md │ └── tsconfig.md ├── contributing │ ├── README.md │ ├── async.md │ ├── conventions.md │ ├── css.md │ ├── demo.md │ ├── dependencies.md │ ├── deployment-intenals.md │ ├── deployment.md │ ├── document.md │ ├── errors.md │ ├── file-listing.md │ ├── monaco.md │ ├── quickfix.md │ ├── react.md │ ├── redux.md │ ├── syntax.md │ ├── tabs.md │ ├── travis.md │ ├── tsconfig.md │ └── why.md ├── features │ ├── README.md │ ├── ast.md │ ├── autocomplete.md │ ├── build.md │ ├── css-to-ts.md │ ├── dependency.md │ ├── docblockr.md │ ├── documentation-view.md │ ├── editor.md │ ├── errors.md │ ├── formatting.md │ ├── git.md │ ├── html-to-tsx.md │ ├── image-viewer.md │ ├── javascript.md │ ├── json-to-dts.md │ ├── lint.md │ ├── live-analysis.md │ ├── live-demo-react.md │ ├── live-demo.md │ ├── npm.md │ ├── omni-search.md │ ├── quickfix.md │ ├── removeUnusedImports.md │ ├── semantic-view.md │ ├── tabs.md │ ├── testing.md │ ├── tree.md │ ├── typescript.md │ ├── uml.md │ └── virtual-projects.md └── quickstart.md ├── nodemon.json ├── package-lock.json ├── package.json ├── resources ├── icon.png └── icon.svg ├── scripts ├── prepublish.sh └── resume.sh ├── src ├── app │ ├── base │ │ ├── csx.ts │ │ └── gls.tsx │ ├── clientTestResultsCache.ts │ ├── clipboardRing.tsx │ ├── commands │ │ ├── commands.ts │ │ ├── general │ │ │ ├── gitAddAllCommitAndPush.ts │ │ │ ├── gitFetchLatestAndRebase.ts │ │ │ └── openFileFromServerDisk.ts │ │ └── monacoActionLoader.ts │ ├── components │ │ ├── buttons.tsx │ │ ├── clipboard.tsx │ │ ├── icon.tsx │ │ ├── indicator.tsx │ │ ├── inputs.tsx │ │ ├── progress.tsx │ │ ├── robocop.css │ │ ├── robocop.tsx │ │ └── typeIcon.tsx │ ├── configCreator │ │ └── configCreator.ts │ ├── cursorHistory.ts │ ├── demoTests │ │ ├── demoNode.ts │ │ ├── demoReact.tsx │ │ └── foo.ts │ ├── devtemplate.tsx │ ├── dialogs │ │ └── inputDialog.tsx │ ├── fileTree.tsx │ ├── findAndReplace.tsx │ ├── globalErrorCacheClient.ts │ ├── gotoHistory.ts │ ├── htmlToJsx │ │ └── htmlToJsx.ts │ ├── imageViewer │ │ ├── imageViewer.css │ │ └── imageViewer.tsx │ ├── json2dts │ │ └── json2dts.ts │ ├── lostConnection.css │ ├── main.tsx │ ├── mainPanel.tsx │ ├── markdown │ │ ├── markdown.css │ │ └── markdown.tsx │ ├── monaco │ │ ├── README.md │ │ ├── addons │ │ │ ├── README.md │ │ │ ├── autoCloseTag.tsx │ │ │ ├── blaster.tsx │ │ │ ├── cssToTs.tsx │ │ │ ├── dockblockr.ts │ │ │ ├── doctor.tsx │ │ │ ├── formatBetter.tsx │ │ │ ├── gitReset.tsx │ │ │ ├── gitStatus.ts │ │ │ ├── gotoTypeScriptSymbol.tsx │ │ │ ├── htmlToTsx.tsx │ │ │ ├── jsonToDts.tsx │ │ │ ├── jumpy.css │ │ │ ├── jumpy.tsx │ │ │ ├── linter.css │ │ │ ├── linter.ts │ │ │ ├── liveAnalysis.css │ │ │ ├── liveAnalysis.tsx │ │ │ ├── liveDemo.tsx │ │ │ ├── quickFix.css │ │ │ ├── quickFix.tsx │ │ │ ├── removeUnusedImports.tsx │ │ │ ├── semanticView.tsx │ │ │ ├── test.tsx │ │ │ ├── testedMonaco.tsx │ │ │ └── writeCode.tsx │ │ ├── codeResults │ │ │ ├── README.md │ │ │ ├── findReferences.tsx │ │ │ ├── gotoDefinition.tsx │ │ │ └── renameVariable.tsx │ │ ├── common │ │ │ ├── README.md │ │ │ ├── async.ts │ │ │ ├── commands │ │ │ │ └── replaceCommand.ts │ │ │ ├── eventEmitter.ts │ │ │ ├── lifecycle.ts │ │ │ └── strings.ts │ │ ├── editor │ │ │ ├── codeEditor.css │ │ │ └── codeEditor.tsx │ │ ├── languages │ │ │ ├── json │ │ │ │ ├── README.md │ │ │ │ ├── autocomplete.ts │ │ │ │ ├── core │ │ │ │ │ ├── jsonLocation.ts │ │ │ │ │ ├── jsonParser.ts │ │ │ │ │ ├── jsonSchema.ts │ │ │ │ │ ├── jsonc-parser.ts │ │ │ │ │ └── localize.ts │ │ │ │ ├── formatting.ts │ │ │ │ ├── jsonHover.ts │ │ │ │ ├── languageFeatures.ts │ │ │ │ ├── monacoJson.ts │ │ │ │ ├── schemas │ │ │ │ │ ├── alm.json │ │ │ │ │ ├── package.json │ │ │ │ │ ├── tsconfig.json │ │ │ │ │ └── tslint.json │ │ │ │ ├── service │ │ │ │ │ ├── jsonCompletions.ts │ │ │ │ │ ├── jsonCompletions2.ts │ │ │ │ │ ├── jsonFormatter.ts │ │ │ │ │ └── jsonSchemaService.ts │ │ │ │ ├── tokenization.ts │ │ │ │ └── utils │ │ │ │ │ └── strings.ts │ │ │ └── typescript │ │ │ │ ├── autocomplete.css │ │ │ │ ├── autocomplete.ts │ │ │ │ ├── formatting.ts │ │ │ │ ├── monacoTypeScript.ts │ │ │ │ ├── provideDocumentHighlights.ts │ │ │ │ ├── provideHover.ts │ │ │ │ ├── richLanguageConfiguration.ts │ │ │ │ ├── snippets.ts │ │ │ │ └── tokenization.ts │ │ ├── model │ │ │ ├── classifierCache.ts │ │ │ ├── docCache.ts │ │ │ └── editBatcher.ts │ │ ├── monacoUtils.ts │ │ └── search │ │ │ └── monacoSearch.ts │ ├── omniSearch │ │ └── omniSearch.tsx │ ├── pendingRequestsIndicator.css │ ├── pendingRequestsIndicator.tsx │ ├── root.tsx │ ├── selectListView.tsx │ ├── serverExit │ │ └── serverExit.tsx │ ├── settings │ │ └── settings.ts │ ├── state │ │ ├── clientSession.ts │ │ ├── settings.ts │ │ ├── simpleRedux.ts │ │ └── state.ts │ ├── statusBar.tsx │ ├── styles │ │ └── styles.tsx │ ├── tabs │ │ ├── errorMessage.tsx │ │ ├── tips.tsx │ │ └── v2 │ │ │ ├── appTabsContainer.css │ │ │ ├── appTabsContainer.tsx │ │ │ ├── astView.less │ │ │ ├── astView.tsx │ │ │ ├── codeTab.tsx │ │ │ ├── dependencyView.less │ │ │ ├── dependencyView.tsx │ │ │ ├── documentationView.tsx │ │ │ ├── findAndReplaceMulti.tsx │ │ │ ├── liveDemoReactView.tsx │ │ │ ├── liveDemoView.tsx │ │ │ ├── tab.ts │ │ │ ├── tabRegistry.tsx │ │ │ ├── tabTemplate.tsx │ │ │ ├── testedView.tsx │ │ │ ├── tsFlowView.tsx │ │ │ └── umlView.tsx │ ├── trueMain.tsx │ ├── ui.tsx │ ├── uix.tsx │ └── utils │ │ ├── alertOnLeave.ts │ │ ├── fontAwesomeToCharCode.ts │ │ ├── preventBackspaceNav.ts │ │ └── someFormOfInput.ts ├── build.ts ├── common │ ├── events.ts │ ├── json.ts │ ├── pure.ts │ ├── types.ts │ └── utils.ts ├── languageServiceHost │ ├── README.md │ ├── alm.d.ts │ ├── languageServiceHost.ts │ ├── languageServiceHostNode.ts │ └── liner.ts ├── public │ ├── assets │ │ ├── clippy.svg │ │ └── typeIcons.svg │ ├── favicon.ico │ └── index.html ├── server.ts ├── server │ ├── commandLine.ts │ ├── devtime.ts │ ├── devtime.txt │ ├── disk │ │ ├── activeProjectConfig.ts │ │ ├── editorOptions.ts │ │ ├── fileModel.ts │ │ ├── fileModelCache.ts │ │ ├── projectDataLoader.ts │ │ ├── session.ts │ │ ├── settings.ts │ │ ├── watchEditorConfig.ts │ │ └── workingDir.ts │ ├── errorCodes.ts │ ├── globalErrorCacheServer.ts │ ├── imgServer.ts │ ├── lang │ │ └── config │ │ │ └── configService.ts │ ├── serverStarted.ts │ ├── utils │ │ ├── errorsCache.ts │ │ ├── fsu.ts │ │ ├── getPort.ts │ │ ├── simpleWorker.ts │ │ └── treeKill.ts │ └── workers │ │ ├── external │ │ ├── README.md │ │ ├── configCreatorService.ts │ │ ├── demoReact │ │ │ ├── bundler │ │ │ │ ├── bundlerContract.ts │ │ │ │ ├── bundlerMaster.ts │ │ │ │ └── bundlerWorker.ts │ │ │ └── client │ │ │ │ └── alm.ts │ │ ├── demoService.ts │ │ ├── findAndReplaceMultiService.ts │ │ ├── gitService.ts │ │ ├── npmService.ts │ │ └── serverDiskService.ts │ │ ├── fileListing │ │ ├── fileListingContract.ts │ │ ├── fileListingMaster.ts │ │ └── fileListingWorker.ts │ │ ├── lang │ │ ├── activeProject.ts │ │ ├── cache │ │ │ ├── outputStatusCache.ts │ │ │ └── tsErrorsCache.ts │ │ ├── core │ │ │ ├── README.md │ │ │ ├── compilationContextExpander.ts │ │ │ ├── formatCodeOptions.ts │ │ │ ├── project.ts │ │ │ ├── simpleValidator.ts │ │ │ ├── tsconfig.ts │ │ │ ├── tsconfigValidation.ts │ │ │ └── typeScriptDir.ts │ │ ├── docs │ │ │ ├── README.md │ │ │ ├── docs.ts │ │ │ └── transformers.ts │ │ ├── liveAnalysis │ │ │ └── liveAnalysis.ts │ │ ├── modules │ │ │ ├── README.md │ │ │ ├── astToText.ts │ │ │ ├── astUtils.ts │ │ │ ├── building.ts │ │ │ ├── formatting.ts │ │ │ ├── getPathCompletions.ts │ │ │ ├── jsDoc.ts │ │ │ ├── langHelp.ts │ │ │ ├── programDependencies.ts │ │ │ └── removeUnusedImports.ts │ │ ├── projectService.ts │ │ ├── projectServiceContract.ts │ │ ├── projectServiceMaster.ts │ │ ├── projectServiceWorker.ts │ │ ├── quickFix │ │ │ ├── quickFix.ts │ │ │ ├── quickFixRegistry.ts │ │ │ └── quickFixes │ │ │ │ ├── addClassMember.ts │ │ │ │ ├── equalsToEquals.ts │ │ │ │ ├── implementInterface.ts │ │ │ │ ├── quoteToTemplate.ts │ │ │ │ ├── quotesToQuotes.ts │ │ │ │ ├── singleLineCommentToJsdoc.ts │ │ │ │ ├── stringConcatToTemplate.ts │ │ │ │ └── typeAssertPropertyAccessToAny.ts │ │ ├── tsFlow │ │ │ └── tsFlow.ts │ │ └── umlDiagram │ │ │ └── umlDiagram.ts │ │ ├── lint │ │ ├── lintContract.ts │ │ ├── lintMaster.ts │ │ └── lintWorker.ts │ │ └── tested │ │ ├── common │ │ └── testResultsCache.ts │ │ ├── runners │ │ ├── instrumenterCommon.ts │ │ ├── mochaInstrumenter.ts │ │ └── mochaRunner.ts │ │ ├── testedContract.ts │ │ ├── testedMaster.ts │ │ └── testedWorker.ts ├── serverState.ts ├── socket │ ├── serverExit.ts │ ├── socketClient.ts │ ├── socketContract.ts │ └── socketServer.ts ├── socketLib │ ├── socketLib.ts │ ├── socketLibClient.ts │ └── socketLibServer.ts ├── tests │ ├── testedTest.ts │ └── tests.ts ├── tsconfig.json ├── typings.json ├── typings │ ├── browser.d.ts │ ├── browser │ │ └── ambient │ │ │ ├── chalk │ │ │ └── chalk.d.ts │ │ │ ├── chokidar │ │ │ └── chokidar.d.ts │ │ │ ├── colors │ │ │ └── colors.d.ts │ │ │ ├── cookie-parser │ │ │ └── cookie-parser.d.ts │ │ │ ├── d3 │ │ │ └── d3.d.ts │ │ │ ├── express │ │ │ └── express.d.ts │ │ │ ├── github-electron │ │ │ └── index.d.ts │ │ │ ├── glob │ │ │ └── glob.d.ts │ │ │ ├── jquery │ │ │ └── jquery.d.ts │ │ │ ├── marked │ │ │ └── index.d.ts │ │ │ ├── mime │ │ │ └── mime.d.ts │ │ │ ├── minimatch │ │ │ └── minimatch.d.ts │ │ │ ├── minimist │ │ │ └── minimist.d.ts │ │ │ ├── mkdirp │ │ │ └── mkdirp.d.ts │ │ │ ├── mocha │ │ │ └── mocha.d.ts │ │ │ ├── mousetrap │ │ │ └── mousetrap.d.ts │ │ │ ├── ora │ │ │ └── ora.d.ts │ │ │ ├── react-addons │ │ │ └── react-addons.d.ts │ │ │ ├── redux │ │ │ └── redux.d.ts │ │ │ ├── serve-static │ │ │ └── serve-static.d.ts │ │ │ ├── socket.io-client │ │ │ └── socket.io-client.d.ts │ │ │ ├── socket.io │ │ │ └── socket.io.d.ts │ │ │ └── toastr │ │ │ └── toastr.d.ts │ ├── chrome.d.ts │ ├── deep-equal │ │ └── deep-equal.d.ts │ ├── editorconfig │ │ └── editorconfig.d.ts │ ├── escape-html │ │ └── escape-html.d.ts │ ├── fuzzaldrin.d.ts │ ├── globals.d.ts │ ├── golden-layout-global.d.ts │ ├── golden-layout.d.ts │ ├── main.d.ts │ ├── main │ │ └── ambient │ │ │ ├── chalk │ │ │ └── chalk.d.ts │ │ │ ├── chokidar │ │ │ └── chokidar.d.ts │ │ │ ├── cookie-parser │ │ │ └── cookie-parser.d.ts │ │ │ ├── d3 │ │ │ └── d3.d.ts │ │ │ ├── express │ │ │ └── express.d.ts │ │ │ ├── glob │ │ │ └── glob.d.ts │ │ │ ├── jquery │ │ │ └── jquery.d.ts │ │ │ ├── marked │ │ │ └── index.d.ts │ │ │ ├── mime │ │ │ └── mime.d.ts │ │ │ ├── minimatch │ │ │ └── minimatch.d.ts │ │ │ ├── minimist │ │ │ └── minimist.d.ts │ │ │ ├── mkdirp │ │ │ └── mkdirp.d.ts │ │ │ ├── mocha │ │ │ └── mocha.d.ts │ │ │ ├── mousetrap │ │ │ └── mousetrap.d.ts │ │ │ ├── ora │ │ │ └── ora.d.ts │ │ │ ├── redux │ │ │ └── redux.d.ts │ │ │ ├── serve-static │ │ │ └── serve-static.d.ts │ │ │ └── toastr │ │ │ └── toastr.d.ts │ ├── monaco.d.ts │ ├── mousetrap │ │ └── mousetrap-global-bind.d.ts │ ├── mv │ │ └── mv.d.ts │ ├── ncp │ │ └── ncp.d.ts │ ├── open.d.ts │ ├── react-modal │ │ └── react-modal.d.ts │ ├── react-redux │ │ └── react-redux.d.ts │ ├── rimraf │ │ └── rimraf.d.ts │ ├── v8array.d.ts │ └── v8string.d.ts └── webpack.config.ts └── tests ├── cycles ├── bar.js ├── bar.tsx ├── foo.js ├── foo.tsx └── tsconfig.json ├── error ├── fullOfErrors │ ├── bar.js │ ├── bar.tsx │ ├── foo.js │ ├── foo.ts │ ├── tsconfig.json │ └── tslint.json ├── tsconfigInvalidJson │ ├── test.ts │ └── tsconfig.json ├── tsconfigNotFound │ └── test.ts └── tslintTest │ ├── test.ts │ ├── tsconfig.json │ └── tslint.json └── success ├── allowJs ├── js │ ├── bar.js │ ├── foo.js │ └── tests │ │ └── success │ │ └── allowJs │ │ └── src │ │ ├── bar.js │ │ └── foo.js ├── src │ ├── bar.js │ └── foo.ts └── tsconfig.json ├── baseUrlAndPaths ├── deep │ └── folder │ │ ├── bar.js │ │ └── bar.ts ├── foo.js ├── foo.ts └── tsconfig.json ├── justFiles ├── index.ts └── tsconfig.json ├── removeUnusedImports ├── bar.js ├── foo.js ├── iExport.ts ├── iImport.ts └── tsconfig.json ├── rootDirs ├── anotherFolder │ └── anotherFolder │ │ ├── bar.js │ │ └── bar.ts ├── someFolder │ └── someFolder │ │ ├── foo.js │ │ └── foo.ts └── tsconfig.json ├── simple ├── bar.js ├── bar.ts ├── bas.css ├── bas.js ├── bas.tsx ├── foo.js ├── foo.ts ├── nested │ ├── index.js │ ├── index.ts │ ├── nested.js │ └── nested.ts ├── test.cs ├── test.html └── tsconfig.json └── virtualTest ├── README.md ├── virtualA.js ├── virtualA.ts ├── virtualB.js └── virtualB.ts /.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,ts,tsx}] 2 | indent_style = space 3 | indent_size = 4 4 | trim_trailing_whitespace = true 5 | insert_final_newline = true 6 | 7 | # Matches the exact files either package.json or .travis.yml 8 | [{package.json,.travis.yml}] 9 | indent_style = space 10 | indent_size = 2 11 | trim_trailing_whitespace = true 12 | insert_final_newline = true 13 | 14 | [*.md] 15 | trim_trailing_whitespace = true 16 | insert_final_newline = true -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # core.autocrlf 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .tscache 2 | node_modules 3 | npm-debug.log* 4 | .baseDir.ts 5 | src/**/*.js 6 | src/**/*.js.map 7 | src/public/build/** 8 | .alm 9 | .vscode 10 | .DS_Store 11 | 12 | *_almTestData.json 13 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src/server/devtime.txt 2 | cover.jpg 3 | book.json 4 | /docs/** 5 | /src/tests/** 6 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '5' 4 | deploy: 5 | provider: npm 6 | email: basaratali@gmail.com 7 | api_key: 8 | secure: CWfM+wJEc/aKiGKl8PC0+9p3E4G4WgkVdMqzA2EOTNCyytZPRIa9ltgiKRh2CTTFXiq+qZ/g/v52lVucXGOhrh2JWiXrCHIx0+MzyzTgPZJNQ/Rx2K3PWoW4vKjRzj7ZHtoVFRBsLGN3YgxM8YxjUbem+2E/SOIFaj38QHj9SOIo1a1QFOzA2M19Ss1auOrmjmeBdY8mMEynoyLdgnhrFhpkxpfbSz3m+dattE6iglKrxTNSOrj2Kd8ebSjNfWzK4skORoxkkWM9VczygaAd52Kx3cssAEQzdCmWCXMme69WrFAzcRSln6xonYmO4PhV+1d3hf4Ui1fit+bPeuUH+Os7LufSShvashvZaBpCS/AWX0poanL58vMcYhcKn1TW8XusXpcETfdSbcnQpfGYxf7m3Azpp29aQFVSZjQAzjpXDvQoHgheNJh+Iwx/G4UPnPwkzv94Bcg8J0ptx4FE3YqET9Vjeogg8lEqQu/qwu1n8IH/8Q6y31hAIsdoY0cbQ5CCaL5G2t9xTs0bQGeUTyZWwwIxVpzsTwL2tbSreniycSgTiXhrG0BvbX4h0jcLI0EQsIRxW2Ndg3VvC22QKBAad/zITEdpR92YqSBhcRFehkLtzFDLkSHmLK4nGaaR/HJuvc8Z7czyYQANcljOY8H7kpSGFhEmd1+tFDJF8Pc= 9 | on: 10 | tags: true 11 | all_branches: true 12 | repo: alm-tools/alm 13 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | Please see [./docs/contributing/README.md](./docs/contributing/README.md) 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Basarat Ali Syed 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /alm.json: -------------------------------------------------------------------------------- 1 | { 2 | "tests": { 3 | "include": [ 4 | "./src/tests/**/*" 5 | ] 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /bin/alm: -------------------------------------------------------------------------------- 1 | #! /usr/bin/env node 2 | require('../src/server'); 3 | -------------------------------------------------------------------------------- /book.json: -------------------------------------------------------------------------------- 1 | { 2 | "gitbook": ">=3.2.1", 3 | "root": "./docs", 4 | "plugins": ["edit-link", "github"], 5 | "pluginsConfig": { 6 | "edit-link": { 7 | "base": "https://github.com/alm-tools/alm/tree/master/docs", 8 | "label": "Edit This Page" 9 | }, 10 | "github": { 11 | "url": "https://github.com/alm-tools/alm/" 12 | } 13 | }, 14 | "links": { 15 | "sidebar": { 16 | "Made with 🌹": "https://twitter.com/basarat", 17 | "Don't forget to 🌟": "https://github.com/alm-tools/alm" 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alm-tools/alm/ce625372718c501a6e6456263b96760b01a42033/cover.jpg -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # Welcome to a world of joy 2 | 3 | [![Join the chat at https://gitter.im/alm-tools/alm](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/alm-tools/alm?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 4 | 5 | > With great languages come great development tools. 6 | 7 | Thank for you trying out [`alm`](https://alm-tools.github.io). A lot of effort has gone into this project to make sure that you get the best experience possible with TypeScript. 8 | 9 | ![main](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/main.png) 10 | 11 | This guide is divided into three sections. 12 | * A **QuickStart** 13 | * A full **feature guide** 14 | * A **contributing guide** along with **design documentation**. 15 | 16 | The intention is that you read these step by step, dropping off and going out to build your next amazing application at whatever point you want 🌹 17 | 18 | * [Quick Start](/quickstart.md) 19 | -------------------------------------------------------------------------------- /docs/config/README.md: -------------------------------------------------------------------------------- 1 | # Configuration 2 | 3 | You can customize various things about the editor. In this section we cover the following 4 | 5 | * [Editor Config](./editorconfig.md) 6 | * [TSConfig](./tsconfig.md) 7 | * [Command Line Options](./command-line.md) 8 | -------------------------------------------------------------------------------- /docs/config/command-line.md: -------------------------------------------------------------------------------- 1 | ## Command Line 2 | All of these are **optional**: 3 | 4 | * `-o`: Open the browser on the server 5 | * `-d ` : Specify a working directory 6 | * `-p `: Specify a path to the active project. [More](./tsconfig.md) 7 | * `-t `: Specify a custom port number 8 | * `-i`: Creates a new project file and exits. Allows you to give `alm` a quick go on an existing code base. 9 | [](* `-b`: Builds the project and exits. Allows you to run `alm` on a build server.) 10 | * `--safe`: To ignore any previous session data in `.alm` folder 11 | 12 | If you want to host the server publicly here are few more options that are helpful (again completely **optional**): 13 | 14 | * `--httpskey`: path to a `.key` file 15 | * `--httpscert`: path to a `.cert` file 16 | * `--host`: By default we listen on `0.0.0.0` i.e. all local host names. You can restrict that by providing your own name e.g. `foo-pac-machine` 17 | * `--auth`: `username:password` e.g. `--auth someusername:somepassword` (alias `-a`) 18 | -------------------------------------------------------------------------------- /docs/config/editorconfig.md: -------------------------------------------------------------------------------- 1 | # Editor config 2 | Because we want to provide a great editing experience that complements your other editors we have put deep thought into providing a great code formatting experience. 3 | 4 | ## General Configuration 5 | ![](http://editorconfig.org/logo.png) 6 | 7 | We support the following key [editorconfig][editorconfig] properties out of the box. This means we are a good OSS citizen for more than just TypeScript. 8 | 9 | * `end_of_line`: `lf` | `crlf` | `os` (Default. This is recommended for git reasons 🌹) 10 | * `indent_size`: `:number` (Default: `2`) 11 | * `indent_style`: `tab` | `space` (Default: `space`) 12 | * `trim_trailing_whitespace`: `:boolean` (Default: `false`) 13 | * `insert_final_newline`: `:boolean` (Default: `false`) 14 | * `tab_width`: `:number` (Defaults to `indent_size`) 15 | 16 | > Note : `tab_width` is only relevant if you use `tab`s (which we don't recommend you use anyways). 17 | 18 | Just create an `.editorconfig` file in the root of your project. Here is a sample: 19 | 20 | ```ini 21 | root = true 22 | 23 | [*.{js,jsx,ts,tsx}] 24 | indent_style = space 25 | indent_size = 2 26 | trim_trailing_whitespace = true 27 | insert_final_newline = true 28 | ``` 29 | 30 | > `root = true` stops editorconfig from search further up the directory for any other `.editorconfig` files that might match. 31 | 32 | ## TypeScript Formatting Configuration 33 | 34 | 35 | For TypeScript specific stuff you can use the `formatCodeOptions` key in [`tsconfig.json`][tsconfig.json]. 36 | 37 | [editorconfig]:http://editorconfig.org/ 38 | [tsconfig.json]:/config/tsconfig.md 39 | 40 | [NotReallyUsed]: the-following-is-not-really-used-but-I-wanted-to-keep-these-links 41 | [editorOptions]: https://github.com/alm-tools/alm/blob/master/src/server/disk/editorOptions.ts 42 | -------------------------------------------------------------------------------- /docs/contributing/conventions.md: -------------------------------------------------------------------------------- 1 | # File paths 2 | * `fileName`: just the file name e.g `foo.ts` 3 | * `filePath`: Full path e.g. `c:/dev/foo.ts` 4 | * `relativeFilePath`: relative to project e.g.`dev/foo.ts` 5 | 6 | Note: Within the `ts` compiler source `fileName` is actually `filePath` 7 | 8 | # File contents 9 | * `contents` : The string `string` content of a file. 10 | * `text` : The `string:[]` contents split by a newline. 11 | 12 | # Events 13 | * If there is a user command that will subsequently cause another command use `do`/`did` e.g. `doOpenFile` and `didOpenFile` 14 | 15 | # Stream 16 | * If there is something that we care about initially as well as updates use `foo`/`fooUpdated` e.g. `fileList`/`fileListUpdated` 17 | 18 | # `line` , `ch` 19 | Always `0` based, unless explicitly marked to be different. 20 | 21 | # Dependency 22 | Workers and worker-like state modules (file listing, active project) do not explicitly depend on the *socketServer*. Instead they provide an `event` that the socket can pipe to `cast`. Reason, preventing cycles : these modules generally provide a function called from sockets as well (socket -> module) and therefore module using socket will create a cycle. 23 | 24 | # UI / DTO / Disk 25 | Sometimes we have version of the same data between the UI / backend. For this we have: 26 | * UI : used in user interface 27 | * DTO : used in data transfer 28 | * Disk : Used to persist to Disk 29 | -------------------------------------------------------------------------------- /docs/contributing/css.md: -------------------------------------------------------------------------------- 1 | # CSS 2 | 3 | We try to use as little CSS as possible but when using third party libraries sometimes the only way to customize them is with CSS. We use webpack `require` to load such CSS files. 4 | 5 | # Z-Index 6 | Because we have this distributed between TS / CSS files we document these here: 7 | 8 | * Golden-Layout: 2 (in `appTabsContainer.css`) 9 | * Main Panel : 6 (`mainPanel.ts`) 10 | * Modal Overlay: 100 (in `index.html`) 11 | * File Tree View: 6 (`fileTree.tsx`) 12 | * Doctor : 1 (`doctor.tsx`) 13 | 14 | # Background color 15 | Whenever possible prefer the Editor background color. 16 | 17 | * You don't need it explicitly at the root components as we have it setup for `GoldenLayout` (in `appTabsContainer.css`) as well as `body` (in `index.html` as a style attribute) 18 | 19 | * tips.tsx (in `appTabsContainer.css`). 20 | 21 | # TypeStyle 22 | We use typestyle to manage our CSS in JS (TS). Just a bit of naming convention: 23 | 24 | * `**ClassName` : must be used in `className=` attribute 25 | * `**Base` : must be used to make a `ClassName`. 26 | * `**Style`: can be used to make a `ClassName` or directly in a style. 27 | -------------------------------------------------------------------------------- /docs/contributing/demo.md: -------------------------------------------------------------------------------- 1 | ## Great things to demo 2 | The total list of features is long and you can read the guide for that :). But the following makes for a good demo if you are looking for ideas :) 3 | 4 | * `npm install alm -g` 5 | 6 | 7 | * OmniSearch Command 8 | 9 | * Project wide error analysis 10 | * Goto next error in file 11 | * Goto next error in project 12 | * tslint addition 13 | 14 | 15 | * Syntax highlighting quality (compared to e.g. atom) 16 | 17 | 18 | * dependency view 19 | * documentation view 20 | * override notification icon in gutter 21 | * ast view 22 | * quickfix 23 | * autocomplete e.g. filepath completions 24 | * view generated JavaScript 25 | * fast JavaScript generation 26 | 27 | 28 | * Symbol Search 29 | * Outline View 30 | * Inline Rename 31 | * References 32 | * Definition 33 | 34 | * Usability (why not peak definition) 35 | * Cursor History (with Rebasing) 36 | * Paste cycle 37 | 38 | * Tabs: 39 | * Jump to tab 40 | * Duplicate 41 | * Split right 42 | * Jumpy 43 | 44 | * Migration: 45 | * allowJS 46 | * HTML to TSX 47 | * CSS to JS 48 | * JSON Definition to TS 49 | 50 | * Multiple browser windows editing in sync 51 | 52 | * Code Blaster -------------------------------------------------------------------------------- /docs/contributing/dependencies.md: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | 3 | Here we mention some of the dependencies and what we use them for: 4 | 5 | * monaco: the text editor. 6 | * webpack: module loader / bundler. 7 | * react: main ui framework 8 | * free-style: provides css style sheet features using just JavaScript. [See this blog post about it](https://medium.com/@basarat/css-modules-are-not-the-solution-1235696863d6#.ar4ydjv4m). 9 | * marked: markdown parser (markdown -> html) 10 | 11 | 12 | ## Tested 13 | 14 | * `mocha` 15 | * `ts-node` 16 | 17 | `source-map-support` is needed by `ts-node`. We should not need to have it as a dependency but pinned to fix https://github.com/alm-tools/alm/issues/330 18 | -------------------------------------------------------------------------------- /docs/contributing/deployment-intenals.md: -------------------------------------------------------------------------------- 1 | ### *Deployment automation internals* 🌹 2 | 3 | We have an npm `postversion` script setup to run `git push --follow-tags` which pushes the npm version stuff to github. Then we have travis to automatically deploy **tagged commits** to NPM if tests succeed. 4 | 5 | *How travis was setup* 6 | 7 | * Add a .travis.yml file 8 | * Toggle switch on travis using https://travis-ci.org/ 9 | * NPM deploy setup by simply running `travis setup npm` (you get `travis` from `gem install travis`). Then setup the API key using https://github.com/npm/npm/issues/8970#issuecomment-122854271 10 | * `all_branches` in `.travis.yml` is set to `true` because of https://github.com/travis-ci/travis-ci/issues/1675#issuecomment-37851765 11 | -------------------------------------------------------------------------------- /docs/contributing/deployment.md: -------------------------------------------------------------------------------- 1 | # Deployment 2 | 3 | Once you are happy with the code: 4 | * Just run [`npm version`](https://docs.npmjs.com/cli/version) : `npm version major` OR `npm version minor` OR `npm version patch`. 5 | * Write release notes on Github https://github.com/alm-tools/alm/releases. 6 | 7 | **Sample Output** 8 | 9 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/deployment.png) 10 | 11 | > You must have `git` on your system path for this to work. 12 | 13 | ## Release Guidelines 14 | * **Release Notes** : In general be sure to mention any breaking changes 🌹. 15 | * **Release Notes** : Try to link to reasons for upgrading TypeScript (some new cool feature or fix you wanted). 16 | * **Semantic** : TypeScript version upgrades should be considered at least a minor release. 17 | * **Semantic** : If there is a significant change in the TypeScript compiler consider doing a major release. 18 | -------------------------------------------------------------------------------- /docs/contributing/errors.md: -------------------------------------------------------------------------------- 1 | # Errors 2 | 3 | Providing a great error experience is vital. Errors can exist in `tsconfig.json` files, in `ts` files and these need to be shown in the UI as well handled from different sources in the backend. 4 | 5 | ## FrontEnd 6 | We keep a client instance of [`errorCache.ts`][errorCache.ts] syncing to error deltas from the backend. 7 | 8 | ## Backend 9 | 10 | > You might want to read on [our async docs][async] so you know how we `cast` and what we mean by `webserver`. 11 | 12 | The webserver contains the [`globalErrorCacheServer.ts`][globalErrorCacheServer.ts] which is again the singular source of truth. 13 | 14 | It is just an instance of [`errorCache.ts`][errorCache.ts] 15 | 16 | * We just pipe its updates to the clients over web sockets (as mentioned in [async][async]). 17 | * It receives `delta` changes from other error caches e.g. the projectSeviceWorker [`tsErrorCache`][tsErrorCache.ts]. 18 | 19 | That's it! 20 | 21 | # Diagram 22 | `(various source) -> globalErrorCacheServer -> socketio -> globalErrorCacheClient -> (various UI elements)` 23 | 24 | [redux]: /contributing/redux.md 25 | [async]: /contributing/async.md 26 | [errorCache.ts]: https://github.com/alm-tools/alm/blob/master/src/server/utils/errorsCache.ts 27 | [globalErrorCacheServer.ts]: https://github.com/alm-tools/alm/blob/master/src/server/globalErrorCacheServer.ts 28 | [tsErrorCache.ts]: https://github.com/alm-tools/alm/blob/master/src/server/workers/lang/cache/tsErrorsCache.ts 29 | -------------------------------------------------------------------------------- /docs/contributing/file-listing.md: -------------------------------------------------------------------------------- 1 | # File Listing Worker 2 | 3 | [File listing worker][fileListingWorker] is one of the first ones we wrote and continues to be the simplest. 4 | 5 | ## Flow 6 | On working directory getting set the master just calls `setupWatch`. 7 | 8 | * This goes ahead and uses `glob` to glob the whole directory. 9 | * Sets up a watcher (using `chokidar`) on this directory to detect any changes 10 | 11 | Whenever anything changes it send `fileListingDelta` to the master (which is also the web server process). That goes ahead and sends it to any connected clients (using our `cast`) mechanism. 12 | 13 | 14 | [fileListingWorker]: https://github.com/alm-tools/alm/blob/master/src/server/workers/fileListing/fileListingWorker.ts 15 | -------------------------------------------------------------------------------- /docs/contributing/monaco.md: -------------------------------------------------------------------------------- 1 | # Some monaco docs 2 | 3 | ## Taking control of the cursor 4 | 5 | Some functions 6 | ```ts 7 | (editor:Editor) => editor['cursor'].trigger('jumpy','cursorLeft'), 8 | (editor:Editor) => editor['cursor'].trigger('jumpy','cursorDown'), 9 | (editor:Editor) => editor['cursor'].trigger('jumpy','cursorRight'), 10 | (editor:Editor) => editor['cursor'].trigger('jumpy','cursorUp'), 11 | ``` 12 | 13 | ## Completions Sorting 14 | In `Suggest.ts` : determines the overall sorting of completion items : https://github.com/Microsoft/vscode/blob/1889442ff090ef8170814a98698506300962dbba/src/vs/editor/contrib/suggest/common/suggest.ts#L142 15 | 16 | Then in `completionModel.ts` `_createCachedState` : https://github.com/Microsoft/vscode/blob/1889442ff090ef8170814a98698506300962dbba/src/vs/editor/contrib/suggest/common/completionModel.ts#L110 filters these into `filteredItems` 17 | 18 | `_createCachedState` also stores the `_topScoreIdx` and that is used to set the focus as the completion model comes up. -------------------------------------------------------------------------------- /docs/contributing/quickfix.md: -------------------------------------------------------------------------------- 1 | ## QuickFix 2 | The quickest way is to copy an existing one located in the `quickFix` directory. Copy one of these files into a new quick fix. 3 | 4 | Quick fixes are just classes that need to implement the `QuickFix` interface. 5 | 6 | Once you have the quickfix created just put it into the `quickfixRegistry.ts` so that the infrastructure picks it up. 7 | 8 | **Additional Tips** : One indespensible tool when creating a quick fix is the [AST viewer](https://github.com/TypeStrong/atom-typescript#ast-visualizer) which allows you to investigate the TypeScript language service view of the file. 9 | 10 | **New Lines**: All quick fix refactorings *must* use `\n` as the newline. We will map it to whatever is appropriate for the editor config. 11 | -------------------------------------------------------------------------------- /docs/contributing/react.md: -------------------------------------------------------------------------------- 1 | # React Tips 2 | Some general tips 3 | 4 | ## DOM 5 | * The only event from which you can reliably obtain character information `charCode` (as opposed to `keyCode` information) is the keypress event 6 | * Tab key can only be handled in `onKeyDown` 7 | -------------------------------------------------------------------------------- /docs/contributing/redux.md: -------------------------------------------------------------------------------- 1 | # Using Redux 2 | 3 | Redux is great for 4 | * debugging 5 | * keeping things consistent in the app 6 | 7 | However its not written to be easily used by TypeScript. So we have [`simpleRedux.ts`](https://github.com/alm-tools/alm/blob/master/src/app/state/simpleRedux.ts). Usage should be fairly obvious and is documented below. 8 | 9 | ## One time stuff 10 | 11 | (see [`state.ts`](https://github.com/alm-tools/alm/blob/master/src/app/state/state.ts)): 12 | 13 | * define the store state interface 14 | * define initial state 15 | * create `store`. 16 | 17 | ## Creating a new action 18 | The magic is the `add` function. You pass in a `reducer` ... and you get the `actionCreator` created for free. 19 | 20 | The main gain : the `actionCreator` argument + `reducer -> state` transform is all type checked. 21 | 22 | ```ts 23 | export let addTabs = redux.add('addTabs', (state:StoreState, tabs: TabInstance[]): StoreState => { 24 | tabs = state.tabs.concat(tabs); 25 | return { 26 | tabs 27 | }; 28 | }); 29 | ``` 30 | 31 | ## Creating a component 32 | Define your props like : 33 | ```ts 34 | export interface Props extends React.Props { 35 | // from react-redux ... connected below 36 | errorsExpanded?: boolean; 37 | } 38 | ``` 39 | And then connect your component: 40 | ```ts 41 | @connect((state: StoreState): Props => { 42 | return { 43 | errorsExpanded: state.errorsExpanded, 44 | }; 45 | }) 46 | ``` 47 | 48 | ## Global state that comes from server 49 | We setup such state in `main.tsx` basically setting it initially and updating it on new data recieved from server. e.g. The updated errors in the current project. 50 | 51 | ## More 52 | 53 | If you are looking for using these ideas in your own projects, Daniel has been kind enough to write up a project that does more and in a more decoupled (multiple disconnected reducers) way: 54 | 55 | * Docs http://danielearwicker.github.io/Immuto_Strongly_Typed_Redux_Composition.html 56 | * Library https://github.com/danielearwicker/immuto 57 | -------------------------------------------------------------------------------- /docs/contributing/tabs.md: -------------------------------------------------------------------------------- 1 | # Tabs 2 | We use golden-layout. All the tab management is done by a single [`appTabsContainer`][code] container. 3 | 4 | * Getting Started : https://www.golden-layout.com/tutorials/getting-started.html (simpler for us because we use webpack + npm module) 5 | * Examples : https://www.golden-layout.com/examples/ 6 | 7 | ## ReactJS Support 8 | Excellent ReactJS support. You can register react components with the same API as all other components (`layout.registerComponent`). But in the configuration you specify the type to be `react-component`. You also get to provide additional `props` to the component. Checkout the `Simple ReactJS example` in the examples. 9 | 10 | ## Tips from official docs 11 | * Configure the layout: https://golden-layout.com/docs/Config.html 12 | * Configure the items: https://golden-layout.com/docs/ItemConfig.html 13 | * Adding items after initialize: https://golden-layout.com/tutorials/dynamically-adding-components.html 14 | 15 | ## Some notes 16 | * Initially we just make a stack at the root and then add tabs to it. 17 | 18 | ## Row vs. column 19 | The following are rows in golden-layout lingo: 20 | 21 | ``` 22 | a b c 23 | ``` 24 | The following are columns 25 | ``` 26 | a 27 | b 28 | c 29 | ``` 30 | 31 | [code]:https://github.com/alm-tools/alm/blob/master/src/app/tabs/v2/appTabsContainer.tsx 32 | -------------------------------------------------------------------------------- /docs/contributing/travis.md: -------------------------------------------------------------------------------- 1 | # Initial Travis Setup 2 | -------------------------------------------------------------------------------- /docs/contributing/tsconfig.md: -------------------------------------------------------------------------------- 1 | # TSConfig Handling 2 | 3 | > Note : you need knowledge of the different [process boundaries in the code base][process]. 4 | 5 | We have `activeProjectConfig.ts` and `activeProject.ts`. 6 | 7 | ## ActiveProjectConfig 8 | 9 | * This is used in the main web process. It makes sure the `tsconfig.json` is valid and if so sets is as the active config. 10 | * If invalid it reports the errors. 11 | * Watches tsconfig.json. If changed checks if valid / invalid. If valid sets active config again. 12 | 13 | The main web process uses `projectDataLoader` to load the information based on the active config event and sends it down to the project service worker 14 | 15 | ## ActiveProject 16 | 17 | This is used in the project service worker. It gets data passed down from the main process worker and creates a `project`. This `project` is what is used as our main handle to the TypeScript langauge service. 18 | 19 | ## Other files 20 | `tsconfig.ts` : Contains the main entry point for parsing / validation of `tsconfig.json`. Called from `activeProjectConfig.ts`. 21 | 22 | There are other files in the area that `tsconfig.ts` uses (e.g. `compilationContextExpander.ts` to load `node_modules` / do `` tag expansions) to create a proper *compilation context*. 23 | 24 | [process]: (/contributing/async.md) 25 | -------------------------------------------------------------------------------- /docs/features/README.md: -------------------------------------------------------------------------------- 1 | # Features 2 | 3 | In this section we document the various features provided by `alm`. 4 | -------------------------------------------------------------------------------- /docs/features/ast.md: -------------------------------------------------------------------------------- 1 | # AST View 2 | 3 | Command : `Ast View`. Useful when authoring new features. 4 | 5 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/ast.png) 6 | 7 | Also command : `TypeScript: Ast Full` that includes the `trivia` (punctuation, comments etc. received from `ts.Node.getChildren()`) as well. 8 | 9 | PS: The ast view will update as you edit the file 10 | 11 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/astLive.gif) 12 | -------------------------------------------------------------------------------- /docs/features/build.md: -------------------------------------------------------------------------------- 1 | # TypeScript Emit Support 2 | 3 | ## Incremental Build 4 | 5 | > The fastest incremental update possible 6 | 7 | As soon as you open or edit a TypeScript file we do an intelligent emit of the expected JavaScript. 8 | 9 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/emit.gif) 10 | 11 | > Note: You can disable this using `tsconfig.json` [`compileOnSave`][tsconfig-compile-on-save] 12 | 13 | ## Build 14 | 15 | **build** command `F6` to do a full emit + emit check. 16 | 17 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/build.gif) 18 | 19 | ## View Live Output JavaScript 20 | 21 | `Ctrl|⌘ + Shift + M` toggles the output co**m**piled JS file for a give TypeScript file. 22 | 23 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/emitToggle.png) 24 | 25 | [tsconfig-compile-on-save]:/config/tsconfig.md#compileonsave 26 | 27 | ## Compile and send JavaScript to the console 28 | 29 | `Ctrl|⌘ + M` compiles the selected TypeScript, transpiles it to JavaScript and then sends it to the browser (chrome) console. 30 | 31 | > Can be used even if `compileOnSave` is false ;) 32 | -------------------------------------------------------------------------------- /docs/features/css-to-ts.md: -------------------------------------------------------------------------------- 1 | # CSS to TS 2 | Select a section of CSS `property:value` pairs and run the command `CSS to TS` to get a valid TypeScript object literal. 3 | 4 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/cssToTs.gif) 5 | -------------------------------------------------------------------------------- /docs/features/docblockr.md: -------------------------------------------------------------------------------- 1 | ## DocBlockr 2 | 3 | We consider documenting code a very important part of writing code (almost just as important as adding type annotations). So we have special help to make this a painless and enjoyable process. 4 | 5 | ### Comment extension 6 | Single line comments / multiline comments / JSDoc style comments extend the way you would expect 7 | 8 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/docblockr/extension.gif) 9 | 10 | > TIP: you can break out of a single comment chain by using the toggle comment `Ctrl|⌘ + /` command. 11 | 12 | ### JSDoc support 13 | 14 | JSDoc comments (comments that start with `/**`) are the defacto way to document your variables / types etc. We have special love for them too. 15 | 16 | ### Quick JSDoc snippet 17 | Just type `//` and press `Tab` to get quick jsDoc snippet. 18 | 19 | 20 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/docblockr/singleLineJsdoc.gif) 21 | 22 | ### Big JSDoc snippet 23 | Just type `///` and press `Tab` to get a big jsDoc snippet. 24 | 25 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/docblockr/multiLineJsdoc.gif) 26 | 27 | 28 | ### Sections 29 | Sometimes you just want a big comment block to document a *portion* of code (instead of a single declaration like a class / variable for which you would use JSDoc). 30 | 31 | Just type `////` and press `Tab` to get a big section comment. 32 | 33 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/docblockr/fourslash.gif) 34 | -------------------------------------------------------------------------------- /docs/features/documentation-view.md: -------------------------------------------------------------------------------- 1 | # Documentation View 2 | 3 | > Command: Open documentation view `Ctrl|⌘ + Shift + "` 4 | 5 | The objective of the documentation view is to provide you some insight into the project. It automatically lists all the files in your project as soon as you open it. Files are grouped by folder (a common grouping of functionality). 6 | 7 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/documentationView/root.png) 8 | 9 | > Note: Files can either be modules or global. A topic [covered here](https://basarat.gitbooks.io/typescript/content/docs/project/modules.html). 10 | 11 | Click on a file to view its documentation: 12 | 13 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/documentationView/moduleDocumentation.png) 14 | 15 | 16 | Ofcourse you can use the find command to narrow in on that thing you are searching for: 17 | 18 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/documentationView/find.png) 19 | 20 | > You can think of `find` as a nice way to explore the project. 21 | 22 | Click on any item in the documentation to open the location where it is defined: 23 | 24 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/documentationView/clickToOpen.png) 25 | 26 | And ofcourse, the documentation view is live updating: 27 | 28 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/documentationView/live.gif) 29 | -------------------------------------------------------------------------------- /docs/features/errors.md: -------------------------------------------------------------------------------- 1 | # Error Analysis 2 | 3 | ## That File 4 | 5 | We lint your current file as you edit it. 6 | 7 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/liveLinting.gif) 8 | 9 | ## That Program 10 | 11 | And actually we do whole program analysis in the background. 12 | 13 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/wholeProgram.gif) 14 | 15 | > No black magic needed. Just a black color theme. 16 | 17 | ## Active List 18 | 19 | Going through your error list is a breeze with `F8` (goto next) and `Shift+F8` (goto previous). 20 | 21 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/activeList.gif) 22 | 23 | ## Error Panel Toggle 24 | 25 | While you learn TypeScript you might like the error panel open. But no one likes to be told they are wrong all the time. So `Ctrl|⌘ + ;` will toggle it for you 26 | 27 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/errorPanelToggle.gif) 28 | 29 | > Sorry for making you use the semicolon key 30 | 31 | ## Visibility 32 | 33 | Of course you will be notified when there is ts work happening 🌹 34 | 35 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/tsworking.gif) 36 | -------------------------------------------------------------------------------- /docs/features/formatting.md: -------------------------------------------------------------------------------- 1 | ## Formatting 2 | 3 | Flowless, easy and automatic formatting experience is key to a great IDE experience and one that is highly supported by the TypeScript compiler. 4 | 5 | When you run the `Editor: Format Code` command (`Ctrl|⌘ + Alt| + L`) formatting occurs on any selected text (if any) or the entire code file. 6 | 7 | * Selected text 8 | 9 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/format/formatSelected.gif) 10 | 11 | * Whole file 12 | 13 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/format/formatWholeFile.gif) 14 | 15 | 16 | ### Configuration 17 | 18 | Formatting options are configured using [`.editorconfig`][editorconfig] (general editor options) + [`tsconfig.json`][tsconfig]'s `formatCodeOptions` (TypeScript specific options). 19 | 20 | ### Auto indent 21 | 22 | Auto indenting TypeScript is also driven by the *compiler* code instead of brittle regexes. It happens automatically on `enter` 23 | 24 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/format/autoIndent.gif) 25 | 26 | ### Auto format 27 | 28 | Not only does indentation happen automatically. Formatting also happens automatically on `enter` `;` `}`. Trye and spot all the times the code is automatically getting formatted in the gif below 29 | 30 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/format/autoFormat.gif) 31 | 32 | [editorconfig]:/config/editorconfig.md 33 | [tsconfig]:/config/tsconfig.md 34 | -------------------------------------------------------------------------------- /docs/features/git.md: -------------------------------------------------------------------------------- 1 | # Git Support 2 | 3 | For `git` support you need to have `git` on your system path. We basically just call out to that executable for you 🌹 4 | 5 | ## Git Reset File 6 | 7 | Quickly go back to the last Git commited version of the file using `Alt + Ctrl|⌘ + Z`. Of course you can undo this reset with `Ctrl|⌘ + Z`. 8 | 9 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/gitResetFile.gif) 10 | 11 | ## Git Status Gutter 12 | 13 | New sections as green, modifications as yellow, and deletions as red dots. 14 | 15 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/gitStatus.png) 16 | 17 | We also show these in the scroll bar so you know exactly what you have touched in the file. 18 | 19 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/gitStatusScrollbar.png) 20 | 21 | ## Git add all, commit and push 22 | 23 | This is what you mostly do all the time. So a handy dandy command exists for it. 24 | 25 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/git/gitAddAllCommitAndPush.gif) -------------------------------------------------------------------------------- /docs/features/html-to-tsx.md: -------------------------------------------------------------------------------- 1 | # HTML To TSX 2 | Select a section of HTML and run the command `HTML to TSX` to get a valid TSX code fragment. 3 | 4 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/htmlToTsx.gif) 5 | -------------------------------------------------------------------------------- /docs/features/image-viewer.md: -------------------------------------------------------------------------------- 1 | # Image Viewer 2 | 3 | Nothing fancy. Open an image file and we give you the image viewer. 4 | 5 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/imageViewer/basic.png) 6 | 7 | Here is a demo of it in use. 8 | 9 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/imageViewer/viewer.gif) 10 | -------------------------------------------------------------------------------- /docs/features/javascript.md: -------------------------------------------------------------------------------- 1 | # JavaScript support 2 | 3 | The JavaScript support is just as good as the TypeScript support, because TypeScript loves JavaScript. The best way to use in a JavaScript project is to create a `tsconfig.json` with `allowJs` set to true: 4 | 5 | ```json 6 | { 7 | "compilerOptions": { 8 | "allowJs": true, 9 | "outDir": "./dist" 10 | } 11 | } 12 | ``` 13 | 14 | > Note: `outDir` is required with `allowJs` because you don't want to overwrite your JS source by mistake 🌹. 15 | -------------------------------------------------------------------------------- /docs/features/json-to-dts.md: -------------------------------------------------------------------------------- 1 | # JSON to TypeScript Definition 2 | Select a section of JSON (or just JavaScript object literal) e.g. `{ foo: 123 }` and run the command `JSON to TypeSript` to get a TypeScript definition for the object literal. 3 | 4 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/jsonToDts.gif) 5 | -------------------------------------------------------------------------------- /docs/features/lint.md: -------------------------------------------------------------------------------- 1 | # Lint 2 | 3 | We provide a high quality integration with tslint that works as a `warning` system consolidated with the TypeScript error analysis. 4 | 5 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/linter.png) 6 | 7 | ## tslint.json 8 | 9 | Configuration is driven with `tslint.json`. We determine the `tslint.json` with a simple findup from the current `tsconfig.json` so the closest one wins ❤️. 10 | 11 | > We recommend a single `tslint.json` file in your project. 12 | 13 | ## Built in Project support 14 | 15 | We integrate tslint with the TypeScript project that is currently active which is essentially the same as `tslint --project --type-check`. This allows you to use fancy tslint rules that depend upon the *types* of various variables. 16 | 17 | ## Whole project linting 18 | 19 | We lint every file in your current TypeScript project and live refresh that in the background so you always get the up to date list of all the things that might be wrong. 20 | 21 | > We ignore `.d.ts` as tslinting these (mostly generated) files is garbage 🌹 22 | -------------------------------------------------------------------------------- /docs/features/live-analysis.md: -------------------------------------------------------------------------------- 1 | # Live Analysis 2 | In addition to our stellar project wide error reporting we perform some live analysis on any open files e.g. we highlight overrides in the gutter 3 | 4 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/liveAnalysis/overrides.gif) 5 | -------------------------------------------------------------------------------- /docs/features/live-demo-react.md: -------------------------------------------------------------------------------- 1 | # Quickly Test React Components 2 | You quickly render a component using react to see how it would behave like using `alm.render` and running the command "Demo React File". No need to setup a complex build tool chain or mess with your app structure just for a simple component experiment. 3 | 4 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/demoReact.gif) 5 | 6 | > It is even better if you write your React components as Pure JS components e.g. using something like [TypeStyle](http://typestyle.io/) 7 | -------------------------------------------------------------------------------- /docs/features/live-demo.md: -------------------------------------------------------------------------------- 1 | ## Live demo a TypeScript file 2 | 3 | Run command `Demo file` to live test some TypeScript code. It is transpiled on the fly, executed in nodejs and output is shown back to you. 4 | 5 | ![](https://cloud.githubusercontent.com/assets/874898/21340501/1fdd2742-c6db-11e6-9c7e-84a8c28a25f8.gif) 6 | 7 | 8 | Whenever you explicitly run the `save` command the file is run again. You can use this to easily try out how your code will behave without having to setup an entire toolchain or leave your IDE. 9 | 10 | > Stop demo by closing tab or running the command `Demo stop`. 11 | -------------------------------------------------------------------------------- /docs/features/npm.md: -------------------------------------------------------------------------------- 1 | # NPM Support 2 | 3 | Hover over some package name in dependencies section to see what it is about. 4 | 5 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/npm/hover.gif) 6 | -------------------------------------------------------------------------------- /docs/features/omni-search.md: -------------------------------------------------------------------------------- 1 | 2 | A unified search input for the following: 3 | 4 | * [Command Search](#command-search) 5 | * [Project FilePath Search](#project-filepath-search) 6 | * [Symbol Search](#symbol-search) 7 | * [File Search](#file-search) 8 | * [Project Search](#project-search) 9 | 10 | ## Command Search 11 | 12 | Use the command search (`Ctrl|⌘ + Shift + P`) to see all the shortcuts at your disposal. 13 | 14 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/commandSearch.gif) 15 | 16 | ## Project FilePath Search 17 | 18 | The Project FilePath search mode (`Ctrl|⌘ + P`) lets navigate just your TypeScript project files. 19 | 20 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/filesPathsInProject.png) 21 | 22 | ## Symbol Search 23 | 24 | The symbol search mode (`Ctrl|⌘ + Shift + H`) lets navigate your projects with meaning. 25 | 26 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/symbolSearchProject.gif) 27 | 28 | There is also a *faster* + *already filtered by the open filePath* version (`Ctrl|⌘ + H`) 29 | 30 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/symbolSearch.gif) 31 | 32 | ## File Search 33 | Search all the paths in the working directory to open a file (`Ctrl|⌘ + O`) 34 | 35 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/omnisearch.gif) 36 | 37 | ## Project Search 38 | 39 | Search for and set the **active** TypeScript project (`tsconfig.json`) using project search (`Alt + Shift + P`) 40 | 41 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/projectSearch.gif) 42 | -------------------------------------------------------------------------------- /docs/features/removeUnusedImports.md: -------------------------------------------------------------------------------- 1 | ## Remove Unused Imports 2 | 3 | As your project grows over time it is only natural to be left with imports in a file that aren't actually used in the file. We have a handy dandy command "Remove Unused Imports" which removes any imports that aren't used in the TypeScript file. 4 | 5 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/removeUnusedImports.gif) 6 | -------------------------------------------------------------------------------- /docs/features/semantic-view.md: -------------------------------------------------------------------------------- 1 | # Semantic View 2 | 3 | > Command Search : Toggle Semantic View 4 | 5 | Gives a quick overview of the contents of a file. Useful when you are dealing with large complex files. 6 | 7 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/semanticView/basic.png) 8 | 9 | You can click on a node in the view to go to its position in the file. 10 | 11 | The semantic view highlights your cursor position within the file. 12 | 13 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/semanticView/followCursor.gif) 14 | 15 | It also live updates as you edit the file. 16 | 17 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/semanticView/live.gif) 18 | -------------------------------------------------------------------------------- /docs/features/tree.md: -------------------------------------------------------------------------------- 1 | # Tree View 2 | The tree view is designed to be as keyboard friendly as the rest of the application. 3 | 4 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/tree/basic.png) 5 | 6 | ## Basic 7 | 8 | * Toggle: `Ctrl|⌘ + \`. Opening the tree view automatically focuses you to it. 9 | * Reveal Active File: `Ctrl|⌘ + Shift + \` 10 | * Focus: `Ctrl|⌘ + 0`. If its not open we open it 11 | 12 | ## Advanced 13 | 14 | Beyond that the normal stuff you expect like arrow keys, `Enter` etc should just work. There are lot of other things the tree view provides but instead of listing them here, note that you can get to these by just tapping `H` when the tree view is in focus: 15 | 16 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/tree/help.png) 17 | -------------------------------------------------------------------------------- /docs/features/uml.md: -------------------------------------------------------------------------------- 1 | # Class Diagram 2 | 3 | Just run the `UML class diagram` command with any file selected and we make a UML class diagram of all the classes in the file. 4 | 5 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/uml/basic.png) 6 | 7 | > TIP : Click on any item in the documentation to open the file location where it is defined 8 | 9 | Its generally a good idea to open it up if you see `extends` to get a quick overview (especially to see overrides) 10 | 11 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/uml/override.png) 12 | 13 | And as always, the class view is *live updating as well*. 14 | 15 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/uml/live.gif) 16 | -------------------------------------------------------------------------------- /docs/features/virtual-projects.md: -------------------------------------------------------------------------------- 1 | # Virtual Projects 2 | 3 | We believe very firmly that the best experience with TypeScript is a deterministic one where you control the `tsconfig.json`. However sometimes you end up opening a `.ts` or `.js` file that is not a part of your project and you just want to poke around it. You can do that quite easily by using the [project search][project-search] to select a *Virtual Project* based on the current file. 4 | 5 | ![](https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/virtual.gif) 6 | 7 | [project-search](/features/omni-search.md#project-search) 8 | -------------------------------------------------------------------------------- /nodemon.json: -------------------------------------------------------------------------------- 1 | { 2 | "ignore": [ 3 | "src/app/*", 4 | "tests/*", 5 | "alm.json" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /resources/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alm-tools/alm/ce625372718c501a6e6456263b96760b01a42033/resources/icon.png -------------------------------------------------------------------------------- /scripts/prepublish.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | set -e 3 | 4 | # Compile 5 | npm run tsc 6 | 7 | # Bundle 8 | ./node_modules/.bin/webpack -p --define process.env.NODE_ENV='"production"' --config ./src/webpack.config.js 9 | -------------------------------------------------------------------------------- /scripts/resume.sh: -------------------------------------------------------------------------------- 1 | #Resume work on a new machine 2 | 3 | git -c diff.mnemonicprefix=false -c core.quotepath=false fetch origin 4 | git -c diff.mnemonicprefix=false -c core.quotepath=false pull --rebase origin master 5 | 6 | npm install 7 | -------------------------------------------------------------------------------- /src/app/clientTestResultsCache.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A global view into the error results on the client side 3 | */ 4 | import {TestResultsCache} from "../server/workers/tested/common/testResultsCache"; 5 | export const testResultsCache = new TestResultsCache(); 6 | -------------------------------------------------------------------------------- /src/app/commands/general/gitAddAllCommitAndPush.ts: -------------------------------------------------------------------------------- 1 | import * as commands from "../commands"; 2 | import * as ui from "../../ui"; 3 | import { inputDialog } from "../../dialogs/inputDialog"; 4 | import { server } from '../../../socket/socketClient'; 5 | 6 | commands.gitAddAllCommitAndPush.on(() => { 7 | inputDialog.open({ 8 | header: 'Git: Add all the files, commit with the following message, and push', 9 | onOk: (message) => { 10 | ui.notifyInfoNormalDisappear("Git: Sending commands. Will notify when complete."); 11 | server 12 | .gitAddAllCommitAndPush({ message }) 13 | .then(res => { 14 | if (res.type === 'error') { 15 | ui.notifyWarningNormalDisappear(`Git Failed:${res.error}`); 16 | } 17 | else { 18 | ui.notifySuccessNormalDisappear(res.log); 19 | ui.notifySuccessNormalDisappear("Git: Commands ran to completion successfully."); 20 | } 21 | commands.gitStatusNeedsRefresh.emit({}); 22 | }); 23 | }, 24 | onEsc: () => null, 25 | }) 26 | }); 27 | -------------------------------------------------------------------------------- /src/app/commands/general/gitFetchLatestAndRebase.ts: -------------------------------------------------------------------------------- 1 | import * as commands from "../commands"; 2 | import * as ui from "../../ui"; 3 | import { inputDialog } from "../../dialogs/inputDialog"; 4 | import { server } from '../../../socket/socketClient'; 5 | 6 | commands.gitFetchLatestAndRebase.on(() => { 7 | ui.notifyInfoNormalDisappear("Git: Sending commands. Will notify when complete."); 8 | server 9 | .gitFetchLatestAndRebase({}) 10 | .then(res => { 11 | if (res.type === 'error') { 12 | ui.notifyWarningNormalDisappear(`Git Failed:${res.error}`); 13 | } 14 | else { 15 | ui.notifySuccessNormalDisappear(res.log); 16 | ui.notifySuccessNormalDisappear("Git: Commands ran to completion successfully."); 17 | } 18 | commands.gitStatusNeedsRefresh.emit({}); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /src/app/commands/general/openFileFromServerDisk.ts: -------------------------------------------------------------------------------- 1 | import * as commands from "../commands"; 2 | import * as ui from "../../ui"; 3 | import * as selectListView from "../../selectListView"; 4 | 5 | commands.openFileFromDisk.on(() => { 6 | ui.comingSoon("Open a file from the server disk"); 7 | selectListView.selectListView.show({ 8 | header:'Open a file from server disk', 9 | data: [], 10 | render: (filePath, matched)=> matched, 11 | textify: (filePath) => filePath, 12 | onSelect: (filePath) => { 13 | commands.doOpenOrFocusFile.emit({ filePath }); 14 | return ''; 15 | }, 16 | getNewData:(filterValue) => { 17 | // TODO: 18 | return Promise.resolve([]); 19 | } 20 | }) 21 | }); 22 | -------------------------------------------------------------------------------- /src/app/components/buttons.tsx: -------------------------------------------------------------------------------- 1 | import * as csx from "../base/csx"; 2 | import { textColor } from "../styles/styles"; 3 | import * as React from "react"; 4 | import * as ui from "../ui"; 5 | import * as typestyle from "typestyle"; 6 | 7 | const activeStyle = { 8 | backgroundImage: 'linear-gradient(#353434, #7B7B7B)', 9 | color: 'white', 10 | } 11 | const disabledStyle = { 12 | opacity: '.5', 13 | } 14 | const buttonBlackClassName = typestyle.style( 15 | csx.flexRoot, 16 | { 17 | fontFamily: 'sans-serif', 18 | fontWeight: 'bold', 19 | fontSize: '.6rem', 20 | 21 | transition: '.2s color, .2s opacity', 22 | 23 | color: textColor, 24 | padding: '2px 3px', 25 | display: 'inline-flex', 26 | cursor: 'pointer', 27 | backgroundImage: 'linear-gradient(#7B7B7B, #353434)', 28 | border: '1px solid #464646', 29 | userSelect: 'none', 30 | outline: '0px', 31 | }, 32 | { 33 | $nest: { '&:active': activeStyle } 34 | } 35 | ); 36 | 37 | export const ButtonBlack = (props: { text: string, onClick: () => any, isActive?: boolean, disabled?: boolean }) => { 38 | const style = csx.extend(props.isActive ? activeStyle : {}, props.disabled ? disabledStyle : {}); 39 | return ; 40 | }; 41 | -------------------------------------------------------------------------------- /src/app/components/clipboard.tsx: -------------------------------------------------------------------------------- 1 | import React = require("react"); 2 | import * as csx from '../base/csx'; 3 | import { BaseComponent } from "../ui"; 4 | import * as ui from "../ui"; 5 | import * as typestyle from "typestyle"; 6 | 7 | export interface Props { 8 | text: string; 9 | } 10 | export interface State { 11 | 12 | } 13 | 14 | let buttonClassName = typestyle.style({ 15 | height: '18px', 16 | padding: '2px 3px', 17 | display: 'inline-flex', 18 | cursor: 'pointer', 19 | backgroundImage: 'linear-gradient(#7B7B7B, #353434)', 20 | border: '1px solid #464646', 21 | borderRadius: '3px', 22 | userSelect: 'none', 23 | outline: '0px', 24 | 25 | $nest: { 26 | '&:active': { 27 | backgroundImage: 'linear-gradient(#353434, #7B7B7B)', 28 | } 29 | } 30 | }); 31 | 32 | let clippy = { 33 | width: '12px', 34 | height: '12px' 35 | } 36 | 37 | export class Clipboard extends BaseComponent{ 38 | render() { 39 | return ( 40 | 43 | ); 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/app/components/indicator.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export const Indicator = ({ color }: { color: string }) => { 4 | return ( 5 | 8 | 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /src/app/components/inputs.tsx: -------------------------------------------------------------------------------- 1 | import * as csx from "../base/csx"; 2 | import {textColor} from "../styles/styles"; 3 | import * as React from "react"; 4 | import * as ui from "../ui"; 5 | import * as styles from "../styles/styles"; 6 | import * as typestyle from "typestyle"; 7 | 8 | const inputBlackClassName = typestyle.style(styles.modal.inputStyleBase, { 9 | fontSize: '.7rem', 10 | lineHeight: '.7rem', 11 | fontFamily: 'sans-serif', 12 | flex: '1', 13 | }); 14 | 15 | export const InputBlack = (props: { 16 | style?: React.CSSProperties, 17 | value: string, 18 | onChange: (value: string) => any, 19 | onKeyDown?: () => any, 20 | placeholder?: string, 21 | }) => { 22 | return ( 23 | props.onChange((e.target as HTMLInputElement).value)} 30 | onKeyDown={props.onKeyDown} 31 | /> 32 | ); 33 | }; 34 | -------------------------------------------------------------------------------- /src/app/components/progress.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | interface Props extends React.Props { current: number, total: number } 4 | 5 | export class Progress extends React.Component { 6 | render() { 7 | 8 | const {current, total} = this.props; 9 | let percent = total == 0 ? 100 : (current / total * 100); 10 | if (percent < 0) { percent = 0 }; 11 | 12 | var parentStyle = { 13 | textAlign: 'center', 14 | fontSize: '.6em', 15 | fontWeight: 'bold', 16 | color: 'white', 17 | border: '1px solid white', 18 | }; 19 | const childStyle = { 20 | backgroundColor: '#0BD318', 21 | width: percent + '%', 22 | transition: "width 200ms", 23 | padding: '5px 10px', 24 | }; 25 | 26 | return ( 27 |
28 |
{this.props.children}
29 |
30 | ); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/app/components/robocop.css: -------------------------------------------------------------------------------- 1 | .progress { 2 | position: relative; 3 | height: 4px; 4 | display: block; 5 | width: 100%; 6 | background-color: #111; 7 | margin: 0.5rem 0 1rem 0; 8 | overflow: hidden; 9 | } 10 | 11 | .progress .indeterminate { 12 | background-color: #00C4FF; 13 | } 14 | 15 | .progress .indeterminate:before { 16 | content: ''; 17 | position: absolute; 18 | background-color: inherit; 19 | top: 0; 20 | left: 0; 21 | bottom: 0; 22 | will-change: left, right; 23 | animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; 24 | } 25 | 26 | 27 | .progress .indeterminate:after { 28 | content: ''; 29 | position: absolute; 30 | background-color: inherit; 31 | top: 0; 32 | left: 0; 33 | bottom: 0; 34 | will-change: left, right; 35 | animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; 36 | animation-delay: 1.15s; 37 | } 38 | 39 | @keyframes indeterminate { 40 | 0% { 41 | left: -35%; 42 | right: 100%; } 43 | 44 | 60% { 45 | left: 100%; 46 | right: -90%; } 47 | 48 | 100% { 49 | left: 100%; 50 | right: -90%; } } 51 | 52 | @keyframes indeterminate-short { 53 | 0% { 54 | left: -200%; 55 | right: 100%; } 56 | 57 | 60% { 58 | left: 107%; 59 | right: -8%; } 60 | 61 | 100% { 62 | left: 107%; 63 | right: -8%; } } 64 | -------------------------------------------------------------------------------- /src/app/components/robocop.tsx: -------------------------------------------------------------------------------- 1 | require('./robocop.css'); 2 | 3 | import React = require("react"); 4 | import * as csx from '../base/csx'; 5 | import {BaseComponent} from "../ui"; 6 | import * as ui from "../ui"; 7 | import * as utils from "../../common/utils"; 8 | import * as styles from "../styles/styles"; 9 | import * as state from "../state/state"; 10 | 11 | export interface Props { 12 | } 13 | export interface State { 14 | 15 | } 16 | 17 | export class Robocop extends BaseComponent{ 18 | render(){ 19 | return ( 20 |
21 |
22 |
23 | ); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/app/configCreator/configCreator.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Commands to create common configuration files 3 | */ 4 | 5 | import * as commands from "../commands/commands"; 6 | import * as ui from "../ui"; 7 | import {server} from "../../socket/socketClient"; 8 | 9 | commands.createEditorconfig.on(()=>{ 10 | server.createEditorconfig({}).then((res)=>{ 11 | if (res.alreadyPresent){ 12 | ui.notifyWarningNormalDisappear('There is already an .editorconfig. Opened that for you instead.'); 13 | commands.doOpenOrFocusFile.emit({ filePath: res.alreadyPresent }); 14 | } 15 | else { 16 | ui.notifySuccessNormalDisappear('Created an .editorconfig'); 17 | } 18 | }) 19 | }) 20 | -------------------------------------------------------------------------------- /src/app/demoTests/demoNode.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file exists to manually test live demo 3 | */ 4 | import { log } from './foo'; 5 | // fail("Hello world"); 6 | log("Hello world"); 7 | log("Hello world"); 8 | log("Hello world"); 9 | log("Hello world"); 10 | log("Hello world"); 11 | log("Hello world"); 12 | log("Hello world"); 13 | log("Hello world"); 14 | log("Hello world"); 15 | log("Hello world"); 16 | 17 | setTimeout(() => { 18 | log("Hello world"); 19 | log("Hello world"); 20 | log("Hello world"); 21 | log("Hello world"); 22 | log("Hello world"); 23 | log("Hello world"); 24 | log("Hello world"); 25 | log("Hello world"); 26 | log("Hello world"); 27 | log("Hello world"); 28 | log("Hello world"); 29 | log("Hello world"); 30 | log("Hello world"); 31 | log("Hello world"); 32 | log("Hello world"); 33 | log("Hello world"); 34 | log("Hello world"); 35 | log("Hello world"); 36 | log("HelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHello world"); 37 | log("Hello world"); 38 | log("Hello world"); 39 | log("Hello world"); 40 | log("Hello world"); 41 | log("Hello world"); 42 | log("Hello world"); 43 | log("Hello world"); 44 | log("Hello world"); 45 | log("Hello world"); 46 | log("Hello world"); 47 | log("Hello world"); 48 | log("Hello world"); 49 | log("Hello world"); 50 | log("Hello world"); 51 | log("Hello world"); 52 | log("Hello world"); 53 | }, 2000) 54 | -------------------------------------------------------------------------------- /src/app/demoTests/demoReact.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | const SuccessButton 4 | = (props) => ( 5 |