@shuvi/toolpack 0.0.1-pre.1

package/lib/utils/hotDevClient/index.js

@@ -0,0 +1,304 @@
+"use strict";
+/* eslint-disable camelcase */
+/**
+MIT License
+
+Copyright (c) 2013-present, Facebook, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+// This file is based on https://github.com/facebook/create-react-app/blob/v1.1.4/packages/react-dev-utils/webpackHotDevClient.js
+// It's been edited to rely on webpack-hot-middleware.
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const ErrorOverlay = __importStar(require("react-error-overlay"));
+const strip_ansi_1 = __importDefault(require("strip-ansi"));
+const formatWebpackMessages_1 = __importDefault(require("../formatWebpackMessages"));
+const eventsource_1 = require("./eventsource");
+// This alternative WebpackDevServer combines the functionality of:
+// https://github.com/webpack/webpack-dev-server/blob/webpack-1/client/index.js
+// https://github.com/webpack/webpack/blob/webpack-1/hot/dev-server.js
+// It only supports their simplest configuration (hot updates on same server).
+// It makes some opinionated choices on top, like adding a syntax error overlay
+// that looks similar to our console output. The error overlay is inspired by:
+// https://github.com/glenjamin/webpack-hot-middleware
+// This is a modified version of create-react-app's webpackHotDevClient.js
+// It implements webpack-hot-middleware's EventSource events instead of webpack-dev-server's websocket.
+// https://github.com/facebook/create-react-app/blob/25184c4e91ebabd16fe1cde3d8630830e4a36a01/packages/react-dev-utils/webpackHotDevClient.js
+let hadRuntimeError = false;
+let customHmrEventHandler;
+function connect(options) {
+    // Open stack traces in an editor.
+    ErrorOverlay.setEditorHandler(function editorHandler({ fileName, lineNumber, colNumber }) {
+        // Resolve invalid paths coming from react-error-overlay
+        const resolvedFilename = fileName.replace(/^webpack:\/\/[^/]+/ /* webpack://namaspcae/resourcepath */, '');
+        fetch(options.launchEditorEndpoint +
+            '?fileName=' +
+            window.encodeURIComponent(resolvedFilename) +
+            '&lineNumber=' +
+            window.encodeURIComponent(lineNumber || 1) +
+            '&colNumber=' +
+            window.encodeURIComponent(colNumber || 1));
+    });
+    // We need to keep track of if there has been a runtime error.
+    // Essentially, we cannot guarantee application state was not corrupted by the
+    // runtime error. To prevent confusing behavior, we forcibly reload the entire
+    // application. This is handled below when we are notified of a compile (code
+    // change).
+    // See https://github.com/facebook/create-react-app/issues/3096
+    ErrorOverlay.startReportingRuntimeErrors({
+        onError: function () {
+            hadRuntimeError = true;
+        }
+    });
+    if (module.hot && typeof module.hot.dispose === 'function') {
+        module.hot.dispose(function () {
+            // TODO: why do we need this?
+            ErrorOverlay.stopReportingRuntimeErrors();
+        });
+    }
+    eventsource_1.getEventSourceWrapper(options).addMessageListener(event => {
+        // This is the heartbeat event
+        if (event.data === '\uD83D\uDC93') {
+            return;
+        }
+        try {
+            processMessage(event);
+        }
+        catch (ex) {
+            console.warn('Invalid HMR message: ' + event.data + '\n' + ex);
+        }
+    });
+    return {
+        subscribeToHmrEvent(handler) {
+            customHmrEventHandler = handler;
+        },
+        reportRuntimeError(err) {
+            ErrorOverlay.reportRuntimeError(err);
+        }
+    };
+}
+exports.default = connect;
+// Remember some state related to hot module replacement.
+var isFirstCompilation = true;
+var mostRecentCompilationHash = null;
+var hasCompileErrors = false;
+function clearOutdatedErrors() {
+    // Clean up outdated compile errors, if any.
+    if (typeof console !== 'undefined' && typeof console.clear === 'function') {
+        if (hasCompileErrors) {
+            console.clear();
+        }
+    }
+}
+function afterApplyUpdate() {
+    tryDismissErrorOverlay();
+    console.log('[Fast Refresh] Done.');
+}
+// Successful compilation.
+function handleSuccess() {
+    clearOutdatedErrors();
+    const isHotUpdate = !isFirstCompilation;
+    isFirstCompilation = false;
+    hasCompileErrors = false;
+    // Attempt to apply hot updates or reload.
+    if (isHotUpdate) {
+        tryApplyUpdates(function onHotUpdateSuccess() {
+            // Only dismiss it when we're sure it's a hot update.
+            // Otherwise it would flicker right before the reload.
+            afterApplyUpdate();
+        });
+    }
+}
+// Compilation with warnings (e.g. ESLint).
+function handleWarnings(warnings) {
+    clearOutdatedErrors();
+    var isHotUpdate = !isFirstCompilation;
+    isFirstCompilation = false;
+    hasCompileErrors = false;
+    // Print warnings to the console.
+    const formatted = formatWebpackMessages_1.default({
+        warnings: warnings,
+        errors: []
+    });
+    if (typeof console !== 'undefined' && typeof console.warn === 'function') {
+        for (let i = 0; i < formatted.warnings.length; i++) {
+            if (i === 5) {
+                console.warn('There were more warnings in other files.\n' +
+                    'You can find a complete log in the terminal.');
+                break;
+            }
+            console.warn(strip_ansi_1.default(formatted.warnings[i]));
+        }
+    }
+    // Attempt to apply hot updates or reload.
+    if (isHotUpdate) {
+        tryApplyUpdates(function onSuccessfulHotUpdate() {
+            // Only dismiss it when we're sure it's a hot update.
+            // Otherwise it would flicker right before the reload.
+            tryDismissErrorOverlay();
+        });
+    }
+}
+// Compilation with errors (e.g. syntax error or missing modules).
+function handleErrors(errors) {
+    clearOutdatedErrors();
+    isFirstCompilation = false;
+    hasCompileErrors = true;
+    // "Massage" webpack messages.
+    var formatted = formatWebpackMessages_1.default({
+        errors: errors,
+        warnings: []
+    });
+    // Only show the first error.
+    ErrorOverlay.reportBuildError(formatted.errors[0]);
+    // Also log them to the console.
+    if (typeof console !== 'undefined' && typeof console.error === 'function') {
+        for (var i = 0; i < formatted.errors.length; i++) {
+            console.error(strip_ansi_1.default(formatted.errors[i]));
+        }
+    }
+}
+function tryDismissErrorOverlay() {
+    if (!hasCompileErrors) {
+        ErrorOverlay.dismissBuildError();
+    }
+}
+// There is a newer version of the code available.
+function handleAvailableHash(hash) {
+    // Update last known compilation hash.
+    mostRecentCompilationHash = hash;
+}
+// Handle messages from the server.
+function processMessage(e) {
+    const obj = JSON.parse(e.data);
+    switch (obj.action) {
+        case 'building': {
+            console.log('[Fast Refresh] bundle ' +
+                (obj.name ? "'" + obj.name + "' " : '') +
+                'rebuilding');
+            break;
+        }
+        case 'built':
+        case 'sync': {
+            if (obj.hash) {
+                handleAvailableHash(obj.hash);
+            }
+            const { errors, warnings } = obj;
+            const hasErrors = Boolean(errors && errors.length);
+            if (hasErrors) {
+                return handleErrors(errors);
+            }
+            const hasWarnings = Boolean(warnings && warnings.length);
+            if (hasWarnings) {
+                return handleWarnings(warnings);
+            }
+            handleSuccess();
+            break;
+        }
+        case 'warnings':
+            handleWarnings(obj.data);
+            break;
+        case 'errors':
+            handleErrors(obj.data);
+            break;
+        default: {
+            if (customHmrEventHandler) {
+                customHmrEventHandler(obj);
+                break;
+            }
+            break;
+        }
+    }
+}
+// Is there a newer version of this code available?
+function isUpdateAvailable() {
+    /* globals __webpack_hash__ */
+    // __webpack_hash__ is the hash of the current compilation.
+    // It's a global variable injected by Webpack.
+    return mostRecentCompilationHash !== __webpack_hash__;
+}
+// Webpack disallows updates in other states.
+function canApplyUpdates() {
+    return module.hot.status() === 'idle';
+}
+// Attempt to update code on the fly, fall back to a hard reload.
+function tryApplyUpdates(onHotUpdateSuccess) {
+    return __awaiter(this, void 0, void 0, function* () {
+        if (!module.hot) {
+            // HotModuleReplacementPlugin is not in Webpack configuration.
+            console.error('HotModuleReplacementPlugin is not in Webpack configuration.');
+            // window.location.reload();
+            return;
+        }
+        if (!isUpdateAvailable() || !canApplyUpdates()) {
+            ErrorOverlay.dismissBuildError();
+            // HMR failed, need to refresh
+            if (module.hot.status() === 'fail') {
+                window.location.reload();
+            }
+            return;
+        }
+        function handleApplyUpdates(err, updatedModules) {
+            const needForcedReload = err || !updatedModules || hadRuntimeError;
+            if (needForcedReload) {
+                ErrorOverlay.reportRuntimeError(err);
+                if (hadRuntimeError) {
+                    hadRuntimeError = false;
+                    window.location.reload();
+                }
+                hadRuntimeError = true;
+            }
+            if (typeof onHotUpdateSuccess === 'function') {
+                // Maybe we want to do something.
+                onHotUpdateSuccess();
+            }
+            if (isUpdateAvailable()) {
+                // While we were updating, there was a new update! Do it again.
+                tryApplyUpdates();
+            }
+        }
+        // https://webpack.js.org/api/hot-module-replacement/#check
+        try {
+            const updatedModules = yield module.hot.check(/* autoApply */ true);
+            handleApplyUpdates(null, updatedModules);
+        }
+        catch (err) {
+            handleApplyUpdates(err, null);
+        }
+    });
+}

