[
{
"path": ".eslintrc.js",
"content": "module.exports = {\n \"env\": {\n \"es6\": true,\n \"node\": true,\n \"browser\": true\n },\n \"extends\": \"eslint:recommended\",\n \"rules\": {\n \"no-console\": 0,\n \"indent\": [\n \"error\",\n 2\n ],\n \"linebreak-style\": [\n \"error\",\n \"unix\"\n ],\n \"quotes\": [\n \"error\",\n \"single\"\n ],\n \"semi\": [\n \"error\",\n \"always\"\n ]\n }\n};"
},
{
"path": ".gitignore",
"content": "node_modules\n.esm-cache"
},
{
"path": "LICENSE.md",
"content": "MIT License\n\nCopyright (c) 2017 Asaf Katz\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE."
},
{
"path": "README.md",
"content": "# devtools-playground\nStandalone Devtools for prototyping & debugging.\n\n![](\"./animation.gif\")
\n\n# Features\n- Standalone DevTools\n- Live reloading\n- Support for ES modules (import/export)\n- Built on top of electron, which means that both Node.js modules & the Browser's APIs are available\n\n# Install\n```\nnpm i -g devtools-playground\n```\n\n# Usage\n\nRun: \n```\ndevtools ./file.js\n```\nIt'll open Devtools and reload automatically on every file change.\n\n### ES Modules\nBy default, it uses commonJS modules.\nBut you can enable support for ES module too:\n\n```\ndevtools ./file.js --esm\n```\n\nIt uses `@std/esm` under the hood\n\n---\n\nInspired by [Jam3/devtool](https://github.com/Jam3/devtool)\n"
},
{
"path": "cli.js",
"content": "#! /usr/bin/env node\n\nconst electron = require('electron');\nconst proc = require('child_process');\nconst version = require('./version');\n\nconst args = process.argv.slice(2);\nconst { log } = console;\n\nif (['--version', '-v'].includes(args[0])) {\n return log(version);\n}\n\n// spawn Electron\nproc.spawn(electron, [__dirname, ...args], {\n // stdio: 'inherit'\n});\n"
},
{
"path": "createSettings.js",
"content": "const { join } = require('path');\nconst pkgDir = require('pkg-dir');\nconst minimist = require('minimist');\nconst get = require('lodash/get');\nconst first = require('lodash/first');\n\nconst parseArgs = processArgs => {\n const args = minimist(processArgs.slice(2));\n\n return {\n entry: first(args._),\n esm: !!args.esm\n };\n};\n\nconst resolveEntry = (dir, entry) => {\n if (entry) return entry; \n\n // If no entry specified, take the main entry from package.json\n // if there's no package.json,either, take './index.js'\n try {\n const pkg = require(join(dir, './package.json'));\n return get(pkg, 'main');\n } catch (err) {\n return './index.js';\n }\n};\n\nmodule.exports = function(processArgs) {\n const args = parseArgs(processArgs);\n const dir = pkgDir.sync() || process.cwd();\n const entry = join(dir, resolveEntry(dir, args.entry));\n const { esm } = args;\n\n return { entry, dir, esm };\n};\n"
},
{
"path": "index.html",
"content": "\n\n \n \n Devtools\n \n \n \n \n\n \n\n"
},
{
"path": "main.js",
"content": "const electron = require('electron');\n// Module to control application life.\nconst app = electron.app;\n\n// Module to create native browser window.\nconst BrowserWindow = electron.BrowserWindow;\n\nconst path = require('path');\nconst url = require('url');\n\nconst watch = require('./watch');\n\nconst createSettings = require('./createSettings');\n\nconst settings = createSettings(process.argv);\n\n// expose settings to renderer process \nglobal.settings = settings;\n\n// Keep a global reference of the window object, if you don't, the window will\n// be closed automatically when the JavaScript object is garbage collected.\nlet mainWindow;\n\nconst quit = app.quit.bind(app);\n\nfunction createWindow() {\n // Create the browser window.\n mainWindow = new BrowserWindow({ width: 0, height: 0 });\n\n // and load the index.html of the app.\n mainWindow.loadURL(\n url.format({\n pathname: path.join(__dirname, 'index.html'),\n protocol: 'file:',\n slashes: true\n })\n );\n\n // Open the DevTools.\n mainWindow.webContents.openDevTools({ mode: 'detach' });\n\n // kill the process when devtools is closed\n mainWindow.webContents.on('devtools-closed', quit);\n\n // live-reload devtools\n // watch for changes in the user's project\n const unwatch = watch(settings.dir, () => {\n mainWindow.reload();\n });\n\n // Emitted when the window is closed.\n mainWindow.on('closed', function() {\n // Dereference the window object, usually you would store windows\n // in an array if your app supports multi windows, this is the time\n // when you should delete the corresponding element.\n mainWindow = null;\n unwatch();\n });\n}\n\n// This method will be called when Electron has finished\n// initialization and is ready to create browser windows.\n// Some APIs can only be used after this event occurs.\napp.on('ready', createWindow);\n\n// Quit when all windows are closed.\napp.on('window-all-closed', quit);\n\napp.on('activate', function() {\n // On OS X it's common to re-create a window in the app when the\n // dock icon is clicked and there are no other windows open.\n if (mainWindow === null) {\n createWindow();\n }\n});\n"
},
{
"path": "package.json",
"content": "{\n \"name\": \"devtools-playground\",\n \"version\": \"0.1.0\",\n \"description\": \"Standalone Devtools for prototyping & debugging.\",\n \"main\": \"main.js\",\n \"bin\": {\n \"devtools\": \"./cli.js\"\n },\n \"repository\": \"https://github.com/asfktz/devtools-playground\",\n \"keywords\": [\n \"devtools\",\n \"inspect\",\n \"debugging\",\n \"live-reload\"\n ],\n \"author\": \"Asaf Katz\",\n \"license\": \"MIT\",\n \"dependencies\": {\n \"@std/esm\": \"^0.11.0\",\n \"chokidar\": \"^1.7.0\",\n \"electron\": \"~1.7.8\",\n \"lodash\": \"^4.17.4\",\n \"minimist\": \"^1.2.0\",\n \"pkg-dir\": \"^2.0.0\"\n }\n}\n"
},
{
"path": "renderer.js",
"content": "const { remote } = require('electron');\n// Get the settings exposed by the main process (see main.js).\nconst { entry, esm } = remote.getGlobal('settings');\n\n// Get enhanced require.\nconst getRequire = esm => {\n // No enhancements are needed.\n if (!esm) return require;\n\n // With support for ES modules.\n return require('@std/esm')(module, {\n cjs: true,\n esm: 'js',\n sourceMap: true\n });\n};\n\n// Call the entry with the enhanced require method.\ngetRequire(esm)(entry);"
},
{
"path": "version.js",
"content": "const { name, version } = require('./package.json');\nmodule.exports = `${name} ${version}`;"
},
{
"path": "watch.js",
"content": "const chokidar = require('chokidar');\nconst path = require('path');\nconst debounce = require('lodash/debounce');\n\nmodule.exports = (dir, callback) => {\n const watcher = chokidar\n .watch(dir, {\n ignored: [\n path.join(dir, 'node_modules'),\n path.join(dir, '.esm-cache')\n ],\n ignoreInitial: true\n })\n .on('all', debounce(callback, 30));\n\n return () => watcher.close();\n};\n"
}
]