package/lib/utils/verifyTypeScriptSetup.d.ts

@@ -0,0 +1,5 @@
+export declare function verifyTypeScriptSetup({ projectDir, srcDir, onTsConfig }: {
+    projectDir: string;
+    srcDir: string;
+    onTsConfig?: (config: any, parsedConfig: any, parsedCompilerOptions: any) => void;
+}): Promise<void>;

package/lib/utils/verifyTypeScriptSetup.js

@@ -0,0 +1,229 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const chalk_1 = __importDefault(require("@shuvi/utils/lib/chalk"));
+const resolve_1 = __importDefault(require("@shuvi/utils/lib/resolve"));
+const recursiveReaddir_1 = require("@shuvi/utils/lib/recursiveReaddir");
+const fs_1 = __importDefault(require("fs"));
+const os_1 = __importDefault(require("os"));
+const path_1 = __importDefault(require("path"));
+const util_1 = require("util");
+const fileExists = util_1.promisify(fs_1.default.exists);
+const writeFile = util_1.promisify(fs_1.default.writeFile);
+const readFile = util_1.promisify(fs_1.default.readFile);
+function writeJson(fileName, object) {
+    return writeFile(fileName, JSON.stringify(object, null, 2).replace(/\n/g, os_1.default.EOL) + os_1.default.EOL);
+}
+function hasTypeScript(dir) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const typescriptFiles = yield recursiveReaddir_1.recursiveReadDir(dir, {
+            filter: /.*\.(ts|tsx)$/,
+            ignore: /(node_modules|.*\.d\.ts)/
+        });
+        return typescriptFiles.length > 0;
+    });
+}
+function checkDependencies({ dir, isYarn }) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const requiredPackages = [
+            { file: 'typescript', pkg: 'typescript' },
+            { file: '@types/react/index.d.ts', pkg: '@types/react' },
+            { file: '@types/node/index.d.ts', pkg: '@types/node' }
+        ];
+        let resolutions = new Map();
+        const missingPackages = requiredPackages.filter(p => {
+            try {
+                resolutions.set(p.pkg, resolve_1.default.sync(p.file, { basedir: `${dir}/` }));
+                return false;
+            }
+            catch (_) {
+                return true;
+            }
+        });
+        if (missingPackages.length < 1) {
+            return resolutions.get('typescript');
+        }
+        const packagesHuman = missingPackages
+            .map((p, index, { length }) => (index > 0
+            ? index === length - 1
+                ? length > 2
+                    ? ', and '
+                    : ' and '
+                : ', '
+            : '') + p.pkg)
+            .join('');
+        const packagesCli = missingPackages.map(p => p.pkg).join(' ');
+        console.error(chalk_1.default.bold.red(`It looks like you're trying to use TypeScript but do not have the required package(s) installed.`));
+        console.error();
+        console.error(chalk_1.default.bold(`Please install ${chalk_1.default.bold(packagesHuman)} by running:`));
+        console.error();
+        console.error(`\t${chalk_1.default.bold.cyan((isYarn ? 'yarn add --dev' : 'npm install --save-dev') + ' ' + packagesCli)}`);
+        console.error();
+        console.error(chalk_1.default.bold('If you are not trying to use TypeScript, please remove the ' +
+            chalk_1.default.cyan('tsconfig.json') +
+            ' file from your package root (and any TypeScript files).'));
+        console.error();
+        process.exit(1);
+    });
+}
+function verifyTypeScriptSetup({ projectDir, srcDir, onTsConfig }) {
+    var _a;
+    return __awaiter(this, void 0, void 0, function* () {
+        const tsConfigPath = path_1.default.join(projectDir, 'tsconfig.json');
+        const yarnLockFile = path_1.default.join(projectDir, 'yarn.lock');
+        const hasTsConfig = yield fileExists(tsConfigPath);
+        const isYarn = yield fileExists(yarnLockFile);
+        let firstTimeSetup = false;
+        if (hasTsConfig) {
+            const tsConfig = yield readFile(tsConfigPath, 'utf8').then(val => val.trim());
+            firstTimeSetup = tsConfig === '' || tsConfig === '{}';
+        }
+        else {
+            const hasTypeScriptFiles = yield hasTypeScript(srcDir);
+            if (hasTypeScriptFiles) {
+                firstTimeSetup = true;
+            }
+            else {
+                return;
+            }
+        }
+        const tsPath = yield checkDependencies({ dir: projectDir, isYarn });
+        const ts = (yield Promise.resolve().then(() => __importStar(require(tsPath))));
+        const compilerOptions = {
+            // These are suggested values and will be set when not present in the
+            // tsconfig.json
+            // 'parsedValue' matches the output value from ts.parseJsonConfigFileContent()
+            target: {
+                parsedValue: ts.ScriptTarget.ES5,
+                suggested: 'es5'
+            },
+            lib: { suggested: ['dom', 'dom.iterable', 'esnext'] },
+            allowJs: { suggested: true },
+            skipLibCheck: { suggested: true },
+            strict: { suggested: false },
+            forceConsistentCasingInFileNames: { suggested: true },
+            noEmit: { suggested: true },
+            // These values are required and cannot be changed by the user
+            // Keep this in sync with the webpack config
+            esModuleInterop: {
+                value: true,
+                reason: 'requirement for babel'
+            },
+            module: {
+                parsedValue: ts.ModuleKind.ESNext,
+                value: 'esnext',
+                reason: 'for dynamic import() support'
+            },
+            moduleResolution: {
+                parsedValue: ts.ModuleResolutionKind.NodeJs,
+                value: 'node',
+                reason: 'to match webpack resolution'
+            },
+            resolveJsonModule: { value: true },
+            isolatedModules: {
+                value: true,
+                reason: 'requirement for babel'
+            },
+            jsx: { parsedValue: ts.JsxEmit.Preserve, value: 'preserve' }
+        };
+        const formatDiagnosticHost = {
+            getCanonicalFileName: (fileName) => fileName,
+            getCurrentDirectory: ts.sys.getCurrentDirectory,
+            getNewLine: () => os_1.default.EOL
+        };
+        if (firstTimeSetup) {
+            console.log(chalk_1.default.yellow(`We detected TypeScript in your project and created a ${chalk_1.default.bold('tsconfig.json')} file for you.`));
+            console.log();
+            yield writeJson(tsConfigPath, {});
+        }
+        const messages = [];
+        let appTsConfig;
+        let parsedTsConfig;
+        let parsedCompilerOptions;
+        try {
+            const { config: readTsConfig, error } = ts.readConfigFile(tsConfigPath, ts.sys.readFile);
+            if (error) {
+                throw new Error(ts.formatDiagnostic(error, formatDiagnosticHost));
+            }
+            appTsConfig = readTsConfig;
+            // Get TS to parse and resolve any "extends"
+            // Calling this function also mutates the tsconfig, adding in "include" and
+            // "exclude", but the compilerOptions remain untouched
+            parsedTsConfig = JSON.parse(JSON.stringify(readTsConfig));
+            const result = ts.parseJsonConfigFileContent(parsedTsConfig, ts.sys, path_1.default.dirname(tsConfigPath));
+            if (result.errors) {
+                result.errors = result.errors.filter(({ code }) => 
+                // No inputs were found in config file
+                code !== 18003);
+            }
+            if ((_a = result.errors) === null || _a === void 0 ? void 0 : _a.length) {
+                throw new Error(ts.formatDiagnostic(result.errors[0], formatDiagnosticHost));
+            }
+            parsedCompilerOptions = result.options;
+        }
+        catch (e) {
+            if (e && e.name === 'SyntaxError') {
+                console.error(chalk_1.default.red.bold('Could not parse', chalk_1.default.cyan('tsconfig.json') + '.', 'Please make sure it contains syntactically correct JSON.'));
+            }
+            console.info((e === null || e === void 0 ? void 0 : e.message) ? `${e.message}` : '');
+            process.exit(1);
+            return;
+        }
+        if (appTsConfig.compilerOptions == null) {
+            appTsConfig.compilerOptions = {};
+            firstTimeSetup = true;
+        }
+        for (const option of Object.keys(compilerOptions)) {
+            const { parsedValue, value, suggested, reason } = compilerOptions[option];
+            const valueToCheck = parsedValue === undefined ? value : parsedValue;
+            const coloredOption = chalk_1.default.cyan('compilerOptions.' + option);
+            if (suggested != null) {
+                if (parsedCompilerOptions[option] === undefined) {
+                    appTsConfig.compilerOptions[option] = suggested;
+                    messages.push(`${coloredOption} to be ${chalk_1.default.bold('suggested')} value: ${chalk_1.default.cyan.bold(suggested)} (this can be changed)`);
+                }
+            }
+            else if (parsedCompilerOptions[option] !== valueToCheck) {
+                appTsConfig.compilerOptions[option] = value;
+                messages.push(`${coloredOption} ${chalk_1.default.bold(valueToCheck == null ? 'must not' : 'must')} be ${valueToCheck == null ? 'set' : chalk_1.default.cyan.bold(value)}` +
+                    (reason != null ? ` (${reason})` : ''));
+            }
+        }
+        if (onTsConfig) {
+            onTsConfig(appTsConfig, parsedTsConfig, parsedCompilerOptions);
+        }
+        if (messages.length > 0) {
+            if (firstTimeSetup) {
+                console.info(chalk_1.default.bold('Your', chalk_1.default.cyan('tsconfig.json'), 'has been populated with default values.'));
+                console.info();
+            }
+            else {
+                console.warn(chalk_1.default.bold('The following changes are being made to your', chalk_1.default.cyan('tsconfig.json'), 'file:'));
+                messages.forEach(message => {
+                    console.warn('  - ' + message);
+                });
+                console.warn();
+            }
+            yield writeJson(tsConfigPath, appTsConfig);
+        }
+    });
+}
+exports.verifyTypeScriptSetup = verifyTypeScriptSetup;

package/lib/webpack/config/base.d.ts

@@ -0,0 +1,16 @@
+import WebpackChain from 'webpack-chain';
+export interface BaseOptions {
+    dev: boolean;
+    name: string;
+    projectRoot: string;
+    srcDirs: string[];
+    mediaFilename: string;
+    buildManifestFilename: string;
+    target?: string;
+    publicPath?: string;
+    env?: {
+        [x: string]: string;
+    };
+}
+export { WebpackChain };
+export declare function baseWebpackChain({ dev, projectRoot, srcDirs, mediaFilename, name, buildManifestFilename, publicPath, env }: BaseOptions): WebpackChain;